Mobileweb
Upcoming SlideShare
Loading in...5
×
 

Mobileweb

on

  • 976 views

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

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

Statistics

Views

Total Views
976
Views on SlideShare
976
Embed Views
0

Actions

Likes
0
Downloads
30
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Mobileweb Mobileweb Presentation Transcript

  • 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 framework • mobile web development tools • mobile tipsWednesday, November 21, 12
  • WEB VS NATIVEWednesday, November 21, 12
  • Wednesday, November 21, 12
  • WEBWednesday, November 21, 12
  • WEB • PHP, Rails, whatever server side language • HTML5 • CSS3 • JSWednesday, November 21, 12
  • WEB ++Wednesday, November 21, 12
  • 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
  • WEB --Wednesday, November 21, 12
  • 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
  • NATIVEWednesday, November 21, 12
  • NATIVE • iOS (Objective-C) • Android (Java) • WP7 (some crappy thing) • WP8 (HTML+CSS+JS ... wait ... what?)Wednesday, November 21, 12
  • NATIVE ++Wednesday, November 21, 12
  • 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
  • NATIVE --Wednesday, November 21, 12
  • 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
  • ASK YOURSELFWednesday, November 21, 12
  • 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
  • RESPONSIVE WEBWednesday, November 21, 12
  • 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
  • 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-width • monochrome • device-height • resolution • orientation • scan • aspect-ratio • grid • device-aspect-ratio • device-pixel-ratioWednesday, November 21, 12
  • MEDIA QUERIESWednesday, November 21, 12
  • 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
  • MEDIA QUERIESWednesday, November 21, 12
  • 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
  • MEDIA QUERIESWednesday, November 21, 12
  • 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
  • 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-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" /> <meta name=”MobileOptimized” content=”320”>Wednesday, November 21, 12
  • 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 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
  • 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
  • IT DEPENDS...Wednesday, November 21, 12
  • 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
  • ONE SITE USE CASE TICKETLINE.PTWednesday, November 21, 12
  • 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
  • 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.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
  • RESPONSIVE CONTENTWednesday, November 21, 12
  • 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
  • MOBILE FIRSTWednesday, November 21, 12
  • 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
  • USEFUL LINKSWednesday, November 21, 12
  • 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
  • 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, photos) • one platform for all of SAPO’s mobile sitesWednesday, November 21, 12
  • VERSIONSWednesday, November 21, 12
  • 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
  • YEAH... IT’S NOT EASY TRYING TO SUPPORT EVERY SINGLE DEVICE.Wednesday, November 21, 12
  • 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 Inspector, now with user agents, screen sizes and touch events • iOS SDK for iPhone + iPad simulator, Android SDK for Android simulatorWednesday, November 21, 12
  • 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) • 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
  • GENERIC TIPSWednesday, November 21, 12
  • 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
  • GENERIC TIPSWednesday, November 21, 12
  • 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
  • GENERIC TIPSWednesday, November 21, 12
  • 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
  • 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 • luiscarmona.netWednesday, November 21, 12