Categories
main

Optimizing HTTP requests and CSS with @media

Situation

Room for ImprovementAll of our sites have three style sheets, an “all”, “handheld” and “print” all necessary to a well rounded web experience.

Problem

They come at a cost tho, three HTTP requests each page load. It doesn’t seem too bad when you get 1000 visitors a day or each file is only 100k but it get infinitely compounded when 40,000 visitors a day and the css weigh in at ~5kb total. Just in the access log alone that is 3 lines per visitor or ~160 bytes totaling ~6.4 megs of log data a day.

Solution

@media – The hidden killer.. er.. saviour. Combining all those style sheets into one and using @media to separate the pieces.

Example

@media all {
#content{
background: #0C5449 url(../images/content-bg.gif) repeat-y top left;
width: 706px;
}
...
}
@media handheld {
#content{
width: 100%
}
...
}
@media print {
#content{
background-image: none;
width: 100%
}
...
}

In the HTML:

<link href="/css/home-all-min.css" rel="stylesheet" type="text/css"  media="all" />

Results

A reduction of 2 less HTTP requests and 2/3 less data being written to the access log. Compression saves ~20% of the css size but combining into one file reduces the overhead of the 1kb or 500b for the mobile and print style. Multiply that by 22% of our new visitors a day with an empty cache is a savings of ~24,000 HTTP requests a day.

I would say that its well worth it, reducing the amount of net traffic while still presenting the same amount of information. Although this is straight data without compression, things really start to get interesting when compression is added to the mix, stay tuned.

Categories
main

Progressive Enhancement

Building for the lowest common denominator and then expanding upward. It sounds like a simple concept but most wed developers just can’t seem to grasp it. Not believing accessibility matters or being so inexperienced that building sites seems to just be a hack fest to make the “design” work in all browsers is the single largest issue with web design now a days.

One example off the top of my head is mtv.com which did a total redesign in flash and had all these crazy bells and whistles, integrated video, movement, etc. Well two months later guess what happened, they redesigned again this time into a fully xhtml compliant site which didn’t have all the movement but was 100x easier to use and you could actually get to it with a cell phone and actually search for text on the page.

Two simple things I always look for when going to sites, first since I don’t have a lot of time to read through pages for information I use the firefox built in find as you type and if it cannot jump right to the word i am looking for ill go someplace else.

The second I don’t use as much but I am sure other people do, phone browser support. I am not talking about iPhone safari support because that is not really developing for the lowest common denominator. I use either a WAP browser of Opera on my phone while out and about if I need to look up information quickly. If I cannot get to your page and get to the information I need I will leave your site and probably never return.

We have a CMS that we built at Wayne State and sometimes page updates need to happen right then. We built it for the lowest common denominator just for that reason. We can get to it on any WAP browser and update any page in the CMS as if we were on a full computer. Without it we would have to rush to a computer just to use some fancy ajax interface, it would be pretty but would it really be worth all the hassle? I think not.

Anthem:
Speed > Features
Simple > Complex
Enhancement > Degradation

Categories
main

Flexable, Eatable CSS Forms..

The web is filled with forms and the more social sites get the more forms required. At Wayne State we end up creating a lot of forms for a lot of purposes. I am going to take for for example and show how we have come up with a fully flexible html form and how you can adopt it too.

Basics:

  • RSVP form for an event
  • Mixed input, select, radio, and textareas
  • Has required fields
  • Has examples for certain fields

The HTML

<form action="/" method="post" name="rsvp" id="rsvp">
<fieldset id="table_rsvp">
<legend>RSVP Form</legend>
<div class="field_first_name">
<label for="first_name"><em>*</em>First Name:</label>
<input name="first_name" id="first_name" type="text" size="30" maxlength="128" value="" />
</div>
<div class="field_last_name">
<label for="last_name"><em>*</em>Last Name:</label>
<input name="last_name" id="last_name" type="text" size="30" maxlength="128" value="" />
</div>
</fieldset>
</form>