Responsive design is a hot topic in the world of web. Yet, will it ever realise to bring business benefits? My insight at the AtBusiness.com Breakfast Seminar, June 14, 2012. For a responsive site example, have a look at www.frantic.com and scale it down, please! :)

1. INSIGHT
Responsive Web:
Business Benefits or
Not?
Tommi Pelkonen, Strategist
tommip
tommipelkonen
tommi.pelkonen@frantic.com
www.frantic.com

2. TOMMI PELKONEN, Strategist
2010->: Strategist at Frantic
2008-2010: Business Consultant at Finpro
Budapest in ICT/software business
2005-2008: Strategist at Satama Amsterdam
1999-2005: Business Consultant at Satama
Helsinki
1996-1999: Research at the HSE Electronic
Commerce Institute, focus: digital media service
companies
Born 1971, married, daughter
M.Sc. (Econ.): 1999, Helsinki School of
Economics, HSE, International Business, Finance
& Accounting, Information Technology
Lecturer and author of several publications &
articles in the fields digital media,
internationalisation of SMEs and service business
Industrial focus: Media, Telecoms, Financial
sector,
B2B Commerce, Industrial manafacturing
Consulting focus: Strategy, Procesess &
Innovation, Digital opportunities, Business
modelling

5. INSIGHT
Responsive Web:
Business Benefits or Not?
Basics –what is responsive web?
INSIGHT
Think – Design – Tech - challenges
Responsive Web:
Business considerations Business Benefits or
So what – why should you care? Not?
Basics –what is the
responsive web?
Think – Design – Tech - challenges INSIGHT
Responsive
Business considerations Web:
So what – why should you care? Business
Benefits or
Not?
Basics…
Think…
Business…
So what…

6. the Mobile web here to
• In 2011, stay!
smartphone
shipments
surpassed desktop
device shipments.
• The web is
changing and we
need to change
the way we design
and develop for it...

7. In country a.k.a the Nokia-land, too!
5/2012: "
44 % Smartphones, "
6 % tablets!
http://www.tns-gallup.fi/uutiset.php?aid=14815&k=14320!

8. At first, there was a Nokia-dominated mobile web…!

9. We experienced a plethora of amazing"
mobile-driven service innovations.!

10. These led to mobile service harmonisation (to some extent)!

11. And then came iPhone,
the touch & the apps explosion…

12. Now, it all about choosing
between mobile sites or
mobile apps –or is it?
http://www.mdgadvertising.com/blog/wp-content/uploads/2013/06/should-you-build-a-mobile-app-or-mobile-website.png!

13. Responsify yourself?

14. Responsive design is an approach to
web page creation that makes use of
flexible layouts, flexible images and
cascading style sheet media queries. !
!
The goal of responsive design is to
build web pages that detect the
visitor’s screen size and orientation
and change the layout accordingly.!
http://whatis.techtarget.com/definition/responsive-design!

15. The big question: Why wouldn't you want your
website to look great regardless of whether it’s
viewed on a desktop, smartphone, or any other kind
http://responsiveweb.ca! of device?

16. Key design/tech principles
One service fits for Fluid design, flexible Design/think
all devices & grids and scalable
browsers imagery mobile first
Support modern
Use style sheets
browsers Unleash the
(CSS) and media
(rule of thumb 2009 potential of the
queries to the
tech onwards should browser
maximum
work…)
Show only the Recognise the
essential, build the device, place,
extras gradually and context and time –
contextually and then customise

17. Nice – but once again .!
Is there any business relevance in this?!

18. INSIGHT
Responsive Web:
Business Benefits or Not?
Basics –what is responsive web?
INSIGHT
Think – Design – Tech - challenges
Responsive Web:
Business considerations Business Benefits or
So what – why should you care? Not?
Basics –what is the
responsive web?
Think – Design – Tech INSIGHT
Responsive
Business considerations Web:
So what – why should you care? Business
Benefits or
Not?
Basics……
Think…
Business…
So what…

19. CASE 1:
Music listening & entertainment:
Responsive design/tech?
Responsive thinking?
Response to the need/environment
for private listening?

20. CASE 2:
Television & entertainment:
Responsive design/tech?
Responsive thinking?
Response to the need to view
relavant content to oneself?

21. CASE3:
Real life & feedback:
Responsive design/tech?
Responsive thinking?
Response with the
environment and audiences?

22. Three essential themes
in RWD
WHY?! HOW?!
THINKING: TECHNOLOGY:
INNOVATE MAKE IT HAPPEN
DESIGN:
PLAN & GUIDE
WHAT?!
The discussion on RWD has so far been mostly
been focused on design & tech

