01494 77 22 27

info@io42.co.uk

HOME

OUR WORK

WHAT WE DO

ABOUT US

BLOG

GET IN TOUCH

SEARCH RESEARCH

THE HUB42

blog

Responsible Responsive Design

by Luke Lehane

Posted on 5 January 2016

According to statistics, back in good ol' 2010, only around 3% of global web traffic was served to a mobile phone. Fast forward to 2015, and that percentage has jumped to 33%. The Internet is not just for viewing on desktop computers anymore. Due to increasing accessibility and faster services, more and more people are surfing the web on their mobile device.

All this has big implications for us web designers and developers. We've got to deliver a product that looks great on the device that is being used to access it. With 33% of global traffic at stake, we don't want our clients missing out on customers.

So, what can we do? One solution is to design and build our 'regular' desktop size website and then go about making a second one for mobile that is only loaded up if it detects that a mobile device is being used to access it. Perhaps we could decide to cater for tablet users as well and create another website somewhere in the middle. This is what's known as 'adaptive' web design.

One problem nowadays is that there are so many screen sizes out there. Huge widescreen desktops, laptops, large tablets, small tablets and a whole host of different size mobile phone type devices. This is not to mention that most products these days offer a portrait or landscape view, changing the dimensions of the viewport on a single device! It seems quite apparent that going down the adaptive web design path and creating separate websites for every device we might be able to think of is just not practical and, let's face it, probably quite tedious.

Enter 'responsive' design. Let's forget about specific devices and make sure that our website looks nice at every conceivable screen size! This involves taking a very fluid approach, throwing out pixels for percentages and watching in awe as our websites reimagine themselves as we excitedly drag the browser window up and down. The holy grail of this approach is the beautifully philosophical phrase 'device agnostic'. You'll never know what device is being used to view your website, so don't think about specific proportions.

Is Device Agnosticism Practical?

It sounds pretty great as an idea, but it turns out that putting a device agnostic approach into practise can be difficult, especially when working to deadlines. From a design point of view, we want to visualise something. At IO42, when we sit down and craft a beautiful design for a website, we need something to go by. We have to pick some actual screen size to get started and it'll probably be something on the desktop end of the spectrum. Once we've got a nice looking design and our website's colour palette, element themes and photography are in place we can think about mocking up a mobile version. Once again, we will pick some dimensions. We'll try and think 'responsively' for our mobile version, making sure the content is the same as the desktop design, however there are common things that need to change. A nav menu doesn't work so well on a mobile device, for example, and it is common to collapse them down in to a simple graphic called a 'burger menu' that a user can click on (tap on!) to expand and see the hidden nav options.

After designing, our website enters the development phase and the website is built with a nice fluid grid structure and images that automatically resize in the aforementioned browser. But how do we implement screen size specific changes like the 'burger menu'? For this we break out a CSS technique called a 'media query'. In our code, we tell the browser to do something only if it is above or below a certain dimension. For practical reasons, it's good to keep 'media queries' to a minimum, so a series of 'break points' are decided upon. A break point is a certain screen size at which we want certain changes to happen so that the website continues to work properly on smaller and smaller devices. The question is, how should these points be decided? One solution is to have a break point at a popular screen dimension, one for tablet and one for mobile, for example. Another solution is to have a break point where ever the site 'breaks' and content starts to look bad or lay on top of each other. The former solution takes us back into 'adaptive' design territory as we are faced with the same task of thinking about just how many screen sizes there are out there. The latter solution is unfocussed and often means lots of break points at points that are not meaningful. This means that they are very site specific and hard to re-use in other places.

It's a difficult one, and the best approach is probably a mix of everything I've spoken about above. Most of all, 'responsiveness' needs to be at the forefront of everyone's mind, from the designers to the developers. A designer should design a page that has content laid out in such a way that it as easy as possible to make responsive. This may require a lot more communication and back and forth between the design and development teams, but in the end, it minimises how many break points a developer needs to use to make the design 'fit' into different spaces. So, like in every walk of life, working together is the answer!

blog

How to Help Prevent Getting Hack on a Yahoo Sized Scale

Google releases its year in search 2016

IO42 having fun unboxing and playing with the Playstation VR

In a small team of employees loosing a member of staff is hard - goodbye to my first employee

IO42 iPhone 7 review

IO42 play No Mans Sky for 42 minutes - 420 second highlights

A small guide for parents who have children playing Pokémon Go and have concerns.

Website designers and Website developers, is there a difference?

Why Working At IO42 Enlightened Me

Getting a Career as a Web Developer

Google removes adverts from the right hand side of the page - Adwords slots become more precious and SEO becomes more important

Data security Tips & how you can protect your business against poor password protection

Responsible Responsive Design

New Year New Start - Or Do You Need To Review Your IT Requirements For You And Your Business?

7 SEO Tips to Bump-Start your website on the Google Rankings

IO42 discuss working with Wordpress

Designing a Career in the Web Industry

Amersham Carnival Poster design by IO42

MOBILEGEDDON - It's Not The End Of The World As We Know It

How much will it cost to have a website built?

The io42.co.uk website development process

Keep your content fresh and relevant, it's a good SEO practice

Twitter can be used to help boost Google rankings

New year, new direction for Maddwebsites.co.uk

No-one can guarantee you the Google top spot in search - not even Google!

SEO and your website - title, description and keywords

SEO (Search Engine Optimisation) Considering Content

How Could Your Website Work Harder for You?