Kas ir Responsīvs Web Dizains un Kāpēc Tas ir Svarīgs?

Responsīvs interneta mājas lapas jeb web dizains mainās kopā ar laiku, taču jauno tehnoloģiju parādīšanās, kas atbalsta interneta pārlūkus, liks arī jums padomāt par to, kā pielāgot savu mājas lapu visām šīm ierīcēm.

Nav nemaz tik ilgs laiks pagājis, kopš interneta lapas tika veidotas tikai priekš datora ekrānu izšķirtspējas. Tas strādāja labi līdz brīdim, kad mūsu dzīvēs ienāca interneta pārlūku atbalstoši viedtālruņi un planšetes.

Mobilie telefoni jau sen vairs nekalpo tikai kā sazināšanās līdzeklis, bet gan ierīce, kas ikdienas steigā ļoti veiksmīgi spēj aizvietot datorus, veicot gandrīz visas tās pašas funkcijas tikai uz mazāka un kompaktāka ekrāna. Būtu tikai loģiski, ja web lapas un lapu dizains pielāgotos šiem mazajiem ekrāniem.

Responsīvs web dizains ir tehnika, kas palīdz veidot mājas lapas, kas darbosies gan uz mobilajām ierīcēm, planšetēm, kā arī uz datora ekrāniem.

shredseo.com

Kāpēc responsīvs mājas lapas dizains ir svarīgs?

  1. 2015. gada 21. aprīli Google ieviesa kārtējo atjauninājumu savā meklēšanas algoritmā, kas šoreiz būtiski vērsts uz pārbaudi vai mājas lapa ir mobilām ierīcēm draudzīga. (Vairāk informācijas angļu valodā par mobile friendly update)
  2. Pēc 2014. gada statistikas, var secināt, ka vairāk nekā 60% no interneta lietotājiem piekļūst tīmeklim no mobilajām ierīcēm un no šiem cilvēkiem aptuveni 45% lietotāji ir atzinuši, ka ir pametuši mājas lapu tikai tāpēc, ka tā nav responsīva dizaina. Šis arī ir ļoti būtisks SEO faktors, jo tiek sabojāta lietotāju pieredze. Vairāk par šo iespējams lasīt vienā no iepriekšējiem rakstiem “SEO linku būvēšanai nav nākotnes

Dusmīgs Mājas Lapas Lietotājs

Tā kā arī mums ir svarīgi, lai mājas lapas vienādi un pārskatāmi izskatītos no kabatas izņemtajā viedtālrunī vai somā paslēptajā planšetē, šis raksts tev palīdzēs rast ieskatu, kā to izdarīt.

Kas tad īsti ir responsīvs web dizains?

Kā jau ievadā tika minēts, responsīvs web dizains ļauj vienam kodam strādāt uz dažādu izmēru ekrāniem, nemainot tā saturu un izskatu. Daudzas, dažādas mājas lapas ir responsīva un, starp citu, optimise.lv ir viena no tām. Ja tiek samazināts pārlūka logs, samazinās arī lapas elementi, ļaujot visu skaidri pārredzēt.

Ekrānšāviņš - Pārbaude par piemērotību mobilajām ierīcēm

Ierīces, kas atbalsta web pārlūkus vairojas ik dienas un pielīdzināt savas lapas izskatu katrai no tām ir gandrīz neiespējami, tāpēc būtu tikai loģiski ļaut lapai pašai pielāgoties jaunajai videi, gluži kā to dara hameleons.

Kā tas sākās?

Kamerons Adams 2004. gadā bija pirmais, kas izveidoja saiti, kas adaptējas pārlūka platumam un līdz 2008. gadam, kad runa gāja par web lapu izkārtojumu, bija parādījušies tādi vārdi kā fleksibls, elastīgs, plūstošs un citi. CSS3 mediju vaicājumi bija gatavi jau 2008. gada beigās, bet par responsīviem web dizainiem pasaule pirmo reizi dzirdēja 2010. gada maijā, kad Ītans Markote par to uzrakstīja žurnālā „A List Apart”.

Savu teoriju un praktiskās zināšanas par responsīviem web dizainiem viņš turpināja aprakstīt savā grāmatā „Responsīvi Web Dizaini”, kas klajā nāca 2011. gadā.

Responsīva Web Dizaina Grāmata

Digitālo mediju mājas lapa „Mashable” nosauca 2013. gadu par responsīvo web dizainu gadu, jo vairāki citi resursi bija rekomendējuši lapām izmantot šo jauno alternatīvu mobilajām aplikācijām.

