Deck from my speech in Slovakia. Covers responsive design, HTML5 and mobile design at a high level, as a bonus there is a section on how not to implement QR codes

1. Responsive Design
Solving the biggest small-website issue
CONFIDENTIAL & PROPRIETARY
CONFIDENTIAL & PROPRIETARY

2. Responsive Design
I. What it is and why it’s important
II. The Building Blocks
III. The Problems
IV. Some Solutions
2
CONFIDENTIAL & PROPRIETARY

3. Mobile has swallowed the traditional digital medium
CONFIDENTIAL & PROPRIETARY 3

4. 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)"><!--iPad landscape targeted -->
 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
CONFIDENTIAL & PROPRIETARY

5. What is Responsive
Design?
 Website Design
Responding
to the user’s
environment
 Standards compliant, Makes the most of latest technology, Semantically
correct
 Leverages fluid layouts and flexible grids
 http://www.alistapart.com/articles/outsidethegrid for sanity
CONFIDENTIAL & PROPRIETARY

6. 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…
CONFIDENTIAL & PROPRIETARY 6

7. Some examples
Dynamic resizing
with transitions!
http://www.webdesignshock.com/responsive-design-problems/ & PROPRIETARY
CONFIDENTIAL

8. Issues to watch for…
“Great mobile products are
created, never ported”
Brian Fling, Author of the book
Mobile Design and Development
CONFIDENTIAL & PROPRIETARY 8

9. Plan on styling
 A variety of varying support:
From: http://www.useragentman.com/
CONFIDENTIAL & PROPRIETARY

10. 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/
or
http://www.phpied.com/laziest-image-resize-in-php/
CONFIDENTIAL & PROPRIETARY

11. CONFIDENTIAL & PROPRIETARY

12. CONFIDENTIAL & PROPRIETARY

13. CONFIDENTIAL & PROPRIETARY

14. CONFIDENTIAL & PROPRIETARY

15. CONFIDENTIAL & PROPRIETARY

16. CONFIDENTIAL & PROPRIETARY

17. Some solutions…
CONFIDENTIAL & PROPRIETARY 17

18. 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 as
primary mobile content creation
CONFIDENTIAL & PROPRIETARY

19. Questions
CONFIDENTIAL & PROPRIETARY 19

20. Why is this important?
Pew Internet Mobile Access 2010
CONFIDENTIAL & PROPRIETARY 20

21. What about getting there?
 Some of these don’t work…
CONFIDENTIAL & PROPRIETARY

22. Ad Agencies
should know
better
CONFIDENTIAL & PROPRIETARY

23. Boston Globe
CONFIDENTIAL & PROPRIETARY

24. A great job for a good cause
CONFIDENTIAL & PROPRIETARY

25. MS Tag:
The Betamax
of 2D Barcodes
CONFIDENTIAL & PROPRIETARY

26. Creative QR codes
CONFIDENTIAL & PROPRIETARY

27. The Purchase Funnel Method in the Mobile Medium
Mobile Banners
Build awareness & Perceptions
Mobile Call to action on non-
Inspire & excite digital assets (SMS, Codes)
Mobile applications and Widgets
Engage and drive consideration
Mobile Sites & Campaign Landing
Influence to Recommend
Experiences
Mobile Site: Tools and purchase pages
Remove barriers
Trial
Purchase Mobile Couponing
Mobile CRM (mCRM): SMS alerts, mobile web opt-in
Upgrade
Expand
to relationship database, Deeper Apps and sites, etc
CONFIDENTIAL & PROPRIETARY

28. Platform Components
Production Console Media Console Marketing Console
PRODUCE PLAN & BUY DELIVER CONVERT RETAIN
Websites & portals Campaign planning Campaign execution Clubs Communities
Ads Couponing Broadcasts
Discovery Delivery management
Branded content Content Member management
Smartphone apps Procurement Creative optimization Contests Segmentation
Downloadable apps Data & targeting Placement optimization Alerts and tips Member rewards
Widgets Photo / text to screen Multichannel reg
Contract execution Reporting
Green screens
Reconciliation Image remix apps
Data & Analytics
CONFIDENTIAL & PROPRIETARY 28