Vastuvõtlik disain: miks teete seda valesti

Vastuvõtlik disain ei ole moehullus, mis tekkis laheda CSS-tehnika tõttu, see on vastus probleemile. Pidage seda alati meeles ja küsige endalt pidevalt, kas tegelete selle probleemiga tõesti piisavalt. Kui kasutate meediumipäringu murdepunktide lisamiseks kopeerimist ja kleepimist, võib teie lahendus olla viga.

Arutleme, miks meediumipäringud eksisteerivad ja kuidas saaksime neid ära kasutada, et tõepoolest lahendada üldlevinud veebi probleem. Räägime sellest, miks peaksite laskma sisul määrata paigutuse murdepunktid, mitte hüpoteetilised ekraanisuurused.

See artikkel on osa meie töölauakujundusest kaugemale vaatamise seeriast, mis on teile koostöös Heart Internet VPS-ga.

Idee meediapäringute taga

Selle arutelu õigesti alustamiseks on vaja arutada, miks meediumipäringud on järsku nii populaarseks muutunud. Vastus on muidugi see, et Ethan Marcotte loodud termin „Responsive Design” on fantastiline viis veebidisainerite üha suureneva probleemiga tegelemiseks.

Kui kõik pidasid üha enam silmas seda, kuidas „mobiilne veeb” traditsioonilist ületanud kavatses, oli toimunud revolutsioon palju drastilisem: veeb sai üldlevinud.

See “probleem” on suur kogu maailmale, kuid meile tõeline peavalu. Viimase kümnendi jooksul on ülemaailmne veeb muutunud uueks. See ei ole enam seotud seintega, mille me varem rajasime. Olen seda juba varem öelnud, kuid seda tasub korrata. Kui kõik pidasid üha enam silmas seda, kuidas „mobiilne veeb” traditsioonilist ületanud kavatses, oli toimunud revolutsioon palju drastilisem: veeb sai üldlevinud.

Praegu ei pääse me veebi ühest kohast. Me ei loobunud oma sülearvutitest nutitelefonide kasuks, nagu “eksperdid” ennustasid. Selle asemel on veeb kõikjal, kus me oleme. See pole ainult meie telefonides ja arvutites, vaid ka tahvelarvutites, iPodides, mängusüsteemides, televiisorites ja isegi autodes.

See suundumus jätkub ainult aja möödudes. Vastuvõtlik disain viib meid eraldi mobiilsidesaitide loomise hooajale ja ajastusse, kus arendame välja ühe saidi, mis areneb ja kohandub seadmega, mida sellel vaadatakse. Meediumipäringuid kasutades saame konkreetse CSS-i esitada mis tahes arvule erineva suurusega vaateavadele ja veenduda, et kõigil on parim võimalik kogemus.

Vastuvõtliku disaini probleem

Ülaltoodud jaotis ei ole ruumi täitmiseks mõeldud poolajalooline kõla, see on oluline pilk eesmärkidele, mille saavutamiseks reageeriv disain on mõeldud. Seejärel saab küsimus, kas see vastab nendele eesmärkidele? Kas reageeriv disain lahendab piisavalt üldlevinud probleemi?

Vastus on keeruline, parimal juhul võin öelda: "see sõltub sellest, kuidas te seda teete." See on segane väide, kas pole? Vastuvõtlik disain on lihtne: kasutage meediumipäringuid kohandatud CSS-i teenindamiseks erineva suurusega vaateava korral. Kuidas kõik lähenevad sellele õigesti? Niisiis, kuidas saab olla õige ja vale tee?

Keerukus tekib siis, kui hakkame arutama selle tehnika olulist osa: milliseid meediumipäringuid peaksin kasutama? Või teisiti öeldes, milliseid “murdepunkte” peaksin kohandatud CSS-i jaoks suunama? Praegune populaarne vastus algab ennustatavalt parimate parimate “mobiilsete” seadmetega: iPhone ja iPad (näpunäited Androidi kasutajatele). Nendest arhetüüpidest loome nn üldised nutitelefonide ja tahvelarvutite suurused. Siis liigume üles ja adresseerime sülearvuteid ja väikeseid töölaudu ning lõpuks suuri ekraane. Tavalisel meediumipäringute komplektil, nagu näiteks CSS-Tricksil, on tavaliselt üheksa või kümme eelnevalt kindlaksmääratud murdepunkti.

Mis siis, kui keskendume hüpoteetilise seadme kasutamise juhtumi asemel konkreetse kujunduse vajadustele? Mis siis, kui me ehitaksime paigutusi, mis toimiksid lihtsalt kõikjal?

Ausalt öeldes töötab see süsteem teatud määral. Oleme kõik näinud palju häid reageerivaid saite, mis on loodud Coyieri ülaltoodud sarnaste komplektide abil. Siiski ei saa ma arvata, et see kordab kuidagi seda sama viga, mille tegime paar aastat tagasi „mobiilisaitide” kujundamisel. Kogu tähelepanu on siin saiti vaataval seadmel. Enne saidi ehitamist peame neid murdepunkte silmas pidama.

