Responsive design and mobile
Download as PPTX, PDF1 like826 views
The document discusses responsive design, emphasizing its significance in adapting websites to various devices and screen sizes. It covers key elements like media queries, the use of HTML5 and CSS3 technologies, and strategies for optimizing mobile experience. Additionally, it highlights challenges associated with responsive design and proposes solutions to enhance website performance on mobile platforms.
Responsive design and mobile
- 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
- 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
- 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
Editor's Notes
- #21: Note the build in presentation view – make sure to run through once before the presentation to see how it builds