Responsive design and mobile

CONFIDENTIAL & PROPRIETARYCONFIDENTIAL & PROPRIETARYCONFIDENTIAL & PROPRIETARY

Responsive DesignSolving the biggest small-website issue

CONFIDENTIAL & PROPRIETARYCONFIDENTIAL & PROPRIETARY

Responsive Design

2

I. What it is and why it’s important

II. The Building Blocks

III. The Problems

IV. Some Solutions

CONFIDENTIAL & PROPRIETARYCONFIDENTIAL & PROPRIETARY 3

Mobile has swallowed the traditional digital medium

Media Queries

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 320px)" href=“iPhonePortrait.css" />

<link href="css/ipadL.css" rel="stylesheet" media="only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape)">

The query contains two components:

a media type, typically screen, though it could work for print and other mediums

query enclosed within parentheses, containing a particular media feature (max-device-width) to inspect, followed by the target value (320px).

See http://lee.andron.com/j for a set of examples targeting iPhone, iPad and Desktop

http://lee.andron.com/j


What is Responsive Design?

Website DesignResponding to the user’senvironment

Standards compliant, Makes the most of latest technology, Semantically correct

Leverages fluid layouts and flexible grids

http://www.alistapart.com/articles/outsidethegrid for sanity

http://www.alistapart.com/articles/outsidethegrid

http://www.alistapart.com/articles/outsidethegrid


Leverages the latest technology

A collection of new technologies are known as HTML5

HTML5: Content Layer

APIs, media, semantic meaning, new form elements, client side caching, SQL-based database API, offline application HTTP cache, Drag and drop, Video, Audio, P2P Video Calling, Web workers, canvas tag, prefetching

CSS3: Presentation Layer

Transforms, Animation, Transitions, Shadows (box & text), @font-face, Opacity, RGBA, Multi-Column Layout, Multiple Backgrounds, Gradients…

JavaScript 1.8: Interaction Layer

Interaction, API controls, Geolocation, Canvas…


Some examples

http://www.webdesignshock.com/responsive-design-problems/

Dynamic resizing with transitions!

http://www.stpaulsschool.org.uk/


Issues to watch for…

“Great mobile products are created, never ported”

Brian Fling, Author of the book Mobile Design and Development

http://books.google.com/books?id=LyMeulBTkH0C&printsec=frontcover&hl=es&source=gbs_atb#v=onepage&q&f=false


Plan on styling

A variety of varying support:

From: http://www.useragentman.com/

http://www.useragentman.com/blog/2010/07/27/cross-browser-html5-forms-using-modernizr-webforms2-and-html5widgets/



http://www.useragentman.com/tests/html5Widgets/range.html


Lightening image load weight: Dynamic Image Servers

Reasons numbers 1, 2 & 3 from 11 reasons why Responsive Design isn’t that cool!

Image size downolads, Resizing is taxing, Downloading non-viewable data

One solution:http://www.sencha.com/products/io/

PHP Developers try:http://net.tutsplus.com/tutorials/php/image-resizing-made-easy-with-php/orhttp://www.phpied.com/laziest-image-resize-in-php/



http://www.sencha.com/products/io/



http://net.tutsplus.com/tutorials/php/image-resizing-made-easy-with-php/






http://www.phpied.com/laziest-image-resize-in-php/

http://www.phpied.com/laziest-image-resize-in-php/


Building a mobile optimized

first time has it’s

advantages


Some solutions…


Some Solutions

320 and Up uses the mobile-first principle to prevent mobile devices from downloading desktop assets. It’s an alternative to starting with a desktop version and scaling down.

Use Fiveml.com to create a WebApp asprimary mobile content creation

http://stuffandnonsense.co.uk/projects/320andup/

http://stuffandnonsense.co.uk/projects/320andup/

http://fiveml.com/


Questions


Why is this important?

Pew Internet Mobile Access 2010


What about getting there?

Some of these don’t work…

Encoded as text

Light on dark

To small

to focusNon-mobile site!?!


Ad Agenciesshould knowbetter


Boston Globe


A great job for a good cause


MS Tag:The Betamaxof 2D Barcodes


Creative QR codes


The Purchase Funnel Method in the Mobile Medium

Awareness Perceptions

Engagement

Conversion

Repeat

Build awareness & PerceptionsInspire & excite

Engage and drive consideration

Influence to Recommend

Remove barriersTrial

Purchase

UpgradeExpand

Mobile Banners

Mobile Call to action on non-digital assets (SMS, Codes)

Mobile Sites & Campaign Landing Experiences

Mobile Site: Tools and purchase pages

Mobile applications and Widgets

Mobile Couponing

Mobile CRM (mCRM): SMS alerts, mobile web opt-in to relationship database, Deeper Apps and sites, etc


Platform Components

Campaign execution

Delivery management

Creative optimization

Placement optimization

Reporting

Reconciliation

DELIVER

Websites & portals

Ads

Branded content

Smartphone apps

Downloadable apps

Widgets

PRODUCE RETAIN

Communities

Broadcasts

Member management

Segmentation

Member rewards

Multichannel reg

Campaign planning

Discovery

Procurement

Data & targeting

Contract execution

PLAN & BUY CONVERT

Clubs

Couponing

Content

Contests

Alerts and tips

Photo / text to screen

Green screens

Image remix apps

Production Console Media Console Marketing Console

Data & Analytics

28

Responsive design and mobile

Technology

Transcript of Responsive design and mobile