Flat design + Less framework + WordPress = Our new responsive Blog design

After few years we had decided to give a new look and feel. As you are aware 2013 was a year of Responsive Web Design and we are no exception to this. So, RWD was in priority for the blog design. Why not applying new trends in our own blog ?  So, we added Flat design too.

Tablet browser view

Flat design:

Design trends change over the years. Now, people like to get rid of curved edges, gradients, reflections or shadow effects. Sharp edges become a favorite, along with minimalism.

If you like to start, you must first get inspired by some designs, take them as inspirations and practice yourself. You can see a lot of Flat UI designs at Flat Design. Also, I recommend Flat UI Colors to choose your colors and for more inspirations take a look at Dribbble’s Flat collections.

Less framework:

We have written couple of blogs on Responsive Web Design months ago when it was catching, one was about the CSS frameworks that we liked and used. But, recently with few projects we got an opportunity to explore Less framework. It’s quite impressive

The layout will be made to 992pixels and add CSS media queries within the child layouts. Child layouts will be 768pixels, 480 pixels, and 320 pixels to make it ready for different browsers.

If the browser isn’t supporting CSS media queries such as Internet Ex­plorer 6–8 and most old mobile devices, the default layout will be served and for other browsers which support media queries, child layouts will be served based on the screen resolutions.

Less Framework is MIT licensed, so we can even modify it. However, the learning curve is little steep, a designer who is strong in HTML5 and CSS3 will require at least a weeks’ time to learn and master it.

Mobile browser view

WordPress:

Finally, we decided to retain our blog with WordPress, through the new blogging platform Ghost looks promising. Maybe we should try that in for coming years.

We used WP Touch WordPress plugin for years. Thanks to this wonderful plugin by Bravenewcode.

In order to see our new RWD, we had to disable WP Touch.

Now the final design is ready for different browsers and Feel free to give our feedback on our new design.