Transcending CSS The Fine Art of Web Design

by Clarke, Andy

• ISBN13: 9780321410979
• ISBN10: 0321410971
• Edition: 1st
• Format: Paperback
• Copyright: 2006-11-15
• Publisher: New Riders

Summary

As the Web evolves to incorporate new standards and the latest browsers offer new possibilities for creative design, the art of creatingWeb sites is also changing. Few Web designers are experiences programmers, and as a result, working with semantic markup and CSScan create roadblocks to achieving truly beautiful designs using all the resources available. Add to this the pressures of presenting exceptional design to clients and employers, without compromising efficient workflow, and the challenge deepens for those working in a fast-paced environment. As someone who understands these complexities firsthand, author and designer Andy Clarke offers visual designers a progressive approach to creating artistic, usable, and accessible sites using transcendent CSS. In this groundbreaking book, yours"ll discover how to implement highly original designs through visual demonstrations of the creative possibilities using markup and CSS. Yours"ll learn to use a new design workflow, build prototypes that work well for designers and all team members, use grids effectively, visualize markup, and discover every phase of the transcendent design process, from working with the latest browsers to incorporating CSS3 to collaborating with team members effectively. Transcending CSS: The Fine Art of Web Design: Uses a visual approach to help you learn coding techniques Includes numerous examples of world-class Web sites, photography, and other inspirations that give designers ideas for visualizing their code Offers early previews of technical advances in new Web browsers and of the emerging CSS3 specification

Author Biography

Andy Clarke is an internationally known speaker, designer, and consultant focusing on creative, accessible Web development. Andy is passionate about design and passionate about Web standards, bridging the gap between design and code. He regularly trains designers and developers in the creative applications of Web standards. Andy has written articles for A List Apart Magazine and contributed to the CSS Zen Garden. Outside of his studio, Andy is a member of the Web Standards Project.

Author, instructor, and Web designer Molly E. Holzschlag has written over 30 books on Web design and development. She’s been coined "one of the greatest digerati" and deemed one of the Top 25 Most Influential Women on the Web. Molly is also Group Lead of Web Standards Project and frequent lecturer on Web design and development around the world.

Table of Contents

Discovery	p. 3
Introducing Transcendent CSS	p. 5
Which tools do you need to get started?	p. 5
Why do you need Transcendent CSS?	p. 6
Expanding the creative possibilities	p. 10
Accessibility is design, not a feature	p. 12
Moving toward Transcendent CSS	p. 16
The Principles of Transcendent CSS	p. 23
Not all browsers see the same design	p. 25
Use all available CSS selectors	p. 25
Use CSS3 where possible to look to the future	p. 30
Use JavaScript and the DOM to plug the holes in CSS	p. 30
Avoid using hacks and filters	p. 31
Use semantic naming conventions and microformats	p. 33
Share your ideas, and collaborate with others	p. 41
What Makes Transcendent CSS Possible Now?	p. 47
Unexpected uses for CSS	p. 49
Graded browser support	p. 51
Discovery, process, inspiration, and transcendence	p. 53
Designing from the Content Out	p. 55
The content-out approach	p. 57
A typycal, nonoptimized CSS layout	p. 59
Optimize the content order with or without styles	p. 60
Semantics Is Meaning	p. 65
CSS Naked Day	p. 65
Translating meaning into markup: The Markup Is Right	p. 66
What does the content tell you?	p. 76
Moving meaningfully along	p. 76
Marking Up the World	p. 79
All the world's a list; every item must play its part	p. 79
Lists as far as the eye can see	p. 82
Send me an hCard from San Francisco	p. 86
Learning to keep your eyes wide open	p. 88
Working from the "contents"	p. 88
Time to Process What You Have Learned	p. 97
Process	p. 99
Searching for a Perfect Workflow	p. 101
Looking for a better way	p. 101
Following a content-based process	p. 103
Gathering Your Content	p. 107
Working with Wireframes	p. 109
Where traditional wireframes fail	p. 111
Traditional wireframes and interaction	p. 113
Improving the Approach with the Grey Box Method	p. 117
Using symbols to add greater detail	p. 119
Creating Static Designs	p. 121
Moving faster through the design workflow	p. 121
Adding markup guides to static designs	p. 122
Using Interactive Prototypes	p. 125
Interactive prototypes make it real	p. 125
Creating reusable code	p. 127
Model behavior for wireframes and prototypes	p. 127
WYSIWYG: What you see, or short-sighted?	p. 128
Following Best Practices for Interactive Prototyping	p. 131
Choosing a development browser	p. 131
Using browser extensions	p. 131
Keeping your [left angle bracket]div[right angle bracket] elements to a minimum	p. 134
Ensuring your markup stays valid	p. 134
Choosing positioning over floats	p. 134
Organizing your CSS	p. 136
Practicing the Process	p. 141
Writing content-out markup	p. 142
Implementing the static design with CSS	p. 158
Building your layout	p. 158
Working from the body	p. 159
Basic color styles	p. 166
Building brand and adding the logo	p. 167
Styling the navigation and the footer	p. 169
Understanding elements of typographical style	p. 176
Putting It All Together	p. 179
Inspiration	p. 181
Introducing Grid-Based Design	p. 183
The designer and the grid	p. 185
The divine proportion and the rule of thirds	p. 187
Fully flexible layouts	p. 197
Rational grid design	p. 198
Grids in Contemporary Web Design	p. 201
Subtraction	p. 201
Airbag Industries	p. 204
Jeff Croft	p. 206
Veerle's Blog	p. 208
Looking for Grids Outside the Web	p. 211
Learning from the daily paper	p. 21
Using eight- and six-column designs	p. 213
Using alternative newspaper layouts	p. 221
Bringing New Grids to Web Design	p. 225
Leading with the grid	p. 226
Exposing dirty little secrets	p. 229
Engaging, in news manipulation	p. 229
Keeping you in the picture	p. 230
Finding Inspiration in Unexpected Places	p. 233
Doing a homepage makeover	p. 233
Introducing mood boards	p. 236
Keeping a design scrapbook	p. 238
Looking at magazines for interface inspiration	p. 243
Getting typography inspiration	p. 243
Reexamining Flash design	p. 247
Working with images and photos	p. 248
Fine Art Activities	p. 255
Designing is more than creating attractive visuals	p. 255
Taking the focus off technology	p. 256
Enhancing the mood	p. 259
Looking for a different perspective	p. 261
Scrapbooking with a goal in mind	p. 265
The Fine Art of Web Design	p. 267
Transcendence	p. 271
Transcendent CSS	p. 273
Absolute positioning	p. 274
Relative positioning	p. 274
Creative floating	p. 287
Making a sidebar	p. 298
Combining techniques	p. 301
CSS3 (Third Time Lucky)	p. 313
The sum of its parts	p. 313
Getting involved in making new standards	p. 315
Back to the future	p. 316
Designing with the CSS3 Selectors Module	p. 316
Improving readability with zebra strides	p. 317
Designing with the Backgrounds and Borders Module	p. 320
Designing with multiple background images	p. 325
Designing multicolumn layouts	p. 335
Designing with the Multi-column Layout Module	p. 341
Advanced Layout	p. 345
Back to the grid	p. 346
Designing with the Advanced Layout Module	p. 351
Concluding Remarks	p. 359
Credits	p. 360
Index	p. 362
Table of Contents provided by Ingram. All Rights Reserved.