1 / 37

Udvikling af mobilsites

Udvikling af mobilsites. Einar Gislason / FTF. Mobil venlige sites. Mobilsites. Mobil venligt 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.

darin
Download Presentation

Udvikling af mobilsites

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Udvikling af mobilsites Einar Gislason / FTF

  2. Mobilvenlige sites Mobilsites

  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 • 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 • 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 TYPO3 • Nyt site der er 100% responsivt • Omlægning af et site til responsivt layout • Nyt mobilvenligt subsite (m.domæne.dk) • Nyt mobilvenligt subsite der henter data fra et andet system 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

More Related