Two months ago I was in a situation where I thought about making my website responsive. At the time I was working on my first responsive website One Planet One World. Applying the mobile first responsive web design mindset; start with the mobile version and work towards larger versions (tablet and desktop).

For One Planet One World it was a natural choice to go mobile first. Having the benefit of a clean sheet and the use of the Roots WP theme (implements HTML5 Boilerplate), which already advocates mobile first in its stylesheet [rule 93-101]. But for my own website I already had the styling for the desktop version. A question arose: “degrade from desktop to mobile or enhance from mobile to desktop?” The first option would mean I only had to make media queries for the mobile and tablet versions. The second option would mean I had to start from scratch (sort of).

After I read Responsive Web Design (from A Book Apart) I made the decision to go for option two. First of all this gave me the opportunity to get rid and/or change elements that needed improvement. Secondly, the first option would mean I would have to write more lines of CSS in the end. For example, the fixed 960 Grid System would need to be reset for smaller than 960 pixels screen sizes.

Thirdly, option two would benefit the page speed performance on mobile devices more. I’ll illustrate this with two code examples. Both examples show simplified code which add the grey wooden background and the social network icons in the footer.
 

Option 1 – desktop to mobile

In the ‘All devices’-style both the body and social icons get a background image. If the screen size is smaller than 480 pixels the ‘Mobile’-style will be applied. Which will remove the background from the body and change the image used for the social icons. This means that it takes two downloads on desktop and three on mobile.

/* 'All devices'-style [desktop] */
body { background-image: url(../img/bg.jpg); }
.social icons { background-image: url(../img/sprite-icons.png); }

/* 'Mobile'-style */
@media only screen and (max-width: 480px) {
	body { background-image: none; }
	.social icons { background-image: url(../img/sprite-icons-large.png); }
}

Option 2 – mobile to desktop

In the ‘All devices’-style only the social icons get a background image. If the screen size is larger than 960 pixels the ‘Desktop’-style will be applied. Which will add the background to the body and change the social icons image. In this case it would take three downloads on desktop and only one on mobile.

/* 'All devices'-style [mobile] */
.social icons { background-image: url(../img/sprite-icons-large.png); }

/* 'Desktop'-style */
@media only screen and (min-width: 960px) {
	body { background-image: url(../img/bg.jpg); }
	.social icons { background-image: url(../img/sprite-icons.png); }
}

Conclusion

If CSS and responsive web design are correctly applied it would mean there is one ‘All devices’-style and multiple queries to select other devices or screen sizes. The ‘All devices’-style shall always be applied, while the queries will only be applied if it matches the screen size. This means that all images in the ‘All devices’-style will be downloaded, even though they might not be shown on mobile. This becomes clear in the code example for option 1.

Every image (and other files) that are part of a website have to be downloaded. It’s best practice to limit the amount of downloads, because downloading simply takes time. This is probably even more the case for mobile devices. Generally mobile devices have slower CPU speed and lower Internet connection speed, which already makes the loading of a website slower. Loading images, which might not even be shown, will only increase this load time. This is clearly pointless and something you should try to avoid.

It’s therefore better to apply the mobile first mindset: start with mobile and work towards larger screen sizes.

After almost a month of redesigning, developing and refactoring I’m proud to announce that version 3.1 is completed. While the main focus was to apply responsiveness, I also took the opportunity to make some other minor changes such as the dotted lines used in titles and the overview page for the PCM stages. However, most changes needed to be made because the old situation wasn’t compatible with the new flexible layout. Or because of limitations of mobile and tablet devices.

In the image below [click for larger version] the three views of the website are shown: desktop (left), tablet (middle) and mobile (right). Some changes that can be seen are:

• Image slideshow gets smaller.
• Navigation of slideshow hide in mobile view.
• Positioning of elements in header and footer change.
• Social network icons (in footer) are larger in tablet and mobile view.
• The sidebar (grey block) positions under the main text in tablet and mobile view.

I’m currently working towards my graduation on the subject of page speed optimization and how it can be applied efficiently. The last two weeks I’ve been reading hundreds of articles, blogposts, papers and websites about this subject. One of the things I learned is that a fast website is more than a good score in PageSpeed and/or YSlow. I’ve been using WebPageTest lately to get an idea of how quick my website loads: the report of this blog (in IE9, on a 1,5Mbps connection from Amsterdam).

I’ve managed to get my average page speed down to 3.5 seconds, which is almost a full second faster than version 3.0. Because I’m becoming a sort of advocate of the importance of page speed I want to share some interesting infographics (from Strangeloop Networks):

• Visualizing Web Performance
• 2012 State of the Union: E-Commerce Page Speed and Website Performance
• Mobile Web Performance vs. User Expectations

One Planet One World is the website of Martijn Huisman, on which he publishes his essays, stories, photos and research projects. Some of the subjects he writes about are history and media, Japan and reggae. With the new design, the website, founded in 2009, has been upgraded to it’s third version.

This new version – nicknamed ‘Rastabar’, after the iconic green-gold-red seperator at the top and bottom of the page – implements a new and fresh design. More thought has been given to implementing shareability with social networks via ‘Share’-buttons, Facebook ‘Like’-buttons and a Twitter feed. Finally, the most important improvement has been made to the publications page, which now functions as a portfolio. It has changed from a simple list to an overview page, and every publication now has it’s own page.

On a more personal note: One Planet One World is the first website with a fluid and responsive layout that I’ve made. Meaning that the site will adept itself to the platform it’s being viewed on. This has been achieved with CSS3 media queries and by using percentages instead of pixels for element widths.

I would like to wish everyone happy holidays and a happy new year. It might be the last time we can celebrate them! *dramatic music*

Rome

Vatican City

Budapest

Budapest | Sziget

The Sziget Festival

After a week of city sightseeing it was time for something completely different: music, dance and madness… The Sziget Festival, a seven-day music festival on an island in the Danube. With performances of Prince, 30 Seconds to Mars, Kaiser Chiefs, the Chemical Brothers, Pulp, Within Temptation and many more. I discovered new bands, met new people, ‘danced’ holding a branch above my head, survived the 1.5 hour long moshpit at the Prodigy and ate chicken testicle stew. In short, a week that I won’t forget soon and that is likely to be repeated next year… in about 230 days from now.

I didn’t take many (usable) photos, so instead some interesting material from others: Sziget 2011 Unofficial Video Documentary, Obuda Island – Sziget Festival 2011 and Sziget Festival timelapse: 20. Sziget, 6-13 August 2012.

My main form of transport was by train (I traveled with an InterRail Pass) and that meant sitting in a train for a while… I arrived in Rome 24 hours after leaving Utrecht CS, without any sleep – never take a normal seat in a night train! It couldn’t however stop me playing the tourist shortly after arrival. My visit to the City of the Seven Hills lasted a total of three days. The photos below are only a small portion of the 357 I took during this short stay.

Before CSS3 shadows could be added through a number of ways: most notable via images or with the use of Javascript. It will do the trick, but when we would look at performance it’s not desirable: you’ll have to load more images/Javascript files. This means more HTTP request and an increase in page loading speed. But now with CSS3 we can simply add a line (in the ideal situation) of code to achieve the same effect. However, in this early state of its implementation it must be said that in some situations box-shadow won’t work the way you would like it to. In some cases you may still end up using images.

Implementation

Just like with gradients and transitions we’ll have to use vendor prefixes for Firefox, Safari and Chrome. Other browsers use the standard box-shadow property. The box-shadow property can have four values: horizontal offset, vertical offset, blur and color. Below is the code I used on my website for the main container: by giving the offsets a value of 0px and blur 20px the shadow will become visible on all four sides of the container.

-moz-box-shadow: 0 0 20px #000; // Firefox
-webkit-box-shadow: 0 0 20px #000; // Safari en Chrome
box-shadow: 0 0 20px #000;

 
Voilá! This concludes the two-part ‘tutorial’ on how to make images obsolete by using CSS3. In this case I only used box-shadow and gradients, but there are more examples in which CSS techniques could be used. A common feature of websites are buttons, which in most cases are styled with rounded corners nowadays. Again we can use images or Javascript, but we can also implement it with CSS3. Combining the two techniques and border-radius could result in image free buttons [examples]. Which are more flexible than using images and are better performance wise.

This will be the last post in the ‘Making of Works of Time’ series for now. But you might be seeing future posts, when I’ve implemented some features that are still on my to-do list: HTML5 manifest and CSS media queries.
 

Further Reading

• Box-shadow, one of CSS3′s best new features on CSS3.info
• Box Shadow generator on Westciv.com

The issue with CSS gradients is that all browsers use another form of implementation. Therefore we’ll need to apply vendor prefixes at this moment, just like with CSS3 transitions. Furthermore, Internet Explorer uses the filter technique instead to achieve the gradient in IE6-9. To make the gradient work in IE6-9, Firefox, Chrome and Safari you’ll already three lines of code.

This is almost impossible to memorize and therefore I use and advice the following generator: Ultimate CSS Gradient Generator from ColorZilla. It not only outputs the gradient for almost all browsers, but also has a Photoshop-like editor to create the gradient itself. It also adds a fall back for older browsers (background-color) and integrates the official W3C implementation: the gradient will still work once all vendor prefixes have been made unnecessary and removed.
 

Implementation

There are three different gradients used on the new website: the header, sub- and main navigation and the footer. I say different, but they only differ from each other in the colors that are used. Below is the code used for the header:

/* Old browsers */
background: #eeeeee;

/* FF 3.6+ */
background: -moz-linear-gradient(top, #eeeeee 0%, #dddddd 100%);

/* Chrome, Safari 4+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee),
color-stop(100%,#dddddd));

/* Chrome 10+, Safari 5.1+ */
background: -webkit-linear-gradient(top, #eeeeee 0%,#dddddd 100%);

/* Opera 11.10+ - the best browser there is! */
background: -o-linear-gradient(top, #eeeeee 0%,#dddddd 100%);

/* IE10+ */
background: -ms-linear-gradient(top, #eeeeee 0%,#dddddd 100%);

/* W3C */
background: linear-gradient(top, #eeeeee 0%,#dddddd 100%);

/* IE6-9 */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee',
endColorstr='#dddddd', GradientType=0 );

 
It’s a lot of code for such a small thing, but the advantage is that you can get rid of some of your images (in my case only one). This means less HTTP requests and an increase in performance/page speed. Every millisecond counts: “Tests at Amazon revealed that every 100 ms increase in load time of Amazon.com decreased sales by 1%.” [source]

Further Reading

• Cross-Browser CSS Gradient on Web Designer Wall
• Speed Up with CSS3 Gradients by Chris Coyier