Learn how to apply media queries in responsive web design, plus explore a handy alternative for designers who aren’t code-fluent
No two users’ browsing habits are the same. For consistent accessibility and readability, website content needs to adapt to the screen size of the user’s device, be it desktop or mobile.
Designers use responsive web design (RWD) to ensure that they create the right experience for the right device. There are lots of ways to build responsive websites that work across devices of different sizes, one of them being media queries.
Media queries provide designers with a convenient way of targeting different devices, resolutions, browser dimensions, and more. They also enable designers tailor content to a wide range of devices without having to change any of the actual content since it’s all controlled within the CSS. Pretty nifty!
In our post, we explain what media queries are and how you can create them for your responsive web designs. Then, we’ll explore some alternatives to implementing responsive web design with media query CSS, that is, directly within your prototypes with Justinmind.
What are media queries?
Media queries are a cornerstone technology of responsive web design, having become a W3C standard in 2012. They are a CSS module that allows designers to set up content across different screen sizes, for optimal viewing across multiple devices, browser widths and viewport sizes.
Using media query CSS, designers are able to tailor content and arrange their layout to suit a wide range of devices without having to change anything in the HTML.
How do they do this you ask? Basically, media queries detect the different properties of a user’s browser and enable different CSS in order to change the way the site displays depending on those properties.
What do we use media queries for?
Media queries can be used to check many different characteristics and parameters, such as width and height of the viewport or device, the orientation of the device (is the tablet/phone in landscape or portrait mode?), or even the device’s resolution.
They allow designers and front end developers to conditionally apply styles with the CSS @media rule and @import at-rules (see below), target specific media with the <link> elements, and test and monitor media states.
To give you a simple example, imagine you want display web content on a mobile device. You could create a media query that targets just mobile screen sizes and create a whole set of CSS rules that target these screen sizes.
Device width/height vs. width/height
If you’re new to CSS rules, this section is important. When we talk about media queries, we often talk about both device width/height as well as width/height. Though they may sound similar, they actually mean very different things.
Device width and height refers to the total width and height of the rendering surface of the device. In contrast, width and height refers to the width and height of the viewport. These are the most commonly-used media queries.
See a more in-depth explanation in Ryan Reese’s SitePoint article.
Getting started with media queries
In order to apply media queries to your CSS, you need to get your head around the syntax. A media query is composed of a @media rule, an optional media type and any number of media feature expressions.
To set up a media query in your CSS, you need to declare that you are using one. To do so, enter @media without spaces. The @media rule is used to apply different styles for different media types/devices. It’s the key ingredient in the recipe for responsive design with media queries.
Your @media rule should be followed by a media (device) type <media-type>, which determines which kind of device these CSS rules are going to be active on.
Then, use the keyword “and” to attach an expression (such as width, height, orientation or resolution as mentioned above).
The Net Ninja offers some helpful tips on getting your media queries syntax up to scratch.
As defined by Cyber Chimps: “A breakpoint in web design is a point that allows for the provision of the best possible layout that enables users to consume or understand your site’s content.”
Essentially, a break point is where a design breaks within a screen and a new design or style is defined.
If you’ve ever used website building tools like Webflow, you’ll know you can customize how your site looks on different devices using built-in responsive breakpoints. By dragging the edge of the canvas to change the size of the viewport, you create fluid views between desktop, tablet and mobile. Then, you can adapt the styling for each new breakpoint so that content also adapts to the size of the viewport. See more here.
Media queries can also help you add breakpoints where certain parts of the design will behave differently on each side of the breakpoint. This means that content will adapt to the size of the screen thanks to media queries and text will be optimized for readings.
With media queries, you can rearrange your layouts when the viewport dictates. Tip: you can copy and paste typical device breakpoints free – Google Developers covers this really well.
Responsive web design media queries
Media queries are a simple and effective approach to responsive web design, allowing designers to serve the same content to different devices by adjusting the layout. This means that text continues to be readable and navigation accessible, even on small devices.
When going responsive, it’s important to ensure that you understand the effect it can have – not only on your user experience – but also on performance and conversions. Speed is a killer and a slow loading site or one with poor navigation will frustrate users and lead to their abandonment.
But thanks to today’s mobile-first trends, there are plenty of resources and tools available to help you do responsive web design right and give a user a great all-round experience. And we’re not just talking about implementing media queries.
Media queries in the design process: how to make your life easier
So how do you prototype these complicated responsive sites fast? With the help of prototypes, you can design responsively much earlier on in the design process.
With tools like Justinmind, you can create a fully responsive prototype in less than ten minutes, cutting fat from the design and validation phase. It’s really easy to do, and there a few ways to go about it.
Ready made responsive templates
Firstly you’ve got our pre-built responsive templates, complete with all the necessary UI widgets in place and already optimized for common devices and screen widths. All you need to do to get started is download Justinmind, create a new prototype and choose a template.
Having the basic framework for your prototype’s screens already built will allow you to focus on the other important aspects of responsive design, such as progressive enhancement.
But if you’re feeling more daring, why not try your hand at responsive from scratch? Again, this is easy to achieve with Justinmind.
With our scalable UI element dimensions, you can create liquid layouts and ensure that your content adapts in size depending on the dimensions of the device screen.
Say you want to create a responsive header for your mobile responsive site. Create a mobile prototype and drag a Rectangle to the canvas. Then, go to the Properties palette and change the size to 100% and change the Screen’s properties to “Full browser width“. Upon enlarging or shrinking the page in simulation, your header will adapt to fill the top of the page.
Now imagine you have home screen with multiple content blocks made up of Paragraph Widgets. If you set the size of these Paragraphs with the % unit, they will also adapt to the size of the page, and wrap around each other if need be. You can also add adaptable margins between UI elements and their containers. What a great way of dealing with layout changes!
AND! If you don’t want them to move around fluidly, simply use our pin feature, to keep UI elements right where you want them to be.
So there you have it: media queries and responsive prototyping: the best of both worlds. Whilst media queries are an important part of your interface’s evolvement, you can’t do without prototyping for building responsive websites. Download Justinmind now and put your responsive design skills to the test!