Media Queries: Part 1

Posted by: Stephanie Donahue on October 27, 2014

This is part one of a 3-part blog series focusing on one aspect of responsive design: Media Queries. Although this series sits firmly on the SharePoint Shelf website, media queries aren’t particular to SharePoint. In fact, in the context discussed here, they can be applied to Web development in general.

Responsive What?

In case you are  unsure what responsive design is, in a nutshell, responsive design/development is an approach to web design that makes your site elements adjust various styles on the fly based on what device you’re viewing the site on. So if you’re rocking a brand new Windows phone, the site will look differently than if you’re looking at it on a laptop.

“Why” you ask? The purpose of a responsive site is to improve the user experience and legibility of a site on a mobile device. The repositioning and scaling of containers and content makes the mobile experience better as you don’t have to do all the clunky pinch and spread finger actions to click that tiny little link embedded under the ‘here’ in “Click Here”.  Instead, the link would appear bigger and more prominent.  This type of design methodology is becoming increasingly more important in the business landscape due to modern advancements like the “Internet of Things”, “Bring-Your-Own-Device” initiatives, and the explosion of mobile use.

Responsive Meat and Potatoes

Responsive design/development boils down to three main elements: flexible content, a grid system, and media queries. Flexible content refers to using proportional sizing in your CSS on containers and content (percentage, ems, etc) so that your content scales properly. A grid system is a series of style classes (usually packaged in a framework or library) that dynamically repositions elements based on viewport size. Media queries, the focus of this blog series, are style rules that are dynamically applied based on what viewport you’re using to view the site.

There are many frameworks available that handle responsiveness in terms of grid systems for you but, even with these frameworks, you’ll often want to add your own custom functionality.  That’s where media queries come in. This blog series focuses on these media queries and will hopefully leave you with an increased feeling of competency when working with them.

What is a Media Query

CSS 2.0 introduced media queries but did so very subtly by giving us only the option of screen or print. This came in the form of the “media” CSS registration attribute as such:

&lt;link rel=”stylesheet” type=”text/css” href=”screenStyles.css” <strong>media=”screen”</strong> /&gt;
&lt;link rel=”stylesheet” type=”text/css” href=”printStyles.css” <strong>media=”print”</strong> /&gt;

These two examples above are essentially saying “If this site is being viewed on a screen, load the ‘screenStyles.css’ file. But if they are about to print, use the printStyle.css file.” Not many developers made use of the media queries in CSS 2.0 browsers except maybe to load a style sheet for a print view of the item.  Media queries allow you to apply CSS rules based on the features of the device your viewing the site from and that’s exactly what this attribute in CSS 2.0 is doing. However, it has since been updated to include a lot more types in CSS 3.0. These checks include looking for data on:

  • Browser window width
  • Browser window height
  • Device width
  • Device height
  • Landscape versus portrait orientation
  • Screen resolution

One side note, if you plan on using CSS 3 features, keep in mind that Internet Explorer version 8 and earlier use CSS 2. This means any CSS 3 feature you use will not work by itself. Instead, you’ll have to ‘retrofit’ the CSS 2 browsers to behave like CSS 3 browsers in terms of responsiveness using a library

Kicking Off a Media Query

So the above examples showcased a simple way to fire a style sheet based on the media you’re viewing the site on. But you can also fire them in a couple other ways.

To fire it through XML, you use this format:

<strong>&lt;?xml-stylesheet media=”all and (color)” rel=”stylesheet” href=”/style.css” ?&gt;</strong>

And like the CSS 2 example above, you can register an entire file for certain device types using the following syntax:

<strong>&lt;link rel=”stylesheet” type=”text/css” media=”all and (color)” href=”/style.css”/&gt;</strong>

You could also fire it like this:

<strong>@import url(“/style.css”) all and (color);</strong>

Finally, you could also use CSS @media rules directly in your style sheets as such:

<strong>@media all and (color) { /*styles go here */}</strong>

Where to Put It

CSS stands for cascading style sheets which infers how the styles are applied; via a cascading flow downhill. This means that for media queries to be most effective, they should be applied to the end of the CSS file.  But…

One other important consideration, as well as a best practice, is when it comes to responsive development, take a ‘mobile first’ approach. This means you should start your design and development at the phone level first, style the site to look right on that device, and then fit your media queries in by stepping up to larger and larger devices. So after the phone landscape and portrait views look good, you would move to tablets. Then after tablets, move to laptops and bigger monitors.

One CSS or Multiple

If you want or need to put your media query styles in a separate file due to size or legibility concerns, then you can do so by putting the media attribute on an HTML link tag as such:

&lt;link rel=”stylesheet” type=”text/css” <strong>media=”only screen and (max-device-width: 480px)” </strong>href=”phone.css” /&gt;

All the same formatting you can do on the inline method with media works inside this attribute as well (assuming you have CSS3 support).

Wrap-Up

This article explained some very basic implementation methods to apply media queries as well as a high level on what they are. In the next article, we’ll be digging deeper into the media query to understand what the syntax means and what options and media types are available.

Topics: Enterprise Content Management

    Recent Posts

    Categories