Pēcāk jau par to rakstīja žurnāls „Forbes”, kurā kādā intervijā Džodijs Resniks apgalvoja, ka „Responsīvas mājas lapas vienkāršo interneta mārketingu un SEO biznesu. Tā vietā, lai pārvaldītu vairākas mājas lapas, uzņēmumi ar atsaucīgiem web dizainiem var tikt pie vienotas satura pārvaldīšanas sistēmas, jo tām ir tikai viena responsīva mājas lapa, ko pārvaldīt.

Web izstrāde - koncepts

Redniks pareģoja, ka „Tā kā internets pārvēršas par platformu, kas saved kopā pakalpojumus ar lietotājiem”. Šī tehnoloģijas piesaiste  nākotnē ļaus  integrēt ar vien jaunus back – end pakalpojumus, kā piemēram Facebook, Twitter, Salasfoce.com, un Amazon interneta pakalpojumus un pēc tam iesniegs integrētots datus atpakaļ uz front  – end IAD slāni atsaucīgajā dizainā, tāpēc aplikācija izskatīsies lieliski visās ierīcēs, bez īpašas kodēšanas palīdzības, katram no ekrāniem.

Nu tad sākam! 

Ir 3 galvenās sastāvdaļas, kas kopā veido responsīvu web dizainu.

  • Pielāgojošie režģi (fluid grids)
  • Pielāgojošie attēli (fluid images)
  • Mediju vaicājumi (media queries)

Tagad papētīsim katru no tiem nedaudz tuvāk.

Pielāgojošie režģi (fluid grids)

Tradicionāli, mājas lapas tika definētas pikseļos. Šāda ideja tika aizgūta no printēšanas industrijas, kur žurnāliem vai avīzēm vienmēr tika noteikts viens izmērs.

Jāsaka, labi vien ir, ka tā mājas lapas netiek attēlotas tagad, jo mūsdienās web lapas var būt atspoguļotas ļoti lielos izmēros, kā piemēram uz televizora, vai arī mazos izmēros kā telefonā vai pat viedpulkstenī. Tieši tā iemesla dēļ responsīvās web lapas tiek veidotas ar tādām vienībām kā procenti, nevis fiksētās vienības kā pikseļi.

arachnida.io

Tomēr, ja tu esi pieradis dizainēt pikseļos, tad šeit būs vienkārša formula, kas palīdzēs tev pāriet uz procentiem:

Mērķis / konteksts  = rezultāts

Tātad. Pieņemsim, ka jums ir mājas lapa, kas neļauj jums to redzēt platāku par 960 pikseļiem, bet jūs to skatāties pārlūka logā, kas ir 1920 pikseļus plats. Šajā gadījumā pārlūka logs ir konteksts, bet mājas lapa ir mērķis. Lai lapa izskatītos vienāda ar logu, jums ir jāsadala mērķis ar kontekstu, tā iegūstot procentu vērtību.

960px / 1920px = 50%

Šī pati formula strādā arī dažādiem lapas elementiem, kā piemēram sānu joslām vai galvenajam lapas saturam, nosakot katram savu vērtību.

Pielāgojošie attēli (fluid images)

Līdzīgi kā ar režģiem, būtu tikai loģiski, ja arī attēlus būtu iespējams pielāgot attiecīgajam ekrānam, uz kāda tas tiek skatīts un to paveikt var ar pilnīgi vienkāršu CSS kodu:

Img { max – width: 100%; }

Šis kods liks pārlūkam saprast, ka neviens attēls nedrīkst būt lielāks par tā pikseļu vērtību. Tas nodrošinās, lai attēls nekad nebūtu izstiepts vai vienkārši nekvalitatīvs.

Taču, ja attēls tiek atvērts mazākā ekrānā par tā pikseļu vērtību, tad attēlam vajadzētu sarauties un ieņemt formu, kādā ir ekrāns. Piemēram, ja attēls, kurš ir 800 pikseļu plats tiek ievietots 600 pikseļu platā ekrānā, tad arī tas sarausies 600 pikseļu platumā.

Garums tiks izkalkulēts automātiski un saglabās sākotnējās proporcijas.

Mediju vaicājumi (media queries)

Ja jūsu mājas lapai ir vairāku kolonnu funkcijas, izkārtotas diezgan platā veidā, tad to samazināt uz telefona izmēriem nav īpaši viegli, jo tie pārsvarā tiek lietoti vertikāli, lapu pārvietojot uz leju. Tādam nolūkam ir domāti mediju vaicājumi.

