Kaip tinkamai reaguoti į interaktyvų interneto dizainą

Prieš kurį laiką atlikau apklausą „Twitter“, ir rezultatai mane nustebino.

Aš ne tik tikėjausi, kad rezultatai bus atvirkščiai, bet ir maniau, kad pirmiausia mobiliesiems atiteks bent 80% balsų .

„Twitter“ apklausa parodė, kad 61,5% žmonių pirmiausia rašo darbalaukyje, surinkę 2212 balsų

Atsakymuose kai kurie žmonės paaiškino, kodėl pirmiausia rašo darbalaukyje. Bendros tų priežasčių temos:

  • Tai viskas, ką dizaineris pateikė
  • Taip jų komanda veikė
  • Jie išmoko CSS rašyti tik darbalaukyje, todėl tai atrodė natūrali pažanga
  • Klientai nori pamatyti darbalaukio versiją

Kas pirmiausia yra mobilusis

Pirmiausia mobiliesiems, kai pradedame rašyti savo mobiliesiems įrenginiams skirtą CSS, tada naudodami medijos užklausas, norėdami pridėti stilių didesniems ekranams .

Apskritai tai reiškia, kad žiniasklaidos užklausose naudojamas a min-width. Mes naudojame žiniasklaidos užklausas, norėdami pridėti arba perrašyti nustatyto ir didesnio lūžio taško stilius, pavyzdžiui, šį pavyzdį:

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

Šiame pavyzdyje mažiems ekranams mes paprasčiausiai pritaikome tam tikrą užpildą. Darant prielaidą, kad šioje svetainės dalyje yra vaikų, mes tuos vaikus paverčiame minimalaus pločio stulpeliais 600px.

Taigi, kai peržiūros sritis bus 600pxarba bus didesnė, turėsime stulpelius. Likusį laiką daiktai kaupiasi.

Kaip jūs tikriausiai atspėjote, darbalaukio principas yra atvirkščiai . Mūsų CSS yra parašytas dideliems ekranams, tada mes naudojame medijos užklausas, kad galėtume keisti mažesnius dydžius, paprastai naudodami max-widthmedijos užklausas.

Kodėl pirmiausia mobiliesiems yra lengviau

Tinklalapiai natūraliai reaguoja, kol mes dar nesurašome vienos CSS eilutės .

Jei pašalinsite CSS iš bet kurio interneto puslapio, net kai kurios svetainės buvo sukurtos labai konkrečiam ekrano dydžiui dar 2001 m., Dabar turite jautrią, mobiliesiems pritaikytą svetainę!

Darbalaukio stiliai paprastai būna sudėtingesni

Kurdami stilių pirmiausia darbalaukyje, pridedame pločius, stulpelius ir perkeliame daiktus. Pridedame sudėtingumo. Tai darome dėl rimtų priežasčių, nes turime daugiau nekilnojamojo turto, su kuriuo dirbame.

Norime ne tik tuo pasinaudoti, kad viskas atrodytų įdomiau, bet jei nepadarytume dalykų sudėtingesnių didesniuose ekranuose, viskas neatrodytų labai gerai . Net jei turite labai paprastą svetainę, nenorite, kad joje tekstas būtų iš vienos pusės į kitą.

Pažiūrėkite, kaip atrodytų straipsnis „FCC News“, jei tekstas eitų iš vienos pusės į kitą.

Mes visi galime sutikti, kad jūs niekada neskaitytumėte kažko panašaus, taip? Aš tiesiog turiu šiek tiek judinti galvą iš kairės į dešinę, kad ekrane galėčiau perskaityti visą eilutę. Tai siaubinga.

Mobilieji maketai paprastai būna labai paprasti, todėl juos pradėti labai lengva

Visiems žmonėms, kurie man atsakė sakydami, kad jų klientai mieliau mato darbalaukio versiją arba kad jiems tik jų dizaineriai pateikia kompaktinių kompiuterių kompromisus, aš norėčiau teigti, kad vis tiek lengviau pradėti pirmiausia mobiliuosius.

Nustatę savo tipografiją, daugelyje svetainių esate 70 proc. Kelio. Dalykai, kaip:

  • font-family
  • font-size
  • font-weight
  • margin (ant teksto elementų)

Toliau galite pereiti prie išdėstymo elementų labai paprasto išdėstymo stiliaus, pavyzdžiui:

  • padding
  • background-color
  • color
  • o gal kai kuriuos patobulinimus margin

Tuo etapu viskas atrodys gana gerai, atsižvelgiant į išdėstymo perspektyvą mažuose ekranuose . Tai reiškia, kad nerašę vienos medijos užklausos, turite visiškai veikiančią svetainę mobiliajame telefone.

Jei jaučiatės ypač tingus arba turite labai paprastą svetainę, galite max-widthant savo konteinerio užklijuoti „a “ ženklą ir atlikti viską, o jums net nereikia jaudintis dėl žiniasklaidos užklausos!

Vis dėlto dažniausiai norime atnaujinti žaidimą didesniais ekrano dydžiais, todėl manau, kad pirmas būdas yra mobilusis. Tai natūralus progresas aukštyn.

Visų pirma palyginkite mobiliuosius su darbalaukiais

Žemiau pateikiamas „CodePen“, kurio išdėstymas yra labai paprastas, sujungtas naudojant metodą „pirmiausia darbalaukyje“ ir „pirmiausia mobiliesiems“.

Jei atidarysite rašiklį ir žaisite su peržiūros srities dydžiu, pamatysite, kad galutinis rezultatas yra visiškai toks pats.

Bet jei galutinis rezultatas naudojant bet kurį metodą yra visiškai tas pats, kodėl svarbu, kurį požiūrį pasirinkote?

Pirmiausia darbalaukyje gali atsirasti nereikalingas kodas

Pirmiau pateiktame rašiklyje, pirmiausia darbalaukyje, naudojamas šis kodas:

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

Kaip matote „CodePen“, jis veikia puikiai, tačiau čia yra daugybė kodų, kurie tampa nereikalingi, kai mes naudojame metodą pirmiausia.

Atkreipkite dėmesį, kaip mes pirmiausia deklaruojame display: flextik tam display: block, kad medijos užklausoje jį grąžintume į numatytąjį . Be to, savo stulpeliuose mes pakeičiame widthir vėliau vėl grįšime į numatytąjį.

„Pirmiausia mobiliesiems“ metodas turi daug mažiau nereikalingų kodų. Kadangi nebuvo stiliaus teksto ar fono spalvų, stiliaus nėra, išskyrus tai, ko man reikia mano žiniasklaidos užklausose!

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

Grįžimas prie numatytųjų turėtų būti raudona vėliava

Suprantu, kad kai kurie dalykai yra sudėtingesni už šį dalyką (ir mes greitai ten pateksime), tačiau dauguma dalykų, dėl kurių aš čia nerimauju, yra išdėstymo perspektyva.

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!

Jei tai skaitote po to, galite eiti ir užsiregistruoti kitam jos paleidimui, tačiau jis nebus atidaryti keletą mėnesių.