Podcast: Afspil i nyt vindue | Download (Varighed: 45:15 — 62.1MB) | Indsæt
Abonner: Apple Podcasts | Google Podcasts | Spotify | RSS
Suk – jeg håber ikke de mange “Google kyler dit website af pommeren til” nyhedsmails har taget livet af dig. For ikke at tale om lysten til at beskæftige dig med mobilvenlige websites.
For det er vigtigt. At have et mobiltvenligt website.
Derfor har jeg taget fat i Kim Dolleris. Han er en fantastisk webdesigner. Fordi han ikke bare tænker i “farvelade”, men også har en lille “frontender” i maven (Frontender = seminørd).
Få et indblik i Kim’s design proces – og hvad han tænker du bør tage med i dine overvejser, når du tager fat i en mobilvenlig version af dit website.
Links og tools nævnt i podcast:
Artiklen om Resposive Webdesign
Bogen om responsive webdesign
Inspiration til responsove webdesign
Fint podcast 🙂
Brad Frost har skrevet dette blogindlæg, som taler imod at designe til specifikke enhedsstørrelser, men i stedet at lade indholdet styre, hvornår der skal benyttes “breakpoints”: http://bradfrost.com/blog/post/7-habits-of-highly-effective-media-queries/
Jeg benytter selv den samme fremgangsmåde – det virker for mig.
@Jesper Nerloee – Fedt – tak for det link….
Brad Frost har stort set altid nogle fede vinkler på de ting ham skriver om. Og ja, breakpoints på de rette steder giver virkelig god mening. Vi bruger skræddersyer også når behovet er der (når designet går i stykker), men vi er indrømmet også glade for de frameworks der er kommet til verden undervejs 🙂
Ems og procenter er også spændende at arbejde med – af og til for spændende. Så pt. er vi på pixels, men lur mig om ikke pixels bliver sværere og sværere at arbejde med med alle disse retina/4k/6k/8k etc. opløsninger der kommer løbende. 🙂
Tak fordi du deler jesper 🙂
Ja, han har nogle gode pointer.
Jeg skriver så al min kode selv, og opgraderer løbende mine kodebaser (inden for de respektive teknologier/sprog) i takt med, at jeg lærer nyt.
Det gør det selvsagt lettere at implementere intuitive breakpoints og andre “autonome” tilføjelser, når jeg ikke er afhængig af andres kode og strukturering (en uvurderlig frihed for mit vedkommende).
Jeg er blevet ret glad for at arbejde med ems og procenter. Det falder helt naturligt nu, at tænke i “responsive elementer”. Dog benytter jeg i nogle tilfælde fortsat pixels, men i langt mindre grad end tidligere.
Bonustip (hvis du ikke allerede kender værktøjet): http://pxtoem.com/ (konvertering af pixels til ems) – fantastisk værktøj, når man arbejder med ems 🙂
Lækkert – kendte jeg ikke – tak =)
Super godt podcast. Flere af den slags, tak. 🙂
Macaw ser spændende ud! Men det var dælme svært at finde efter at have lyttet til Podcastet 🙂
Til public service kan det oplyses, at det ser ud til at folkestemningen går på, at gode (og meget anderledes) alternativer er:
Adobe Reflow og Webflow
Jeg kunne rigtig godt tænke mig at høre, hvilket smart prototyping/wireframe tool Dolleris bruger til at lave interaktive demoer, hvor man kan klikke sig igennem det opsatte flow?
Tak!
@Christian Haugaard Brix – Du har ret, glemte at linke til det: http://macaw.co/
Vi har været omkring reflow – syntes ikke det spillede lige så godt. 🙂
Mht. til wireframes så laver vi dem oftest i produktionsklar kode som muligt. Dvs. vi koder det som var det et helt normalt projekt – tænker arkitektur og det hele ind mens der skrives html/css/javascript. Men man kan dog efter min bedste overbevisning snart bruge Macaw til samme formål. Vi håber i hvert fald at output-koden snart bliver bedre.
🙂 Kim
Hov – lad mig lige uddybe grunden til at lave produktionsklar kode; Det tager længere tid at lave disse prototyper end andre former for wireframes. Tid som tages direkte ud af produktionstiden på et givent projekt.
Så vi prøver selvfølgelig så vidt mulig ikke at lave dobbeltarbejde. Skriver vi koden skarpt fra starten er den tid der reelt skulle bruges til at bygge siderne efter designprocessen også minimeret. Der bliver også taget hul på frontend-processen i samme omgang så at sige 🙂
Vil lige gøre opmærksom på at pxtoem-værktøjet snarere er et px-to-rem værktøj — EM er jo relativt ift. forældre-elementet og ikke fontstørrelsen angivet på body. Det er en nem fælde at falde i, og det tager lidt tid at få hovedet rundt om.
@Kim Johansen > Korrekt, og vigtig pointe.
Derfor skal man huske at justere font-størrelsen i pxtoem-værktøjet, så værktøjet tager udgangspunkt i forældre-elementets font-størrelse (hvis denne er forskellig fra “default” font-størrelsen). Husker man det, fungerer det som det skal 🙂
… og det var naturligvis til Kim Johannesen (beklager navnesjusket).
Godt podcast og fedt at høre fra en designer, der fokuserer på indholdet frem for “mobile first”. Når man ser på mange nyligt redesignede hjemmesider for tiden, også mange af de store, har fokus med al tydelighed været på at få lavet en mobilvenlig side, hvor samme design så bare vises i stort format på desktop versionen. Ærgerligt når designerne på den måde glemmer at udnytte de ekstra muligheder den store skærm giver.