Be responsible, make your site responsive with media queries.

I say be responsible. Because nowadays designers have a responsibility to make their clients website as useable as possible. And if 80% of the world are using mobile phones and accessing the internet, then your site needs to work properly when viewed on a mobile or smartphone.

Beginning
The Catch
The Solution – Media Queries
Media Queries Example and Breakdown

I’ll start from the Beginning.

Earlier websites (and even some today) are of fixed width. That is, it’s width is defined by a number rather than a percentage.

The simplest method of making something partly responsive is to make it fluid width (using “width:100%;”), so if we assume the full width of our website width is 100% then by making the width a percentage, say 75%, the website width will be 3/4’s the width of the screen it is being viewed on.

To look at it another way, the screen size is the variable and by making the width of website fluid we can make sure it will always be 75% on any screen, showing a wide area for your content.

But there’s a catch.

On a Smartphone screen (which is typically a lot of narrower than a computer screen) a fluid width of 75% will result in an awkward layout, anything less…even more so. On a Smartphone nothing less than 100% will do, not including padding. Some mobile browsers will adapt the layout to a certain level, but this results in lots of zooming and panning around the website, which usually results in accidentally clicking links and being directed to somewhere you didn’t want to go.

As well as the CSS rule “width:” there are a couple more rules we can use to help contain a fluid width. “max-width:” allows us to place any value as a maximum value. For example:

 width:75%;
 max-width:1000px;

The max-width stops the 3/4’s width size when it reaches 1000px wide, and cap’s it there. Which is useful on a widescreen monitor. Apple screens, for example, have a massive 2560px width so ignoring a max-width would result in a website 1920px wide! Which is far too much of a content area to fill.

This doesn’t help us with our Smartphone screen though, the iPhone 5 for example has a poultry screen resolution of (960×640) so with same rules, we will end up with a horizontal scroll bar, or “overfill” which defeats the purpose of making a website responsive, the user should never have to scroll on a Smartphone.

The CSS rule “min-width” can also help, by adding a minimum starting width to a fluid width container. Using this method, however, does not return the screen size we are working with, meaning we’d have to guess a minimum value based on something like, which phone screen widths are most popular, which is an incredibly messy and fuzzy way of working.

Enter Media Queries.

Media Queries are a way of letting the website know what the ACTUAL screen dimensions are, and gives us the option of setting multiple rules for various screen widths, which then allows the website to load the correct CSS rules for the corresponding screen width. This is by far the best way to deal with responsive setups because we’re dealing with actual value’s and value ranges meaning the website will always look the absolute best for the screen it is being viewed on. Even tablets can be designed to utilise a psuedo-responsive version of the site by defining style rules that are only recognised  by a tablet.

The best thing about Media Queries is that the concept is incredibly easy to apply, the difficulty lays within finding the best way to display your site on various screens, which means testing and emulating. The testing phase is incredibly important to make sure that your site is as viewable and accessible as possible, on the widest range of devices as possible. There are now plenty of emulators out there that show you exactly how your site will look on various devices. I often use Brick and Mobile’s Mobile Emulator for testing as it allows me to still inspect the layout via Chrome’s developers tools.

http://www.brickandmobile.com/mobile-emulator/

 

 

Media Queries Example and Breakdown.

This piece of code below is a typical media queries layout.

@media screen and (max-width: 640px) {
.pagewidth {
width: 100%;
} 
}

What’ going on here?

The Media Queries parameter uses normal CSS to set rules in brackets so in this case “max-width:640px;” and then CSS classes with their own CSS rules can be added within the curly brackets. Almost the same as a function. In the code above, the “@media” Media Query will apply the classes within it’s curly brackets to any screen size smaller than 640px. So, basically, on any screen which has a width of 640px or less the CSS Class “pagewidth” and the style rules held within will be activated. If the website is viewed on a screen that has a width higher than 640px then then this particular “pagewidth” classes rules, will be ignored.  But we can set another Media Query like the one below to cater for screen sizes with a size of up to say, 980px. Adding a min-width value means that any screen size that falls between 641px and 980px will mean the Media Query below will be activated instead.

@media screen and (min-width: 641px; max-width: 980px;) {
.pagewidth {
 width: 90%;
 }
}

This means we can literally control ALL CSS elements of our website, and activate/deactivate them depending on what screen size the site is being viewed on. THIS is the way make a responsive website. Fluid widths can help in pseudo classes and selectors, but page widths and containers should always be defined under Media Queries as it’s the most sure way of controlling how your websites rules are interpreted by whichever device it is being viewed on.

Your website will accessible to a larger audience, and your content will be seen more than it would have otherwise, what’s more it will still look great.

No comments yet.

Leave a Reply