Building a Mobile Layout

Designing for mobile is challenging. With the ever changing landscape of devices and screen sizes, there is no way to predict every possible canvas we’ll be desiging for. Luckily, there are few tools at our disposal that we can use to be confident in our designs.

In this session we will introduce some of these tools, including flexible grids and media queries. We will also dive into some code and see how these components can be created and how we can avoid some common pitfalls along the way.

Transcript

1. Building a Mobile Layout Darby Frey @darbyfrey
2. Mobile Layout Building a Mobile Layout @darbyfrey
3. Mobile Responsive Layout Building a Mobile Layout @darbyfrey
4. Mobile Responsive Layout The goal of a responsive layout is: • To have a single layout that adapts to multiple devices • To not have separate versions for phone, tablet, laptop, etc.
5. Responsive. There’s a thing for that, right? Building a Mobile Layout @darbyfrey
6. Responsive. There’s a thing for that, right? Building a Mobile Layout @darbyfrey <div class="section group"> <div class="col span_1_of_3"> This is column 1 </div> <div class="col span_1_of_3"> This is column 2 </div> <div class="col span_1_of_3"> This is column 3 </div> </div> <div class="section group"> <div class="col span_1_of_4"> This is column 1 </div> <div class="col span_1_of_4"> This is column 2 </div> <div class="col span_1_of_4"> This is column 3 </div> <div class="col span_1_of_4"> This is column 4 </div> </div>
7. Hum... • Is it really that complicated? • What are these frameworks really doing? • Will these frameworks really help? • Is anything going to break? • Am I going to have to rewrite my site? Building a Mobile Layout @darbyfrey
8. I know some CSS, can I just do this myself?
9. http://www.behance.net/gallery/YES-YOU-CAN/5713297
10. • Flexible Typography • Flexible Grid • Flexible Media • Media Queries Responsive Web Design Building a Mobile Layout @darbyfrey
11. • Flexible Typography • Flexible Grid • Flexible Media • Media Queries Responsive Web Design Building a Mobile Layout @darbyfrey
12. Flexible Grids Building a Mobile Layout @darbyfrey
13. Flexible Grids A flexible grid is one that adjust to changes in browser width Done by building containers with relative (often percentage) widths instead of absolute (often pixel) widths Building a Mobile Layout @darbyfrey
14. Flexible Grids 1000 px 600 px 400 px
15. Flexible Grids 100% 60% 40%
16. Flexible Grids 100% 60% 40%
17. Neat! So, how do I make my fixed layout flexible? Building a Mobile Layout @darbyfrey
18. http://www.johnsoncreek.k12.wi.us/faculty/sirenoj/facts.cfm
19. Converting to a flexible layout (target / context) * 100 = result Building a Mobile Layout @darbyfrey
20. Converting to a flexible layout (target / context) * 100 = result target the pixel width of the element context the pixel width of the element's container result the percentage width of the element Building a Mobile Layout @darbyfrey
21. Converting to a flexible layout Building a Mobile Layout @darbyfrey
22. Converting to a flexible layout Building a Mobile Layout @darbyfrey
23. Converting to a flexible layout Fixed Flexible .header, .container { width: 960px; padding-left: 10px; padding-right: 10px; } .articles { width: 530px; padding-right: 10px; } .sidebar { width: 380px; padding: 20px; } .header, .container { width: 100%; /* 10 / 960 * 100 */ padding-left: 1.0416666666666665%; /* 10px */ padding-right: 1.0416666666666665%; /* 10px */ } .articles { /* 530 / 960 * 100 */ width: 55.208333333333336%; /* 530px */ /* 10 / 960 * 100 */ padding-right: 1.0416666666666665%; /* 10px */ } .sidebar { /* 380 / 960 * 100 */ width: 39.58333333333333%; /* 380 */ /* 20 / 960 * 100 */ padding: 2.083333333333333%; /* 20px */ }
24. Flexible Grids Building a Mobile Layout @darbyfrey
25. Flexible Grids Building a Mobile Layout @darbyfrey
26. Flexible Grids max-width Building a Mobile Layout @darbyfrey
27. Flexible Grids .header, .container { width: 960px; max-width: 960px; width: 100%; } max-width Building a Mobile Layout @darbyfrey
28. Flexible Grids Building a Mobile Layout @darbyfrey
29. Cool, it scales, so we're done, right? Building a Mobile Layout @darbyfrey
30. Breakpoints Building a Mobile Layout @darbyfrey
31. Breakpoints • Window Resizer for Chrome https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh?hl=en • Resize browser and take note of where the layout breaks • Set your breakpoints where the layout breaks, not at device specific sizes Building a Mobile Layout @darbyfrey
32. Breakpoints Building a Mobile Layout @darbyfrey
33. Breakpoints Building a Mobile Layout @darbyfrey
34. Media Queries @media screen and (max-width: 890px){ } @media screen and (max-width: 626px){ } @media screen and (max-width: 400px){ } Building a Mobile Layout @darbyfrey
35. Breakpoints Building a Mobile Layout @darbyfrey
36. Media Queries @media screen and (max-width: 890px){ .header h1 { padding-top: 20px; float: none; margin: 0 auto; } .header .abstract { padding-top: 20px; float: none; margin: 0 auto; } .subscribe-form .email { float: none; } .subscribe-form .submit { margin-top: 4px; float: none; } } Building a Mobile Layout @darbyfrey
37. Media Queries Building a Mobile Layout @darbyfrey
38. Breakpoints Building a Mobile Layout @darbyfrey
39. Media Queries @media screen and (max-width: 626px){ .articles { width: 100%; float: none; } .sidebar { width: 100%; float: none; } } @media screen and (max-width: 400px){ .sticky .twitter { display: none; } .sticky .rss { display: none; } .sticky .dot { display: none; } } Building a Mobile Layout @darbyfrey
40. Media Queries Building a Mobile Layout @darbyfrey
41. Media Queries - Device Features width * orientation color-index * height * aspect-ratio * monochrome device-width * device-aspect-ratio * resolution * device-height * color * scan grid Building a Mobile Layout @darbyfrey http://www.w3.org/TR/css3-mediaqueries/ * includes min- and max- options @media screen and (max-width: 600px) and (min-device-width: 320px){ } @media screen and (max-height: 600px) and (orientation: landscape){ }
42. Viewport Meta Tag • Created by Apple for the iPhone in 2007 • Mobile Safari will default to a 980px wide canvas • The viewport tag gives you control over the canvas width • Supported in nearly all mobile browsers * <meta name="viewport" content="initial-scale=1.0, width=device-width"> * http://www.quirksmode.org/mobile/tableViewport.html Building a Mobile Layout @darbyfrey
43. Viewport Meta Tag Building a Mobile Layout @darbyfrey
44. Compatibility • css3-mediaqueries-js https://code.google.com/p/css3-mediaqueries-js/ • Respond.js min-width and max-width only https://github.com/scottjehl/Respond Building a Mobile Layout @darbyfrey
45. What if I’m starting from scratch? • Think about a Mobile First approach Progressive Enhancement vs. Graceful Degradation • A Framework might make sense Responsive Grid System - http://www.responsivegridsystem.com/ Zurb Foundation - http://foundation.zurb.com/ Semantic Grid - http://semantic.gs/ Twitter Bootstrap - http://twitter.github.io/bootstrap/ • Border Box http://css-tricks.com/box-sizing/ * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } Building a Mobile Layout @darbyfrey
46. Responsive Web Design Ethan Marcotte http://www.abookapart.com/products/responsive-web-design Building a Mobile Layout @darbyfrey
47. Mobile First Luke Wroblewski http://www.abookapart.com/products/mobile-first Building a Mobile Layout @darbyfrey
48. https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh Chrome Window Resizer Building a Mobile Layout @darbyfrey
49. Safari Responsive Resize Building a Mobile Layout @darbyfrey http://www.midwinter-dg.com/downloads_safari-extension_responsive-resize.html
50. Responsive Calculator Building a Mobile Layout @darbyfrey http://www.rwdcalc.com/
51. Media Queries are a Hack Building a Mobile Layout @darbyfrey http://ianstormtaylor.com/media-queries-are-a-hack/
52. Responsive Containers Building a Mobile Layout @darbyfrey http://blog.andyhume.net/responsive-containers/
53. Code Examples https://github.com/darbyfrey/mobilecampchicago2013 Building a Mobile Layout @darbyfrey
54. Thank You! Darby Frey @darbyfrey