mobile first vs desktop first
DESCRIPTION
Enligt Lukes Wroblewskis teori ska man främst fokusera på mobilen när man bygger responsiva webbsidor, dels för att vi i världen har haft en mobile-boom, men även för att det i sig skapar bättre webbsidor. Som exjobb förra året skrev Eduardo Castaneda, gränssnittsutvecklare på Valtech, om ämnet. Han byggde därför två responsiva sidor, både med Mobile first och med Desktop first för att sedan jämföra dem. Nu efter några projekt där Eduardo har testat båda, delar han nu med sig av sin erfarenhet. Allt från teknik och design till hur lätt/svårt konceptet mobile first kan appliceras i ett tvärfunktionellt team.TRANSCRIPT
“Det är lite små sorligt,men jävligt so3 ändå” -‐Anders Windelhed
Mobile-‐first vs Desktop-‐first Eduardo Castaneda
Mobile-‐first vs Desktop-‐first, a study about responsive approaches towards web development
Vad är Mobile-‐first och Desktop-‐first?
“Mobile First is a philosophy created by Luke Wroblewski that highlights the need to prioriHze the mobile context when creaHng user experiences. StarHng with mobile first” – Brad Frost
“Tvärtom“ -‐ Eduardo Castaneda
Responsive web design
Responsive web design
Mobile first Desktop first
Mobile first
Desktop first
Hur kommer det sig?
Användare av mobilt internet
Ò Ökad användning - stigit med 43% sedan 2010
Hur många använder internet i mobilen?
Användare av mobilt internet
Ò Ökad användning - stigit med 43% sedan 2010 Ò Enligt Google görs fler sökningar från mobilen än desktop
Användare av mobilt internet
Ò Ökad användning - stigit med 43% sedan 2010 Ò Enligt Google görs fler sökningar från mobilen än desktop
Ò Användare lämnar sidan inom 10 sekunder om den inte är mobilanpassad
Användare av mobilt internet
Ò Ökat användning av stigit med 43% sen 2010 Ò Enligt Google, fler sökningar görs från mobilen än vanliga
datorer
Ò Användare lämnar sidan inom 10 sekunder om den inte är mobilanpassad
Ò 59% förväntar sig en laddningstid på max 3 sekunder
Ò 71% överger sidan om laddningstiden är längre än 5 sekunder
Användarna är många och en aning kräsna
Användare av internet via dator
Ò Stabilt de senaste 4 åren, 89% 2013
Stabil utveckling de senaste åren
Användare av internet via dator
Ò Stabilt de senaste 4 åren, 89% 2013 Ò Läser/skickar e-post, shoppar, gör faktasökningar
Användare av internet via dator
Ò Stabilt de senaste 4 åren, 89% 2013 Ò Läser/skickar e-post, shoppar, gör faktasökningar
Ò Webben har prioriterats under en längre tid för desktopanvändare
Flesta är användare utav båda
39%
Skillnaden
Design
Design – Mobile first
Ò Begränsad skärmyta
Ò Begränsad prestanda
Ò Begränsad internethastighet
Design – Mobile first
Ò Begränsad skärmyta
Ò Begränsad prestanda
Ò Begränsad internethastighet
Design – Mobile first
Ò Begränsad skärmyta
Får det inte plats på mobilskärmen?
Då ska det inte finnas med alls
Teknik
Min-‐width vs. Max-‐width
div{ //Utseende för basläge
} @media (**-‐width:480px){
div{ //Utseende för förändring }
}
** = min eller max
Desktop first div{
display:inline-‐block; width:30%; height: 100px; border: 1px solid black; margin:5px; background-‐color: lightblue;
} @media (max-‐width:480px){
div{ display:block; width:auto; }
}
div{ height: 100px; border: 1px solid black; margin:5px; background-‐color: lightblue;
} @media (min-‐width:480px){
div{ display:inline-‐block; width:30%; }
}
Mobile first
För-‐ och nackdelar
Mobile first
Mobile first
Ò Tvingar till prioritering av element vid ett tidigt tillfälle
Mobile first
Ò Tvingar till prioritering vid ett tidigt tillfälle
Ò Funktionalitet följer med hela vägen, från minsta till största
Mobile first
Ò Tvingar till prioritering vid ett tidigt tillfälle
Ò Funktionalitet följer med hela vägen
Ò Fokus på innehåll och funktionalitet Ò Tabeller Ò Karuseller Ò Menyer
Tabeller
Karuseller
? ?
Menyer
15 länkar
Mobile first
Ò Tvingar till prioritering vid ett tidigt tillfälle
Ò Funktionalitet följer med hela vägen Ò Fokus på innehåll och funktionalitet
Ò Tabeller Ò Karuseller Ò Menyer
Ò Utvecklas från en utgångspunkt som är standard
Desktop first div{
display:inline-‐block; width:30%; height: 100px; border: 1px solid black; margin:5px; background-‐color: lightblue;
} @media (max-‐width:480px){
div{ display:block; width:auto; }
}
div{ height: 100px; border: 1px solid black; margin:5px; background-‐color: lightblue;
} @media (min-‐width:480px){
div{ display:inline-‐block; width:30%; }
}
Mobile first
Desktop first div{
display:inline-‐block; width:30%; height: 100px; border: 1px solid black; margin:5px; background-‐color: lightblue;
} @media (max-‐width:480px){
div{ display:block; width:auto; }
}
div{ height: 100px; border: 1px solid black; margin:5px; background-‐color: lightblue;
} @media (min-‐width:480px){
div{ display:inline-‐block; width:30%; }
}
Mobile first
Mobile first
Ò (-) Funkar inte för ie 8
Ò (-) Kan begränsa desktopsidan
Desktop first
Desktop first
Ò Det går fort, allt smalas ner och samlas i en kolumn
Logo
Logo Sök
Logo Sök
Link Link Link
Loga Sök
Link Link Link
Menu link 1 -‐ Menu link 2 – Menu link 3 – Menu link 4
Loga Sök
Link Link Link
Menu link 1 -‐ Menu link 2 – Menu link 3 – Menu link 4
Loga Sök
Link Link Link
Menu link 1 -‐ Menu link 2 – Menu link 3 – Menu link 4
Loga Sök
Link Link Link
Menu link 1 -‐ Menu link 2 – Menu link 3 – Menu link 4
Loga Sök
Link Link Link
Menu link 1 -‐ Menu link 2 – Menu link 3 – Menu link 4
Loga Sök
Loga Sök
Loga Sök
Loga Sök
Loga Sök
Desktop first
Ò Det går fort, allt smalas ner och samla i en kolumn
Ò (-) Får med sig mycket ner till mobilsidan som ej syns
Ò (-) Medför prestanda svårigheter som inte existerar i desktop
Desktop first
Ò Det går fort, allt smalas ner och samla i en kolumn
Ò (-) Får med sig mycket ner till mobilsidan som ej syns
Ò (-) Medför prestanda svårigheter som inte existerar i desktop
Ò (-) Finns risk att funktionalitet inte existerar i alla vyer
Mobile first != lösningen Lll allt
Försäkran för en genomtänkt responsiv sida
Försäkran för en genomtänkt responsiv sida
+ Naturligt arbetssäP
Hur gör vi?!
Alla i teamet är mer på det
Bestäms Ldigt
Sprint 0
Ò Sprint Zero should be used to create the basic skeleton and plumbing for the project so that future sprints can be truly add incremental value in an efficient way. It may involve some research spikes.
.Net
EpiServer
TDD
Ruby
Ruby on Rails selenium
scrum
Angular.js MVC
Responsive web design
GIT
Mobile first
Produktägaren måste förstå och veta varför
Alla i teamet är mer på det Bestäms Ldigt Produktägaren måste förstår och veta varför
“I skate to where the puck is going to be, not where it’s been” – Wayne Gretzky
