Odgovorni dizajn: zašto to radite pogrešno

Odgovarajući dizajn nije mod koji se pojavio zbog cool CSS tehnike, to je odgovor na problem. Uvijek se toga sjećajte i neprestano se zapitajte da li se zaista adekvatno bavite ovim problemom. Ako za umetanje granica svojih medijskih upita koristite kopiranje i lijepljenje, rješenje može biti pogrešno.

Razgovarajmo o tome zašto postoje medijski upiti i kako ih možemo iskoristiti za istinsko rješavanje problema sveprisutne mreže. Razgovarajmo o tome zašto biste trebali dopustiti da vaš sadržaj određuje prijelomne točke izgleda, a ne hipotetičke veličine zaslona.

Ovaj je članak dio naše serije o „potrazi izvan dizajna radne površine“, a koju smo vam donijeli u partnerstvu sa Heart Internet VPS.

Ideja iza medijskih upita

Da biste pravilno započeli ovu raspravu, potrebno je razgovarati o tome zašto su medijski upiti odjednom postali toliko popularni. Odgovor je naravno da je „Responsive Design“, pojam koji je skovao Ethan Marcotte, fantastičan način rješavanja sve većeg problema web dizajnera.

Dok su svi bespogovorno pričali o tome kako će "mobilni web" prestići tradicionalni, revolucija koja se dogodila bila je mnogo drastičnija: web je postao sveprisutan.

Ovaj „problem“ je velik za svijet u cjelini, ali prava glavobolja za nas. U posljednjih deset godina svjetski se web transformirao u nešto novo. Više nije vezan zidovima koje smo prethodno uspostavili. To sam već rekao, ali vrijedi ponoviti. Dok su svi bespogovorno pričali o tome kako će "mobilni web" prestići tradicionalni, revolucija koja se dogodila bila je mnogo drastičnija: web je postao sveprisutan.

U ovom trenutku ne pristupamo webu iz jedne točke. Nismo odustali od svojih prijenosnih računala u korist pametnih telefona kao što su stručnjaci predviđali. Umjesto toga, web je svuda gdje jesmo. To nije samo u našim telefonima i računalima, već u našim tabletima, iPodima, igraćim sustavima, televizorima, pa čak i automobilima.

Ovaj će se trend nastaviti samo s vremenom. Odgovarajući dizajn vodi nas kroz jednu sezonu stvaranja zasebnih mobilnih web lokacija i u doba u kojem razvijamo jedno web mjesto koje se razvija i prilagođava uređaju na kojem se gleda. Pomoću medijskih upita možemo predstaviti određene CSS-ove bilo kojem broju različitih veličina prikaza i osigurati da svi imaju najbolje moguće iskustvo.

Problem s brzih dizajna

Gore navedeni odjeljak nije polupovijesni naziv namijenjen popunjavanju prostora, važan je pogled na ciljeve kojima je reagiran dizajn namijenjen. Postavlja se pitanje ispunjava li ove ciljeve? Odgovara li dizajn odgovarajuće na problem sveprisutnosti?

Odgovor je složen, u najboljem slučaju mogu reći, "ovisi o tome kako ćete to učiniti." To je zbunjujuća izjava, zar ne? Odgovarajući dizajn je jednostavan: koristite medijske upite za posluživanje prilagođenih CSS-a različitih veličina prikaza. Ovako svi pristupaju kako treba? Pa kako može postojati ispravan i pogrešan način?

Složenost nastaje kada počnemo raspravljati o krucijalnom dijelu ove tehnike: koje medijske upite trebam koristiti? Ili, drugačije rečeno, koje „točke prijeloma“ trebam ciljati za prilagođeni CSS? Trenutačni popularni odgovor predvidivo počinje s najboljim „mobilnim“ uređajima okolo: iPhoneom i iPadom (bijesne komentare korisnika Androida). Iz tih arhetipova uspostavljamo takozvane "generičke" veličine pametnih telefona i tableta. Zatim se pomičemo prema gore i bavimo se prijenosnim računalima i malim radnim površinama i na kraju velikim ekranima. Standardni skup medijskih upita, poput ovog iz CSS-trikova, obično ima devet ili deset unaprijed utvrđenih prekretnica.

Što ako smo se usredotočili na potrebe određenog dizajna umjesto hipotetičkog slučaja upotrebe uređaja? Što ako smo izgradili nacrte koji su jednostavno djelovali posvuda?

Da bismo bili pošteni, ovaj sustav djeluje u određenoj mjeri. Svi smo vidjeli mnogo sjajnih responzivnih web lokacija izgrađenih pomoću skupa sličnog Coyierovu gore. Međutim, ne mogu si a kako ne mislim da ovo na neki način ponavlja istu grešku koju smo napravili dizajniranjem „mobilnih web lokacija“ prije nekoliko godina. Cjelokupni fokus ovdje je na uređaju koji pregledava web mjesto. Prije nego što uopće izgradimo stranicu, imamo na umu ove prijelomne točke.