Tā ir CSS tehnoloģija, kas ir galvenā sastāvdaļa responsīvajam dizainam un pārlūkprogrammās tā darbojas jau vairākus gadus. Mediju vaicājumi nosaka lietotās ierīces parametrus, piemēram augstumu, platumu, orientāciju un izšķirtspēju.

Tā ir iespējams mainīt gan mājas lapas elementu izkārtojumu, gan pielāgot fonta izmērus vai paslēpt kādus elementus.

kronuscollars.com

Mediju vaicājumi ļauj pievienot CSS tikai tad, kad ir izpildīti konkrēti nosacījumi. Piemēram, jus varētu rakstīt mediju vaicājumus, kas darbosies CSS tikai tad, ja pārlūks sasniedz kādu konkrētu platumu. Ņemot piemēru no divu kolonnu lapas izkārtojuma, pieņemsim, ka vēlamies pacelt sānu joslu uz augšu mobilā telefona ekrānos un to izdarīt var šādi:

@media screen and (min-width: 600px) { /* …desktop styles here… */ }

Kādā konkrētā brīdī jebkurš režģa izkārtojums sāks „lūzt” un izskatīsies slikti. Ja mobilais izkārtojums, kas aizņem 100% pārlūka ekrāna tiktu izstiepts līdz portatīvā datora ekrāna izmēriem, tad tas izskatītos īpaši slikti un vieta tiktu aizņemta daudz par daudz.

Šo procesu dēvē par „lūzuma punktu”. Lai tas nenotiktu, ir izstrādāti dažādi multivides vaicājumi, kas izskatītos šādi:

/* …mobile styles here… */

@media screen and (min-width: 600px) { /* …tablet styles here… */ }

@media screen and (min-width: 900px) { /* …desktop styles here… */ }

Vispirms telefoni

Lai sāktu iegūt responsīvu web dizainu, silti iesakām vispirms veidot to uz mobilajiem telefoniem un tad pāriet uz datora un planšetdatoru ekrāniem jo:

  • Mobilās interneta pārlūkprogrammas ir strauji augošs process un, visticamāk aizēnos desktopa pārlūkprogrammas.
  • Mazie mobilā telefona ekrāna izmēri piespiedīs dizainerus domāt vairāk, jo tajos nav vietas sānu joslām, reklāmām, sociālo mediju pogām un rīkiem, ko uz lielā ekrāna būtu viegli izvietot.
  • Mobilajā ierīcēm ir vairāk iespēju nekā tas ir to lielākajiem „brāļiem”, kā piemēram skārienjūtīgais ekrāns, GPS iespējas, datu akselometrs un citas.

Veidot responsīvu dizainu vispirms uz mobilajiem ekrāniem ir pats loģiskākais solis, jo, kā jau iepriekš tika minēts, nav viegli ievietot vairāku joslu izkārtojumu daudz mazākā ekrānā.

Tā vietā ir daudz vieglāk sākt ar vienkāršāku izvietojumu mazākam ekrānam un tad doties tālāk uz sarežģītākiem dizainiem plašākā teritorijā.

Vēl pie tam, dizains, kas tiks veidots vispirms uz mobilajām iekārtām, palīdzēs arī desktopa izmēra izskatam, jo lapas apmeklētājiem būs vieglāk visu pārskatīt desktopa izmēros, ja pirms tam jau to būs darījuši uz mobilā telefona izmēriem.

Atsaucīgi front – end karkasi (frameworks)

Ar Front – end karkasiem mēs varam sastapties jau kādu laiku, taču pavisam nesen tie ir kļuvuši responsīvi. Īsi izsakoties, to rāmjos ir iebūvēti atsaucīgi dizaini jau no paša sākuma. Šis ir liels solis uz priekšu, jo jums nebūs jāveic nekādas rāmju kalkulācijas, tas strādās uzreiz.

bootstrap

