Kako narediti odzivne spletne aplikacije s poizvedbami po vsebnikih

Odzivno spletno oblikovanje obstaja že leta in v tem času smo opazili drastičen premik v tem, kako pristopamo k razvoju spletnih strani. Medijske poizvedbe naj nam pišejo CSS na podlagi različnih pogojev, kot so ločljivost, vrsta medija in - najbolj priljubljeno - dimenzije vidnega polja brskalnika.

Pojavili so se vzorci oblikovanja, ki nam pomagajo obvladovati kompleksnost izdelave spletnih mest, ki se odzivajo na vrsto različnih zaslonov.



Brad Frost priročno vzdržuje a sestavljanje vzorcev ki jih lahko uporabite za svoja spletna mesta. Na splošno ti vzorci ciljajo na vsebino na podlagi celotne širine pogleda brskalnika. Z drugimi besedami, ciljajo na elemente na makro ravni, ne na mikro ravni.



Na Shopify.com se na primer vsak pas vsebine obravnava ločeno in se v manjših napravah dobro sesede. Z vidika oblikovanja je lažje voditi oblikovanje teh pasov. Z vidika kodiranja je tudi lažje.

Mejne vrednosti

Točke prekinitve lahko ustvarite na globalni ravni ali na ravni pasu. Na globalni ravni ni redko videti definiranih mejnih točk za mobilne naprave, tablične računalnike in namizja, razvijalec pa lahko izbere, kako se bo posamezen element odzval znotraj teh posebnih mejnih vrednosti.



Na ravni pasu imate nekoliko večji nadzor nad tem, kdaj se mora vsak del vsebine zlomiti. Mogoče bi se moral ta del stolpca zrušiti v en stolpec s 400 slikovnimi pikami, toda košček treh stolpcev bi se moral strniti v en stolpec s 500 slikovnimi pikami.

Čeprav imamo nekoliko več nadzora pri obravnavanju prekinitvenih točk na ravni pasu, smo z vidika oblikovanja stvari tudi bolj zakomplicirali. Večina oblikovalcev, ki delajo v Sketchu ali Photoshopu, bodo ustvarili umetniške plošče za nekaj običajnih pogledov: verjetno portretni mobilni telefon, portretni tablični računalnik in namizje.

Ko se ukvarja z lomnimi točkami na ravni pasu, se mora oblikovalec odmakniti od tega omejenega števila pogledov in začeti stvari razčleniti na manjše dele. Kljub temu je treba vse te pasove še vedno predstaviti kot skladen dizajn v tradicionalnih modelih.



Kompleksne spletne aplikacije

Pri številnih umetniških, vsebinskih spletnih mestih so vzorci predstavljeni v omejenem številu scenarijev. Spletne aplikacije pa uporabljajo manjše vzorce v širšem nizu kontekstov. Skupina gumbov je lahko prikazana v glavi, glavnem delu, stranski vrstici ali modalu.

Vsak pas - glavo, uvod in vsebino - je mogoče odzivno oblikovati neodvisno drug od drugega in brez skrbi glede konteksta

kako narediti izometrično risbo
Vsak pas - glavo, uvod in vsebino - je mogoče odzivno oblikovati neodvisno drug od drugega in brez skrbi glede konteksta

Zdaj razmislite o vseh teh kontekstih, pomnoženih z različnimi prikazi, na katerih bi lahko bile prikazane te strani. Od treh možnih pogledov (mobilni, tablični in namizni) smo prešli na stotine možnosti. Pri medijskih poizvedbah moramo za obdelavo teh scenarijev uporabiti številne izbirnike, ki temeljijo na kontekstu.

.buttongroup .button { … } .header .buttongroup .button { … } .modal .buttongroup .button { … } .sidebar .buttongroup .button { … } @media (min-width: 600px) { .buttongroup .button { … } .header .buttongroup .button { … } .modal .buttongroup .button { … } .sidebar .buttongroup .button { … } } /* and so on for a couple pages */

