Download as PDF, PPTX
Uploaded byJorge Braz
Mobileweb
The document discusses the differences between mobile web and native mobile apps, and argues that responsive web design is preferable to separate mobile websites. It covers techniques for responsive design like media queries and viewport tags to adapt the layout for different screen sizes. The document also provides tips for mobile web development, including prioritizing touch interfaces, using fluid layouts, and extensively testing on mobile devices.
Mobileweb
- 1. MOBILE WEB and why there shouldn’t be a mobile web Wednesday, November 21, 12
- 2.
- 3. • Jorge Braz • web developer @ Labs SAPO/UA • jorge-braz@telecom.pt Wednesday, November 21, 12
- 4.
- 5. MOBILE WEB • web vs. native • responsive web (web apps vs. web pages) • sapo mobile framework • mobile web development tools • mobile tips Wednesday, November 21, 12
- 6. WEB VS NATIVE Wednesday,November 21, 12
- 7.
- 8.
- 9. WEB • PHP, Rails, whatever server side language • HTML5 • CSS3 • JS Wednesday, November 21, 12
- 10.
- 11. WEB ++ • easy to update (style.css?v=1) • develop once, reach multiple platforms • nice content reader (news, photos, videos) • more people know about the web and share that knowledge online Wednesday, November 21, 12
- 12.
- 13. WEB -- • depends heavily on hardware, low performance • depends heavily on firmware features • no access to certain hardware (camera, filesystem, accelerometer, etc) Wednesday, November 21, 12
- 14.
- 15. NATIVE • iOS (Objective-C) • Android (Java) • WP7 (some crappy thing) • WP8 (HTML+CSS+JS ... wait ... what?) Wednesday, November 21, 12
- 16.
- 17. NATIVE ++ • access to a marketplace (Apple Apps Store, Google Play, etc), more exposure • access to hardware, better performance • super fast interactions, less touch lag • better overall user experience • keeps user info safe (favorites, preferences) Wednesday, November 21, 12
- 18.
- 19. NATIVE -- • way more development time because you have to make N apps (iOS, Android, WP, etc), more expensive • way more design time (iOS, Android x 4), unhappy designers • updates are costly Wednesday, November 21, 12
- 20.
- 21. ASK YOURSELF • do you need specific hardware features? • can you afford a large development team? • will you need to update app features often? Wednesday, November 21, 12
- 22. RESPONSIVE WEB Wednesday, November 21, 12
- 23. There is noMobile Web. There is only The Web, which we view in different ways. There is also no Desktop Web. Or Tablet Web. Thank you. Stephen Hay Wednesday, November 21, 12
- 24.
- 25. WHAT IS ITABOUT? Wednesday, November 21, 12
- 26. WHAT IS ITABOUT? • media queries • viewport tag Wednesday, November 21, 12
- 27.
- 28. MEDIA QUERIES • width • color • height • color-index • device-width • monochrome • device-height • resolution • orientation • scan • aspect-ratio • grid • device-aspect-ratio • device-pixel-ratio Wednesday, November 21, 12
- 29.
- 30. MEDIA QUERIES <link rel="stylesheet" media="screen" href="mobile.css"> <link rel="stylesheet" media="screen and (min-device-width:640px)" href="tablet.css"> <link rel="stylesheet" media="all and (min- device-width:1024px)" href="desktop.css"> Wednesday, November 21, 12
- 31.
- 32. MEDIA QUERIES mobile rules @media screen and (min-device-width: 640px) { tablet rules } @media screen and (min-device-width: 1024px) and (orientation:landscape) { tablet horizontal rules } @media screen and (min-device-width: 1024px) { desktop rules } Wednesday, November 21, 12
- 33.
- 34. MEDIA QUERIES • device-width is key for high resolution phones that might be considered tablets when on landscape • orientation might be tricky. use it only for minor design decisions Wednesday, November 21, 12
- 35.
- 36.
- 37.
- 38.
- 39. VIEWPORT TAG <meta name="viewport" content=" width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" /> <meta name=”MobileOptimized” content=”320”> Wednesday, November 21, 12
- 40. BUT WHAT ISIT REALLY ABOUT? Wednesday, November 21, 12
- 41. WHAT IS ITREALLY ABOUT? Wednesday, November 21, 12
- 42. WHAT IS ITREALLY ABOUT? • it’s not a single piece of technology, but rather, a set of techniques and ideas that form a whole • one site, multiple viewports (mobile, tablet, desktop, tv) • touchscreen vs cursor vs remote • responsive content • mobile first Wednesday, November 21, 12
- 43. SO WHY DOWE HAVE MOBILE SPECIFIC WEBSITES? m.facebook.com mobile.twitter.com m.yahoo.com m.sapo.pt gmail.com Wednesday, November 21, 12
- 44.
- 45. IT DEPENDS... • sometimes it’s just easier to have separate sites • support older phones (no media queries support) • more focus on mobile, better mobile experience, better performance (touch matters) • trying to mimic a native app • legacy, sometimes necessary Wednesday, November 21, 12
- 46. ONE SITE USECASE TICKETLINE.PT Wednesday, November 21, 12
- 47. ONE SITE USECASE TICKETLINE.PT • one server-side thingy, one template, multiple CSS rules • only major difference is cursor interface vs touch interface when choosing seats • no native app look (back button, title bar, fixed main menu, etc), couldn’t care less • re-organizing HTML blocks is not easy Wednesday, November 21, 12
- 48. TWO SITES USECASE SAPO.PT vs M.SAPO.PT Wednesday, November 21, 12
- 49. TWO SITES USECASE SAPO.PT vs M.SAPO.PT • not everything on SAPO has a mobile version; m.sapo.pt ensures every content is mobile. • not all sites have an available dev team to update it • sometimes teams don’t have another option due to factors beyond their control • one team to create all mobile sites • two different links make sharing a living hell for the dev team Wednesday, November 21, 12
- 50.
- 51. RESPONSIVE CONTENT • content first, navigation second • prioritize • don’t hide content, you never know better than your users what they want • for some users, the only viewport to the web might be their mobile phone Wednesday, November 21, 12
- 52.
- 53. MOBILE FIRST • progressive enhancement • CSS rules for less capable devices first • larger screen, better hardware (most times), more rules • always use fallbacks, if not IE7 & IE8 will see mobile version Wednesday, November 21, 12
- 54.
- 55. USEFUL LINKS • http://35.0m.sl.pt • http://www.alistapart.com/articles/responsive-web-design/ • http://6xb.us.sl.pt • http://mobile.smashingmagazine.com/2012/04/19/why-we-shouldnt- make-separate-mobile-websites/ Wednesday, November 21, 12
- 56. SAPO MOBILE FRAMEWORK Wednesday, November 21, 12
- 57.
- 58. WHAT IS IT? Wednesday,November 21, 12
- 59. WHAT IS IT? • it’s a mobile/tablet specific framework • good for reading content (news, videos, photos) • one platform for all of SAPO’s mobile sites Wednesday, November 21, 12
- 60.
- 61. VERSIONS • touch++ devices: iOS (>5.0), Android (>3.0) • touch-- devices: iOS (<5.0), Android (<3.0), WP7 • cursor++ devices: Blackberry, Nokia, etc • cursor-- devices: crappy phones (<240px) Wednesday, November 21, 12
- 62. YEAH... IT’S NOT EASY TRYING TO SUPPORT EVERY SINGLE DEVICE. Wednesday, November 21, 12
- 63. MOBILE DEVELOPMENT TOOLS Wednesday, November 21, 12
- 64. MOBILE DEV TOOLS Wednesday,November 21, 12
- 65. MOBILE DEV TOOLS • Google Chrome, because it’s Webkit, like iOS and Android • Chrome Inspector, now with user agents, screen sizes and touch events • iOS SDK for iPhone + iPad simulator, Android SDK for Android simulator Wednesday, November 21, 12
- 66.
- 67.
- 68. GENERIC TIPS • design for retina, use CSS when possible • if possible, use icon fonts (fontawesome) • remember, when developing, things will look bigger on your desktop screen • min font size? 16px. too big? cry me a river... • fat fingers (44x44) • use sprites, now more than ever Wednesday, November 21, 12
- 69.
- 70. GENERIC TIPS • minify everything (CSS, JS) • avoid CSS box shadows • when using transforms, go for 3D transforms • position: fixed; • -webkit-overflow-scrolling: touch; • 100% webapp? consider cache manifest Wednesday, November 21, 12
- 71.
- 72. GENERIC TIPS • don’t use :hover • no horizontal scroll, thank you • long vertical scroll? no prob. • use fluid layouts • provide ways to change viewport or view desktop site Wednesday, November 21, 12
- 73.
- 74. GENERIC TIPS • test, test, test, test, test, test, test, test, test, test, test, test, test, test, test, test, test, test, test, test, test, test, test, test, test, test, test, test, test, test, test, test, test, test, test, test, test, test, test, test, test, test, test, test, test, test, test, test, test, test, test, test, test, test, test, test, test, test, test, test, test, test, test, test, test, test, test, test, test, test, test, test Wednesday, November 21, 12
- 75. HTML5 INPUT TYPES text number e-mail Wednesday, November 21, 12
- 76. HTML5 INPUT TYPES url tel date Wednesday, November 21, 12
- 77. ADD TO HOMESCREEN Wednesday,November 21, 12
- 78. ADD TO HOMESCREEN • Google Maps on iOS Wednesday, November 21, 12
- 79. HTML5BOILERPLATE.COM HTML5BOILERPLATE.COM/MOBILE Wednesday, November 21, 12
- 80.
- 81.
- 82.
- 83.
- 84.
- 85.
- 86.
- 87.
- 88. VERSÃO ORIGINAL: • Luis Carmona • webdesigner @ SAPO Multiplataforma • lpccarmona@gmail.com • luiscarmona.net Wednesday, November 21, 12