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.
- The Top Ten Reasons why CSS is better than HTML
- Why You Should Use CSS for SEO
- How a CSS Website Layout will Make you Money
- The Role of CSS in Web Design
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.
- 30 Useful Frameworks for Designers
- 10 Promising CSS Frameworks that are Worth a Look
- 10 Outstanding CSS Grid Systems
- 10 CSS Tricks you May Not Know
- The Case Against Vertical Navigation – An article arguing why left-hand navigation is becoming outdated in web design.
- CSS Layouts: The Fixed. The Fluid. The Elastic. – A look at the pros, cons, and quirks of three different CSS layouts
- A Definitive List of CSS Frameworks - Choose your weapon; or rather, your CSS style
- One-of-a-Kind Navigations - You won’t find any boring nav bars here.
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.
- Legibility and Readability in Typographic Design - Q: Why is typography so important? A: So people don’t get angry at your site because they can’t read anything you tried to type in that horrible Curlz MT font
- Proportional Leading with CSS Media Queries - Learn how to make the leading expand as insert-browser-here expands the measure
- Typography for Lawyers (and everyone else) – Leave it up to the lawyers to point out all the horrible typographical errors in court documents and memos
- The Culture of Typography on the Web - It’s hard to develop a standard when web design is still a teenager
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.
- 10 Tools for Choosing the Right Color Palette – Whatever you’re aiming for, these tools can help you find the right color scheme for your design.
- The Psychology of Colors – Colors can greatly enhance your design in a way to help viewers perceive it the way you want them to. Ever wonder why McDonald’s, Burger King, Jack in the Box, and Wendy’s all use the color red?
- Color Psychology: Big Website Case Studies – A closer look at major websites’ use of color. Spoiler alert — Barbie’s website has a lot of pink
- How Color Affects the Ease of Reading - Surprise! The easiest combination is black on white. But what about other colors?
- Essential Colour Checklists for Web Design - Unfortunately, English vs. American spelling is not included in the checklists
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.
- 11px /16.5px – Body copy and leading.
- 24px – Main heading used as section headings on the Homepage, Portfolio homepage and entries.
- 18px – Headings for journal entries and portfolio subheadings.
- 16px – All navigational and content tertiary headings.
- 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.
- 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
- When Less is More – A look at how minimalist design can grab attention and improve your design without the annoying array of colors
- The Case for Minimalist Web Page Design – A webmaster article on why minimalist web pages continue to achieve great results with their simplicity and style
- Psychedelic vs Minimalist – Some successful examples of both approaches to web design.
- 29 of the Most Colorful Websites
- Designing Websites for Kids
Everything should be as simple as possible, but never simpler.
- Albert Einstein