0
Website Design Dos and Don’ts  for a Successful Online Presence Brad Williams WebDevStudios.com
Who Am I?
Brad Williams CEO & Co-Founder, WebDevStudios.com Organizer NJ WordPress Meetup Co-Host SitePoint Podcast Advisor SitePoin...
<ul><li>Dos and Don’ts for website design </li></ul><ul><li>Tips on selecting a development company </li></ul><ul><li>Onli...
<ul><li>Use hierarchy (pages and sub-pages) where appropriate </li></ul><ul><li>Use dropdowns to save precious space </li>...
DO: Create easy to use navigation  Menu dropdown expands horizontally to maximize space Menu dropdown shows page hierarchy
DO: Create easy to use navigation  Website utilizes both horizontal and vertical menus Vertical menu showing page hierarchy
<ul><li>Web safe fonts are fonts supported by all major browsers and operating systems </li></ul><ul><li>Guarantees your v...
DO: Use web safe fonts
<ul><li>Internet Explorer 6/7/8 </li></ul><ul><li>Firefox 2/3/3.5 </li></ul><ul><li>Chrome 2/3 </li></ul><ul><li>Safari 3/...
DO: Test your website in ALL browsers  Using Internet Explorer 8
DO: Test your website in ALL browsers  Using Chrome 3
<ul><li>Don’t make it a challenge to contact you </li></ul><ul><li>Majority of traffic is looking for contact info </li></...
DO: Make contact info very accessible Contact information is easily found in the header And in the footer on every page of...
<ul><li>Sitemap contains links to all of your website pages </li></ul><ul><li>Helps navigating your site and finding resou...
DO: Create a website sitemap
DO: Create a website sitemap
DO: Create a website sitemap <url>  <loc>http://webdevstudios.com/</loc>  <lastmod>2009-02-05T04:43:39+00:00</lastmod>  <c...
<ul><li>Don’t move elements on each page </li></ul><ul><li>Keep navigation and other elements in the same spot throughout ...
<ul><li>Create good custom content related to your business </li></ul><ul><li>Will help generate new traffic and possible ...
<ul><li>WordPress.com </li></ul><ul><li>Blogger.com </li></ul><ul><li>LiveJournal.com </li></ul>DO: Create a blog and use ...
DO: Create a blog and use it
DONT: Use flash <ul><li>Search engines have trouble reading flash </li></ul><ul><li>Flash is not installed on every comput...
Your flash website on my iPhone
DONT: Use flash Adobe has an extensive list of  flash supported mobile devices http://www.adobe.com/mobile/supported_devic...
DONT: Have a splash screen <ul><li>Avoid extra clicks to enter your website </li></ul><ul><li>Visitors don’t want to see a...
DONT: Have a splash screen Source: http://www.bwaslotcars.com/
DONT: Play music on your website <ul><li>Music eats up valuable bandwidth, slowing your website load speeds </li></ul><ul>...
DONT: Host your own videos <ul><li>Videos eat up bandwidth and require a fast server and connection to load quickly </li><...
DONT: Use a crazy background <ul><li>Background images should be very subtle and not too busy </li></ul><ul><li>Navigation...
DONT: Use a crazy background Background overwhelms website design
DONT: Use a crazy background Background compliments website design
DONT: Use animated images
<ul><li>If they charge per page:  RUN! </li></ul><ul><li>Demand a CMS (Content Management System) </li></ul><ul><li>Ask ab...
<ul><li>Website Resources </li></ul><ul><ul><li>http://browsershots.org </li></ul></ul><ul><ul><li>http://www.sitemaps.org...
Brad Williams [email_address] Blog: strangework.com Twitter: @williamsba Everywhere else: williamsba Contact
Upcoming SlideShare
Loading in...5
×

Website Design Dos and Don’ts for a Successful Online Presence

4,111

Published on

