Vietnes reaģētspēja ir vietnes spēja pareizi parādīties dažādas ierīces ar dažādām īpašībām.
Vairāk video mūsu kanālā - apgūstiet interneta mārketingu ar SEMANTICA
Mūsdienās vietnes tiek skatītas personālajos datoros, planšetdatoros, viedtālruņos. Katrai ierīcei ir savas īpašības – darbības ātrums, ekrāna izšķirtspēja.
Ja vietne nereaģē, tā tiks pareizi parādīta datorā. Un tālrunī tas var "aiziet" - bloki pārklājas viens ar otru, fonts var kļūt nelasāms.
Pats termins atsaucība ir plaši izmantots kopš Ītana Markotas grāmatas Responsive Web Design – Responsive Web Design iznākšanas. Vietnes, kas spēj dinamiski pielāgoties dotajām skatīšanās ierīču īpašībām, ir sākušas saukt par adaptīvām.
Responsīva izkārtojuma piemērs
Displejs datorā:
Uz šķīvja:
Viedtālrunī:
Kāpēc jums ir nepieciešama responsīva vietne
Tehnoloģijas attīstās strauji, un iekārtu ražotāji tām seko līdzi. Viedtālruņi, planšetdatori, televizori un citas elektroniskās ierīces, kas savienotas ar internetu, ir pieejamas katrai gaumei un budžetam, ir daudz ekrāna izmēru iespēju.
Tajā pašā laikā satura patēriņš pieaug eksponenciāli. Cīņā par klientu vietņu īpašnieki izmanto visus līdzekļus un metodes. Jo īpaši izstrādes stadijā tiek noteikta iespēja pareizi parādīt jūsu tīmekļa resursu dažādās ierīcēs.
To ierīču procentuālais daudzums, kas ļauj skatīt informāciju tiešsaistē, katru gadu pieaug. Formātu un izšķirtspējas daudzveidība apgrūtina izstrādes procesu kopumā, visos posmos ir jāņem vērā papildu prasības: gan dizaineriem, gan maketētājiem, gan programmētājiem.
Responsīvā dizaina koncepcija ļauj racionalizēt procesu, jo jums nav jāizveido vairāki vietņu varianti, kā tas bija iepriekš, piemēram, ar mobilajām versijām. Tādā gadījumā atsevišķā apakšdomēnā tika izveidota atsevišķa funkciju kopa.
Vecās vietnes ir jāuzlabo, un dažādas pielāgošanās pieejas ļauj to īstenot. Galvenais ir pareizi novērtēt mērogu sākumā, dažos gadījumos ir vieglāk, ātrāk un lētāk izmantot jaunus dizaina izkārtojumus un veidnes. Ja jūsu korporatīvā identitāte nav atpazīstams zīmols, bieži vien tas, ka tas ir morāli novecojis, mudina jūs pārstrādāt. Un neviens neatcēla zīmola maiņu kā pārejas posmu uz jaunu līmeni. Responsīva vietne ir spēcīgs rīks jūsu uzņēmumam.
Ir pakalpojumi, lai pārbaudītu, cik vietne ir atsaucīga.
Turklāt šodien lielākās meklētājprogrammas Google un Yandex ņem vērā šo parametru, ranžējot vietnes. Kopš lietojamības, navigācija ir viens no neaizstājamiem faktoriem vietnes kvalitātes novērtēšanā. Informācijas ielādes ātrums un optimizētu attēlu gadījumā tas samazinās, nesalasāms teksts un izkropļoti elementi, kas ir pārāk mazi vai neietilpst ekrānā, apgrūtina informācijas atrašanu un vienkārši izraisa atteikumu pieaugumu - lietotājs aizver lapu. Tie ir uzvedības faktori, kas ietekmē arī pozīciju meklēšanas rezultātos.
Vietņu īpašniekiem tehniskā terminoloģija un ranžēšanas parametri nav pilnīgi skaidri un taustāmi kritēriji. Bet viņiem pietiek saprast, kā tas ietekmē apmeklējuma dinamiku. Daudzās jomās datplūsmas daļa no mobilajām ierīcēm ir salīdzināma ar datoru datplūsmu un pat pārsniedz to. Ar to ir jārēķinās. Arvien retāk sanāk sastapt izstrādātājus, kuri nepiedāvā mājaslapas pielāgošanu, taču nenāks par ļaunu orientēties šajā jautājumā, lai kontrolētu procesu.
Pielāgošanās spēju principi
Vītņošana
Pieņemsim, ka esat izstrādājis dizainu galddatoru pārlūkprogrammām. Viss ir lieliski. Skatoties šo vietni no mobilās ierīces, bloki nobīdās un iet viens zem otra.
To sauc par plūsmu. Un tagad tas ir viens no galvenajiem principiem, kas tiek izmantots responsīvajā dizainā. Apsveriet šo.
Vienības relativitāte
No skolas fizikas stundām ir zināms, ka ātrums var būt absolūts, kad neatkarīgi no tā, no kurienes jūs novērojat kustību, ātrums būs vienāds. Un relatīvais - kad, atkarībā no atskaites punkta, ātrums var mainīties.
Vienības ir vienādas. Dažādām ierīcēm ir atšķirīgs pikseļu blīvums. Un izmērs, piemēram, 320 px, datora un viedtālruņa ekrānā izskatīsies savādāk.
Risinājums ir izmantot relatīvās vienības. Kad iestatāt visus bloka izmērus, mērogus un koordinātas attiecībā pret elementu, kas atrodas datora ekrānā un viedtālruņa displejā. Piemēram, augšējā robeža.
Izmantojot kontrolpunktus
Tie ir elementi, kuru izvietojums mainās tikai tad, ja skatīšanai tiek izmantota noteikta ierīce dotie parametri ekrāns.
Piemēram, ja lapas saturs “izrāpo”, tad ir jēga pievienot šādu punktu un izlabot saturu.
Minimālās un maksimālās vērtības
Mobilajā telefonā rakstu var attēlot kā nākas. Bet tagad jūs atverat to pašu lapu platekrāna monitorā un neesat apmierināts ar attēlu. Viss ir izstiepts, par lasāmību nevar runāt.
Piemēram, varat norādīt rekvizītus. Ja ekrāna platums ir mazāks par 1000 pikseļiem, saturs ir jāparāda pilnekrāna režīmā. Pretējā gadījumā maksimālais platums būs 1000 pikseļi.
Objektu ligzdošana
Tā notiek, ka jums ir jāizmanto daudzi elementi, kas ir atkarīgi no citu bloku stāvokļa. To ir grūti kontrolēt. Jūs varat ligzdot šādus objektus vienā konteinerā. Tas ir piemērots tiem blokiem, kurus nevēlaties pielāgot ekrāna parametriem - pogām, logotipiem utt.
Pareizi fonti
Tīmekļa fonti izskatās skaisti. Bet neaizmirstiet, ka tie visi ir ielādēti. Tas ietekmē lietotāja lapu ielādes ātrumu.
Pareiza rastra un vektorgrafikas izmantošana
Ja attēlā ir daudz mazu detaļu, izmantojiet rastra formātu. Citādi - vektors.
Bet nevienu attēlu nedrīkst izmantot bez optimizācijas - kompresijas. Vektora attēli parasti jau ir saspiesti. Taču ne visas vecākas pārlūkprogrammas tos atbalsta.
Cieņa pret izkārtojumiem
Ir vispārīgi standarti, kādi pamatizmēri parasti tiek ņemti vērā, izstrādājot izkārtojumu.
Responsīvajā dizainā ir tāda lieta kā pārtraukuma punkti. Tie ir parametri, kas tiek nodoti multivides funkcijās. Norādiet, ar kādām izšķirtspējām notiek dizaina izmaiņas.
- Mobilajām ierīcēm 320 pikseļi, 480 pikseļi.
- Planšetdatoriem 768 pikseļi.
- Tīkla datoriem un dažiem planšetdatoriem 1024 pikseļi.
- Personālajiem datoriem 1280 pikseļi un vairāk.
Saistība ar noteiktu izšķirtspēju nav stingra. Atkarīgs no ierīču iestatījumiem un parametriem.
Dažkārt nav nepieciešams izveidot izkārtojumu starpizšķirtspējai, piemēram, 480 pikseļi, ja izkārtojums ir pareizi attēlots diapazonā no 768 - 320 pikseļiem.
Ja izkārtojums “saplīst” konkrētam sīkrīkam, tiek parādīts nepareizi ar citu izšķirtspēju, par pārtraukuma punktiem tiek ņemtas šī ekrāna faktiskās vērtības.
Mediju vaicājumi
Responsīvo vietņu izstrāde balstās uz stila parametru noteikšanas principu, izmantojot multivides vaicājumus.
Vaicājumi definē:
- Ierīces veids: projektori, viedtālruņi, monitori, televizori utt.
- Nosacījumi.
Atbilstošais pieprasījums un atbilde izmantos atbilstošos displeja iestatījumus no css stila lapas faila.
Vietnes atsaucības pārbaude
Varat pārbaudīt, kā jūsu vietne tiek parādīta mobilajās ierīcēs, izmantojot dažādus pakalpojumus un rīkus.
Izmantojot pārlūkprogrammu
Piemēram, pārlūkprogrammā Google Chrome ir iebūvēts rīku komplekts, lai pārbaudītu, vai vietnes dizains ir pareizi attēlots mobilajās ierīcēs. Nospiediet taustiņu F12 vai Ctrl + Shift + I vai izvēlnē atlasiet "Papildu rīki" - "Izstrādātāja rīki".
V Mozilla Firefox to var izdarīt šādā veidā "Izvēlne" - "Izstrāde" - "Responsive Design" vai Ctrl + Shift + M.
Google mobilajām ierīcēm draudzīgs (Google Search Console)
Mēs vienkārši ierakstām pilnu URL virknē un iegūstam rezultātus. Verifikācija parasti aizņem mazāk nekā minūti.
Responsīva vietne ir tīmekļa izstrādes standarts, viens no interneta resursa kvalitātes un vērīgas attieksmes pret lietotāju vajadzībām rādītājiem.
Adaptīvs izkārtojums vietne ļauj tīmekļa lapām automātiski pielāgoties planšetdatoru un viedtālruņu ekrāniem. Mobilā interneta trafiks pieaug ar katru gadu, un, lai šo trafiku efektīvi apstrādātu, ir jāpiedāvā lietotājiem responsīvas vietnes ar lietotājam draudzīgu saskarni.
Meklētājprogrammas izmanto vairākus kritērijus, lai novērtētu vietnes atsaucību, kad tā tiek skatīta mobilajās ierīcēs. Google cenšas vienkāršot interneta lietošanu viedtālruņu un planšetdatoru īpašniekiem, atzīmējot mobilos rezultātus, kas pielāgoti mobilās ierīces vietnes ar īpašu atzīmi draudzīgs mobilajām ierīcēm... Yandex ir arī algoritms, kas lietotājiem mobilajā meklēšanā dod priekšroku vietnēm ar mobilo/responsīvo versiju.
Lapas attēlojumu mobilajās ierīcēs varat pārbaudīt pakalpojumos un.
Rīsi. 1. Yandex un Google mobilās meklēšanas rezultāti ar piezīmi par vietnes draudzīgumu mobilajām ierīcēm Kas ir atsaucīgs izkārtojums
Adaptīvajā izkārtojumā tiek pieņemts, ka nav horizontālas svītras ritināmi un tuvināmi apgabali, skatoties jebkurā ierīcē, lasāms teksts un lieli apgabali klikšķināmiem elementiem. Izmantojot multivides vaicājumus, varat kontrolēt bloku izkārtojumu un novietojumu lapā, pārveidojot veidni, lai pielāgotos dažādiem ierīces ekrāna izmēriem.
Pamatmetodes responsīvas vietnes izveidei ir sniegtas rakstā. Priekš atsaucīgs dizains vietnes galvenā konteinera platums ir iestatīts procentos, savukārt tas var būt vienāds ar 100% no pārlūkprogrammas loga platuma vai mazāks. Režģa kolonnu platums ir iestatīts arī %. V atsaucīgs dizains galvenā konteinera un režģa kolonnu platumi tiek fiksēti, izmantojot vērtības pikseļos.
Šajā nodarbībā aplūkotā adaptīvā šķidrā izkārtojuma tehnika lieliski darbojas divu kolonnu izkārtojumā, padarot vietni atsaucīgu un viegli skatāmu mobilajās ierīcēs. Veidne pieņem citu lapu galvenā satura izkārtojumu, šajā nodarbībā tiks analizēts galvenās lapas izkārtojums.
Galvenās lapas izkārtojums
Lapa sastāv no trim galvenajiem blokiem: galvenes (galvenes), galvenā satura un sānjoslas iesaiņojuma konteinera un kājenes (kājenes). Mēs ņemsim 768 pikseļus un 480 pikseļus kā mūsu dizaina galvenos punktus.
Pirmajā punktā mēs paslēpsim augšējo izvēlni un pārvietosim sānjoslu zem konteinera ar ziņām. Otrajā punktā mēs mainīsim galvenes elementu pozīciju, atcelsim sociālo mediju pogu pozicionēšanu ziņās un atcelsim aptīšanu ap kājenes kolonnām.
Rīsi. 2. Responsīvā izkārtojuma piemērs 1. Meta tagi un sadaļa
1) Pievienot sadaļai
nepieciešamie faili - saite uz izmantotajiem fontiem, jQuery bibliotēku un prefixfree spraudni (lai nerakstītu pārlūkprogrammas prefiksus rekvizītiem):
2. Lapas galvene
Lapas galvenē
logotipu ;
pogu, lai parādītu/paslēptu galveno izvēlni
