What is Responsive Web ?

A responsive website is a web site that adjusts the layout to fit the size of the screen. It will work on your desktop, tablet or phone. A lot of people use responsive design because it looks good no matter what device you are viewing the website on.

To make a website responsive, you have to use CSS Media Queries. These are rules that define how the website should look on different screens. For example, if you want to add a sidebar on a tablet or phone, you can do it by adding a media query for smaller screens. When the screen gets smaller then the sidebar will move from its usual location next to your content to inside of it. This article is going over some simple things I’ve done with CSS Media Queries and jQuery Mobile. You can check out my code on Github .

I got an old site about home automation and retrofitting windows in Berlin , Germany . It has all kinds of information about insulation film, window frames and acoustic paints . The original developer did not plan the site for mobile devices, so I decided to change it up a little.

Here’s how it looks on an iPhone:

The banner is too wide, and the sidebar interrupts the content. There isn’t much room to show off my projects either. Let’s fix that by adding a sidebar and making it visible only on smaller screens:

/* Mobile Sidebar */ .mobile-sidebar { display : none ; } @media ( max-width : 768px ) { .mobile-sidebar { display : block ; } #banner { margin : 0 auto 10px auto ; width : 100% ; } #main { float : none ; width : 260px ; overflow-x : hidden ; padding-left : 10px ; } .project { height : auto ; width : 160px ; margin-right : 10% ; } #projects { margin-top : 20px ; } #button-bar { margin-left : 220px ; } #footer { clear : none !important ; } #footer div , #footer address , #about ,#contact { float : left !important ; display : block !important } /* sidebar */ aside ul li a , section ul li a , footer span [ rel = “nofollow” ] a { color : white !important ; font-family : ‘Helvetica’ , Arial, sans-serif !important } aside ul li a strong { color: white; } }

I set the width of #main to 260px , which is just wide enough for three projects. I also hid the overflow on #main because it’s not needed anymore. On the project page, I made sure that height and width are at least 100px . I used margins instead of fixed positions for everything else. Now, thanks to CSS Media Queries, everything will be adjusted to make room for the sidebar when it gets displayed on smaller screens.

So far so good, let’s take a look at what happens when you open my site on an Android tablet.

The banner is still too wide, but otherwise the layout works pretty well now! Instead of using floats or fixed positions everywhere, I can use percentages. This is better because the page will adjust when I change the font or text size.

You can view the rest of the code on Github . If you did some CSS Media Queries before, let me know in the comments!

If you’re interested in learning more about responsive design, check out my other post  about how to work with objects in CSS. It might come in useful if you want to make a website that works well on all screens. You can also see how I made my site responsive  by looking at my code on Github .

Leave a Reply

Your email address will not be published. Required fields are marked *