Responzivita webovej stránky je schopnosť webovej stránky správne sa zobraziť rôzne zariadenia s rôznymi vlastnosťami.
Viac videí na našom kanáli - naučte sa internetový marketing so SEMANTICOU
Dnes sa webové stránky prezerajú na osobných počítačoch, tabletoch a smartfónoch. Každé zariadenie má svoje vlastné charakteristiky - rýchlosť, rozlíšenie obrazovky.
Ak stránka nereaguje, na počítači sa zobrazí správne. A na telefóne to môže „ísť“ - bloky sa navzájom prekrývajú, písmo sa môže stať nečitateľným.
Samotný pojem responzivita je široko používaný od vydania knihy Ethana Marcota Responsive Web Design – Responsive Web Design. Stránky, ktoré sa dokážu dynamicky prispôsobovať daným charakteristikám zobrazovacích zariadení, sa stali známymi ako adaptívne.
Príklad responzívneho rozloženia
Displej na PC:
Na tablete:
Na smartfóne:
Prečo potrebujete responzívny web
Technológie sa vyvíjajú rýchlym tempom a výrobcovia zariadení za nimi nezaostávajú. Smartfóny, tablety, televízory a ďalšie elektronické zariadenia pripojené na internet sú k dispozícii pre každý vkus a rozpočet a existuje veľa možností veľkosti obrazovky.
Zároveň spotreba obsahu exponenciálne rastie. V boji o klienta majitelia stránok využívajú všetky prostriedky a metódy. Najmä vo fáze vývoja ponúkajú možnosť správneho zobrazenia svojho webového zdroja na rôznych zariadeniach.
Percento zariadení, ktoré umožňujú prezeranie informácií online, každým rokom rastie. Rôzne formáty a rozlíšenia komplikujú vývojový proces ako celok, vo všetkých fázach je potrebné brať do úvahy ďalšie požiadavky: dizajnéri, dizajnéri rozloženia a programátori.
Koncept adaptívneho dizajnu vám umožňuje zefektívniť proces, keďže nepotrebujete vytvárať viaceré varianty stránok, ako tomu bolo v minulosti pri mobilných verziách. V takom prípade bola navrhnutá samostatná sada funkcií na samostatnej subdoméne.
Staré lokality je potrebné vylepšiť a rôzne prístupy k prispôsobivosti to umožňujú realizovať. Hlavná vec je správne posúdiť mierku na začiatku, v niektorých prípadoch je jednoduchšie, rýchlejšie a lacnejšie použiť nové dizajnové rozloženia a šablóny. Ak vaša firemná identita nie je rozpoznateľnou značkou, skutočnosť, že je morálne zastaraná, vás často tlačí k prepracovaniu. A rebranding, ako štádium prechodu na novú úroveň, nebol zrušený. Responzívna webová stránka je výkonný nástroj pre vaše podnikanie.
Existujú služby na kontrolu toho, ako stránka spĺňa požiadavky na prispôsobivosť.
Navyše, dnes najväčšie vyhľadávače Google a Yandex berú tento parameter do úvahy pri hodnotení webových stránok. Od použiteľnosti je navigácia jedným z povinných faktorov hodnotenia kvality stránky. Rýchlosť načítavania informácií a v prípade optimalizovaných obrázkov klesá, nečitateľný text a zdeformované prvky, ktoré sú príliš malé alebo sa nezmestia na obrazovku, sťažujú vyhľadávanie informácií a jednoducho vedú k zvýšeniu odrazov – používateľ zatvorí stránku. Ide o faktory správania, ktoré ovplyvňujú aj pozíciu vo výsledkoch vyhľadávania.
Pre vlastníkov stránok nie sú technická terminológia a parametre hodnotenia úplne jasnými a hmatateľnými kritériami. Stačí však, aby pochopili, ako to ovplyvňuje dynamiku návštevnosti. V mnohých oblastiach je podiel návštevnosti z mobilných zariadení porovnateľný a dokonca prevyšuje návštevnosť z desktopov. Toto treba brať do úvahy. Je stále menej možné stretnúť vývojárov, ktorí neponúkajú prispôsobenie webovej stránky, ale nebude na škodu sa v tejto problematike zorientovať, aby ste proces ovládali.
Princípy adaptability
závitovanie
Povedzme, že ste navrhli pre prehliadače pre stolné počítače. Všetko je úžasné. Pri prezeraní tejto stránky z mobilného zariadenia sa bloky posúvajú a idú pod seba.
Toto sa nazýva tok. A teraz je to jeden z hlavných princípov, ktorý sa používa v responzívnom dizajne. Zváž toto.
Jednotková relativita
Zo školských hodín fyziky je známe, že rýchlosť môže byť absolútna, kedy bez ohľadu na to, odkiaľ pohyb pozorujete, rýchlosť bude rovnaká. A relatívne - keď sa rýchlosť môže meniť v závislosti od referenčného bodu.
To isté s mernými jednotkami. Rôzne zariadenia majú rôznu hustotu pixelov. A veľkosť, napríklad 320 px, bude vyzerať inak na obrazovke počítača a smartfónu.
Riešením je použitie relatívnych jednotiek. Keď nastavíte všetky veľkosti, mierky a súradnice bloku vzhľadom na prvok, ktorý je na obrazovke PC aj na displeji smartfónu. Napríklad horná hranica.
Používanie bodov zlomu
Ide o prvky, ktorých umiestnenie sa mení iba vtedy, ak sa na prezeranie používa určité zariadenie. dané parametre obrazovke.
Napríklad, ak sa obsah stránky „plazí“, potom má zmysel pridať takýto bod a opraviť obsah.
Minimálne a maximálne hodnoty
Na mobilnom telefóne sa dá článok zobraziť tak, ako má. Tu však otvoríte rovnakú stránku na širokouhlom monitore a obraz vás nepoteší. Všetko je natiahnuté, o čitateľnosti nemôže byť ani reči.
Môžete napríklad zadať vlastnosti. Ak je šírka obrazovky menšia ako 1 000 pixelov, obsah by sa mal zobraziť na celej obrazovke. V opačnom prípade bude maximálna šírka 1000 pixelov.
Vnorenie objektov
Stáva sa, že musíte použiť veľa prvkov, ktoré závisia od polohy iných blokov. Ťažko sa to ovláda. Takéto objekty môžete vložiť do jedného kontajnera. To je vhodné pre tie bloky, ktoré nechcete prispôsobovať parametrom obrazovky - tlačidlá, logá atď.
Správne písma
Webové písma vyzerajú nádherne. Ale nezabudnite, že sú všetky naložené. To ovplyvňuje rýchlosť načítania stránky používateľa.
Správne používanie rastrovej a vektorovej grafiky
Ak má obrázok veľa malých detailov, použite rastrový formát. Inak - vektor.
Žiadny obrázok by sa však nemal používať bez optimalizácie - kompresie. Vektorové obrázky sú zvyčajne už komprimované. Nie všetky staršie prehliadače ich však podporujú.
Dodržiavanie veľkostí rozloženia
Existujú všeobecné normy o tom, na aké základné rozmery je obvyklé zamerať sa pri vývoji rozloženia.
V responzívnom dizajne existuje niečo ako body zlomu. Toto sú parametre, ktoré sa odovzdávajú vo funkciách médií. Uveďte, v akých rozlíšeniach sa dizajn mení.
- Pre mobil 320px, 480px.
- Pre tablety 768px.
- Pre netbooky a niektoré tablety 1024px.
- Pre osobné počítače 1280px alebo viac.
Väzba na konkrétne rozlíšenie nie je náročná. Závisí od nastavení a parametrov zariadenia.
Niekedy nie je potrebné vytvárať rozloženie pre stredné rozlíšenia, napríklad 480px, ak je rozloženie správne zobrazené v rozsahu 768 - 320px.
Ak sa rozloženie „preruší“ na konkrétnom gadgete, zobrazí sa nesprávne v inom rozlíšení, skutočné hodnoty pre túto obrazovku sa berú ako body prerušenia.
Dotazy na médiá
Vývoj adaptívnych stránok je založený na princípe definovania parametrov štýlu pomocou media queries (media queries).
Žiadosti definujú:
- Typ zariadení: projektory, smartfóny, monitory, televízory atď.
- Podmienky.
Na zodpovedajúcu požiadavku a odpoveď sa použijú nastavenia zobrazenia zodpovedajúce zariadeniu zo súboru štýlu css.
Kontrola odozvy webu
Pomocou rôznych služieb a nástrojov môžete skontrolovať, ako sa vaša stránka zobrazuje na mobilných zariadeniach.
Pomocou prehliadača
Prehliadač Google Chrome má napríklad vstavanú súpravu nástrojov na kontrolu správneho zobrazenia dizajnu webových stránok na mobilných zariadeniach. Musíte stlačiť kláves F12 alebo Ctrl + Shift + I, alebo v Menu vybrať "Ďalšie nástroje" - "Nástroje pre vývojárov".
IN Mozilla Firefox dá sa to urobiť takto "Menu" - "Vývoj" - "Responzívny dizajn" alebo Ctrl + Shift + M.
Google Mobile Friendly (Google Search Console)
Len napíšeme celú URL do reťazca a dostaneme výsledky. Kontrola zvyčajne trvá menej ako minútu.
Adaptívne webové stránky sú štandardom vývoja webu, jedným z ukazovateľov kvality internetového zdroja a pozorného prístupu k potrebám používateľov.
Adaptívne rozloženie umožňuje webovým stránkam automaticky sa prispôsobiť obrazovkám tabletov a smartfónov. Návštevnosť mobilného internetu každým rokom rastie a pre efektívne spracovanie tejto návštevnosti je potrebné používateľom ponúkať prispôsobiteľné webstránky s užívateľsky prívetivým rozhraním.
Vyhľadávače používajú množstvo kritérií na vyhodnotenie odozvy stránok pri prezeraní na mobilných zariadeniach. Google sa snaží zjednodušiť používanie internetu pre majiteľov smartfónov a tabletov, označovanie v mobilnom vydaní prispôsobené pre mobilné zariadenia stránky so špeciálnou značkou priateľské k mobilom. Yandex má tiež algoritmus, ktorý uprednostňuje stránky s mobilnou / adaptívnou verziou pre používateľov v mobilnom vyhľadávaní.
Zobrazenie stránky na mobilných zariadeniach si môžete skontrolovať na službách a.
Ryža. 1. Mobilné vydanie Yandex a Google s poznámkou o priateľskosti stránky pre mobilné zariadenia Čo je adaptívne rozloženie
Adaptívne usporiadanie znamená absenciu vodorovná lišta rolovacie a škálovateľné oblasti pri prezeraní na akomkoľvek zariadení, čitateľný text a veľké plochy pre klikateľné prvky. Pomocou mediálnych dopytov môžete ovládať rozloženie a polohu blokov na stránke, preusporiadať šablónu tak, aby sa prispôsobila rôznym veľkostiam obrazovky zariadenia.
Hlavné techniky na vytvorenie adaptívneho webu sú uvedené v článku. Pre responzívny dizajnšírka kontajnera hlavnej stránky je nastavená v % , pričom môže byť rovná alebo menšia ako 100 % šírky okna prehliadača. Šírka stĺpcov mriežky sa tiež nastavuje v %. IN responzívny dizajnšírka stĺpcov hlavného kontajnera a mriežky je pevná pomocou hodnôt v px.
Technika responzívneho fluidného rozloženia, o ktorej sa hovorí v tomto návode, bude skvele fungovať na šablóne s dvoma stĺpcami, vďaka čomu bude stránka responzívna a bude vhodná pre mobilné zariadenia. Šablóna predpokladá iné rozloženie hlavného obsahu stránok, v tejto lekcii sa bude analyzovať rozloženie hlavnej stránky.
Rozloženie hlavnej stránky
Stránka sa skladá z troch hlavných blokov: hlavička (hlavička), obalový kontajner pre hlavný obsah a bočný panel a päta (päta). Zoberme si 768px a 480px ako dizajnové zlomové body.
V prvom bode skryjeme horné menu a presunieme bočný panel pod kontajner s príspevkami. V druhom bode zmeníme umiestnenie prvkov hlavičky, zrušíme umiestnenie tlačidiel sociálnych sietí v príspevkoch a zrušíme zalamovanie stĺpcov päty stránky.
Ryža. 2. Príklad adaptívneho rozloženia 1. Meta tagy a sekcia
1) Pridať do sekcie
potrebné súbory - odkaz na použité fonty, knižnicu jQuery, ako aj plugin prefixfree (aby sa nepísali predpony prehliadača pre vlastnosti):
2. Hlavička stránky
V záhlaví stránky
logo ;
tlačidlo na zobrazenie/skrytie hlavnej ponuky
