Tag Archive for 'CSS'

Steps to CSS Design

When I came across this link I was expecting a list of reasons, but what I found instead was a solid workflow for designing with CSS. Bookmark it, folks!

Why Programmers Suck at CSS Design »

Rob Walsh & ebugogo.tv

080325ebugogo

Very pretty website by Rob Walsh. Right-click the background and choose View Background Image to get a better idea of how he constructed it. The structure of the site itself is super simple, but the imagery makes it sing.

Rob Walsh’s Portfolio –> [via webcreme]

Web Standards – The Basics

This is the first of a new format of posts here at the DArTT student blog – I’ll be posting some DArTT-generated helpful articles, tips and commentary periodically. Please let me know if you like it!

Working with CSS and abandoning Tables for layout can be daunting. It took me a while to sort it out in my own head, but a good understanding of the concept really helped.

I’m going to go over the definitions and the reasoning for web standards coding and markup, and then give you some basic steps for doing it yourself.

(Note: I might say HTML but I mean XHTML. It’s just habit!)

The basic idea is that you want to separate the presentation from the content so that any change – from a slight adjustment to a full redesign – is as simple as possible.

Ideally, to change the layout of a site, all you would need to do is change the style sheets; you would not need to edit the pages themselves at all.

Using Web standards also reduces the file sizes of your pages. This saves bandwidth, which costs money for you as well as time for the user.

Using Web standards ALSO makes it ridiculously easy to maintain visual consistency throughout a site. Since pages use the same CSS document for their layout, they are all formatted the same. This strengthens your brand and makes your site more usable. VERY important!

PRESENTATION refers to every last bit of CSS, as well as any HTML tags or properties that only exist for style purposes. Gone are the days of <font color=”#FF000”></font>, or <body background=”blah.jpg”> – ALL DESIGN should be controlled by CSS in an external style sheet.

With the CSS in its own external document, this leaves nothing but plain, semantic (more on that in a second) XHTML, and the content itself. That allows ease of editing for the content without affecting what the site looks like.

Semantics, for those who haven’t heard that term before, is the study of meaning in language. Every element in HTML carries an inherent meaning and purpose, which it passes along to the content within it. The semantic value of your markup should align with the semantic value of your content.

Content is all of your actual text, plus tags like h1-h6, paragraphs, list, em, strong, code, cite, etc. These are tags that explicitly *describe* the content – they don’t affect how it displays.

Using CSS to do your layouts requires a slightly different way of thinking than you’re used to. Rather than thinking about things like “this goes here and this goes here”, we need to think about the KINDS of information in our page and the STRUCTURE of that information.

We give the most important headline an <h1> tag; subheads get marked up with <h2> tags, etc.; and paragraphs are paragraphs. This is what is known as “structural” or “semantic” markup, and it’s what I mean when I say “informational hierarchy”.

That means, among other things, that if you have a first-level headline, it should always be surrounded by <h1></h1> tags. Don’t skip from h1 to h3; if you have a first-level headline and a third-level headline, there must, semantically, be a second-level headline as well. Semantics are very important for SEO (Search Engine Optimization) as well.

Finally, and this is a big one for layout purposes, instead of putting your content inside of tables and table cells, wrap it in DIV elements. Give your div elements an id or a class that is descriptive of their content and/or function, rather than their appearance. For instance, “sidebar” or “maincolumn”.

When you’re deciding what tags to put on your content, think about why you want something to appear a certain way; what does it mean?

When you italize something, is that because you want to emphasize it, <em>, or because it’s the title of a book, <cite>? Make sure you know which one to use, and never use <i>!

If something is bold, it should probably be marked up as <strong>. <b> has fallen out of web standards use.

If you want a line break after something, chances are it should be marked up as a header element. If it’s not a header, is it part of a class that occurs throughout your site? If that’s the case then use CSS instead of <br>.

Your markup can and should convey meaning, even to someone who cannot see your page. Semantic markup makes our pages more accessible to everyone, including search engines.

So let’s do an example. Let’s say we’re working on a website for which we have all the content. We need to analyze it and mark it up semantically – put the headers at the top of the content, use paragraph and headline tags where necessary.
Most websites have the following categories of content:

  • Main navigation
  • Subnavigation
  • Headers and footers
  • Content
  • Related information
  • Other

