Resources
From: Karen Lynne Sorensen 3/24/05
Less is More – Redesigning a Local Government Web Site for 2005+
Some design tips and references used for www.jcw.org
DESIGN TIPS!
• Layout
Use two panel layout, not three
Think vertically, not horizontally
Percentage and relative sizing “are your layout friends”
• Use CSS
Set paragraphs with top and bottom margins to 1em to eliminate use of tags
Limit fonts to three sizes
Heading tags yield greatest font control
Limit special font effects to bold/strong type
• Minimize Javascript
W3 approves of JS but have an alternative ready
• Color
Check your site in grayscale
For maximum readability(?): blue, black, dark gray, yellow balanced with good use of white space
• Graphics
Aim for 120 pixels maximum target width for graphics
Use ALT tags
Keep pages under 50k
• Proper DOCTYPE declaration
REFERENCES
• Designing for the Small Screen - The End-All Guide to Small-Screen Web-Dev
http://hotwired.lycos.com/webmonkey/04/12/index4a_page2.html?tw=design
• Authoring for Small-Screen Rendering (SSR)
http://www.opera.com/products/mobile/dev/
• Latest Websafe Color Palette
http://webmonkey.wired.com/webmonkey/00/37/index2a_page5.html?tw=design
• Simulate and test for various color vision at http://vischeck.com
• Validate!
http://webmonkey.wired.com/webmonkey/00/50/index2a_page2.html?tw=authoring
http://www.Xmlsoft.org
http://www.validator.w3.org.
Note: can do this within DreamWeaver MX
• More browser testing
http://www.delorie.com/web/
• Accessibility Tools
http://accessify.com/tools-and-wizards/default.asp
• More recommended sites and articles on redesigning a site:
http://www.alistapart.com/articles/journey/
http://www.macromedia.com/devnet/mx/dreamweaver/articles/css_practices.html
• Screen to print
http://www.macromedia.com/devnet/mx/dreamwaver/araticles/screen_to_print.html
• How to create a bookmark icon
http://webmonkey.wired.com/webmonkey/01/18/index1a_page7.html
• Templates that ship with Dreamweaver MX 2004
http://www.macromedia.com/cfusion/knowledgebase/index.cfm?id=tn_18886
http://www.macromedia.com/devnet/mx/dreamweaver/articles/dissecting_halo.html
• Book on redesigning a site?
Web ReDesign/Workfow that Works via http://www.web-redesign.com
Plus some more Web site design & usability books at http://www.usernomics.com/human-factors-books-website-design0.html
From: Karen Lynne Sorensen 3/24/05
Less is More – Redesigning a Local Government Web Site for 2005+
Some design tips and references used for www.jcw.org
DESIGN TIPS!
• Layout
Use two panel layout, not three
Think vertically, not horizontally
Percentage and relative sizing “are your layout friends”
• Use CSS
Set paragraphs with top and bottom margins to 1em to eliminate use of tags
Limit fonts to three sizes
Heading tags yield greatest font control
Limit special font effects to bold/strong type
• Minimize Javascript
W3 approves of JS but have an alternative ready
• Color
Check your site in grayscale
For maximum readability(?): blue, black, dark gray, yellow balanced with good use of white space
• Graphics
Aim for 120 pixels maximum target width for graphics
Use ALT tags
Keep pages under 50k
• Proper DOCTYPE declaration
REFERENCES
• Designing for the Small Screen - The End-All Guide to Small-Screen Web-Dev
http://hotwired.lycos.com/webmonkey/04/12/index4a_page2.html?tw=design
• Authoring for Small-Screen Rendering (SSR)
http://www.opera.com/products/mobile/dev/
• Latest Websafe Color Palette
http://webmonkey.wired.com/webmonkey/00/37/index2a_page5.html?tw=design
• Simulate and test for various color vision at http://vischeck.com
• Validate!
http://webmonkey.wired.com/webmonkey/00/50/index2a_page2.html?tw=authoring
http://www.Xmlsoft.org
http://www.validator.w3.org.
Note: can do this within DreamWeaver MX
• More browser testing
http://www.delorie.com/web/
• Accessibility Tools
http://accessify.com/tools-and-wizards/default.asp
• More recommended sites and articles on redesigning a site:
http://www.alistapart.com/articles/journey/
http://www.macromedia.com/devnet/mx/dreamweaver/articles/css_practices.html
• Screen to print
http://www.macromedia.com/devnet/mx/dreamwaver/araticles/screen_to_print.html
• How to create a bookmark icon
http://webmonkey.wired.com/webmonkey/01/18/index1a_page7.html
• Templates that ship with Dreamweaver MX 2004
http://www.macromedia.com/cfusion/knowledgebase/index.cfm?id=tn_18886
http://www.macromedia.com/devnet/mx/dreamweaver/articles/dissecting_halo.html
• Book on redesigning a site?
Web ReDesign/Workfow that Works via http://www.web-redesign.com
Plus some more Web site design & usability books at http://www.usernomics.com/human-factors-books-website-design0.html
Text-only Page
Search
Search
Coming Soon!