Vsebina
- Oblikovanje za neznano
- Pragmatičen pristop k oblikovanju
- Postati agnostik postavitve
- Kodiranje postopoma
- Potop v pribitek
Zdi se, da danes vsi govorijo o odzivnem spletnem oblikovanju in to z dobrim razlogom; ker število naprav, ki podpirajo splet, še naprej narašča - vsaka z različnimi zmožnostmi in funkcijami - ni več smiselno graditi spletnih mest s fiksno širino.
Resnica je, da nikoli ni bila. Vendar je do zdaj veljalo za najboljšo prakso pri oblikovanju izkušenj, ki so sprejele številne predpostavke, najsi gre za ločljivost zaslona, pasovno širino ali način vnosa. Če ste kdaj oblikovali spletno mesto s širino 960 slikovnih pik, samo da bi si ga ogledali na prijatelju na majhnem zaslonu (in ja, pišem iz bolečih izkušenj tukaj), boste razumeli, zakaj to ni bil posebno pameten pristop. Zdaj, ko se pametni telefoni in tablični računalniki vržejo v mešanico, je jasno, da naše tradicionalne metode niso več primerne za svoj namen.
Na srečo pojav medijskih poizvedb CSS in čedalje večje priznavanje, da je splet medij sam po sebi, pomeni, da smo začeli sprejemati resnično naravo platforme in sprejeti, da je njena univerzalnost moč in ne slabost.
V naslednjih petih dneh vas bom vodil skozi tehniko, ki prepozna to dejstvo: odzivno spletno oblikovanje. Razvil ga je Ethan Marcotte, ki združuje postavitve tekočin, prilagodljive slike in medijske poizvedbe, da bi nam pomagal zgraditi spletna mesta, ki se elegantno prilagodijo vsakemu okolju, s katerim se srečujejo.
Ta pristop bom prikazal tako, da vam pokažem, kako zgraditi preprosto medijsko galerijo. V svojih primerih bom ustvaril majhno spletno mesto, ki bo dokumentiralo nedavno potovanje po ZDA, vendar lahko kodo in obliko prilagodite svojim potrebam.
Oblikovanje za neznano
Večina te vadnice se bo osredotočila na razvojni vidik odzivnega oblikovanja. Toda preden se poglobimo v katero koli kodo, si vzemimo trenutek, da pomislimo, kako bi lahko oblikovali spletno stran, ki bi lahko imela neskončno postavitev.
Zdaj imam srečo, ker znam oblikovati vmesnike in razviti kodo vmesnika, ki jih naredi resnične. To seveda ni edinstvena veščina - če delate zase, ste verjetno enaki. Vsekakor pa je koristno razumeti, kako se lahko vsebina prilagaja in preoblikuje pri izdelavi tekočih oblik.
Delam tudi kot del večje ekipe, kjer je moja vloga bolj specializirana. V takšnem okolju se lahko vizualni oblikovalec osredotoči zgolj na prevajanje žičnih okvirjev v privlačne, privlačne (odjavljene, popolne slikovne pike) kompove. In nenavadno je, da se razvijalci nahajajo ločeno in te postavitve prevedejo v vitke in učinkovite oznake in CSS.
Vendar se takšni linearni in ločeni delovni tokovi hitro pokvarijo, ko začnemo ocenjevati, kako se bodo modeli prilagodili različnim okoljem. Kot vsako novo orodje ali tehnologija bi morali razmisliti tudi o bolj skupnih in gibčnih načinih dela. Številne najzahtevnejše težave, s katerimi se srečujemo pri oblikovanju odzivnih spletnih mest, je mogoče rešiti preprosto s pogovori, eksperimentiranjem in ponavljanjem.
Pragmatičen pristop k oblikovanju
To ne pomeni, da oblikovalci nimajo prostora razmišljati o tem, kako lahko dizajn deluje zunaj meja katere koli določene naprave.
V podjetju Clearleft uvajamo vizualno oblikovanje z vidika namizja. Začnemo z opredelitvijo splošnega oblikovalskega jezika in vizualne estetike, ki pogosto temelji na začetnih raziskavah okoli temeljnega dela vsebine. Če na primer načrtujemo spletno stran s hrano, bomo začeli s strani z recepti; za spletno mesto z novicami, stran z zgodbo.
Ne samo, da je to pomembna stran na spletnem mestu, ampak verjetno vključuje dovolj strukturirane vsebine, da lahko sestavimo tipografsko paleto. Razmislili bomo tudi o tem, kako se lahko postavitev prilagodi - četudi nam je v tej fazi le v mislih.
Eden od uporabnih načinov testiranja izjemnih situacij je, da zajamete takšno stran in jo prilagodite za ožji zaslon (približno 320 slikovnih pik). Verjetno boste odkrili, da bo treba nekatere vidike oblikovanja premisliti, da bodo delovali v tej širini. Tu je nekaj primerov:
- Tipografija: Veliki naslovi lahko dobro delujejo na širših postavitvah, na manjših zaslonih pa zavzamejo veliko navpičnega prostora in zato zahtevajo dodatno pomikanje. Ker se dolžine črt spreminjajo, upoštevajte tudi višine črt in druge tipografske obdelave.
- Povezave: Kako bo vaš dizajn deloval na napravah z zaslonom na dotik? Čeprav jih še nimamo na enostaven način (kar pomeni, da bi morali upoštevati vse vidike našega oblikovanja), nam lahko oblikovanje za ožji zaslon omogoči, da razmislimo o ciljnih področjih za povezave in druge interaktivne elemente . Smernice za iOS priporočajo, da so kvadratne najmanj 44 slikovnih pik / točk, kar je dobra številka, ki si jo je treba prizadevati.
- Navigacija: To bo verjetno najbolj nerodna komponenta katerega koli odzivnega oblikovanja, še posebej, če ima vaše spletno mesto veliko odsekov in globoko hierarhijo. Brad Frost je napisal povzetek nekaterih različnih pristopov k navigaciji, o katerih trenutno razmišljamo.
- Odvečna vsebina: Ali nekaj vsebine ni potrebno? Ali je treba drugo vsebino prikazati samo v določenih scenarijih? Ne zagovarjam skrivanja vsebine glede na to, katero napravo uporabnik uporablja, toda tehnike, kot je pogojno nalaganje (ki si ga bomo ogledali kasneje ta teden), nam lahko pomagajo do manjših strani, ki nalagajo samo dopolnilno vsebino, kadar je to potrebno.
Oblikovanje dveh kontrastnih postavitev krepi idejo, da se bo dizajn prilagodil, hkrati pa zgodaj likal potencialne težave. Čeprav se to sliši kot podvojitev dela, ne pozabite, da vsake strani ne oblikujemo natančno natančno. Namesto tega se osredotočamo na gradnjo razširljivega oblikovalskega jezika - tistega, ki se bo razvijal, ko ga bomo začeli izvajati v kodi, in tistega, ki temelji na posameznih modulih in komponentah.
Postati agnostik postavitve
Ni presenetljivo, da so panoge, ki so zgodovino spleta v preteklosti obravnavale kot tisk, postavitve s fiksno širino prežele številne rezultate, ki jih izdelujemo. Ko začnemo oblikovati prilagodljiv medij, razmišljamo o novih pristopih, ki nam omogočajo reševanje problemov in sporočanje idej ob hkratnem priznavanju tekoče narave medija. Tu je nekaj mojih najljubših:
- Diagrami opisa strani: Medtem ko lahko žični okviri pogosto pomenijo postavitev (in tako prevzamejo določeno vrsto naprave), diagrami z opisom strani to domnevo odstranijo in namesto tega opisujejo posamezne komponente, razporejene v dokumentu glede na prednost.
- Stilne ploščice: Pri komuniciranju idej o oblikovanju s strankami se lahko znajdemo v predstavitvi 'slik spletnih strani'. Če nismo previdni, bodo stranke upravičeno prosile, da si ogledajo koncepte, ki dokazujejo, kako bo izgled izgledal tudi na drugih napravah. To nas lahko prisili v nevzdržno situacijo izdelave več strani za več naprav. Samantha Warren je razmišljala o tej težavi in pripravila ploščice za slog. Ti sedijo nekje med tablico razpoloženja (vendar manj nejasno) in popolnoma realiziranimi kompi (vendar manj natančnimi) in nam pomagajo pri sporočanju tipografije, stilov gumbov in zdravljenja mastheadov. Spodbujajo tudi zrelejše pogovore z našimi strankami.
- Mobilify oblikovalska igra: Ta vaja lahko zelo dobro deluje med skupnimi delavnicami oblikovanja. Pri tej vaji si vsi na Post zapisujejo elemente, ki se lahko pojavijo na določeni strani. Te se nato prilepijo na steno po pomembnosti, kot da bi se na mobilnem telefonu prikazale linearno. Razprava, ki iz tega izhaja, lahko prinese nekaj presenetljivih sklepov. Na primer, morda se zavedate, da navigacija ni najpomembnejša komponenta na strani. To bi lahko sledilo zasnovi, kjer preskočna povezava na vrhu strani vodi do navigacije v nogi.
Še vedno je prostora za orodja, ki jih seveda že uporabljamo, toda pri oblikovanju spletnega mesta v širšem smislu moramo upoštevati, da postavitev ni več znana.
Kodiranje postopoma
Na srečo nam ni treba skrbeti za vizualno zasnovo v primeru, na katerem delamo, saj smo trdo delo opravili namesto nas! Namesto tega se lahko osredotočimo na kodiranje našega oblikovanja v popolnoma odzivno spletno mesto.
Še nekaj, preden začnemo. Pomembno si je zapomniti temeljno načelo medija, s katerim sodelujemo: univerzalnost. To ne pomeni samo gradnje za današnje spletne naprave, temveč tudi zagotavljanje združljivosti z včerajšnjimi in jutrišnjimi napravami. John Allsopp je v svojem prispevku Naslednjih 6 milijard opisal, zakaj je to načelo pomembno:
"Naslednjih šest milijard je otrok na podeželju v Indiji, Afriki in na Kitajskem, kjer je dostop do električne energije in omrežij morda prekinjen. To je nekdo na Sumatri pri desetletju stari škatli Wintel. Ljudje govorijo na stotine različnih jezikov, na desetine različnih sistemi za pisanje. Ljudje so prvi v svoji družini, ki znajo brati in pisati. To je 20 odstotkov ljudi po vsem svetu, ki ne znajo brati ali pisati.’
Svoje razumevanje spleta lahko izsledimo tako, da pogledamo različne mode (zaradi pomanjkanja boljše besede), ki so se uveljavile med našo stroko: spletni standardi, dostopnost, nevsiljiv JavaScript ... vse so različice na isto temo: postopna izboljšava. Enako velja za odzivno spletno oblikovanje. Za izgradnjo resnično Odzivno spletno mesto je ustvariti spletno mesto, ki ni le združljivo z nazaj, ampak tudi prijazno do prihodnosti.
Potop v pribitek
Ok, dovolj preambule, čas je, da odpremo urejevalnik besedil.Naš oblikovalec nam je priskrbel namizno usmerjen dizajn in je bil dovolj prijazen, da je navedel primere, kako se to lahko zdi tudi v ožjem pogledu.
Morda bi bilo skušnjavo ločeno kodirati, vendar predlagam drugačen pristop. Z umestitvijo ločenih komponent - ali vzorcev -, ki sestavljajo dizajn, na eno stran, lahko ustvarimo portfelj vzorcev. To nam omogoča razvoj komponent zunaj okvirov katere koli postavitve strani in nam bo dalo nekaj, na kar se bomo pozneje lahko sklicevali za kakršno koli regresijsko testiranje. Oglejmo si začetno oznako v nekaj različnih napravah:
Oglejte si našo označeno zbirko vzorcev
No, presneta bom - že imamo odzivno spletno stran! Naša vsebina se prilagaja omejitvam vsake naprave, najsi bo to domišljijski novi iPad ali zavržen funkcijski telefon. Deluje celo v besedilnem brskalniku, kot je Lynx.
Zahvaljujoč temeljnim načelom univerzalnosti je splet tak privzeto odziven. To je super, vendar to pomeni tudi, da lahko vse, kar naredimo s kodo odslej, ogrozi to izvorno prilagodljivost.
Jutri: Previdno bomo stopili in začeli uporabljati prvi vidik odzivnega oblikovanja: tipografijo in fluidne mreže.
