1. www.coremedia.com
Mobile First
Taming the device zoo and
coping with change

2. © CoreMedia | 10 April 2014 | 2© CoreMedia AG | 10 April 2014 | 2
Mobile First
 Why is Mobile First
Important?
 What are the parts of a
Mobile First web site?
 How can I leverage existing
investments into my site?
 CoreMedia Mobile First Demo

3. © CoreMedia | 10 April 2014 | 3© CoreMedia AG | 10 April 2014 | 3
World-Wide Broadband Subscriptions
422
million
460
million
895
million
164
million
168
million
303
million
Mobile Broadband Subscriptions Fixed Line Broadband Subscriptions
Source: mobithinking.com, 2013

4. © CoreMedia | 10 April 2014 | 4© CoreMedia AG | 10 April 2014 | 4
Mobile Broadband Outweighs Fixed Broadband
3 : 1

5. © CoreMedia | 10 April 2014 | 5© CoreMedia AG | 10 April 2014 | 5
German Mobile Usage
 63 million active
cell phones
 Average growth at 33%
in 4 months
 Over 21% of the UMUs
in this list are delivered
by CoreMedia customers
Source: AGOF 2013-III

6. © CoreMedia | 10 April 2014 | 6© CoreMedia AG | 10 April 2014 | 6
The Internet is Everywhere

7. © CoreMedia | 10 April 2014 | 7© CoreMedia AG | 10 April 2014 | 7
Usage Patterns
Source: Mobify

8. © CoreMedia | 10 April 2014 | 8© CoreMedia AG | 10 April 2014 | 8
Usage Patterns
Source: Mobify

9. © CoreMedia | 10 April 2014 | 9© CoreMedia AG | 10 April 2014 | 9
Coping Technique: Graceful Degradation
 The full desktop site is rendered and sent to the
mobile devices
 Depending on the device capabilities, features are disabled
 Images are re-sized by the browser

10. © CoreMedia | 10 April 2014 | 10© CoreMedia AG | 10 April 2014 | 10
Graceful Degradation – The Pitfall
 Average Page Weight between 2010 and 2014 has increased
significantly
 Sending a full desktop site to a mobile device makes a slow
mobile experience
Source: httparchive.org
The average page weight has
doubled in the past three years
(735KB vs 1.7MB)

11. © CoreMedia | 10 April 2014 | 11© CoreMedia AG | 10 April 2014 | 11
Coping Technique: Progressive Enhancement
 Focus on most vital functionality on smaller form factory
 Add functionality based on device capabilities / screen size
 Addresses the page weight problem
 Take advantage of new technologies and interaction paradigms

12. © CoreMedia | 10 April 2014 | 12© CoreMedia AG | 10 April 2014 | 12
2010 – The Year Google went Mobile-First
What’s really important right now is to get the mobile architecture
right. Mobile will ultimately be the way you provision most of your
services. The way I like to put it is, the answer should always be
mobile first. You should always put your best team and your best
app on your mobile app.
- Eric Schmidt, 2010

13. © CoreMedia | 10 April 2014 | 13© CoreMedia AG | 10 April 2014 | 13
Embracing Chance
“The control which designers know in the print
medium, and often desire in the web medium, is
simply a function of the limitation of the printed page.
We should embrace the fact that the web doesn’t have
the same constraints, and design for this flexibility.
But first, we must 'accept the ebb and flow of things.”
John Allsopp, “A Dao of Web Design”

14. © CoreMedia | 10 April 2014 | 14© CoreMedia AG | 10 April 2014 | 14
Meet Responsive Design
 Embrace the that print and
digital layouts are different
 Create layouts (CSS styles)
that dynamically adapt
themselves to the form
factor
 Native query capabilities
introduced in CSS 2.1 –
Responsive happens on
the front-end
 Design based on
flexible/fluid grids

15. © CoreMedia | 10 April 2014 | 15© CoreMedia AG | 10 April 2014 | 15
And what about Apps?
 Most phone time is
spent in apps
 … but mostly for gaming
and social
 … apps require a
download
 … yet they allow access
to hardware and work
off-line
 Hybrid apps allow
leveraging responsive
sites in app

16. © CoreMedia | 10 April 2014 | 16© CoreMedia AG | 10 April 2014 | 16
Mobile First – The Right components
 Focus on what’s important – design for the mobile form factor
first
 User Experience and Wireframes
 Visual Design
 Content Strategy
 Implementation
 Responsive Design: utilize responsive design to build flexible,
adaptable grid layouts
 Adaptive Design: Utilize adaptive design to augment
responsive design with more dynamic behavior

17. © CoreMedia | 10 April 2014 | 17© CoreMedia AG | 10 April 2014 | 17
Mobilizing Your Site: Separate Sites
Pros
 Create a fully mobile-first
responsive site for all touch
devices
 Desktop site remains
unaffected
Cons
 Maintenance of duplicate
sites / code
 Disjoint user experiences
don’t cater to omni-channel
audience
 Tend to drift apart in
functionality over time
 Why keep the desktop site
around?

18. © CoreMedia | 10 April 2014 | 18© CoreMedia AG | 10 April 2014 | 18
Mobilizing Your Site: Responsive Retrofit
Pros
 Leverage your existing
codebase
 Separate CSS on top of
existing markup
 Reasonable development cost
 Utilize services such as
sevenval, Bmobilized, or
Mobify
Cons
 Risk – the typical desktop
markup doesn’t lend itself to
mobile cases
 Changes to desktop HTML
may have adverse affects on
other form factors
 Responsive image handling
not easily accommodated
 User Experience not
optimized for mobile, just
retrofitted

19. © CoreMedia | 10 April 2014 | 19© CoreMedia AG | 10 April 2014 | 19
Mobilizing Your Site: Mobile-First, Responsive
Rebuild
Pros
 Consistent user experience
across all channels
 Supports a wide range of
devices from phones to TVs
 Future-friendly, hip, current
technology stack
 Fully leverage the CoreMedia
Blueprint
Cons
 Re-write of the presentation
layer requires planning, new
user experience, and
technical re-work
 Higher development cost

20. © CoreMedia | 10 April 2014 | 20© CoreMedia AG | 10 April 2014 | 20
Mobile First and Responsive Design
Accelerated by CoreMedia
DEMO

21. www.coremedia.com© CoreMedia | 11. April 2014 | 21
Singapore
asia-info@coremedia.com
tel +65.6562.8866
Hamburg
info@coremedia.com
tel +49.40.32 55 87.0
San Francisco
usa-info@coremedia.com
tel +1.415.371.0400
London
uk-info@coremedia.com
tel +44.207.849.3317
Washington
info@coremedia.com
tel +1.703.945.1079