Innovative Web Design With Media Queries

By: Daniel Imbellino
Updated: Feb 28, 2013

The world is overrun with mobile devices today, from smart phones, to tablet PC’s, and even netbooks for that matter. Designing mobile ready webpage’s requires web content creators to change some of their habits. For one, it used to be the norm to simply measure out an elements position on the page using pixel values. Unfortunately not all devices have the same size pixels, and comparing a pixel on a laptop monitor to a pixel on an Iphone is two completely different things. digital circuit imagePixels as defined on mobile devices are much denser (smaller and more refined) than pixels on large desktop monitors, laptop screens, etc. Also, one CSS pixel doesn’t equate to one pixel on a mobile device. In fact, the overall size of a given pixel varies according to the device manufacturers specifications. There’s no point in trying to list them all here, that would be ridiculous, but we will explain how you can create a fluid, adaptive design for your pages that will cause your content to fill the given range of any mobile or non mobile device regardless of its resolution, screen size, pixel density, etc.

Rule number one, don’t use pixels when positioning your content, use percentages instead, and be sure to use CSS ID selectors when creating the styles for your webpage’s. Also consider either sticking with a normal page flow or using absolute positioning, as this places objects within an exact set of coordinates from the top left, or bottom right area of the screen inwards. Why not use pixels when positioning content? It’s simple, as we just stated, pixels come in many shapes and sizes depending on the device, and most screen resolution technology today is proprietary at best.

Here’s an example, take 2 laptops, one is an older Dell laptop from 2005 that has a 15.4in screen, while the other laptop is a brand new Gateway purchased in 2012, also having the same 15.4in size screen. So here’s the problem, both screens are the same exact size, but they have two completely different resolutions. The Dell has a native resolution of 1024x768, while the Gateway has a native resolution of 1366x768. Now consider what would happen if you positioned all your elements on the screen using fixed pixel values? If you positioned a banner for instance on the Dell at an absolute position of “left: 220px;”, and “top: 15px;”, the banner might appear perfectly on the dell, but when you load the same page in any given browser on the Gateway, the banner would not appear properly since the Gateway PC has a much higher resolution than the dell, and remember, you were measuring in pixels. The Dell has a width of 1024px, and the Gateway has a width of 1,366px, a huge difference in resolution between both screens, despite the fact that both screens are the same exact size! To put this simply, the same page would not render properly on much of any other device because the alternate devices do not share the same resolution! How do you resolve this problem?

Instead of using pixel values for measuring the position of elements you should use percentages. A percentage value in CSS actually maps out to a given percentage of a given devices screen width and height, regardless of its resolution, which is exactly what you want! Here’s why this works so well, what if we measured out the same page for both our Gateway and Dell laptops, but this time measuring our same banner element out in CSS using a value of, “left: 30%;”, and “top: 15%;” instead? Now what would happen? The browser, instead of measuring in pixels, would measure a percentage of the overall screen, thereby mapping out our banner element to fill that percentage of the screen regardless of the devices resolution. This means that the element would be positioned 30 percent from the left of the screen on any device that renders it, and likewise, 15% from the top of the screen on any given device.

You should also establish the actual dimensions of your elements within your CSS as well, whenever possible. If you set the height and width of elements using pixel values you will run into the same problems as when you are positioning elements. So, instead measure out using only percentage values if you can, to establish these height and width dimensions specifically like this, “height: 50%;” “width: 40%;”. Just keep in mind, with percentage values you are measuring out an overall area of either a devices physical screen size, or browser dimensions both vertically and horizontally.

Now your webpage’s will be able to adapt to whatever screen they appear on fluidly! We did this with PCTECHAUTHORTY’s banner in CSS, and the entire sites code for that matter. The banner renders quite large on a 27in LCD monitor, and also renders appropriately on smart phones, etc. If you had used pixel values instead, your job as a web designer would be a major headache.

Working With Media Queries:

Newer CSS3 specifications have allowed web designers to add “conditional statements”, in which the same elements on the page will render differently depending on either the physical screen size of a device, or the size of the viewable browser window as measured in pixels. Remember, percentages do map out to a given set of pixels, however, the browsers preprocessor does the work for you when measuring as a percentage of screen size and mapping these coordinates appropriately. 30% of a screen or browser width on one device will most likely not map out to the same amount of pixels on an alternate device, unless both screens have the exact same resolution and pixel density. Don't count on it! Pixels come in various shapes and sizes depending on the device at hand, this is the reason why.

