3 January 2013
Over the past few of years Responsive web design has been quite a hot topic in the digital community that we rub shoulders with and now it is becoming more mainsteam. As more of us rush to buy tablets and the latest smartphones there will be a shift in how we access the internet, not just at our desks, but on the sofa and on the move. But what does this mean for your own website? Could your site benefit from being Responsive?
“Day by day, the number of devices, platforms, and browsers that need to work with your site grows. Responsive web design represents a fundamental shift in how we’ll build websites for the decade to come.” - Jeffrey Veen
Before we weigh up the benefits and considerations of going 'responsive', let's explain what we mean in simple terms, a Responsive web design "responds to its environment" to figure out what resolution of device (like a smartphone, or a tablet or the desktop) it's being served on. If you're viewing this article on a desktop browser, for example, try making your browser window smaller. The images and content column will shrink, then the sidebar will disappear altogether. On our homepage, you'll see the layout shrink from four columns under the main image, to a singular column of content, in four breakpoints. As you drag the corner of your browser window to resize it, (if you are reading this on your desktop that is!) you will see the site shrink until it reaches a breakpoint, and then the layout of the site will reload differently to better suit that smaller screen size and new browser dimensions. You should see the layout magically adjust itself to more comfortably fit the new width of the browser, even if you make the page as narrow as the resolution of a mobile phone.
Responsive design usually means serving the same content from a single Content Managed System (CMS), running on a single web address (URL), but giving the device instructions via style sheets (CSS) on how to display it appropriately.
If a website is built ONLY for the desktop and then loaded on to a mobile screen it shrinks and fits into the screen. We are all familiar with the 'tiny looking' sites. If your site is more than two years old the chances are it's a desktop focussed website. It may be that it is 'fluid' meaning that as you expand the screen and text lines just get longer, and thing appear to flow, but there is no real scaling, or collapsing in content that is still a desktop site. Browsing a site like this on a smartphone takes a lot of time, zooming in and zooming out to find relevant information, which can be really frustrating, but even worse if you have 'fat fingers'. However we have found some people who feel 'they know where they are' with this current approach, and are happy 'pinching' across their iPhone to enlarge the website to be able to read it, and would feel lost if it were truly repsonsive.
Maintaining a creative, forward-thinking, innovative edge will probably be part of your luxury and premium brand positioning. As such, deploying the lastest technology will may well be expected, and to manage the expectations of your customers should be given serious consideration. A Responsive site will offer an elegant, future-proofed solution against the growing number and size of mobile devices. A Responsive website does offer a seamless user experience across all devices.
The cost benefit for delivering a site for mobile users can only be considered after first considering your own audience needs, using your website analytics (such as Google Analytics or others) to discover what kind of devices and screen sizes visitors to your site are currently using (mobile, tablet or desktop) and your intended audience with their access behaviours. So are you dealing primarily with B2C or B2B customers? With many prestigious home and interior companies that design and manufacturer products there is a the specifier or the commercial buyer to consider, most of these are deskbound, or at least on the road with a laptop. This may mean the priority for mobile is not the major factor when a web development is planned. However those who sell direct to the consumer such as Interior designers, with portfolios and services or those creators of beautiful homewares and furniture may find their customers are more mobile.
There could be a middle way for some, those that define their users as desktop and tablet only, but remove smartphone mobile sizes from the mix completely, opting instead to apply a dedicated mobile site instead. A good example of this is high-end luxury design firm Candy & Candy who deploy graceful swipe and tap actions when viewing their site, beautiful scaling images when viewing both landscape and portrait options on the iPad. They have opted for a dedicated mobile version, rather than fully Responsive site across all browsers.
With Responsive design serving up the same image for a 'desktop' site as it will for the mobile device we have to be clear about where the compromise falls. We have to also remember there is another trend towards larger desktop screens and in parallel to that, a trend towards full screen images, and large backgrounds for those desktop sites; but when translated across to mobile devices, the impact those big images made on the big screen are lost and the same file that created the crisp large desktop image has to be transferred to the mobile—is a large file. If using 3G, without WiFi this could mean that with a very complex page with many images = lots of data and therefore a large file that takes a long time to download on the smartphone. You have to hope for very patient mobile visitor! The design must be mindful of both the mobile user and the large screen desktop visitor. The compromise comes in the form of a drop in quality of those large images when viewed on the desktop, or additional coding to serve up smaller lighter image files.
A Responsive site will never be as fast as a dedicated mobile site because it is more complex, you can’t escape this fact. It is a balancing act, and performance is just one factor.
Put simply with only a single responsive site, there is only one website to update. However there is a greater need for a Content Strategy when planning for Responsive design. Content prioritization is always the first step in responsive design. You should analyze each piece of content by asking: What information does the user need on their smartphone, tablet and desktop? How will they use each device to access the information?
‘Mobile first’, is the buzzword that we need to bear in mind for the build phase. This means designing and building the content framework for the mobile first. Something we are still getting out heads round! From this simple position of what we view on the mobile screen we can add in the complexity as we scale up to the larger desktop designs. For those businesses commissioning new Responsive websites, this will mean managing your expections from the traditional 'look and feel' you will have received as part of the old web design phase, to understanding the simplicity required of the mobile and tablet designs in the prototype design stage before ever seeing the desktop design stage.
Having a Responsive website design can benefit your SEO because of its ability to maintain the links pointing to the desktop domain—the single URL. This aproach is supported from search engine giant's like Google and Bing. They both recommend that businesses use the 'One URL per content' strategy to avoid ‘under performing results'. This means customers can find your business faster and more efficiently.
Responsive design does take more time and effort to create and plan for than if no mobile experience is expected at all. Especially if we are now having to consider multiple breakpoints to be designed across all sections of the website. Where once a simple site perhaps demanded three page templates or a more complex site where ten or more page templates were required, now with the breakpoint multiplier (mimimum of three to a maximum of six as described at the beginning of this article) we are at least trebling the design effort. Already highlighted above are the benefits to on-going content management on a single site, benefits of SEO and also more efficient implementations in the future, eliminating multiple codebases and Web content management systems, and a streamlined analytics process can also help justify the ROI of a Responsive approach.
The we admire businesses used above to highlight this article.
Four simple and beautiful Responsive examples
So will you be attempting to keep ahead of the trend before it truly becomes mainstream? And if you have a Responsive site we would love to hear from you as we look to showcase some of the best Responsive Design in the Premium Home and Luxury lifestyle sector soon.