Ja jums rodas jautājums, kāpēc mobilās tīmekļa vietnes izveide ir svarīga, ņemiet vērā faktu, ka turpat puse viedtālruņu lietotāji sevi uzskata par “atkarīgiem” no viedtālruņiem. Mēs katru dienu savos tālruņos skenējam QR kodus, izmantojam GPS, uzņemam fotoattēlus, skaitām nostaigātos soļus, guļam tiem blakus un, protams, pārlūkojam internetu. Iespējams arī šo rakstu šobrīd jūs lasāt savā tālrunī.

Jums ir jāoptimizē jūsu tīmekļa vietne, pielāgojot to mobilajām ierīcēm, jo vairāk kā 80 % interneta lietotāju internetā sērfo savā tālrunī un gandrīz 70 % tīmekļa plūsmas nāk no mobilajām ierīcēm. Neatkarīgi no jūsu nozares vai nišas – vai jums ir blogs, tiešsaistes veikals vai uzņēmuma vietne – vietnes izstrāde ar mobile-first pieeju jums nodrošinās to, ka jūsu vietne būs atbilstoša mobilo ierīču lietotāju prasībām ātruma, izskata, navigācijas viegluma un vispārējās lietotāju pieredzes ziņā.

Kas ir mobile-first dizains?

Kā jau nosaukums paredz, mobile-first dizains apzīmē praksi, kad tīmekļa vietnes izveide balstās pirmkārt uz mobilo ierīču lietotāju vajadzībās. Mobile-first vietņu dizains jau no paša sākuma ņem vērā mazāku ekrānu noteiktos ierobežojumus, lai nodrošinātu labāku mobilo ierīču lietotāju pieredzi.

Mobile-first pieeja balstās progresīvā attīstībā, kad vietnes dizaineris vispirms rada vietnes izklājumu tieši mobilajām ierīcēm, un pēc tam to pielāgo lielākiem ekrāniem. Šī metode ir pretēja regresīvajai pieejai jeb vietnes izveidei lieliem ekrāniem un pēc tam tās pielāgošana mazākiem ekrāniem.

Lietotājs var iegūt tikai tik daudz satura, cik atļauj viņa ierīces izmērs. Piemēram, lietotājam ir pietiekami daudz vietas, lai skatītu un patērētu saturu 27 collu monitorā. Tomēr citam lietotājam, kas jūsu vietni skatās uz iPhone 14 vai Galaxy s22 ekrāna, būs pavisam cita pieredze. Mobile-first dizains racionalizē jūsu UX dizaina centienus, optimizējot lietotājiem svarīgākās funkcijas.

Adaptīvs un responsīvs dizains

Dizaineri, veidojot mobilo vietņu dizainu, izmanto divas populāras pieejas: adaptīvo un responsīvo. Īsumā norādīsim, ar ko tie atšķiras:

• Adaptīvais tīmekļa dizains (Adaptive web design (AWD): izmanto fiksētus izkārtojumus un izvēlas vislabākās iespējas lietotāja ekrāna lielumam. Izkārtojumi ir ierobežoti, pieejams tikai tas, ko tīmekļa dizaineris (vai tīmekļa vietnes izveidotājs) ir radījis. Pielāgojamie vietņu dizaini iekļaujas šajos standarta displeju lielumos: 320px, 480px, 760px, 960px, 1200px un 1600px.
• Responsīvais tīmekļa dizains (Responsive web design (RWD): tas automātiski paslēpj, samazina vai palielina vietni, lai uzlabotu tās attēlojumu jebkurā ierīcē (gan mobilajā, gan datorā). Responsīvais dizains vienmērīgi pielāgo tīmekļa vietnes izskatu atbilstoši pārlūkprogrammas loga izmēram.

Kāpēc mobile-first dizains ir svarīgs?

Mobilās tehnoloģijas nepārtraukti attīstās, piedāvājot arvien lielāku ātrumu un veiktspēju, augstākas kvalitātes video straumēšanas iespējas un progresu bezvadu savienojamībā, mainot veidu, kā mēs pārvaldām savu ikdienas dzīvi. Daudzi uzņēmumi ir pārgājuši uz hibrīddarba modeļiem un ieviesuši jaunas mobilo komunikāciju stratēģijas.

Mobile-first dizainam ir nozīme šādu iemeslu dēļ:

1. Uzlabota gala lietotāja pieredze. Pašos pamatos mobile-first dizains lietotāju pieredzi izvirza uzmanības priekšplānā un centrā. Kā norāda Mijiedarbības dizaina pamati (Interaction Design Foundation): “UX dizaineri pielāgo lietotāja pieredzi, lai tā atbilstu mobilajām vidēm. Mobilajā UX uzmanības noķeršanas laiks ir īss. Lietotāji rezultātu vēlas ātri, ar minimālu piepūli un bez aizķeršanās.” Paturot šo prātā, mobilajām ierīcēm formatētas vietnēm jāpiedāvā optimizētu un pārdomātāku lietotāja pieredzi.
2. Pieejamība. Mobile-first dizains lietotājiem nodrošina lielāku kontroli pār to, kad un kur viņi var piekļūt vietnei. Kā ziņo “The Drum”: “Iespējams, labākā pieeja ir domāt par interneta lietošanas pieredzi kā par plūstošu lietu, kurai būtu jābūt neatkarīgai no tā, kādu pārlūkprogrammu, Operētājsistēmu vai ierīci tu lieto. Precedents šeit ir tīmekļa pieejamība, padarot vietnes viegli lietojamas cilvēkiem ar invaliditāti, galvenokārt ar redzes traucējumiem.” Veidojot vai pat pārveidojot vietnes dizainu mobilajai pieejamībai, jūs sasniegsiet tos lietotājus, kuri citādā veidā no jūsu satura lietošanas var tikt izslēgti. Tajā pašā rakstā ir teikts: “Tādā veidā, neņemot vērā mobilo ierīču lietotājus, viņi tiek izslēgti no jūsu tīmekļa vietnes.” Piemēram, mobile-first dizains e-mācīšanos padara pieejamu un pielietojamu, jo mobilo ierīču lietotāji var izmantot balss komandas un klausīties saturu, vadot automašīnu vai vingrojot, tādā veidā citādi neproduktīvi pavadītu laiku pārvēršot mācību iespējās.
3. Labāka vietnes veiktspēja. Mobilā optimizācija ir vietnes veiktspējas pamatprincips. Pētījumi liecina, ka tad, kad mobilās tirdzniecības vietnes ātrums uzlabojas par 0.1 sekundi, darījumu skaits uzlabojas par 8.4 %. Nemaz nerunājot par to, ka Google jau vairāk kā 10 gadus izmanto mobile-first indeksāciju, galvenokārt pārmeklējot un indeksējot lapas, kas atbilst mobile-first dizainam. Vārdu sakot, jo labāk jūsu dizains ir pielāgots lietošanai mobilajās ierīcēs un vieglāk lietojams, jo labāka ir vietnes veiktspēja. Mobilo vietņu paraugprakses ievērošana, piemēram, stratēģiskā satura hierarhija un attēlu optimizācija, var palīdzēt nodrošināt to, ka jūsu vietnes lietotāju daudzums aug.
4. Pielāgošanas iespējas. Mobile-first pieeja jums palīdzēs pielāgot jūsu dizainu dažādām ierīcēm. Konceptuāli ieviešot savu ideju mobilajā versijā, jums būs vieglāk savu saturu pielāgot datora vajadzībām. Piemēram, ir vieglāk pievienot dažādus vietnes elementus datora versijai (kuras izstrādē jārēķinās ar lielāku ekrānu), nekā tos ņemt nost, lai saturu ietilpinātu mobilo ierīču ekrānos.

Mobile-first = saturs pirmajā vietā

Vienmēr atcerieties, ka, veidojot dizainu ar mobile-first pieeju, saturam ir izšķiroša nozīme. Lietotājiem, redzot jūsu vietni savā mobilajā ierīcē, ir daudz mazāk vietas nekā datora monitorā, tādēļ jums būs jāpieņem stratēģiski nozīmīgi lēmumi par to, kādu saturu iekļaut.

Halils Habaši (Khalil Habasi), Wix tehniskais un UX dizaineris, skaidro: “Jebkura satura daļa, kuru mēs lietotājiem ļaujam redzēt viņu mobilajās ierīcēs, ir dizainā balstīts lēmums. Ir svarīgi saturu parādīt dažādos veidos. Piemēram, ritināšanas vietā izmantojot karuseli, vai vertikālā ritināšana horizontālās vietā, tas viss var ietekmēt mobilo lietotāju pieredzi.”

Tā kā mobilo ierīču lietotāji satura pārlūkošanai neizmanto peli vai tastatūru, Habaši piebilst, ka tīmekļa dizaineriem saturs jāpadara viegli pārlūkojams. Piemēram, mobilajā versijā izmantojot pieskaršanās un ritināšanas žestus, kursora novietošanas efekti šajās ierīcēs nav optimāli. Viņš arī piebilst, ka saliekamās (collapsible) cilnes vai izvēlnes var palielināt vietu un padarīt saturu mobilajiem lietotājiem pieejamu.

Mobile-first dizaina principi

Veidojot savas tīmekļa vietnes dizainu ar mobile-first pieeju, ņemiet vērā šos pamata elementus:

• Saturs pirmajā vietā. Vienmēr apdomājiet savu saturu vispirms un zvēlieties stratēģiski to, kas ir vissvarīgākais. Apmeklētāji redzēs jūsu galvenes saturu gan mobilajā, gan datora versijā, tāpēc pārliecinieties, ka tas uzreiz dara zināmu jūsu zīmola identitāti. Piemēram, jūsu vietnes datorversijā var būt iekļauti papildus attēli, taču vietnes mobilajā versijā, kur vietas ir mazāk, jūs iekļausiet tikai tos attēlus, kas atspoguļo jūsu zīmola identitāti, piemēram, jūsu logo un produktu attēlus.
• Navigācija. Palīdziet lietotājiem pārvietoties mobilajā vietnē un jēgpilni patērēt jūsu saturu, piemērojot stratēģiskos vietņu navigācijas padomus, kā, piemēram, pievienojot skaidrus aicinājumus uz darbību (CTA – call to action) un izvēloties pareizās izvēlnes. Daudzi dizaineri dod priekšroku hamburgeru izvēlnēm, lai maksimāli izmantotu vietu mobilās ierīces ekrānā.
• Hierarhija. Veidojot vietnes izklājumu mobilajiem lietotājiem,vpārdomājiet vietnes hierarhiju. Rūpīgi izplānojiet savas vietnes saturu,vpievienojot galvenes un apakšvirsrakstus, izmantojot atstarpes, veidojotvattēlu blokus un optimizējot navigācijas rīkus.
• Lietotājam draudzīga saskarne. Papildus saturam un vizuālajiem elementiem, pārliecinieties, ka jūsu mobile-first dizains ir lietotājam draudzīgs. Piemēram, mobilo ierīču lietotājiem ir tieša piekļuve savām kamerām, skārienekrāniem, pirkstu un sejas atpazīšanai, kā arī automātiskās aizpildīšanas laukiem. Tas nozīmē, ka jums jāpievērš pastiprināta uzmanība savas vietnes pogām, jo mobilo ierīču lietotājiem būs lielākas iespējas nospiest nepareizo pogu.
• Testēšana uz reālām ierīcēm. Pirms publicēšanas pārbaudiet savu mobilo vietni uz reālām ierīcēm, lai saprastu, kādu pieredzi jūsu vietnē lietotājs iegūs. Izmēģiniet to dažādos ekrānu izmēros un ierīcēs, lai atklātu jebkādas atšķirības.