Sukurkite reaguojančią svetainę per savaitę: suprojektuokite atsakingai (1 dalis)

Turinys

• Projektavimas nežinomybei
• Pragmatiškas požiūris į dizainą
• Maketo agnostika
• Kodavimas palaipsniui
• Nerti į antkainį

Panašu, kad šiais laikais visi kalba apie reaguojantį interneto dizainą ir tai turi rimtų priežasčių; nes toliau auga žiniatinkliu įgalinamų įrenginių skaičius - kiekvienas turi skirtingas galimybes ir funkcijas - nebėra prasmės kurti fiksuoto pločio svetainių.

Tiesa ta, kad niekada nebuvo. Vis dėlto iki šiol buvo laikoma geriausia patirtimi, kuria remiantis galima daryti prielaidas, susijusias su ekrano skiriamąja geba, pralaidumu ar įvesties metodu. Jei kada nors sukūrėte 960 taškų pločio svetainę, kad galėtumėte ją peržiūrėti mažame draugo ekrane (ir taip, aš čia rašau iš skaudžios patirties), suprasite, kodėl tai nebuvo ypač protingas požiūris. Dabar, kai sumaišomi išmanieji telefonai ir planšetiniai kompiuteriai, akivaizdu, kad mūsų tradiciniai metodai nebetinka tikslui.

Laimei, atsiradę CSS žiniasklaidos klausimai ir vis labiau pripažįstant, kad internetas yra savaime esanti terpė, reiškia, kad mes pradedame suvokti tikrąją platformos prigimtį, pripažindami, kad jos universalumas yra stiprybė, o ne silpnybė.

Per ateinančias penkias dienas aš jums pademonstruosiu techniką, atpažįstančią šį faktą: reaguojantis interneto dizainas. Ethano Marcotte'o sukurtas sprendimas sujungia sklandų išdėstymą, lanksčius vaizdus ir medijos užklausas, kad padėtų mums kurti svetaines, kurios grakščiai prisitaiko prie bet kokios susiduriančios aplinkos.

Aš pademonstruosiu šį požiūrį, parodydamas, kaip sukurti paprastą žiniasklaidos galeriją. Savo pavyzdžiuose kursiu nedidelę svetainę, kurioje dokumentuosiu neseniai vykusią kelionę po JAV, tačiau nedvejodami pritaikykite kodą ir dizainą, kad atitiktų jūsų poreikius.

Projektavimas nežinomybei

Didžioji šios pamokos dalis bus skirta reaguojančio dizaino kūrimo aspektui. Bet prieš įsigilindami į bet kurį kodą, skirkime šiek tiek laiko pagalvojimui, kaip galėtume sukurti svetainę, kurioje, tikėtina, būtų begalinis išdėstymas.

Dabar man pasisekė, kad galiu kurti sąsajas ir sukurti frontend kodą, kuris juos paverčia realiais. Tai, žinoma, nėra unikalus įgūdis - jei dirbate sau, tikriausiai esate tas pats. Bet tikrai yra naudinga suprasti, kaip turinys gali prisitaikyti ir atsinaujinti kuriant sklandų dizainą.

Aš taip pat dirbu kaip didesnės komandos dalis, kur mano vaidmuo yra labiau specializuotas. Tokioje aplinkoje vizualinis dizaineris gali susitelkti tik į tai, kad vieliniai rėmai būtų paversti patraukliais, įtraukiančiais (neprisijungusiais, tobulais pikseliais) kompromisais. Nėra neįprasta, kad kūrėjai yra atskirai, o šie maketai paverčiami taupiu ir efektyviu žymėjimu bei CSS.

Tačiau tokios linijinės ir atskirtos darbo eigos greitai nutrūksta, kai mes pradedame vertinti, kaip dizainai prisitaikys prie skirtingos aplinkos. Kaip ir bet kuri nauja priemonė ar technologija, mes taip pat turėtume apsvarstyti daugiau bendradarbiavimo ir judrių darbo būdų. Daugelį kebliausių problemų, su kuriomis susiduriama kuriant reaguojančias svetaines, galima išspręsti tiesiog pokalbio, eksperimentavimo ir iteracijos būdu.

Pragmatiškas požiūris į dizainą

Tai nereiškia, kad dizaineriams nėra galimybių galvoti apie tai, kaip dizainas gali veikti už konkretaus įrenginio ribų.

„Clearleft“ mes inicijuojame vizualinį dizainą darbalaukio požiūriu. Mes pradedame apibrėždami visapusišką dizaino kalbą ir vizualinę estetiką, dažnai pradinius tyrimus grįsdami aplink pagrindinį turinį. Pavyzdžiui, jei projektuojame maisto svetainę, pradėsime nuo recepto puslapio; naujienų svetainei, istorijos puslapiui.

