Making It on the Mobile Web

  • HTML5
  • CSS3
  • mobile
  • tablet
  • desktop
  • media-query
  • fluid
  • layout

Yet noticed that this site works on both Android and iOS devices? How was this all achieved? Well, first-of-all you should know about HTML 5 Boilerplate a great basis for any website. There's also Mobile Boilerplate that I used as well, combining things from both that I thought were important. The two HTML templates get you pretty far in supporting various screen sizes and they're also well documented.

From the JavaScript side both boilerplates utilize Modernizr which is an awesome library for feature detection and also includes YepNope. Them combined with ClassIE make loading of JavaScript libraries very efficient, you'll have full control of the sequence when they're to be loaded.

The boilerplates have a slight dependency on jQuery which I wanted to ditch and move to a more light-weight Xui. Xui has separate IE and non-IE versions, loading the correct one with YepNope and ClassIE was super-easy.

I still want to mention Mobile Boilerplate's helper.js. A library which contains various fixes for mobile devices. Setting them up is easy, first detecting if we're on a touch device and then applying the fix by calling the function. With the helper.js you can easily remove the address bar from iOS and Android browsers, giving a bit more space for your relevant content.

One thing is still to be mentioned, the CSS. CSS is probably the biggest factor in the whole mobile first and responsive web design approaches. In the boilerplates the base CSS is done so that it looks fine on a small screen, then using CSS media-queries to make changes to the layout when the browser resolution increases. I defined limits on certain absolute resolution width points to make it look different on tablet and desktop displays.

A bit more difficult part in the whole responsiveness are the HTML elements that need to be responsive, like the img tag for example. For a larger display you may want to load a larger image. There's really no solution that is both able to run without JavaScript and doesn't do unnecessary requests. I decided to use Molt for its small size, dependency freeness and nice syntax. So using just regular img tags, I define a data-url attribute that maps the window width to file names. The only compromise is using a different attribute on the img tag, which is in my opinion better than the alternative solutions.

Allright, that's about it. You can see the full source of this website on GitHub.