Building A Better Web - A Responsive Reminder

This is a talk I'm refining overtime that gives a good general overview of the responsive and mobile-first methodologies as well as the workflow involved.

Transcript

1. BUILDING A BETTER WEB TERRANCE PITRE A RESPONSIVE REMINDER Thursday, May 30, 13
2. SECTION TITLE Thursday, May 30, 13
3. SECTION TITLE Thursday, May 30, 13
4. SECTION TITLE Thursday, May 30, 13
5. SOME STATS http://mobithinking.com/mobile-marketing-tools/latest-mobile-stats/a Mobile web reaches 87% of the world’s population. Thursday, May 30, 13
6. SOME STATS http://www.comscore.com/Insights/Press_Releases/2013/3/comScore_Reports_January_2013_U.S._Smartphone_Subscriber_Market_Share 55% of the mobile market are smartphone subscribers. Thursday, May 30, 13
7. SOME STATS http://www.comscore.com/Insights/Presentations_and_Whitepapers/2013/2013_Mobile_Future_in_Focus Smartphones have surpassed 125 million U.S. consumers and tablets are now owned by more than 50 million. Thursday, May 30, 13
8. People are using these devices to view websites right now. Thursday, May 30, 13
9. You can’t control the device a user is viewing your website on, but you can control the website the user is viewing on their device. Thursday, May 30, 13
10. RESPONSIVE WEB DESIGN Thursday, May 30, 13
11. RESPONSIVE WEB DESIGN The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility. But first, we must “accept the ebb and flow of things.” “ - JOHN ALLSOPP author of “A Dao of Web Design” April 07, 2000 Thursday, May 30, 13
12. ETHAN MARCOTTE Original article posted on A List Apart in May, 2010 http://alistapart.com/article/responsive-web-design Responsive Web Design book from A Book Apart http://www.abookapart.com/products/responsive-web-design RESPONSIVE WEB DESIGN Thursday, May 30, 13
13. A flexible grid (with flexible images) that incorporates media queries to create a responsive, adaptive layout. “ - ETHAN MARCOTTE ” author of “Responsive Web Design” RESPONSIVE WEB DESIGN Thursday, May 30, 13
14. RESPONSIVE WEB DESIGN EXAMPLES Thursday, May 30, 13
15. RESPONSIVE WEB DESIGN EXAMPLES Thursday, May 30, 13
16. KEY INGREDIENTS • A flexible, grid-based layout • Flexible images & media • Media Queries RESPONSIVE WEB DESIGN Thursday, May 30, 13
17. #1 FLEXIBLE GRID RESPONSIVE WEB DESIGN Thursday, May 30, 13
18. #1 FLEXIBLE GRID • Column based layout with content nesting within the columns • The grid columns are measured in percents, not pixels • Target / context = result RESPONSIVE WEB DESIGN Thursday, May 30, 13
19. #1 FLEXIBLE GRID RESPONSIVE WEB DESIGN 700 / 988 = 0.7085 (70.85%) PIXELS TO PERCENTAGES: http://alistapart.com/article/fluidgrids Thursday, May 30, 13
20. RESPONSIVE WEB DESIGN #2 FLEXIBLE MEDIA Thursday, May 30, 13
21. • Media is displayed at max dimensions within an element in the grid • Viewed image size is based upon the wrapping HTML container • 2 types of flexible images - background images (CSS) and embedded images #2 FLEXIBLE MEDIA RESPONSIVE WEB DESIGN Thursday, May 30, 13
22. 480px 1024px EMBEDDED IMAGES BACKGROUND IMAGES RESPONSIVE WEB DESIGN Thursday, May 30, 13
23. LARGE DISPLAY? TV? DESKTOP? TABLET? MOBILE? #3 MEDIA QUERIES RESPONSIVE WEB DESIGN Thursday, May 30, 13
24. • Uses the CSS 'media' type to target and inspect the physical characteristics of the device viewing a website • Media query declarations can go in the html or in the stylesheet • Added as part of the CSS3 specification and are widely supported #3 MEDIA QUERIES RESPONSIVE WEB DESIGN Thursday, May 30, 13
25. @media all and (min-width: 25em){ // some css } IN A STYLESHEET: IN MARKUP: <link rel="stylesheet" media="all and (max-device-width: 480px)" href="small.css"> RESPONSIVE WEB DESIGN Thursday, May 30, 13
26. @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2){ // styles for retina enabled iPad } SPECIFICALLY TARGETED: RESPONSIVE WEB DESIGN Thursday, May 30, 13
27. RESPONSIVE WEB DESIGN KEY INGREDIENTS • A Flexible, grid-based layout • Flexible images & media • Media Queries Thursday, May 30, 13
28. MOBILE FIRST Thursday, May 30, 13
29. LUKE WROBLESKI Original article posted on Luke’s blog in November, 2009 http://www.lukew.com/ff/entry.asp?933 Mobile First book from A Book Apart http://www.abookapart.com/products/mobile-first MOBILE FIRST Thursday, May 30, 13
30. MOBILE FIRST “ - BRAD FROST ” Front-end designer, consultant, and speaker Mobile First is a philosophy that highlights the need to prioritize the mobile context when creating user experiences. Thursday, May 30, 13
31. MOBILE FIRST GOOD :) BAD :( Thursday, May 30, 13
32. WHY MOBILE-FIRST? • The growth of mobile is a huge opportunity to reach more people than ever • The constraints of the mobile medium force us to focus on what really matters • The capabilities of mobile create opportunities to innovate MOBILE FIRST Thursday, May 30, 13
33. MOBILE FIRST GROWTH = OPPORTUNITY Thursday, May 30, 13
34. SOME STATS Mobile traffic now accounts for 23% of total time spent with the internet. http://www.marketingcharts.com/wp/interactive/mobile-share-of-web-traffic-jumped-in-q4-2012-26057/ Thursday, May 30, 13
35. SOME STATS http://www.marketingcharts.com/wp/interactive/mobile-share-of-web-traffic-jumped-in-q4-2012-26057/ 0 7.5 15 22.5 30 Q4 2011 Q1 2012 Q2 2012 Q3 2012 Q4 2012 23.14% 17.53% 16.63% 13.41% 12.59% Percentage of Web Traffic from Mobile Devices % SHARE Thursday, May 30, 13
36. To ensure future site relevancy, you have to stop ignoring this “trend.” MOBILE FIRST Thursday, May 30, 13
37. CONSTRAINTS = FOCUS MOBILE FIRST Thursday, May 30, 13
38. Smaller screens force us to focus on what’s important. MOBILE FIRST Thursday, May 30, 13
39. MOBILE FIRST Thursday, May 30, 13
40. MOBILE FIRST Thursday, May 30, 13
41. Speed of networks force us to optimize our code. MOBILE FIRST Thursday, May 30, 13
42. SOME STATS http://speedtest.net Average Download Speed at this Time HIGH SPEED NETWORK 43.55 Mbps Optimum Online MOBILE NETWORK 1.19 Mbps Verizon 3G Thursday, May 30, 13
43. Take advantage of modes of use. MOBILE FIRST Thursday, May 30, 13
44. MOBILE FIRST MODES OF USE Thursday, May 30, 13
45. CAPABILITIES = INNOVATION MOBILE FIRST Thursday, May 30, 13
46. MOBILE FEATURES • Viewport mode • Touch • Location detection • Gyroscope • Camera MOBILE FIRST Thursday, May 30, 13
47. How can we harness these features to create better user experiences? MOBILE FIRST Thursday, May 30, 13
48. • Growth of mobile = opportunity to reach more people than ever • Constraints of mobile = focus on what really matters • Capabilities of mobile = innovation opportunities WHY MOBILE FIRST? MOBILE FIRST Thursday, May 30, 13
49. MOBILE FIRST MOBILE FIRST RESPONSIVE WEB DESIGN Thursday, May 30, 13
50. WORKFLOW Thursday, May 30, 13
51. WORKFLOW Typical Design Workflow REQUIREMENTS UI/WIREFRAMES VISUAL DESIGN FRONT-END BACK-END LAUNCH Thursday, May 30, 13
52. • It’s a classic workflow that’s been used and proven effective • Process is spelled out in linear, well- defined stages • Defined start and end points, progress is easily measured • Agreed and signed off comps WORKFLOW PROS Thursday, May 30, 13
53. • Requirement changes become more difficult/expensive as the project deepens • Less flexibility • Slow to start, lots of waiting • No product owner visibility until the end of the design/development process WORKFLOW CONS Thursday, May 30, 13
54. MINDSET CHANGE WORKFLOW Thursday, May 30, 13
55. WORKFLOW Mobile First Responsive Workflow Discovery Plan Sketch Prototype Visual Design Test Discuss Thursday, May 30, 13
56. WORKFLOW DISCOVERY PLANNING SKETCH PROTOTYPE VISUAL DESIGN TESTING DISCUSSION THE WHOLE TEAM IS INVOLVED HERE Thursday, May 30, 13
57. DISCOVERY WORKFLOW Thursday, May 30, 13
58. DISCOVERY • What are we building and why are we building it? • Who are we building it for? users? • What are we trying to achieve here? WORKFLOW Thursday, May 30, 13
59. PLAN WORKFLOW Thursday, May 30, 13
60. PLAN • What resources do we have to support this? • Refine your concepts • Work on user stories • Begin planning information architecture WORKFLOW Thursday, May 30, 13
61. SKETCH • Map out your ideas loosely and quickly • Allows you to think without restraint of the computer • Be collaborative with sketches WORKFLOW Thursday, May 30, 13
62. NOTHIN’ FANCY Thursday, May 30, 13
63. PROTOTYPE • A prototype is a loose model based on previous sketches brought to life using HTML and CSS • Quickly prove an interactive concepts • Allows you to get a feel for layout at different breakpoints • Able to have a usable product sooner WORKFLOW Thursday, May 30, 13
64. VISUAL DESIGN • Apply visual styles to the prototype • This can be done in Photoshop or magic markers or whatever • Just use a tool that you’re comfortable with and doesn’t restrain creativity • This is the time for visual exploration WORKFLOW Thursday, May 30, 13
65. Thursday, May 30, 13
66. Thursday, May 30, 13
67. Thursday, May 30, 13
68. TEST • Begin testing at different breakpoints • Test on actual devices • Test on older browsers • Incorporate user testing WORKFLOW Thursday, May 30, 13
69. DISCUSS • This should be after each step for each designer to ensure everything is moving along as it should be • Discuss with stakeholders to manage expectations and avoid “The Big Reveal” • Show them the work in progress WORKFLOW Thursday, May 30, 13
70. WORKFLOW SKETCH PROTOTYPE VISUAL DESIGN TESTING DISCUSSION Repeat Until It’s Awesome Thursday, May 30, 13
71. BUILDING & MAINTAINING BEST PRACTICES Thursday, May 30, 13
72. DESIGN & LAYOUT • Think in fluid values, not fixed (% not px) ebb and flow • Define layout beginning with mobile in mind • Use a grid system BUILDING & MAINTAINING Thursday, May 30, 13
73. DESIGN & LAYOUT • Keep in mind source order vs content priority order • Use StyleTiles for gathering visual language (colors and type) • Add breakpoints when stuff starts to look off - don’t let current device widths dictate your design BUILDING & MAINTAINING Thursday, May 30, 13
74. IMAGES & MEDIA • Set max-size: 100% to maintain fluid images • Use data uri’s or font icons when you can • Try not to increase or decrease an image past 20% of its size • Optimize images using lossless compression BUILDING & MAINTAINING Thursday, May 30, 13
75. • Mobile first styles first (build up the media queries) • Use em based media queries • Use a CSS preprocessor (SASS, LESS, Stylus) • Minify and combine your CSS into one stylesheet (for production) CSS BUILDING & MAINTAINING Thursday, May 30, 13
76. • Add padding to your links (fat fingers) • Use media queries to detect pixel density to serve higher resolution images • Keep CSS scalable and modular (SMACSS) CSS BUILDING & MAINTAINING Thursday, May 30, 13
77. JAVASCRIPT • Embrace lazy loading • Scale images using javascript • Be careful with the plugins • Minify and aggregate all js • Load js at the bottom BUILDING & MAINTAINING Thursday, May 30, 13
78. JAVASCRIPT • Conditionally load js that’s only needed at a later breakpoint • Try async for loading js • Load non-pertinent content through AJAX BUILDING & MAINTAINING Thursday, May 30, 13
79. OTHER • Gzip & minify everything (even html) • Reduce http requests where you can • Cache the hell out of everything • Use diagnosis testing tools - yslow, page speed, chrome inspector tools BUILDING & MAINTAINING Thursday, May 30, 13
80. TESTING • Nothing beats having the actual device • Simulators/Emulators close second • Developer tools and user agent switching • Responsive.is/BrowserStack • Scaling your browser manually BUILDING & MAINTAINING Thursday, May 30, 13
81. CONCLUSION Thursday, May 30, 13
82. • We’re all up in it now • The best stuff hasn’t even come out yet • We’re all still trying to figure it out • Not all problems have been solved, but you can still start now • Be a part of the growth and discovery CONCLUSION Thursday, May 30, 13
83. THANK YOU Thursday, May 30, 13