Adaptīvais vietņu dizains ir ērta sistēma vienas un tās pašas vietnes attēlošanai dažādu veidu ierīcēs tiešsaistē. Vienkārši izsakoties, šī ir iespēja skatīt vienu tīmekļa lapu klēpjdatorā, viedtālrunī un citos sīkrīkos.
Tīmekļa atsaucība ir kļuvusi par nepieciešamību kopš brīža, kad cilvēki ieguva dažādu formātu sīkrīkus, kas nodrošina internetu. Uzņēmumi, tiešsaistes veikali un pat tikai informatīvas vietnes cenšas iepriecināt savu auditoriju, pielāgojoties tai visos iespējamos veidos. Atsaucīgs dizains atrisina ērtības problēmu, tāpēc tas ir neaizstājams darba priekšmets.
Atsaucīga tīmekļa dizaina īpašības
Dizaina ērtumu raksturo vairāki galvenie kritēriji.
- Izmērs. Responsīvam mājas lapas dizainam ir jābūt nelielām atšķirībām, parādot lapu dažādās ierīcēs, tāpēc attēlu, teksta un citu skatīto elementu izmēriem jāatbilst pašu ierīču izmēriem. Lai to izdarītu, tīmekļa izstrādātāji pielāgo dizainu tā, lai tam būtu vairākas skata versijas.
- Satura pielāgošana. Materiāls, kas aizpilda vietni (attēli, videoun citi multivides elementi) arī jāatbilst nepieciešamajām ekrāna izšķirtspējām, nezaudējot displeja kvalitāti.
- Dizaina elastība. Elementu iekļaušana izstrādē, kas ļauj ātri pielāgot vietnes dizainu, mainot skatīto tīmekļa lapu. Piemēram, lietotājs ritina lapu uz augšu un uz leju, pārvietojas pa dažādām sadaļām vai maina ekrāna pozīciju no vertikālas uz horizontālu un otrādi.
- Vienkāršojiet vienumus pēc ierīces, lai nodrošinātu labāku lietojamību.
- Slēpt nesvarīgos blokus mazākos ekrānos.
Pamatinformācija
Mājas lapas veidošana noteikti ir saistīta ar programmēšanas valodām, jo bez tām vienkārši nevar iztikt. Izmantojot HTML un CSS, pārlūkprogramma atpazīst objektu (tekstu, ilustrāciju, video) sastāvu un secību – tā tiek veidota vietne.
CSS ir atbildīgs par krāsām, stiliem, izmēriem, fontiem, līdzinājumiem, polsterējumu, fona elementiem, formām utt. HTML ir atbildīgs par vietnes kopējo saturu un struktūru. Tādējādi tīmekļa resurss tiek veidots, apvienojot divas vissvarīgākās apraksta metodes.
No otras puses, CSS ir neaizstājams dizaina rīks. Tam ir liels funkciju kopums, kas ir pārāks par HTML:
- Nodrošina dizaina konsekvenci vairākās lapās, vietnes izskatu un kontrolē HTML dokumentu rādīšanu.
- Sniedz iespēju vienlaikus veidot dizainu un saturu.
- Piemēro vairākus stilus un iespējuskatīšanās dažādās ierīcēs.
- Pieņem sarežģītus dizaina lēmumus.
- Raksturīgs liels ātrums.
Lai izstrādātu vietni, jums jāzina daži pamatjēdzieni.
CSS atlasītājs tiek apzīmēts ar stila nosaukumu, kas nosaka rekvizītus un formatēšanas opcijas. Tas norāda pārlūkprogrammai, uz kuru konkrētu elementu attiecas rekvizīti.
Īpašums ir struktūrvienība. Tas nosaka ārējos parametrus (izmēru, atrašanās vietu, krāsu, formu utt.) un ir izteikts noteiktā kodā.
Ir definētu CSS rekvizītu kopa, kas apraksta vienu objektu pēc izskata un atrašanās vietas.
Kopā šie elementi veido šādu shēmu:
Selector { property1: value; īpašums2; vērtība }.
Izkārtojuma izmēri un izšķirtspējas
Dizaina izstrāde sākas ar maketa sagatavošanu Photoshop vai citās grafiskajās programmās. Ērtības labad audeklā tiek ievietoti īpaši moduļu režģa marķējumi, tiek ievēroti īpaši ievilkumi. Tādējādi tīmekļa dizainers parāda maketētājam nākotnes vietnes strukturēšanas principus un pareizu tīmekļa elementu izvietojumu.
Atsaucīga tīmekļa dizaina izšķirtspēja un izmēri galvenajiem ierīču veidiem:
- Šis dizains atbilst principam sākt darbu ar mobilo sakaru atļauju. Viedtālruņa izkārtojums ir izveidots 460 × 960 pikseļu izmērā.
- Planšetdatora izkārtojuma izmērs ir 768 × 1024.
- Piezīmjdatora izmērs ir 1280 × 802.
- Datora izmērs ir 1600 × 992.
Vietnes mobilajā versijājābūt pēc iespējas vienkāršotai, vienlaikus saglabājot visas galvenās funkcijas. Ja makets tiek gatavots interneta veikalam, izmantojot visus vienkāršojumus, tajā jābūt galvenajam aprakstam, preču katalogam, pasūtījuma iespējai, iepirkumu grozam u.c. – visiem pilnvērtīgai funkcionēšanai nepieciešamajiem elementiem, tāpat kā pilna formāta skatīšanai datorā. Mobilās versijas ērtības ir tādas, ka šeit varat izvairīties no papildu lapām, lai ietaupītu laiku ielādes laikā.
Adaptīvajā saturā, izmantojot html kodu, varat paslēpt dažus elementus, kas nav īsti nepieciešami. Piemēram, augstā izšķirtspējā vietne parāda preces karti ar tās aprakstu, cenu, piegādes informāciju un iespēju pievienot "Grozu". Mobilajā izšķirtspējā process ir vienkāršots līdz fotoattēlam, cenai un pirkšanas pogai.
Vidējā un minimālā izšķirtspēja adaptīvam dizainam ir jāņem vērā, ka lietotājs var viegli lasīt un skatīt.
Izkārtojums
Adaptīvā dizaina izkārtojuma mērķis ir izveidot elastīgu izkārtojumu jeb, kā arī pieņemts teikt: "gumijas veidni". Apakšējā līnija ir nevis viena cipara lapas izmēros, bet gan proporcionālā veidnes saspiežamībā, lai to varētu viegli skatīt visās ierīcēs.
Tā galvenokārt ir veidota uz CSS. Izstrādes laikā tiek noteikti ekrāna izmēru kontroles punkti. Tādējādi tiek noteikts atlikušo objektu platums. Lai to izdarītu, lapas platumu nosaka rekvizīts css max-width, atkarībā no šiem kritērijiem citu elementu lielums tiek izvēlēts procentos. Piemēram, bloka lielums galvenajālapa ir 600 pikseļi, un sānjoslas bloka (vietnes sānjoslas) platums ir attiecīgi 400 pikseļi, satura platums būs 60%, bet sānjoslas platums - 40%.
Ir vairāki adaptīvo izkārtojumu veidi. Katrs tiek izvēlēts atsevišķi, atkarībā no īpašībām un konstrukcijas.
Skatījumi:
- Izkārtojuma veids, kas ļauj aplauzt blokus, kad ekrāna izšķirtspēja ir samazināta. Vairāku kolonnu vietnēs papildu bloki tiek pārvietoti uz ekrāna apakšdaļu.
- Kad katrai atļaujai tiek izstrādāts atsevišķs modelis. Šāda veida adaptīvam noformējumam ir nepieciešams ilgāks laiks, taču tas ir vislasāmākais.
- Vienkāršs dizaina veids, kura mērķis ir mērogot visus elementus. Tas nav elastīgs.
- Paneļa veids ir ērts lietošanai mobilajās aplikācijās, kad, mainot paša ekrāna pozīciju, parādās papildu funkcijas.
Atbildīgu slāņu izveide ir tikai viena darba daļa. Adaptīvie attēli ir atsevišķs gadījums, kam ir savas problēmas un metodes to risināšanai.
Atsevišķam attēlam ir jābūt skaidri parādītam dažādās ekrāna izšķirtspējās. Šeit ir problēma - kā nodrošināt, lai attēls vienmēr paliktu nemainīgs, neatkarīgi no izšķirtspējas izmaiņām. Šajā gadījumā nepietiks ar vienkārša CSS koda ievadīšanu.
Piemērs: img {max-width: 250px;} - šeit ir jāizmanto metode, kurā ir ierobežots konteinera, kurā ir attēls, izmērs, nevis pats attēls. Tas izskatīsies apmēram šādi: div img {max-width: 250px;}. Šī metode atrisina problēmumazu attēlu izkārtojums, bet nav piemērots lielām ilustrācijām.
Tādēļ daudzi izstrādātāji izvēlas izmantot JavaScript valodas, kas ļauj pielāgot jebkuru attēlu, nepārslogojot serveri. Javascript piedāvā lielu skaitu alternatīvu skriptu.
Adaptīvā izkārtojuma plusi un mīnusi
Pozitīvi:
- Saglabājiet visu elementu atrašanās vietu. Tas ir ērti, ja lietotājs ir pieradis pie pilnas vietnes versijas.
- Saglabājiet domēnus un adreses.
- Pilna pielāgošana citiem atļauju formātiem.
Negatīvie:
- Funkcionālā elastība ir zaudēta
- Jebkura informatīva pārslodze ir saistīta ar ilgu tīmekļa resursa palaišanu, kas daudziem lietotājiem liek pārslēgties uz ātrākām opcijām.
Tīmekļa vietnes izveide
Vietnes struktūra ir sadalīta vairākās sadaļās un blokos. Tradicionāli izkārtojums sastāv no vietnes augšējās daļas (galvenes), logotipa, izvēlnes, satura bloka un vietnes beigu daļas (piemēram, detalizēta kontaktinformācija). Apskatīsim, kā izveidot adaptīvu vietnes dizainu no vienkāršas veidnes.
Palīgbirkas rakstīšanai:
- wrapper - tags, kas apvieno visus veidnes elementus;
- header h1 - logotips;
- header - izvēlnes un citu svarīgu elementu galvene;
- saturs - bloķēt;
- colLeft - satura lielums;
- colRight - sānjosla (sānu kolonna);
- footer - vietnes beigu daļa;
- mediju ekrāns - komplektivēlamā izšķirtspēja.
Rakstot vietni, šie elementi var pārvietoties atšķirīgā secībā atkarībā no nepieciešamības. Piemēram, ar augstu izšķirtspēju izvēlne var tikt parādīta vertikāli. Mobilajā versijā izkārtojumu var veidot tā, lai izvēlne izslīdētu horizontālā stāvoklī.
- viewport - tags, kas ļauj saglabāt teksta izmēru mazākā dizaina versijā. Tas atrodas starp tagiem.
- maksimālais platums - lai optimizētu vietni, lai izvairītos no izstiepšanās pie izšķirtspējas, kas pārsniedz 1000 pikseļus.
Ieviešot izkārtojumu, jQuery bibliotēka ļoti palīdz, kad jāmaina bloku stils un struktūra.
Kāda ir atšķirība starp adaptīvo un mobilo dizainu
Lai iegūtu pilnīgu izpratni, apsveriet dažus ilustratīvus piemērus, jo šo divu jēdzienu sajaukšana nav nekas neparasts.
Jums jāsaprot, ka mobilā versija ir primārās vietnes analogs ar apakšdomēnu. Vietnes ārējā prezentācija pilnībā atkārto stilu un funkcionalitāti, savukārt tās struktūra un saturs var atšķirties no galvenās versijas, jo versija ir samazināta līdz nepieciešamajiem elementiem.
Atsaucīgais dizains ir optimāls visām ierīču izšķirtspējām. Tas ir mērogojams un tiek renderēts pareizi neatkarīgi no skatīšanās apstākļiem.
Šīs ir divas dažādas vietnes prezentācijas, par kurām nenogurstoši strīdas par to, kurš no tiem ir labāks. Jāpiebilst, ka konkrēts lēmums vēl nav pieņemts. Kāds slavē šo dizainu, norādot uz modes tendenci un daudzām priekšrocībām. Mobilajai versijai ir arī vairākas priekšrocības, kuru responsīvajam dizainam nav. Tāpēc, lai sāktu, jums vajadzētu saprast pamatvajadzības.
Priekšrocības
Ar ko adaptīvs dizains ir labāks par mobilo tālruni?
Daudzpusība. Mūsu laikā, pie tik trakulīgas tirgus izaugsmes, vienkārši ir nepieciešams sniegt informāciju citādāk, apmierinot patērētāju vēlmes. Adaptīvs dizains atrisina šo problēmu.
Efektīva veicināšana meklētājprogrammās. Ko nevar attiecināt uz adaptīvās ierīces galvenajām priekšrocībām. Meklētājprogrammas dod priekšroku lietotājiem piedāvāt adaptīvas vietnes.
Lietojamība. Responsīvais dizains parasti tiek veidots labākajos dizaina risinājumos, kas ir jauka dāvana lietotāju vizuālajai uztverei.
Vieglums un vienkāršība gan projekta īstenošanā, gan lietošanā.
Labs reklāmguvumu līmenis. Tā kā ar adaptīvo dizainu ir vairāk iespēju attēlot, palielinās pats reklāmguvums.
Ekonomika. Tas ir salīdzinoši lētāk nekā atsevišķas mobilās versijas izveide un reklamēšana.
Mobilās versijas plusi un mīnusi
Atsaucīga mobilā dizaina izveide prasa daudzpusību un konsekvenci. Pirmkārt, ieteicams detalizēti uzrakstīt darba uzdevumu, kas, protams, palīdzēs izvairīties no lieka darba un ietaupīs laiku, kā arī ņems vērā tā servera iespējas, kurā vietne tiks mitināta.
Mobilo ierīču adaptīvajam dizainam ir noteiktas priekšrocības un trūkumi.
Profi:
- Ja jums ir gatava vietne, mobilās versijas dizains nav jāizstrādā no nulles. Var veikt tikai dažas izmaiņas, tādējādi atbrīvojot šo izkārtojumu no nevajadzīgām funkcijām.
- Visu veidu vienkāršojumu dēļ mobilā versija tiek uzskatīta par ātrāku lejupielādes laikā.
- Lietotājs visā saturā redz vissvarīgāko informāciju.
- Ātra ieviešana. Ir spraudņi, ar kuriem varat ieviest pielāgošanu mobilajām ierīcēm, pat ja nezināt tagus un kodus.
- Meklētājprogrammu izvēle dod priekšroku adaptīvām versijām, jo to analīze prasa mazāk laika.
Mīnusi:
- Ne visas mobilās versijas var atbilst mobilo ierīču izšķirtspējai. Vietne, protams, tiks atvērta, taču ekrāna izšķirtspēja ne vienmēr atbilst izkārtojumam. Dažkārt labi izstrādāts viedtālruņa dizains var izskatīties savādāk, ja to atver kā planšetdatoru.
- Mobilajām versijām ir nepieciešami atsevišķi maksas domēni.
- Ir dažas nelielas problēmas saistībā ar satura publicēšanu. Ja vienlaikus ir vairākas versijas, saturs ir jāpielāgo visiem formātiem vienlaikus. Jauna materiāla iesniegšana galvenajā vietnē un tā kopēšana mobilajā versijā var tikt uzskatīta par zādzību. Lai izvairītos no šīs problēmas, iespējams, būs jāpierāda resursu savienojums.
Ieviešanas metodes
Galvenās ieviešanas metodes:
- Pēc izkārtojumu un izkārtojuma dizaina izveides tas tiek ielādēts vajadzīgajos izmēros, izmantojotoperatora vietne un galvenais kods. Šī ir klasiska metode, ko izmanto, veidojot vidējas un mazas versijas (planšetdatorus, viedtālruņus utt.).
- BootStrap ir vienkāršs un skaidrs adaptācijas rīku komplekts. Piemērots galveno lapu un citu ne pārāk sarežģītu tīmekļa projektu versiju izveidei. Tas sniedz labu iespēju interfeisa funkcijās pielietot daudz dažādu stilu.
- Responsive Grid System ir populārs daudzpusīgu rīku komplekts. Viegli lietojams un neprasa dziļas zināšanas. Ietver plašu infografiku klāstu.
- GUMBY - CSS sistēma, kas lepojas ar elastīgu reaģētspēju un lielisku rīku.
- Sīkfaili - ļauj ieviest responsīvus attēlus. Automātiski pievieno pārlūkprogrammas pieprasītos failus.
- ExpressionEngine ir vēl viens veids, kā izveidot atsaucīgus attēlus. Nosaka, vai ierīce ir mobila un spēj mainīt attēlus līdz vajadzīgajai izšķirtspējai.
- ProtoFluid - nodrošina ātru prototipu izveidi. Piemērots visu veidu ierīcēm.
