best practices in website design
DESCRIPTION
Presented at the Create Something Great workshop for the Douglas County School Distract in Colorado on October 21, 2014. This slidedeck provides a broad overview of web design practices.TRANSCRIPT
Best Practices in Website Design
Tabatha FarneyAssistant ProfessorDirector of Web Services & Emerging Technologies University of Colorado Colorado Springs
[email protected] @sharebrarian
Introduction to
Simplifying the Design Process
Pre-design Phase
Design Phase
Sustaining Success
Pre-design Phase
New site vs. Redesigning
New SitePlanning process starts with asking some basic questions.
Redesign a SiteAssess the current site doing a website inventory* and then ask those basic questions.
Sample Website Inventory at: http://www.uccs.edu/~tfarney/presentations/web_inventory_activity.pdf
Basic Question #1
What’s the purpose of your site?
Primary Purpose: Main reason the site was made• Typically 1 per site
Secondary Purpose: Additional, but other intended uses of the site• Can have more than 1
Basic Question #2
Who should be using your site?
“Learning to Collaborate,” mhall426, flickr https://www.flickr.com/photos/mhall426/2367776666/in/gallery-42817056@N07-72157626012115833/
Basic Question #3
What content is essential to the site’s purpose?
“7 Marketing Cliches that Make you Sound like a Hack,” WordStream Blog, June 4, 2014. http://www.wordstream.com/blog/ws/2014/06/04/marketing-cliches
Basic Question #4
How do you want your site being used?
“Walkway,” Stock image by clshearin from freeimages.com
Few Essential Concepts
Content Strategy“Content Strategy focuses on the planning, creation, delivery, and governance of content.” usability.gov• Content has a life cycle• Content needs to accessible
Information Architecture“Information architecture (IA) focuses on organizing, structuring, and labeling content in an effective and sustainable way.” usability.gov• Searchable v. browsable• Functional site navigation and organization
Some Advice
Be aware of your limitations
Design Phase
Web Design Layouts
Content, users, and purpose (context) will help decide your layout
Lou Rosenfeld and Peter Morville’s venn diagram showing the Information Ecology: context, content, users. Found on usability.gov
Common Design Layouts
Traditional Grid Models
Header
Sidebar
Footer
Main Body
Header
Footer
Navigation
Main Body
Main Body
Main Body
Responsive Design
Responsive Design = design that optimizes to the user’s behavior and technology.
Filament Group example of responsive design on Smashing Magazine, http://www.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
Current Trends in Design
One page sites
Clean designs
Text light, Image rich
Dos and Don’ts in Web Design
Don’ts• Forget basic accessibility principles
• Use alt tags for images
• Don’t just rely on color to indicate links
• Avoid text-based images and frames
• Use those head tags (<h1>,<h2>, etc)
• Don’t use <table> tags to layout regular content
• Create content that doesn’t contribute to the site’s intended purpose
• Overwrite code (CMS environments)
• Don’t design a site just to be “pretty”
Dos and Don’ts in Web Design
Dos• Keep text concise and minimal
• Clearly different links from text
• Work with a color palette or theme
• Use a grid when designing
• Identify the major desired actions of the page and design with them in mind
• Test and tweak
Guerilla Usability Testing
Guerilla usability testing is informal usability testing.
“Guerilla Usability Testing,” SlideShare presentation by Andy Budd, June 5, 2008. http://www.slideshare.net/andybudd/guerilla-usability-testing
• Usually task-based • Still need clear performance
metrics• Data analysis happens post
testing
Sustaining Your Success Phase
Right Mindset
All websites are in perpetual beta
Measuring Success
Web Analytics Strategy
“Developing a Web Analytics Strategy for Your Library: Using Data to Measure Success,” http://www.uccs.edu/~tfarney/webanalytics_strategy.html
When is it Time to Redesign?
Conclusion
Simplifying the Design Process
Pre-design Phase
Design Phase
Sustaining Success
Great Resources
Web Design Inspiration & ResourcesCSS Zen Garden, http://www.csszengarden.com/
Smashing Magazine, http://www.smashingmagazine.com/
“Responsive Web Design,” A List Apart, May 25, 2010, http://alistapart.com/article/responsive-web-design
Color Schemer, http://www.colorschemer.com/
Web Accessibility“Introduction to Web Accessibility,” W3C Web Accessibility Initiative, http://www.w3.org/WAI/intro/accessibility.php
“Introduction to Web Accessibility,” WebAIM, http://webaim.org/intro/
Just a note: This slide was designed after the Handcrafted theme by Elliot Jay Stocks found on CSS Zen Garden (http://www.csszengarden.com/217/ )
Great Resources
Usability Testing Resources“The Art of Guerilla Usability Testing,” UXBooth, http://www.uxbooth.com/articles/the-art-of-guerilla-usability-testing/
Usability.gov, http://www.usability.gov/
Web AnalyticsFarney, Tabatha and Nina McHale. Web Analytics Strategies for Information Professionals: A LITA Guide. Chicago: ALA TechSource, 2013.
Kaushik, Avinash. Web Analytics 2.0: The Art of Online Accountability and Science of Customer Centricity. Indianapolis, Wiley, 2010.
“Google Analytics Tutorial for Beginners 2014,” https://www.youtube.com/watch?v=I7YA1oZhevo