Your Business & 'Responsive' Web Design - Part 2

Part 2 – How does ‘responsive’ design affect me and my business?

In last week's post, we took a look at how our methods of browsing the Internet have diversified due to increase in different browsing devices such as smart-phones and tablets.

We saw how in response to the diversities that arise from the use of these different devices, web designers and developers are now building ‘responsive’ websites, which adapt the user's browsing experience depending on what browsing device they are using.

In this example we used last week, we can see how the website layout and menu changes depending upon what size device is used to view it:

This week's post is going to look at how responsive design will possibly affect you as a business; is it going to cost extra? How does it change how a website is built? Is there anything you can do to help and, probably most importantly, do you actually need a responsive site?

First and foremost, what's it going to cost?

When speaking to other businesses about web design and development techniques, cost is always one of the key discussion points, and all businesses have a limit to their budget when it comes to marketing (websites or otherwise). So how much is a responsive designed website going to cost you?

Unfortunately, there is no straightforward answer to this one. Different development agencies charge different amounts, and any decent agency will price your web build project dependant on your wants and needs. Some projects may require only an iPhone version of the site, whilst others may need specific layouts for several different phones and tablets.

The one thing that you can be sure of is that a good 'responsive' website will cost you more than a ‘static’ desktop site. A good responsive design mock-up will include layouts for different screen sizes, and so take longer to produce, and actually developing a responsive site requires more coding than a static site (not to mention the time spent then cross checking the site across different devices). This extra time is inevitably going to lead to higher design/development costs.

However, it isn't necessarily going to break the bank. Many web agencies now include responsive design and development as part of their work-flow by default, reducing the overall project time. Speak to your developer/designer before the project begins, find out if and how they work from a responsive point of view, and make sure that they know you wish to pursue a responsive build from the get go..

..and this brings me on to my next point…

How does it change how my website is built, and what can I do to help?

Responsive design & development adds a new dimension to how websites are put together, however, there are a few things you can do to help.

1. Let your designer know from the start if you are wanting to have a responsive website.

This sounds obvious, but I wont be the first developer to have thought I had finished a website, only for the client to turn round and say ‘oh yes, we forgot to mention at the start that we actually needed the site to work on X device(s)’.

It is much easier to integrate responsive ideas into your website from the beginning of a project, than it is to build a whole website and then add responsive functionality to it afterwards. By letting your designer/developer know from the start that you want the site to adapt to mobile and/or tablet devices, you are not only saving yourself money by keeping the overall project time down, but also keeping the person working on your site happier as they know what to expect from the start.

2. Content is key

I have lost track of the amount of times I have been in the middle of design consultations with clients, and when I ask them for the content for their site, they say ‘Well we’d like to see the design first, then we can add the content’. This is thinking about your website in the wrong way. Yes, the colours used and the layout will affect how a website is perceived, and give certain impressions of your business, but the content is what SELLS your product or business. The design should be based on maximising the impact of this content, and without providing your designer with content, this will be difficult to do. So before you sit down with a designer, think about what content you want on the site. Do you have any slogans or calls to action? Are there any particular images you think would benefit the site when it comes to drawing a visitor in, and how are these content items to be prioritised?

This last point is key when thinking about responsive web design. Smaller screen sizes can only show a limited amount of content, and so you want to prioritise the content you think will do the job best when it comes to pulling in site visitors.

As Brad Frost points out in his excellent post on mobile oriented design: “At the end of the day, devices will come and go and technological trends will wax and wane, but content, business goals and user goals remain”

If we forget websites for a minute (ye gods!) and think about this from a print marketing point of view. Let's say you are getting business cards and flyers printed up. Both of these will be essentially conveying the same message, however the different amounts of space they allow changes what goes onto them. With the business card, most likely you’ll have your logo, one call to action or slogan, and your contact details. A flyer will use these same elements, and prioritise them on the flyer, but then maybe add an image or two, and some extra information about your services.

Responsive website design can be seen from a similar viewpoint, and, in the same way that we looked at adding the flyer elements on top of what was already present on our business card, it is now becoming more prevalent to think of web design from a ‘mobile-first’ point of view.

Mobile First?

