Using CSS3 To Design Web Pages To Display Properly On Multiple Devices

The Problem

Web development has become a bit more complicated, now that more and more people access the Internet using their tablets, smartphones and other mobile devices. Gone are the simple days of fixed-width web page layouts, and the messy stop-gap innovation that resulted from this — using tables as layout devices. Liquid layouts soon provided the counter-culture to fixed-width and table-defined designs, but even these have their limitations, especially when rendering text on large-sized screens. More importantly, none of these approaches are ideal when you need to render web pages across different internet devices, each with its own screen size and orientation.

One approach used by many web developers is to create separate standard HTML and mobile sites (with mobile sites often delineated by the “m” subdomain in the URL, for example “m.url.com”, as opposed to “url.com”). But you can easily imagine how cumbersome this may become when you need to synchronize content or modify the site structure. Besides, with mobile Internet devices are becoming more capable, users are starting to veer away from viewing a stripped down, small-screen version of the website, preferring instead to view the entire website as it is.

The Solution

Fortunately, CSS3 offers an elegant way for us to implement “responsive design,” and deal with this requirement using the concept of Media Queries. Media queries are expressions you add to your CSS code that check for certain conditions and apply the appropriate stylesheet. In essence, they are like the old *if-then* and *case* statements that branch out to and execute the right code section depending on prevailing conditions. Using media queries, you can have one stylesheet for large-sized screens and a different one for the tiny displays of mobile devices, all without changing the content you serve to either one.

Applying the Solution

Your styelesheet code will remain essentially the same as what you normally prepare for your standard website. At the top of your CSS code you will probably want to create a default .wrapper rule that sets a standard display style regardless of what device is used to access the page. Remember, though, to set .wrapper as a percentage value, rather than a fixed width value.

Code Example:

.wrapper {
width: 90%;
margin: 0 auto 0 auto;
}

This is now where we can create the media queries. For this example, we need to target three display types: standard computer screens, iPad tablet displays and iPhone displays. Let’s say, for example, that you want the page to display a single column in your iPhone, 2 columns in your iPad and 3 columns on larger monitors. One approach is to set a stylesheet that will work for all devices, and hence not check the screen width (in pixels). Next, we will check if the screen width is 768 pixels (the width of an iPad screen). Finally we will check for displays greater than 990 pixels wide (for standard computer monitors).

The property to use is “min-width,” which checks the minimum width of the device display.

Code Example:

@media only screen and (min-width: 768px) {
/* Insert css for 768 pixel width devices here */
}
@media only screen and (min-width: 992px) {
/* Insert css for 992 pixel width devices here */}
And that’s all there is to it.