Marking up your site for easier redesign in five steps

Additional Requirements

Note: Many of the files referenced in this tutorial are from the CSS Zen Garden web site.

For beginners, the CSS resources in the Dreamweaver Developer Center are useful.

For desktop browsing, one of the primary benefits of divorcing presentation from markup itself is to facilitate easier execution of user interface changes without having to make significant modification to the underlying markup, which in many sites today is database driven or embedded. Having said that, while it's true many style changes can be applied to specific elements (tags) used in a page to achieve the desired look and feel changes, it's not true that dramatic layout or look and feel changes can be made unless care is taken in structure of the markup itself. One of the most heavily referenced examples of CSS design flexibility is CSS Zen Garden by Dave Shea. It's there you can see that he's provided markup for which designers create unique CSS that effectively changes the look and feel of the page. The principles and techniques you glean from working on a design for the CSS Zen Garden site are also valuable for styling a page for browsing on various media. In this article, I will review some thing you can do when creating a site that will make your redesign job easier in the future.

1. Define the goals

Determine the level of flexibility you'll need for the site and the compromises you're willing to make to achieve it. There are countless ways to produce both the markup for a page as well as the cascading style sheet for the same. So the first thing that must be done is to identify design elements that won't change in the page. For example, the containing “block” areas of: masthead, main navigation, secondary navigation, left column, right column, content body, footer etc – more often than not, these are the containing blocks which carry content or other elements that will change rather than the blocks themselves.

Next, characterize the types of elements that will typically appear inside any of the blocks and make sure that there are no cases where the elements that might appear in a given block will be dependent on the other design elements in order to render as intended. For example, many of today's designs layer background images to create shadows, rounded-edges or other effects. These are situations where multiple images must be positioned in various elements. When we look closely at the CSS Zen Garden markup in the next section, we find that there is "wasted" markup, in other words there are tags there that are not required to render the page. These are the exact tags that we're going to learn to strategically place to provide virtually unlimited flexibility.

2. Lay foundation: Use your initial design to produce markup and CSS

Go ahead and extract all the files from the five_steps_redesign.zip and while in the Split view in Dreamweaver, open the index.html file, 001/001.css as well as 002/002.css. You can get the CSS file and images for the 001 design from the CSS Zen Garden site. Now let's pretend CSS Zen Garden CSS and Markup is the markup and CSS you've produced. You'll notice that there are additional <span> and <div> tags, which do not serve an immediate purpose. For example:

What is the purpose of the <span> tag here? As you will notice after examining the stylesheet:

A technique from Douglas Bowman is used (throughout the stylesheet) to allow for image replacement of text. Keep in mind that today Scalable Inman Flash Replacement (sIFR) can be used or a technique as simple as the following can be used to reduce both markup and therefore the CSS classes required. Look at line 87 of 001/001.css:

Here you can see that we've introduced two additional properties. The screenshots below show you how to modify these by double-clicking on the #pageHeader h1 line in the CSS pane in Dreamweaver. The dialog that appears makes setting these properties quite easy.

Here we've added a Text Indent of 219 pixels—the same width as the element itself. This positions the copy outside of the element's viewable area.

Next we make sure that the now displaced text isn't rendered by the browser simply by hiding the overflow as shown above.

The point of providing this example is to show that it's quite easy to write much more "tight" markup and achieve the desired results in fewer steps, however, the compromise is flexibility.

3. Identify the containing blocks

In the example, you can see that there are numerous containing blocks. By nesting <span> tags in nearly every given tag, Dave has created numerous opportunities to uniquely style and position each element. Now that this is done, we are able to style the element itself, cascade properties into the span, or redefine the properties of the span.

Clearly, it's possible to introduce too much additional markup into a page, but again the CSS Zen Garden example provides a very reasonable reference point. Let's look more closely at index.html. Although it may be clear to the more advanced coders, there's a pattern to the markup there. IDs are used for containing blocks while classes apply mostly to elements that describe the content in the page.

When reviewing your own markup to identify areas to add more flexibility, you'll need to establish the same pattern to the organization of your containing blocks even you do not insert additional elements for use later. Without doing so, you may not be able to use the float or other properties to make the blocks behave as you require.

4. "Loosen" markup: Use a second design to produce markup and CSS