Here’s how Media Queries work:

Let’s say you are designing a new site and you want your site to render on multiple devices, including smart phones, laptops, tablet PC’s, large desktop monitors, or even your 50in LCD TV that’s sitting in your living room, you can do this with Media Queries! With Media Queries you can create styles based on a given range of browser resolutions, or for a specific resolution (more ideal for smart phones and tablets), or by physical screen size. It’s best however to measure depending on a devices viewable browser window, and not its overall physical size! There’s one major caveat when doing this however, the viewable screen area is going to be less than the size of the actual physical screen, and in some cases you may need to use a defined set of resolution parameters as a given range of resolutions, rather than a predefined fixed resolution. Either way, most likely you will need to use both methods in order to accommodate all devices, mobile or not.

Let’s start with designing for laptop and desktop monitors first, then we will narrow down to mobile devices as well.

First let’s determine how to make a webpage render within the range of resolutions spanning 1024x768 on a netbook with a 9in screen, up to resolutions of 1900px+ on larger desktop monitor screens. How can we do this?

It’s best to start with a laptop, using its native resolution as a starting point. If your laptop monitor has a native resolution of 1366x768, you should start here, positioning your elements using percentages so they can adapt within a range of resolutions, and possibly using percentages to size some elements as well. We will now show you an example Media Query that measures the size of the viewable browser window covering a range of resolutions.

Here’s our example Media Query produced in CSS:

<style type=”text/css”>
@media and screen (min-width: 1025px) and (max-width: 1434px) {
(CSS declarations would go here. You should be using CSS ID’s that correspond to your DIV elements inside your HTML of the page) For example:
#banner {width: 985px; height: 115px; position: absolute; left: 30%; top: 5%; background-repeat: no-repeat; background-size: contain; }
}
</style>

The media query we just created would display any content it contains within any browser resolution between 1025px and 1,434px, effectively covering a large range of resolutions. You can test these ranges by changing the resolution on your PC (higher and lower) to make sure the elements you add to your pages render the same at all resolutions within that screen size. While the banner we created has a fixed width and height, the positioning of this element does not since we used percentages to force the elements position to adapt to the percentage of any size browsers resolution. Also, we used the “contain” value of the “background-position” property to force the “#banner” element to scale proportionately to the largest size possible depending on the size of the browsers viewing area as measured in pixels. While the direct functioning of the “contain” value appears to be misunderstood and indirect, this value works well for creating images that adapt in a fluid manner, scaling larger on larger screens, and smaller on smaller screens proportionately. All being said, “contain” actually seems to scale an image to a percentage value that is larger or smaller than its fixed pixel value depending on the size of the browser window itself. Let’s face it, most images have a fixed value set in pixels, and as long as we use the “contain” value when specifying their size, we’re all good!

Now our page, and its “#banner” element can adapt to any browser that sits within the range of resolutions we specified, and it can do this in an adaptive and fluid manner. Also, if you are using a background image for your pages, you can use the “background-size: cover;” value to specify that the image should fill the as much of the screen as possible.

Multiple Media Query Declarations:

Here we will show an example of using multiple Media Queries, each covering a range of possible resolution values so that our page can render for larger and smaller devices, such as a netbook, or a desktop monitor:

<style type=”text/css”>
@media screen and (min-width: 1601px) {
(CSS Declarations Go Here)
}
@media screen and (min-width: 1025px) and (max-width: 1434px) {
(CSS Declarations Go Here)
}
@media screen and (min-width: 980px) and (max-width: 1024px) {
(CSS Declarations Go Here)
}
</style>

The declarations we created would easily render our pages elements at the values we specified for each set, and would easily render on all laptop, netbooks, and desktop monitors appropriately, regardless of the screen size. Also, notice we haven’t yet specified and queries for our mobile devices, but theres something you should know here. Mobile devices have changed a lot over recent years, and they are a lot more intelligent than you would think. In the case of the code above, most all current mobile devices developed after Jan 1st of 2012 will upon coming across this our example code, simply take the last set of values contained in the last Media Query and scale this set of code within the devices browser windows as effectively as possible, without any user interaction whatsoever. Developers of mobile devices have been implementing new tactics when it comes to the ability to display a full webpage normally designed for a standard PC, making it possible to display these pages in their current devices. Newer mobile devices will simply take the lowest resolution stated above and truncate the content to fit the available viewport of the given device if no specific resolution or queries for that devices resolution is found. This is a real breakthrough when it comes to mobile devices, and their implementation of these practices has clearly been profound!