Tai ne tik svarbus svetainės puslapis, bet ir tikriausiai pakankamai struktūrizuotas turinys, kad galėtume sukurti tipografinę paletę. Taip pat pagalvosime, kaip maketas gali prisitaikyti - net jei šiame etape tai tik mūsų galvoje.

Vienas naudingas būdas išbandyti dizainą - paimti tokį puslapį ir pritaikyti jį siauresniam (~ 320 taškų pločio) ekranui. Jūs tikriausiai pastebėsite, kad kai kurie dizaino aspektai turės būti iš naujo apgalvoti, kad jie veiktų tokiu pločiu. Štai keletas pavyzdžių:

• Tipografija: Didelės antraštės gali gerai veikti platesniuose išdėstymuose, tačiau mažesniuose ekranuose jie gali užimti daug vertikalios vietos, todėl reikia papildomai slinkti. Keičiantis linijų ilgiui, turėtumėte atsižvelgti ir į linijos aukštį bei kitus tipografinius metodus.
• Nuorodos: Kaip jūsų dizainas veiks jutiklinio ekrano įrenginiuose? Kol kas neturime paprasto būdo jas aptikti (tai reiškia, kad turėtume atsižvelgti į tai visais savo dizaino aspektais), tačiau dizainas siauresniam ekranui gali suteikti mums galimybę pagalvoti apie tikslines nuorodų ir kitų interaktyvių elementų sritis . „IOS“ gairėse rekomenduojama, kad tai būtų ne mažiau kaip 44 taškų / taškų kvadratas, o tai yra gera figūra, kurios reikia siekti.
• Naršymas: Tai tikriausiai bus nepatogiausias bet kokio reaguojančio dizaino komponentas, ypač jei jūsų svetainėje yra daug skyrių ir gili hierarchija. Bradas Frostas parašė kai kurių skirtingų šiuo metu svarstomų navigacijos būdų santrauką.
• Nereikalingas turinys: Ar tam tikro turinio nereikia? Ar kitą turinį reikia rodyti tik tam tikrais atvejais? Aš nepritariu turinio slėpimui pagal tai, kokį įrenginį vartotojas naudoja, tačiau tokios technikos kaip sąlyginis įkėlimas (kurį apžvelgsime vėliau šią savaitę) gali padėti aptarnauti mažesnius puslapius, kurie papildomą turinį įkelia tik tada, kai to reikia.

Dviejų kontrastingų išdėstymų kūrimas sustiprina idėją, kad dizainas bus pritaikytas, tuo pat metu išlyginant potencialias „getchas“. Nors tai skamba kaip dvigubas darbas, turėkite omenyje, kad ne kiekvienas puslapis yra suprojektuotas taip, kad jis būtų tikslus. Vietoj to mes sutelkėme dėmesį į keičiamo dizaino kalbos kūrimą - kalbą, kuri vystysis, kai pradėsime ją diegti kode, ir tą, kuri bus paremta atskirais moduliais ir komponentais.

Maketo agnostika

Nenuostabu, kad pramonei, kuri istoriškai žiniatinklį traktavo kaip spausdinimą, fiksuoto pločio maketai persmelkė daugelį mūsų gaminamų produktų. Kai pradedame kurti pritaikomą terpę, svarstomi nauji metodai, leidžiantys mums spręsti problemas ir perduoti idėjas, pripažįstant sklandų terpės pobūdį. Štai keletas mano mėgstamiausių:

• Puslapio aprašymo diagramos: Nors laidų rėmai dažnai gali reikšti išdėstymą (taigi prisiimti tam tikrą įrenginio tipą), puslapių aprašymo schemose ši prielaida pašalinama ir vietoj to aprašomi atskiri komponentai, išdėstyti dokumente pagal prioritetą.
• Stiliaus plytelės: Bendraudami su klientais dizaino idėjomis galime atsidurti „svetainių paveiksluose“. Jei nesame atsargūs, klientai teisingai paprašys pamatyti koncepcijas, parodančias, kaip dizainas atrodys ir kituose įrenginiuose. Tai gali mus priversti patekti į netvarią situaciją - sukurti kelis puslapius keliems įrenginiams. Samantha Warren pagalvojo apie šią problemą ir sugalvojo stiliaus plyteles. Jie sėdi kažkur tarp nuotaikos lentos (bet mažiau neapibrėžtos) ir visiškai suprastų kompaktų (bet ne tokių tikslių) ir padeda mums bendrauti su tipografija, mygtukų stiliais ir galvos smegenų gydymu. Jie taip pat skatina brandesnį diskusijų su mūsų klientais lygį.
• Mobilizuokite dizaino žaidimą: Šis pratimas gali būti labai geras per bendradarbiavimo projektavimo dirbtuves. Šio pratimo metu visi užrašo „Post-it“ užrašus elementus, kurie gali pasirodyti tam tikrame puslapyje. Tada jie yra priklijuojami prie sienos pagal svarbą, tarsi jie atrodytų linijiniai mobiliajame telefone. Gautos diskusijos gali padaryti keletą stebėtinų išvadų. Pavyzdžiui, galite suprasti, kad naršymas nėra svarbiausias puslapio komponentas. Tai gali būti tęsinys iki dizaino, kur praleidimo nuoroda puslapio viršuje nurodo nuorodą poraštėje.

