Creating a responsive website

15 Jul 2013

Some weeks ago i wrote in twitter that there are no excuses, in this day and age, to have a non responsive website. The web is changing, people are browsing more and more from mobile devices and screen sizes have extreme differences. Me for example, i'm sporting a 23 inch monitor at home, two 20 inch monitors at work and a 4.3'' mobile phone. With all that diversity, a non responsive site makes no sense. So now my site is responsive.

In order to succeed that i used more CSS3 than before and utilized the media queries that CSS3 is offering. If you haven't checked them out be sure to do so here. Also i narrowed down the use of images (to do the borders, shadows, gradients etc) with CSS3 again and as the result the site is even more light weighted. In terms of overall design there aren't too many differences, just a few extra bits and pieces here and there. Finally the core of the website is based on HTML5 boilerplate that can kickstart your project perfectly. You should check it out too.

The biggest work though wasn't the front-end, was the back-end. I stopped using Drupal 7 for two reasons. First, when i started the redesign there was no starting theme with HTML5 boilerplate and i wanted to use it, also building my own theme from zero to hero wasn't making too much sense to me, so i decided to move away from Drupal. The second reason is within the nature of a developer, i wanted to learn more on a PHP framework so i decided to use CodeIgniter, that many people use. After completing the redesigned back end i realized the many benefits i got from using it. For one, the site is light-weighted, two, i only have the bare essentials that i need and use and no extra stuff (that a CMS comes with). Finally it's the thrill of creation and enjoyment, i started from scratch and now i have a website.

During the process i learned tons of things about CSS3, that i love, and i highly recommend to start your own project. You'll just need a starting theme (HTML5 Boilerplate or pure BootStrap will do), some JavaScript knowledge, a PHP framework (I used CodeIgniter) and several afternoons.