Transcendent CSS Design
Design Pointers
Attacking Andy's Transcending CSS book book while Michelle watches cranford, prefer Jane Eyre myself. Here's some thought-provoking bullet points I managed to put together thru the process.
Content Layout
- Optimize the content order with or without styles
- Semantic is Meaning
- What does the content tell you?
- Follow a content-based process
- Define the source order of the content
- Think about how that content will look without style; will it be easy to read, and will the order make sense
- Visually highlight any relationship: this will ultimately help identify necessary divisions and show areas of similar but not related information
- Use established naming conventions
- Tables are good for tabular data, not your overall layout
Pointers
- Create reusable code
- Keep your elements to a minimumblog comments powered by Disqus
- Ensure your markup stays valid
- Choose positioning over floats
- Organize your CSS
Design
- Emphasize columns with colors
- Introduce mood boards
- Keep a design scrapbook
- Designing is more than creating attractive visuals
Grids
- Grids helps designers create arrangements and patterns that 'feel right' and that people find comfortable to use
- Grids serve as a guide to designers to follow when they are placing objects on a page. They provide structure and add rhythm to a design. Using them helps designers create compositions that are easier for a reader to scan. Grids also present information in a way that is more neatly organized and therefore easier to follow
- Designing with grids helps usability and accessibility
Em
- An em is a 'relational' unit of measurement, which, when used on the Web, will change when a visitor either increases or decreases the default text size in her Web browser.
User Interface Design Principles
- Know who your user is
- Borrow behaviors from systems familiar to your users
- Let the user see clearly what functions are available
- The behavior of the program should be internally and externally consistent
- Changes in behavior should be reflected in the appearance of the program
- Provide both concrete and abstract ways of getting a task done
- Some aspects of the UI attract attention more than others do
- A user interface is a kind of language -- know what the rules are
- Understand the different kinds of help a user needs
- Let the user develop confidence by providing a safety net
- Limit user activity to one well-defined context unless there's a good reason not to
- Create a program of beauty
- Recruit help in spotting the inevitable defects in your design
- Listen to what ordinary people have to say
Resources
- Princicles of UI Design
- Inman positioning
- Thinking Outside the Grid
- Layout Grid Bookmarklets
- Five Steps to Better Typography
- sIFR 3
- Dean Edwards IE7 Scripts
Transcending CSS
Andy Clarke's book 'Transcending CSS' is awesome and is part my inspiration for this article. There's also a DVD to accompany it to speed up your learning which you can get from here.
Great stuff
John Antoni Griffiths
E-mail john@johnantoni.com
