Web Standards Creativity: Innovations in Web Design with XHTML, CSS, and DOM Scripting

Web Standards Creativity: Innovations in Web Design with XHTML, CSS, and DOM Scripting

Released December 2007
Publisher(s): Apress
ISBN: 9781590598030

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

  • Be inspired by 10 web design lessons from 10 of the world's best web designers

  • Get creative with cutting-edge XHTML, CSS, and DOM scripting techniques

  • Learn breathtaking design skills while remaining standards-compliant

Here at friends of ED, we know that as a web designer or developer, your work involves more than just working to pay the bills. We know that each day, you strive to push the boundaries of your medium, unleashing your creativity in new ways to make your websites more engaging and attractive to behold, while still maintaining cross-browser support, standards compliance, and accessibility.

That's why we got together 10 of the world's most talented web designers to share their secrets with you. Web Standards Creativity is jam-packed with fresh, innovative design ideas. The topics range from essential CSS typography and grid design, effective styling for CMS-driven sites, and astonishing PNG transparency techniques, to DOM scripting magic for creating layouts that change depending on browser resolution and user preference, and better print layouts for web pages. We're sure you will find something here to inspire you!

This full-color book's examples are not just stunning to look at, but also fully standards-compliant, up-to-date, and tested in current browsers including Internet Explorer 7. Playing by the rules doesn't have to mean drab or dull websites—Web Standards can be fun!

Table of contents

  2. About the Technical Reviewer
  3. Acknowledgments
  4. Getting Creative with Web Standards
  5. I. Layout Magic
    1. 1. Semantic Structure, Dirty Pretty Presentation
      1. The brief
      2. Semantic structure
      3. Dirty pretty presentation
        1. Background images
        2. Background, masthead, and menu
        3. Content highlights
      4. Conclusion
    2. 2. Taming a Wild CMS with CSS, Flash, and JavaScript
      1. Setting the scene
      2. A crash course on CMS
      3. The CMS challenge
      4. Design on a dime
        1. The visual elements
        2. The markup is but a shell
        3. The layout and styles
        4. The Typography
        5. Spit and polish
      5. Issues with the design
        1. Such a #teaser
        2. Taking care of Internet Explorer
      6. Conclusion
    3. 3. New York Magazine: My, What a Classy <body>
      1. Mo' metro, mo' style
      2. Getting started
        1. Structuring the CSS
        2. Adding a layer of style
        3. Negative margins and columns and stuff! Oh my!
        4. Getting column-tastic (finally)
        5. My class-fu is unstoppable
      3. Intelligent modules
      4. Additional classes, additional control
        1. Starting small (980 pixels' worth)
        2. Tying in JavaScript
      5. Summary
    4. 4. Designing for Outside the Box
      1. Worries?
      2. Worrying about the Web
      3. Designing for WorrySome.net
        1. Stop worrying, start with markup
        2. Adding the content elements
        3. Adding divisions from the content out
        4. Satisfying your soul (with CSS)
        5. Styling WorrySome.net
      4. Dealing with legacy browsers
      5. No worries!
    5. 5. Creative Use of PNG Transparency in Web Design
      1. PNG, GIF, and JPEG
        1. What is PNG?
        2. So why is GIF still so popular?
        3. What about JPEG?
      2. Some great uses for the humble PNG
        1. The gradient
        2. The image that needs to work on any background
        3. The translucent HTML overlay
        4. The watermark
        5. The mask
        6. The color-changing icon
      3. OK, but what browsers does it work in?
        1. The Internet Explorer workaround: AlphaImageLoader
        2. A real-world use of AlphaImageLoader
      4. Conclusion
  6. II. Effective Print Techniques Applied to CSS Design
    1. 6. Grid Design for the Web
      1. What is a grid system?
        1. Through the ages
        2. Ratios and the canvas
      2. Putting grid systems into practice
        1. Beginning with the pen
        2. Breaking down the elements
        3. Designing the columns
        4. Adding gutters, margins, and padding
        5. What about colors and other visual elements?
        6. Building the XHTML
        7. Building the CSS
        8. It's starting to look like a website
      3. Issues with the design
      4. Conclusion
    2. 7. Bridging the Type Divide: Classic Typography with CSS
      1. A brief history of type
      2. Know your text face
        1. Introducing Georgia
        2. The process
        3. The right man for the job
      3. A page for Poe
        1. A readable line length
        2. Paragraph indents
        3. Drop caps
        4. All caps
        5. Text figures vs. titling figures
        6. Small caps
      4. Conclusion
  7. III. DOM Scripting Gems
    1. 8. Print Magic: Using the DOM and CSS to Save the Planet
      1. A printing technique is born
      2. The basic idea
      3. Preparing the foundations
        1. Sectioning the page
        2. Identifying the sections
        3. Pseudocode first
        4. Event planning
        5. From pseudocode to real code
        6. Recap: what these scripts do
      4. What about the CSS?
      5. A couple of refinements
      6. Let's see it in action, already!
        1. Sliding in the code
        2. Styling the print links
        3. Pulling it all together
      7. Never mind all thatwhat about saving the planet?
      8. Conclusion
    2. 9. Creating Dynamic Interfaces Using JavaScript
      1. Different layouts for different needs
      2. Resolution-dependent layouts
        1. Browser size, not resolution
        2. Multiple CSS files
        3. Turning on the style
        4. Optimizations for Internet Explorer 5.x
      3. Modular layouts
        1. The markup
        2. Expanding and collapsing modules
        3. Reorganizing modules
        4. Keeping track of changes
      4. Conclusion
    3. 10. Accessible Sliding Navigation
      1. The killer feature
      2. Accessibility basics
        1. Accessibility guidelines
        2. Accessibility and JavaScript
      3. The accessible solution
        1. Starting with pristine HTML
        2. Adding the presentation
        3. Switching between CSS states with JavaScript
        4. Adding sliding behaviors
      4. Where does the accessibility come in to it?
        1. Low vision
        2. Voice recognition
        3. Screen readers
        4. Keyboard-only use
      5. Conclusion

Product information

  • Title: Web Standards Creativity: Innovations in Web Design with XHTML, CSS, and DOM Scripting
  • Author(s):
  • Release date: December 2007
  • Publisher(s): Apress
  • ISBN: 9781590598030