Posted in CSS, CSS3, Featured, HTML 5, Mobile Content, Mobile Design

Like this post? Share It :
  • Print
  • email
  • PDF
  • Google Bookmarks
  • Facebook
  • Twitter
  • MySpace
  • Yahoo! Buzz
  • del.icio.us
  • Digg
  • LinkedIn
  • StumbleUpon
  • Tumblr
  • Reddit
  • Technorati
  • Design Float
  • RSS

Use CSS3 Media Queries To Create Mobile Version of Website

The good thing about CSS3 is that it brings about various promises and solves many problems. But it also has a bad side to that it does not support Internet Explorer 8. Web developers and designers have a good reason to get motivated by this and at the same time get annoyed. The article below will show a method which makes use of a portion of CSS3 not supported by Internet Explorer 8.  These things do not matter much as the modules have one of the most functional places that have support with small devices like Android and iPhone. We are now going to discuss certain CSS rules and its functions in crafting the iphone edition by taking the help of CSS3. Taking a look at an easy example will make it clearer for you. This article also explains how to create a stylesheet on small screen devices on your site and also adding stylesheets from small devices to other websites.

Queries on Media

The print stylesheet is made for websites and the page is usually printed. You can also create your desired stylesheets to bring it to work if you made a print stylesheet ever before. These purpose were made possible by CSS2 type of media. The various media types will allow you to select a certain type of media and you can go for handheld, print and many others. But what should be noticed is that these particular types of media were never supported by devices, with only the print media type in work and the others not often seen. A Media Query does the work in CSS3 and is extending it further. They give more importance to the competency of the device they work on rather than searching for the types. These can be used for checking different kind of things like the height and width of the device, height and width of the browser, the resolution, orientation of the phone whether it is in portrait or landscape mode.

For some conditions CSS can be written particularly if the browser is compatible with media queries. One can detect if the user has a smartphone of some kind and give them a certain outline for it. To make this example work, a web conference in UK had taken an initiative to open their website for the conference held in 2010 where the media queries was used in a big way. The site has been made in such a way so that it fits well in a small space and with the content again revised to make it easier to access. The design resembles the iPhone, but it is actually not so. In a similar way on Android phone it shows Opera Mini. TechStars is doing good work by making use of  media queries and marking the competency of the various devices which were almost thought of as impossible.

Media Queries for creating stylesheet for phones

We can start off with a very easy example. You can see the two column design below. Now if this is to be read on phone easily, the whole design can be made linear in a single column. The header area is also made small for easy accessibility of the readers so that they do not require passing through the header before entering a new account.

For using media queries one needs to have interchanging segment of CSS in a single stylesheet. For aiming small devices, one can try the subsequent syntax:

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

After this we have to add the alternating CSS in the wavy brackets for the smaller screens and the width devices. The cascade helps in overwriting the rules of the different styles as placed for desktop browsers before in CSS. The previous rule will be overwritten if this particular section comes at the end in your CSS. For this reason some things need to be added to make linear designs and a small header in graphic. They are 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; }
}

Another background image has been used in the code above and header height has also been reduced. The navigation and the content have been set and the width settings overwritten in the stylesheet before. The settings are done only for devices of small screen.

Using media queries to link a separate stylesheet

To make few changes you can add certain codes for the devices. This turns out to be a fine way of using media queries. But in case of a lot of changes or if too much overwriting is there in the stylesheet, and you want the styles totally changed both for small screen gadget and desktop browsers, you can link them in diverse stylesheets which will also help the CSS to remain separate.

For adding different stylesheet with your main one, you can make use of the cascade for writing the rules again. The following method can be followed:

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

Media Queries Testing

Now you can test the CSS yourself if you possess an Android gadget, iphone or any other gadgets that has browser supporting the media queries. To view the code you need to upload it in your desired place. Now if you are to test a device which you actually don’t own, you can take the help of a brilliant site named ProtoFluid. It gives you a form to put your URL and you can see the layout as in the browser of an iPad. iPhone or any other kind of gadget. It can be a local URL. The screenshots given is from the TechStars site we had earlier seen on ProtoFluid through iPhone. The window size can also be given if you possess a certain device which is to be given for testing. You will get to know the dimensions of the screen. For using ProtoFluid, the media query needs to be altered as done for incorporating max-device-width and the max-width. This shows the working of media query on a standard desktop browser but on a very small window.

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