Kuid seadmed muutuvad. Oleme juba tuvastanud, et veeb on ühendatud toitelülitiga peaaegu kõigega, miks me siis jälle nii palju rõhku paneme praegu tavalistele ekraanisuurustele? Kas on parem alternatiiv? Mis siis, kui keskendume hüpoteetilise seadme kasutamise juhtumi asemel konkreetse kujunduse vajadustele? Mis siis, kui me ehitaksime paigutusi, mis toimiksid lihtsalt kõikjal?

Sisukeskselt reageeriv disain

Eelnimetatud probleemid meediumipäringutega tekkisid mul ainult siis, kui ma sisse kaevasin ja tegelikult hakkasin omal käel reageerivaid töid tootma. Teoreetiliselt on standardsoovitused suurepärased, kuid kui need keerukale kujundusele rakendad, avastad, et need murdepunktid ei kata seda alati. Nagu Boston Globe'i disainerid saidi kasutuselevõtmise järel kiiresti teada said, on probleem selles, et probleemid tekivad “vahepeal” (projekti jaoks on fantastiline ja kõik paigutusega seotud probleemid on suures osas lahendatud). Asjad muutuvad segaseks, kui kujundus on sellises suuruses, et te ei arvestanud sellega, ja peate pärast sisenemist sisse astuma ja augud lappima.

Ma ütlen seda kui innukas Apple'i fänn: ärge lõpetage iPhone'i veebisaitide kujundamist.

Minu küsimus on, miks me ei alusta seal? Selle asemel, et asuda projekti juurde, kus on seadmekomplekt ja sellest tulenevalt meediumipäringud, miks me ei lase disainil otsustada? Igal veebilehe paigutusel on punkt, kus brauseri suurus vähendab selle terviklikkust. Meie kui disainerite töö peaks üldlevinud probleemist lähtuvalt leidma see suurus ja arvestama sellega, seejärel vahtima, loputama ja korrama, kuni kõik nõrgad kohad võetakse arvesse.

Ma ütlen seda kui innukas Apple'i fänn: ärge lõpetage iPhone'i veebisaitide kujundamist. Selle asemel kujundage veebisait, mis säilitab oma terviklikkuse, kuna selle vaateakna suurus on vähendatud mis tahes võimalikusse olekusse. Pidage oma disaini juhtimisel silmas konkreetseid seadmeid (näide: väiksemad seadmed on tavaliselt puutetundlikud, seega tehke lingid suureks), kuid ärge pange pimesid ja ärge vaadake suuremat pilti: et teie kujundus peaks igal ekraanil hea välja nägema.

Uus töövoog

Milline näeb välja sisule suunatud reageeriv disaini töövoog? See on lihtsam kui arvate. Ilmselt vajate mingisugust lähtepunkti. Kui soovite liikuda ja üles tõusta, on tore. Kui soovite alustada suurelt ja tulla alla, ka suurepärane. Mul on isiklikult väga raske disaini kaevata ja teha seda õigesti, kui alustan mobiilsidetasandilt, kuid selle tegemiseks on palju kindlaid argumente.

Selle töövoo järgimisel juhtub midagi maagiat.

Oletame, et alustasite suure, 1020 pikslist laiust saidiga. Vaadake seda suurimal ekraanil, kuhu saate oma käed külge panna, ja veenduge, et see näeks hea välja. Nüüd lohistage akent ja muutke see väiksemaks, kuni kujundus muutub koledaks. Seal on teie esimene murdepunkt. Määrake selle punkti jaoks meediumipäring ja parandage kõik, mida peate käsitlema. Kui olete lõpetanud, haarake sellest aknast ja leidke järgmine inetuse punkt. Korrake neid samme, kuni olete valitud vahemikuga rahul.

Aga kuidas on iPadiga? Aga Kindle Fire või Samsungi viimane katse olla asjakohane? Selle töövoo järgimisel juhtub midagi maagiat. Tegite just nii, et paigutus näeb hea välja peaaegu igas suuruses. Kui tegite õigesti, siis kui see oma telefoni või tahvelarvutisse üles tõmmata, näeb see hea välja.

Ainult paigutus
Pidage meeles, et see arutelu viitab ainult paigutuse suhetele. Te ei pääse absoluutselt erinevate funktsioonide testimisest erinevates brauserites ja seadmetes. Reageeriv disain ei arvesta asjaoluga, et erinevad brauserimootorid tõlgendavad HTML-i, CSS-i ja JavaScripti erinevalt.

Järeldus

Kokkuvõtteks võib öelda, et meediumipäringud ja reageeriv disain pakuvad meile uskumatult võimsa tööriista, mis aitab arvestada tõsiasjaga, et veebisaite vaadeldakse erinevat tüüpi ekraanide ja vaateavadega. Kui aga hakkame oma disainilahendusi peotäis seadmeid siduma, oleme siiski tagasi seal, kus alustasime. Selle asemel peaks teie eesmärk olema paigutuse ehitamine, mis on nii mitmekülgne, et see saaks hakkama peaaegu kõigi sellele kuvatavate vaateavade suurustega.

See on kõik teoorias kena, aga kus on näide? Selle arutelu hüppepunkt tuli minu hiljutisest katsest ehitada reageeriv pildigalerii. Vaadake seda artiklit, et saada ülevaade sellest, kuidas sisule orienteeritud reageeriv töökorraldus võiks looduslikult välja näha.