Številne spletne aplikacije morajo predstaviti podobne komponente v različnih postavitvah različnih velikosti. Na primer, komponenta samodokončanja je lahko v širokem glavnem stolpcu predstavljena drugače kot v manjšem stranskem stolpcu.

Vnesite poizvedbe po vsebnikih

Medijska poizvedba nam lahko pove le, kakšna je širina prikaza ali širina dokumenta. Če želimo torej spremeniti, kako komponenta izgleda v stranski vrstici, ko je stranska vrstica večja od 400 slikovnih pik, moramo vedeti, da bo stranska vrstica široka 400 slikovnih pik, če bo okno širše od 1000 slikovnih pik. Poizvedbe po vsebnikih pa nam omogočajo, da rečemo, 'tako bi morala izgledati moja komponenta, če ima več kot 400 slikovnih pik prostora'.

Preden se preveč navdušite, naj vas hitro razočaram: za poizvedbe po vsebnikih ni izvedbe brskalnika. Še huje, za poizvedbe po vsebnikih (iztočnice žalostne violine) ni nobene specifikacije. Razlog, da še ni nastala specifikacija, je zaradi krožne logike, ki jo je mogoče uvesti.

Oglejmo si hiter primer:

/* mythical :container syntax */ .container { float: left; } .child { width: 500px; }

Tu podrejeni element potisne velikost posode na 500 slikovnih pik. Nato dodamo poizvedbo vsebnika, da uporabimo pogojni slog, ko je vsebnik večji od 450 slikovnih pik.

.container:container(min-width:450px) > .child { width: 400px; }

Upoštevajte pa, da smo podrejeni element nastavili na 400 slikovnih pik. To pomeni, da naša poizvedba po vsebniku ne velja več, saj se bo vsebnik zmanjšal na 400 slikovnih pik. Ker poizvedba po vsebniku ne velja več, se vrnemo k prvotni deklaraciji 500 slikovnih pik. To potisne širino vsebnika nazaj na 500 slikovnih pik in poizvedba po vsebniku se ponovno uporabi - in tako naprej, dokler se brskalnik ne zruši. Še ni jasno, kako rešiti krožno logiko v poizvedbah po vsebnikih.

Rešitev Shopify

Brez določenih specifikacij moramo težavo rešiti z JavaScriptom. Pri Shopify smo se odločili, da bomo ročno uvedli svojo rešitev. Ustvarili smo skript po meri, ki bi našel naše komponente na strani in bi lahko pogojno uporabil 'odzivne' razrede, ko bi veljali pogoji širine.

Širina je bila za naše potrebe edina skrb, ki nas je skrbela. To je daleč najbolj priljubljena lastnost, ki se upošteva pri izdelavi odzivnih modelov, nekateri skripti pa zaznajo samo širino. Če imamo dostop do poizvedb drugih lastnosti, kot je višina, lahko ustvarimo bolj prilagodljive in zmogljive modele, vendar to tudi povečuje zapletenost.

Za opredelitev poizvedb smo ustvarili vrsto objektov JSON, ki so nam omogočili hitro izbiro želenih elementov in nato preizkus, ali je nadrejeni element večji od najmanjša širina ali manj kot največja širina . Če je bilo, smo za element uporabili odzivni razred:

elements = [{ 'component': '.flex – 2x1', 'className': 'flex-2x1-responsive', 'minWidth': 768, 'maxWidth': 1024 },{ 'component': '.modal', 'className': 'modal-responsive', 'maxWidth': 1024 },{ 'component': '.buttons', 'className': 'buttons-responsive', 'minWidth': 300 }];

Ime 'komponente' je bilo izbirnik - skoraj vedno enorazredni izbirnik, zaradi poenostavitve. Konvencijo poimenovanja smo uporabili za enostavno prepoznavanje komponent in nadaljevali s poimenovanjem do uporabljenih odzivnih razredov. Ti odzivni razredi bi bili definirani v isti datoteki kot preostali del komponente. Če poznate razširljivo in modularno arhitekturo za CSS (SMACSS), se ti odzivni razredi obnašajo podobno kot stanja.

