Henrik EkelöfGränssnittsutvecklare på Valtech

Juni 2010Jag, Daniela Baccarini (Vårdguiden) & Visar Ulaj (Valtech)

Hur?

Du kan hitta en lämplig nivå för hur du ska anpassa din webbsajt för mobilen

Använd Webbstandarder

Bygg framåtkompatibelt

Browser sniffing

• Titta på webbläsarens User Agent

• Leverera sidan eller ett felmeddelande

• Browser sniffing = dåligt!

• Browser sniffing för att förbättra upplevelsen = OK!

Använd webbstandarder

Webbstandarder

✤ Separera innehåll från presentation och beteende

✤ Validerande (X)HTML

✤ Semantiskt uppmärkt innehåll

✤ CSS (inte tabeller) för layout

✤ Unobtrusive JavaScript för beteende

= stödja alla våra användare

Bakåtkompatibel

Är det värt det?

Acceptera att äldre browsers inte klarar ny teknik och att sidan ser

annorlunda ut(men informationen är åtkomlig)

Utgå alltid från minsta gemensamma nämnare

Semantiskt uppmärkt innehåll

HTML

Framåtkompatibel

✤ Webbstandarder✤ Progressive Enhancement

✤ Internet Explorer 9

✤ Internet Explorer 8

✤ Internet Explorer 7

✤ Mozilla Firefox

✤ Google Chrome

✤ Safari

✤ Opera

✤ Internet Explorer 6 (om vi har otur)

Webbläsare 7-8

Webbläsare för mobiler

• Android WebKit

• BlackBerry Browser

• Blazer

• BOLT browser

• Fennec (Firefox for mobile)

• IbisBrowser

• Internet Explorer Mobile

• Iris Browser

• jB5 Browser

• JOCA by InteracT!V

• Kindle Basic Web

37+• Safari

• Samsung WebKit

• Skweezer

• Skyfire Mobile Browser

• Steel

• Teashark

• ThunderHawk

• Tristit

• UCWEB

• uZard Web

• Vision Mobile Browser

• WinWAP

• xScope

• Myriad Browser (tidigare Openwave Mobile Browser)

• NetFront

• NetSailor Browser

• Nokia S60 WebKit

• Nokia Series 40 Browser

• Obigo Browser

• Opera Mini

• Opera Mobile

• Ozone

• Palm WebOS Browser

• Pixo by Sun Microsystems

• PlayStation Portable web browser

• Polaris Browser

Opera (Presto)

• Android WebKit

• BlackBerry Browser

• Blazer

• BOLT browser

• Fennec (Firefox for mobile)

• IbisBrowser

• Internet Explorer Mobile

• Iris Browser

• jB5 Browser

• JOCA by InteracT!V

• Kindle Basic Web

• Safari

• Samsung WebKit

• Skweezer

• Skyfire Mobile Browser

• Steel

• Teashark

• ThunderHawk

• Tristit

• UCWEB

• uZard Web

• Vision Mobile Browser

• WinWAP

• xScope

• Myriad Browser (tidigare Openwave Mobile Browser)

• NetFront

• NetSailor Browser

• Nokia S60 WebKit

• Nokia Series 40 Browser

• Obigo Browser

• Opera Mini

• Opera Mobile

• Ozone

• Palm WebOS Browser

• Pixo by Sun Microsystems

• PlayStation Portable web browser

• Polaris Browser

WebKit

• Android WebKit

• BlackBerry Browser

• Blazer

• BOLT browser

• Fennec (Firefox for mobile)

• IbisBrowser

• Internet Explorer Mobile

• Iris Browser

• jB5 Browser

• JOCA by InteracT!V

• Kindle Basic Web

• Safari

• Samsung WebKit

• Skweezer

• Skyfire Mobile Browser

• Steel

• Teashark

• ThunderHawk

• Tristit

• UCWEB

• uZard Web

• Vision Mobile Browser

• WinWAP

• xScope

• Myriad Browser (tidigare Openwave Mobile Browser)

• NetFront

• NetSailor Browser

• Nokia S60 WebKit

• Nokia Series 40 Browser

• Obigo Browser

• Opera Mini

• Opera Mobile

• Ozone

• Palm WebOS Browser

• Pixo by Sun Microsystems

• PlayStation Portable web browser

• Polaris Browser

Hur länge har du haft din mobiltelefon?

När tänker du byta?

Hur gamla telefoner och hur många konstiga (gamla) webbläsare är det värt att

bygga specialanpassningar för?

Bygg för mobiler som följer standarder

Ge gamla telefoner väldigt enkel design utan krusiduller.

Teknik

✤ Semantisk markup

✤ Separera innehåll, presentation & beteende

✤ Alt-taggar på bilder i innehåll

✤ Färre requests

✤ Förenklad HTML (?)

✤ Undvik positionering och floats

✤ Använd padding/margin sparsamt

✤ Undvik fasta bredder

?

Media Types (sedan 1998)

<link rel="stylesheet" href="screen.css" media="screen"/>

<link rel="stylesheet" href="handheld.css" media="handheld"/>

✤ all

✤ braille

✤ embossed (braille printers)

✤ handheld

✤ print

✤ projection

✤ screen

✤ speech

✤ tty (terminaler med fix teckenstorlek)

✤ tv

Media Types

Fungerar det då?

✤ Vissa läser enbart handheld

✤ Vissa läser enbart handheld (om det finns), annars screen

✤ Vissa läser både handheld och screen

✤ Vissa läser enbart screen

Media Queries

@media screen and (max-device-width: 320px) {

... Alternativ CSS för små skärmar ...

}

Hur får vi då in det här på vår befintliga sajt?

Small

• Använd din befintliga sajt

• CSS Media Types

• CSS Media Queries

• JavaScript som laddar “lagom” mycket beteende beroende på typ av enhet

• Samma som SMALL plus:

• Anpassad HTML - Välj bort, förenkla, förbättra

• Växla tema med hjälp av Browser sniffing

eller

använd subdomän

• Separat lösning för mobilen

• Helt egen sidstruktur

• Helt egen markup

• Redirect mellan sajter? - Browser sniffing

LargeMedium

S eller M vs L

SMALL eller MEDIUM

+

• CSS Media Queries är framtidens teknik

• Enkelt, billigt

• Drift & underhåll av EN lösning

-

• Begränsade möjligheter att specialanpassa mobilsajtens innehåll

LARGE

+

• Obegränsade möjligheter att specialanpassa mobilsajtens innehåll

-

• Drift & underhåll av TVÅ lösningar

Sammanfattning

Gör någonting med de möjligheter som finns nu!

Lägg inte mycket energi på att anpassa bakåt: Utvecklingen går fort, användandet av webben med gammal teknik är litet och sjunker

Webbstandarder framtidssäkrar din sajt

Länkar

✤ Meta Viewporthttp://www.w3.org/TR/mwabp/#bp-viewport

✤ Viewport (Safari HTML Reference Apple-specific)http://ekelof.net/x/m1

✤ Configuring the viewport (Safari Web Content Guide)http://ekelof.net/x/m2

✤ Media typeshttp://www.w3.org/TR/CSS2/media.html

✤ Media Querieshttp://www.w3.org/TR/css3-mediaqueries/

✤ Safe media querieshttp://dev.opera.com/articles/view/safe-media-queries/

✤ Media querieshttps://developer.mozilla.org/en/css/media_queries

✤ CSS3 Media Queries (Presentation)http://www.slideshare.net/maxdesign/css3-media-queries

✤ W3C mobileOK Checkerhttp://validator.w3.org/mobile/

✤ mobiReady testing toolhttp://ready.mobi/launch.jsp?locale=en_EN

✤ dotMobi emulatorhttp://emulator.mtld.mobi/emulator.php

✤ Browserscope (browser profiling)http://www.browserscope.org/

✤ How to serve the right content to mobile browsershttp://dev.opera.com/articles/view/how-to-serve-the-right-content-to-mobile/CSS

✤ Compatibility and Internet Explorerhttp://msdn.microsoft.com/en-us/library/cc351024%28VS.85%29.aspx

✤ Metrics, Layout Guidelines, and Tips (iPhone Human Interface Guidelines for WebApplications)http://ekelof.net/x/m3

✤ Using CSS Media Queries to Style Your iPhone and iPad HTMLhttp://broadcast.oreilly.com/2010/04/using-css-media-queries-ipad.html

✤ The orientation media queryhttp://www.quirksmode.org/blog/archives/2010/04/the_orientation.html

✤ Web Development For The iPhone And iPad: Getting Startedhttp://www.smashingmagazine.com/2010/05/28/web-development-for-the-iphone-and-ipad-getting-started/

✤ iPhone Development: 12 Tips To Get You Startedhttp://articles.sitepoint.com/article/iphone-development-12-tips

✤ Göm adressraden i moderna telefoner t.ex. iPhone:http://www.iphonemicrosites.com/tutorials/how-to-hide-the-address-bar-in-mobilesafari/

✤ Return of the Mobile Stylesheethttp://www.alistapart.com/articles/return-of-the-mobile-stylesheet/

✤ Best Practices for Speeding Up Your Web Sitehttp://developer.yahoo.com/performance/rules.html

✤ Rethinking the Mobile Webhttp://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu

Tack!