04 May Responsive Web Design: Proportions In, Pixels Out

“Day by day, the number of devices, platforms, and browsers that need to work with your site grows. Responsive web design represents a fundamental shift in how we’ll build websites for the decade to come.” – Jeffrey Veen (@veen)

What is Responsive Web Design?

Responsive web design means web pages look great at any size. Traditionally, websites have been defined in terms of pixels – an idea borrowed from the print industry where a magazine or newspaper was always going to be the same size. Today, Silicon Valley pumps out new devices faster than you can enter the passcode on your iPhone 6. Consider all the devices in today’s typical home or office: smartphones, tablets, phablets, wearables, game consoles, and smart TVs. Responsive web design ensures content is seamless across all devices by relying on proportions, rather than pixels, which allows content to change according to a device’s screen size. Content is given a certain percentage of the browser or screen and as the viewing window changes the content only takes up its assigned percentage. The graphic below illustrates how our website breaks down seamlessly across multiple devices.

Savvy Consumers, and Google, Love Responsive Web Design

“We recommend webmasters follow the industry best practice of using responsive web design, namely serving the same HTML for all devices and using only CSS media queries to decide the rendering on each device.” – Google

Responsive web design suggests responding to the end-user’s behavior and environment. Smartphones are powerful tools and consumers no longer simply call, check the time, or text a friend – they turn to them with intent and expect brands to deliver immediate answers. In these moments consumers are frustrated by poor user experience and quickly navigate to another website.

In April 2015, Google announced an algorithm update that rewards mobile friendly pages. Simply redirecting to a mobile site is no longer an industry best practice. All content should be served from the same place and respond to every device in every situation.