02 July 2015

How to make your old site responsive, beginner guide

Written by Valentín García, Posted in How-to's,

How to make your old site responsive, beginner guide

Responsive design arrived time ago, web designers consider it a basic requirement for any site. However many projects still are made for big screens only.

If you have a website in that last category even if is not Joomla, this tutorial will provide you a general approach about what's needed.

Before to start. If your site is build with just tables, forget about trying this tutorial. You have bigger problems. Remove tables and use divs at least, then come back here :)

 

Everything is about CSS

First, you need to know about CSS. For my example we have this website:

joomla responsive design

The green area represent the main container (inside we have the menu, text, images, video embeds, etcetera). This block uses the id selector #mycontainer and has a width of 960px.

#mycontainer {   
    width: 960px;
}

Now, that's the size by visiting the page from any device such as desktop computer, tablet and mobile.

We need to make it smaller to addapt to the smaller screens.

 

CSS Media queries for responsive design

Responsive design is possible thanks to this CSS feature. Media queries allow us to modify the width values based on the screensize.

For screens with maximum 480 pixel-width, we can make the container width smaller with the following code:

@media (max-width: 480px) {
    #mycontainer {   
           width: 400px;
    }
}

The above snippet set a width of 400px to #mycontainer when the user's device is an smartphone.

Note: be aware there are many screen widths for smartphones. Some smaller than others, plus the orientation: portrait or landscape.

 

Play with the width values

Repeat the previous process for all the screensizes you want to support by defining a max-width value in every media query from higher to lower.

@media (max-width: 768px) {
    // your CSS properties goes here
}

@media (max-width: 600px) {
    // your CSS properties goes here
}

@media (max-width: 480px) {
    // your CSS properties goes here
}

In short words, the width value loaded last has higher priority.

 

Test the end result

For every new update test the result to confirm is working as you expected. You can simply resize the browser to see the responsive in action or use a free tool like Responsinator to emulate popular device's sizes at once.

 

Conclusion

Testing is highly important, even if the test show a positive result don't forget to try in real devices to double check the responsive support is accurated.

 

About the Author

Valentín García

Valentín García

Web developer and designer that love building sites with Joomla. Currently working at OSTraining as Director of Design.