Best practices in website design
-
Upload
tabby-farney -
Category
Technology
-
view
226 -
download
2
description
Transcript of Best practices in website design
![Page 1: Best practices in website design](https://reader035.fdocuments.net/reader035/viewer/2022062512/5542223f5503464e1d8b45df/html5/thumbnails/1.jpg)
Best Practices in Website Design
Tabatha FarneyAssistant ProfessorDirector of Web Services & Emerging Technologies University of Colorado Colorado Springs
[email protected] @sharebrarian
Introduction to
![Page 2: Best practices in website design](https://reader035.fdocuments.net/reader035/viewer/2022062512/5542223f5503464e1d8b45df/html5/thumbnails/2.jpg)
Simplifying the Design Process
Pre-design Phase
Design Phase
Sustaining Success
![Page 3: Best practices in website design](https://reader035.fdocuments.net/reader035/viewer/2022062512/5542223f5503464e1d8b45df/html5/thumbnails/3.jpg)
Pre-design Phase
![Page 4: Best practices in website design](https://reader035.fdocuments.net/reader035/viewer/2022062512/5542223f5503464e1d8b45df/html5/thumbnails/4.jpg)
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
![Page 5: Best practices in website design](https://reader035.fdocuments.net/reader035/viewer/2022062512/5542223f5503464e1d8b45df/html5/thumbnails/5.jpg)
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
![Page 6: Best practices in website design](https://reader035.fdocuments.net/reader035/viewer/2022062512/5542223f5503464e1d8b45df/html5/thumbnails/6.jpg)
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/
![Page 7: Best practices in website design](https://reader035.fdocuments.net/reader035/viewer/2022062512/5542223f5503464e1d8b45df/html5/thumbnails/7.jpg)
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
![Page 8: Best practices in website design](https://reader035.fdocuments.net/reader035/viewer/2022062512/5542223f5503464e1d8b45df/html5/thumbnails/8.jpg)
Basic Question #4
How do you want your site being used?
“Walkway,” Stock image by clshearin from freeimages.com
![Page 9: Best practices in website design](https://reader035.fdocuments.net/reader035/viewer/2022062512/5542223f5503464e1d8b45df/html5/thumbnails/9.jpg)
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
![Page 10: Best practices in website design](https://reader035.fdocuments.net/reader035/viewer/2022062512/5542223f5503464e1d8b45df/html5/thumbnails/10.jpg)
Some Advice
Be aware of your limitations
![Page 11: Best practices in website design](https://reader035.fdocuments.net/reader035/viewer/2022062512/5542223f5503464e1d8b45df/html5/thumbnails/11.jpg)
Design Phase
![Page 12: Best practices in website design](https://reader035.fdocuments.net/reader035/viewer/2022062512/5542223f5503464e1d8b45df/html5/thumbnails/12.jpg)
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
![Page 13: Best practices in website design](https://reader035.fdocuments.net/reader035/viewer/2022062512/5542223f5503464e1d8b45df/html5/thumbnails/13.jpg)
Common Design Layouts
Traditional Grid Models
Header
Sidebar
Footer
Main Body
Header
Footer
Navigation
Main Body
Main Body
Main Body
![Page 14: Best practices in website design](https://reader035.fdocuments.net/reader035/viewer/2022062512/5542223f5503464e1d8b45df/html5/thumbnails/14.jpg)
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/
![Page 15: Best practices in website design](https://reader035.fdocuments.net/reader035/viewer/2022062512/5542223f5503464e1d8b45df/html5/thumbnails/15.jpg)
Current Trends in Design
One page sites
Clean designs
Text light, Image rich
![Page 16: Best practices in website design](https://reader035.fdocuments.net/reader035/viewer/2022062512/5542223f5503464e1d8b45df/html5/thumbnails/16.jpg)
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”
![Page 17: Best practices in website design](https://reader035.fdocuments.net/reader035/viewer/2022062512/5542223f5503464e1d8b45df/html5/thumbnails/17.jpg)
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
![Page 18: Best practices in website design](https://reader035.fdocuments.net/reader035/viewer/2022062512/5542223f5503464e1d8b45df/html5/thumbnails/18.jpg)
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
![Page 19: Best practices in website design](https://reader035.fdocuments.net/reader035/viewer/2022062512/5542223f5503464e1d8b45df/html5/thumbnails/19.jpg)
Sustaining Your Success Phase
![Page 20: Best practices in website design](https://reader035.fdocuments.net/reader035/viewer/2022062512/5542223f5503464e1d8b45df/html5/thumbnails/20.jpg)
Right Mindset
All websites are in perpetual beta
![Page 21: Best practices in website design](https://reader035.fdocuments.net/reader035/viewer/2022062512/5542223f5503464e1d8b45df/html5/thumbnails/21.jpg)
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
![Page 22: Best practices in website design](https://reader035.fdocuments.net/reader035/viewer/2022062512/5542223f5503464e1d8b45df/html5/thumbnails/22.jpg)
When is it Time to Redesign?
![Page 23: Best practices in website design](https://reader035.fdocuments.net/reader035/viewer/2022062512/5542223f5503464e1d8b45df/html5/thumbnails/23.jpg)
Conclusion
![Page 24: Best practices in website design](https://reader035.fdocuments.net/reader035/viewer/2022062512/5542223f5503464e1d8b45df/html5/thumbnails/24.jpg)
Simplifying the Design Process
Pre-design Phase
Design Phase
Sustaining Success
![Page 25: Best practices in website design](https://reader035.fdocuments.net/reader035/viewer/2022062512/5542223f5503464e1d8b45df/html5/thumbnails/25.jpg)
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/ )
![Page 26: Best practices in website design](https://reader035.fdocuments.net/reader035/viewer/2022062512/5542223f5503464e1d8b45df/html5/thumbnails/26.jpg)
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