My presentation on dos and don'ts for a successful website presented at the Asbury Park Press on October 29th, 2009.

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,111
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
55
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Website Design Dos and Don’ts for a Successful Online Presence"

  1. 1. Website Design Dos and Don’ts for a Successful Online Presence Brad Williams WebDevStudios.com
  2. 2. Who Am I?
  3. 3. Brad Williams CEO & Co-Founder, WebDevStudios.com Organizer NJ WordPress Meetup Co-Host SitePoint Podcast Advisor SitePoint Forums Co-Author of Professional WordPress (March 2010) Who Am I?
  4. 4. <ul><li>Dos and Don’ts for website design </li></ul><ul><li>Tips on selecting a development company </li></ul><ul><li>Online resources </li></ul>Topics
  5. 5. <ul><li>Use hierarchy (pages and sub-pages) where appropriate </li></ul><ul><li>Use dropdowns to save precious space </li></ul><ul><li>Don’t clutter your top level menu items </li></ul>DO: Create easy to use navigation
  6. 6. DO: Create easy to use navigation Menu dropdown expands horizontally to maximize space Menu dropdown shows page hierarchy
  7. 7. DO: Create easy to use navigation Website utilizes both horizontal and vertical menus Vertical menu showing page hierarchy
  8. 8. <ul><li>Web safe fonts are fonts supported by all major browsers and operating systems </li></ul><ul><li>Guarantees your visitors see what you see </li></ul><ul><li>Avoid any font licensing issues </li></ul>DO: Use web safe fonts
  9. 9. DO: Use web safe fonts
  10. 10. <ul><li>Internet Explorer 6/7/8 </li></ul><ul><li>Firefox 2/3/3.5 </li></ul><ul><li>Chrome 2/3 </li></ul><ul><li>Safari 3/4 </li></ul><ul><li>Opera 9/10 </li></ul>DO: Test your website in ALL browsers Great free resource: http://browsershots.org
  11. 11. DO: Test your website in ALL browsers Using Internet Explorer 8
  12. 12. DO: Test your website in ALL browsers Using Chrome 3
  13. 13. <ul><li>Don’t make it a challenge to contact you </li></ul><ul><li>Majority of traffic is looking for contact info </li></ul>DO: Make contact info very accessible
  14. 14. DO: Make contact info very accessible Contact information is easily found in the header And in the footer on every page of the website Source: http://www.lesliecatorealtor.com/home.asp
  15. 15. <ul><li>Sitemap contains links to all of your website pages </li></ul><ul><li>Helps navigating your site and finding resources easier </li></ul><ul><li>Used by search engines to find new pages to index </li></ul>DO: Create a website sitemap
  16. 16. DO: Create a website sitemap
  17. 17. DO: Create a website sitemap
  18. 18. DO: Create a website sitemap <url> <loc>http://webdevstudios.com/</loc> <lastmod>2009-02-05T04:43:39+00:00</lastmod> <changefreq>daily</changefreq> <priority>1.0</priority> </url> <url> <loc>http://webdevstudios.com/contact/</loc> <lastmod>2009-10-09T13:55:24+00:00</lastmod> <changefreq>weekly</changefreq> <priority>0.6</priority> </url> <url> <loc>http://webdevstudios.com/questions/</loc> <lastmod>2009-10-08T19:02:23+00:00</lastmod> <changefreq>weekly</changefreq> <priority>0.6</priority> </url> <url> <loc>http://webdevstudios.com/support/wordpress-plugins/</loc> <lastmod>2009-10-07T13:19:32+00:00</lastmod> <changefreq>weekly</changefreq> <priority>0.6</priority> </url> <url> <loc>http://webdevstudios.com/support/wordpress-plugins/nextgen-public-uploader/</loc> <lastmod>2009-10-05T23:24:52+00:00</lastmod> <changefreq>weekly</changefreq> <priority>0.6</priority> </url> <url> <loc>http://webdevstudios.com/support/</loc> <lastmod>2009-09-26T13:56:39+00:00</lastmod> <changefreq>weekly</changefreq> <priority>0.6</priority> </url> Sitemap protocol: http://www.sitemaps.org/protocol.php
  19. 19. <ul><li>Don’t move elements on each page </li></ul><ul><li>Keep navigation and other elements in the same spot throughout your website </li></ul><ul><li>Visitors expect all elements to appear in the same spot, don’t confuse them </li></ul>DO: Keep element placement consistent
  20. 20. <ul><li>Create good custom content related to your business </li></ul><ul><li>Will help generate new traffic and possible leads </li></ul><ul><li>Create at minimum 1 new post per week </li></ul><ul><li>Easiest/cheapest form of online marketing </li></ul>DO: Create a blog and use it
  21. 21. <ul><li>WordPress.com </li></ul><ul><li>Blogger.com </li></ul><ul><li>LiveJournal.com </li></ul>DO: Create a blog and use it Free blogging services:
  22. 22. DO: Create a blog and use it
  23. 23. DONT: Use flash <ul><li>Search engines have trouble reading flash </li></ul><ul><li>Flash is not installed on every computer </li></ul><ul><li>Flash is not supported by most cell phones </li></ul>Hindering navigation will result in lost traffic * Flash banners used correctly can be effective
  24. 24. Your flash website on my iPhone
  25. 25. DONT: Use flash Adobe has an extensive list of flash supported mobile devices http://www.adobe.com/mobile/supported_devices/ If you use flash make sure to offer a non-flash alternative
  26. 26. DONT: Have a splash screen <ul><li>Avoid extra clicks to enter your website </li></ul><ul><li>Visitors don’t want to see a preview of your website, they want to see your website </li></ul><ul><li>Could hinder search engines from accessing your site </li></ul><ul><li>Screams 1990s </li></ul>
  27. 27. DONT: Have a splash screen Source: http://www.bwaslotcars.com/
  28. 28. DONT: Play music on your website <ul><li>Music eats up valuable bandwidth, slowing your website load speeds </li></ul><ul><li>Perceived as very amateur </li></ul><ul><li>Visitors can be startled by music and will leave your website because of this </li></ul>
  29. 29. DONT: Host your own videos <ul><li>Videos eat up bandwidth and require a fast server and connection to load quickly </li></ul><ul><li>Nobody wants to wait for a video to buffer </li></ul><ul><li>Using a video hosting site doubles your videos footprint </li></ul><ul><li>Recommended video hosting sites: </li></ul><ul><li>http://youtube.com </li></ul><ul><li>http://vimeo.com </li></ul><ul><li>http://viddler.com </li></ul><ul><li>http://revver.com </li></ul>
  30. 30. DONT: Use a crazy background <ul><li>Background images should be very subtle and not too busy </li></ul><ul><li>Navigation and content can be lost in your background </li></ul><ul><li>Very distracting for visitors drawing their attention away from more important elements </li></ul>
  31. 31. DONT: Use a crazy background Background overwhelms website design
  32. 32. DONT: Use a crazy background Background compliments website design
  33. 33. DONT: Use animated images
  34. 34. <ul><li>If they charge per page: RUN! </li></ul><ul><li>Demand a CMS (Content Management System) </li></ul><ul><li>Ask about Search Engine Optimization (SEO) techniques used </li></ul><ul><li>Look at work examples, case studies, client lists, and references </li></ul><ul><li>Search them on Google, Facebook, and Twitter </li></ul>Tip on selecting a website dev firm:
  35. 35. <ul><li>Website Resources </li></ul><ul><ul><li>http://browsershots.org </li></ul></ul><ul><ul><li>http://www.sitemaps.org/protocol.php </li></ul></ul><ul><ul><li>http://www.adobe.com/mobile/supported_devices/ </li></ul></ul><ul><ul><li>http://www.websiteoptimization.com/services/analyze/ </li></ul></ul><ul><li>Blogging Sites </li></ul><ul><ul><li>http://wordpress.com </li></ul></ul><ul><ul><li>http://blogger.com </li></ul></ul><ul><ul><li>http://livejournal.com </li></ul></ul><ul><li>Video Hosting Sites </li></ul><ul><ul><li>http://youtube.com </li></ul></ul><ul><ul><li>http://vimeo.com </li></ul></ul><ul><ul><li>http://viddler.com </li></ul></ul><ul><ul><li>http://revver.com </li></ul></ul>Resources
  36. 36. Brad Williams [email_address] Blog: strangework.com Twitter: @williamsba Everywhere else: williamsba Contact
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×