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.
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.
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.