Cascading Style Sheets (CSS): May 2008 Archives

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 releases Doctype

| | Comments (0) | TrackBacks (0)

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.