CoreMedia User Summit 2014 - Mobile First

www.coremedia.com

Mobile FirstTaming 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 the parts of a Mobile First web site?

How can I leverage existing investments into my site?

CoreMedia Mobile First Demo


World-Wide Broadband Subscriptions

422 million

460 million 895

million

164million

168million

303million

Mobile Broadband Subscriptions Fixed Line Broadband Subscriptions

Source: mobithinking.com, 2013


Mobile Broadband Outweighs Fixed Broadband

3 : 1


German Mobile Usage

63 million activecell 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


The Internet is Everywhere


Usage Patterns

Source: Mobify


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


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)


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


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


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”


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


And what about Apps?

Most phone time isspent 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 responsivesites in app


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


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?


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


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


Mobile First and Responsive DesignAccelerated by CoreMedia

DEMO

www.coremedia.com© CoreMedia | 7. April 2023 | 21

[email protected] +65.6562.8866

[email protected] +49.40.32 55 87.0

San [email protected] +1.415.371.0400

[email protected] +44.207.849.3317

[email protected] +1.703.945.1079

CoreMedia User Summit 2014 - Mobile First

Technology

Transcript of CoreMedia User Summit 2014 - Mobile First