CSSnewbie

This article may be a little headier than most of the things I link to, but Chris Boone has put together an interesting argument for the use of the traditional typesetting sequence of sizes on the web. He posits that a traditional set of useful web type sizes (10pt - 36pt) comprise a “harmony” regardless of the “frequency” — that is, it doesn’t matter if we’re talking points, pixels or ems, so long as the proportion between the type sizes remains the same. Chris also gives a few coding examples, to show how all of this theory can be put to good (and simple!) practice.

ilovetypography.com has a great roundup on 15 websites that make great use of CSS to create some fantastic typography for the web. Web typography is almost something of an oxy-moron these days, with so few typefaces from which to safely choose. And yet here are more than a dozen sites featuring beautiful, well thought out typography.

If all of this typographical mumbo-jumbo talk is flying right over your head, this new free e-book from Just Creative Design might be a good resource to check out. All you need to do is subscribe to JCD’s RSS feed, and you’ll be given a password to download his new e-book. The 27-page resource describes the 10 types of classification used to describe different typefaces in the graphic design world.

It can be tough to get a grasp on all elements of Search Engine Optimization at once — there’s a lot to remember! But this SEO diagnostic tool by XinuReturns.com really helps put everything into perspective. Just type in your website’s URL and it will pull together dozens of disparate data, from your Google page rank and the number of pages Google is indexing, to the number of meta keywords your page has set.

As the website states, “Uni-Form is an attempt to standardize form markup (xhtml) and css, ‘modularize’ it, so even people with only basic knowledge of these technologies can get nice looking, well structured, highly customizable, semantic, accessible and usable forms.” Essentially, it’s a giant CSS file that takes a lot of the pain out of styling form elements (and they can certainly be a pain!), and combines it with some jQuery niceties. If you’re looking to whip out a well-designed form in a hurry, this would be an excellent place to start.

It’s useful and sometimes quite necessary to sketch out your designs prior to diving into the code. Most designers use Photoshop or similar applications to design their mockups and more often then not need to include form controls like dropdown menus, radio buttons, etc. This site offers a wide variety of controls - on popular platforms and for the big three browsers - for use in image editing applications. This is a big time saver if you don’t already have a library of these snippets handy.

While this article is quite detailed and probably a bit of a stretch for any ‘newbie’ site it’s a great read. Every developer who touches CSS code in any manner is dealing with fundamental elements of graphic communication: layout, type, imagery, color, balance and the added dimension of interactivity. Understanding typography is vital to creating a great design, regardless of medium.

This is one of the best collections of great css-based design on the web. You can find yourself spending hours checking out these linked and occasionally annotated screen shots.

The “Blog Design Blog” has pulled together a list of 25 of the best web and blog design books out there. They have divided the books into nine categories: Typography, CSS/XHTML, Design, Color, Usability, Logos, JavaScript, “Extras” (which just don’t fit elsewhere), and a Bonus section specifically for blog designers. If you’re looking to expand your knowledge in any of these categories, this would be a good place to start your browsing. I only own five of the 25 suggestions listed, so I might have a few more books to add to my Amazon Wishlist soon.

KlausKomenda.com has a nice roundup of over a dozen web developer tools (I counted seventeen) spread across four of the most popular browsers: Firefox, IE6/7, Opera, and Safari. They give a short description of each tool and what it does, and provide a link to download the tool. These tools can really help in debugging and testing code, so they’re worth a look. If you’ve never used a browser tool before, or if you’ve always just limited yourself to one browser’s offerings, it might be worth checking out this roundup.

Here, Antonio Lupetti reminds us that the best way to simplify your CSS is to take a top-down approach — planning your website out in broad swaths, planning the major elements that will go in those larger areas (headings, lists, etc), and then using those tags as “hooks” as often as possible in your CSS. This technique immediately reduces redundancy and keeps Classitis at bay.

The 960 Grid System is an all-in-one package for the rapid development of websites that are 960 pixels wide. As the site says, 960px is a great with to start with for two reasons: “All modern monitors support at least 1024 × 768 pixel resolution,” and “960 is divisible by 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 and 480. This makes it a highly flexible base number to work with.” The system comes with printable grid paper (for sketching) as well as templates for Photoshop and other programs (for designing) and a CSS framwork (for coding). If you’re in to frameworks, this is probably worth a look.

Dejan Cancarevic has compiled a list of the 12 most commonly used tips and techniques. And while I have no way of verifying the veracity of that claim, I’d say they’re pretty common techniques regardless. It’s a great roundup overall — my only complaint is that Dejan has used quite a few deprecated tags in his examples, such as bold tags instead of strong tags, and he doesn’t close all of his tags (e.g., his breaks). In short, his CSS is great, but his XHTML leaves a bit to be desired.

Trevor Davis has compiled a list of the “6 Most Important CSS Techniques You Need To Know.” This list is fundamentally different from the one StylizedWeb published this week, in that Trevor’s techniques focus more on the basics (such as replacing text with an image) instead of SW’s more intermediate- to advanced-level article. Though basic, there is a lot of useful information in this article. Trevor’s tips on setting a consistent base font size, for example, would be pretty invaluable to a new CSS developer wanting to learn to do things the right way.

