Designing A Responsive Website

Before we delve deep into the article, it’s a good idea to really nail the concept of responsive design; what it actually is, why it exists and to work our way through the technical jargon surrounding it. Essentially, it’s all about creating a design that will respond (hence, responsive) to a variety of different view-ports – or more simply, different sized screens. A very simple example of a responsive design in action is this very site – try resizing the browser; everything flows into place depending on the dimensions of the browser.

To cite an example of why responsive design is increasingly necessary:

A 1920px x 1080px image that fits perfectly fine into your desktop view-port is not going to fit into the view-port of an iPhone 4, with it’s maximum width of 320px. This is the reason responsive designs are becoming a requirement for websites – especially if you are a business. In the UK alone, over 90% of Internet users access websites on their phones, while simultaneously using a tablet, laptop or desktop.

Imagine if your beautiful website, crafted on and for desktop computers, looked absolutely shocking on mobile – or even looked bad on just a slightly smaller monitor. You would be losing potential users, subscribers or business leads all the time. The cost of having the website developed won’t have been worth it and you even risk damaging your brand due to sub-par quality.

Responsive Design Examples

So, in answer to this dilemma, responsive architectures were created. These are methods web designers & developers use to ensure that the quality their clients wish to achieve is achievable in a cost-effective time-frame without compromising other aspects of a website.


Fluid Design

Trying to produce designs for every different-sized device on the market is utter madness; it would take a fool to attempt it and the result isn’t even likely to be acceptable – too many designs, messy code & ultimately a slow website as it tries to render so many different styles in one go.

Rather than attempt the havoc that dozens of designs would wreak in a development environment, you could simply have a single design. A design that flows with the width of the page, moving elements above or below each other yet still retaining the all-important order of content on the page. The most common method to achieve this is a single-column format centered in the middle of the page. All content contained within that column follows the natural flow of the page, neatly organizing itself as required.

A Simple Single Column Design

Of course, that isn’t the only way to create a responsive design. There are incredible designs live on the Internet, hand-crafted by some fantastically talented artists & developers who have dedicated themselves to creating next-level websites. A few of them can be viewed over at the awwwards site which is updated almost daily.

With so many new options (and Frameworks like Bootstrap) appearing all of the time, making it ever-easier to implement responsive designs into websites, it can often be difficult to remember a key tenet of the concept – Simplicity. I think this quote sums it up well:

“Don’t get me wrong, I admire elegance and have an appreciation of the finer things in life. But to me, beauty lies in simplicity.”

– Mark Hyman


Simple is Better

All of the new technical toys developers have been given access too in recent years has led to an over-complication of many websites. Amid the myriad tools in use, it’s easy to lose track & start stuffing your design full of pretty useless features meant to aid your design – potentially ruining it. Sure, they look cool and they do help responsiveness, but that does not mean they add to the single largest factor in responsive design – the user experience.

Example of a Simple Design

When approaching your design, it is particularly important to bear this in mind – always question whether or not that aspect of your design is actually helpful for the user, and if it is really necessary. Be it animations that scale to the viewport, images that respond in unexpected ways or even simple text changes when the screen changes dimensions. If it doesn’t add to (or worse, detracts from) the user experience, even if it aids your responsive design, it needs to be cut out.

A study by Google in 2012 supports this. Users judge your website quickly (less than a second, in fact) & it is often very difficult to recover from a bad first impression. Pay attention to the features you’re implementing in your design and ensure that they’re maximizing the user-experience, rather than just making your life a bit easier.


Cleanliness

It’s not only the mechanics of a website that need to be examined. Sometimes, the content itself should have a doubtful eye cast upon it. Users show time and time again that they prefer easy-to-read, short, clipped statements rather than glaring blocks of text. It is almost always better to keep cutting down on the amount of text/content happening on the page in favor of the cleanest design possible.

Example of a Clean Design

White space is a powerful tool when it comes to design. It can make content easier on the eye, and separate cluttered elements of the page, to name a few uses. It can also aid in drawing the user to the most critical messages of your site, rather than having other content abstract away from it.

This isn’t a section aimed at making your pages as bare as possible, though – far from it. The Home page for this very site has tons of text-based content, but it is still clean, or at least, I feel that it is. It doesn’t assail your sight with a ton of different features, colors & images to digest. That’s important in making sure your users actually read your content.


A Summary For The Basics

It’s only a short article, but we’ve actually covered a lot of ground regarding responsive design. Ultimately, it’s a very simple concept by itself, but it can be difficult to implement when you consider the bigger picture – responsive design has to fit in around functionality, too. This comes with its own set of problems & solutions, but that is for another article.

For now, remember these key tenets of responsive design:

  • Fluid – Think about the placement of your elements, and if they can easily be moved.
  • Simple – Don’t over-complicate things. The simpler your design, the easier it is to build & optimize.
  • Clean – As long as the content is easy to follow & you aren’t getting lost navigating, you’ve kept it clean and tidy.

That wraps it up! If you found this article useful, please do share it to other people who might enjoy it, and look us up on our social media accounts, just down there in the footer! You can also get in touch by sending us a message through the contact form up there in the header.