Embed Size (px)
DESCRIPTION
My presentation on dos and don'ts for a successful website presented at the Asbury Park Press on October 29th, 2009.
Citation preview
Website Design Dos and Don’ts for a Successful Online Presence
Brad WilliamsWebDevStudios.com
Who Am I?
Brad WilliamsCEO & 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
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
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
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
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
DO: Make contact info very accessibleContact 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
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
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
WordPress.com Blogger.com LiveJournal.com
DO: Create a blog and use it
Free blogging services:
DO: Create a blog and use it
DONT: Use flashDONT: 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
Your flash website on my iPhone
DONT: Use flashDONT: 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 screenDONT: 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
DONT: Have a splash screenDONT: Have a splash screen
Source: http://www.bwaslotcars.com/
DONT: Play music on your websiteDONT: 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
DONT: Host your own videosDONT: 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
DONT: Use a crazy backgroundDONT: 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
DONT: Use a crazy backgroundDONT: Use a crazy backgroundBackground overwhelms website design
DONT: Use a crazy backgroundDONT: Use a crazy background
Background compliments website design
DONT: Use animated imagesDONT: 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
Tip on selecting a website dev firm:
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
Brad [email protected]
Blog: strangework.com
Twitter: @williamsba
Everywhere else: williamsba
Contact
