A primer on navigating web in a technical land for event coordinators in higher education.

1. Navigating Web in a Technical Land
Eric Sembrat
You’re Speaking
Drupalese to Me

2. Hi! I’m Eric.

3. Eric Scott Sembrat
Web Manager @ College of Engineering
twitter: @esembrat
web: webbeh.com

4. Thanks for
having me!
Please ask questions at any time!

5. Note
Some of this will pertain partly to
Georgia Tech services and systems.
Feel free to ask for
clarification if I do not
generalize enough!

6. Raise Your Hand If….

7. Raise Your Hand If….
You have
edited a
website.

8. Raise Your Hand If….
You have built
a website.

9. Raise Your Hand If….
You are the
lead to build a
website for
your event(s).

10. Raise Your Hand If….
You have been
frustrated by
something on
the web.

11. Let’s get
started!
Please ask questions at any time!

12. Phase 1:
Web Best
Practices

13. Web Development 101
Most organizations, campuses, and
institutions now leverage content
management systems for building and
maintaining websites.

14. What does Open
Source Mean?
Open Source just means that the product is
freely developed, distributed, and supported
by its community.
It does not imply any security issues,
vulnerabilities, or inadequacies.
Much of higher education uses open source
for web development.

15. Just Because It’s Free…
The cost, rather than being on the product,
is in the users supporting and building
specific content for the system.
Most campuses (like Georgia Tech) open up
work created for the system to all of
campus and beyond.

16. Find Out More…
http://www.comm.gatech.edu/brand/websites

17. For Event Planning…
Your likely budget for web development for
an event is…

18. That Being Said…
Our goal, then, is to make due with what
services and features (on- and off-campus)
we have!
But before then, let’s consider a few things
to consider when building a website.

19. 3 Main Points
1. Write for your audiences.
2. Do not reinvent the wheel unless necessary.
3. Organically organize your content.

20. Who is your audience?
The primary purchase of your website is to
appeal to your expected visitors and browsers.
This allows you to shape and mold your website
around those expected use-cases.

21. Who are your audiences
for your event websites?
Question!

22. Audience
Keep in mind your key audiences (visitors) who
will be visiting your website.
All of your text, menu links, and photos should
be easy to understand and relate to the
website’s purpose.
Keep acronyms, institute lingo, and technical
gibberish to a minimum.

23. Writing for Audiences
Keep in mind the mobile and
tablet audience.
These audiences account
for 20-30% of your traffic.

24. Writing for Audiences
Keeping mind how small these screens are for
reading, it’s good practice to keep your content
concise.
Rely on standard methods of separating content
(in-page links, menu organization) over long and
text-heavy pages.

25. Resist Reinventing
Remember that organization-provided web tools
and resources are your best friend.
Creating a custom theme or website layout is
usually not an efficient usage of time.
Most of your end-users will never complain
about things being ‘too similar’.

28. Organic Organization
It is imperative to structure your menu and page
content to be easy to understand.
In addition, don’t be afraid to spread out content
between numerous pages. Remember to link
where needed.

29. Organic Organization

30. Organic Organization
It is imperative to structure your menu and
pages in a logical fashion.

31. Organic Organization
It is imperative to structure your menu and
pages in a logical fashion.

32. Phase 2:
Building Event
Websites

33. Before We Begin.
Let’s talk about some things that make an event
website function.

34. What features do you
hope to see on an event
website?
Break
Out

35. Show and Tell

36. What features do you
dread to see on an event
website?
Break
Out

37. Show and Tell

38. Where to Begin?
1. Create a list of pages for your website.
2. Organize those pages into structured menus.
3. Begin writing content.

39. Determining Pages
Think about what content you want to give out
to your end-users on your website.
You should ideally have one page for each
chunk of content on your website.

40. Determining Pages
Let’s consider a web development event:
Speakers
Registration
Location
About Us
Traveling
Sponsors
Contact Us
Become a Member
Become a Sponsor
Submit a Proposal

41. Creating Menus
Once you have your list of pages, creating
menus are as easy as stacking them under one-
another.
Common ways of doing this are:
1) Sticky notes.
2) Excel spreadsheet.
3) Whiteboard.

42. Creating Menus
Let’s consider a web development event:
Speakers
Registration
Location
About Us
Traveling
Sponsors
Contact Us
Become a Member
Become a Sponsor
Submit a Proposal

43. Creating Menus
Let’s consider a web development event:
Speakers
Registration
Location
About Us
Traveling
Sponsors
Contact Us
Become a Member
Become a Sponsor Submit a Proposal

44. Writing Content
Creating content (text, photos, videos) for your
pages.
A few key pointers for building attractive and
engaging content.

45. Writing Content
Large (full-width) photos work great for good
photography.

46. Writing Content
Large (full-width) photos work great for good
photography.
Can you determine what this is?
Imagine being on a mobile device!

47. Headers
Heading text styles allow websites to have
hierarchical browsing for search engines, screen
readers, and end-users to navigate.

48. Headers

49. Headers
• Header 1
• Header 2
• Header 3
• Header 4
• Header 5
• Header 6
• Header 2 (1)
• Header 3 (1)
• Header 4 (1)
• Header 2 (2)

50. Please Do Not
• Use tables to structure sidebars, content.
• Use unexpected color combinations
• Use super small/undersized photos.
• Use photos without providing ‘alt text’.
• Use ‘click here’ link text.

51. That being said…

52. Fancy Things
That’s where tools (plugins, services, web
applications) come into play.
These tools supplement your content.

53. Phase 3:
Tools You Can
Use… Today!

54. Tools
Let’s discuss some tools and services that will
help you make your website the best it can be!

55. What tools are other
folks using?
Question!

56. WordPress Websites
Professional Web Presence is our shared
WordPress hosting on campus.
http://pwp.gatech.edu/
For non-Georgia Tech folks, consider using
wordpress.com for a similar experience.
https://wordpress.com/

57. SEO
For Search Engine Optimization (SEO), most
content management systems come with many
tools out-of-the-box to help.
Note that your content determine your SEO
ranking above almost all other attributes.
However, plugins do exist for your website
system of choice to help.

58. Google Docs/Forms
Need to get a simple form out there?
Google Forms (part of Google Docs) is free,
allows for exporting responses to a
spreadsheet, and is mobile-friendly.
Also worth noting that the Google Docs suite
(docs, sheets) are great for collaborative
working.

59. Google Drive
If you need to share a folder between
participants, Google Drive works flawlessly.
And it also works out-of-the-box with Google
Docs/Forms products as well.

60. Google Analytics
The forefront in visitor, search tracking and
statistics.
Key for determining:
1. How visitors are getting to your website.
2. Where visitors are browsing to.
3. Time-sensitive traffic flows.

61. Google Analytics

62. Google Analytics
College rankings released.

63. Eventbrite
Eventbrite is the easiest way to manage tickets,
registration for a (free, paid) event.
Eventbrite also allows hassle-free attendee
exports.

64. YouTube
Use YouTube whenever possible for video.
Benefits:
1.) Captioning (legal requirement).
2.) Cross-platform compatibility.
3.) Ease of use, upload, embed.

65. AMAC
Need videos captioned or transcribed to meet
legal accessibility compliance?
AMAC ( http://amacusg.org/ ) provides low-cost
accurate captioning to University of Georgia
institutions.

66. Trello (project mgmt.)
Need help keeping ahead of deadlines, projects,
tasks, and deliverables for your event?
Trello provides small-team project management
for free.

69. Well, that’s it for
me!

70. Eric Scott Sembrat
Web Manager @ College of Engineering
twitter: @esembrat
web: webbeh.com