Webpages 7 th Grade Quest 2009

What Are Your Webpage Pet Peeves? Incorrect Spelling and Grammar Errors Page Takes Forever to Load Information is Out of Date No Author Inaccurate Information Organization of Page Makes No Sense Broken Links References Not Listed

Web Site Design Components Web Page Navigation Web Page Navigation Use of Colors Use of Colors Page layout design Page layout design Text design Text design Graphic design Graphic design

Website Navigation Best Practices Consider breaking long pages into multiple shorter pages (information chunking) Consider breaking long pages into multiple shorter pages (information chunking) Make your site easy to navigate (three click rule) Make your site easy to navigate (three click rule) Provide clearly labeled navigation in the same location on each page Provide clearly labeled navigation in the same location on each page Most common – across top or down left side Most common – across top or down left side Types of Navigation Types of Navigation Graphics-based Graphics-based Text-based Text-based

Webpage Design Colors Use colors that appeal to your audience Use colors that appeal to your audience Good contrast between background and text Good contrast between background and text Easy to read Easy to read

Webpage Design Page Layout Place the most important information "above the fold" Place the most important information "above the fold" Use adequate "white" or blank space Use adequate "white" or blank space Use an interesting page layout Use an interesting page layout This is usable, but a little boring.

Webpage Design Page Layout Better Best Columns make the page more interesting and it’s easier to read this way. Different width columns interspersed with graphics and headings create the most interesting, easy to read page.

Text Design Best Practices Use breaks or spacers between blocks of text Use breaks or spacers between blocks of text Avoid long blocks of text Avoid long blocks of text Use bullet points Use bullet points Use short paragraphs Use short paragraphs

Design “Easy to Read” Text Use appropriate text size Use appropriate text size Use strong contrast between text & background Use strong contrast between text & background Use columns instead of large areas of horizontal text Use columns instead of large areas of horizontal text Bold text as only as needed Bold text as only as needed Avoid “click here” Avoid “click here” Hyperlink key words or phrases, not entire sentences Hyperlink key words or phrases, not entire sentences Hyperlink Chek yur spellin (Check your spelling) Chek yur spellin (Check your spelling)

Graphic Design Best Practices Be careful with large graphics Be careful with large graphics Be sure your message gets across even if images are not displayed. Be sure your message gets across even if images are not displayed. Use animation only if it makes the page more effective (provide text description). Use animation only if it makes the page more effective (provide text description). Use only necessary images, not because they’re cute. Use only necessary images, not because they’re cute.

Requirements Use Weebly.com as webpage editor Use Weebly.com as webpage editor At least two pictures per page At least two pictures per page Include main points from research Include main points from research Links to additional information Links to additional information References-APA citation (BibMe.org) References-APA citation (BibMe.org) Must use good web design Must use good web design Create blog page to give feedback to one another Create blog page to give feedback to one another

Weebly DO NOT put personal information on your page DO NOT put personal information on your page Do not use your name in choosing a title for the site Do not use your name in choosing a title for the site When choosing a Weebly subdomain or web address make sure to use wjmsdb format When choosing a Weebly subdomain or web address make sure to use wjmsdb format Add Elements to design your page Add Elements to design your page