Sådan tager du den rigtige tilgang til responsivt webdesign

Jeg kørte en afstemning på Twitter for et stykke tid siden, og resultaterne overraskede mig.

Ikke kun forventede jeg, at resultaterne ville være omvendt, jeg troede, at mobile-first ville få mindst 80% af stemmerne .

Twitter-afstemning viser, at 61,5% af befolkningen skriver desktop-first med 2.212 stemmer

I svarene forklarede nogle mennesker, hvorfor de skriver desktop-first. De generelle temaer af disse grunde:

  • Det er alt designeren leverede
  • Sådan fungerede deres team
  • De lærte kun CSS at skrive det Desktop, så det virkede som den naturlige progression
  • Kunder ønsker at se desktopversionen

Hvad er mobil-først

Mobile-first er, når vi starter med at skrive vores CSS til mobile enheder og derefter bruger medieforespørgsler til at tilføje styling til større skærmstørrelser .

Generelt betyder det, at medieforespørgsler bruger en min-width. Vi bruger medieforespørgsler til at tilføje eller overskrive typografier til et sæt breakpoint og større, såsom dette eksempel:

.sales-points { padding: 3em 0; } @media (min-width: 600px) { .sales-points { display: flex; justify-content: space-between; } }

I dette eksempel anvender vi blot nogle polstringer til små skærme. Forudsat at dette afsnit af webstedet har børn i det, forvandler vi disse børn til kolonner med en mindste bredde på 600px.

Så når visningen er 600pxeller større, har vi kolonner. Resten af ​​tiden stammer tingene sammen.

Som du sikkert har gættet, er en desktop-first tilgang omvendt . Vores CSS er skrevet til store skærme, og derefter bruger vi medieforespørgsler til at foretage ændringer i mindre størrelser, generelt ved hjælp af max-widthmedieforespørgsler.

Hvorfor mobil-først er lettere

Hjemmesider er naturligvis lydhøre før vi overhovedet skriver en enkelt linje med CSS .

Hvis du fjerner CSS fra en hvilken som helst side på Internettet, selv et websted lavet til en meget specifik skærmstørrelse tilbage i 2001, har du nu et lydhørt, mobilvenligt websted!

Desktop-stilarter har tendens til at være mere komplekse

Når vi styler til desktop-først, tilføjer vi bredder, kolonner og flytter ting rundt. Vi tilføjer kompleksitet. Vi gør dette med god grund, da vi har mere fast ejendom at arbejde med.

Ikke kun ønsker vi at drage fordel af det for at få tingene til at se mere interessante ud, men hvis vi ikke gjorde tingene mere komplekse på større skærme, ville tingene ikke se meget godt ud . Selvom du har et meget simpelt websted, ønsker du ikke, at det skal have tekst, der strækker sig fra den ene side til den anden.

Se på, hvordan en artikel her på FCC News ville se ud, hvis teksten gik fra den ene side til den anden.

Vi kan alle være enige om, at du aldrig ville læse noget lignende, ja? Jeg er bogstaveligt talt nødt til at flytte hovedet lidt fra venstre til højre for at læse en hel linje på min skærm. Det er forfærdeligt.

Mobile layouts har tendens til at være meget enkle, hvilket gør det meget let at starte der

For alle de mennesker, der svarede mig og sagde, at deres klienter foretrak at se desktopversionen, eller at de kun fik desktop-comps af deres designere, vil jeg hævde, at det stadig er lettere at starte mobil-først.

For mange websteder, når du først har konfigureret din typografi, er du 70% af vejen derhen. Ting som:

  • font-family
  • font-size
  • font-weight
  • margin (på dine tekstelementer)

Derefter kan du gå og lave nogle meget grundlæggende layout styling på dine layoutelementer, såsom:

  • padding
  • background-color
  • color
  • og måske nogle tweaks med margin

På det tidspunkt ser tingene godt ud fra et layoutperspektiv på små skærme . Det betyder, at du uden et enkelt medieforespørgsel har et fuldt funktionelt websted på mobilen.

Hvis du følte dig særlig doven eller har et meget simpelt websted, kan du sætte en max-widthpå din container og være færdig med det hele og slet ikke engang skulle bekymre dig om en medieforespørgsel!

