What Is Responsive Design?
The age of smartphones is upon on us, and the web is transforming to accommodate them. According to an August 2013 article by Mashable, mobile web browsing is rapidly gaining popularity. The study found that 11.1% of all web traffic in 2012 occurred via mobile devices, and that this percentage has since increased by more than 6%. Currently, more than 17% of all web traffic occurs through mobile devices. As the mobile browsing trend continues to grow, it is important for businesses to realize the importance of having a mobile-friendly version of their website.
With this in mind, one might assume that modern websites should be built with three separate designs: one “large” design for computers, one “medium” design for tablets, and one “small” design for smartphones. However, this is not the easiest or best way of tackling the many players in the constantly evolving device market. In the smartphone market alone, there are countless different screen sizes, both in physical dimensions and in screen resolution (density). Therefore, one cannot simply design for different devices based on size. The best way to ensure that a website will look good on any device is through responsive design.
Responsive design is not just another buzzword; it is an extremely important methodology in modern web development.
Responsively designed websites are able to:
- React to actions performed by the user
- Detect the device through which the site is currently being visited
This ensures that sites are easy to view, read, and navigate no matter what device they are viewed on. When implemented properly, responsive design is the easiest way to provide website users with the best customer experience across the board.
To elaborate on this concept, here are some visual examples of sites that are responsively designed:
How does Responsive Design work?
Responsive design is generated by three main elements.
1. Flexible grids
- All page elements are sized in relation to each other
- Elements are sized in relative units (such as percentages), rather than in absolute units (such as pixels or points)
- To explain this better, let’s look an example:
Let’s say you are designing a layout on a screen that is 200px wide. You know that you want two boxes at the top of your page: one wider than the other, but both the same height. With this in mind, you come up with the following:
You are quite pleased with the yellow box being 60px wide and the turquoise box being 140px wide. So, you set these widths. You then ask your friend to check out this layout that you came up with, and he opens the page on his screen. However, his screen is twice as wide as yours (400px). Here is what he sees:
By setting the widths of the 2 boxes to specific measurements (60px and 140px, respectively), you have failed to accommodate users with screen sizes that are different than yours.
Therefore, you should implement the first element of responsive design: Flexible grids.
- The basic formula that is used to convert elements from absolute measurements to relative measurements is target / context = result
- In the example, the yellow box had a target width of 60px
- The context in which we wanted the yellow box to have a width of 60px was when the container (navy box) had a width of 200px
- Therefore, the result of this calculation (60px/200px) is = 0.3, or 30%
- If we do the same calculation for the turquoise box, we end up with 140px/200px = 0.7, or 70%
So, you have calculated your relative measurements using target / context = result, and you end up with these new widths:
You ask your friend to view this new layout on his 400px screen. Here is what he sees:
- The use of flexible grids ensures that page elements maintain proportionality; if a container grows or shrinks, the boxes within it will grow or shrink accordingly
2. Fluid images
- Fluid images are sized relative to their parent units
- To explain this better, let’s look at another example:
Let’s say you want to add an image inside of the yellow box. You have a great picture that you want to use, and you notice that the size of this picture is 116px wide and 36px tall:
When you place it inside of the yellow box, here is what happens on your screen:
You are confused as to why this looks so strange, so you ask your friend to open it on his screen:
What you notice is that the image maintains its original dimensions (116px x 36px), even when its container grows (or shrinks). This is why you can only see a fraction of the image on your 200px screen. As we discussed earlier, the yellow box has a width of 60px (30%) when the screen is 200px wide. It also explains why your friend can see the entire image (plus a sliver of the container) on his 400px screen. When the screen is 400px wide, the yellow box has a width of 120px (30%), so we are able to see 4px of the yellow box (120px – 116px = 4px).
In order for this image to resize properly, you need to implement the 2nd element of responsive design: Fluid images.
- Fluid images can be implemented in several different ways, but the easiest way is by setting the image’s max-width (maximum width) to 100%
- This will scale oversized images down to match the width of their containers
So, you tell all images on the page to have a maximum width of 100% (relative to their containers). Once this is implemented, here is what you see on your screen:
And here is what your friend sees:
As you can see, the image is now resizing based on the size of its container (the yellow box). By setting max-width = 100%, we have told the image to shrink down to the width of its container. When this happens, the height of the image is automatically decreased by the same ratio. However, if the actual width of the image is smaller than the width of its container, it maintains its actual width. This works out well for us, as it prevents the image from getting blurrier and blurrier as its container increases in size.
3. Media queries
- Media queries are used to detect capabilities of the user’s device, such as:
- Screen width/height
- Aspect ratio
- Orientation (vertical or horizontal)
- Resolution (pixel density)
- The ability to detect this type of information allows the presentation of site content to be specifically tailored to the output device without having to alter the content itself
- For example: if you have a paragraph of text that isn’t vital to the page, you might want to display it on desktop web browsers, but hide it on mobile browsers. To do this, you could use a Media Query to determine the width of the user’s browser, and if it is less than 480 pixels, apply some CSS styling to hide that paragraph.
- To see media queries in action, let’s take a closer look at one of the sites displayed above:
The website that we are going to examine is Microsoft.
First, let’s take a look at how the Microsoft website renders on a computer (1280 x 802px)
Now let’s take a look at how the Microsoft website renders on a tablet (portrait orientation; 768 x 1024px)
Now, let’s take a look at how the Microsoft website renders on a mobile device (320 x 480px)
In order to examine the changes between each window size, let’s look at them all at once:
As you can see by the various colored blocks, several things can change as the screen gets smaller:
- Sections shrinking in size
- Sections shifting positions, relative to other sections
- Sections rearranging their elements (e.g. the Follow Us links)
- Sections changing their elements completely (e.g. the Discover links from tablet [#2] to mobile [#3])
- Sections no longer displaying (e.g. the purple For home / For work section doesn’t show on mobile devices)
Overall, this is a good example of a site that has effectively utilized media queries to achieve responsive design.
By combining the elements discussed above, developers are able to build responsively designed websites. This practice ensures that every site visitor has the best possible experience, no matter what device they are visiting it from.