When the web started to find its way to mobile phones in the late 90’s, many websites couldn’t be displayed on these devices. The reasons for this were many. One was that the mobile phones did not have fully-featured Web browsers. Another was the speed of the network wasn’t good enough. The solution for this was to develop mini versions of the websites. These lacked a lot of the original functionality and they were in many cases just text versions of the “real” websites.
When Apple introduced the iPhone and iOs in 2007 with its fully featured browser, websites could finally be displayed properly on a mobile device. Shortly after, the use of mobile browsing exploded.
IOS together with Android and BlackBerry OS currently dominate as operating systems on the mobile market. For all of these there are many fully featured browsers available that display the websites the same way a browser on a desktop does. Does that mean that there isn’t need of mini versions of the websites anymore? Not really.
Even though the displays on our mobile devices are larger than in the 90’s they are still much smaller than computer displays. This means for example a wide website, that looks good on a large display, requires a lot of scrolling and zooming on a mobile phone which makes it hard to use. Also, the mobile network is much faster than 10 years ago but still not fast enough. A website containing large images or “heavy” animations therefore loads slowly on a mobile phone.
Media queries
Earlier, because of limitations, different versions often had to be developed using different techniques and languages. This was of course time consuming and costly. Luckily, making a mini version of a website today doesn’t have to be questions about two different developments. One technique used for this is media queries.
Media queries was introduced in CSS2 and are supported in all the latest versions of major web browsers (both mobile and desktop). With media queries you can use different styles depending on the size and/or resolution of the display the websites are being shown on. You can even check if the display is oriented horizontally or vertically and change the styling accordingly.
How to use
Media queries should be placed in the header of an html document just under the regular style sheet links so the style sheets used by the media queries can override the regular ones.
A typical media query could look like this:
<link rel=”stylesheet” media=”screen and (max-device-width: 480px)” href=”smartphone.css” />
This query contains two parts, a media type (screen, 3d-glasses, print etc.) and a query with a media feature (max-device-width, orientation, device-height, device-aspect-ratio etc.) followed by a target value (480px).
If, in this case, both the media type and feature is true the smartphone.css file will be used. With this style sheet we can now override styles so the website looks and fits better on a smart phone. We could for example change the width of the page, move a menu from a sidebar to the top or hide large banners. With a couple of quick changes we can now make our site look great on any screen size. No extra development needed.
Examples
Here are two examples of media queries in use.
Try to resize this example page by slowly dragging the bottom right corner on your browser window. You can then see how the images regroup and resizes and finally also how the menu in the sidebars moves to the top.
Try the same resizing method on the Think Vitamin page and you will notice similar changes taking place.
To read more web development articles click here.
