Back to all articlesA responsive website is vital in today’s fast paced, competitive marketplace. Users must be able to access your website and information quickly and succinctly, no matter where they are or what device they are using.
Someone viewing your website or competition landing page on their mobile will probably be ‘out and about’. They need to quickly find what they’re looking for without having to zoom in/out or use the site as if they were chillaxing at home on their desktop. Alternatively, it might be something as simple as having multiple browser windows open at home, or in the office; wouldn’t it be great if no matter what the width of the window, there was no need for horizontal scrolling.
The question is, how does your website respond to different devices and situations?
The answer is, responsive design.
Responsive websites will give the best experience for each device (and therefore situation) it’s viewed on.
What is responsive design?
Responsive websites respond to their environment. (Can I just add a note here to say that everything online is a website of some sort. A landing page, microsite, blog, they’re all websites). The website layout responds to the screen size, device type/orientation, i.e. portrait or landscape on smartphones and tablet devices, giving the optimal user experience.
Here comes the science bit
Through fluid grids, flexible images and the use of ‘Media Queries’ we can set breakpoints which switch to different style sheets delivering the best layout. This ensures people can read the content and operate the website with ease, specific to their device and situation.
Responsive content
We can also consider the content that is delivered on differing screen sizes, as users have varying requirements on different devices. For example, users do not want to read volumes of content on their smartphone, they want to get to specific information quickly.
The real benefit here for you the website owner, brand or marketing manager, is that by implementing a responsive layout you utilise the same content and code, meaning less
time is needed for maintenance and updating content.
It also future-proofs your website on new devices to the market, again saving time and cost.
In short a responsive website will:
- Give a different look & feel for mobile, tablet or desktop visitors
- Adapt to fit the screen size it is viewed on
- Display different content for mobile devices if required
- Expand or contract when the screen size is adjusted
Is responsive design always right?
Not every time. You may well need a standalone mobile version of your website. E-commerce sites are good example of this. The point is to always consider the needs of your target audience and how they may be interacting with your website. At AMA we don’t automatically say you must have a responsive website. First we apply a mobile first approach to design to ascertain the correct route. This may sound different to the norm of building a desktop version first, however we have found it to be the most successful and best way to get that all important return on investment for our clients.
A mobile first approach to design
In the past mobile layouts were something of an afterthought. Many people designed for desktop and then adapted for mobile. The problem with this approach is that large images were being used and other elements were not given enough consideration on smaller screens, equating to a minimal benefit in terms of experience.
A mobile first approach to design means you start with the baseline, considering small screen sizes, the portable fact that can come with poor network activity. Users tend to be on the move and don’t have the ability to focus.
Taking all these issues into account the need for simplicity and prioritising things that really matter is key. This is the essence of what makes your content work.
The other advantage to tackling the design from a mobile first approach is the capabilities that smartphones have and being able to take full advantage of these. Smart phones have many capabilities that desktop computers don’t have, for example, they can pinpoint your location, via GPS, to within 10 metres. They also know the direction you’re facing, the direction you’re moving and how fast you are moving, the list goes on. Just by these few points you can begin to see the advantage of thinking ‘mobile first’.
Example
Have a look at our own website, weareama.com
If you open the website by clicking the link on your desktop computer, and drag the right
hand edge of your browser towards the left, you will notice how the website reacts. The
content adapts to the browser/device size, ensuring that there is no reduction in copy size,
making for an effortless experience.
When viewing the website on a smartphone, you will be able to see how the website adapts
for that device type. No “pinching” and “zooming” is required. Also, the content displayed on this device type (smartphone) can been optimised making for a simpler targeted
experience.
Turn the smartphone portrait and then to landscape. Whatever the viewing angle, the content and website itself always gives the best viewing experience.