Transcending CSS: The Fine Art of Web Design

Transcending CSS: The Fine Art of Web Design

Released November 2006
Publisher(s): New Riders
ISBN: None

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

As the Web evolves to incorporate new standards and the latest browsers offer new possibilities for creative design, the art of creating Web sites is also changing. Few Web designers are experiences programmers, and as a result, working with semantic markup and CSS can 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, you’ll discover how to implement highly original designs through visual demonstrations of the creative possibilities using markup and CSS. You’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

Table of contents

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

Product information

  • Title: Transcending CSS: The Fine Art of Web Design
  • Author(s):
  • Release date: November 2006
  • Publisher(s): New Riders
  • ISBN: None