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 likeApple homepage looked like the following:
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 imagesIn 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):
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.
#billboard .grid2col .column.first
Styling the portraitThe 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:
The next pageIf 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.
ConclusionI 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!