Embed Size (px)
Citation preview
Navigating Web in a Technical Land
Eric Sembrat
You’re Speaking Drupalese to Me
Hi! I’m Eric.
Eric Scott SembratWeb Manager @ College of Engineering
twitter: @esembratweb: webbeh.com
Thanks for having me!
Please ask questions at any time!
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!
Raise Your Hand If….
Raise Your Hand If….
You have edited a website.
Raise Your Hand If….
You have built a website.
Raise Your Hand If….
You are the lead to build a
website for your event(s).
Raise Your Hand If….
You have been frustrated by something on
the web.
Let’s get started!
Please ask questions at any time!
Phase 1:
Web Best Practices
Web Development 101Most organizations, campuses, and institutions now leverage content management systems for building and maintaining websites.
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.
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.
For Event Planning…
Your likely budget for web development for an event is…
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.
3 Main Points
1. Write for your audiences. 2. Do not reinvent the wheel unless necessary. 3. Organically organize your content.
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.
Who are your audiences for your event websites?
Break Out
Question!
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.
Writing for Audiences
Keep in mind the mobile and tablet audience.
These audiences account for 20-30% of your traffic.
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.
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’.
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.
Organic Organization
Organic Organization
It is imperative to structure your menu and pages in a logical fashion.
Organic Organization
It is imperative to structure your menu and pages in a logical fashion.
Phase 2:
Building Event Websites
Before We Begin.
Let’s talk about some things that make an event website function.
What features do you hope to see on an event
website?
Break Out
Break Out
Show and Tell
What features do you dread to see on an event
website?
Break Out
Break Out
Show and Tell
Where to Begin?
1. Create a list of pages for your website. 2. Organize those pages into structured menus. 3. Begin writing content.
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.
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
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.
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
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
Writing Content
Creating content (text, photos, videos) for your pages.
A few key pointers for building attractive and engaging content.
Writing Content
Large (full-width) photos work great for good photography.
Writing Content
Large (full-width) photos work great for good photography.
Can you determine what this is?
Imagine being on a mobile device!
Headers
Heading text styles allow websites to have hierarchical browsing for search engines, screen readers, and end-users to navigate.
Headers
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)
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.
That being said…
Fancy Things
That’s where tools (plugins, services, web applications) come into play.
These tools supplement your content.
Phase 3:
Tools You Can Use… Today!
Tools
Let’s discuss some tools and services that will help you make your website the best it can be!
What tools are other folks using?
Break Out
Question!
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/
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.
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.
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.
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.
Google Analytics
Google Analytics
College rankings released.
Eventbrite
Eventbrite is the easiest way to manage tickets, registration for a (free, paid) event.
Eventbrite also allows hassle-free attendee exports.
YouTube
Use YouTube whenever possible for video.
Benefits: 1.) Captioning (legal requirement). 2.) Cross-platform compatibility. 3.) Ease of use, upload, embed.
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.
Trello (project mgmt.)
Need help keeping ahead of deadlines, projects, tasks, and deliverables for your event? Trello provides small-team project management for free.
Well, that’s it for me!
Eric Scott SembratWeb Manager @ College of Engineering
twitter: @esembratweb: webbeh.com
