Justin

Responsive Web Design Isn’t An Option, It’s a Standard

Author: Justin Conklin on 03/03/2014

When the web first started, serving up websites to desktop PCs and laptops was a one way approach. Screen resolutions varied, however the margin of variation was not great enough to hinder the user experience. Nowadays, the different resolutions tapping into the web can range from 240x320 to 2560x1600. We’re not talking about a few devices anymore either, there are hundreds of smartphones on the market and more people are adopting them each day. So, how can we possibly meet the needs and expectations of hundreds of devices with unique screen resolutions? Simple, go responsive.

What Is Responsive Design?

Responsive design is when a web page can adjust to any resolution and serve up a design that fits into the view of the user’s current device. It allows you to create one website that can serve all devices, instead of a website for each device. This blog is responsive, go ahead and adjust the browser width and see the website take a new form for its new resolution.

How Is It Done?

Responsive Design relies on Fluid Grids and CSS Media Queries to define styles at specified breakpoints. Breakpoints refer to specific resolutions where the design will snap into its new form. For example, a standard Apple iPad uses a 768x1024. Here is an example of iPad Media queries and how you can adjust the CSS for it specifically.

@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {
header { width: 100%; } /* make the width 100% when iPad is viewing in Portrait */
}

@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape) {
.container { float: left; } /* make container class float left when iPad is viewing in Landscape */
}

The magic of the code is in the @media portion, it’s detecting a device width and height as well as the orientation of it. This example covers the iPad specifically. In a real world environment you adjust to your design as needed - which can be referred to as adaptive design. If objects are overlapping, you need a breakpoint. If text or images are being pushed outside of containers, you will need a breakpoint. With proper coding of the fluid grid, you shouldn’t need a lot of breakpoints.

A fluid grid refers to a standard grid based system for your CSS, however it uses percentages as the widths, therefore shrinking and expanding with the width of the browser. When you combine a fluid grid with media queries, you will see the magic that we like to refer to as responsive design.

Why Is It So Important?

According to Morgan Stanley, it’s expected that by 2015, mobile users will surpass desktop users. If you’re not able to accommodate for the surge in mobile traffic, you will likely see a surge in your bounced traffic. As more websites start to cater to mobile traffic, those who don’t will more commonly be the victim of the back button before they’re ever able to plead a case.

In summary, websites need to be able to handle a plethora of screens and devices. With new devices, screen sizes, and technology being introduced daily - Responsive Design is the current future-proof method that you should be adopting to ensure every visitor has a great experience.