Responsive, mobile & everything in between

How will your website respond to 2015?

Its been awhile since we wrote ‚15 reasons to go responsive in 2013‚ and a few things have evolved in that time, so we are re-visiting the dizzying subject that is responsive web design.

The word ‚’responsive’ has been rife for a few years now, ever since it was first used by Ethan Marcotte in 2010 in his article for A List Apart called ‚Responsive Website Design.

Nowadays there is a lot more information available and with so much going around its hard to nail down exactly what responsive means, especially if you’re not a web developer. It doesn’t stop there, in addition to responsive web design we also have adaptive web design, mobile themes and apps to wrap our brains around.

So let me help you, I will now describe the different solutions and supply you with a helpful glossary for some of the more techy words that I can’t avoid using.

The first thing to bear in mind is that there are no hard and fast rules, web developers are free to use elements from each method and in some cases websites end up being hybrids. The technology is also constantly evolving.

RWD: responsive web designs

Let’s start with responsive web design or RWD, these designs respond to the screen that they are being displayed on with a fluid motion. Each device will be displaying the same page and content but each element of the layout is allowed to shrink or expand, depending on the available space.

Some responsive layouts then introduce “breakpoints” these are used to tell items in the layout to stack vertically or to not display at all when the screen hits a certain width. Using breakpoints in a website results in that snapping action you sometimes see when you adjust the width of your browser window.

This solution is a dependable one as it uses a devices size and not its device type (viewport) to respond. This means that no matter what new devices are released they will fall within one of your predefined widths (breakpoints) and will receive a presentable if not perfect version of your website.

Also advantageous is that you will only have one design to take care of and one set of URLs to worry about.

The main drawback for this option is that you may need to compromise over design/layout in order to ensure a coherent design throughout. However, with the right advice this is not something that can’t be overcome.

AWD: adaptive web design

Adaptive web designs use many of the same principles as responsive web designs but take it further with the use of viewports. Viewports are basically device types, you can decide to make rules that apply only on certain devices. For example on an iPhone 4 you may decide to hide a section of a page or load a new piece of content.

Historically this method has been used to retrofit existing websites into a device friendly format.

One drawback of viewports is that they are device specific, each time a new device is released you are going to need to update your scripts and if you don’t, your site is going to depreciate quickly. Meaning that a responsive fall back is advisable.

Over complicated adaptive sites also run the risk of becoming hard to manage and disjointed, losing coherence across devices.

Mobile themes

Mobile themes, are technically all adaptive as they will use either mobile user agents or viewports to know when to activate. However the theme that is loaded can be built on a responsive or adaptive framework, it really depends on the requirements.

Mobile themes are generally used when the mobile version needs to be significantly different from the desktop version (a responsive design can’t achieve what is required)

The main drawback of mobile themes are that they require twice the amount of maintenance and testing.

Apps

Apps are not really websites, they are applications that are native to the device that they have been installed on. This means they can run without an internet connection and do not need to be loaded in a browser. Apps can be anything from a game to a social media platform. Many companies choose to have a app built that is essentially an improved version of their website, making an internet connection necessary for it to function.

The main benefits of this kind of app are that they can; run independently of a browser, wait for an internet connection in order to carry out tasks (Instagram’s photo upload) and have the all important app tile on your customers home screen.

Apps are built differently to websites and need a developer who specialises in app development. Fundamentally, we would advise anyone who is thinking about having an app created to assess the business need for such an investment.

For a visual explanation of some of these principles take a look at these Animate gifs by FROONT.

Conclusion

If you are thinking about what the best solution for your website is you should start by getting some expert advice. There are many factors that need to be considered and every website is different. Partnering with a company who can help you to understand the process and talk you through the different decisions, especially when it comes to the limitations of each option will be the key to a smooth build.

Dev dictionary:

Responsive web design (RWD)
This is a design that has been built to ‚Äòrespond’ to the width of the screen it is being displayed on with a fluid motion.

Adaptive web design (AWD)
Adaptive web design detects certain device viewports and serves content as appropriate.

Viewport
These are device types i.e. iPhone 4

Media query
These are CSS elements that allow for device width and orientation specific CSS to be written.

Cascading style sheet (CSS)
This is a style sheet language used for describing the look and formatting of your website.