our
blog

A Responsive World

responsive_blog_img

‘Responsive design’, in my opinion, is the single biggest change to the internet in several years. It’s a phrase you may have heard many people using recently, but what does it actually mean?

In short, it relates to a website that changes its layout and design to fit the viewer’s screen. Sounds fairly obvious but it’s something the internet has been lacking ever since its creation. Until very recently a website was… a website. It looked one way, it functioned one way, and that was that. It wasn’t bothered whether you were on a flashy 24″ iMac or navigating herds of sweaty Londoners on Oxford Street in rush hour whilst desperately trying to will your sluggish iPhone 3Gs to load a page; only to tragically discover the site is built in flash and all you’ll get is a blank screen. Hmm…

HTML5

So what changed? I believe it was a combination of user habits and improvements in technological capability. The sudden appearance of “media queries” in CSS gave our more modern browsers the ability to ‘choose’ what styling the page should use. The beauty of this was that it would work on mobile devices. It meant that developers were finally able to display a site in different ways. This was aided by advances in HTML5. Finally are we able to have native browser support for various media, such as video and audio. This means no longer do we have to rely on third party plugins such as flash, which, due to its intensive load on a device’s resources, Apple refuse to allow on iOS devices such as iPhones and iPads.

In addition to this, users’ hardware became better and better. With the tablet market surging into reality, more and more people began to access the web on a “halfway” device. It’s classed as mobile, but especially for the larger tablets, the display can be the same size as small laptops. In just the previous 12 months web access via a mobile device increased from 5% to 10%. Showing clearly the rise in user mobile activity.

The ‘app’ generation

So what’s wrong with a standalone mobile site? As a site they’re fine, but combining them with a desktop website throws up one big issue: maintenance. Making one simple change to a website and then having to make the same change again for a dedicated mobile site is quite frankly, annoying and also, pointless! A responsive site means that the one website will, by default, automatically update the content for all devices.

But what about an “App”? There are indeed many similarities between mobile apps and mobile sites. Even more so these days. HTML5 is becoming the platform of choice with many native apps now being developed with it. These apps are essentially ‘webpages’ that run on a user’s phone or tablet. The main difference is an ‘app’ has direct access to the device, so it can use GPS, camera and any other hardware/software that is loaded onto it. It can also store data offline, so content can be viewed with no internet connection. There are many tools available to load a HTML5 website into a blank app ‘shell’ that will work across many platforms. This means you can focus on the functionality and content of your app, and let the tool worry about whether it’s an iPhone, iPad, or one of the many Android phones or tablets. Phonegap is a popular example.

The downsides…

As always, though, there are bound to be drawbacks to responsive design. The first is cross-browser compatibility. However, this is an issue with almost every new innovation with the web, so this should come as no real surprise. The fact that Internet Explorer is the main culprit will most likely also come as no surprise. Media queries will simply not work in IE versions 8 and below. This means that Javascript workarounds (as always…) are required, which will increase page loading times, and hinder the performance of the page.

The second drawback is what happens to design and development timings. They can double if not triple. There are so many variations possible for each page layout that testing and bug fixing alone can take as long as building the site in the first place. For these reasons it’s very easy to under-scope when selling responsive projects to clients, so it’s worth bearing in mind.

One other drawback is loading times. Desktops and mobile devices won’t always use the same high-speed broadband connection. Users may be using their phones/tablets on the go, and often with limited signal. This means that it is imperative to ensure that larger files, sich as hi-res images, are scaled down appropriately for the mobile audience. This can, again, increase development time. Afterall, there’s no point in have a flashy new mobile site that simply won’t load. This could mean the difference between winning and losing new clients; and keeping current ones too.

The conclusion

So responsive design is fantastic, and will most likely be the future of web design. As long as you are prepared for the extra work involved, the rewards can be huge; for both yourself and your clients.


Or drop us an email

@SocialPandaUK

Loading tweet...

Get in Touch

We love meeting new people and taking on new and exciting projects.

Request your free web design proposal below and we will get right back to you!

Free Proposal