By this, what we mean is to design your website for a mobile/smart-phone size screen first, and then work up from there. This allows you to prioritise your content so that your visitors are drawn in, but their experience of the website will then grow if they view the site on larger devices. The mobile design may include your logo, your top prioritised ‘selling point’ or call to action, and maybe a short amount of information. Once the key points of the mobile design are sorted, you can then move onto a larger ‘canvas’ with both tablet and desktop designs, adding content as you increase screen size to suit the priorities you have already set out.

By providing your designer with good content, and an idea of how you would like this content to be prioritised, you can greatly improve not only the design itself, but also the speed the work gets done at, as well as the relationship between you and your designer (I love it when clients show an active interest, and discussing how your content will be used is a great way to do this).

A forkin’ great example

Take a look at how the Fork CMS website changes on different devices, and how it is designed so that the priority content is always on show:

On all three version, the navigation sits at the top, where the user can easily reach it. The mobile site then opens with the slogan ‘Fork is an open source CMS that will rock your world’, before listing the key selling points.

The tablet view also opens with the same slogan and selling points, but due to the extra space adds icons to the selling points to help anchor them. The extra space also allows for more content under ‘extra features’.

The desktop version of the site again uses the slogan at the top, but instead of going straight onto the selling points, instead brings in a Poseidon graphic (ties in the fork), and uses actual screenshots to show off the product. These screenshots would be too small to use on a phone, or even a tablet, but they work fine on the desktop version. There is also the added functionality of a download button (we wouldn't want to be downloading large software packages on our phone or tablet, but once we get to the desktop version, the need for downloading the product becomes higher priority than the selling points).

By starting from the mobile first, they’ve covered their priority content well, and then adapted this as screen size increases.

3. Give your developer feedback (but don’t be too harsh!)

Feedback about your website is always key, as developers, we want to know that our job has been done well, and as our clients, you want to have the site work and look as you wanted.

Once your site is nearing the ‘ready-to-go’ stage of development, make sure to actively check your site on as many devices as you can, and give your developer feedback on your findings. Although many developers may be able to check several devices (and should be doing this as part of your build), chances are they aren't going to be able to check ALL of them, and even if they are, a fresh pair of eyes never hurts.

It is also important to be aware that any new devices will undoubtedly lead to even more diversity in browsing than there was when your web build started/finished. Until this new technology is released, there is no way for a developer to guarantee 100% that the site will work perfectly on it, so don’t be surprised if your new iPhone 3 displays the site differently to your old iPhone 2. Just make sure to raise any issues to your developer - most will be perfectly happy to help.

So it's going to cost me more, and mean I’m involved in the build more? Do I actually need to be doing all this responsive stuff?

The answer to whether or not you need a responsive website is really the key factor that we’ve been trying to uncover along these last 2 posts.

As a web designer/developer, I love responsive websites, and I'll happily sit resizing browser windows to see how they work.

However most of your site visitors or clients probably won't be web developers. On a decent responsive site, visitors won't even KNOW that they are on a responsive site. However what they will know ‘consciously or subconsciously’ is whether the site is easy to use, or whether it is drawing them in.

Depending what studies you read, an estimate of up to 50% of web browsing is now being done on mobile and tablet devices. This for me seems more than enough reason for businesses to at least strongly consider having a responsive website.

I was recently at a business conference at the SECC in Glasgow. Every time a business card was handed out, the first thing a lot of people did was go to that company's website using their smart-phone. They say first impressions count the most, and if responsive design is going to help you improve that first impression, surely it's worth considering.

Another good point here is that if other businesses are starting to make websites responsive, and this becomes the norm that mobile users expect, then your customers will be expecting a good mobile browsing experience from you.They will most likely be put off by any websites that don't fulfill their expectations.

Of course, the last thing I want to suggest to you is to blindly follow trends. Your target audience is still THE key factor when making any business decisions. New technology, such as smart-phones and tablets, have much higher usage trends amongst younger audiences. So if your business is selling life insurance to over 60’s, a responsive site may well not be needed at all. However if you've just opened a trendy new coffee shop and are looking to attract all the local teenagers, a great mobile ready site could well find you with a line of coffee hungry kids at your door.

Phew!

So there we go… ‘responsive design’, ‘browsing diversities’,’ content prioritisation’, ‘mobile first design’… Hopefully throughout these two posts, Ive demystified these terms a little for you, and broadened your understanding of this current trend in web development. They are definitely important points for your business to consider from a marketing point of view, and although they may not suit every business just now, with further technological development and the continuation of trends towards mobile browsing, I can only see these issues becoming more important over the next few years.