I’ve already mentioned this article once in passing this week, but I wanted to ensure it got the attention it deserved. Woork’s Antonio Lupetti has compiled a great resource for anyone who might be interested in styling some seriously attractive message boxes. Antonio offers five different message box styles, all of which can be created with one or two lines of XHTML, a few lines of CSS, and minimal images (if any!). This collection is definitely worth a look, and probably a bookmark (I know I’ve bookmarked it!).

The min-height and min-width CSS properties are two of the most useful properties out there, but they never get much use because Internet Explorer 6 doesn’t understand them. However, with just 3 lines of CSS (versus the original one), you can create cross-browser, IE-friendly min-height and min-width properties.

Here’s a great tutorial for all you CSS newbies out there. Matthew Griffin goes through four useful things you can do on your website with just an unordered list and a few lines of CSS. Unordered lists are sort of the go-to element in modern web design when it comes to organizing snippets of generally related items, so this is a great read for anyone new to the trade and wanting to learn how to get the most out of this great little element.

The 960 Grid System is an all-in-one package for the rapid development of websites that are 960 pixels wide. As the site says, 960px is a great width to start with for two reasons: “All modern monitors support at least 1024 × 768 pixel resolution,” and “960 is divisible by 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 and 480. This makes it a highly flexible base number to work with.” The system comes with printable grid paper (for sketching) as well as templates for Photoshop and other programs (for designing) and a CSS framwork (for coding). If you’re in to frameworks, this is probably worth a look.

Antonio Lupetti offers a simple and well-thought-out article on how to construct and organize large and complex CSS files — without driving yourself insane in the process. He offers down-to-earth tips such as grouping selectors, using comments for organization, and planning out your basic requirements on paper before committing to code. This article is worth a glance even for more advanced designers.

Design Shack has a nice roundup of XHTML forms styled with CSS. This is a useful resource for anyone who has ever (or will ever be) charged with styling a web form. Several of the designs are downright attractive, and they’ve linked to other websites where you can learn more about styling forms, as well.

Samuel of WakeUpLater has a great article comparing 10 popular websites of today (Apple, Microsoft, Amazon, Nike, and others) with those company’s websites of yesteryear. It’s interesting to see, for example, how Apple has been able to maintain their clean, modern aesthetic over the last decade, while still continually evolving their website to keep up with changing and evolving technologies.

Although this isn’t technically CSS related, I think it’s a sufficiently valuable resource to share. Shifting Pixel has just released their “Smart Image Resizer” PHP script. Basically, this script allows you to upload one large-sized version of an image and then call that image via a special URL in your image’s SRC attribute. The attribute points to the PHP script, which creates the size of image you need, caches it, and serves up the new image. The benefit is you can use one source image in many places and sizes on your website without having to either create a bunch of derivative images by hand or rely on the browser’s shoddy resizing algorithms.

Here’s a list of eight great CSS tips from the minds behind CSS Globe. And the best part? Each CSS rule contains only a single property: value pair, meaning these are some of the smallest and easiest-to-learn tips around. That doesn’t mean they’re obvious, though: I learned a thing or two, myself. And be sure to read through the comments for a lively discussion on the tips, and a few extras submitted by readers.

John Boardley has posted a great, accessible article on the art of typography on the web. If you’re new to writing for the web, this article is a good place to start your research. Instead of focusing on font selection, John highlights the concepts of size, contrast, space and hierarchy, and explains why all of them should be considered a major part of your design, regardless of what typeface you settle with.

Here’s a great example by Mike Cherim of what can be accomplished in the realm of navigation using pure CSS. This example doesn’t use any images whatsoever — yet looks better than some image-based nav bars out there. Mike’s excellent use of the :active pseudo-class (activates when the link is clicked) makes this example really stand out. If you were to combine this with my Intelligent Navigation system, you’d really have a system to reckon with.

CSSVista is a fantastic and free application for testing your CSS in Firefox and Internet Explorer simultaneously. The program behaves mostly like a web browser — except you can edit your CSS on live websites at the click of a button, and then see the results instantly in both Firefox and Internet Explorer. When I downloaded it to test it out, I discovered a bug in CSSnewbie’s sidebar in IE6 that I was able to quickly diagnose and repair.

This article is a great place to start for those wanting a deeper understanding of how the various browsers render XHTML lists by default (hint: IE is the odd man out), and how to negate those differences with CSS to create a consistent cross-browser appearance. Kaspars walks us through the default rendering (with beautifully rendered examples!) and the CSS needed to counter them. He also gives a few practical examples on how to style your lists for greater visual appeal.

CSS-Tricks has started releasing semi-regular video screencasts (think: video, but of a computer screen) covering topics rather useful to the beginning-to-intermediate CSS designer, such as how to move from a Photoshop mockup to a CSS-based website. I’ve only watched the first two so far, but if they’re any indication of the overall quality, this is definitely a page to bookmark.