Ali uređaji se mijenjaju. Već smo ustanovili da je web povezan s gotovo svime pomoću prekidača za napajanje, pa zašto opet stavljamo toliki naglasak na trenutno uobičajene veličine zaslona? Postoji li bolja alternativa? Što ako smo se usredotočili na potrebe određenog dizajna umjesto hipotetičkog slučaja upotrebe uređaja? Što ako smo izgradili nacrte koji su jednostavno djelovali posvuda?

Dizajn usmjeren na sadržaj

Spomenuti problemi s unaprijed utvrđenim medijskim upitima javljali su mi se tek kad sam se ukopao i stvarno počeo samostalno proizvoditi responzivan rad. Teoretski su standardni prijedlozi sjajni, ali kad ih primijenite na složen dizajn, otkrit ćete da te točke prekida uvijek to ne pokrivaju. Problem je, kako su dizajneri iz Boston Globea brzo otkrili nakon što je stranica oživjela, taj što se pojavljuju problemi "između" (za zapis, taj je projekt fantastičan i bilo koji problem s izgledom je uglavnom riješen). Stvari postaju neuredne kada je dizajn u veličini koju niste računali i morate ući i zakrpiti rupe nakon činjenice.

To kažem kao entuzijastični Appleov obožavatelj: prestanite dizajnirati web stranice za iPhone.

Moje pitanje je: zašto ne počnemo tamo? Umjesto da ulazimo u projekt s nizom uređaja i posljedično medijskim upitima, na umu, zašto ne pustimo dizajn da odluči? Svaki izgled web stranice ima točku na kojoj veličina preglednika smanjuje njegov integritet. Naš bi posao dizajnera, u svjetlu problema sveprisutnosti, trebao biti pronaći tu veličinu i uzeti u obzir, a zatim oprati, isprati i ponoviti dok se ne uračunaju sve slabe točke.

To kažem kao entuzijastični Appleov obožavatelj: prestanite dizajnirati web stranice za iPhone. Umjesto toga, dizajnirajte web stranicu koja će održavati svoj integritet jer je veličina njezinog preglednog pregleda smanjena na svako izvedivo stanje. Imajte na umu određene uređaje kao vodič za vaš dizajn (na primjer: manji uređaji imaju tendenciju da se temelje na dodiru, pa povežite veze), ali nemojte stavljati rolete i ne promatrajte veću sliku: to je vaš dizajn trebao bi izgledati dobro na bilo kojem zaslonu.

Novi tijek rada

Pa kako izgleda tijek dizajna koji je fokusiran na sadržaj? Jednostavnije je nego što mislite. Očito vam treba neka vrsta polazišta. Ako želite pokrenuti mobilni i ići gore, super. Ako želite započeti veliko i spustiti se, također sjajno. Osobno mi je jako teško uhvatiti se u dizajnu i učiniti ispravno ako započnem na mobilnoj razini, ali postoji mnogo čvrstih argumenata za to na ovaj način.

Nešto se čarobno događa kada pratite ovaj tijek rada.

Hipotetski, recimo da ste započeli s velikim web mjestom 1020px. Pogledajte na najvećem zaslonu na koji možete uhvatiti ruke i provjerite izgleda li sjajno. Sada povucite prozor i smanjite ga dok dizajn ne postane ružan. Tu je tvoj prvi prijelomni trenutak. Postavite medijski upit za tu točku i popravite sve što vam je potrebno za rješavanje. Kad završite, zgrabite taj prozor i pronađite sljedeću točku ružnoće. Ponavljajte ove korake dok niste zadovoljni rasponom koji ste dobili.

Ali što je s iPadom? Što je sa Kindle Fire ili najnovijim pokušajem tvrtke Samsung da budu relevantni? Nešto se čarobno događa kada pratite ovaj tijek rada. Upravo ste ga napravili tako da izgled izgleda dobro gotovo bilo koje veličine. Ako ste to učinili kako treba, onda kada to povučete na telefon ili tablet izgledat će sjajno.

Samo izgled
Imajte na umu da se ova rasprava odnosi samo na omjere izgleda. Apsolutno ne izlazite iz testiranja funkcionalnosti na različitim preglednicima i uređajima. Odgovarajući dizajn ne utječe na činjenicu da različiti motori preglednika različito interpretiraju HTML, CSS i JavaScript.

Zaključak

Ukratko, medijski upiti i brzi dizajn pružaju nam nevjerojatno moćan alat za obračun činjenice da se web stranice pregledavaju na svim vrstama ekrana i veličinama prikaza. Međutim, kad počnemo vezanje svojih dizajna na nekoliko uređaja, vraćamo se tamo gdje smo i započeli. Vaš bi cilj umjesto toga trebao biti stvaranje toliko univerzalnog izgleda da se može nositi s gotovo bilo kojom veličinom prikaza na koju se baca.

To je sve lijepo u teoriji, ali gdje je primjer? Svrha ove rasprave potekla je iz nedavnog mog pokušaja da stvorim odgovarajuću galeriju slika. Ovaj članak potražite u divljini kako može izgledati tijek dizajna koji je fokusiran na sadržaj.