Grid Design Basics: Grids for Web Page Layouts

Since tables were co-opted for layout purposes, columns have become key to many Web design layouts, and this thinking continued when CSS took over from tables (at least in the minds of savvy designers) for Web-page presentation. However, other fields of layout design don’t think in arbitrary columns, they work with grids, and these form the basis for the structure of page designs. This article will provide the lowdown on grid design for Web pages.

Grannell, Craig. Opera (2008). Articles>Web Design>Accessibility>CSS

Setting Web Type to a Baseline Grid

This article covers the basics of baseline grids—defined grid areas within which content is placed—and how they can be applied effectively to the web medium. In print, baseline grids are almost mandatory. They ensure the bottom of each line of text—its baseline—aligns with a vertical grid, akin to writing on a ruled piece of paper. With books, this means text is always in the same position on the page. This ensures the gaps between lines of text aren’t “filled” with content showing through from the reverse of any page, thereby making the text easier to read. This advantage isn’t relevant for Web design, but the other major advantage—maintaining a vertical rhythm—is.

Grannell, Craig. Opera (2008). Articles>Web Design>Typography>CSS

Smart CSS Ain’t Always Sexy CSS

In the endless struggle to truly separate presentation from structure, have we lost our way? Are the old-school advocates for CSS still pushing radical and unnecessary thinking to try and justify the mass-adoption of a technology that has already been massively adopted? Smart CSS isn’t always sexy CSS… and lets face it, when working with real world applications, smart is where you want to be.

Ringlein, Martin. Digital Web Magazine (2008). Articles>Web Design>CSS

CSS Not ([hacks])

As any web developer worth his salt will know, browsers can differ in their interpretation of CSS rules and properties. One way of coping with this headache is to use various hacks; they might (in some cases) be invalid CSS, but they force browsers to read only certain parts of your CSS and render your page or web site as close to how you intended as possible. CSS hacks are one of the common ways to send specific instructions to different browsers, be it to solve min-width issues or box model interpretations.

Suda, Brian. Digital Web Magazine (2008). Articles>Web Design>CSS

Fancy Form Design Using CSS

Forms. Is there any other word that strikes as much fear into the hearts of grown web designers? There's also an improperly held belief that the only way you can guarantee that a form displays properly is by using tables. All of the code reproduced here for forms is standards-based, semantic markup, so you've got no excuse for relying on tables now!

Adams, Cameron. SitePoint (2008). Articles>Web Design>CSS>Forms

Everything You Know About CSS Is Wrong

Digital Web running a provocative article on CSS techniques? Shurely shome mishtake! In this extract from the forthcoming Sitepoint book of the same name, this article explains how you can use tables for layout in modern web design with a clean conscience.

Andrew, Rachel. Digital Web Magazine (2008). Articles>Web Design>CSS

Fifty Beautiful Blog Designs

In the showcase below we present 50 beautiful blog designs that literally stand out — either through their layout or through their design or through their attention to little details. Below you’ll find a variety of designs: clean designs, grunge, retro, graphics-heavy designs etc. Most designs presented below risk unusual approaches in the choice of design and content presentation. That’s what makes them different. Hopefully you will find some creative ideas which you can develop further in your further projects.

Smashing (2008). Design>Web Design>CSS>Blogging

CSS SiteMap

Recently I needed to crank out a visual sitemap (or is it a directory tree?) from a rather large site and had a devil of a time finding decent tools to help. Everything I found in my search was either too costly, too complicated, or too unattractive for my purposes. A case in point was CSS Diagrams—a damn fine piece of work (and free), but it really didn’t suit my needs. But it did give me an idea. Why not roll my own sitemap diagram in HTML and CSS?

BeTech (2007). Design>Web Design>CSS>Sitemaps

Simple CSS: Creating More Readable Text

Typography is an important part of Web design. Just like in the print world, your content needs to be readable to your viewers for it to be of any use. As a general rule, you want to make sure your Web site provides as little resistance as possible to the user, and the easier your site is to read, the better. CSS provides three very useful properties to enhance the readability of your site: font , line-height , and letter-spacing.

Rodriguez, David. Web Page Design for Designers (2008). Design>Web Design>Typography>CSS

CSS Step Menu

I recently worked on a web application that required a step menu (AKA wizard menu). This menu has a varying amount of steps, dependent upon the type of user accessing the application. Because of that requirement, I needed to write a CSS menu that could easily be changed from 5 steps to 4, 3, or 2 steps. Since the web is full of CSS menus, I thought one of this sort would be rather easy to find. I was wrong. I never really found a good example of one. So, for those of you who have looked and come up short, here’s an example.

Lindley, Cody. CSS Entry (2007). Design>Web Design>CSS

Better Ordered Lists (Using Simple PHP and CSS)

Ordered lists are boring! Sure you can apply background images and do quite a bit of sprucing up to a regular ordered list, but you just don’t get enough control over the number itself. Here is an example where you ditch the traditional ordered list and create your own!

CSS-Tricks (2007). Design>Web Design>CSS>PHP

CSS Speech Bubbles

Easy to customize speech bubbles coded in valid XHTML and CSS.

Mayo, Will. WillMayo.com (2008). Design>Web Design>HTML>CSS

CSS Link Styles

One of the easiest, yet most interactive, elements you can add to your Web site is dynamic link text—links that change their appearance once the user puts their cursor over them.

