What does “responsive” really mean?

In speaking with numerous people recently, it is clear than many do not understand the meaning of the term “responsive design” as applied to a web presence. Resizing and responsive are two entirely different animals. Let me explain.

A responsive site is one which responds to the width of the browser.

That does not mean that the site simply shrinks to a miniaturised version, but that it dynamically reformats to present the most appropriate (and readable) content.

The growth of Mobile

When you last used public transport, went to a concert or were in a public place, what did most people hold in their hands?

No one will deny that handheld devices, including tablets and smartphones, have transformed the marketplace. Five times more smartphones were sold globally in 2012 than desktop computers1. The time spent connected to the Internet via handhelds is increasing as time via desktops decreases2, and increasing numbers are “second screening”3 on a handheld while watching television.

Yet, because 99% of desktop and laptop users are viewing a screen of 1024 x 768 pixels and above4, most web developers continue to design for that size, or in a fluid design which scales up (and only up) from that width, entirely disregarding mobile.

Mobile sites

Enterprises which recognise the need to serve different format (and sometimes tailor content and functionality) to their customers, are developing ‘mobile’ sites, custom-designed for smartphones and handheld devices, and utilising a separate content management system (CMS)5. This is necessary if the functionality of your stakeholder interaction demands it.

However, for the vast majority of brands, there is a far more efficient approach than either of these two extremes.

Responsive design

Developing a web presence in a responsive design, ensures that the site will resize (up or down) to the width of the browser and present the navigation in a highly legible, pull-down-menu format.

The best responsive sites will respond to the changing width of the screen whether caused by device orientation (on a handheld) or browser resizing (on a desktop or laptop).

Panels containing images and text will reformat to horizontal or vertical, as appropriate, and the number of panels will vary according to width (e.g. Pinterest)6. Sometimes the images themselves will resize (e.g. YouTube)7.

That all of this can be achieved within a single CMS is a huge commercial benefit, generating high ROI both from the lower initial investment and the reduced resources required for ongoing managment. There is no need for dual input when one CMS can manage sites for all desktop and mobile platforms.

If the platform used is as well-tested and ubiquitous as WordPress, even the SEO will be exceptionally efficient!

Navigation

The horizontal main nav and pulldown menus on the desktop, transform into a bold, highly legible single pulldown menu on handheld devices.

if-3_nav_d if-3_nav_h

Image panels

Large images and text are progressively scaled ..

if-3_p1

 

to conform with available screen width on handheld devices

if-3_p2 if-3_p3 if-3_p4

Image and text panels

Where text and images are connected, multiple vertical columns will convert ..

if-3_C3

to horizontal columns on a tablet and vertically stacked panels on a mobile phone.

if-3_C2 if-3_C1

Footer nav

On a desktop, laptop or landscape tablet, footer nav appears as multiple columns, but

comsec_f3

 

.. transforms into a single vertical column on a portrait tablet or smartphone.

comsec_f1

Digital Tsunami can help you to prepare a strategy and present your brand effectively across all online and offline media. Contact Digital Tsunami today.

Sources:
1.i Australian Financial Review (AFR) report on International Data Corporation (IDC) data of 2012 hardware shipments: 722 million smartphones, 148.4 million desktop PCs, 128 million tablets.
1.ii Google MobileThinking
2.i Nielsen’s “Australian Multi-screen Report Quarter 4 2012”
“Demographic variation is evident. The largest segment of each age group has a distinct preference for the medium on which they watch video. 50-64 yo watch television (24%), 35-49 yo watch the Internet (28%) and 25-34 yo watch on a mobile phone (37%)
2.ii BusinessWire ‘time spent connected by device’
2.iii Connected Intelligence ‘in-home Internet connected devices’
3.i Deloitte ‘second screening’
3.ii GigaOm “How new devices, networks, and consumer habits will change the web experience”
“Mobilizing web design is a catch-22; adjusting to design challenges is costly, but not adjusting is equally costly, because a poor mobile web experience results in a loss of revenue.”
3.iii GigaOm Up to the end of November 2011, camera-equipped smartphones took 27% of photos, a significant increase from 17% in 2010. For many people, smartphones have replaced Point-and-shoot cameras.
4 w3schools ‘browser screen size’
5 ThinkWithGoogle ‘Mobile Planet interactive statistics’
6 Pinterest
7 YouTube
8 comsec-offshore.com
9 if-3
10 jennadearnessdark.com

From Our Clients

Quotation Mark

(We) took a fairly substantial audit of .. sophisticated sites both technically and creatively .. Out of six prominent designers, Digital Tsunami stood out.

The quality of the images, the sophisticated management of text .. together with smooth animations makes (our) website of very high calibre.

I would personally rate this site in the top 2 percent of world wide web sites today.

Paul McCloskey
President
Dural, NSW, Australia
Laservision
Quotation Mark

The team at Digital Tsunami was incredibly responsive, delivering a solution well ahead of deadline. Their technical knowledge was exceptional, they were innovative, and they were very meticulous. What's more, they understood my business and technical requirements and translated them into a user-friendly, refined, professional site which is conceptually simple and cohesive.

Glenn Murray
Director
Sydney, NSW, Australia
Divine Write
Quotation Mark

I am very happy with my new website from Digital Tsunami.

Not only did they design it, they also created my logo, and gave me valuable advice and professional feedback.

Through Digital Tsunami, my website now looks professional, easy to navigate and (through my customised CMS), easy to update.

Thomas Rydell
Composer
Eskilstuna, Sweden
Quotation Mark

We were very happy with the development process and the outcome. The objectives have all been achieved, in terms of usability and ease of use in updating the site. You definitely nailed both of these.

Rupert Blatch
National Sales & Marketing Manager
Port Kembla, NSW, Australia
Quotation Mark

The services provided included the registration of our domain name, establishment of our email accounts, and development & hosting of our website, were all executed rapidly and effectively. We also appreciate the service of upgrading our list of 150 shelf company names (in Chinese characters and English) every 2 weeks.

We valued the high level of creative design provided by Digital Tsunami, both for the website and the corporate identity.

Anthony Chiu
Managing Director
Hong Kong
error: We appreciate that you value our content. You are welcome to link to this page, but content is copyright protected.