B52's Album Cover

The future, as envisioned by the B-52’s

How are you viewing this blog post right now?

You could be reading at your desk from the comfort of your own home, on your trusty PC with a 20 inch monitor at work. You may be sat in your local Starbucks enjoying a scrumptious Vanilla Latte and skimming through on your shiny new smartphone. Wherever you’re reading this, you’ll know that the web can be accessed from pretty much anywhere nowadays. Technology is naturally adapting to our ever-changing lifestyles… and that’s a good thing.

From Many There Is One

So, why do we still zoom, scroll and swipe through almost every website we visit on our mobile tech?

Web designers and developers initially solved this problem by creating standalone mobile-specific websites to coincide with the main desktop version. These were (and still are) generally clunkier, watered-down imitations of the full site, rendered for a particular screen size in mind. But since the increased popularity in tablet computing (sparked by one particular rectangular slab of joy), these sites just haven’t evolved. Why aren’t they able to ‘magically’ format themselves to suit ANY screen-size we’re using? That’s where responsive design steps in, and kicks the mobile-site square in the nuts.

What Is a Responsive Site?

A responsive website is built upon a grid that automatically adjusts itself depending whether you’re viewing it on a mobile phone, tablet, laptop or desktop. One universal design can fluidly adapt to any browser size and, in turn, create a seamless transition for the visitor. This solves a huge problem in the sense that it eradicates the need to design and develop countless versions of your site for an ever-increasing number of devices.

A good example of where responsive design would work well is a newspaper website. Let’s imagine you’re eating breakfast at the desk before work. You stumble across a super-interesting story on our desktop computer and begin to read. However, halfway through the article you realise you’re late for work. After a mad dash to the train, you take your seat and pull out your mobile phone. After navigating to the same news site, you’re able to carry on reading that same article again. Because this article is responsive, you’re able to read with ease, as the font size has increased and wrapped around a resized image.

Designing Responsibly—er, Responsively

But, why should a website become responsive? The main advantage to responsive design is that it ensures that your site is future-proofed. Just look how far technology has evolved in such a short space of time; who knows what we’ll be using browsing the web in another five years time. A responsive layout will adapt itself to your brand new WiFi enabled toaster, no problem!

Out With The Old, In With The New

As with every new method and technology, it takes people time to adapt. Responsive design will be no exception in this matter. This new way of displaying web content brings a number of challenges to the table for those unfamiliar with the technicalities of designing and developing a responsive site. First and foremost is the difference in the code. While we are still using good ol’ CSS, HTML and Javascript like any other website, it requires a certain amount of logical thought input to make it responsive. The columns and margins are all calculated using certain percentage widths rather than fixed measurements, which shrink or expand when the browser width/height changes. This alone can be quite difficult to wrap your head around, but fear not, as there are many boilerplates available to get the basic grid into place for you:

In addition to the mind-boggling code involved, it can also be quite a challenge to design a responsive website. Whilst the design must be consistent, it must also adapt well to smaller devices. One of the key things to consider is legibility – how easy is it to read your content? While a 14px font may be easy enough to see on a desktop or laptop screen, viewing on a mobile device may require zooming and scrolling in order to read it. This is where you should consider increasing the font-size when the browser reaches a certain minimum width. But of course, altering the font-size can throw off your other content, so you’ll also need to consider where to relocate your other site elements.

The very idea of a responsive web is still a new concept. As designers and developers begin to come to terms with the best practices for building these websites, we’ll begin to see them implemented in many different environments. However, there may still be a few places where this simply will not work…

Are There Any Downsides?

A good example of where responsive design may not hit the mark is with image-intensive sites, such as photography portfolios or picture blogs. When images are resized for smaller screens, the amount of data that makes up an image remains the same. The dimensions are simply shrunk down in order to make it ‘fit’. As mobile technology is still far behind the power of desktop and laptop computing, it can take a little longer to load these images, restricted by the speed of your cellular data and the processing power of whatever hardware you may be using. Standalone mobile-optimized sites have the option to publish images with a lower resolution to compensate for this issue. However, as mobile tech continues to evolve and improve every year, this will only become less of a complication.

Is Responsive Here To Stay?

In preparation for this blog post, I decided to make my own website responsive. I found it to be a very confusing process at first, as I don’t claim myself to be a developer by any means, but have dabbled in light front-end development in the past. I resorted to using the Gridiculous boilerplate. This acted as a foundation for me to add my own content and style to my own personal taste (webfonts, yay!). Be sure to let me know what you think.

Screenshot of TomNeal.me

Responsive design is certainly impressive, and is proving useful in many situations. But what do you think? Is the future of web a more responsive place, or is it a passing fad that’s more hassle than it’s worth?

Discover and implement your big idea with our product team

Get in Touch