23. Dimensions for RWD
SET-UP:
Screen size/browser/device/OS –
configuration
CONTEXT: Location/Place
OCCASION: Time/Season
Context and occasion are less used
components for responsive design at the
moment

24. Challenges for
Responsive Solutions
Speed issues Functionality Content
• What will the extra • What do we offer at • What extra levels of
code and scripts each site size content do we offer
needed to do for my category and how? in each of the size
site performance? • How to offer the classes?
• What do hide/show same quality of • How to view and
to keep the load service on mini/ manage different
times fast enough? normal/maxi-screens content elements in
• How to optimise without loosing the different sizes
content & media for essential? • How to make sure
different sizes? • How to design the same content
minimal, but offer works in all the sizes?
upwards scalability?
• What angle should
be taken to older
browser usage?

25. INSIGHT
Responsive Web:
Business Benefits or Not?
Basics –what is responsive web?
INSIGHT
Think – Design – Tech - challenges
Responsive Web:
Business considerations Business Benefits or
So what – why should you care? Not?
Basics –what is the
responsive web?
Think – Design – Tech - challenges INSIGHT
Responsive
Business considerations Web:
So what – why should you care? Business
Benefits or
Not?
Basics……
Think…
Business…
So what…

26. SIMPLE FORMULA
BENEFITS > COSTS
=> FEASIBILITY!

27. Key benefits for RWD
Update once, update all SEO Benefits - traffic
• Less concerns and work on • Inbound links concentrated
updating several different into one site and domain. Less
versions of a website in order domains, less crowling for
to keep the mobile, tablet and Google –better changes to
desktop versions consistent. optimise well and gain traffic
Less systems – less costs Think differently
• One platform, one content • RWD pushes organisation to
approach, less apps, less rethink their web and mobile
testing strategy and approach
• In theory (at least) this should • Brings location & time to the
lead into cost savings thinking context, too.

28. RWD Cost Implications
Additional testing and Content optimisation costs
programming costs for site • Especially images and video
development content may cause extra work
and thus costs
• Roughly min 20-30% more
programming /testing work • How to test and manage this
content process?
Legacy application stiffness Limited usage / costs
• Regardless of fancy RWD for main • In many areas and industries,
content, the actual transactional mobile = responsive approach
and servicing tools most propably demanding usage is still marginal
will not turn responsive easily = – thus may not be worth the
costs can skyrocket fast effort

29. A good business case or not?
Benefits Costs
• Update & content • Increased programming and
management costs decreases testing costs
• System maintenance & • Increases in content
management cost decreases optimisation costs and
• SEO – more traffic to site requirements
• Innovation potential and • Legacy application integration
rethinking of the web/mobile and
strategy • Marginal use times and case
in several industries – eye
candy – vs. real benefits?
There is no absolute answer to the feability
formula in this – trials and tests are needed!

30. USE A PLANNING / THINKING
FRAMEWORK!
Define
Analyse &
Conclude Which services should you Develo How can you develop
develop to fulfil the needs of p services to fit your strategy?
your customers?
How can you
Reach attract new
customers?
RETENTION MARKETING
conversion point conversion point
How can you keep your
How can you convince
Create, customers loyal and
expand your share of their
Nurture CUSTOMER Engage new customers to
manage & wallet? /COMPANY purchase?
Innovate conversion point conversion point
This should be SERVICE SALES
Activate
used regardless Measure: Measure develop
of being & optimise (KPIs) How can you make a sale and
turn a trial into repeated usage?
responsive or
not… !

31. INSIGHT
Responsive Web:
Business Benefits or Not?
Basics –what is responsive web?
INSIGHT
Think – Design – Tech - challenges
Responsive Web:
Business considerations Business Benefits or
So what – why should you care? Not?
Basics –what is the
responsive web?
Think – Design – Tech - challenges INSIGHT
Responsive
Business considerations Web:
So what – why should you care? Business
Benefits or
Not?
Basics……
Think…
Business…
So what…

32. Some hints to proceed
• Test this possiblity and see how you
perform
• Analyse your mobile site usage and
its potential to grow
• Start building/refining your mobile
strategy – sites are becoming
mobilised all over the place
• Pilot on limited areas to learn more
about the potential

33. TEST YOUR SITE - NOW
mattkersley.com/responsive/!
www.ipadpeek.com !
!
You can already see how you site looks on
different screen sizes

34. But does this really matter?
• In web design – there is no silver
bullet!
• Yet, there are good best practices
and it seems the RWD is becoming
one of these
• RWD still in early phases, but can
become something very essential for
all site designs
• It does not harm to be prepared for
the change to come – mobile is here
to stay!

35. www.frantic.com
THANK YOU!