Website Layout and Structure
-
Upload
michael-zinniger -
Category
Technology
-
view
6.798 -
download
2
description
Transcript of Website Layout and Structure
![Page 1: Website Layout and Structure](https://reader034.fdocuments.us/reader034/viewer/2022051609/547b1dbeb4af9fe2158b4df4/html5/thumbnails/1.jpg)
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
![Page 2: Website Layout and Structure](https://reader034.fdocuments.us/reader034/viewer/2022051609/547b1dbeb4af9fe2158b4df4/html5/thumbnails/2.jpg)
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?
![Page 3: Website Layout and Structure](https://reader034.fdocuments.us/reader034/viewer/2022051609/547b1dbeb4af9fe2158b4df4/html5/thumbnails/3.jpg)
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/
![Page 4: Website Layout and Structure](https://reader034.fdocuments.us/reader034/viewer/2022051609/547b1dbeb4af9fe2158b4df4/html5/thumbnails/4.jpg)
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
![Page 5: Website Layout and Structure](https://reader034.fdocuments.us/reader034/viewer/2022051609/547b1dbeb4af9fe2158b4df4/html5/thumbnails/5.jpg)
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
![Page 6: Website Layout and Structure](https://reader034.fdocuments.us/reader034/viewer/2022051609/547b1dbeb4af9fe2158b4df4/html5/thumbnails/6.jpg)
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/
![Page 7: Website Layout and Structure](https://reader034.fdocuments.us/reader034/viewer/2022051609/547b1dbeb4af9fe2158b4df4/html5/thumbnails/7.jpg)
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/
![Page 8: Website Layout and Structure](https://reader034.fdocuments.us/reader034/viewer/2022051609/547b1dbeb4af9fe2158b4df4/html5/thumbnails/8.jpg)
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
![Page 9: Website Layout and Structure](https://reader034.fdocuments.us/reader034/viewer/2022051609/547b1dbeb4af9fe2158b4df4/html5/thumbnails/9.jpg)
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
![Page 10: Website Layout and Structure](https://reader034.fdocuments.us/reader034/viewer/2022051609/547b1dbeb4af9fe2158b4df4/html5/thumbnails/10.jpg)
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
![Page 11: Website Layout and Structure](https://reader034.fdocuments.us/reader034/viewer/2022051609/547b1dbeb4af9fe2158b4df4/html5/thumbnails/11.jpg)
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/
![Page 12: Website Layout and Structure](https://reader034.fdocuments.us/reader034/viewer/2022051609/547b1dbeb4af9fe2158b4df4/html5/thumbnails/12.jpg)
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
![Page 13: Website Layout and Structure](https://reader034.fdocuments.us/reader034/viewer/2022051609/547b1dbeb4af9fe2158b4df4/html5/thumbnails/13.jpg)
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?
![Page 14: Website Layout and Structure](https://reader034.fdocuments.us/reader034/viewer/2022051609/547b1dbeb4af9fe2158b4df4/html5/thumbnails/14.jpg)
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
![Page 15: Website Layout and Structure](https://reader034.fdocuments.us/reader034/viewer/2022051609/547b1dbeb4af9fe2158b4df4/html5/thumbnails/15.jpg)
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
![Page 16: Website Layout and Structure](https://reader034.fdocuments.us/reader034/viewer/2022051609/547b1dbeb4af9fe2158b4df4/html5/thumbnails/16.jpg)
Above the Fold - 1024px x 768px
1024px
768p
x
![Page 17: Website Layout and Structure](https://reader034.fdocuments.us/reader034/viewer/2022051609/547b1dbeb4af9fe2158b4df4/html5/thumbnails/17.jpg)
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
![Page 18: Website Layout and Structure](https://reader034.fdocuments.us/reader034/viewer/2022051609/547b1dbeb4af9fe2158b4df4/html5/thumbnails/18.jpg)
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
![Page 19: Website Layout and Structure](https://reader034.fdocuments.us/reader034/viewer/2022051609/547b1dbeb4af9fe2158b4df4/html5/thumbnails/19.jpg)
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
![Page 20: Website Layout and Structure](https://reader034.fdocuments.us/reader034/viewer/2022051609/547b1dbeb4af9fe2158b4df4/html5/thumbnails/20.jpg)
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
![Page 21: Website Layout and Structure](https://reader034.fdocuments.us/reader034/viewer/2022051609/547b1dbeb4af9fe2158b4df4/html5/thumbnails/21.jpg)
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