Designing for Devices - TMCnet€¦ · The longer the line the more line spacing you need. Don’t...
Transcript of Designing for Devices - TMCnet€¦ · The longer the line the more line spacing you need. Don’t...
![Page 1: Designing for Devices - TMCnet€¦ · The longer the line the more line spacing you need. Don’t know why, but it’s true. The longer the line the more line spacing you need. Don’t](https://reader035.fdocuments.us/reader035/viewer/2022070805/5f03b8477e708231d40a701c/html5/thumbnails/1.jpg)
Terry Ryan | Developer EvangelistTwitter: @tpryan
Designing for Devices
![Page 2: Designing for Devices - TMCnet€¦ · The longer the line the more line spacing you need. Don’t know why, but it’s true. The longer the line the more line spacing you need. Don’t](https://reader035.fdocuments.us/reader035/viewer/2022070805/5f03b8477e708231d40a701c/html5/thumbnails/2.jpg)
Who are you?
![Page 3: Designing for Devices - TMCnet€¦ · The longer the line the more line spacing you need. Don’t know why, but it’s true. The longer the line the more line spacing you need. Don’t](https://reader035.fdocuments.us/reader035/viewer/2022070805/5f03b8477e708231d40a701c/html5/thumbnails/3.jpg)
THE PROBLEMS
![Page 4: Designing for Devices - TMCnet€¦ · The longer the line the more line spacing you need. Don’t know why, but it’s true. The longer the line the more line spacing you need. Don’t](https://reader035.fdocuments.us/reader035/viewer/2022070805/5f03b8477e708231d40a701c/html5/thumbnails/4.jpg)
Screens are Exploding
![Page 5: Designing for Devices - TMCnet€¦ · The longer the line the more line spacing you need. Don’t know why, but it’s true. The longer the line the more line spacing you need. Don’t](https://reader035.fdocuments.us/reader035/viewer/2022070805/5f03b8477e708231d40a701c/html5/thumbnails/5.jpg)
![Page 6: Designing for Devices - TMCnet€¦ · The longer the line the more line spacing you need. Don’t know why, but it’s true. The longer the line the more line spacing you need. Don’t](https://reader035.fdocuments.us/reader035/viewer/2022070805/5f03b8477e708231d40a701c/html5/thumbnails/6.jpg)
![Page 7: Designing for Devices - TMCnet€¦ · The longer the line the more line spacing you need. Don’t know why, but it’s true. The longer the line the more line spacing you need. Don’t](https://reader035.fdocuments.us/reader035/viewer/2022070805/5f03b8477e708231d40a701c/html5/thumbnails/7.jpg)
![Page 8: Designing for Devices - TMCnet€¦ · The longer the line the more line spacing you need. Don’t know why, but it’s true. The longer the line the more line spacing you need. Don’t](https://reader035.fdocuments.us/reader035/viewer/2022070805/5f03b8477e708231d40a701c/html5/thumbnails/8.jpg)
![Page 9: Designing for Devices - TMCnet€¦ · The longer the line the more line spacing you need. Don’t know why, but it’s true. The longer the line the more line spacing you need. Don’t](https://reader035.fdocuments.us/reader035/viewer/2022070805/5f03b8477e708231d40a701c/html5/thumbnails/9.jpg)
![Page 10: Designing for Devices - TMCnet€¦ · The longer the line the more line spacing you need. Don’t know why, but it’s true. The longer the line the more line spacing you need. Don’t](https://reader035.fdocuments.us/reader035/viewer/2022070805/5f03b8477e708231d40a701c/html5/thumbnails/10.jpg)
Source: http://osxdaily.com/2012/02/10/how-ipad-3s-retina-display-resolution-would-compare-to-other-screens/
![Page 11: Designing for Devices - TMCnet€¦ · The longer the line the more line spacing you need. Don’t know why, but it’s true. The longer the line the more line spacing you need. Don’t](https://reader035.fdocuments.us/reader035/viewer/2022070805/5f03b8477e708231d40a701c/html5/thumbnails/11.jpg)
SOLUTIONS
![Page 12: Designing for Devices - TMCnet€¦ · The longer the line the more line spacing you need. Don’t know why, but it’s true. The longer the line the more line spacing you need. Don’t](https://reader035.fdocuments.us/reader035/viewer/2022070805/5f03b8477e708231d40a701c/html5/thumbnails/12.jpg)
Ignore it
![Page 13: Designing for Devices - TMCnet€¦ · The longer the line the more line spacing you need. Don’t know why, but it’s true. The longer the line the more line spacing you need. Don’t](https://reader035.fdocuments.us/reader035/viewer/2022070805/5f03b8477e708231d40a701c/html5/thumbnails/13.jpg)
Mobile Sites
![Page 14: Designing for Devices - TMCnet€¦ · The longer the line the more line spacing you need. Don’t know why, but it’s true. The longer the line the more line spacing you need. Don’t](https://reader035.fdocuments.us/reader035/viewer/2022070805/5f03b8477e708231d40a701c/html5/thumbnails/14.jpg)
Responsive Sites
![Page 15: Designing for Devices - TMCnet€¦ · The longer the line the more line spacing you need. Don’t know why, but it’s true. The longer the line the more line spacing you need. Don’t](https://reader035.fdocuments.us/reader035/viewer/2022070805/5f03b8477e708231d40a701c/html5/thumbnails/15.jpg)
I vote responsive
![Page 16: Designing for Devices - TMCnet€¦ · The longer the line the more line spacing you need. Don’t know why, but it’s true. The longer the line the more line spacing you need. Don’t](https://reader035.fdocuments.us/reader035/viewer/2022070805/5f03b8477e708231d40a701c/html5/thumbnails/16.jpg)
HTML already handles this
![Page 17: Designing for Devices - TMCnet€¦ · The longer the line the more line spacing you need. Don’t know why, but it’s true. The longer the line the more line spacing you need. Don’t](https://reader035.fdocuments.us/reader035/viewer/2022070805/5f03b8477e708231d40a701c/html5/thumbnails/17.jpg)
Source: http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html
![Page 18: Designing for Devices - TMCnet€¦ · The longer the line the more line spacing you need. Don’t know why, but it’s true. The longer the line the more line spacing you need. Don’t](https://reader035.fdocuments.us/reader035/viewer/2022070805/5f03b8477e708231d40a701c/html5/thumbnails/18.jpg)
Everything added makes the web less responsive
![Page 19: Designing for Devices - TMCnet€¦ · The longer the line the more line spacing you need. Don’t know why, but it’s true. The longer the line the more line spacing you need. Don’t](https://reader035.fdocuments.us/reader035/viewer/2022070805/5f03b8477e708231d40a701c/html5/thumbnails/19.jpg)
How do we do it
![Page 20: Designing for Devices - TMCnet€¦ · The longer the line the more line spacing you need. Don’t know why, but it’s true. The longer the line the more line spacing you need. Don’t](https://reader035.fdocuments.us/reader035/viewer/2022070805/5f03b8477e708231d40a701c/html5/thumbnails/20.jpg)
Responsive Web Design
•Develop like your browser is just one big linear display
• Enhance for wider screens
• Tweak for mobile
• Test it on targets
• Iterate until it works right
![Page 21: Designing for Devices - TMCnet€¦ · The longer the line the more line spacing you need. Don’t know why, but it’s true. The longer the line the more line spacing you need. Don’t](https://reader035.fdocuments.us/reader035/viewer/2022070805/5f03b8477e708231d40a701c/html5/thumbnails/21.jpg)
You are not in control of how your users experience
your site
![Page 22: Designing for Devices - TMCnet€¦ · The longer the line the more line spacing you need. Don’t know why, but it’s true. The longer the line the more line spacing you need. Don’t](https://reader035.fdocuments.us/reader035/viewer/2022070805/5f03b8477e708231d40a701c/html5/thumbnails/22.jpg)
RESPONSIVE DESIGN
BROKEN DOWN
![Page 23: Designing for Devices - TMCnet€¦ · The longer the line the more line spacing you need. Don’t know why, but it’s true. The longer the line the more line spacing you need. Don’t](https://reader035.fdocuments.us/reader035/viewer/2022070805/5f03b8477e708231d40a701c/html5/thumbnails/23.jpg)
Demo
DEVCON 5 SITE
![Page 24: Designing for Devices - TMCnet€¦ · The longer the line the more line spacing you need. Don’t know why, but it’s true. The longer the line the more line spacing you need. Don’t](https://reader035.fdocuments.us/reader035/viewer/2022070805/5f03b8477e708231d40a701c/html5/thumbnails/24.jpg)
Responsive Layout
• Start with a right sized browser
• Start designing 1 column
•Make it look right
• Then start attacking larger screen sizes
![Page 25: Designing for Devices - TMCnet€¦ · The longer the line the more line spacing you need. Don’t know why, but it’s true. The longer the line the more line spacing you need. Don’t](https://reader035.fdocuments.us/reader035/viewer/2022070805/5f03b8477e708231d40a701c/html5/thumbnails/25.jpg)
Grid Systems
• A few out there that handle this for you
• Bootstrap
•Responsive Grid System
•CSSGrid
• But know how to do it manually
![Page 26: Designing for Devices - TMCnet€¦ · The longer the line the more line spacing you need. Don’t know why, but it’s true. The longer the line the more line spacing you need. Don’t](https://reader035.fdocuments.us/reader035/viewer/2022070805/5f03b8477e708231d40a701c/html5/thumbnails/26.jpg)
Manually
• Floats
![Page 27: Designing for Devices - TMCnet€¦ · The longer the line the more line spacing you need. Don’t know why, but it’s true. The longer the line the more line spacing you need. Don’t](https://reader035.fdocuments.us/reader035/viewer/2022070805/5f03b8477e708231d40a701c/html5/thumbnails/27.jpg)
Manually
• display:
• table
• table-row
• table-cell
![Page 28: Designing for Devices - TMCnet€¦ · The longer the line the more line spacing you need. Don’t know why, but it’s true. The longer the line the more line spacing you need. Don’t](https://reader035.fdocuments.us/reader035/viewer/2022070805/5f03b8477e708231d40a701c/html5/thumbnails/28.jpg)
I prefer table layout
![Page 29: Designing for Devices - TMCnet€¦ · The longer the line the more line spacing you need. Don’t know why, but it’s true. The longer the line the more line spacing you need. Don’t](https://reader035.fdocuments.us/reader035/viewer/2022070805/5f03b8477e708231d40a701c/html5/thumbnails/29.jpg)
RESPONSIVE TYPOGRAPHY
![Page 30: Designing for Devices - TMCnet€¦ · The longer the line the more line spacing you need. Don’t know why, but it’s true. The longer the line the more line spacing you need. Don’t](https://reader035.fdocuments.us/reader035/viewer/2022070805/5f03b8477e708231d40a701c/html5/thumbnails/30.jpg)
Some fonts don’t look right at small
sizes.Especially elegant, thin, fonts
![Page 31: Designing for Devices - TMCnet€¦ · The longer the line the more line spacing you need. Don’t know why, but it’s true. The longer the line the more line spacing you need. Don’t](https://reader035.fdocuments.us/reader035/viewer/2022070805/5f03b8477e708231d40a701c/html5/thumbnails/31.jpg)
The longer the linethe more line spacing you need. Don’t know why, but it’s true.
The longer the line the more line spacing you need. Don’t know why, but it’s true.
![Page 32: Designing for Devices - TMCnet€¦ · The longer the line the more line spacing you need. Don’t know why, but it’s true. The longer the line the more line spacing you need. Don’t](https://reader035.fdocuments.us/reader035/viewer/2022070805/5f03b8477e708231d40a701c/html5/thumbnails/32.jpg)
The longer the linethe more line spacing you need. Don’t know why, but it’s true.
The longer the line the more line
spacing you need. Don’t know why,
but it’s true.
![Page 33: Designing for Devices - TMCnet€¦ · The longer the line the more line spacing you need. Don’t know why, but it’s true. The longer the line the more line spacing you need. Don’t](https://reader035.fdocuments.us/reader035/viewer/2022070805/5f03b8477e708231d40a701c/html5/thumbnails/33.jpg)
Some headers look
too big on devices.
![Page 34: Designing for Devices - TMCnet€¦ · The longer the line the more line spacing you need. Don’t know why, but it’s true. The longer the line the more line spacing you need. Don’t](https://reader035.fdocuments.us/reader035/viewer/2022070805/5f03b8477e708231d40a701c/html5/thumbnails/34.jpg)
RESPONSIVE IMAGES
![Page 35: Designing for Devices - TMCnet€¦ · The longer the line the more line spacing you need. Don’t know why, but it’s true. The longer the line the more line spacing you need. Don’t](https://reader035.fdocuments.us/reader035/viewer/2022070805/5f03b8477e708231d40a701c/html5/thumbnails/35.jpg)
It depends
![Page 36: Designing for Devices - TMCnet€¦ · The longer the line the more line spacing you need. Don’t know why, but it’s true. The longer the line the more line spacing you need. Don’t](https://reader035.fdocuments.us/reader035/viewer/2022070805/5f03b8477e708231d40a701c/html5/thumbnails/36.jpg)
width= 100%
![Page 37: Designing for Devices - TMCnet€¦ · The longer the line the more line spacing you need. Don’t know why, but it’s true. The longer the line the more line spacing you need. Don’t](https://reader035.fdocuments.us/reader035/viewer/2022070805/5f03b8477e708231d40a701c/html5/thumbnails/37.jpg)
Actually select multiple images
![Page 38: Designing for Devices - TMCnet€¦ · The longer the line the more line spacing you need. Don’t know why, but it’s true. The longer the line the more line spacing you need. Don’t](https://reader035.fdocuments.us/reader035/viewer/2022070805/5f03b8477e708231d40a701c/html5/thumbnails/38.jpg)
Not done yet
![Page 39: Designing for Devices - TMCnet€¦ · The longer the line the more line spacing you need. Don’t know why, but it’s true. The longer the line the more line spacing you need. Don’t](https://reader035.fdocuments.us/reader035/viewer/2022070805/5f03b8477e708231d40a701c/html5/thumbnails/39.jpg)
Unless you test on the device,
you haven’t tested
![Page 40: Designing for Devices - TMCnet€¦ · The longer the line the more line spacing you need. Don’t know why, but it’s true. The longer the line the more line spacing you need. Don’t](https://reader035.fdocuments.us/reader035/viewer/2022070805/5f03b8477e708231d40a701c/html5/thumbnails/40.jpg)
But I used an emulator
![Page 41: Designing for Devices - TMCnet€¦ · The longer the line the more line spacing you need. Don’t know why, but it’s true. The longer the line the more line spacing you need. Don’t](https://reader035.fdocuments.us/reader035/viewer/2022070805/5f03b8477e708231d40a701c/html5/thumbnails/41.jpg)
Unless you test on the device,
you haven’t tested
![Page 42: Designing for Devices - TMCnet€¦ · The longer the line the more line spacing you need. Don’t know why, but it’s true. The longer the line the more line spacing you need. Don’t](https://reader035.fdocuments.us/reader035/viewer/2022070805/5f03b8477e708231d40a701c/html5/thumbnails/42.jpg)
ADOBE SHADOW
![Page 43: Designing for Devices - TMCnet€¦ · The longer the line the more line spacing you need. Don’t know why, but it’s true. The longer the line the more line spacing you need. Don’t](https://reader035.fdocuments.us/reader035/viewer/2022070805/5f03b8477e708231d40a701c/html5/thumbnails/43.jpg)
![Page 44: Designing for Devices - TMCnet€¦ · The longer the line the more line spacing you need. Don’t know why, but it’s true. The longer the line the more line spacing you need. Don’t](https://reader035.fdocuments.us/reader035/viewer/2022070805/5f03b8477e708231d40a701c/html5/thumbnails/44.jpg)
Demo
Adobe Shadow
![Page 45: Designing for Devices - TMCnet€¦ · The longer the line the more line spacing you need. Don’t know why, but it’s true. The longer the line the more line spacing you need. Don’t](https://reader035.fdocuments.us/reader035/viewer/2022070805/5f03b8477e708231d40a701c/html5/thumbnails/45.jpg)
Responsive Resources
• http://www.alistapart.com/articles/responsive-web-design/
• http://www.abookapart.com/products/responsive-web-design
![Page 46: Designing for Devices - TMCnet€¦ · The longer the line the more line spacing you need. Don’t know why, but it’s true. The longer the line the more line spacing you need. Don’t](https://reader035.fdocuments.us/reader035/viewer/2022070805/5f03b8477e708231d40a701c/html5/thumbnails/46.jpg)
CONCLUSIONS
![Page 47: Designing for Devices - TMCnet€¦ · The longer the line the more line spacing you need. Don’t know why, but it’s true. The longer the line the more line spacing you need. Don’t](https://reader035.fdocuments.us/reader035/viewer/2022070805/5f03b8477e708231d40a701c/html5/thumbnails/47.jpg)
Source: http://www.asymco.com/2012/01/17/the-rise-and-fall-of-personal-computing/
![Page 48: Designing for Devices - TMCnet€¦ · The longer the line the more line spacing you need. Don’t know why, but it’s true. The longer the line the more line spacing you need. Don’t](https://reader035.fdocuments.us/reader035/viewer/2022070805/5f03b8477e708231d40a701c/html5/thumbnails/48.jpg)
Mobile Engagement
• Paypal mobile payments:
• 2009 - $141,000,000
• 2011- $4,000,000,000
• Fab - 2X more likely to buy on mobile
• Financial Times - 2x more likely to subscribe
• Flipboard - 3x more likely to engage
![Page 49: Designing for Devices - TMCnet€¦ · The longer the line the more line spacing you need. Don’t know why, but it’s true. The longer the line the more line spacing you need. Don’t](https://reader035.fdocuments.us/reader035/viewer/2022070805/5f03b8477e708231d40a701c/html5/thumbnails/49.jpg)
Mobile is not the distant future
![Page 50: Designing for Devices - TMCnet€¦ · The longer the line the more line spacing you need. Don’t know why, but it’s true. The longer the line the more line spacing you need. Don’t](https://reader035.fdocuments.us/reader035/viewer/2022070805/5f03b8477e708231d40a701c/html5/thumbnails/50.jpg)
Mobile done right can yield higher
returns
![Page 51: Designing for Devices - TMCnet€¦ · The longer the line the more line spacing you need. Don’t know why, but it’s true. The longer the line the more line spacing you need. Don’t](https://reader035.fdocuments.us/reader035/viewer/2022070805/5f03b8477e708231d40a701c/html5/thumbnails/51.jpg)
You cannot control your users
![Page 52: Designing for Devices - TMCnet€¦ · The longer the line the more line spacing you need. Don’t know why, but it’s true. The longer the line the more line spacing you need. Don’t](https://reader035.fdocuments.us/reader035/viewer/2022070805/5f03b8477e708231d40a701c/html5/thumbnails/52.jpg)
Meet them where they are with Responsive
Designs
![Page 53: Designing for Devices - TMCnet€¦ · The longer the line the more line spacing you need. Don’t know why, but it’s true. The longer the line the more line spacing you need. Don’t](https://reader035.fdocuments.us/reader035/viewer/2022070805/5f03b8477e708231d40a701c/html5/thumbnails/53.jpg)
Follow up?
Text
• Preso will be up at:- http://slideshare.net/tpryan
• Feel free to contact me- [email protected] http://terrenceryan.com- Twitter: @tpryan