Recently in Cascading Style Sheets (CSS) Category

Since Paul wrote some posts on JavaScript frameworks before (part 1, part 2), I thought I’d mention something about CSS frameworks. I’ve begun using them on several projects and have found them to be a huge help. I find that laying out the page is easier, the most common styles are already set and browser bugs are few and far between.

What the heck is a CSS framework?

It’s pretty much a library of pre-built styles that help with designing a Web site. The goal of using a CSS framework is the same as other programming frameworks — to speed up development and ease collaboration between developers. A List Apart wrote a good article on the subject.

Usually, when beginning to style an XHTML page, I’d start with a few basic styles to override some of the browser’s defaults. Then I’d throw in a few other styles for hidden “skip-to” links and basic typography style. This would save me a load of time and without realizing it, I was using a CSS framework!

Other designers used similar methods and one of the first to become widely adopted was Eric Meyer’s “reset styles.” It was a set of styles that would override a browser’s default styles and give the designer a blank canvas eliminating a lot of browser testing.

CSS frameworks have taken this one step further and have included styles for typography, forms, browser bugs and layout grid systems. The methods in which styles are applied have structure so one designer doesn’t have to decipher another’s naming conventions.

Google recently released Google Doctype, “…a Google-sponsored open encyclopedia and reference library for developers of web applications.”

I’m a little disappointed in the content of some of the “HOWTO” articles (they just aren’t very deep) though the security articles are very good. The DOM, HTML and CSS References are top notch and are sure to be EXTREMELY handy in the future.

I came across an article this morning and thought I would share.

Average Web Page Size Triples Since 2003

Within the last five years, the size of the average web page has more than tripled, and the number of external objects has nearly doubled. While broadband users have experienced faster load times, dial-up users have been left behind. With the average web page sporting more than 50 external objects, object overhead now dominates most web page delays. Minimizing HTTP requests by using CSS sprites, combining JavaScript or CSS files, reducing the number of EOs, and converting graphic effects to CSS while still retaining attractiveness, has become the most important skill set for web performance optimizers.

WOW. The average size of a web page is now 312K! Granted, if you have broadband, 312K is not that much, but just think back to how long that would take to download over a 56K modem. And while broadband adoption is increasing, most reports show that 20% of Americans are still using dial-up, the majority of which are in rural areas. This gives those of here at the University a very unique challenge: how do we keep our sites looking fresh and modern without leaving dial-up users behind?

The main page at www.missouri.edu comes in at a slim 43K (thank you LORI), Which is about 12 seconds over a 56K modem. A quick, non-scientific sampling of other web pages throughout our University show that most pages appear to be in the 75K range, with a few topping out at over 400K (which would take almost 2 minutes to download over a 56K modem). So what are some easy things we can do to trim down our pages?

Two very simple things you can implement immediately are to save your javascript files and CSS files in a minified version. There are free online tools to help you minify your CSS and to minify your javascript. For example, the styles.css file in use on the www.missouri.edu main page is currently 18K, but could be reduced another 4K if we were to minimize it. And we were able to shave 66K off of the javascript file we are using on the main site.

Be sure to check out websiteoptimization.com’s Speed Tweaks for other tips/tricks on how to speed up/trim down your pages.

If you were to randomly grab a book out of the web technology section of any book store odds are you'd get a book on cascading style sheets (CSS). They're everywhere. With a flood of CSS books on the market, it's not a problem finding out how to write CSS, make it valid, standards compliant and accessible.

Being a creative person from the print world who made the transition to the web, I've had a hard time finding any sort of resource on the creative process of Web design -- which I find sort of strange. Any book on print design focuses on the creative process and spends very little time talking about applications or operating systems. Yet when it comes to Web design, it's all code and browser compatibility.

I suppose there is a reason for this. Print design has its roots in the fine arts and tends to be very visual while Web design emerged from programming and tends to be highly technical. It’s basically the old "right brain" vs. "left brain" fight. So, how do we meet in the middle?

I thought I had found my answer in The Zen of CSS Design, but it fell short of my expectations. While it was good for creative inspiration, it ended up being a gallery of advanced CSS techniques without much explanation behind either the creative or technical process.

Now, with the release of the follow-up to The Zen of CSS Design, I’ve got my answer: Transcending CSS, The Fine Art of Web Design by Andy Clarke. This beautifully designed book is about design and not markup, and assumes that you already know about XHTML, CSS and Web standards. It goes over designing from the content out, finding inspiration, establishing a workflow, creating wireframes and prototypes, and working with grids and the box model -- allowing both sides of your brain to work together in harmony. It's about time!

It's tough laying out forms and even tougher to make them pretty and accessible. With a little extra effort, and help with some nifty XHTML tags, you can get the results you want with less effort.

The tags I'm talking about are related to the <fieldset> tag. You can see an example of it on the directory page of the MU Homepage. Notice the borders around the forms? That's from the <fieldset> tag. It is a container for related information. Now, notice the labels for each one? These are defined with the <legend> tag. Add a <label> tag to all the form elements inside the fieldset and you're done. Not too shabby. Since these things are XHTML tags, you can easily style them with CSS and end up with something that looks great.

There is one problem that layout perfectionists may not like. It has to do with the <legend> tag. Web browsers do not display it exactly the same way. You're limited in the ways you can style margins and padding on this element, so you won't be able to get pixel perfect alignment or positioning. It's only a small difference and not worth pulling your hair out over.

If you're still a little unsure about fieldsets, A List Apart has a more in-depth article on the topic if you decide you need more info.

Now go forth and make those forms prettier and easier to use! Also, keep in mind that fieldsets aren't just limited to forms. They can go around any kind of grouped content.

Julie Harpring from the MU Graduate School gave a great presentation* today at the Web Developers Group meeting on the value of Web standards. A lively discussion followed where many of the developers in the room shared their experiences with CSS and creating standards-compliant sites. Despite a bit of a learning curve and some frustration, I think it's fair to say that most of the folks who have moved to standards-based design are reaping the benefits.

When designing with CSS, one hurdle you have to overcome is consistent font sizing across browsers. A common approach is to set type using pixel measurements. It seems like a good idea because they are consistent and easy to manage. The problem with that approach is that IE won’t let a user make type larger. This causes a usability problem.

There are several approaches to this problem, but I’m going to talk about the one that I use. I came across it in this book: Bulletproof Web Design. No matter how you decide to do it, the important thing to remember is to use relative font sizes.

Update 11-21-07: I've found a simpler way to do almost the same thing and it doesn't require a hack. Simply use 76% as your font-size, like below.

That's it! Pretty easy, huh? I have noticed that this method isn't as precise as the more complicated one. Fonts seem to be a tad smaller on the Mac. I can live with that as long as it makes my style sheet simpler.