Jason, Chris. ChrisJason.com (2006). Articles>Web Design>CSS>Typography

Horizontally Center Layout in CSS

A good way of dealing with users on different screen resolutions is to center your Web design horizontally. This will ensure, regardless of the user’s screen size, that there is an equal amount of space to the left and right of the main design area, producing an overall "fuller" look to your site.

Jason, Chris. ChrisJason.com (2005). Articles>Web Design>CSS

Screen Readers and CSS Layout

Screen readers are mostly mystical devices for almost all of us. Few of us actually own them. They’re incredibly expensive. Fewer yet know how to use them well, what their capabilities are, or how they actually work. Is it little wonder then, that big names in our web design world question how screen readers handle modern layout techniques? Not at all. The two gurus quoted below have other strengths, and specialities. They probably haven’t used a screen reader in ages.

Easton, Bob. Access Matters (2005). Articles>Web Design>Accessibility>CSS

Text/Typographical Layout

The default setting in browsers is to align text to the left. Text can also be aligned to the right, in the center, or justified (aligned on both the left and the right sides). Although some people like the look of justified text, studies have routinely shown that left-aligned text is the easiest to read. Some Asian and Middle Eastern languages are notable exceptions to this rule, since the normal text direction in these languages may be vertical from top to bottom or horizontal from right to left. For English and other left-top-right languages, the best practice is to align text on the left.

WebAIM (2005). Articles>Web Design>Typography>CSS

Relative Sizing and Images

Few people realize that with today's modern browsers, relative sizing can in fact be added to images as well as text elements on your web page. Making the image scale with the text may aid in accessibility, despite the degradation of quality.

WATS.ca (2006). Articles>Web Design>Image Editing>CSS

CSS in Action: Invisible Content Just for Screen Reader Users

Most of the techniques for making web content accessible to screen readers are invisible to visual users. Alternative (alt) text, table header tags, table summaries, and form tags are examples of techniques that make a big difference for screen reader users, but which have little or no impact on the visual appearance of the web content. Every once in a while, though, web designers confront situations in which the addition of accessible markup does have an impact on the visual layout. In some cases, this visual impact can decrease the usability of the content for visual users. In other cases, designers simply want to provide a more pleasing layout or appearance that would be compromised by including all of the text in a semantically correct format.

WebAIM (2007). Articles>Web Design>Accessibility>CSS

The Beauty and Business of CSS

Building designs with CSS is no longer a fringe activity practiced by standards geeks and early-adopters. Creative pioneers and highly skilled designers are bringing CSS to the mainstream. The explosion in popularity is ushering in a new wave of possibilities for web design. CSS provides greater design control, allows more flexibility, and enables sites to become attractive, accessible, and faster-loading, all at the same time.

Bowman, Douglas. Stop Design (2004). Presentations>Web Design>Standards>CSS

Pushing Your Limits (and Other Secrets of Designing with CSS)

What do you do when you feel like you’ve hit a brick wall? When it seems your creativity is limited by how much CSS you know how to beat into submission? How do you resist the temptation to give it all up and go back to tables? Why does it feel like the pros are constantly inventing new techniques each week, when you’re still struggling to keep up with the stuff you read about last year? Understanding how and where CSS fits into the design process is key to knowing how to push your own limits. Reviewing the principles of existing techniques — and learning why or how they came about — can extend your capabilities and help you gain confidence in solving future problems on your own.

Bowman, Douglas. Stop Design (2004). Presentations>Web Design>Standards>CSS

Some Reasons Why Web Standards Are Difficult to Learn

It seems like the box model shouldn’t be difficult to learn, but it is. I’m not sure why, but I think it may have to do with complexity that arises when you have boxes within boxes. At that point, it becomes an exercise of adding margin here, taking away padding there, and setting margins and paddings to 0 over there. Combine that with floating and positioning: relative, absolute, fixed, and it gets hard to know where the spacing between objects comes from, even when you’re working in standards-supporting browser like Mozilla. On top of this you have the box model hack…which only complicates things further. Even browsers get the box model wrong.

Porter, Joshua. Bokardo (2008). Articles>Web Design>Standards>CSS

Accessible CSS Forms: Using CSS to Create a Two-Column Layout

Websites have become less accessible and more complex over time according to recent studies. Learn how to buck the trend by creating fast, accessible CSS forms that work with modern browsers and gracefully degrade.

Website Optimization (2008). Articles>Web Design>CSS>Forms

Using CSS to Float a Masthead

Learn how to create that 'bookend' look with lists and CSS positioning. This CSS-layout technique saves a significant amount of XHTML code over tables.

Website Optimization (2008). Articles>Web Design>CSS

First Impressions Count in Website Design

Web designers have as little as 50 milliseconds to capture the interest of potential customers. Through the halo effect, first impressions can influence subsequent judgments of website credibility and buying decisions.

Website Optimization (2008). Articles>Web Design>Usability>CSS

CSS Overlays: Using CSS Positioning to Overlay Web Objects

An overlay is when one web object overlaps another. Overlays are often used to highlight or draw attention to important items on websites to raise conversion rates. This article shows how use CSS positioning to avoid slicing and dicing your overlays and assembling with tables. Along the way we'll look at the workarounds we used to make the technique work with different browsers (most importantly IE5.x Mac and Safari).

Website Optimization (2008). Articles>Web Design>Graphic Design>CSS