You want to put the most important type of content at the top of the page, and the next most important next, and so on. Then wrap each of these types of content inside of a semantically-named div tag.

Put your main navigation into a div with an id of mainnav; put your sub-navigation inside a div with an id or class of subnav, put your footer in a <div id="footer">, and wrap your content inside a <div id="content">.

Your site can and should be completed in this ugly, text-only format, before you attempt any presentation design.

A basic site could look like this:

<html>
<head></head>
<body>
<div id="header"></div>
<div id="content"></div>
<div id="navigation"></div>
<div id="sidebar"></div>
<div id="footer"></div>
</body>
</html>

…of course, with the properly encoded content included.

A full-XHTML example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>TITLE GOES HERE</title> </head>

<body>

<div id=”header”>
LOGO AND HEADER INFO GOES HERE
</div>

<div id=”navigation”>
LINKS GO HERE (put in the actual links though!) </div>

<div id=”content”>
Put in content
</div>

<div id=”sidebar”>
Extra stuff
</div>

<div id=”footer”>
etc
</div>

</body>
</html>

With that under control, it’s time to start writing your CSS.

At the beginning, give each div a border. For example, div {border: 1px solid gray; } This will help you see where they begin and end, and also whether or not you have any nesting or overlapping. When the elements are working correctly, remove the border code.

Write the CSS for all your element selectors first (<html>, <body>, <p>, <h1>, <h2>, <ul>, <li>, etc.). The body tag should include any background image for the page, the main font selection for the site, and probably you should set all margins and padding to zero.

When you put the font face and size in the body tag, you won’t have to declare it again in any other CSS tag, unless you want it different (such as in headlines).

By setting all margins and padding to zero, you are able to control the margins and padding of each of your elements separately. This is good because the browsers handle margins and padding slightly differently.

As you work, test in as many browsers as you can and get your friends to test it in their browsers.

You have to decide here between absolute and relative positioning, or floats, or what, but that’s way too much for this article.

To reiterate: Separate the presentation from the content. Organize your information semantically. Build your XHTML page first. Write your CSS after your content is under control.

The Principles of Beautiful Web Design

080115beautifulwebdesign

I don’t often recommend books here, but this one has such an appropriate website I couldn’t help myself. I actually don’t even have this book, but the website makes me wish I did. When you rollover each of the principles where the navigation usually is, instead red notes appear showing actual examples of each principle used on the site itself. Genius, pretty, usable, and totally web-standards friendly.

If you don’t buy the book, at least check out the site!

The Principles of Beautiful Web Design –>

12 Lessons for Those Afraid of CSS and Standards

080115cssstandards

Here’s a description of Semantics, CSS, and web standards that should help the newbies get a grasp on it. It’s geared towards helping people who are used to designing with tables let go of the old and embrace the ‘new’ (this is of course a year or two old, but I’m thinking of my students!).

12 Lessons for Those Afraid of CSS and Standards –>

Designing a CSS Based Template

071114veerle-csstemplate

I think everybody’s a fan of Veerle, one of the web’s most honoured illustrators and designers. Her blog is simply gorgeous, and her design aesthetic is matched by her technical skills. But what makes this worth keeping in your favourites list is the wealth of tutorials buried in the archives. Browse by category or date to find a lot of great tips and tricks for design, Illustrator, Photoshop, and so much more.

I’ve found an excellent 8-part tutorial that shows, step-by-step, how to create a website based on CSS and the very content/sidebar/footer/header ID tags I’ve been teaching y’all. Go through and practice by following along, and then try to create your own design using the same techniques.

Designing a CSS Based Template –>

Web Design: Dodge Ball

071031dodgeball

Really beautiful CSS-based design over at the Dulles Dodge Ball site. It also sounds really fun :)

Dodge Ball –> [via webcreme]

Gallery of CSS Navigation

070807CSSnavigation

Wonderful set of 37 CSS navigation techniques. Tabs, lists, drop-downs, and more.

CSS Showcase Gallery of CSS Navigation –>

Creating a CSS Layout From Scratch

070724slicingcss

“This guide will attempt to take you step by step, through the process of creating a fully functioning CSS layout.”

This is a MUST READ for all of my current Web Design students.

Creating a CSS Layout From Scratch –>