Desno: tipična postavitev - postavitev z dvema stolpcema Flexbox . Vsebina se raztegne, da zapolni stolpec, ki je v levi: Poravnava - Ko je prostora malo, Flexbox samodejno ponovno postavi desni stolpec pod levi stolpec, vsebina pa naraste, da ga zapolni

Premikanje hitro

Za zapletene aplikacije, ki imajo veliko zbirko komponent, je super, če se lahko osredotočimo na eno samo komponento, pri čemer je malo pozornosti na kontekst, v katerem se uporablja. Ko se je iztekel rok, je ekipa lahko razdelila delo tako, da se je lotila vsake komponente posebej. Kako bi zavihki delovali? Kako bi delovala glava? Kako bi delovala postavitev? Vsak član ekipe je lahko vzel kos, rešil njegovo skrb, ustvaril zahtevo za vlečenje in nato prešel na naslednjo komponento. To nam je omogočilo, da smo vzeli spletno aplikacijo in jo odzvali v manj kot mesecu dni.

... in ne tako hitro

Se boste odzivali v manj kot mesecu dni? Sveta krava! Zakaj vsi ne uporabljajo poizvedb po vsebnikih in ne ustvarjajo odzivnih aplikacij v tako kratkem času? Resnica je, da je veliko dela potekalo na oblikovalski ravni, kar se je zgodilo mesece pred odzivnostjo Shopify Admin.

Veliko dela nam je prihranilo oblikovalsko ekipo, ki je razmišljala o vplivu njihovega dela, saj je vedela, da bomo sčasoma šli odzivni. Nekatere komponente, na primer prelivanje z zavihki, so bile treba dobro premisliti, preden so se odzvale, rešitev na osnovi JavaScript, ki ni uporabljala poizvedb po vsebnikih, pa je bila zgrajena ločeno.

V mojem nedavnem času v podjetju Xero je na primer oblikovalska skupina šla skozi ta postopek. Potreben je čas za razmislek o vsaki komponenti v vsakem kontekstu in več časa za izdelavo komponente. Če oblikovalci tega ne razmišljajo, bodo to storili inženirji. Tega ne rečem omalovažujoče. Delo je treba opraviti ne glede na to in čim prej, tem bolje.

Besni JavaScript

Zanka za iskanje elementov in uporabo pogojnih razredov bi bila izvedena večkrat:

  • Vsakič, ko se stran naloži
  • Vsakič, ko se brskalnik spremeni
  • Vsakič, ko interakcija vpliva na pretok dokumentov
  • Vsakič, ko je bila vsebina dinamično vbrizgana

Več kot imate komponent, ki potrebujejo pogojni slog, več dela mora opraviti JavaScript. Vsak od teh dogodkov bi lahko ustvaril opazen zaostanek. Stran se naloži in nato delček sekunde kasneje pride do opaznega premika, ko se uporabijo razredi.

Izogibanje poizvedbam v celoti

Čez leto dni od začetka izvajanja poizvedb po vsebnikih Shopify se ekipa počasi odmika od njihove uporabe in izbira druge tehnike za rešitev problema. Torej, če so poizvedbe po vsebnikih za zdaj preveč obdavčene, kaj lahko storimo brez njih? Kot se je izkazalo - zahvaljujoč Flexbox - imamo možnosti.

Največji izziv pri odzivnem oblikovanju je, kako ravnati z vsebino z več stolpci in jo smiselno preoblikovati. Oglejmo si dva pogosta primera.

Dvostopenjski offset dizajn s stransko navigacijo

Shopify ima več takšnih zaslonov: obstaja stranska navigacija in nato področje z vsebino, ki vsebuje dva stolpca, eden večji od drugega. Če bi bila oba stolpca enake širine, bi lahko stolpce le plavali. Ko stran ni mogla več stati ena ob drugi, bi en stolpec padel pod drugega.