Saite sitepoint.com nosauca 5 labākos front – end karkasus

  1. Bootstrap (http://getbootstrap.com/)
  2. Foundation (http://foundation.zurb.com/)
  3. Semantic UI (http://semantic-ui.com/)
  4. Yahoo veidotais Pure (http://purecss.io/)
  5. Uikit (http://getuikit.com/)

Ja vien jūs neveidojat pilnīgi vienkāršu 1 lapas web saiti, tad gudrāk būtu izvēlēties kādu no šiem responsīvajiem karkasiem, padarot jūsu interneta dzīves daudz vieglākas.

Responsīvie attēli

Mūsdienu telefoniem, planšetēm un datoriem ir līdz pat divām vai trīs reizēm vairāk pikseļu, nekā attēliem, tāpēc web dizaineriem rodas grūtības ar vairāku pikseļu blīvumu.

Bez fotogrāfijām interneta lapa dzīvot nespēj, tāpēc parasti, lai attēlu ievietotu, pietiktu tikai ar tā padarīšanu divas reizes lielāku par parent container. Piemēram, ja tas ir 400 pikseļus plats, attēlam vajadzētu būt vismaz 800 pikseļus lielam.

Taču, ja jums nepieciešams strādāt ar kaut ko lielāku un vairākiem attēliem, ir vērts pievērst uzmanību jaunākajiem atsaucīgo attēlu risinājumiem, kā piemēram responsiveimages.org, kas piedāvā dažādus risinājumus jūsu attēliem.

Tāpat viena no iespējām varētu būt:

http://foundation.zurb.com/docs/components/interchange.html lapa, kas izmanto JavaScript un HTML datu atribūtus un, starp citu, ir mājas lapa, kas jau tika minēta sadaļā pie atsaucīgajiem front – end karkasiem.

Dažkārt ar to ir par maz

Lai arī responsīvs web dizains sniedz dizaineriem jaunas iespējas izpausties un paveikt savu darbu, dažreiz ar to ir par maz, lai pie lietotājiem nonāktu kvalitatīva, pārskatāma un lietojama mājas lapa.

Ir iespējams, ka visa funkcionalitāte nav iespējama uz kādām ierīcēm, piemēram, nav iespējams JavaScript izkrītošo izvēlni vai nevar nosūtīt formu, kura balstīta uz Ajax.

Mājas Lapas Izstrāde

Tieši tādēļ izstrādātāji mūs ir pagodinājuši ar kādu no divām mājas lapu mūrēšanas metodēm:

  • Pakāpeniskā samazināšana (graceful degradation)

Metode, kas paredz vietnes izstrādi attīstītākajai pārlūkprogrammai, tikai pēc tam sniedzot atbalstu pārlūkprogrammā, kuras ir mazāk attīstītas vai novecojušas.

  • Pakāpeniskā uzlabošana (progressive enhancement)

Šī metode vispirms paredz mājas lapas satura pieejamības nodrošināšanu ikvienam lietotājam, neatkarīgi no izmantotās ierīces un ievades veida. Tikai pēc tam tiek domāts par vizuālajiem uzlabojumiem, animācijām, reklāmām un citu slāņu pievienošanu, kuru uzdevums ir  sniegt papildus ērtības un lielāku iespēju lietotājiem baudīt lapu.

Kam tas vispār ir vajadzīgs?

Atbilde nav jāmeklē vikipēdijā, jo izmantojot responsīvu web dizainu, ikvienam jūsu lapas lietotājam būs daudzreiz patīkamāk uzturēties tajā no dažādām ierīcēm, kas rezultējas atkārtotā mājas lapu lietošanā.

SEO koncepts

Izveidot responsīvu dizainu web lapai ir ērtāk un daudzreiz lētāk, kā veidot atsevišķu mājas lapu priekš datora lietotājiem, atsevišķu telefona lietotājiem un atsevišķu planšetdatoru lietotājiem. Plus, katrai no mājas lapām savā ierīcē nebūs jāatjauno informācija, jo responsīvas mājas lapas gadījumā tas ir jādara tikai vienu reizi.

Responsīvas mājas lapas ir daudz veiksmīgākas Google meklēšanas sarakstā, tāpēc arī Google iedrošina firmas un organizācijas veidot responsīvas mājas lapas. Kā gan var neklausīt Googlei?

Vēl pēdējie vārdi

Responsīvi web dizaini prasa nedaudz vairāk spēku un koncentrācijas spējas tā realizācijā, taču gala rezultāts noteikti būs visu pūļu vērts. Pats galvenais, ka tas darbosies ilgtermiņā, kas pie mūsdienu tehnoloģijas attīstības ātruma ir ļoti svarīgi.

Responsīvs web dizains sākumā var sķist nedaudz sarežģīti saprotams un pat, ja šeit neatradi metodi, kā padarīt savu lapu atsaucīgi, tad jāatceras, ka nav viena konkrēta pamācība, kā izveidot adaptīvu dizainu, jo instrumenti un tehnikas ir jāpiemēro katrai situācijai.

Šeit būs, vēl kāda vērtīga saite, kurā ieskatīties par jaunumiem adaptīvajos dizainos, vēl vairāk resursu un dažādu paraugu.

KarlisKas ir Responsīvs Web Dizains un Kāpēc Tas ir Svarīgs?