Now open and have a look at 002/002.css in Dreamweaver. This is a design we recently contributed to the CSS Zen Garden project. Our goal in this section is to make sure that we have added enough "opportunities" (tags) to style the document as possible. It's during this process that you'd want to use the Dreamweaver Design-time capability to help you in optimizing your own stylesheet and markup. The Design-time mode allows you to apply any stylesheet to the markup without modifying the markup directly. It also allows you to view that style sheet applied to your markup in the Split and Design views. Clearly a handy feature designed for just these kinds of uses.

Find the Design-time feature under the text menu, by selecting CSS Styles.

Now we simply make sure that our new CSS file is visible in the Split and Design views by clicking the add button to add the respective style sheet as shown. And of course we hide the already embedded style sheet by adding it to the hide at design time field as shown above.

What you're looking to do in this step is ensure that you've only added markup where required and that you've identified other opportunities to style the page without introducing markup. So in the case of this example, we would be only introducing markup required to satisfy our style sheet, which is already optimized for the design you’re now applying.

Repeat this step several times, modifying your own markup and stylesheets to arrive at something along the lines of the example. Take full advantage of the specificity and cascading characteristics that the IDs and classes provide. In other words, I don't recommend introducing as much markup as you see in the example, although it definitely does yield the flexibility that I promised.

5. Inserting the right elements to accomplish your goal

If your design uses layered backgrounds as our example does, or nested styles for important content e.g. pull quotes are required, then you will need to introduce additional markup around these elements, specifically div or spans. The <div> tag is inherently a block level element, while span is inline and often not as useful (even if you modify its properties) with regard to positioning elements as <div> would be.

Let's look at another example from CSS Zen Garden. This time from our design (002/002.css) at the bottom of the index.html file, you'll notice that Dave left us some very handy <div> and <span> tags - what foresight! Not only did he treat nearly every <div> as a containing block using IDs, with respective nested <span> tags, but he went a step further allowing for 6 more opportunities to add imagery.

Let's look at how we took advantage of these benign tags:

Here you'll notice that we've taken advantage of absolute positioning too and the nested span to achieve layers imagery for the page's footer. Notice that even though these additional tags; e.g. extraDiv2 are positioned at the end of the HTML file, we still use the absolute positioning property in combination with the bottom property to achieve the desired result. It's all well and good to be able to style the copy and position elements as we like, but how can you be sure that you will always have the freedom you desire for positioning your elements? It's logical that our footer appears at the end of the page since that is where the tag is, but what about #extraDiv1? Look closely and you will see that in both our example and in Dave's stylesheet he's used absolute positioning.

Bonus: Positioning elements ─ absolute vs. relative

A logical question for an advanced coder is, why do I need to "loosen the markup" in order to take control of look and feel? I can simply use absolute positioning, right? Yes, this is true, however, without the additional containers the ability to layer imagery, (which is often a vital to a polished design) as shown in our example is extremely difficult. If Dave had not added the empty containers, we would be forced either to use extremely large images to achieve the effects we were after, thus reducing the usability of the page and ultimately making the web page into a picture more than an attractive and functional document.

The benefit of relative positioning comes into play when giving the elements in containing blocks of a code a chance to have a "natural" rendering. You see following the World Wide Consortium specification on absolute positioning is only relative to the containing element anyway (following section 9.3.2 of the specification). So if you're designing your site for maximum usability, meaning (for example) that the text size preferences in a user's browser will influence the rendered size of text. Therefore the chance is very real that a user's browser preferences may "break" the layout of an absolutely positioned page, if done improperly.

The reason for calling out this section is to make clear that there are certainly cases (most likely positioning elements/layers) in an absolute fashion within containing blocks where it is not ideal to freely assume that any element can be absolutely positioned regardless of the properties of its containing block. In such cases, absolute positioning as shown here is in fact dynamic positioning and a valid usability technique in its own right. Defining your goals and also reviewing your markup will help in identifying the best uses for dynamic positioning.

Where to go from here

Once you feel comfortable with organizing containing blocks and the elements within them to help you achieve maximum flexibility, moving on to create a single stylesheet to maximize accessibility across other media like print and mobile browsers is a logical step. This approach to markup does not introduce too much code into your pages (compared to table-based layouts) and will allow you to revisit sites that are even years old and dramatically modify the look and feel with fewer compromises and less effort – exactly what most clients want to invest in today.

Use the style rendering feature of Dreamweaver to help you simulate the user experience in different media. Find it at the bottom of the View menu, go to Toolbars and select Style Rendering or right-click on the toolbar area as shown above to access the menu.