Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
www.coremedia.com
Mobile First
Taming the device zoo and
coping with change
© CoreMedia | 10 April 2014 | 2© CoreMedia AG | 10 April 2014 | 2
Mobile First
 Why is Mobile First
Important?
 What are...
© CoreMedia | 10 April 2014 | 3© CoreMedia AG | 10 April 2014 | 3
World-Wide Broadband Subscriptions
422
million
460
milli...
© CoreMedia | 10 April 2014 | 4© CoreMedia AG | 10 April 2014 | 4
Mobile Broadband Outweighs Fixed Broadband
3 : 1
© CoreMedia | 10 April 2014 | 5© CoreMedia AG | 10 April 2014 | 5
German Mobile Usage
 63 million active
cell phones
 Av...
© CoreMedia | 10 April 2014 | 6© CoreMedia AG | 10 April 2014 | 6
The Internet is Everywhere
© CoreMedia | 10 April 2014 | 7© CoreMedia AG | 10 April 2014 | 7
Usage Patterns
Source: Mobify
© CoreMedia | 10 April 2014 | 8© CoreMedia AG | 10 April 2014 | 8
Usage Patterns
Source: Mobify
© CoreMedia | 10 April 2014 | 9© CoreMedia AG | 10 April 2014 | 9
Coping Technique: Graceful Degradation
 The full deskto...
© CoreMedia | 10 April 2014 | 10© CoreMedia AG | 10 April 2014 | 10
Graceful Degradation – The Pitfall
 Average Page Weig...
© CoreMedia | 10 April 2014 | 11© CoreMedia AG | 10 April 2014 | 11
Coping Technique: Progressive Enhancement
 Focus on m...
© CoreMedia | 10 April 2014 | 12© CoreMedia AG | 10 April 2014 | 12
2010 – The Year Google went Mobile-First
What’s really...
© CoreMedia | 10 April 2014 | 13© CoreMedia AG | 10 April 2014 | 13
Embracing Chance
“The control which designers know in ...
© CoreMedia | 10 April 2014 | 14© CoreMedia AG | 10 April 2014 | 14
Meet Responsive Design
 Embrace the that print and
di...
© CoreMedia | 10 April 2014 | 15© CoreMedia AG | 10 April 2014 | 15
And what about Apps?
 Most phone time is
spent in app...
© CoreMedia | 10 April 2014 | 16© CoreMedia AG | 10 April 2014 | 16
Mobile First – The Right components
 Focus on what’s ...
© CoreMedia | 10 April 2014 | 17© CoreMedia AG | 10 April 2014 | 17
Mobilizing Your Site: Separate Sites
Pros
 Create a f...
© CoreMedia | 10 April 2014 | 18© CoreMedia AG | 10 April 2014 | 18
Mobilizing Your Site: Responsive Retrofit
Pros
 Lever...
© CoreMedia | 10 April 2014 | 19© CoreMedia AG | 10 April 2014 | 19
Mobilizing Your Site: Mobile-First, Responsive
Rebuild...
© CoreMedia | 10 April 2014 | 20© CoreMedia AG | 10 April 2014 | 20
Mobile First and Responsive Design
Accelerated by Core...
www.coremedia.com© CoreMedia | 11. April 2014 | 21
Singapore
asia-info@coremedia.com
tel +65.6562.8866
Hamburg
info@coreme...
Upcoming SlideShare
Loading in …5
×

CoreMedia User Summit 2014 - Mobile First

545 views

Published on

Published in: Technology
  • Be the first to comment

CoreMedia User Summit 2014 - Mobile First

  1. 1. www.coremedia.com Mobile First Taming the device zoo and coping with change
  2. 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. 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. 4. © CoreMedia | 10 April 2014 | 4© CoreMedia AG | 10 April 2014 | 4 Mobile Broadband Outweighs Fixed Broadband 3 : 1
  5. 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. 6. © CoreMedia | 10 April 2014 | 6© CoreMedia AG | 10 April 2014 | 6 The Internet is Everywhere
  7. 7. © CoreMedia | 10 April 2014 | 7© CoreMedia AG | 10 April 2014 | 7 Usage Patterns Source: Mobify
  8. 8. © CoreMedia | 10 April 2014 | 8© CoreMedia AG | 10 April 2014 | 8 Usage Patterns Source: Mobify
  9. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 20. © CoreMedia | 10 April 2014 | 20© CoreMedia AG | 10 April 2014 | 20 Mobile First and Responsive Design Accelerated by CoreMedia DEMO
  21. 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

×