The technologies that device developers have implemented have worked so well, PCTECHAUTHORITY appears to function on all mobile devices, some even perfectly, despite the fact we have never designed the site as so. We are limited on funds as of yet due to the costs of launching this site, but we plan to optimize the site for all mobile devices in the near future, using the tactics we have described here. Our ability to achieve some success with mobile so far was due to the fact that our content has a fluid ability and all mobile devices have native support for Media Queries today, which we use religiously in our sites design.

Designing for Mobile Specifically:

Implementing the strategies we have already presented along with the mobile development strategies we will list here, it will be easy to see that you can develop an entire website that functions across all devices and platforms without the need for a sub domain at all! This does away with the duplicate content issues webmasters and web designers alike have been complaining to Google about for years. Your problem is solved!

We stated above that most mobile devices will simply truncate the last query, being the lowest resolution model of the ones we created, and attempt to render that code within the device itself. There’s something you should be aware of here. It’s not going to function the way you want it too! It will work, but now necessarily 100%. When it comes to mobile you can develop width and height values also spanning a magnitude of various resolution values.

Let’s take the iphone 4 and the Samsung Galaxy SII for example. The iphone has a native vertical resolution of 640x960, and the Galaxy has a vertical resolution of 480x800. This is where things become really confusing and problematic. This is just 2 types of smart phones, yet there are many others, and we need a way to develop functioning pages for all of them.

You could implement queries that match the device in questions exact physical dimensions, such as the iphone 4 for example:

@media screen and (device-width: 640px) and (device-height: 960px) {
}

The problem here is that this code would only work for devices that have this exact native resolution. Another way you could do this is to set a given range of physical screen dimensions for a page to display at, the same as we did above, but this time specifying our devices physical sizes rather than pointing to the browsers size as we did early: @media screen and (min-device-width: 480px) and (max-device-width: 640px) and (min-device-height: 800px) and (max-device-height: 960px) { }

This could work! You could create your content and test that content on both the Galaxy and the iphone, and as long as the pages render appropriately, your job is done! However, there’s something else we need to consider here. Most mobile devices, if not all of them today, allow users to view content vertically (in portrait mode), or horizontally (in landscape mode). As we stated above, Smart phones today are just that, smart! And, they will do the best they can to render the content regardless of the viewing angle. However, if you are designing your content while viewing the page vertically, it may not necessarily render the way you intended horizontally, and vice-versa. Fortunately, Media Queries do have support for designing content in both landscape and portrait modes.

Introducing the Landscape and Portrait Modes in Media Queries:

At this point it’s worth noting that your content should be able to render depending on the devices orientation (whether the device is facing vertically or horizontally), and not just taking into account its native resolution.

This time we’re going to take the query we created above and duplicate it, creating queries for both vertical and horizontal viewing areas:

@media screen and (min-device-width: 480px) and (max-device-width: 640px) and (min-device-height: 800px) and (max-device-height: 960px) and (orientation: landscape) {
}
@media screen and (min-device-width: 480px) and (max-device-width: 640px) and (min-device-height: 800px) and (max-device-height: 960px) and (orientation: portrait) {
}

Now you can design a separate set of queries in your CSS for the same set of device resolutions, while also taking into account the orientation of the device. Each set of queries would render depending on how the device was being viewed. The problem here is that not all browsers currently support mixing the “device” specific values with the “orientation” specific values. However, most new smart phones and tablet PC's will automatically handle the orientation controls for you, without requiring any additional coding or input from web designers themselves.

After reviewing what we shown here it’s probably easy to see that designing for mobile is a serious challenge, especially when you are designing your content to function on all devices regardless of their screen size or resolution. Notice that we only covered the physical dimensions of 2 smart phones, the Galaxy SII, and the iphone4. This is a serious challenge when there are many mobile devices that will need to display your content, not just the devices we specified. Also, this doesn’t even take into account tablet PC’s either. You would need to create more queries to address your content functionality on those devices as well. As well, Media Queries do not have 100% support in all major browsers, but their ability to be implemented has improved greatly over recent years. We ran into problems with Macbooks for instance. Certain MacBooks could not render the “device-width” device-“height” values appropriately across any of the browsers we tested, especially the ones from a few years ago, although the “device” specific measurements seemed to work fine in most any other standard laptop, net book or desktop PC.

