Pass Me the Ketchup (Secret Stories in Screen Sizes)

Web sites are being served to a large number of different screen sizes and devices types. How do you design and develop a site that looks as nice and pretty on a tiny 4" phone as it doesn on a 25" monitor?

Before I started coding I worked as a project manager shepherding digital sites and content from the idea phase through the design and development cycles. Over the last few years, as the amount of screen sizes and devices grew, I used all kinds of buzzwords to get this point across to clients. Terms like ‘device agnostic' and ‘mobile first’ were flagrantly used many times a day.

From a strategy perspective it’s very clear to me why responsive sites are needed and why a site would want to serve up specific content based on the device and screen size that the user has in their hand. What I never understood was how it was actually being implemented by the developers.

I’ve had a chance to take a look at how content is delivered, or not delivered based on screen size. It turns out there are several different ways to approach responsive front end development, this blog post will tackle the basics of media query in CSS.

First off, let me define responsive web designs to make sure we are all on the same page.

Responsive web design:

From Wikipedia: “Responsive web design (RWD) is an approach to web design aimed at crafting sites to provide an optimal viewing and interaction experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones)

A site designed with RWD adapts the layout to the viewing environment by using fluid, proportion-based grids,flexible images, and CSS3 media queries…“

An example:

A mobile phone has much less real estate and may load slower if it’s on broadband. When designing for a phone you are going to want to focus on essential functionality and remove images that may supply a rich interactive experience but are unnecessary. Also a user on a phone may be more likely to search based on locations so a designer/developer should optimize for this.

How do we build this? The answer is Media Queries

Media Queries are used in CSS to grab information from the browser and make decisions based on what comes back. It can procure info like browser width and height, device width and height, orientation (portrait or tablet), and resolution.

In your CSS file you can use a variable called @media to make decisions based on these parameters.

Here’s a basic template of how a media query should be set up in your CSS file:

1
2
3

@media (query) {
  /* CSS Rules used when query matches */
}

Here’s a working example. This is saying, that the CSS below should only be used on browser smaller than 480px. The wrapper is then set to 400px and a background image called ‘media-queries-phone.jpg’ is used. This image is probably proportionally correct for a phone.

1
2
3
4
5
6
7
8
9

@media (max-device-width: 480px) {
    div#wrapper {
      width: 400px;
    }

    div#header {
      background-image: url(media-queries-phone.jpg);

    }

Media queries can be compared to IF and ELSE statement. If the query is found true, i.e. the browser is larger than 480px, then the CSS in the block is acted upon. If the query is false then do not act on the CSS in the block.

What if there are more than one item that needs to be checked? For example, only use the CSS on tablets where the browser has a minimum width of 600px and maximum width of 800px. Here’s how that would loko:

1
2
3

@media (min-width: 600px) and (max-width: 800px) {
  html { background: red; }
}

If you’d like the queries to work like and OR statement then use a comma to separate your queries like below.

1
2
3

@media (max-width: 600px), (min-width: 800px) {
  html { background: red; }
}

Take a look at the list of all the info that media queries have access to.


Resources & Further Readings:
http://www.w3schools.com/css/css_rwd_mediaqueries.asp
https://www.smashingmagazine.com/2010/07/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/
https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/use-media-queries?hl=en

Mar 21st, 2016