I would like you to join me on my journey to discover the possibilities and restriction of responsive web design. In this first small tutorial we’ll see the basics of media queries. The aim of this tutorial isn’t to create a nice layout for the images, but to let you use some media queries for the first time.
First of all, let me explain the concept of responsive web design. More and more people now a days buy a smartphone and use that phone to access the internet. In the past, web developers had to create two css files, one for desktop and one for the mobile website. So this meant the customer had to pay more because the developer had more work. But all the extra work now lays in the past. Thanks to ‘media queries’ we can now create a layout for a website which will adapt to the size of the used device.
Before you can develop a website for smartphones and tablets, you need to know the screen size of the devices. For tihs example I’ll give you the screen size for the apple devices:
° iPhone 4
For this tutorial you’ll need 3 images, this way you’ll notice when you switch screens. I used images of flags, but it doesn’t matter which images you use as long as there’s a size difference. Lets start by getting those images on your page. Give each image a div with an id and add the image tag between it. When you test it you’ll see that each image is beneath the previous image.
Now lets start with the css file. You want to show off the biggest picture first, followed by the middle and smallest. You can do so by showing the biggest and hiding the other two picture, but not by using visibility hidden. We can achieve this by using an absolute position. Also give the biggest picture a top and left of 20px and a max-width of 100%. The other images have a top and left of
-9999px and also a max-width of 100%. When you now open the page in a browser you’ll only see the first image.
So now your ‘website’ can be viewed on someone’s desktop. The next step in the process is to convert the images so someone can see them on a tablet (in this example it will be a iPad). To do so, we need a media query. A media query consists of a media type and zero or more expressions that check for the conditions of particular media features. In our example we’ll be using the media type ‘screen’.
The media query you’re about to write has to be addressed when the screen is smaller, for example an iPad. In this case the second image has to replace the first one. The screen size of an iPad is in landscape 1024×768 and in portrait 768×1024. For the media query we’ll be using the media feature width. So we’ll set the min-device width to 768px (width of iPad in portrait) and the max-device-width to 1024px (width of iPad in landscape). To switch between the two images you repeat the css from the first part, but change the first div id from img1 to img2 and do the same for the images you don’t want to see.
If you now test your webpage, you’ll first see the first image (in my example the Belgian flag), when you reduce your browser you’ll see that once you pass the 1024px the second image will appear (in my example the American flag). This is because we used the max-width 1024px, which means the pictures will changes once the width has passed 1024px.
Congrats, you’ve just written your first media query. Now we can repeat it so the page can also be seen on an iPhone. The iPhone is in portrait 320×480 and in landscape 480×320. This means that the min-device-width will be 320px and the max-device-width 480px.
One more important tip: If you’d like to test this on an actual iPhone or iPad don’t forget to set the viewport by inserting this next piece of code between your head tags or it probably won’t work as it should.
<meta name=”viewport” content=”width=device-width; initial-scale=1.0″ />