MOBILE WEB          and why there shouldn’t be a mobile webWednesday, November 21, 12
Wednesday, November 21, 12
• Jorge Braz           • web developer @ Labs SAPO/UA           • jorge-braz@telecom.ptWednesday, November 21, 12
MOBILE WEBWednesday, November 21, 12
MOBILE WEB           • web vs. native           • responsive web (web apps vs. web pages)           • sapo mobile framewor...
WEB VS NATIVEWednesday, November 21, 12
Wednesday, November 21, 12
WEBWednesday, November 21, 12
WEB           • PHP, Rails, whatever server side language           • HTML5           • CSS3           • JSWednesday, Nove...
WEB ++Wednesday, November 21, 12
WEB ++           • easy to update (style.css?v=1)           • develop once, reach multiple platforms           • nice cont...
WEB --Wednesday, November 21, 12
WEB --           • depends heavily on hardware, low             performance           • depends heavily on firmware featur...
NATIVEWednesday, November 21, 12
NATIVE           • iOS (Objective-C)           • Android (Java)           • WP7 (some crappy thing)           • WP8 (HTML+...
NATIVE ++Wednesday, November 21, 12
NATIVE ++           • access to a marketplace (Apple Apps Store,             Google Play, etc), more exposure           • ...
NATIVE --Wednesday, November 21, 12
NATIVE --           • way more development time because you             have to make N apps (iOS, Android, WP,            ...
ASK YOURSELFWednesday, November 21, 12
ASK YOURSELF           • do you need specific hardware features?           • can you afford a large development team?     ...
RESPONSIVE           WEBWednesday, November 21, 12
There is no Mobile Web.           There is only The Web, which           we view in different ways.           There is als...
Wednesday, November 21, 12
WHAT IS IT ABOUT?Wednesday, November 21, 12
WHAT IS IT ABOUT?           • media queries           • viewport tagWednesday, November 21, 12
MEDIA QUERIESWednesday, November 21, 12
MEDIA QUERIES           • width                 • color           • height                • color-index           • device...
MEDIA QUERIESWednesday, November 21, 12
MEDIA QUERIES           <link rel="stylesheet" media="screen"           href="mobile.css">           <link rel="stylesheet...
MEDIA QUERIESWednesday, November 21, 12
MEDIA QUERIES           mobile rules           @media screen and (min-device-width: 640px) {           tablet rules       ...
MEDIA QUERIESWednesday, November 21, 12
MEDIA QUERIES           • device-width is key for high resolution             phones that might be considered tablets     ...
MEDIA QUERIESWednesday, November 21, 12
MEDIA QUERIESWednesday, November 21, 12
MEDIA QUERIESWednesday, November 21, 12
VIEWPORT TAGWednesday, November 21, 12
VIEWPORT TAG           <meta name="viewport" content="                   width=device-width,                   initial-sca...
BUT WHAT IS IT           REALLY ABOUT?Wednesday, November 21, 12
WHAT IS IT REALLY           ABOUT?Wednesday, November 21, 12
WHAT IS IT REALLY           ABOUT?           • it’s not a single piece of technology, but rather,             a set of tec...
SO WHY DO WE HAVE           MOBILE SPECIFIC           WEBSITES?             m.facebook.com   mobile.twitter.com   m.yahoo....
IT DEPENDS...Wednesday, November 21, 12
IT DEPENDS...           • sometimes it’s just easier to have separate sites           • support older phones (no media que...
ONE SITE USE CASE           TICKETLINE.PTWednesday, November 21, 12
ONE SITE USE CASE           TICKETLINE.PT           • one server-side thingy, one template,             multiple CSS rules...
TWO SITES USE CASE           SAPO.PT vs M.SAPO.PTWednesday, November 21, 12
TWO SITES USE CASE           SAPO.PT vs M.SAPO.PT           • not everything on SAPO has a mobile version;             m.s...
RESPONSIVE CONTENTWednesday, November 21, 12
RESPONSIVE CONTENT           • content first, navigation second           • prioritize           • don’t hide content, you...
MOBILE FIRSTWednesday, November 21, 12
MOBILE FIRST           • progressive enhancement           • CSS rules for less capable devices first           • larger s...
USEFUL LINKSWednesday, November 21, 12
USEFUL LINKS           • http://35.0m.sl.pt                   • http://www.alistapart.com/articles/responsive-web-design/ ...
SAPO MOBILE           FRAMEWORKWednesday, November 21, 12
Wednesday, November 21, 12
WHAT IS IT?Wednesday, November 21, 12
WHAT IS IT?           • it’s a mobile/tablet specific framework           • good for reading content (news, videos,       ...
VERSIONSWednesday, November 21, 12
VERSIONS           • touch++ devices: iOS (>5.0), Android (>3.0)           • touch-- devices: iOS (<5.0), Android (<3.0), ...
YEAH...           IT’S NOT EASY           TRYING TO           SUPPORT EVERY           SINGLE DEVICE.Wednesday, November 21...
MOBILE           DEVELOPMENT           TOOLSWednesday, November 21, 12
MOBILE DEV TOOLSWednesday, November 21, 12
MOBILE DEV TOOLS           • Google Chrome, because it’s Webkit, like iOS             and Android           • Chrome Inspe...
MOBILE TIPSWednesday, November 21, 12
GENERIC TIPSWednesday, November 21, 12
GENERIC TIPS           • design for retina, use CSS when possible           • if possible, use icon fonts (fontawesome)   ...
GENERIC TIPSWednesday, November 21, 12
GENERIC TIPS           • minify everything (CSS, JS)           • avoid CSS box shadows           • when using transforms, ...
GENERIC TIPSWednesday, November 21, 12
GENERIC TIPS           • don’t use :hover           • no horizontal scroll, thank you           • long vertical scroll? no...
GENERIC TIPSWednesday, November 21, 12
GENERIC TIPS           • test, test, test, test, test, test, test, test, test,             test, test, test, test, test, t...
HTML5 INPUT TYPES                text         number   e-mailWednesday, November 21, 12
HTML5 INPUT TYPES                 url         tel   dateWednesday, November 21, 12
ADD TO HOMESCREENWednesday, November 21, 12
ADD TO HOMESCREEN           • Google Maps on iOSWednesday, November 21, 12
HTML5BOILERPLATE.COM           HTML5BOILERPLATE.COM/MOBILEWednesday, November 21, 12
MODERNIZR.COMWednesday, November 21, 12
CANIUSE.COMWednesday, November 21, 12
DOCHUB.IOWednesday, November 21, 12
RESPONSIVE.ISWednesday, November 21, 12
MALTEWASSERMANN.COMWednesday, November 21, 12
MEDIAQUERI.ESWednesday, November 21, 12
FACEBOOK.COM/GROUPS/CSSPORTUGALWednesday, November 21, 12
VERSÃO ORIGINAL:Wednesday, November 21, 12
VERSÃO ORIGINAL:           • Luis Carmona           • webdesigner @ SAPO Multiplataforma           • lpccarmona@gmail.com ...
Upcoming SlideShare
Loading in...5
×

Mobileweb

801

Published on

This keynote credits go entirely to Luis Carmona - http://www.luiscarmona.com/

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
801
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
31
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Mobileweb

  1. 1. MOBILE WEB and why there shouldn’t be a mobile webWednesday, November 21, 12
  2. 2. Wednesday, November 21, 12
  3. 3. • Jorge Braz • web developer @ Labs SAPO/UA • jorge-braz@telecom.ptWednesday, November 21, 12
  4. 4. MOBILE WEBWednesday, November 21, 12
  5. 5. MOBILE WEB • web vs. native • responsive web (web apps vs. web pages) • sapo mobile framework • mobile web development tools • mobile tipsWednesday, November 21, 12
  6. 6. WEB VS NATIVEWednesday, November 21, 12
  7. 7. Wednesday, November 21, 12
  8. 8. WEBWednesday, November 21, 12
  9. 9. WEB • PHP, Rails, whatever server side language • HTML5 • CSS3 • JSWednesday, November 21, 12
  10. 10. WEB ++Wednesday, November 21, 12
  11. 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 onlineWednesday, November 21, 12
  12. 12. WEB --Wednesday, November 21, 12
  13. 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. 14. NATIVEWednesday, November 21, 12
  15. 15. NATIVE • iOS (Objective-C) • Android (Java) • WP7 (some crappy thing) • WP8 (HTML+CSS+JS ... wait ... what?)Wednesday, November 21, 12
  16. 16. NATIVE ++Wednesday, November 21, 12
  17. 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. 18. NATIVE --Wednesday, November 21, 12
  19. 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 costlyWednesday, November 21, 12
  20. 20. ASK YOURSELFWednesday, November 21, 12
  21. 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. 22. RESPONSIVE WEBWednesday, November 21, 12
  23. 23. There is no Mobile Web. There is only The Web, which we view in different ways. There is also no Desktop Web. Or Tablet Web. Thank you. Stephen HayWednesday, November 21, 12
  24. 24. Wednesday, November 21, 12
  25. 25. WHAT IS IT ABOUT?Wednesday, November 21, 12
  26. 26. WHAT IS IT ABOUT? • media queries • viewport tagWednesday, November 21, 12
  27. 27. MEDIA QUERIESWednesday, November 21, 12
  28. 28. MEDIA QUERIES • width • color • height • color-index • device-width • monochrome • device-height • resolution • orientation • scan • aspect-ratio • grid • device-aspect-ratio • device-pixel-ratioWednesday, November 21, 12
  29. 29. MEDIA QUERIESWednesday, November 21, 12
  30. 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. 31. MEDIA QUERIESWednesday, November 21, 12
  32. 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. 33. MEDIA QUERIESWednesday, November 21, 12
  34. 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 decisionsWednesday, November 21, 12
  35. 35. MEDIA QUERIESWednesday, November 21, 12
  36. 36. MEDIA QUERIESWednesday, November 21, 12
  37. 37. MEDIA QUERIESWednesday, November 21, 12
  38. 38. VIEWPORT TAGWednesday, November 21, 12
  39. 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. 40. BUT WHAT IS IT REALLY ABOUT?Wednesday, November 21, 12
  41. 41. WHAT IS IT REALLY ABOUT?Wednesday, November 21, 12
  42. 42. WHAT IS IT REALLY 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 firstWednesday, November 21, 12
  43. 43. SO WHY DO WE HAVE MOBILE SPECIFIC WEBSITES? m.facebook.com mobile.twitter.com m.yahoo.com m.sapo.pt gmail.comWednesday, November 21, 12
  44. 44. IT DEPENDS...Wednesday, November 21, 12
  45. 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 necessaryWednesday, November 21, 12
  46. 46. ONE SITE USE CASE TICKETLINE.PTWednesday, November 21, 12
  47. 47. ONE SITE USE CASE 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 easyWednesday, November 21, 12
  48. 48. TWO SITES USE CASE SAPO.PT vs M.SAPO.PTWednesday, November 21, 12
  49. 49. TWO SITES USE CASE 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 teamWednesday, November 21, 12
  50. 50. RESPONSIVE CONTENTWednesday, November 21, 12
  51. 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 phoneWednesday, November 21, 12
  52. 52. MOBILE FIRSTWednesday, November 21, 12
  53. 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 versionWednesday, November 21, 12
  54. 54. USEFUL LINKSWednesday, November 21, 12
  55. 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. 56. SAPO MOBILE FRAMEWORKWednesday, November 21, 12
  57. 57. Wednesday, November 21, 12
  58. 58. WHAT IS IT?Wednesday, November 21, 12
  59. 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 sitesWednesday, November 21, 12
  60. 60. VERSIONSWednesday, November 21, 12
  61. 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. 62. YEAH... IT’S NOT EASY TRYING TO SUPPORT EVERY SINGLE DEVICE.Wednesday, November 21, 12
  63. 63. MOBILE DEVELOPMENT TOOLSWednesday, November 21, 12
  64. 64. MOBILE DEV TOOLSWednesday, November 21, 12
  65. 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 simulatorWednesday, November 21, 12
  66. 66. MOBILE TIPSWednesday, November 21, 12
  67. 67. GENERIC TIPSWednesday, November 21, 12
  68. 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 everWednesday, November 21, 12
  69. 69. GENERIC TIPSWednesday, November 21, 12
  70. 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 manifestWednesday, November 21, 12
  71. 71. GENERIC TIPSWednesday, November 21, 12
  72. 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 siteWednesday, November 21, 12
  73. 73. GENERIC TIPSWednesday, November 21, 12
  74. 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, testWednesday, November 21, 12
  75. 75. HTML5 INPUT TYPES text number e-mailWednesday, November 21, 12
  76. 76. HTML5 INPUT TYPES url tel dateWednesday, November 21, 12
  77. 77. ADD TO HOMESCREENWednesday, November 21, 12
  78. 78. ADD TO HOMESCREEN • Google Maps on iOSWednesday, November 21, 12
  79. 79. HTML5BOILERPLATE.COM HTML5BOILERPLATE.COM/MOBILEWednesday, November 21, 12
  80. 80. MODERNIZR.COMWednesday, November 21, 12
  81. 81. CANIUSE.COMWednesday, November 21, 12
  82. 82. DOCHUB.IOWednesday, November 21, 12
  83. 83. RESPONSIVE.ISWednesday, November 21, 12
  84. 84. MALTEWASSERMANN.COMWednesday, November 21, 12
  85. 85. MEDIAQUERI.ESWednesday, November 21, 12
  86. 86. FACEBOOK.COM/GROUPS/CSSPORTUGALWednesday, November 21, 12
  87. 87. VERSÃO ORIGINAL:Wednesday, November 21, 12
  88. 88. VERSÃO ORIGINAL: • Luis Carmona • webdesigner @ SAPO Multiplataforma • lpccarmona@gmail.com • luiscarmona.netWednesday, November 21, 12
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×