MobileWeb & Responsive Approach Ing. DavidTuč . @davidtuc . davidtuc.com A:“We desperately must have a native app!” B:“Why do we need that? Building a mobile web is a better approach in our case.” A:“Because it’s cool and everyone has it! I want a native app!” Native isn’t always better We still live in an app culture… disposable app culture Download it, use it one, forget about it, bin it There are good reasons to go with mobile web: • Cost / Effort • Reach • Links • Complete control But…There are still good reasons to go native: • When you have to use the hardware • When UX needs to be a differentiator • When you won’t get found unless you’re on the app store • (Many of us) live in app culture, albeit a disposable one Let’stalkabout mobilewebnow The web has always been a balancing act… p://www.flickr.com/photos/classblog/5136926303 with many competing priorities. http://www.flickr.com/photos/tudor/4324056624/ Finding that balance is more difficult… http://www.flickr.com/photos/superfantastic/50088733/ http://www.flickr.com/photos/lyza/7382235106 as device diversity increases. http://www.flickr.com/photos/darrentunnicliff/4232232092/ Responsive web design offers us for a sensible way to deal with device diversity. And yet the one question I frequently ask myself is… Can a one size fits all solution… http://www.flickr.com/photos/sldghmmr/6041481069 compete with a tailored experience? http://www.flickr.com/photos/helloturkeytoe/4932748746/ Context Advertising Performance Important question from many perspectives: Search engine optimization PERFORMANCE http://www.akamai.com/dl/whitepapers/ecommerce_website_perf_wp.pdf People demand fast web sites. Log In Subscribe Basket Contact Us i am looking for... 67% of consumers cite slow websites as the main cause of basket abandonment Daily Pulse Newsletter Get our free Daily Pulse Newsletter to keep informed about the latest news and insights in Digital Marketing. Register for our free Daily Pulse ADVERTISE HERE » by David Moth 06 December 2012 11:40 8 comments Print TweetTweet 236 3 Everyone hates slow loading websites, and a new survey highlights just how damaging a slow site can be to the user experience. The study by Brand Perfect found that two thirds of UK consumers (67%) cite slow loading times as the main reason they would abandon an online purchase. It’s a topic we’ve looked at in more detail in our post 'Site speed: case studies, tips and tools for improving your conversion rate', with stats showing that slow loading websites are losing businesses up to £1.73bn a year. Privacy and cookie policy Home / Blog Subscribe Reports Training Events Jobs Blog More Browse by topic Like 14 ShareShare 20 Slow sites mean real dollars are lost. http://www.gomez.com/wp-content/downloads/19986_WhatMobileUsersWant_Wp.pdf Mobile users don’t care that their network is slow. Luke’s fantastic gesture reference: http://www.lukew.com/ff/entry.asp?1071 Many ways to navigate desktop web sites on mobile. http://www.flickr.com/photos/stephenjohnbryde/384095768/ There are no gestures that can make a web site faster. http://www.flickr.com/photos/nathaninsandiego/4829858186/ http://www.flickr.com/photos/wesbrowning/5316400258/ http://www.flickr.com/photos/69797234@N06/7203485148/ BBG: Before Boston Globe 34.7K 8.1K 26.6K 76.6% 39.0K 8.4K 30.6K 78.4% 30.5K 6.7K 23.8K 78.0% Original Resized K Saved % Saved 43.4K 8.2K 35.2K 81.1% 26.0K 6.6K 19.4K 74.6% 34.7K 7.8K 26.9K 77.5% Original Resized K Saved % Saved 34.7K 8.1K 26.6K 76.6% 39.0K 8.4K 30.6K 78.4% 30.5K 6.7K 23.8K 78.0% Original Resized K Saved % Saved 43.4K 8.2K 35.2K 81.1% 26.0K 6.6K 19.4K 74.6% 34.7K 7.8K 26.9K 77.5% Original Resized K Saved % Saved Original Resized K Saved % Saved Total 208.3K 45.8K 162.5K 78.0% The resounding answer from the community: Mobile First ResponsiveWeb Design http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/ Mobile First ResponsiveWeb Design 9% 4% 21% 38% 4% 25% Mobile is Larger Same Size Less than 10% Savings 11 to 50% Savings 51% to 100% Savings Greater than 100% Savings Where are the Mobile First RWDs? 106 sites from mediaqueri.es tested http://blog.cloudfour.com/where-are-the-mobile-first-responsive-web-designs/ http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/ Guy Podjarny repeated the experiment 2013: 476 sites from mediaqueri.es tested http://www.thefoxisblack.com/2012/10/02/the-design-thinking-behind-the-new-disney-com/ http://www.flickr.com/photos/beautyredefined/2643858323/ http://www.flickr.com/photos/puuikibeach/3654517679 Most responsive web designs are… Being Responsive from a layout perspective should not preclude us from being responsive from a performance and interaction perspective. —Scott Jehl “ https://twitter.com/scottjehl/status/243025352069349377 5key techniques for responsible responsive design http://www.flickr.com/photos/auyongcheemeng/95769332/ #1Build Mobile First Responsive Designs http://www.flickr.com/photos/localcelebrity/4831362933/ Different than Mobile First Design Theory http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/ Mobile First ResponsiveWeb Design is a technical approach for responsive designs. http://www.businessinsider.com/survey-mobile-first-bad-strategy-2012-12 Growth Constraints Capabilities Opportunity Focus Innovation = = = Luke’sTake on Mobile First http://www.lukew.com/ff/entry.asp?933 How do I make this responsive? How do I make this responsive? How do I make this responsive? http://www.flickr.com/photos/ancphotos_/6728574731 Ok, let’s start from a clean slate http://www.flickr.com/photos/salendron/5569020488/ What would the mobile version look like? How does that map to desktop design? How does that map to desktop design? How does that map to desktop design? Can this desktop version be better using what we’ve learned from the mobile version? This is why Mobile First thinking is so powerful even on projects that are currently implemented on the desktop. Mobile First http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/ Mobile First ResponsiveWeb Design is a technical approach for responsive designs. /* Wider viewports/higher resolutions (e.g. desktop) */ @media screen and (min-width:481px) { [Desktop layout rules here] } /* Mobile/lower-resolution devices */ @media screen and (max-width:480px) { [Mobile layout rules here] } Move the mobile media query block above the desktop media query. By doing this, we’re making sure the cascading effect of CSS is consistent with our mobile first progressive enhancement approach. Reorder media queries so cascade goes from small to large screens Keep basic styles outside of media queries. http://www.flickr.com/photos/lintmachine/2306383943/ #2 Keep CSS images in their place http://www.flickr.com/photos/lyza/7382255242/ #3Conditionally load JS based on screen size and capabilities http://www.flickr.com/photos/kk/230544325/ #4Deliver different size s at different screen sizes One SRC to rule all images Bensons Bubbler There are 16 beer labels on the On Tap Now page that use an img tag like this one for the Bensons Bubbler. Despite the need for multiple versions of this image depending on thescreen size, HTML only allows one value for the src. Two most common use cases https://www.flickr.com/photos/whitehouse/8491445521 Resolution Switching Includes high-density (retina) images. http://www.flickr.com/photos/barackobamadotcom/5795228030/ Art direction Not simply cropping Art direction: Images with text Sign In Account Get Email Español Shopping Bag Features New Arrivals Show Off Tees Backpacks Tech Toys 2/$30 & 2/$40 PINK Favorites Spin the Panty Wheel Tops All Tops Hoodies & Crews Tees & Tanks Bottoms All Bottoms Sweats Shorts Yoga PINK Loves Yoga Panties 5/$26 Styles 3/$33 Styles Shop by Style Bras All Bras Bandeaus & Bralettes 2/$42 Wear Everywhere Bras Bras 101 Swim Search Things are still moving forward on a standardsbased approach for responsive images. http://www.flickr.com/photos/johnlamb/2576062549/ #5Handle high-density images carefully A single image on multiple screens Image Resolution 3,214% bigger 0 500000 1000000 1500000 2000000 Blackberry Curve iPhone iPhone Retina Macbook Macbook Retina 1861632 465408 519360 130080 57920 320x181 480x271 960x541 909x512 1818x1024 0 50 100 150 200 Blackberry Curve iPhone iPhone Retina Macbook Macbook Retina 172 80 63 22 12 JPEG Compressed (k) 1,433% bigger Apple.com as an anti-pattern Downloadsbothstandardandretinaimages The total size of the page goes from 502.90K to 2.13MB when the retina versions of images are downloaded. http://blog.cloudfour.com/how-apple-com-will-serve-retina-images-to-new-ipads/ ResponsiveVideo http://www.longtailvideo.com/html5/ How do you provide the right video codec? How do you maintain the aspect ratio? • This is mostly a problem if you’re embedding video from a third party site. If you are using your own video, it is not usually an issue. • For third party video, FitVid.js is a good place to start. • For your own video, the only trick is making sure you’re not changing the proportions of the video element as the page resizes. Why spend so much time on images? Images are 61% of the average page Source: httparchive.org http://www.flickr.com/photos/fuzzylittlemanpeach/4633972431/ If I could dream up my ideal solution for images… Eights guidelines and one immutable rule #1Use vector-based images or font icons whenever you can IcoMoon App Premium Icons Font CDN Browse 3800+ Free Vector Icons Import Your Own Vectors to Make Fonts Generate Custom & Crisp Icon Fonts Generate CSS Sprites with any size or color Basic Glyph Editing 1200+ Vector Icons & Counting Handcrafted on a 16×16 grid Several Different Formats Optimized for Icon Fonts Free Updates Serve Custom-Built Fonts Powered by Amazon Web Services Easily Update Your Icon Fonts Production (Cached) Links Starting at $1.60/Month IcoMoonIcoMoon Custom Built and Crisp Icon Fonts, Done Right Home App Icon Packs Font CDN Demo Documentation Blog About /' // . // |\//7 /' " \ . | ( \ _ _ - -_ | '._ ' _ __ _- \_ _/ \'-' // \\_/ \\ | | || | / / | \ / |VV ||--\__________/-||-/| || || || || { } { } { }{ } . . Drag & Drop ur SVGs on the Grumpicon plz. What Is This Issues? Grumpicon.com based on Grunticon #2Encourage people to upload the highest quality source possible #3Provide an automatic image resizing and compression service Example from Sencha IO SRC. Define height, width or both. My constrained image #4 Images can be resized to any size with URL parameters %%%% %%%% %%%% %%%% %%%% %%%% %%%% #5 Provide automated output of PictureFill or alternative { "source":"/source.jpg", "breakpoints":%[ {%"max4width":"30em","pixel4density":1,"width":360px},% {%"max4width":"30em","pixel4density":2,"width":720px}, {%"max4width":"30em","pixel4density":1,"width":800px}, {%"max4width":"30em","pixel4density":2,"width":1600px}, {%"pixel4density":1,"width":800px}, {%"pixel4density":2,"width":1600px}, ] } templates contain breakpoint information Responsive Images Markup Function Responsive Images Markup Function PictureFill%Markup Sample syntax. Don’tget hung up on details. Markup for all imagescan be changed in onespot. #6Provide a way to override resized images for art direction needs jpegtran or jpegoptim OptiPNG or PNGOUT far future expires headers learn from mod_pagespeed or use it #7Integrate image compression best practices The average WebP file size is 25% - 34% smaller compared to JPEG file size. WebP compresses 34% better than libpng, and 26% better than pngout for loseless images. #8Bonus: Detect support forWebP image format and use it After going thru the whole story… Let’s revisit my original question. Can a one size fits all solution… http://www.flickr.com/photos/theyoungthousands/4025421438 compete with a tailored experience? http://www.flickr.com/photos/fronx/2862975043 http://www.flickr.com/photos/haddadi/5971508861 Or will it always beTOO BIG? Unlikely responsive design will ever be as fast as something crafted specifically for a device. http://www.flickr.com/photos/quarenta/3256329577 But web design is a balancing act. http://www.flickr.com/photos/kalexanderson/6266452817 And performance is just one factor. Flickr: Uploaded February 11, 2007 by hawridger For most projects, responsive design can be fast enough to make sense… if we do the extra work to make mobile first responsive designs. So… How to do the mobile web magic? Think ahead - define your objective now and for the future. Devices change, but objectives should stay consistent. Know your target audience • Essential for defining the right mobile strategy • Though many people have smartphones, don’t assume that everyone does, or that they all have an iPhone or Android phone. • Consider how your target audience use their phone and for what as well as if they have a reliable internet connection. Understand mobile website usage and behavior patterns Understand mobile website usage and behavior patterns Where are people using mobile devices? • 84% at home! • 80% during miscellaneous downtime throughout the day • 76% waiting in lines of waiting for appointments • 69% while shopping • 64% at work • 62% while watchingTV (alt. study claims 84%) • 47% during commute in to work Understanding tasks and context • Limitations with devices as well as how we experienced the internet on them meant that the tasks we carried out were quite limited. If someone accessed our site on a mobile device we could assume they were on the go and after something specific. • Today mobile devices are used anywhere and everywhere and increasingly for the same tasks as a desktop.Though context is still an important consideration, it’s in the form of how our surroundings impact our usage rather than that the context we’re in equals a set number of tasks that we want to carry out. Try to avoid bespoke mobile site & Optimise for mobile -> Responsive approach makes sense in at least 
 95 percent cases Keep core content the same Use analytics to define what devices to focus on Define your grid & breakpoints http://foundation.zurb.com/ • Defining your grid and breakpoints is the backbone of your mobile website design. • There are a number of tools to help you define both the number of columns, their width and the gutters as well as providing guidance for how these will work on mobile websites and smaller screens. • In some cases a fixed approach where the width remains the same is more appropriate. • In some a fluid approach or a combination of the two. Think twice about the navigation 1.Top Nav Approach Think twice about the navigation 2.The Footer Anchor Think twice about the navigation 3.The Select Menu Think twice about the navigation 4.TheToggle Think twice about the navigation 5.The Left Nav Flyout Think twice about the navigation 6.The Footer Only Think twice about the navigation • Try to keep to a maximum of three levels of navigation through a mobile site. (I usually aim for just two.) • Mobile users want to get information quickly, so they won't tap here, there and everywhere just to find what they're looking for. Not every page/screen needs a wireframe/design • Use analytics as a guide for what to focus on • A lot of that can be handled with a master set and sketches for the rest. Prototype, test, and iterate Deliver content quickly • Try to understand what people visiting a mobile phone website will actually expect to see - ask clients what's really important to them and consider what information their users will want to access quickly, such as reservation information, menus and location maps on a restaurant website. …What what’s more there to follow or consider? • Choose the right web font (no sans serif please!), legibility is a must • Test at all stages (mockups, prototypes,… and colors as well!) • Minimise text input; Offer shortcuts to prefill portions of text Thanks for staying awake! Special thanks to Jason Grigsby for borrowing me a bunch of slides and all the Flickr users sharing under creative commons.