Publications

Flexible Web Design: Creating Liquid and Elastic Layouts with CSS

Liquid or fluid layouts change width based on the user’s unique device viewing size. Elastic layouts change width based on the user’s unique text size. Both types of flexible design offer clear benefits to users, who can view sites at sizes that work for their needs, but they can pose challenges to web designers who are used to perfect pixel control. Still, when planned and constructed correctly, flexible layouts can be visually appealing and reasonably easy to build. And the concepts and techniques of flexible web design can benefit fixed-width CSS designs too, as designers learn how to design for the inherent flexibility of the web, instead of the rigid qualities of print media or grid-based layouts. Using standards-compliant and cross-browser compatible (X)HTML and CSS, in Flexible Web Design: Creating Liquid and Elastic Layouts with CSS, designers will learn:

  • The benefits of flexible layouts
  • When to choose a liquid, elastic, or hybrid design
  • How to design and slice graphic comps in a way that makes flexible design achievable
  • How to build liquid and elastic layouts from scratch
  • How to create flexible background graphics and scalable content images
  • When and how to limit the degree of flexibility in a web page

Learn more about the book, as well as download example files and sample content, at the Flexible Web Design companion site.

Web Accessibility Principles

Available on CD-ROM from Amazon or online at lynda.com

Accessibility on the web remains a crucial but often overlooked element of web design. In this video training DVD, you’ll learn what the accessibility standards are and their benefits to you and your audience. You’ll also learn how to perform basic accessibility testing, and how to apply accessibility principles to new and existing sites using standards-compliant markup and CSS. Exercise files accompany the tutorials when you buy Web Accessibility Principles on CD-ROM from Amazon or lynda.com.

You can see a full table of contents at the lynda.com page, but here is a summary of the nine parts of the video:

1. Getting Started with Web Accessibility
Overview of accessibility standards, benefits, and basic concepts.
2. Setting Up an Accessibility Testing Environment
Which browsers, extensions, online tools to use for checking the accessibility of your pages. Also introduces a couple screen readers that you can use for free to hear your site as a person with vision impairments might.
3. Creating Accessible Page Layouts
Why tables for layout are problematic for accessibility, and how to use Dreamweaver to create a CSS-based layout.
4. Working with Text
Marking up and styling text to make it machine and human readable.
5. Creating Navigation
How to mark up and style navigation bars, use skip navigation links, and create accessible flyout menus.
6. Working with Images
How to choose and set proper alt text for images, as well as long descriptions for complex graphics.
7. Working with Tables
How to mark up data tables to be fully understandable.
8. Creating Forms
How to structure forms for accessibility and lay them out to still be visually attractive.
9. Deprecated Accessibility Techniques
Three accessibility techniques that you shouldn’t use any longer because they tend to hurt more than they help.

You can check out some sample videos from Web Accessibility Principles over at lynda.com. All of the videos from the first chapter, “Getting Started with Web Accessibility,” are free for anyone to view. But, I want to point out that the videos in the first chapter are not very representative of the format of all the later chapters. They’re mainly simple slideshows, because I’m just introducing the concepts in that first chapter. All of the rest of the chapters are a lot more dynamic, and almost all feature hands-on exercises. We build a site throughout Web Accessibility Principles, using Dreamweaver CS3 (though Dreamweaver is not required to carry out the techniques I teach you). You get to see every step of using Dreamweaver, testing in Firefox and Internet Explorer, and more.

Online articles and tutorials

I am a partner at CommunityMX, where I currently provide forum support and previously wrote bi-weekly articles on a variety of design topics, including CSS, XHTML, accessibility, and Dreamweaver. You can view a complete list of my articles for CMX at my author page. To read the abstract of any article, simply click on the title. Though CMX is a subscription site, we also publish free articles every week, so many of the articles can be accessed for free as well.

I also wrote Modern CSS Layouts: The Essential Characteristics for Smashing Magazine. The followup article will be out soon!