Interneta trafiks, ko patērē elektroniskie sīkrīki, burtiski katru dienu palielinās. Mūsdienu lietotājiem ir nepieciešami resursi ar viņiem ērtāko saskarni. Tieši tāds pats adaptīvais izkārtojums ļauj apmierināt šo vajadzību, jo tas ļauj automātiski mainīt tīmekļa lapas atbilstoši mobilo ierīču īpašībām.
Kas tas ir
Adaptīvais izkārtojums, kas pazīstams arī kā mobilajām ierīcēm draudzīgs, ietver noteiktu darbību veikšanu, lai izstrādātu tīmekļa lapas, kuras var pielāgot dažādām ekrāna izšķirtspējām.
Pirms vairākiem gadiem speciālistiem šajā jomā bija jāizveido vairākas tīmekļa lapu versijas, lai resurss varētu pareizi parādīties 'ktrnhjyys[' sīkrīkos ar dažādiem logu parametriem. Šādi maketētāji strādāja līdz 2010. gadam. Tad ideja par to, kā padarīt vietni adaptīvu, dramatiski mainījās. Pēc tam šīs funkcijas veikšanai tika izmantota īpaša programmēšanas valoda - JavaScript.
Kā padarīt vietni adaptīvu visos ekrānosmobilās ierīces šodien? Tagad izkārtojums tiek veikts, izmantojot CCS3 tabulas, kā arī īpašu HTML5 valodu.
Kāpēc jums nepieciešama adaptīva vietne
- Varat piekļūt tīmeklim, izmantojot sīkrīkus ar dažādu displeja izšķirtspēju. Mūsdienās cilvēki izmanto daudz dažādu ierīču gan sadzīves vajadzībām, gan interneta lietošanai. Protams, vienai un tai pašai vietnei ir jābūt kvalitatīvi attēlotai un labi jāizskatās ierīcēs ar dažādiem izmēriem un ekrāna izšķirtspēju. Lietotājiem nevajadzētu justies neērti, strādājot ar konkrētu sīkrīku.
- Interneta trafika pieaugums, mobilo aplikāciju un ierīču popularitāte. Pašreizējais pieprasījums pēc elektroniskajiem sīkrīkiem, ar kuriem var iekļūt tīklā, ir diezgan saprātīgs, un diez vai ir kāds, kas strīdēsies ar šo faktu. Šādu popularitāti vienkārši nevar ignorēt, jo šie lietotāji, iespējams, pārstāv lauvas tiesu no visas jūsu auditorijas. Tātad, ja vēlaties saglabāt sava resursa apmeklētāju skaitu vai palielināt to, jums vajadzētu pievērst īpašu uzmanību viņu vajadzībām un interesēm. Citiem vārdiem sakot, jums patiešām ir jādara viss iespējamais, lai jūsu vietne būtu pēc iespējas ērtāka, pretējā gadījumā jūsu klienti var vienkārši doties pie jūsu konkurentiem.
Ārkārtas informācija. Ja jūsu specializācija ir ziņu un citas aktuālas informācijas sniegšana, tad, protams, lietotājam tā var būt nepieciešama steidzami, unviņam tajā brīdī pie rokas var nebūt nekā, izņemot telefonu. Tāpēc jūsu uzdevums ir nodrošināt, lai viņš pēc iespējas ātrāk saņemtu nepieciešamo informāciju
Adaptīvā izkārtojuma un mobilās lietotnes salīdzinājums
Visa veida programmas un vietnes, kurās attiecīgajiem sīkrīkiem tiek izmantotas mobilās versijas, arī ir laba rīcība, taču tām ir vairāki trūkumi.
- Mobilajai lietojumprogrammai noteikti jāatbilst operētājsistēmas veidam. Un šim nolūkam ir jātērē ne tikai laiks, bet arī nauda.
- Programma ir jālejupielādē. Lai lietotu lietojumprogrammu, protams, tā ir jāinstalē. Protams, lietotājs to var izdarīt, bet tikai ar nosacījumu, ka viņam tas bieži ir vajadzīgs. Ja viņam šādas vajadzības nav, visticamāk, viņš atteiksies no šī apņemšanās. Rezultātā jūs zaudēsit ievērojamu daļu savas auditorijas.
Kāpēc jums vajadzētu aiziet no lietotnēm
- Satiksmes sadalījums. Lietojumprogrammas izmantošana neuzrāda resursa apmeklētības līmeni. Citiem vārdiem sakot, programmas un vietnes datplūsma netiek summēta, kas noved pie jūs interesējošā rādītāja samazināšanās.
- Resursu materiālu integrācija. Ja esat iegādājies aplikāciju, tad būs jātērē papildus nauda, lai sinhronizētu visus materiālus vai, aizpildot vietni, arī pārsūtītu saturu uz programmu. Tā rezultātā jūs atkal zaudējat savu naudu un laiku.
Kā padarīt adaptīvumājas lapas dizains
Pirmais solis ir visu darbu noformēšana. Šajā procesā dizaineram prasmīgi jānodod būtība un galvenās idejas, izmantojot salīdzinoši mazu displeju un tikai vienu izvēlnes kolonnu.
Ja nepieciešams, tiek samazināti informācijas bloki, paliek tikai nozīmīgākie elementi. Rokasgrāmatā iesācējiem parasti ir:
- mobilais vispirms - elektronisko sīkrīku projektēšana;
- elastīgi attēli - izmantojiet elastīgus attēlus;
- režģa izkārtojums - izmantojiet elastīgus uz režģa bāzes izkārtojumus;
- multivides vaicājumi - multivides vaicājumu apstrāde.
Kā padarīt vietni adaptīvu? Lai to izdarītu, varat izmantot vairāku veidu izkārtojumus.
- Gumija. Šo veidu ir viegli ieviest, tas reti rada grūtības pat iesācējiem. Galvenie resursa bloki tiek saspiesti, līdz tie atbilst mobilo ierīču ekrānu izmēram. Ja saspiešana nav iespējama, tad tās ievieto lentes veidā.
- Pārvietot blokus. Šī metode lieliski darbojas resursiem ar vairākām kolonnām. Papildu bloku izvietojums mainās atkarībā no ekrāna izmēriem. Ja displejs samazinās, sānjoslas tiek pārvietotas uz leju.
- Mainīt izkārtojumus. Tas ir diezgan laikietilpīgs paņēmiens, kas ietver īpaši izveidota izkārtojuma izmantošanu katrai ekrāna izšķirtspējai. Šī metode ievērojami atvieglo vietnes izpēti, taču darba sarežģītība padara to par nepieprasītu.
- Elementārs izkārtojums. Metodika, nevainojamapiemērots vienkāršiem resursiem. Dizaineris vienkārši mērogo attēlus un tipogrāfiju. Lai gan šo metodi nevar saukt par pieprasītu elastības trūkuma dēļ.
- Paneļi. Šis paņēmiens nāk no mobilajām lietojumprogrammām, kurās jebkurā displeja pozīcijā var parādīties papildu izvēlne. Tagad šī metode arī nav īpaši populāra, jo mobilā navigācija vietnē ne vienmēr ir skaidra lietotājiem.
Nevienu no aprakstītajiem izkārtojumiem nevar saukt par universālu. Kā padarīt vietni responsīvu? Pirmkārt, atkarībā no projekta jāizvēlas piemērots izkārtojums. Tam pilnībā jāatbilst resursa iespējām un jāapmierina visas vajadzības.
Kā izveidot adaptīvu vietnes izkārtojumu
Šodien šim nolūkam tiek izmantots CSS3 un HTML5. Pirmā tehnoloģija ir uzlabotas paaudzes kaskādes galdi. Ar tās palīdzību tiek izstrādāti noteikumi, saskaņā ar kuriem lietotāja displejā tiks parādīta informācija par vietni.
Ar CSS3 palīdzību var iestatīt vairākus parametrus: aizņemtās vietas procentuālo daudzumu un elementa izmērus pie noteiktas izšķirtspējas. Izmantojot šo tehnoloģiju, dizaineri var izveidot dažādas klases, kas atbilst noteiktām īpašībām.
HTML5 tiek izmantots, lai norādītu noteiktu detaļu atrašanās vietu, citiem vārdiem sakot, lai atzīmētu lapu. Ģenerētās CSS3 klases ir norādītas HTML tagos, lai izmantotos objektus varētu modificēt atkarībā no izšķirtspējas.
Tātad, kā izveidot responsīvu vietnes dizainu ar html? Jums jāsāk, izstrādājot vienkāršu attēlu, kastad stiept.
Tas izveido attēlu apstrādes čaulu.
Kā padarīt vietni adaptīvu, izmantojot CSS? Iestatiet šādus parametrus:
div {
platums: 100%;
}
div img {
platums: 100%;
augstums: auto;
}
Pēc tam, pēc dimensijas platuma, iestatiet attēla platumu img.
Tātad jūs iegūstat attēlu, kas aizņems visu displeja vietu jebkurā izšķirtspējā.
Pielāgot atsevišķus vienumus
Vietnes galvene. Ievietojiet galvenē vairākus elementus:
logotips -
slēpt izvēlnes pogu -
galvenā izvēlne -
meklēšana vietnē -
- Bloķēt ar teksta saturu. Izmantojiet elementu, lai aplauztu rakstu.
- Sānu kolonna. Izmantojiet, lai atrastu kategoriju sarakstu, noklikšķiniet uz adresātu saraksta un jaunākajām ziņām.
- Kā izveidot vietnei adaptīvu izvēlni? Pievienojiet marķējumam elementu. Šis kods maina izvēlnes augstumu, pielāgojot saturu nepieciešamajiem izmēriem.
Mini galerijas izveide
Zinot, kā izveidot adaptīvu html un css vietni, varat papildināt savu resursu ar noderīgu un interesantu saturu, kas piemērots jebkuram sīkrīkam, piemēram, mini galerijai.
Lai HTML pievienotu vairākus attēlus, izmantojiet šādus elementus:
Un, lai katrs attēls mijiedarbotos ar dažādām izšķirtspējām un mainītu tā izmēru, izmantojiet CSS3:
div.image_gallery {
marža: 0 auto;
platums: 1000 pikseļi;
min-platums: 500 pikseļi;
}
img {
maksimālais platums: 48%;
polsterējums: 1%; / neliels attēlu polsterējums /
}
Tas ir viss, jūsu mini galerija ir gatava. Tagad jūs zināt, kā padarīt savu vietni adaptīvu dažādām ierīcēm.
Kā pārbaudīt darba kvalitāti
- Google Chrome. Kad esat pārlūkprogrammā, nospiediet taustiņu F12. Pēc tam tiks atvērts panelis - noklikšķiniet uz jūs interesējošā sīkrīka ikonas, piemēram, planšetdatora vai viedtālruņa. Nākamajā izvēlnē atlasiet vajadzīgo izšķirtspēju.
- Ierīce reaģējoša. Programma, ar kuru varat pārbaudīt adaptīvo izkārtojumu, ielādējot vietni caur IFrame. Tur jūs redzēsiet sarakstu ar ierīcēm ar dažādu izšķirtspēju.
- Aresponsivedesign.is. Šis ir izklaides resurss. Vispirms vietne tiek ielādēta IFrame logos un pēc tam pārsūtīta uz Apple ekrāniem. Tādējādi ir ļoti ērti uzņemt displeju ekrānuzņēmumus.
