Avoiding the Ugly Good Web Design Practices
Background <ul><li>Choose a background that is a single, solid color.  </li></ul><ul><ul><li>If possible, avoid loud textu...
Text <ul><li>Avoid using uncommon fonts. </li></ul><ul><li>Avoid mixing too many fonts on one page. </li></ul><ul><li>Avoi...
Text <ul><li>Capitalization of whole sentences should be avoided. </li></ul><ul><ul><li>Many people find it difficult to r...
Images and Alternate Text <ul><li>Avoid images that flash or that are too animated. </li></ul><ul><li>Don’t use too many i...
Images and Alternate Text <ul><li>If what is important is the actual content of the image, the ALT text should consist of ...
Images and Alternate Text <ul><li>If the image is a bullet or a horizontal section divider, the ALT text should be a text ...
Links and Navigation <ul><li>All links should contain enough useful information about their destination that they make sen...
Links and Navigation <ul><li>Links should not be presented directly next to each other, as some access software will inter...
Tables <ul><li>Use only when absolutely necessary. </li></ul><ul><li>As simple as possible. </li></ul><ul><li>Should make ...
Other tips… <ul><li>Keep it Simple! </li></ul><ul><li>Test! Test! Test! </li></ul><ul><ul><li>Netscape </li></ul></ul><ul>...
Getting Help… <ul><li>Training </li></ul><ul><ul><li>http://www.gpc.edu/~training </li></ul></ul><ul><ul><li>[email_addres...
Web Resources <ul><li>Web Style Guide </li></ul><ul><ul><li>http://www.webstyleguide.com/ </li></ul></ul><ul><li>Wed Desig...
Upcoming SlideShare
Loading in …5
×

Avoiding the Ugly Good Web Design Practices

483 views
429 views

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
483
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Avoiding the Ugly Good Web Design Practices

  1. 1. Avoiding the Ugly Good Web Design Practices
  2. 2. Background <ul><li>Choose a background that is a single, solid color. </li></ul><ul><ul><li>If possible, avoid loud textures, patterns or images. </li></ul></ul><ul><li>Choose background and text colors that contrast. </li></ul>
  3. 3. Text <ul><li>Avoid using uncommon fonts. </li></ul><ul><li>Avoid mixing too many fonts on one page. </li></ul><ul><li>Avoid large blocks of italic text. </li></ul><ul><li>You don't have to use a large font size on your page. </li></ul><ul><ul><li>Standard (medium) size text is fine - visitors to your site can adjust the text size to suit their needs by altering their browser settings. </li></ul></ul><ul><li>Don't underline large blocks of text. </li></ul><ul><ul><li>Some people find underlined text difficult to read. </li></ul></ul><ul><ul><li>Underlining usually indicates hyperlinked text, it can be confusing for users if it is used where no link exists. </li></ul></ul>
  4. 4. Text <ul><li>Capitalization of whole sentences should be avoided. </li></ul><ul><ul><li>Many people find it difficult to read sentences written in capitals. </li></ul></ul><ul><ul><li>CAPITALIZATION CAN COME ACROSS AS SHOUTING! </li></ul></ul><ul><li>Use headings appropriately. </li></ul><ul><ul><li>Don't use headings simply to increase text size, and don't simply use bold or a larger font size to simulate headings. </li></ul></ul><ul><ul><li>Some browsers can present the user with an overview of a web page based on the headings and sub-headings. </li></ul></ul><ul><li>Don’t make pages too long. </li></ul><ul><ul><li>Use bookmarks if your pages are long. </li></ul></ul>
  5. 5. Images and Alternate Text <ul><li>Avoid images that flash or that are too animated. </li></ul><ul><li>Don’t use too many images. </li></ul><ul><li>All images should have alternate (ALT) text. </li></ul><ul><ul><li>ALT text exists to provide a textual representation of the image for people accessing the page in a non-graphic way (e.g. text only, speech or Braille). </li></ul></ul><ul><li>ALT text should convey what is important or relevant about the image. </li></ul>
  6. 6. Images and Alternate Text <ul><li>If what is important is the actual content of the image, the ALT text should consist of a brief description of the image. </li></ul><ul><ul><li>&quot;A photo of my house&quot; </li></ul></ul><ul><li>If the image is essentially functional (e.g. a &quot;Search Now&quot; button) the ALT text should convey the function. </li></ul><ul><ul><li>&quot;Search Now&quot; </li></ul></ul>
  7. 7. Images and Alternate Text <ul><li>If the image is a bullet or a horizontal section divider, the ALT text should be a text representation of the same thing. </li></ul><ul><ul><li>&quot; - &quot; or &quot; # &quot; for bullets </li></ul></ul><ul><ul><li>&quot; - - - &quot; for a divider </li></ul></ul><ul><li>If the image is essentially &quot;eye candy&quot; or is used for the purpose of visual layout (e.g. &quot;spacer&quot; images), the ALT text should be set to read &quot;*&quot;. </li></ul>
  8. 8. Links and Navigation <ul><li>All links should contain enough useful information about their destination that they make sense on their own, when taken out of context. </li></ul><ul><ul><li>Access software that people with visual impairments use can list all of the links on a page as one way of providing an overview of the content. If a link consists only of the phrase 'click here', its function and destination will not be obvious if it is presented out of context. </li></ul></ul>
  9. 9. Links and Navigation <ul><li>Links should not be presented directly next to each other, as some access software will interpret a group of links as being one single link. </li></ul><ul><ul><li>Separate links with text or a graphic. </li></ul></ul><ul><ul><ul><li>The bar character &quot; | “ </li></ul></ul></ul><ul><li>Navigation such as links should be placed consistently on pages. </li></ul>
  10. 10. Tables <ul><li>Use only when absolutely necessary. </li></ul><ul><li>As simple as possible. </li></ul><ul><li>Should make sense read across rows. </li></ul><ul><li>Identify row & column headers . </li></ul><ul><li>Provide Captions for tables. </li></ul><ul><li>Provide Summary Text for tables. </li></ul><ul><ul><li>Especially tables used primarily for controlling layout. </li></ul></ul>
  11. 11. Other tips… <ul><li>Keep it Simple! </li></ul><ul><li>Test! Test! Test! </li></ul><ul><ul><li>Netscape </li></ul></ul><ul><ul><li>Internet Explorer </li></ul></ul><ul><li>Ask for Peer and Student Input. </li></ul><ul><li>View using Different Computers </li></ul><ul><ul><li>Operating Systems- Windows 98, Windows 2000, Windows XP, Mac, etc. </li></ul></ul><ul><ul><li>Internet Connections- Dial-up, DSL, Cable </li></ul></ul>
  12. 12. Getting Help… <ul><li>Training </li></ul><ul><ul><li>http://www.gpc.edu/~training </li></ul></ul><ul><ul><li>[email_address] </li></ul></ul><ul><li>Instructional Technologists </li></ul><ul><ul><li>David Robinson- [email_address] </li></ul></ul><ul><ul><li>Ken Moss- [email_address] </li></ul></ul>
  13. 13. Web Resources <ul><li>Web Style Guide </li></ul><ul><ul><li>http://www.webstyleguide.com/ </li></ul></ul><ul><li>Wed Design Features </li></ul><ul><ul><li>http://www.ratz.com/features.html </li></ul></ul><ul><li>GPC Style Guide </li></ul><ul><ul><li>http://www.gpc.edu/StyleGuide/ </li></ul></ul>

×