Žinoma, dar yra vietos įrankiams, kuriuos jau naudojame, tačiau kurdami svetainę plačiai, turime nepamiršti, kad maketas nėra žinomas.

Kodavimas palaipsniui

Laimei, mums nereikia jaudintis dėl vizualinio dizaino pavyzdyje, kuriame dirbame, nes mums buvo atliktas sunkus darbas! Vietoj to, mes galime sutelkti dėmesį į savo dizaino kodavimą į visiškai reaguojančią svetainę.

Dar vienas dalykas prieš pradedant. Svarbu prisiminti pagrindinį terpės, su kuria dirbame, principą: universalumą. Tai reiškia, kad reikia ne tik kurti žiniatinkliui pritaikytus šiandienos įrenginius, bet ir užtikrinti suderinamumą su vakar ir rytoj. John Allsopp aprašė, kodėl šis principas yra svarbus, savo įraše „Kiti 6 milijardai“:

"Šie šeši milijardai yra vaikai Indijos kaime, Afrikoje, Kinijoje, kur prieiga prie elektros ir tinklų gali būti su pertrūkiais. Tai kažkas Sumatroje dešimtmetį senoje Wintel dėžutėje. Tai žmonės, šnekantys šimtais skirtingų kalbų, su dešimtimis skirtingų kalbų. rašymo sistemos. Tai žmonės, kurie pirmieji savo šeimoje gali skaityti ir rašyti. Tai 20 proc. žmonių, kurie nemoka skaityti ir rašyti. Vis dėlto.’

Mes galime atsekti savo žinias apie internetą, žvelgdami į įvairias madas (norėdami geresnio žodžio), kurios įsitvirtino tarp mūsų profesijos: žiniatinklio standartai, prieinamumas, neįkyrus „JavaScript“ ... visi yra tos pačios temos variantai: laipsniškas tobulinimas. Tas pats pasakytina apie reaguojantį interneto dizainą. Norėdami sukurti a nuoširdžiai Interaktyvi svetainė yra sukurti svetainę, kuri būtų ne tik suderinama atgal, bet ir draugiška ateityje.

Nerti į antkainį

Gerai, pakankamai preambulės, laikas atidaryti teksto redaktorių.Mūsų dizaineris pateikė mums į stalą orientuotą dizainą ir buvo malonus pateikti pavyzdžių, kaip tai gali pasirodyti ir siauresnėje peržiūros srityje.

Gali būti viliojanti juos atskirai koduoti, bet aš siūlysiu kitokį požiūrį. Dėdami dizainą sudarančius atskirus komponentus arba modelius į vieną puslapį, galime sukurti raštų aplanką. Tai leidžia mums kurti komponentus už bet kokio puslapio išdėstymo ribų, ir suteiksime į ką vėliau kreiptis atliekant bet kokį regresijos bandymą. Peržiūrėkime pradinį žymėjimą keliuose skirtinguose įrenginiuose:

Peržiūrėkite mūsų pažymėtą modelių portfelį

Na, aš būsiu prakeikta - mes jau turime reaguojančią svetainę! Mūsų turinys prisitaiko prie kiekvieno įrenginio ribų, nesvarbu, ar tai būtų puošnus naujas „iPad“, ar išmestas funkcinis telefonas. Tai veikia net tik teksto naršyklėje, tokioje kaip „Lynx“.

Pagrindinių universalumo principų dėka internetas yra reaguoja pagal numatytuosius nustatymus. Tai puiku, bet tai taip pat reiškia, kad viskas, ką nuo šiol darome kodui, gali pakenkti šiam natūraliam prisitaikymui.

Rytoj: Mes atsargiai žingsniuosime ir pradėsime taikyti pirmąjį reaguojančio dizaino aspektą: tipografiją ir skysčių tinklelius.