website layout and structure
DESCRIPTION
Planning Your Website’s Structure - Starting with rough sketches and wireframes, we'll build site and integrate SEO. Techniques for good web design, color schemes, typography, and to provide a good user experience.TRANSCRIPT
S E O
G C M W 1 7 7 S e a r c h E n g i n e O p t i m i z a t i o n
Website Layout and Structure
S E O
G C M W 1 7 7 S e a r c h E n g i n e O p t i m i z a t i o n
Planning Your Website’s Structure
1. Start with rough outline – Got your keywords, meta, alts – Defined your audience – Building content2. Consider monitor sizes3. Consider user experince4. Consider browsers5. Find a hosting service
What should I do?
S E O
G C M W 1 7 7 S e a r c h E n g i n e O p t i m i z a t i o n
Web Hosting1. Price2. Domian Purchases3. Reliability4. Disk space and bandwidth3. Features - - Site builders - Databases - Multiple domains - Tracking tools4. Support
http://www.findmyhosting.com/
S E O
G C M W 1 7 7 S e a r c h E n g i n e O p t i m i z a t i o n
Optimize for Other Browsers
http://www.w3schools.com/browsers/browsers_stats.asp
Firefox42%
Opera2.4%
Safari3.6%
IE22%
Chrome29%
Download and test
S E O
G C M W 1 7 7 S e a r c h E n g i n e O p t i m i z a t i o n
Most Common Monitor Sizes
Don’t forget about mobile and tablets
S E O
G C M W 1 7 7 S e a r c h E n g i n e O p t i m i z a t i o n
Ideal Web Page SizesMost Common Sizes
Width: 960pxHeight: 700px
960 Grid
http://960.gs/
S E O
G C M W 1 7 7 S e a r c h E n g i n e O p t i m i z a t i o n
960 Grid - http://960.gs/
S E O
G C M W 1 7 7 S e a r c h E n g i n e O p t i m i z a t i o n
Theme Grouping 1. Start with home page – Answer What Should I do? – What is your conversion goal?2. How many themes or categories do you have?3. Theme grouping (shoes) – running shoe section – skate shoes section – hiking boots section – cleats section4. Link from home page down – Don’t link every page from every other page – Waters down your themes (socks in shoe section) – Streamlines SEO – Better user experince
Shoeshttp:www.rei.com
S E O
G C M W 1 7 7 S e a r c h E n g i n e O p t i m i z a t i o n
Theme Grouping
Home
About Shoes Accessories
Hiking Running Skate
All Terrain
Timberline
Cross Country
Adidas
Canvas
Vans
S E O
G C M W 1 7 7 S e a r c h E n g i n e O p t i m i z a t i o n
Other Pages to Include:
1. Sitemap2. About me or company3. Privacy Policy or Terms
S E O
G C M W 1 7 7 S e a r c h E n g i n e O p t i m i z a t i o n
Sitemap Page
http://www.apple.com/sitemap/
S E O
G C M W 1 7 7 S e a r c h E n g i n e O p t i m i z a t i o n
Wireframes1. Keep loose2. Get all pages in order3. Print out and hang on wall4. Get some feedback5. Adjust and fill inthe holes6. User experience
S E O
G C M W 1 7 7 S e a r c h E n g i n e O p t i m i z a t i o n
Eye TrackingWhere are the hot spots are your site?
S E O
G C M W 1 7 7 S e a r c h E n g i n e O p t i m i z a t i o n
Wireframes
S E O
G C M W 1 7 7 S e a r c h E n g i n e O p t i m i z a t i o n
Wireframes - Home Page
1. Simple it simple, clean, easy to nav2. Header2. Navigation3. Splash or feature pic4. Quick links to themes5. Fill in bottom with support material6. Above the fold
Above the Fold - 1024px x 768px
1024px
768p
x
S E O
G C M W 1 7 7 S e a r c h E n g i n e O p t i m i z a t i o n
Wireframes - Home Page
S E O
G C M W 1 7 7 S e a r c h E n g i n e O p t i m i z a t i o n
Wireframes - Interior Pages
1. Keep UI familiar2. Begin the vertical nav2. Give them a way out3. Splash or feature pic4. Quick links to themes5. Fill in bottom with support material
S E O
G C M W 1 7 7 S e a r c h E n g i n e O p t i m i z a t i o n
Wireframes - Interior Pages
S E O
G C M W 1 7 7 S e a r c h E n g i n e O p t i m i z a t i o n
User Experince - Bad
S E O
G C M W 1 7 7 S e a r c h E n g i n e O p t i m i z a t i o n
User Experince - Good