Udvikling af mobilsites Einar Gislason / FTF. Mobilsites Mobilvenlige sites.

Præsentationer af emnet: "Udvikling af mobilsites Einar Gislason / FTF. Mobilsites Mobilvenlige sites."— Præsentationens transcript:

1 Udvikling af mobilsites Einar Gislason / FTF

2 Mobilsites Mobilvenlige sites

3 Mobilvenligt site Skal fungere på forskellige: Enheder Platforme Skærmstørrelser Skærmopløsninger (DPI/PPI)

4 Fokus på INDHOLD

5 Indhold først = Mobil først ≈ SEO :) Brugervenlighed Hastighed...

6 Mobil først Organisér indhold Prioritér indhold Less is more

7 Du har kun 1 kolonne!!

8 Mobiler: 1-2 kolonner Touch Tablets: 3-4 kolonner Touch Desktop: Store skærme Mus

9 Skærmstørrelse Desktop > mobil

10 Design til mobiler/tablets Læsbar tekst (for at undgå zoom-ing) Stor skrift Stort linieafstand Eksempel: Gmail

11 Præcision Mus > touch

12 Design til mobiler/tablets Store "action" elementer Links Menuer Formularer o.s.v.

13 Netværk Desktop > mobil

14 Design til mobiler/tablets Netværksforbindelsen er ikke altid god og mobiler er tit langsommere end alm. computere. Færre billeder (CSS3) Intet "autoplay" Væk med flash

15 Responsivt design (?)

16 Responsivt design Relative størrelser (% i stedet for px) Break points i CSS filen o CSS3 media queries Evt. responsivt javascript Polyfills for gamle browsere

17 Fordele ved responsivt design Samme indhold på alle enheder Alle links virker Kræver blot en browser Fokus på indhold (redaktionelt / teknisk)

18 Ulemper ved responsivt design Komplekst Kræver en anden tankegang Billeder o adaptive-images.com

19 Browserunderstøttelse Alle moderne browsere: Chrome Firefox Safari Opera Internet Explorer 9 IE8 og ældre understøttes med js

20 Hvorfor ikke en App?

21 Native Apps Fordele Adgang til mobilens funktioner Hurtige Ulemper Pris Godkendelses- procedurer Links Platform specifikke

22 Hvorfor ikke en App?

23 Web App!

24 Web Apps Fordele Adgang til mobilens funktioner (begrænset) Links Pris Genbrug af kode Virker på alle platforme Ulemper Ikke i App Store / Play Store Egner sig ikke (endnu) til spil

25 Hvad kan FTF tilbyde?

26 FTF tilbyder 4 modeller 1.Nyt site der er 100% responsivt 2.Omlægning af et site til responsivt layout 3.Nyt mobilvenligt subsite (m.domæne.dk) 4.Nyt mobilvenligt subsite der henter data fra et andet system TYPO3 RSS feeds

27 100% Responsivt 1 site for alle brugere

28 100% Responsivt site Til dem der skal have redesignet deres site. Process: Workshop/møde Wireframe Design Udvikling Overlevering/undervisning

29 Eksempler bostonglobe.com FTF har lavet: klfnet.dk safu.dk ak.gl Se flere her http://mediaqueri.es/

30 Næsten 100% Responsivt Fra gammelt til nyt

31 Site med fast bredde gjort mobilvenligt Ikke nyt design til desktop Når site < skærm, skift til responsivt Desktop først Begrænset af indholdets rækkefølge Dybe menuer skal muligvis tænkes om

32 Eksempel DMF.dk (ikke offentligt endnu) Orginal: www.dmf.dk Responsivt: www.dmf.dk/index.php?id=1030

33 Mobilt subsite m.domæne.dk

34 Et subsite med udvalgt indhold Til dem der kun vil præsentere noget af indholdet på mobilen. Relativt simpelt (når det drejer sig om nyheder) Egner sig godt til webapps med f.eks. offline Link problematik

35 Eksempler m.ftf.dk m.cs.dk Læg altid et link til www-sitet på m-sitet.

36 Mobilt subsite - RSS feeds For dem der ikke har TYPO3

37 Et site bygget på RSS feeds Til dem der ikke har en TYPO3 løsning Afhænger af RSS feeds Begrænset i funktionalitet