When the updating of the code is done as shown above, you should refresh the page to drag the window in to view the format altered and hitting 480 pixels. When the width of the view port hits the entered value, the media queries start reacting. ProtoFluid is now ready for testing. You can take the help of various tools like FireBug to give a squeeze to your design. Now this is not possible on the iPhone. But you give it a try to bring the look of your format in various devices. Overall ProtoFluid is easy to use and makes testing easier. By removing the query part of the max-width before you are live you can keep your site away from switching formats if anyone is dragging the window narrower. This effect occurs for people not only with small browsers but with small gadgets also.

Fitting an existing site

The above case has been shown in a very easy way for demonstration of the method. This procedure can be used to fit a previous site with the edition of a small screen gadget. The alternate edition of the format make the CSS hold a big name in the market. For experimentation, I have taken my business to apply the procedure to my format.

The desktop format

My business website consists of a multi-column format. The homepage comprises of a permanent width 3 column layout and is a bit different from the others. This particular design is quite old and so it did not have media queries when made.

New stylesheet added

A number of modifications have to be made to make the format linear. For this reason I need to add a different stylesheet with the help of media queries for loading the stylesheet after the present stylesheet. It should be seen that the max-width is not more than 480 pixels.

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

For creating a new stylesheet, the default stylesheet is taken for the site and saved as small-device.css. This begins as a duplicate of my main stylesheet. After this certain rules are to be overwritten and the unwanted parts are removed.

Reducing the header

To make my small gadgets look attractive, first I will put the logo in appropriate place to see if it has fitted properly on screen. The logo makes the background image and for this reason, I have the option of loading logos in the same stylesheet. There is a short top area for the logo to be placed with a different background body of the image.

{
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;
}

Linear Format

The next thing to do is to make the format linear and show it in one column. The desktop format is made with the help of floats.  I just need to search for the rules which make the columns float, set these to width: auto and. float: none. This makes the columns drop one after the other.

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

Organizing

After reaching this stage one can just look at the format in ProtoFluid and add a twist to insert some padding and margins to the places that are loaded up and not in columns. Using Firebug for ProtoFluid makes the work easy because the way I do my work usually means playing with Firebug until I am satisfied with the result. At last the CSS is copied in the stylesheet.

Experimenting with iPhone

After I had finished with my stylesheet and was ready for uploading it, I wanted to test it in an actual gadget. First I checked with the iPhone to see that the site showed zoomed out and not zooming in. The Safari developer site gave me the solution. It said to insert Meta tag on the top of the website to fix the view port width with the device.

<meta name=”viewport” content=”width=device-width” />

When the Meta Tag is added the website will show zoomed in one the single column. The fit was easy to display and it also means that you can add the mobile edition of your own website easily. For example if I was constructing a site from the beginning I would prefer   media queries to make the process simpler. If you consider the orders of linear column you can utilize the images given at the background wherever it is possible. These can be buttoned with CSS or with liquid images. The desktop format had case studies on the homepage which was not easy to relate with a touch screen mechanism. This made me check with JavaScript whether the browser was tapered and it began the carousel. To stop the loading of carousel was a good solution for small gadgets. A little more time would make me write the carousel with a different way for mobile users especially for touch screens

Supporting Media Queries in old browsers

The above article explains how media queries are important for devices that have local hold. Only if you need iPhone support and used to mobile browsers like Opera Mini, you need not worry about browsers which are non-supportive. For using media queries in browsers, you should know there are various methods using JavaScript to give help to the browsers like Internet Explorer 8 and Firefox preceding 3.5. Internet Explorer 9.

You can begin using CSS3 when using Media Queries. Browsers supporting media queries support other CSS3 properties also to give the polished effect when displayed on iPhone or other mobiles.

CSS3 Media Queries Examples

Stephen Caver

Sparkbox

mobile-site

Food Sense

The Boston Globe

Think Vitamin

Sasquatch! Music Festival

Internet Images

Staffanstorp

Seminal Responsive Web Design Example

Naomi Atkinson

Forefathers Group

Spigot Design

New Adventures In Web Design Conference 2012

Queness

Like this post? Share It :
  • Print
  • email
  • PDF
  • Google Bookmarks
  • Facebook
  • Twitter
  • MySpace
  • Yahoo! Buzz
  • del.icio.us
  • Digg
  • LinkedIn
  • StumbleUpon
  • Tumblr
  • Reddit
  • Technorati
  • Design Float
  • RSS

Related posts:

  1. 10+ Free HTML5-CSS3 Website Templates
  2. 30 Must Read Infographics on Social Media
  3. Not Your Parent’s Mobile Phone: UX Design Guidelines For Smartphones
  4. BoonEx Mobile Apps for iOS and Android
  5. 5 Minute Website Upgrades: How To & Resources

Comments are closed.