Single blog post

Mis on “responsive web design”?

"Responsive web design" (dünaamiline veebidisain) metoodikas loodud veeb arvestab, millise ekraaniga sa kodulehte vaatad ning mugandab end jooksvalt vastavalt sellele. Sisuliselt on see targalt skaleeruv veeb. Näiteks arvutiekraanil kolme vertikaaltulbaga sait on mobiilivaates üsna samasugune, aga 1 vertikaalse tulbaga ja kompaktsema menüüga.

Ka klassikaline mobiiliveeb on mõnes mõttes responsive, sest ta näeb, et tuled lehele näiteks mobiiltelefoniga ning annab sulle ette vastava visuaali. Kui klassikaline mobiilveeb kasutab eraldi kujundusmalli pisiekraanile ja mõnele muule (näiteks iPad), siis nn tõeline responsive web design "paigutab jooksvalt klotsid ümber".

Tavaliselt muudetaksegi ümber paigutus (näiteks mitme tulba asemel üks või horisontaalse menüü asemel vertikaalne), samuti saab peita-näidata erinevatel laiustel teatud elemente. Reeglina on paigas, kui kitsaks või laiaks ta lubab minna. Ei ole teab mis reaalne, et keskmine veebileht näiteks 30-tollisel monitoril tervet ekraani katta suudaks nii, et pilt jääks kena ja sisu tarbitav (näiteks väga pikad tekstiread pole loetavad). Seetõttu on reeglina just maksimaalne laius ja sellest tulenev layout fikseeritud.

Ta niivõrd ei arvesta, mis seadmega sa vaatad vaid kui suur on brauseriaken. Kui mobiilveebis on reeglina ka oma sisustrateegia, siis responsive webi puhul on üldiselt sisu sama (kuigi ka ei pruugi). Näide videona:

Responsive web design toob veebitegemisse sisse rohkem insenerlikku mõtlemist ning teatud mõttes teeb veebitegemise keerulisemaks ja töömahukamaks, sest kõik küljendused tuleb mitmel tasandil läbi mängida ning hiljem koodis ka realiseerida. Võib ka öelda, et ta piirab kuigipalju disaineri vaba mõtlemist ning paneb üldpildi mõneti raamidesse.

3 põhilist erinevust mobiilveebiga

  • Skaleeruvus. "Responsive web design" tagab mitmete erinevate ekraanimõõtude toetuse (tavaliselt mõeldakse kokku 3-4 erinevat põhimõõtu ning pannakse need mõõdukalt skaleeruma, vt näiteid), mobiilveeb on reeglina üks suht kindel nn miniformaat.
  • Tehnilised omadused. Arvestatakse seadmepõhiseid omadusi, näiteks GPS-i kasutus tuuakse mobiilveebis fookusesse. Samuti püütakse mobiilveebis lehe maht väiksemaks (ja sellega kiiremaks) saada, sest külastajal on tõenäoliselt kiire, a la katkise autoga tee ääres.
  • Sisustrateegia. "Responsive web design" veebis on sama sisu, mobiiliveebis tavaliselt kohandatakse sisu mobiilikasutaja vaatevinklisse, a la kontaktid ja kaart koos sinu hetkeasukohaga esikohal, samas "juhatuse pöördumine" pole üldse vajalik. Ehk fookuses on kriitiline sisu operatiivsele külastajale, a la autos kiirelt infot otsides.

Põhjalik selgitus on artiklis "Responsive Web Design: What It Is and How To Use It".

Testi ise

Mine lehele forefathersgroup.com oma tavalise läpaka-brauseriga. Näed kena graafilist veebilehte:

Nüüd tõmba hiirega brauseriaken kitsaks piklikuks nagu mobiiliekraan ning näed, kuidas lennult kogu kujundus end ekraanilaiusega adapteerib:

Väga hästi skaleeruv on ka eestlaste veetav startup-rakendus Utopic.

Vaata veel rohkelt näidiseid siit:

Lõpetuseks

See ongi lühidalt responsive web design ning seda hakatakse üha enam praktiseerima. Kas seda on vaja rakendada, tuleb otsustada case by case.

Me plaanime ka oma blogi näiteks selle metoodika järgi natuke ümber teha. Kogu veebi ei tee, sest meie saidi puhul pole mobiilveeb teab mis oluline (teeme küll mobiileebi versiooni kontaktide kuvamiseks) ning kasutame ka suhteliselt "kaootilis-kirjut" kujundusstiili, mistõttu selle ümbertegemine oleks suhteliselt suur töö :)

Jaga postitust oma lemmikus sotsiaalmeediakanalis:

Jumbotron

Räägime edasi?

Pikk kogemus disainimaastikul on näidanud, et parimad tulemused kasvavad kommunikatsioonist ja sõprusest. Seetõttu soovimegi luua sinuga sooja ja siira partnersuhte, mis kannaks vilja ka aastaid pärast esimest teretust. Üheskoos võime seada verstapostid kasvõi silmapiirile, vahemaad kartmata.

Olen valmis!