vector - responsive screen

Media queries didn’t exist a few years ago but now are essential and fundamental elements of modern web design. Let’s explore them and how they can impact your business.

In CSS2, we were introduced to the possibility of targeting display for different media types (separate post), and since the introduction of CSS3 which helped facilitate the move away from tabular web design, we’ve been able to use Media Queries to help improve the appearance of websites on a multitude of different media.

‘Media’ in this context refers to different devices or viewports.

We are able to use media queries to change the styling depending on whether the user is using a mobile or tablet, a desktop or projector and even printed media.

We can change things purely based on the number of pixels available on the device and even the pixel density and even orientation.

By adding code into the CSS file(s), we are able to trigger styles based on any of the above and have them effect the output in order to (hopefully) optimize the experience of the person(s) viewing it.

Here is a typical bootstrap media query declaration where you can see the simple naming convention (hidden small), as well as the desired outcome (display – none) and the pixel ranges this affects (768-991px):


@media(min-width: 768px) and (max-width: 991px){
.hidden-sm {
.display: none;
}
}

 

This functionality really does help us web developers attune your website for the best experience on each and every device.

But, as you can imagine, with new devices hitting the market daily, the number of different combinations to consider is growing ever more mind-boggling.

 

So, how do you implement media queries for each size device?

The main consideration (but by no means the only consideration) is screen size.

With more traffic being viewed on a mobile device than on a desktop device , it’s more important than ever to consider what your website looks like on a mobile

In April 2015, Google launched what’s been dubbed “Mobilegeddon” by many – they started to penalize websites which are not optimized or setup for mobile users by excluding them from the search results displayed for searches carried out on mobile devices.

Their reasoning for this was that they are always looking to promote websites with the best user experience – and a website which doesn’t cater for smaller screens with bigger buttons, a condensed width layout and a ‘low-bandwidth’ version offers a poorer experience to the user than a website offering these things.

What followed was a general shift towards ‘mobile-first’ design – websites designed to be appropriate and effective for mobile devices and who’s appearance on desktops and larger screens includes more superfluous and additional content.

In order to combat the ever-increasing number of devices (with an ever increasing range and proportion of screen sizes), web developers have developed techniques called ‘frameworks’ which help ‘chunk’ ranges of screen size.

We have had the 960 grid system (from Nathan Smith), with its cousins the 1000 grid and 1200 grid systems and I think the most popular and widely used system is now Twitter Bootstrap.

Twitter Bootstrap is a series of css snippets which are freely available and create a 1200 grid which allows elements to be stacked on smaller devices and sit next to each other on larger screens easily.

There are a whole host of other benefits to using these systems, but I won’t go into too much detail in this post, as we are looking to talk about media queries.

Bootstrap uses chunking and where you switch from one range to another, you get what is called a ‘breakpoint’. Because of this standardization of breakpoints, we are able to ensure that websites look as they are supposed to on the following sized devices:

  • Large Viewports (generally considered desktop) = 1200px +
  • Medium Viewports (generally laptops and smaller screen desktops) = 992px – 1199px
  • Small Viewports (generally tablets) = 768px – 991px
  • Extra Small (generally phones) = >767px

By using this approach, you know that a device with a screen width (in pixels) of 995px and one of 1000px will show the same way.

Similarly, we know that most mobile phones will have a screen width which has less than 767px, so we can design the site to look the same whether the screen is 500px wide or 750px wide.

 

Exceptions to the rules

Of course, these are generalist rules and as you would expect there are some exceptions.

Who else but the kings of doing things differently – Apple – seem to break all the rules with their devices.

The apple iPad is considered a mobile device and so would in theory show things on a screen in a mobile-friendly way. However, it has a resolution of 1200px making it a ‘desktop’ sized device in a pixel-sense – which means you need to be careful with how things are displayed in order to optimize the user experience.

Apple’s retina displays do a similar thing in the mobile ranges, giving their mobiles an ‘artificially large’ viewport,  meaning that sometimes issues can arise with getting websites to appear correctly on apple iPhones.

Of course, there are workaround to these issues as responsive design is something of the norm nowadays, but you can see what a minefield responsive web design could be if you don’t know what you are doing.

 

Other types of media query / types

Originally, in CSS2 we were able to target particular types of device – such as print or Projector.

However, this functionality didn’t really get much uptake or support from device manufacturers – probably because website optimization was still in its infancy.

As a result, it wasn’t until CSS3 when a whole raft of new development options were introduced that more widespread support for these types of query was introduced. Now we can display web content differently for:

  • Print – hide unnecessary detail and ensure the main content of the page is printed in a well-formatted manner
  • Projector – re-prioritize content for projectors to ensure that the main content of the page is well displayed on a large projected screen
  • Speech – completely changes the relevancy of the content on the page in order for it to read well to those using screen readers.

 

Media Queries Summary

Media queries in combination with Media Types introduced in CSS2 provide a series of powerful tools which allow web developers to alter the display of the content on your website to be most beneficial to the website user dependent on the device that they are using to view the website.

By using frameworks such as Twitter Bootstrap, we are able to cater for a multitude of different devices and their requirements in order to ensure the device shows your website in it’s best light, no matter it’s resolution, orientation or even whether it’s a screen-reader user visiting the site.

If your website is not responsive to mobile devices, you need to get it amended otherwise you are simply missing out on much needed and valuable traffic and possibly incurring Google penalties at the same time.

Contact us for a quote if you would like us to manage that conversion for you – we can work with existing websites or start from scratch – the choice is yours.