Praktična razmatranja za odgovarajuća web mjesta

Odzivni dizajn naše je trenutno najbolje rješenje fenomena sveprisutne mreže. Ljudi svakodnevno pristupaju internetu na bezbroj nevjerojatno različitih uređaja i responzivnih stranica pružaju jednostavan i funkcionalan način obračuna tih razlika.

Danas ćemo se odmaknuti od diskusija o medijskim upitima i tehničkom žargonu i usredotočiti se na temeljne aspekte kako reaktivne tehnike utječu na vaš dizajn. Koje glavne točke morate imati na umu kada pristupite projektu responzivnog web dizajna? Pročitajte da biste saznali.

Istražite dizajnerske resurse

Dizajn je više od CSS-a

U posljednje vrijeme bilo je dosta rasprava u vezi s tehnikama uključenim u brzi dizajn s tehničkog stajališta: medijski upiti, širine temeljene na postocima, itd. Međutim, jednom kada savladate CSS trikove za implementaciju responzivnog dizajna, nailazite na mnogo veća zapreka: stvarni dizajn.

"Teško je povući profesionalni dizajn kada se brinete o jednom formatu, koliko će vam biti teže prilagodljiv dizajn?"

Zvuči kao zastrašujući zadatak, zar ne? Namjeravate stvoriti jedno povezano, dosljedno iskustvo koje savršeno izgleda na gotovo svakoj veličini zaslona. Dosta je teško povući profesionalni dizajn kada brinete o jednom formatu, koliko će vam biti teže za responzivan dizajn?

To je ključni razlog neodlučnosti mnogih dizajnera da prihvate brzi dizajn kao zadanu praksu. Najčešća zamjerka koju čujem i od dizajnera i od njihovih klijenata je da responzivni dizajn zvuči kao poprilično intenzivan pothvat. Dizajneri su prisiljeni pokušati opravdati poskupljenje ili jesti sate u ime proizvodnje kvalitetnog rada.

Srećom, sa stajališta CSS-a, projekti poput Skeletona stvarno su smanjili svoje vrijeme kodiranja. To ne znači da ste nestali, iako ćete se kao dizajner i dalje morati usredotočiti na stvaranje solidnog iskustva za svakog korisnika, a to znači i ulaganje ozbiljne misli u to kako se proces dizajna mijenja u svjetlu ove nove metodologije, Pogledajmo nekoliko osnovnih razloga koje morate imati na umu.

Photoshop ga neće rezati

Odgovarajućim dizajnom dizajniranje u pregledniku više nije mrsko, već je nužno. U programu Photoshop definitivno možete navesti neke ideje o tome kako web stranica treba izgledati na različitim širinama, a to bi čak moglo pružiti bogatije krajnje rezultate, ali jednostavna je istina da Photoshop ne može ponoviti vrstu dinamičkog učinka koji je indikativan za reagiranje oblikovati.

"Dizajniranje u pregledniku više nije mrsko, već je nužno."

Kada govorite o jedinstvenom dizajnu koji se razvija s veličinom prozora preglednika, najbolji način za planiranje toga je pucanje guma i gledanje na akciju u pregledniku.

Ne doživljavajte ovo Photoshop udarcem, ne morate i ne smijete napustiti upotrebu slika, tekstura itd. Koji su ugrađeni u Photoshop, Fireworks ili drugi grafički softver. Međutim, njihovo sastavljanje u brzi model vjerojatno će se najbolje postići implementacijama preglednika uživo, a ne statičkim sličicama.

Imajte na umu da vaš model može i dalje biti niska vjernost, želite li započeti s osnovnim žičnim okvirom ili prilično gotovim dizajnom, potpuno ovisi o vama. Ovdje je ključno to što imate nešto uživo što vam omogućuje testiranje različitih evolucija kako biste mogli riješiti probleme dok oni nastanu, a ne trošiti dragocjene sate na suštinski pogrešnu ideju.

Dramatično drugačije

Ponekad je skaliranje dizajna prema dolje jednostavno poput preusmjeravanja predmeta iz više stupaca u jedan složeni stupac. Ako je vaš dizajn podijeljen na male komade, možda je to put.

Međutim, zapamtite da dramatično različiti uređaji mogu zahtijevati dramatično različite dizajne. Često se događa da se doista bolje rješenje može pružiti znatnim promjenama u načinu rada stranice. Da biste vidjeli što mislim, razmotrite dizajn El Sendero del Cacao u nastavku.

Kao što vidite, velike i male verzije dizajna prilično se razlikuju. Ključno je to što oni i dalje izgledaju kao dvije verzije istog web mjesta, što znači da je dosljednost marke ostala na značenju. Dizajner je samo odlučio da mobilna inačica funkcionira bolje s znatno manje vizualnog njuha od pune verzije.

Imajte na umu da "drugačiji" ne znači uvijek potpuno i potpuno uklanjanje. Vaša mobilna verzija ne mora biti dosadna i predvidljiva. Poanta ovdje nije skinuti sve, već kritički razmotriti sve različite veličine ključa koje ciljate i kako možete poboljšati iskustvo za svaki model preispitajući osnove dizajna.

Što je apsolutno bitno?

Jedna od glavnih komponenti tranzicije vašeg dizajna kroz različite faze je ciljanje apsolutno vitalnih sastavnih dijelova dizajna i dati im najveći prioritet.

Kao što smo vidjeli u prethodnom primjeru, definitivno neće uvijek biti tako da će vaša verzija prilagođena mobilnim uređajima sadržavati sve što će činiti vaš dizajn radne površine u punoj veličini. Trik je onda razmotriti sve što vi i vaš klijent planirate uključiti i stvoriti važnu hijerarhiju tako da možete smanjiti nepotrebne za manje verzije.