If you plan on designing for mobile, do yourself a favor and stay far away from the old CSS practices of “float: left;”, “float: right;”, “margin: left;”, etc, if you are using absolute positioning. This isn’t 2001 anymore when all desktop monitors had a 4:3 aspect ratio, every laptop known to mankind had a 1024x768 resolution, etc. Instead, position your elements where you actually want them to appear on the page using percentages, and stay away from the “float: wherever;” nonsense! This is like saying, ok, move this element a little to the left and a littile to the right from this other element before it. Using float and margins is ideal when designing webpages with relative positioning since it ties objects together, something that absolute positioning doesn't do by default. If you use absolute positioning, you can place all your elements on the page in an exact and precise set of coordinates. This creates a neatly organized set of elements that do not rely on each other when being placed on your pages. If you used relative positioning to place an element, and then removed another element from which the first element positioned relatively too, this could break your design altogether. Another plus to absolute positioning, you can leave most all negative values out of your design. If you start positioning elements using relative positioning with values that are far in the negative, say -1,185px; this may appear as if you are attempting to hide text or other content from within the page, and search engines may penalize you for this. In some cases it may make sense to use a mix of both relative and absolute positioning when placing objects within your pages.

Unfortunately, browsers tend to "stack" elements one on top of the other when designing within a normal page flow, such as is the case with relative positioning. Sometimes you float an object, or set margins to position an element where you want it because of the nature in which browsers display elements on the screen using relative positioning. After all, CSS didn't get its name for nothing, "Cascading" style sheets. Meaning that elements when displayed in a normal page flow will "cascade" down the page, one element after the other, and this is exactly what CSS does by default. We can effectively add absolute positioning to the mix to overcome some of the natural positioning hurdles that web browers bring to the table. Both methods have their pors and cons. For one Absolute positioning requires more hands on refinements for alternate resolutions, screen sizes, and devices, than relative positiong does. With relative positioning elements stack one on top the other, effectively creating an order in which elements will fall into place regardless of the screen resolution or size.

We’ve also created a comprehensive guide to Media Queries in another tutorial called Working with CSS3 Media Queries In that tutorial we show you how you can create content that appears in different dimensions depending on the resolutions of the screen and the set of queries used. Media Queries are very powerful, but they also have their limits. For one, you cannot remove an element from the page just because you did not specify it in a query. The element will still display in the flow of the page whether its properties were specified in other queries or not. Consider a flash game for example. You may want to render a smaller version of the game for resolutions at 1024x768px or smaller, and a larger version of the game at resolutions that are higher than this resolution, say 1366x768, etc. In that tutorial we show you not just how to implement your queries properly, but also how to display alternate content for each query, thanks the CSS “display: none;” property. Then you can use optional replacement elements within your media queries. However it's best to show the same elements to all users, but you can return to users the same element being tailored to fit and match a particular resolution this way.

We will be writing more about mobile design practices in the near future. The aim of this tutorial was to simplify the process of designing content not just for mobile devices, but for all internet viewable devices as a whole. Also, consider when it may be appropriate to implement a sub domain for your mobile version, and when it’s not. As we stated, Media Queries don’t yet have full support among all devices and browsers alike, but their functionality is improving constantly as time moves forwards. Later in another tutorial we will discuss the newer and still yet to be implemented by browser vendors “@viewport” CSS property, as well the “meta viewport” tag, and a discussion about how to implement your sites with Google’s mobile search index.

Google's current official recommendation as stated on their webmaster blog, is for web designers to implement their responsive, and mobile optimized design practices by serving the same set of HTML code to all users on all devices inlcuding, laptops, smart phones, desktop monitors, tablet PC's, etc, while using just CSS to create the styles for their HTMl and content, and this is also our recommendation here at PCTECHAUTHORITY.COM. Webpages who's content can be tailored to all devices universally are the easiest for Google bot, and Google bot-mobile to crawl an index that content. This also streamlines the development process when creating "adaptive" webpages effectively tailoring to a better, easier, user experience.