Vendar bi bilo pri odmičnih velikostih preprosto plavanje enega stolpca pod drugim videti čudno. Ko se pomikate navzdol, boste opazili, da se vsebina nenadoma ni raztezala do celotne širine vsebnika.

S Flexboxom lahko za naše stolpce določimo najmanjšo širino in flex-wrap: wrap do vsebnika. Ko stolpci dosežejo svoj minimum, bo eden stekel pod drugega. Najboljši del je, da se bo vsak stolpec, ko se zavije, raztegnil do celotne širine vsebnika.

… … .two-columns { display: flex; flex-wrap: wrap; } .col1 { flex-basis: 66%; min-width: 360px; } .col2 { flex-basis: 33%; }

Z nastavitvijo najmanjše širine na primarnem stolpcu v bistvu določimo prelomno točko na podlagi tega stolpca in omogočimo, da se stolpec ob njem pretaka, ko ni več dovolj prostora.

kako razviti lasten umetniški slog

Medijski objekt z dejanji, poravnanimi na desno na večjih zaslonih

Medijski objekt z dejanji, poravnanimi na desno na večjih zaslonih

Medijski objekt z dejanji

Medijski objekt definira zelo pogost vzorec: slika na levi, z deskriptivnim besedilom na desni strani. Ta vzorec je običajno treba dopolniti s tretjim delom: akcije, poravnane v desno.

Flexbox v kombinaciji z našim predstavnostnim objektom omogoča preoblikovanje dejanj pod vsebino

Flexbox v kombinaciji z našim predstavnostnim objektom omogoča preoblikovanje dejanj pod vsebino
.media-body { display: flex; flex-wrap: wrap; } .media-content { flex-grow: 1; flex-basis: 400px; } .media-actions { align-self: center; }

Telo medijskega predmeta smo dopolnili z dvema vsebnikoma: enim za vsebino in drugim za dejanja. Tako kot zadnji primer smo tudi flex-wrap nastavili za zavijanje, tako da se bo, ko nam zmanjka prostora, drugi vsebnik zavil v naslednjo vrstico. Ko vsebnik vsebine doseže najmanjšo širino, nastavljeno s pomočjo flex-basis, se dejanja preusmerijo v naslednjo vrstico. Dejanja pa bodo zdaj poravnana na levo z vsebino, namesto na desno.

Polnjenje 'je gor

Kot lahko vidite iz teh dveh primerov, je najboljši pristop k izdelavi odzivnega spletnega mesta tisti, pri katerem vam ni treba ustvariti kopice medijskih poizvedb, da bi lahko načrtovanje upravljali v različnih oknih. Izkoristite tekočino spleta, tako da komponentam vašega dizajna omogočite, da naravno napolnijo vsebnike, v katerih so. Izogibajte se določitvi fiksnih širin in višin, zaradi katerih bo vaše spletno mesto neupravičeno krhko.

Prihodnost

Morali boste oceniti svoj projekt, da se odločite, ali je uporaba rešitve JavaScript za izvajanje poizvedb po vsebnikih idealna. V Shopifyju so nam omogočili hitro premikanje in že na začetku smo sprejeli pomanjkljivosti v zmogljivosti. Idealno bi bilo pridobiti izvorno izvedbo poizvedb po vsebnikih, vendar bomo potrebovali več zagovarjanja in globokega razmišljanja o tem, kako rešiti uspešnost in krožne težave, preden bomo videli napredek.

The ResizeObserver , če bi bil uveden v DOM, bi lahko omogočil lažjo in morda bolj učinkovito izvedbo v JavaScript. Če se želite vključiti v prihodnost poizvedb po vsebnikih, si oglejte Skupina skupnosti za odzivna vprašanja (RICG).

Ta članek je bil prvotno objavljen v številki 285 z dne net magazin je , revija za profesionalne spletne oblikovalce in razvijalce - ponuja najnovejše nove spletne trende, tehnologije in tehnike. Naročite se na net tukaj .

Povezani članki: