Avancerade Webbteknologier 2. AD11g Göteborg 2012 Mobilanpassning

Transkript

1 Avancerade Webbteknologier 2 AD11g Göteborg 2012 Mobilanpassning

2 Idag Reality Check Strategier för mobilanpassning Problem vid mobilanpassning Exempel på några ramverk

3 Statistik Det finns väldigt mycket hype/reklam/propaganda kring smartphones och smartphone-användande idag. Detta gör det ganska troligt att vår uppfattning om detta område ej stämmer överrens med verkligheten (Det finns en allmän lärdom att dra här ;) Ett varningens ord Ta siffrorna med en nypa salt Var medveten om att resultaten kan variera kraftigt mellan olika undersökningar Orsaker: Olika metoder/populationer, i vissa fall maskerad reklam, Snabbt föränderligt område

4 Reality Check Hur många äger en smart phone?

5 Reality Check 80% av världens befolkning äger minst en mobil, 20% av alla mobiler är en smart phone => ~16%(?) smart phone penetration world wide Källa (2012: ethinking-the-mobile-web-by-yiibu)

6 Reality Check Vilket år släpptes de mobiltelefoner som är mest använda idag?

7 Reality Check Svårt att hitta entydig statistik men förmodligen släpptes de för ca. 4-5 år sedan. => De populäraste / hetaste mobilerna är inte nödvändigtvis de mest använda mobilerna.

8 Reality Check Hur stor andel av världens befolkning äger en iphone? Hur ser det ut med andelen iphones vs. andelen Android-lurar?

9 Reality Check iphone: ~17%(?) Market Share (Innebär Market Share andelen av totala antalet mobiltelefoner, Andelen av totala antalet smartphones, Andelen av sålda smartphone 2011, Andelen av sålda smartphones i USA första halvåret 2012, etc?) => 0,8*0,2*0,17 = ~2-3% iphone penetration world wide Android vs. iphone: ~2:1

10 Reality Check - Sverige Hur stor andel av den svenska befolkningen äger en smart phone? Vilken åldersgrupp är mest trolig att äga en smart phone och hur hög är penetrationen där? Hur ser fördelningen mellan män/kvinnor ut?

11 Reality Check - Sverige ~35% smart phone penetration för hela befolkningen Mest trolig: åldersgruppen ~60-70% smart phone penetration Män/Kvinnor: Skiljer sig något, men väldigt grovt räknat ~50/50 ~80-90% använder sin smartphone för webbsurf Vad innebär ovanstående punkter?

12 Faktorer Vilka faktorer påverkar utvecklingen av en mobilanpassad sida?

13 Faktorer Utvecklingskostnad Tid Upplevelse Kundnytta Tillgängligthet Features Användarvänlighet Bandbredd Prestanda Funktionalitet etc. => Komplext problem (jfr. webbutveckling)

14 Var medveten om Mobilanpassning är inte ett problem som är löst, även om vissa vill ge det intrycket. Alla lösningar för mobilanpassningar brottas med stora, grundläggande, problem (t.ex. kostnadsfrågor eller användbarhetsfrågor). Beroende på kraven på aktuell applikation är detta allt från ett enormt problem till ett icke-befintligt problem. Det här området har fortfarande relativt hög utvecklingstakt Räkna med att grundläggande antaganden kan ha ändrats om vi återvänder till området om ett år. Dock: Det går att göra lösningar som är tillräckligt bra med relativt mogna ramverk idag.

15 Strategier för mobilanpassning Progressive Enhancement Bas: Kärnfunktionalitet Utöka kärnfunktionaliteten om aktuell klient stödjer det. Mobile First Graceful Degradation Bas: En cutting edge webbsite med extra allt Om aktuell klient inte stödjer vissa tekniker fall tillbaka på äldre/enklare tekniker Vilken strategi bör vi föredra?

