← Back

Web Design with Style, Ease, and CSS

When it comes to creating sites with CSS, you can easily find yourself getting frustrated. Between redoing the same basic layouts and struggling with the legibility of your site, it can be a tedious process of trial and error. While looking through successful sites and analyzing their approach can provide inspiration, it also means your design is more likely to look like someone else’s instead of your own. That’s where the basic understanding of a few concepts can help the most; if you can start with tried and true pieces of successful designs, you’ll find adding your own flavor is much easier once you have a base to build up from.

Why CSS? Fantastic question.

These tips and links will hopefully help you not only quicken the startup process of your site and improve your website for all the reasons above, but also provide you with some valuable information on standards of style and legibility.

Part I: Framework in a Flash

Mike Stenhouse categorizes most websites into one of the following types:

  • Vertical navigation with one content column
  • Vertical navigation with two columns of content
  • Horizontal navigation with one content column
  • Horizontal navigation with 2 columns of content
  • Horizontal navigation with local navigation and one column of content
  • Horizontal navigation with local navigation and 2 columns of content

This presents a unique opportunity for you, the site creator. While these categories somewhat take the imagination out of page layout, it also means there are now several places you can obtain page-structure code that has the basic layout of your desired finished product. If your site can fall into one of the above six categories, then the lengthy process of recreating your layouts has been shortened to a few minutes.

Framework Links

Part II: Typography and the Measure

Typography is often boiled down to a definition akin to that which makes your design easy-to-follow and pleasing to the eye. It is somewhat of a mystery to many web designers; given that there are so many choices it often doesn’t occur to people that there might be wrong ones. When considering size, contrast, weight, color, and especially readability, things can get overwhelming. In general, there are a few basic schematics that designers have successfully followed.

The Measure is the name of the width of your column of content. Two popular forms of measurement are the pixel, which is relative to your screen resolution, but can only be used in whole numbers, and the em, which is the distance horizontally equal to the type size, in points, you are using and is popular because of its more precise increments of size.
Other units of measurement include:

  • Points (pt)
  • Pica (pc)
  • Millimeters (mm)

The optimum width for many Measures on successful sites is quantified by the number of characters in the line. Typically, the measure is between 50-80 characters in length; this counts letters and spaces. This width is generally considered to be very legible. Along with the measure is the leading, or the line height. As a general rule of thumb, your leading should be wider than your measure. This allows your reader to move across the lines, as opposed to down the lines. Your leading should increase or decrease in proportion to your measure.

Typography Links

   Part III: Color

When it comes to color of type, it’s easiest to separate color schemes into two categories.

   

Regarding color schemes and palettes, there are a lot of options available. Many designers will tell you that less is more in regards to color schemes, but it depends on the message you’re trying to get across to the viewer and what viewer you’re targeting. It is, however, often agreed upon that too many colors can get overwhelming very easily, and less colors tend to make what color there is pop out much more.

There are, however, examples of web designs that use a lot of colors successfully in a readable way, as well as minimalist sites that stick to grey scale and still keep the site interesting.  For more on color scheme, see Part V.

Color Links

 

Part IV: Size


It seems so easy to simply use the relative sizes we feel comfortable with. But small, medium, and large change drastically according to the browser. When it comes to type sizes, it is best to specify them with ems or the percentage based on the unit of measurement, aka pixels.
These are the pixel sizes as laid out by Mark Boulton for a basic size outline.

  1. 11px /16.5px – Body copy and leading.
  2. 24px – Main heading used as section headings on the Homepage, Portfolio homepage and entries.
  3. 18px – Headings for journal entries and portfolio subheadings.
  4. 16px – All navigational and content tertiary headings.
  5. 13px – All other headed elements.

Size is important in the design. Poorly thought out size schemes will leave your audience constantly scrolling, zooming in to your text, and ultimately focusing on the wrong aspect of your design. The flow of size is intended to increase legibility and guide your viewer’s eyes in a pleasing way; font helps you tell the viewer what to read first.

Size Links

  • Font Size Intervals – Moving towards a standard font size interval system, aimed at Web browser and stylesheet implementers. If you don’t understand pixels per em, check it out.
  • Relative Font Size Reference Chart – Shows common, relative font sizes in percentages and ems.
  • Hierarchy – The use of size, weight, placement, and spacing is illustrated  in different variations. Bonus: you’ll learn the hierarchy of the Catholic Church
  • How to Size Text Using Ems - While you’re waiting for the tutorial, prepare to read about why ems are infinitely better than pixels
  • Why use Relative Scales - In defense of relative sizes. We know absolute sizing is easy, but that doesn’t make it the best

 

Part V: The Importance of White Space


Do yourself and your audience a favor and do not underestimate blank space. It is a subtle feature that is only really noticeable in its absence, but an overly cluttered design can easily drive away viewers. White spaces are handy in line spacing and margins (especially between navigation bars and content). Blank areas allow the mind a more calming simplicity that an over-stimulating mess of content cannot achieve.

Minimalist and Colorful Links

 

Everything should be as simple as possible, but never simpler.

-  Albert Einstein