Copyright
Dedication
Acknowledgments
Foreword
Preface
1. Discovery
Introducing Transcendent CSS
Which tools do you need to get started?
Why do you need Transcendent CSS?
CSS is not designer friendly
Web browsers’ rendering inabilities have stifled progress
Never underestimate the power of the individual
Expanding the creative possibilities
Designs that adapt beyond the screen
Hold that download for a moment; I’m going into a tunnel
Accessibility is design, not a feature
Accessibility is a matter of usability
Wearing badges is not enough in days like these
Moving toward Transcendent CSS
MOSe enhancements
From the CSS Zen Garden
And all that Malarkey
Progressive Enhancement
The Principles of Transcendent CSS
1. Not all browsers see the same design
2. Use all available CSS selectors
Attribute selectors
Child selectors
Adjacent sibling selectors
Pseudo-classes and pseudo-elements
Pseudo-Classes
Pseudo-Elements
3. Use CSS3 where possible to look to the future
4. Use JavaScript and the DOM to plug the holes in CSS
5. Avoid using CSS hacks and filters
Just like your markup, hacks should be valid
The demise of CSS hacks and broken pages
6. Use semantic naming conventions and microformats
Developing naming conventions
Naming conventions help in teams
Naming conventions can make for hours of geeky fun
Swapping Styles with the CSS Love Child
Take Your Vitamins
Common naming gives visitors extra control
Introducing microformats
7. Share your ideas, and collaborate with others
What Makes Transcendent CSS Possible Now?
Unexpected uses for CSS
Graded browser support
What exactly does support mean?
Browser grading
Browser support standards
Discovery, process, inspiration, and transcendence
Designing from the Content Out
The content-out approach
A typical, nonoptimized CSS layout
Optimize the content order with or without styles
Navigation
Branding and content
Semantics Is Meaning
CSS Naked Day
Translating meaning into markup: The Markup Is Right
Play on
You’re doing well
Picturing the content-out design
Number 1: Horses
Number 2: A Race
Number 3: A Taxi Queue
What does the content tell you?
Moving meaningfully along
Marking Up the World
All the world’s a list; every item must play its part
Lists as far as the eye can see
“If I have two beans and then add two more beans, what do I have?”
A plan so cunning you could brush your teeth with it
Send me an hCard from San Francisco
Learning to keep your eyes wide open
Working from the “contents”
Scribble notes
Visualize the magazine markup
Order, please
Add in links
Place emphasis
Complete the markup
Time to Process What You Have Learned
2. Process
Searching for a Perfect Workflow
Looking for a better way
Why should we do this?
Following a content-based process
Gathering Your Content
Working with Wireframes
Where traditional wireframes fail
Are wireframes a good value for the money?
Traditional wireframes and interaction
Improving the Approach with the Grey Box Method
Using symbols to add greater detail
Creating Static Designs
Moving faster through the design workflow
Adding markup guides to static designs
Using Interactive Prototypes
Interactive prototypes make it real
Creating reusable code
Model behavior for wireframes and prototypes
WYSIWYG: What you see, or short-sighted?
Following Best Practices for Interactive Prototyping
Choosing a development browser
Using browser extensions
Use the Web Developer extension
Explore the DOM with Firebug
Keeping your <div> elements to a minimum
Ensuring your markup stays valid
Choosing positioning over floats
The problem with floats
PNG alpha transparency in the workflow
Organizing your CSS
Organizing by location
Marking sections in your CSS
Organizing by element
CSS flags
Dividing your CSS into multiple files
Practicing the Process
Looking at the ingredients
Opening the grey boxes
Looking at the static design visuals
Writing content-out markup
Visualizing the structure
Main content
Secondary content
Adding your first divisions
Adding the site furniture
Branding
Adding navigation
Site information footer
Arranging content into a meaningful order
Implementing the static design with CSS
Building your layout
Working from the body
Creating a positioning context
Creating your two columns
Switching the columns
Arranging the furniture
Relatively Speaking
Moving on, or handing over?
Basic color styles
Building brand
Adding the logo
Styling the navigation
Features navigation
Tools navigation
Getting up close and personal
Styling the footer
Using image replacement
Positioning the paragraphs
Understanding elements of typographical style
Putting It All Together
3. Inspiration
Introducing Grid-Based Design
The designer and the grid
The divine proportion and the rule of thirds
The divine proportion for the Web
Fixed-pixel width design
Elastic design
Fully flexible layouts
Rational grid design
Grids in Contemporary Web Design
Subtraction
Airbag Industries
Jeff Croft
Veerle’s Blog
Looking for Grids Outside the Web
Learning from the daily paper
Using traditional eight-column design
Using contemporary six-column design
Using alternative newspaper layouts
The long way round
Bringing New Grids to Web Design
Breaking news
Leading with the grid
Exposing dirty little secrets
Engaging in news manipulation
Keeping you in the picture
Hold the front page
Finding Inspiration in Unexpected Places
Doing a homepage makeover
Extreme Makeover: Home Edition
Changing Rooms
Introducing mood boards
Using mood boards for Web design
Keeping a design scrapbook
Scrapbooks for developers, am I serious?
Looking at magazines for interface inspiration
Getting typography inspiration
Reexamining Flash design
Working with images and photos
Flickr for inspirational photos
Flock for photo research
iPhoto scrapbooks
Fine Art Activities
Designing is more than creating attractive visuals
Taking the focus off technology
Enhancing the mood
Looking for a different perspective
Scrapbooking with a goal in mind
The Fine Art of Web Design
Designers should do more
4. Transcendence
Transcendent CSS
Absolute positioning
Setting the stage
Positioning the images
Playing with your food
CSS image zoom sidebar
Image zoom with CSS
Relative positioning
Styling the headings
Paragraphs
Positioning the images
Negative margins
Creative floating
Attribute and child selectors
Playing with the layout
Making a sidebar
Combining techniques
Creating the floated columns
Making the masthead active
Working with type
Putting spans to work
Hearing the fat lady warming up
Ride of the Valkyries
CSS3 (Third Time Lucky)
The sum of its parts
Getting involved in making new standards
Back to the future
Designing with the CSS3 Selectors Module
Improving readability with zebra stripes
The :nth-child() pseudo-class
Designing with the Backgrounds and Borders Module
Designing with multiple background images
Positioning and z-index
Form element styling
Typographic flair
Multiple background images
Designing multicolumn layouts
Column widths and count
Gutters, gaps, and rules
Multi-column thrills or spills?
Designing with the Multi-column Layout Module
Advanced Layout
Back to the grid
Designing with the Advanced Layout Module
Have your cake, and eat it too
Concluding Remarks
Photography Credits
