Last month I have spent some time to redesign my Blogger template which is used for the Messages from mrhaki blog. The old template was almost two years old and was not good to read on mobile devices. I wanted to make the site more clean and with more focus on the content and the content must be easy to read on mobile devices. I think the use of mobile devices to read the website will increase in the coming months and years.
To support different viewport sizes for widescreen computers, laptops and mobile devices I choose Less Framework 3. The Less Framework 3 is a CSS grid system using inline media queries. We create a default layout which can be used by any web browser. Then we can define three additional layouts using inline media queries. If the web browser support these then the layout is used, otherwise the default layout is used.
The default layout supports 8 columns, bigger screens support 13 columns, landscape iPhones, narrow browsers support 5 columns. And finally a 3 column layout is available for mobile devices like iPhone. We can use CSS rules for the non-default layouts to rearrange elements or even hide or display elements with display:block or display:none.
This way of working is easy and the grid layout makes the content align correctly without any worries. I will use Less Framework 3 for more sites and make the browsing experience for mobile devices more pleasurable.
