Mobileweb

MOBILE WEBand 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

• web vs. native

• responsive web (web apps vs. web pages)

• sapo mobile framework

• mobile web development tools

• mobile tips

MOBILE WEB

WEB VS NATIVE

• PHP, Rails, whatever server side language

• HTML5

• CSS3

• JS

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

• depends heavily on hardware, low performance

• depends heavily on firmware features

• no access to certain hardware (camera, filesystem, accelerometer, etc)

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

• 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

• do you need specific hardware features?

• can you afford a large development team?

• will you need to update app features often?

RESPONSIVEWEB

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?

• media queries

• viewport tag

MEDIA QUERIES

MEDIA QUERIES• width

• height

• device-width

• device-height

• orientation

• aspect-ratio

• device-aspect-ratio

• color

• color-index

• monochrome

• resolution

• scan

• grid

• device-pixel-ratio

MEDIA QUERIES

MEDIA QUERIES<link rel="stylesheet" media="screen" href="mobile.css">

MEDIA QUERIES

MEDIA QUERIESmobile 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

MEDIA QUERIES

VIEWPORT TAG

VIEWPORT TAG<meta name="viewport" content="

width=device-width,

initial-scale=1,

minimum-scale=1,

maximum-scale=1,

user-scalable=no"

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 HAVEMOBILE 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 CASETICKETLINE.PT

ONE SITE USE CASE• 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

TICKETLINE.PT

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

TWO SITES USE CASE• 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

SAPO.PT vs M.SAPO.PT

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?

• it’s a mobile/tablet specific framework

• good for reading content (news, videos, photos)

• one platform for all of SAPO’s mobile sites

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

• 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

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

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

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

HTML5 INPUT TYPES

text number e-mail

HTML5 INPUT TYPES

url tel date

ADD TO HOMESCREEN

ADD TO HOMESCREEN• Google Maps on iOS

HTML5BOILERPLATE.COMHTML5BOILERPLATE.COM/MOBILE

MODERNIZR.COM

CANIUSE.COM

DOCHUB.IO

RESPONSIVE.IS

MALTEWASSERMANN.COM

MEDIAQUERI.ES

FACEBOOK.COM/GROUPS/CSSPORTUGAL

VERSÃO ORIGINAL:

• Luis Carmona

• webdesigner @ SAPO Multiplataforma

• lpccarmona@gmail.com

• luiscarmona.net

VERSÃO ORIGINAL:

Mobileweb

Technology

Building Cross-Platform Applications...Native, Hybrid, and Web, all from JavaScript code base iPhone, iPad, Android, Tizen, BlackBerry, MobileWeb! Enables code reuse (65-90%) and shortens

Webdesign2 mobileweb

mobileweb-webmobile vs web browser

mobileWeb Application Testing

3 A COSTO SOTTOIL CLIENTE È NEL SUO REGNO 3 109 43” A+ #tecnologiafacile NEGOZIO MOBILEWEB La vendita dei prodotti sottocosto è effettuata ai sensi e nel rispetto del DPR 218

WGM4 - Pecha Kucha - MobileWeb

Mobileweb planning2

Hợp tác phân phối kho nội dung giải trí MobileWeb

20111031 MobileWeb at TDC

Mobileweb Company service examples

- 0 - IANA Registration for ENUMservice Mobile Web draft-ra-shin-enum-mobileweb-01 Aug. 5. 2005 Jongyun Ra, Sungwoo Shin, Yongwan Ju, Weon Kim National

MobileWeb setupguide.ppt [互換モード]...目次第1章セットアップ 1.1セットアップの準備 1-1 1.2管理画面の利用法 1-13 1.3独自ドメイン登録・変更申請について

PHIÊN BẢN DÙNG TRÊN MobileWeb - maybank … · Hướng Dẫn Sử Dụng – MobileWeb Trang 1/ 36 Vietnam HƯỚNG DẪN SỬ DỤNG MOBILEWEB PHIÊN BẢN DÙNG TRÊN MobileWeb

A TASSO ZEROTAN 0% TAEG 0%... #tecnologiafacile NEGOZIO MOBILEWEB dal 13 al 31 dicembre offerte sottocosto valide dal 13 al 22 dicembre Offerta valida nei Punti Vendita indicati. La

MobileWeb setupguide-v1.3.ppt [互換モード]目次第1章セットアップ 1.1セットアップの準備 1-1 1.2管理画面の利用法 1-13 1.3独自ドメイン登録・変更申請について

Mobile Web - Kennesaw State Universityksuweb.kennesaw.edu/~mhan9/ALG/it4323/3203/m6-mobileweb...Responsive Web Design (RWD) is a Web design approach aimed at crafting sites to provide

Manual set up of Microsoft Windows based PCs with ø …flash.o2.co.uk/productsservices/mobileweb/pdfs/Windows manual set...Manual set up of Microsoft ® Windows ® based PCs with

2010.03.21 mobileweb forbusiness_slideshare