Ovaj princip vidimo na djelu na mjestu Stephena Carvera u nastavku.

Zapazite kako dizajn nije samo dotjeran, nego je zapravo skraćen za mobilnu verziju. Neki su sadržaji smatrani ključnim, dok je drugi sadržaj više "lijep za imati" kada ima dovoljno prostora na zaslonu.

Najočitiji primjer toga je u području plovidbe. Primjetite kako veća inačica dizajna sadrži malo podnaslova za svaki navigacijski element. Oni pomažu korisniku da dodatno razumije navigacijsku shemu. No, u maloj verziji, ovi su uklonjeni kako bi se uštedio prostor.

Tijekom analize dizajna za bitne elemente, eksperimentiranje je ključno. Pokušajte ukloniti razne komponente da biste presudili pati li upotrebljivost ili ne. Imajte na umu da se te odluke moraju donositi u svakom intervalu, a ne samo u najmanjem i najvećem.

Dodirnite ≠ Klik

Još jedna značajna stvar koja se pamti kao ljestvica dizajna je da je trenutno stanje računanja podijeljeno u dvije različite kategorije: uređaji za unos temeljeni na dodiru i oni koji koriste pokazivač. Sigurna pretpostavka (za sada) je da veće veličine prozora preglednika uglavnom odgovaraju stolnim ili prijenosnim računalima, dok manje veličine prozora preglednika obično ukazuju na sučelje temeljeno na dodiru.

To su značajno različite zvijeri i dobro će vam zapamtiti da dok strukturirate svoje dizajne jer smjer u koji vas vodi ovo znanje može biti pomalo kontraturan.

Na primjer, iako skloni razmišljati o mobilnoj web-lokaciji kao smanjenoj verziji radne površine za stolna računala, često se događa da će elementi zapravo povećati veličinu zbog razlike između dodira i klika. Navigacijski element koji izgleda savršeno dostupan mišem i kursorom mogao bi biti pored nemoguće precizno ciljati velikim, grubim uređajem za unos koji je ljudski kažiprst.

Važno je ovdje zapamtiti testiranje kao ludo. Dizajnirati je na radnoj površini, a zatim promijeniti veličinu prozora preglednika kako biste zavirili u tu mobilnu verziju. Ovo vam jednostavno ne govori cijelu priču. Prije nego što nazovete dobar, potrebno je da dizajnirate manje dimenzije.

Sve je to između

Jedna najvažnija stvar koja vam se treba donijeti u glavi u vezi s odazivnim dizajnom je da se radi o više od veličina zaslona: to je o veličinama prozora preglednika. Samo zato što netko ima 13-inčni MacBook ne znači da je prozor preglednika takve veličine. Često se događa da korisnici otvaraju i koriste prozore preglednika u znatno manjem broju nego na cijelom zaslonu.

Ovdje je potrebno da ne ispadate nakon što ste testirali nekoliko unaprijed određenih veličina prozora. Promijenite veličinu prozora preglednika i pogledajte kako dizajn reagira na svaki mali korak. Standardni argument je da korisnici koji nisu dizajneri nikada ne izvode ovu radnju, i to je točno, ali oni će koristiti svoje prozore preglednika u beskrajnom nizu nepredvidivih veličina, a ljepota responzivnog dizajna je ta što možete prilično lako osigurati da će vaš dizajn izgledati savršena u svima njima.

Razmislite o prvom mobilnom putu

Konačno, na vama je kako planirate svoj responzivni dizajn. Međutim, postoji puno snažnih argumenata za pridruživanje mobilnoj skupini.

Počevši s mobilnom verzijom pomaže vam da mobilnim korisnicima ne jednostavno ne servirate jezivu polusjelovsku verziju svog originalnog dizajna. Ujedno osigurava da zaista razmislite o specifičnostima svakog sitnog sadržaja.

Iznad smo naveli da se kroz svoj dizajn trebate provući i usmjeriti na apsolutno bitne elemente, ovo je daleko lakši postupak ako zapravo započnete s samo osnovnim osnovama. Pomoću ove tehnike možete proaktivno dodati svom dizajnu jer se veličina stranice povećava za razliku od rezanja jer se veličina stranice smanjuje. Ovo slijedi koncept progresivnog unapređenja koje započinje s čvrstom funkcionalnom bazom i nudi poboljšanje tamo gdje je to moguće.

Još jedna prednost mobitela je ta što često možete izbjeći unošenje nepotrebnih elemenata na manje uređaje koji ih neće koristiti. Projekti poput 320 i više usmjereni su na to da vam pomognu da smanjite resurse koje učitava mala verzija vašeg dizajna.

Zaključak

Svrha ovog članka bila je da vas prestanete razmišljati o zaostalom dijelu responzivnog dizajna dovoljno dugo da razmotrite posljedice ove tehnike na ono što korisnik vidi. Daleko važniji od sintakse medijskog upita krajnji je rezultat kako se vaš dizajn razvija s vizualnog i funkcionalnog stajališta kako bi zadovoljio korisnikove potrebe.

Imajte na umu da morate aktivno promovirati svoj dizajn u pregledniku, a ne samo u aplikaciji za statički dizajn. Također morate uspostaviti konkretnu hijerarhiju najvažnijih elemenata u dizajnu kako biste bili sigurni da su ti dijelovi slagalice prisutni i savršeno funkcioniraju za svaku veličinu prozora. Za kraj, zapamtite da je mobilni web dizajn mnogo više od smanjenja web stranica na radnoj površini. Razmislite o prvom rutini za mobilne uređaje kako biste osigurali da svi korisnici dobiju solidno iskustvo.

Slikovni krediti: Claudia Regina