Udvikling af mobilsites Einar Gislason / FTF

Mobilsites Mobilvenlige sites

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

Fokus på INDHOLD

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

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

Du har kun 1 kolonne!!

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

Skærmstørrelse Desktop > mobil

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

Præcision Mus > touch

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

Netværk Desktop > mobil

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

Responsivt design (?)

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

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

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

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

Hvorfor ikke en App?

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

Hvorfor ikke en App?

Web App!

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

Hvad kan FTF tilbyde?

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

100% Responsivt 1 site for alle brugere

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

Eksempler bostonglobe.com FTF har lavet: klfnet.dk safu.dk ak.gl Se flere her

Næsten 100% Responsivt Fra gammelt til nyt

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

Eksempel DMF.dk (ikke offentligt endnu) Orginal: Responsivt:

Mobilt subsite m.domæne.dk

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

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

Mobilt subsite - RSS feeds For dem der ikke har TYPO3

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