Hogyan kell jól megközelíteni az adaptív webdizájnt

Nemrégiben közvélemény-kutatást folytattam a Twitteren, és az eredmények meglepettek.

Nemcsak arra számítottam, hogy az eredmények fordítva fordulnak elő, úgy gondoltam, hogy a mobile-first megszerzi a szavazatok legalább 80% -át .

A Twitter közvélemény-kutatása szerint az emberek 61,5% -a ír asztalt, 2212 szavazattal

A válaszokban néhány ember elmagyarázta, miért írnak először asztali számítógépet. Ezen okok általános témái:

  • Ennyit szállított a tervező
  • Így működött a csapatuk
  • Megtanulták a CSS-t csak asztali gépként írni, így ez természetes haladásnak tűnt
  • Az ügyfelek szeretnék megtekinteni az asztali verziót

Mi a mobil-első

Először a mobil az, amikor a mobileszközök CSS-jének megírásával kezdjük, majd média lekérdezésekkel adunk hozzá stílusokat nagyobb képernyőméretekhez .

Általában ez azt jelenti, hogy a média lekérdezések a min-width. Média-lekérdezéseket használunk stílusok hozzáadásához vagy felülírásához egy meghatározott és nagyobb töréspontnál, például ez a példa:

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

Ebben a példában a kis képernyőkhöz egyszerűen használunk párnázást. Ha feltételezzük, hogy a webhely ezen szakaszában vannak gyerekek, akkor ezeket a gyerekeket oszlopokká alakítjuk, legalább 600px.

Tehát, ha a nézetablak 600pxnagyobb vagy nagyobb, oszlopok lesznek. A fennmaradó időben a dolgok halmozottak.

Amint valószínűleg sejtette, az asztali első megközelítés fordítva történik . A CSS-t nagy képernyőkhöz írjuk, majd média-lekérdezéseket használunk kisebb méretű változásokhoz, általában max-widthmédia-lekérdezések segítségével.

Miért könnyebb először a mobil

A weboldalak természetesen reagálnak, még mielőtt egyetlen sort írnánk a CSS-ről .

Ha eltávolítja a CSS-t az internet bármely oldaláról, még néhány olyan webhelyről is, amely 2001-ben készült egy nagyon meghatározott képernyőméretre, akkor most egy érzékeny, mobilbarát webhelye van!

Az asztali stílusok általában összetettebbek

Amikor először az asztali gépet használjuk, akkor hozzáadunk szélességeket, oszlopokat és mozgatjuk a dolgokat. Hozzáadjuk a bonyolultságot. Ezt jó okkal tesszük, mivel több ingatlanunk van, amivel dolgozhatunk.

Nemcsak ezt szeretnénk kihasználni, hogy érdekesebbé tegyük a dolgokat, de ha nem tennénk bonyolultabbá a dolgokat a nagyobb képernyőkön, akkor a dolgok nem nagyon néznének ki . Még akkor is, ha nagyon egyszerű weboldala van, nem szeretné, ha a szöveg az egyik oldalról a másikra húzódna.

Nézze meg, hogy nézne ki egy cikk az FCC News oldalán, ha a szöveg egyik oldalról a másikra haladna.

Mindannyian egyetértünk abban, hogy soha nem olvasott ilyesmit, igen? Szó szerint egy kicsit balról jobbra kell mozgatnom a fejem, hogy teljes képernyőt olvassak a képernyőn. Ez szörnyű.

A mobil elrendezések általában nagyon egyszerűek, így nagyon könnyű elindítani őket

Mindazok számára, akik azt válaszolták nekem, hogy ügyfeleik inkább az asztali verziót látták, vagy csak a tervezőik kapták meg az asztali kompokat, azt állítom, hogy még mindig könnyebb először elindítani a mobileszközöket.

Számos webhelyen, miután beállította a tipográfiát, az út 70% -a jár. Dolgok mint:

  • font-family
  • font-size
  • font-weight
  • margin (a szöveges elemeken)

Ezután folytathatja az elrendezés elemeinek alapvető elrendezését, például:

  • padding
  • background-color
  • color
  • és talán néhány csípés margin

Ebben a szakaszban a dolgok nagyon jól fognak kinézni elrendezés szempontjából a kis képernyőkön . Ez azt jelenti, hogy egyetlen média lekérdezés megírása nélkül teljesen működőképes webhelye van a mobilon.

Ha különösebben lustának érzi magát, vagy nagyon egyszerű webhelye van, akkor ragaszthasson egy max-widthjelet a tartályára, és végezze el az egészet, és egyáltalán nem kell aggódnia a média lekérdezése miatt!

Legtöbbször mégis nagyobb képernyőméretekkel szeretnénk feljavítani a játékot, és ezért érzem úgy, hogy az első lépés a mobil. Ez a természetes felfelé haladás.

A mobil-első és az asztali-első összehasonlítása

Az alábbiakban egy CodePen található, amely nagyon egyszerű elrendezéssel rendelkezik, az asztali első és a mobil az első megközelítéssel.

Ha kinyitja a tollat, és eljátszik a nézetablak méretével, látni fogja, hogy a végeredmény pontosan ugyanaz.

De ha bármelyik megközelítést alkalmazó végeredmény pontosan megegyezik, miért számít, hogy melyik megközelítést választja?

A Desktop-first redundáns kódhoz vezethet

A fenti tollban az asztali első megközelítés a következő kódot használja:

/* 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%; } }

Amint a CodePen-nél láthatja, tökéletesen működik, de van itt egy csomó kód, amely feleslegessé válik, amikor asztali első megközelítést alkalmazunk.

Figyelje meg, hogyan deklaráljuk először display: flexazt, hogy visszaállítsuk az alapértelmezettre display: blocka média lekérdezésben. Ezenkívül az oszlopok esetében megváltoztatjuk widtha beállítást, majd később ismét visszatérünk az alapértelmezettre.

A mobil-első megközelítés sokkal kevésbé redundáns kódot tartalmaz. Mivel nem volt stílus a szöveg vagy a háttér színe, nincs stílus, kivéve azt, amire szükségem van a média kérdéseimben!

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

Visszatérve az alapértelmezett értékekre vörös zászlónak kell lennie

Tudomásul veszem, hogy egyes dolgok ennél összetettebbek (és hamarosan odaérünk), de itt leginkább az elrendezés szempontjából aggódom.

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!

Ha ezt követően elolvassa ezt, elmehet és regisztrálhat a következő indításkor, de néhány hónapig nem nyílik meg újra.