#IxDT - Beyond responsive design

A scalable strategy to be on line on every device

To see full content and links of the presentation check this
http://arcadiaproject.github.io/tracks/events/mobilefirst.html

Arcadia
http://arcadiaproject.github.com

A network of nerds, geeks beasts and cool people to know
is a project by TheDoers

http://thedoersproject.com

Transcript

3. THE RWD
4. 25 MAGGIO 2010 ≈ « Responsive design is not about ‘designing for mobile’. But it’s not about ‘designing for the desktop’, either. Rather, it’s about adopting a more flexible, device-agnostic approach to designing for the web. » JOHN ALLSOPP “A DAO OF WEB DESIGN”
5. The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limita- tion of the printed page. We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibil- ity. But first, we must “accept the ebb and flow of things.” Now, John was writing during the web’s early years, a period of transition when designers transferred print-centered design principles onto this young, new medium.
7. ROOM FOR JUST WHAT ACTUALLY MATTER ≈
8. Elements of responsive design
9. A FLEXIBLE, GRID-BASED LAYOUT FLEXIBLE IMAGES AND MEDIA MEDIA QUERIES, A MODULE FROM THE CSS3 SPECIFICATION 1 2 3
10. We no longer live in a singular device world
11. GLOBAL SMARTPHONE SHIPMENTS SURPASSED GLOBAL PC SHIPMENTS TWO YEARS EARLIER THAN PREDICTED. STUDIES HAVE PROJECTED THAT MOBILE INTERNET USE WILL SURPASS TRADITIONAL DESKTOP INTERNET USE BY 2014 (SOURCE: MARY MEEKER MORGAN STANLEY) ≈
13. MOBILE-ONLY ACCES ≈ Others have shown that 25% of US internet users are mobile-only, meaning they never or rarely access the internet via laptop or desktop computers (source – Alistair Hill – On Device Research)
15. THAT MEANS MORE PEOPLE WILL BE USING MOBILE DEVICES TO ACCESS THE WEB THAN THOSE GETTING ONLINE WITH DESKTOPS AND LAPTOPS. THIS TRANSITION HAS ALREADY STARTED. HOME USAGE OF PERSONAL COMPUTERS IN 2010 WAS DOWN 20% FROM 2008 IN THE UNITED STATES. THE CULPRIT? SMARTPHONES AND TABLETS GOBBLING UP OUR TIME ONLINE. TRAFFIC TO MOBILE WEBSITES IN 2010 GREW 600% AFTER TRIPLING BETWEEN 2009 AND 2010. AND IT’S ONLY GOING TO GET BIGGER. WHILE HALF A BILLION PEOPLE ACCESSED THE MOBILE INTERNET WORLDWIDE IN 2009, HEAVY MOBILE DATA USERS WILL TRIPLE TO ONE BILLION BY 2013.
16. 500 % online
17. THE HURRIED BUSINESSMAN ON THE STREET ≈
18. *When and where
19. 84% USE THEM AT HOME 80% USE THEM DURING MISCELLANEOUS DOWNTIME THROUGHOUT THE DAY 74% USE THEM WHILE WAITING IN LINES OR WAITING FOR APPOINTMENTS 69% USE THEM WHILE SHOPPING 64% USE THEM AT WORK 62% USE THEM WHILE WATCHING TV (A DIFFERENT STUDY CLAIMS 84% ) AND 47% USE THEM DURING THEIR COMMUTE
20. *Why
21. SOURCE: AT&T, MORGAN STANLEY RESEARCH. ≈
22. *Time
23. GREY COMPUTER GREEN TABLET AND SMARTPHONES ≈
24. Allign with the mobile behavior
25. "TAPWORTHY" ≈ * LOOKUP/FIND (URGENT INFO, LOCAL): I NEED AN ANSWER TO SOME- THING NOW FREQUENTLY RELATED TO MY CURRENT LOCATION IN THE WORLD. * EXPLORE/PLAY (BORED, LOCAL): I HAVE SOME TIME TO KILL AND JUST WANT A FEW IDLE TIME DISTRACTIONS. * CHECK IN/STATUS (REPEAT/MICRO-TASKING): SOMETHING IMPORTANT TO ME KEEPS CHANGING OR UPDATING AND I WANT TO STAY ON TOP OF IT. * EDIT/CREATE (URGENT CHANGE/MICRO-TASKING): I NEED TO GET SOME- THING DONE NOW THAT CAN’T WAIT. AUTHOR JOSH CLARK ON MOBILE USER SEGMENTATION
29. It is not only about web, is about content
30. RESPONSIVE EMAILS ≈ As further proof, consider that in November 2010 visitors to web-based email sites de- clined 6%, but visitors accessing email with their mobile devices grew by 36%. * INLINE STYLE * NO FONT SUPPORT * MIN AND MAX DEVICE WITH MEDIA QUERIES * USE JUST FEW IMAGES * CREATE THE PLAIN TEXT EMAIL
31. DIGITAL QR CODE ≈
32. STOP USING CAPTCHA FOR SPAM CONTROL ≈ The onus for stopping spam should not fall on your legitimate visitors. Making it more diffi- cult for real people to sign up for an account, request information, or otherwise fill out a form on your site is not worth the trade-off. The burden of spam control should fall squarely on the shoulders of the site owner, and not on the site visitor. Find a new way to control spam, preferably through better filtering and back-end management. This is not the first time a change like this has been proposed, but it’s time that it start being more widely adopted by the design community.
33. Nui and new interactions
35. Native apps
36. “WEB LINKS DON’T OPEN APPS, THEY GO TO WEB PAGES” ≈ *ACCESS TO THE ADDRESS BOOK *SMS *CAMERA *AUDIO INPUTS *BUILT-IN SENSORS *RUN PROCESSES IN THE BACKGROUND *EASILY MONETIZE THROUGH MOBILE APP STORES OR IN-APP PURCHASES. JASON GRIGSBY
37. CORE FEATURES LIKE ≈ 14% of Twitter’s members use the mobile web experience compared to 8% using the native iPhone app and 7% using the Blackberry native app. Close to 19% of Facebook posts are created on the mobile web experience, while Facebook’s native iPhone, Android, and Blackberry apps only account for about 4% of posts each. Yelp. Their mobile products are used by just 7% of their total audience but are responsible for 35% of all their search- es.
38. One eyeball and one thumb
40. Input type html 1 checkbox <input type="checkbox"> 2 radio button <input type="radio"> 3 password field <input ype="password"> 4 dropdown lists <select><option>... 5 file picker </option></select> <input type="file"> 6 submit button <inputtype="submit"> 7 plain text <input type="text">
42. 2013 the year of responsive design
43. RESPONSIVE TYPOGRAPHY ONE, THE TYPE CAN BE RESIZED FOR THE DEVICE IT'S BEING VIEWED ON OR BY THE READER THEMSELVES. THE OTHER INVOLVES OPTIMIZED LINE LENGTHS TO MAINTAIN READABILITY. NATIVE DEVICE SUPPORTED FONTS PROPER FONT STACK TOOL FOR FONT STACK
44. BETTER UNDERSTANDING OF DEVICE CAPABILITIES ≈
45. FLEXIBLE MEDIA, IMAGES AND VIDEOS ≈ Are responsive in HTML to the width and height of a screen. They're set at their max-width of 100% but this is hard to do right. We can either use CSS and scaling with the grid, or we can load the right re- source for a particular device. The latter is a bit of a pain because even with swap- ping smaller images for larger ones, both resources will load and choke the perfor- mance of the page.
46. SPRITE TECHNIQUE MOBILE SPRITE TECHNIQUE ≈
47. MORE VARIATIONS IN LAYOUT ≈
48. BETTER MEDIA SUPPORT ≈ On August 29, 2012, the W3C released in draft the proposal HTML Responsive Images Extension, containing the specifications for the creation of a new html tags in order to overcome the limitations of and allow Web pages to see different images depending on factors such as resolution and density of the screen used by the user.
49. COST ESTIMATION ≈ Fixed width website 1x img website 1.5x Responsive design 2.5x
50. CONTACTS › http://www.thedoersproject.com we@thedoersproject.com ≈ http://arcadiaproject.github.com arcadia@thedoersproject.com ≈