CSS: the use of styles in Apple homepage

Tweet

As you already know, Steve Jobs has passed away. When the news appeared on the web, many blogs, news agencies and web sites published articles about the life of the man who's been said has changed the world.

The Web Thought paid a tribute to him, as well, by reproducing Apple corporate homepage main picture.

Apart from the sad thing, I would like to take your attention on how the Apple web team created that homepage. I believe it is quite interesting to see how CSS styles were used, even if it might look too basic.

Please follow me...

How the page looked like

Apple homepage looked like the following:

Many of you may think that the image sitting on the main frame of the page, is just one big jpg. It is not.
The Apple team in order to optimize the loading time, and in order to make the page more lightweight, decided to divide it into pieces.
The result might sound quite obvious, but - as an exercise - we should try to understand what they did.

The two images

In reality, there are two images (2 pngs). One is the portrait of Steve, and the second is the writing.
The web team divided the page in two parts or columns: one contains the photo and the other the writing.
That gave the developers an easy way to place the contents where it was meant to be. To do so, they styled the two containers.

Styling the writing
After dividing the workspace, it is fairly easy to place the content. First of all, the writing (#billboard):

.column
{
  float: left;
}
.grid2col .column
{
  width: 49%;
}
.column.first, .column.last
{
  margin-left: 0pt;
}
#billboard .grid2col .column.first
{
  position: absolute;
  height: 75px;
  width: 205px;
  padding-left: 143px;
  padding-top: 245px;
}

The main part is played by the positioning and padding (the last part of the above code). That way, the writing is staying exactly where the developers wanted. They used fixed values for padding, just because the whole page is not fluid.

Styling the portrait

The portrait is styled in a similar way (or better said the container is). It is to be noted that to achieve the bottom-right corner radius effect, the image has being styled appropriately:

.roundedbottomright
{
  border-top-left-radius: 0pt;
  border-top-right-radius: 0pt;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 0pt;
}

The next page

If you click on the homepage, you will land on another page (Remembering Steve Jobs) which is built with the same idea. The first writing is an image again (t_title.png), while the rest is just text. The png is displayed with appropriate margins, in order to be placed roughly at the center of its container.

Conclusion

I know that this whole post might sound too basic for many of you, however my point here was to make all of you aware of the clever and simple way the beautiful final effect was achieved. The page works perfectly in any screen resolution. It is simply made and really effective, with a strong attention on loading speed.

Looking at this kind of examples, makes us aware of the difference between good and bad programming. Moreover, we can learn something, even if it's basic.

Have a nice day!