Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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

514 views

Published on

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

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>

×