Pri navrhovaní svojej webovej stránky je dôležité zabezpečiť, aby vyzerala skvele na akomkoľvek zariadení bez ohľadu na veľkosť a tvar obrazovky. Responzívne webové stránky sú navrhnuté tak, aby vyzerali dobre na všetkých druhoch moderných zariadení, ako sú počítače, telefóny, tablety, televízory, nositeľné zariadenia a dokonca aj obrazovky automobilov. Aby bola webová stránka responzívna, budete musieť upraviť svoj CSS a HTML kód, aby sa v závislosti od konkrétnych podmienok automaticky zmenila veľkosť jeho prvkov. Tento wikiHow vás naučí plánovať a implementovať základný responzívny webový design.
Kroky
Metóda 1 z 3: Plánovanie responzívneho dizajnu
Krok 1. Zistite, ako vaše publikum používa vašu webovú stránku
V dnešnej dobe väčšina ľudí prehliadajúcich web robí tak z mobilných telefónov a tabletov. Aby bol web responzívny, musíte zaistiť jeho správne zobrazenie bez ohľadu na to, kde sa zobrazuje. Ak sú rozhodujúce čas a peniaze, zamerajte sa na typy zariadení, ktoré sú medzi vašimi používateľmi najobľúbenejšie (ak sú tieto informácie k dispozícii) a na to, ako používajú váš web. Pomocou analytického softvéru alebo inej formy výskumu zistíte:
- Aké zariadenia najčastejšie používajú na zobrazenie webovej stránky, pričom osobitnú pozornosť venuje značkám mobilných telefónov/tabletov/počítačov a veľkostiam obrazovky/rozlíšenia.
- Ktoré prehliadače sú medzi vašimi používateľmi najobľúbenejšie. Pokiaľ ide o globálne štatistiky, Google Chrome je najobľúbenejším webovým prehliadačom na celom svete, ale Safari je tesne za ním.
- Ako vaši návštevníci používajú váš web, napríklad koľko času strávia jeho prezeraním, kde si ho prezerajú a aký obsah je najobľúbenejší. Pomôže vám to určiť, ktorý typ obsahu je dôležité zahrnúť a ktorý je možné vynechať.
Krok 2. Navrhnite rôzne rozloženia pre rôzne zariadenia
Môžete použiť kombináciu CSS a JavaScript na detekciu zariadenia používateľa, ako aj jeho schopností (či už podporuje Javu, Flash atď.) A podľa toho zobraziť konkrétnu verziu vášho webu. CSS Media Queries sú obzvlášť užitočné pri určovaní veľkosti/rozlíšenia zariadenia.
Krok 3. Zohľadnite rôzne typy interakcií
Váš návštevník môže komunikovať s vašim webom pomocou myši, klávesnice, dotykového displeja alebo dokonca čítačky obrazovky pre zrakovo postihnutých ľudí. Vzhľadom na to by váš web mal reagovať na kliknutia myšou, klávesmi klávesnice (Tab, Enter, Return, atď.) A dotyky prstov na obrazovke.
Efekty pri umiestnení myši nepracujú s ničím okrem myši. Namiesto použitia týchto efektov môžete použiť požiadavku, aby návštevník kliknutím na tlačidlo alebo ikonu zobrazil všetko, čo sa predtým zobrazilo na ukazovateli myši
Krok 4. Zvážte použitie systému na správu obsahu (CMS)
Jednoduchý spôsob, ako zaistiť responzivitu dizajnu vašich stránok, je použiť CMS s vopred vytvorenou responzívnou témou. Používanie CMS ako Joomla, Drupal alebo Wordpress vám umožní zaistiť, aby váš web vyzeral skvele na všetkých zariadeniach bez toho, aby ste museli responzívne prvky kódovať sami. Kontaktujte svojho poskytovateľa webhostingu a zistite, ktoré nástroje CMS sú k dispozícii pre vašu službu.
Krok 5. Na otestovanie svojej webovej stránky použite online nástroje
Teraz, keď je responzívny webový design stále obľúbenejším, existuje množstvo bezplatných nástrojov, ktoré môžete použiť na testovanie svojich webových stránok. Ak ste už kódovali svoj web, pomocou týchto nástrojov otestujte, ako vyzerá za rôznych podmienok, aby ste vedeli, kde je potrebné zlepšiť odozvu:
- Test vhodnosti pre mobilné zariadenia od Googlu: Umožňuje vám zistiť, či váš web funguje tak dobre na mobilných zariadeniach, ako aj na obrazovkách počítačov.
- resizeMyBrowser: Umožňuje vám zobraziť vašu stránku v rôznych rozlíšeniach.
- Responzátor: zobrazuje vašu stránku na rôznych obrazovkách zariadení v rôznych rozloženiach (bokom alebo pravou stranou nahor).
Metóda 2 z 3: Zabezpečenie reakcie na rozloženie stránky
Krok 1. Zvážte bezplatne reagujúci rámec štýlov
Rámec je vopred napísaná sada HTML, CSS alebo JavaScript, ktorú môžete použiť ako kostru svojho webu. Rámce sú testované a optimalizované tak, aby fungovali so všetkými prehliadačmi, takže stačí vložiť obsah, pridať predvoľby médií a farieb a publikovať svoj web. Niektoré obľúbené rámce sú:
- Bootstrap
- Kostra
- Nadácia
Krok 2. Nastavte výrez pomocou metaznačky
Ak nepoužívate framework, budete chcieť začať tým najdôležitejším aspektom kódovania responzívnej webovej stránky: Viewport. Výrez je časť webových stránok, ktorá je používateľovi viditeľná. Kľúčom k správnemu zobrazovaniu vašich stránok bez ohľadu na veľkosť obrazovky je škálovanie veľkosti výrezu v značke META. Ak to chcete urobiť, vložte túto značku do hornej časti každej stránky na webe:
Krok 3. Zadajte veľkosť textu vo vzťahu k zobrazenej oblasti
Akonáhle je váš výrez nastavený, text na vašej stránke sa prispôsobí veľkosti obrazovky. Písma sa však môžu zobrazovať príliš veľké alebo príliš malé, ak ich veľkosti nie sú uvedené vo vzťahu k zobrazenej oblasti. Môžete to urobiť tak, že definujete veľkosť písma ako konkrétne percento výrezu s jednotkou vw. Tento príklad hovorí, že hlavičky H1 sa majú zobrazovať na 10% šírky výrezu bez ohľadu na jeho veľkosť:
wikiHow
Krok 4. Pomocou dotazov na médiá zobrazte rôzne štýly pre rôzne veľkosti obrazovky
Mediálne dotazy vám umožňujú zvoliť, či sa majú zobrazovať určité prvky CSS v závislosti od veľkosti obrazovky. Špecifiká svojho mediálneho dotazu môžete určiť v súbore CSS. V tomto prípade sa farba pozadia tela zmení na červenú, ak je veľkosť obrazovky používateľa 480 pixelov alebo väčšia:
wikiHow
@mediálna obrazovka a (min. šírka: 480 pixelov) {telo {farba pozadia: aqua; }}
Metóda 3 z 3: Vytvorenie reakcií na obrázky
Krok 1. Na zmenu mierky obrázkov použite vlastnosť šírky CSS
Namiesto nastavovania šírky obrázka na konkrétne množstvo pixelov (napr. 500 pixelov) používajte percento (napr. 100%), aby sa obrázok pozeral na šírku svojho rodiča a podľa toho sa upravil. Nastavenie šírky obrázka na 100% prinúti obrázok mieriť nahor a nadol v závislosti od veľkosti obrazovky diváka. Ak to chcete urobiť in-line:
Krok 2. Na obmedzenie škálovania skutočnej veľkosti obrázka použite vlastnosť max-width
Ak v predchádzajúcom kroku použijete vlastnosť width na zmenšenie obrázka na 100%, obrázok sa zväčší alebo zmenší tak, aby zodpovedal 100% jeho kontajnera bez ohľadu na veľkosť. To znamená, že ak je obrázok na menšej strane, zväčší sa ako pôvodná veľkosť a bude pôsobiť menej kvalitne. Aby ste tomu zabránili, pomocou max-width nastavte maximálnu veľkosť mierky obrázka na 100% (jeho skutočnú veľkosť). Tu je postup:
Krok 3. Na zobrazenie rôznych obrázkov na rôznych veľkostiach obrazovky použite prvok obrázku HTML
Ak chcete vytvárať obrázky vlastnej veľkosti, ktoré sa majú zobrazovať na obrazovkách rôznych veľkostí, môžete určiť, ktoré fotografie sa majú zobrazovať v kóde HTML. Vytvorte obrázky rôznych veľkostí a potom použite tento kód ako príklad na určenie, ktorý obrázok sa má použiť na obrazovkách so šírkou 600 pixelov a 1 500 pixlov:
