Designing for the Future, Responsive Web Design

Last weekend I did some modifications to this website, if you are reading this from a mobile phone you’ll notice that this website is now using responsive web design to some extend. The original site would never adapt to mobile devices and was a bit hard to read when read using mobile phones such as an iPhone.

In order to achieve responsive web design implementation, I had to do a lot of research and changed my way of thinking a little. Firstly, there is the “retina” high pixel density devices. Then I needed to think of the layout shuffle. Lastly there are those legacy browsers such as IE8 that doesn’t support modern styles and tags. I didn’t even look at IE7 below as its not worth the time fixing for it.

So, I think the trick is to think of the design starting from the smallest screen. This is because it’s easier to design for larger screen than smaller screen. Basically with smaller screen we need to think about how to represent the full information to your visitors without taking away the user experience.

The @media CSS Tag

The @media tag is the heart of responsive web design. This is where most of the screen adjustments happens. Let’s look at the example below:

The code snippets above basically tells the browser to set the header logo font to 2.0em if the screen minimum width is 240px. However, if the minimum screen size of the device hits 768px then we tell the browser to set logo font to 2.5. This means that as the screen gets wider, the header size adjusts.

Another example in the above code snippets is the section tag. By default, a section will fill the entire screen if the device’s minimum size is 240px. However, if the device’s minimum size is 768px and above, switch to regular design with 65% width and float it to left. Because at this stage I want the website to display the right side bar.

Now, we all know that we have the “retina” devices, basically mobile devices with high pixel density surpassing many computer screens even. In order to keep the 240px min-width honoured by these high resolution devices, especially the iPhone I had to add the following to the meta tag.

The very last thing that I had to do is create proper iOS icons.

Simple Bits of JavaScript

As you probably have known from my other articles, I like JavaScript. So in order to make sure the user can still bring up the search box and see categories in mobile mode, I made parts of the right side elements to show up when the discover button is pressed (or touched). So there are so many little things that you can do with JavaScript in order to enhance the user’s experience.

I’m planning to enhance this website further too when I have some more time to spend on the design. I prioritise on the content most of the time :)

Supporting Legacy Browsers

Sadly, some older browsers does not support the @media tag. This includes IE8. On IE8, since it doesn’t recognise the @media tag, the browser by default uses the smallest screen size rules. So during testing I ended up with 22inch mobile version of codingepiphany.com. Not pretty at all.

Thankfully there’s respond.js to the rescue!

This is a small polyfill script for @media css tag. It’s very easy to use this brilliant script. Basically I just needed to include it after the css include tag. I can see the mobile version for a bit until this script loads and then the site looks great on IE8.

As for IE7, I’m not supporting it at all, I think the amount of time invested to make the website work on IE7 wouldn’t worth it.

Testing

In order to make sure my CSS works on majority of devices I had to test this website with emulated devices. I have an iPhone and Blackberry but that was it. So I use the iOS emulator shipped with XCode to test the site. On top of that there’s the handy website called http://screenqueri.es/ which simulates different screen sizes quite well. Lastly, I sent the site to my friends to test on their varieties of mobile devices, thanks all :D.

Go Ahead and Try

So there, very simple ways to get any website mobile ready. You can try this anytime, it only took me 2-3 hours at most to test on different browsers and mobile devices.

Categorised in: Javascript, Software Development, Web Design