Learning to See in CSS

By now, you might have heard that CSS is a pretty big deal . Chances are your favorite site ditched tables in favor of Cascading Style Sheets years ago. In fact, without CSS, that website would be nothing but plain text, scattered images and ugly blue underlined links.

This isn’t a beginner’s tutorial on CSS (plenty of great ones already exist -- and, like the Transformers films – do we really need another?). Rather, this article explores the process how we transition from design on paper to fully functional and fully beautiful design in browser. Visualizing a layout in cascading style sheets is an essential “pre-production” phase. Once mastered, it can shine a light on the process behind complex designs you previously thought impenetrable.

Learning to see web design in CSS is what I like to call the seventh sense. You don’t need any special glasses or Haley Joel Osment, but you will need to bring a fresh pair of eyes and a big picture sensibility.

Step #1 : Framework

As with any endeavor worth endeavoring, the first step  is surveying the damage. What are you working with? A napkin sketch? A professionally designed .PSD? Postpone the details for now and focus on the skeleton of the project. Is the body of the site centered? Are we working with columns? Where’s the navigation? Is there a header or footer design that’s meant to fill the width of the browser?

Step #2Design Elements

Next, determine the elements of design that should be accomplished with images  and those that shouldn’t. Background patterns, repeating designs for full width elements and other graphical flourishes all belong in the domain of images. Style is featured prominently in the name of the language, but that style can only go so far. Smart use of images maintains light page weight and sets your design apart from the pack. Slicing, the process of lifting pertinent image elements from a design, is another topic altogether.

Step #3:  Building Blocks

Now, it’s time to build. What’s important to understand here is that any design can and must be reduced essentially to blocks. Visualizing in blocks in the early stages of a CSS project will spare you headaches later. In CSS speak, a block equates to a div. A div is a division or section of an HTML document, and CSS tells those divisions how big they are, how they need to act in relation to each other and where they need to be positioned. Divs are used to build the skeleton, and nested within that skeleton are divs positioned to display the content.

In the simplest terms, the task of reducing a design to code is one of adaptation and mimicry. You’ve been given widths, heights, images and a layout. The header, no matter how complex, is a block. The body is a block. The footer is a block. Building divs and styling those divs in the most basic sense is building, sizing and positioning those blocks.

Once you understand this, the sky’s the limit. The ability to see underneath a design and  parse out the building blocks that need to hold it together, is the fast track to browser uniform, user friendly and beautiful design implementation.

Resources:

To learn more about HTML and CSS fundamentals, check out the great resources below:

HTML Dog
Nettuts+
BolducPress (Image Slicing)

Leave a Reply