Mobileweb

MOBILE WEB and why there shouldn’t be a mobile web

Wednesday, November 21, 12

• Jorge Braz
• web developer @ Labs SAPO/UA
• jorge-braz@telecom.pt


MOBILE WEB


MOBILE WEB
• web vs. native
• responsive web (web apps vs. web pages)
• sapo mobile framework
• mobile web development tools
• mobile tips


WEB VS NATIVE


WEB


WEB

• PHP, Rails, whatever server side language
• HTML5
• CSS3
• JS


WEB ++


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


WEB --


WEB --
• depends heavily on hardware, low
performance
• depends heavily on firmware features
• no access to certain hardware (camera,
filesystem, accelerometer, etc)


NATIVE


NATIVE

• iOS (Objective-C)
• Android (Java)
• WP7 (some crappy thing)
• WP8 (HTML+CSS+JS ... wait ... what?)


NATIVE ++


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)


NATIVE --


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


ASK YOURSELF


ASK YOURSELF

• do you need specific hardware features?
• can you afford a large development team?
• will you need to update app features often?


RESPONSIVE
WEB


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 Hay

WHAT IS IT ABOUT?


WHAT IS IT ABOUT?

• media queries
• viewport tag


MEDIA QUERIES


MEDIA QUERIES
• width • color
• height • color-index
• device-width • monochrome
• device-height • resolution
• orientation • scan
• aspect-ratio • grid
• device-aspect-ratio • device-pixel-ratio


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">


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
}


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


VIEWPORT TAG


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”>


BUT WHAT IS IT
REALLY ABOUT?


WHAT IS IT REALLY
ABOUT?


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 first


SO WHY DO WE HAVE
MOBILE SPECIFIC
WEBSITES?
m.facebook.com mobile.twitter.com m.yahoo.com m.sapo.pt gmail.com


IT DEPENDS...


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


ONE SITE USE CASE
TICKETLINE.PT


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 easy


TWO SITES USE CASE
SAPO.PT vs M.SAPO.PT


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 team


RESPONSIVE CONTENT


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


MOBILE FIRST


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


USEFUL LINKS


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/


SAPO MOBILE
FRAMEWORK


WHAT IS IT?


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


VERSIONS


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)


YEAH...
IT’S NOT EASY
TRYING TO
SUPPORT EVERY
SINGLE DEVICE.

MOBILE
DEVELOPMENT
TOOLS


MOBILE DEV TOOLS


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


MOBILE TIPS


GENERIC TIPS


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


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


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


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


HTML5 INPUT TYPES

text number e-mail


HTML5 INPUT TYPES

url tel date


ADD TO HOMESCREEN


ADD TO HOMESCREEN
• Google Maps on iOS


HTML5BOILERPLATE.COM
HTML5BOILERPLATE.COM/MOBILE


MODERNIZR.COM


CANIUSE.COM


DOCHUB.IO


RESPONSIVE.IS


MALTEWASSERMANN.COM


MEDIAQUERI.ES


FACEBOOK.COM/GROUPS/CSSPORTUGAL


VERSÃO ORIGINAL:


VERSÃO ORIGINAL:

• Luis Carmona
• webdesigner @ SAPO Multiplataforma
• lpccarmona@gmail.com
• luiscarmona.net


Mobileweb

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (6)

Similar to Mobileweb

Similar to Mobileweb (20)

Recently uploaded

Recently uploaded (20)

Mobileweb