CSS3 Media Queries For Mobile Version of Website

Mobiles

CSS3 is a very important part of web designing which plays a great role in the whole designing process. Actually this CSS3 part is very exciting for designers, as well as it create a frustrating feature that it is not supported by Internet Explorer 8. But every designer knows that without CSS3 it is impossible to make a modern website. Here we will discuss all about using CSS3 media queries to create mobile version of a website. This is an effective tutorial for both beginners and professionals attached to web designing.

At first we should have a clear idea about the topic media queries. Actually if you have used CSS2 previously then you will know about Media Type. Media types let you specify a type of media to target so that you can target print, handheld and others. But this was a great failure in CSS2 as it never gained support from various devices. Here in CSS3 this part is developed and named as Media Query. This media query rather than looking at the type of device they look at the capability of a particular device like the width and height of the browser, width and height of the device, orientation and resolution as well. So for example if a device has a browser which supports CSS3 then it will automatically detect all the features and will display the website according to it.

css for mobile

You can see the example given above which shows how a full fledged website looks in a PC and how it looks in a small portable device like iPhone or an android device.

Using Media Queries to create a Stylesheet for Phones:

So here we are going to start with the tutorial but before that you should have a look into the example website below. Here the example is a two column layout.

To make the process easier we have decided to linearize the entire design and make it one column. And make the header are amore small so that the user need to scroll less before reading the article. At first we should media queries to have the alternate section of CSS right inside the single style sheet. So when we will be targeting small devices we should use this following syntax.

 

@media only screen and (max-device-width: 480px) {

}

So now we can add alternate CSS inside the braces. So to linearize the website and using smaller header graphics we can add the following.

@media only screen and (max-device-width: 480px)

{

div#wrapper{width: 400px;}

div#header{ background-image:url(media-queries-phone.jpg);  height: 93px;  position: relative; }

div#header h1{ font-size: 140%;  }

#content{ float: none;   width: 100%;  }

#navigation{  float:none;  width: auto; }

}

Here in the above code we are using alternate background image and reducing the height of the header, then setting the content and navigation to float none and overwriting the width set earlier in the stylesheet. Now after doing this the design will look like this.

Linking a Special Stylesheet using Media Queries:

Keep in mind that adding a specific code for devices is the best way to use media queries if you want just a few changes in your website. But if there are several changes and overwriting, as if you want to change the whole look of the desktop look and a small device look of a particular site then linking in a separate style sheet will enable you to keep the CSS separate. So to add separate style sheets under a main style sheet use the following code.

<linkrel=”stylesheet”type=”text/css”media=”only screen and (max-device-width: 480px)”href=”small-device.css”/>

Testing Media Queries:

You can check the result if you own an iPhone or any small android device but remember that your browser should support media queries. However you will need to upload the codes to view it anywhere. There is an excellent website ‘ProtoFluid’ which helps you during the development process. Here you can view the result as it looks in a small device by just entering the URL. So if you don’t own an iPhone or an android device you can go with this website to check your result.

You can also enter you own specific window size if you know the screen dimension of your device. But to use ProtoFluid you need to modify the media query slightly to include max width and max device width. This means that the media query also works in desktop if the user is viewing it in a tiny window.

@media only screen and (max-width: 480px), only screen and (max-device-width: 480px){         }

So after updating the code to the above, just refresh the page in the browser. After that drag the window in and you will notice the change when it reaches 480 pixels. You are now fully ready to test your website in ProtoFluid.

Retrofitting an existing Website:

The example chosen for the tutorial is extremely simple for your ease but here we will show retrofitting an existing website into a small screen device version. As an example we took a website to change it into a mobile version.

Desktop Layout:

This website we took as an example has a multi column layout. Actually this site has 3 column layouts. This is a very old design so it’s better not to consider the media queries while building.

Adding New Style Sheet:

While linearizing this layout we are going to make number of changes. So we are adding separate style sheets using media queries to after the current style sheet.

<linkrel=”stylesheet”type=”text/css”media=”only screen and (max-width: 480px), only screen and (max-device-width: 480px)”href=”/assets/css/small-device.css”/>

To create a new style sheet we take a default style sheet for the site and save it as small-device.css. What we are going to do is go through and over write certain rules and delete anything we don’t need.

Shrinking the Header:

The first we should keep in mind here is that the logo fit nicely on screen for small device. As the logo is a background image here we can load a different logo in the style sheet.

body{  background-image:url(/img/small-bg.png);   }

#wrapper{ width: auto;  margin: auto;  text-align: left;    background-image:url(/img/small-logo.png);   background-position: left 5px;  background-repeat: no-repeat;   min-height: 400px;   }

 

Linearizing the Layout:

Our next work is to linearize the layout and convert it into one column. The desktop layout is created using floats so we have to find the rules using float the columns and set them to float: none and width: auto. This drops all the columns one after another.

.article #aside{ float: none;   width: auto;   }

Tidying Up:

Now everything here is a just looking at the ProtoFluid. Using Firebug in ProtoFluid makes your job much easier till you don’t become happy with the design. After being final now you copy the CSS into your Style sheet.

Testing in an iPhone:

After finally creating your Style Sheet try to check your work in the targeted device such as iPhone or any other android Device. Here you can add a Meta tag if needed after viewing. Adjust the width of the viewport in the metatag.

<metaname=”viewport”content=”width=device-width”/>

So you are completed with the whole process and now try yourself with the whole process with a different complex website. May be at first you will face some obstacles but in web designing trial and error works the best and you can learn various things from that. So start working to get a better result.