16 Strategier I normalfallet: Progressive Enhancement/ Mobile First => Smartphone-upplevelsen kommer ha högsta prio. Graceful Degradation => Desktop-upplevelsen kommer ha högsta prio. Om smartphone-upplevelsen har högsta prio innebär det att förmodligen i praktiken att desktop-upplevelsen kommer få mycket lägre prio, även om desktop-upplevelsen på papperet har prio 2. => Använd inte Graceful Degradation om du förväntar dig att 80% av användarna kommer vara mobilanvändare och vice versa.

17 Strategier Hur fungerar OperaMini?

18 Strategier Proxy Browser: En anpassad version av hemsidan genereras på operas servrar och denna sida skickas till klienten ingen onödig data. => Ett bra val då du surfar med låg bandbredd.

19 Strategier Responsive Samma URL Samma HTML CSS (media queries) används för att förändra utseendet. Responsive design har väldigt stor fokus idag - nackdelar/kritik mot denna lösning hamnar i skymundan. Vad finns det för anledningar att inte använda Responsive design?

20 Problem med responsive Ej möjligt eller önskvärt med olika utseenden (Relaterat: Olika utseenden är ett problem ur ett UI-design perspektiv ex. användarvänlighet/anpassning) Ger ofta inga prestandafördelar Leder till högre utvecklings/underhållskostnad Detta innebär inte att man inte bör använda Responsive Design Lärdomen är att när något är Bäst, helt utan nackdelar så bör man bli misstänksam.

21 Dynamic Samma URL Separat HTML Separat CSS Problem Potentiella SEO problem Potentiellt ännu högre utvecklingskostnad Exempel: ackageoftheweek10newmobileviewengine sforaspnetmvc3speccompatiblewithaspn ETMVC4.aspx

22 Static Separat URL Separat HTML Separat CSS Problem Samma som vid Dynamic Djupa länkar

23 Bortse från problemet Ett alternativ att vara medveten om är att vi helt kan välja att bortse från problemet och fastställa att en Desktopwebsite fungerar tillräckligt bra. Exempel: Lägg märke till att ovanstående författare tycker att Responsive Design är en bra lösning generellt sett, hans poäng är att det inte är den bästa lösningen för alla webbsites.

24 Utveckling Använd ramverk att utveckla lösningar för detta på egen hand är potentiellt väldigt dyrt. Dock bör du vara medveten om vilken strategi ramverket använder (Responsive (Progressive Enhancement/Graceful Degradation), Dynamic, Static).

25 Smartphones som saknar touch Utveckling Var medveten om Viktigt! Anpassa content (även bilder) för aktuell klient. Responsive design innebär inte nödvändigtvis att färre resurser laddas Är detta ett problem? (Kontrollera att ert ramverk hanterar detta om så är fallet). Display: None innebär inte att resursen inte laddas. De queries kommer ge false för de flesta devices.

26 Ett axplock av resolutions

27 Testning Hur testar vi detta?

28 Testning Vi kan inte testa allt om vi inte har enorma resurser tillgängliga. Sätt mål för vad som skall fungera Specifika modeller (de vanligaste för aktuell målgrupp) Oftast bättre: Specifika features (Bör baseras på vanliga modeller) I bästa fall får ni ovanstående från ramverket. Var beredd att snabbt reagera på rapporterade problem Vad innebär dåliga reviews/kritik för oss?

29 Exempel på ramverk jquery Mobile Baserat på jquery/jquery UI Touch enabled, Progressive Enhancement, cross-platform

30 Exempel på ramverk Foundation Responsive Front-End Framework

31 Exempel på ramverk Kendo UI UI Framework => Mobile Framework

32 Exempel på ramverk Modernizr Javascript feature detection Graceful Degradation Ingår i MVC 3 Template

33 Exempel på ramverk MVC 4

34 Exempel på ramverk 51Degrees.Mobi C#/C/php/java Ej gratis

35 Till nästa gång Projekt Tor: Inför release