Zenhack.net

Mobile-Friendly Site Design Made Easy

28 Nov 2013

This won’t work for every site, but for a large number of sites like this one, where the focus is on actual documents (e.g. blog posts, wiki articles…) I have an easy way to make your website work beautifully on mobile devices. Ready for it?

  1. Add <meta name="viewport" content="width=device-width" /> to your <head> element. This gets around a quirk with mobile browsers, full explanation here.
  2. Delete all of your css.
  3. Realize that the whole point of HTML was device independence, and if we’re having difficulty making something work both on a 13 inch screen and a 4 inch screen, something is deeply wrong.

I earnestly believe that for most document-oriented websites, css usually makes things worse.

That is all.