Det meste af tiden vil vi dog øge spillet i større skærmstørrelser, og det er derfor, jeg har lyst til, at mobil-først er vejen at gå. Det er den naturlige progression opad.

Sammenligning af mobil-først med desktop-først

Nedenfor er en CodePen, der har et meget simpelt layout sammensat ved hjælp af en desktop-first og mobile-first tilgang.

Hvis du åbner pennen og leger med visningsstørrelsen, vil du se, at slutresultatet er nøjagtigt det samme.

Men hvis slutresultatet ved hjælp af en af ​​metoderne er nøjagtigt det samme, hvorfor betyder det så hvilken fremgangsmåde du tager?

Desktop-first kan føre til overflødig kode

I ovenstående pen bruger desktop-first tilgang følgende kode:

/* desktop-first */ .desktop-first .sales-points { display: flex; justify-content: space-between; } .desktop-first .sales-point { width: 30%; } @media (max-width: 600px) { .desktop-first .sales-points { display: block; } .desktop-first .sales-point { width: 100%; } }

Som du kan se i CodePen, fungerer det helt fint, men der er en masse kode herinde, der er overflødige, når vi bruger en desktop-first-tilgang.

Læg mærke til, hvordan vi først erklærer en display: flexkun for at sætte den tilbage til standard display: blocki medieforespørgslen. Også for vores kolonner ændrer vi widthog går igen tilbage til standard senere.

Den første mobil-tilgang har meget mindre overflødig kode. Fordi der ikke var nogen styling af teksten eller baggrundsfarverne, er der ingen styling bortset fra hvad jeg har brug for i mine medieforespørgsler!

/* mobile-first */ @media (min-width: 600px) { .mobile-first .sales-points { display: flex; justify-content: space-between; } .mobile-first .sales-point { width: 30%; } }

At gå tilbage til standardindstillingerne skal være et rødt flag

Jeg er klar over, at nogle ting er mere komplekse end dette (og vi kommer snart derhen), men det meste af det, jeg bekymrer mig om her, er fra et layoutperspektiv.

For the layout I created above, I didn't write one line of code for the mobile-first approach. I just relied on how the document was flowing from the start. In the desktop-first approach, I have to tackle both because I need to reset things back to their default state.

The fact that I'm resetting things like display and width to their default state, to me, is a red flag. It means I'm writing something that could have been avoided. That means I'm wasting my time.

Some things aren't so simple

Some components look completely different at different screen sizes, such as navigation menus. Other times, you have styles on mobile that need to be overwritten for desktop that end up being redundant.

In the below video, I run into that exact issue where I needed to move an element using position: absolute for smaller screens. Rather than have to position it, then reset the position back to the default at larger screen sizes, it seemed like a logical choice for a max-width media query.

If you hit play on the video, it should start right where I tackle this issue if you'd like to see it in action (17:41 just in case it doesn't start at the right spot).

So sometimes there are exceptions, and there is nothing wrong with that. My point here isn't that we should be robots who do things one way. There are times when different approaches make sense, but I do like to believe having a general rule of thumb helps.

So next time you are designing a site, even if you only have a desktop mock-up to go by, try starting mobile first. It doesn't take any more work at all, and in the long run I bet it'll save you a ton of redundant code. It's pretty simple too!

  1. Start with the typography
  2. Add in colors and padding
  3. Put anything layout related into a min-width media query

When you're done with your layout, not only will you have knocked out that desktop version that your client is dying to see, but you'll be 90% of the way there in your mobile one as well, without having even really thought about it.

Do you struggle with making things responsive?

Making websites responsive is a topic that a lot of people tell me they struggle with. To help, I've created a free course called Conquering Responsive Layouts. It's put together as a 21-day challenge in which we'll cover a topic a week, with each one adding onto what we already learned.

I realize that we're all busy with kids, family, work, and more, so each day will only be 10-30 minutes worth of lessons, with 2-3 lessons a week. In between you'll have small challenges to complete, working your way up to being comfortable making responsive layouts.

The course is launching on the 13th of April and because it's a 21-day course, the doors close on that day. Click here to sign up to start conquering responsive layouts!

Hvis du læser dette efter det faktum, kan du gå og tilmelde dig næste gang det starter, men det åbner ikke igen i et par måneder.