The Yucky Parts of Web Development Creating Good-Looking Applications for Those Whose Experience Focuses on Back-End Technology Eric Foster-Johnson – Software developer. Author. Cat Herder. – eric.foster- [email protected]– http://foster-johnson.com
32
Embed
The Yucky Parts of Web Development Creating Good-Looking Applications for Those Whose Experience Focuses on Back-End Technology Eric Foster-Johnson –Software.
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
The Yucky Parts of Web Development
Creating Good-Looking Applications for Those Whose Experience Focuses on Back-End Technology
US government guidelines– No information conveyed just by color. Must use something
else along with color– All input items, such as buttons, must have text
equivalences if they are images– Documents should be readable without a style sheet (CSS)– All tables of data need row and column headers– All images need alt or longdesc text
Web Accessibility Tips
Use basic HTML tags, such as H1– instead of a span with a class– H1 conveys structure as well as rendering
Anything you do to enhance keyboard navigation helps accessibility– Screen readers are very much like keyboard navigation
Use CSS layout – tables only for data and lining up forms
Don't auto-submit forms– Such as when selecting from a drop list
Jump to content hidden link– Screen reader can skip over header, etc.
Making Things Look Nice
Grids are good, really good– Lines things up– Allows space for ads (if applicable)– Used since ancient times
Provides a sense of balance Makes it easier to find the information
Spacing Text
Text spacing– Extra space at bottom to make it look even– Optical illusion
CSS padding like the following ratio usually works:– padding: 1 1 2 1– That's ratio, such as:– padding: .15em .15em .30em .15em;– reminder – top right bottom left
A Quick-Start On Styles
Take corporate styles from external or internal Web – Grab colors, fonts, overall look– Don't forget a logo image– Someone approved these
Can look at Open Source Web Designs– Most are for blogs, not appropriate for Web applications– Few look good– Two I like are Leaves and Neuphoric
Colors and Icons
Use the color blender– Range of shades, light or dark
Silk icons– small print icon, etc.
Mouseovers
Nice way to add interactivity Not hard
Mouseovers (cont'd)First, define even and odd row styles for the zebra-striping: