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 SitePoint Forums Co-Author of Professional WordPress (March 2010) Who Am I?

Dos and Don’ts for website design Tips on selecting a development company Online resources Topics

Dos and Don’ts for website design

Tips on selecting a development company

Online resources

Use hierarchy (pages and sub-pages) where appropriate Use dropdowns to save precious space Don’t clutter your top level menu items DO: Create easy to use navigation

Use hierarchy (pages and sub-pages) where appropriate

Use dropdowns to save precious space

Don’t clutter your top level menu items

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

Web safe fonts are fonts supported by all major browsers and operating systems Guarantees your visitors see what you see Avoid any font licensing issues DO: Use web safe fonts

Web safe fonts are fonts supported by all major browsers and operating systems

Guarantees your visitors see what you see

Avoid any font licensing issues

DO: Use web safe fonts

Internet Explorer 6/7/8 Firefox 2/3/3.5 Chrome 2/3 Safari 3/4 Opera 9/10 DO: Test your website in ALL browsers Great free resource: http://browsershots.org

Internet Explorer 6/7/8

Firefox 2/3/3.5

Chrome 2/3

Safari 3/4

Opera 9/10

DO: Test your website in ALL browsers Using Internet Explorer 8

DO: Test your website in ALL browsers Using Chrome 3

Don’t make it a challenge to contact you Majority of traffic is looking for contact info DO: Make contact info very accessible

Don’t make it a challenge to contact you

Majority of traffic is looking for contact info

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

Sitemap contains links to all of your website pages Helps navigating your site and finding resources easier Used by search engines to find new pages to index DO: Create a website sitemap

Sitemap contains links to all of your website pages

Helps navigating your site and finding resources easier

Used by search engines to find new pages to index

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> <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

Don’t move elements on each page Keep navigation and other elements in the same spot throughout your website Visitors expect all elements to appear in the same spot, don’t confuse them DO: Keep element placement consistent

Don’t move elements on each page

Keep navigation and other elements in the same spot throughout your website

Visitors expect all elements to appear in the same spot, don’t confuse them

Create good custom content related to your business Will help generate new traffic and possible leads Create at minimum 1 new post per week Easiest/cheapest form of online marketing DO: Create a blog and use it

Create good custom content related to your business

Will help generate new traffic and possible leads

Create at minimum 1 new post per week

Easiest/cheapest form of online marketing

WordPress.com Blogger.com LiveJournal.com DO: Create a blog and use it Free blogging services:

WordPress.com

Blogger.com

LiveJournal.com

DO: Create a blog and use it

DONT: Use flash Search engines have trouble reading flash Flash is not installed on every computer Flash is not supported by most cell phones Hindering navigation will result in lost traffic * Flash banners used correctly can be effective

Search engines have trouble reading flash

Flash is not installed on every computer

Flash is not supported by most cell phones

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_devices/ If you use flash make sure to offer a non-flash alternative

DONT: Have a splash screen Avoid extra clicks to enter your website Visitors don’t want to see a preview of your website, they want to see your website Could hinder search engines from accessing your site Screams 1990s

Avoid extra clicks to enter your website

Visitors don’t want to see a preview of your website, they want to see your website

Could hinder search engines from accessing your site

Screams 1990s

DONT: Have a splash screen Source: http://www.bwaslotcars.com/

DONT: Play music on your website Music eats up valuable bandwidth, slowing your website load speeds Perceived as very amateur Visitors can be startled by music and will leave your website because of this

Music eats up valuable bandwidth, slowing your website load speeds

Perceived as very amateur

Visitors can be startled by music and will leave your website because of this

DONT: Host your own videos Videos eat up bandwidth and require a fast server and connection to load quickly Nobody wants to wait for a video to buffer Using a video hosting site doubles your videos footprint Recommended video hosting sites: http://youtube.com http://vimeo.com http://viddler.com http://revver.com

Videos eat up bandwidth and require a fast server and connection to load quickly

Nobody wants to wait for a video to buffer

Using a video hosting site doubles your videos footprint

Recommended video hosting sites:

http://youtube.com

http://vimeo.com

http://viddler.com

http://revver.com

DONT: Use a crazy background Background images should be very subtle and not too busy Navigation and content can be lost in your background Very distracting for visitors drawing their attention away from more important elements

Background images should be very subtle and not too busy

Navigation and content can be lost in your background

Very distracting for visitors drawing their attention away from more important elements

DONT: Use a crazy background Background overwhelms website design

DONT: Use a crazy background Background compliments website design

DONT: Use animated images

If they charge per page: RUN! Demand a CMS (Content Management System) Ask about Search Engine Optimization (SEO) techniques used Look at work examples, case studies, client lists, and references Search them on Google, Facebook, and Twitter Tip on selecting a website dev firm:

If they charge per page: RUN!

Demand a CMS (Content Management System)

Ask about Search Engine Optimization (SEO) techniques used

Look at work examples, case studies, client lists, and references

Search them on Google, Facebook, and Twitter

Website Resources http://browsershots.org http://www.sitemaps.org/protocol.php http://www.adobe.com/mobile/supported_devices/ http://www.websiteoptimization.com/services/analyze/ Blogging Sites http://wordpress.com http://blogger.com http://livejournal.com Video Hosting Sites http://youtube.com http://vimeo.com http://viddler.com http://revver.com Resources

Website Resources

http://browsershots.org

http://www.sitemaps.org/protocol.php

http://www.adobe.com/mobile/supported_devices/

http://www.websiteoptimization.com/services/analyze/

Blogging Sites

http://wordpress.com

http://blogger.com

http://livejournal.com

Video Hosting Sites

http://youtube.com

http://vimeo.com

http://viddler.com

http://revver.com

Brad Williams [email_address] Blog: strangework.com Twitter: @williamsba Everywhere else: williamsba Contact