Při navrhování svých webových stránek je důležité zajistit, aby vypadaly skvěle na jakémkoli zařízení, bez ohledu na velikost a tvar obrazovky. Responzivní weby jsou navrženy tak, aby vypadaly dobře na všech typech moderních zařízení, jako jsou počítače, telefony, tablety, televizory, nositelná zařízení a dokonce i obrazovky automobilů. Aby byl web responzivní, budete muset upravit svůj CSS a HTML kód, aby se automaticky změnila velikost jeho prvků v závislosti na konkrétních podmínkách. Tento wikiHow vás naučí plánovat a implementovat základní responzivní webový design.
Kroky
Metoda 1 ze 3: Plánování responzivního designu
Krok 1. Zjistěte, jak vaše webové stránky používá vaše publikum
V dnešní době většina lidí, kteří prohlížejí web, tak činí z mobilních telefonů a tabletů. Aby web reagoval, musíte zajistit jeho správné zobrazení bez ohledu na to, kde se zobrazuje. Pokud jsou čas a peníze zásadní, zaměřte se na typy zařízení, která jsou mezi vašimi uživateli nejoblíbenější (pokud jsou tyto informace k dispozici) a na to, jak používají váš web. Pomocí analytického softwaru nebo jiné formy výzkumu zjistíte:
- Jaká zařízení nejčastěji používají k prohlížení webových stránek, přičemž zvláštní pozornost věnují značkám mobilních telefonů/tabletů/počítačů a velikostem obrazovky/rozlišení.
- Které prohlížeče jsou u vašich uživatelů nejoblíbenější. Pokud jde o globální statistiky, Google Chrome je celosvětově nejpopulárnějším webovým prohlížečem, ale Safari je těsně za ním.
- Jak vaši návštěvníci používají vaše webové stránky, například kolik času stráví jejich prohlížením, kde si je prohlížejí a jaký obsah je nejoblíbenější. To vám může pomoci určit, jaký typ obsahu je důležité zahrnout a který lze vynechat.
Krok 2. Navrhněte různá rozvržení pro různá zařízení
Pomocí kombinace CSS a JavaScriptu můžete detekovat zařízení uživatele i jeho možnosti (ať už podporuje Javu, Flash atd.) A podle toho zobrazit konkrétní verzi vašeho webu. CSS Media Queries jsou zvláště užitečné pro určení velikosti/rozlišení zařízení.
Krok 3. Zohledněte různé typy interakcí
Váš návštěvník může komunikovat s vaším webem pomocí myši, klávesnice, dotykové obrazovky nebo dokonce čtečky obrazovky pro zrakově postižené lidi. Vzhledem k tomu by váš web měl reagovat na kliknutí myší, klávesy klávesnice (Tab, Enter, Return atd.) A dotyky prstu na obrazovce.
Efekty najetí myší nepracují s ničím kromě myši. Místo použití těchto efektů můžete použít požadavek, aby návštěvník kliknutím na tlačítko nebo ikonu zobrazil vše, co bylo dříve zobrazeno při najetí myší
Krok 4. Zvažte použití systému pro správu obsahu (CMS)
Snadný způsob, jak zajistit, aby design vašich stránek byl responzivní, je použít CMS s předem vytvořeným responzivním tématem. Používání CMS jako Joomla, Drupal nebo Wordpress vám umožní zajistit, aby váš web vypadal skvěle na všech zařízeních, aniž byste museli kódovat responzivní prvky sami. Ověřte si u svého poskytovatele webhostingu, jaké nástroje CMS jsou k vaší službě k dispozici.
Krok 5. Pomocí online nástrojů otestujte svůj web
Nyní, když se popularita responzivního webového designu zvýšila, existuje řada bezplatných nástrojů, které můžete použít k testování svých webových stránek. Pokud jste již kódovali svůj web, vyzkoušejte pomocí těchto nástrojů, jak vypadá za různých podmínek, abyste věděli, kde je potřeba zlepšit odezvu:
- Test vhodnosti pro mobily od Googlu: Umožňuje vám zjistit, zda váš web funguje na mobilních zařízeních stejně dobře jako na obrazovkách počítačů.
- resizeMyBrowser: Umožňuje zobrazit váš web v různých rozlišeních.
- Respondátor: Zobrazuje váš web na různých obrazovkách zařízení v různých rozloženích (bokem nebo pravou stranou nahoru).
Metoda 2 ze 3: Přizpůsobení rozložení stránky
Krok 1. Zvažte bezplatně reagující rámec stylů
Rámec je předem napsaná sada HTML, CSS a/nebo JavaScript, kterou můžete použít jako kostru svého webu. Všechny frameworky jsou testovány a optimalizovány pro práci se všemi prohlížeči, takže vše, co musíte udělat, je vložit obsah, přidat předvolby médií a barev a publikovat svůj web. Některé populární rámce jsou:
- Bootstrap
- Kostra
- Nadace
Krok 2. Nastavte výřez pomocí metaznačky
Pokud nepoužíváte framework, budete chtít začít tím nejdůležitějším aspektem kódování responzivního webu: Viewport. Výřez je část webu, která je uživateli viditelná. Klíčem k tomu, aby se váš web správně zobrazoval bez ohledu na velikost obrazovky, je změnit velikost výřezu ve značce META. Chcete -li to provést, vložte tuto značku do horní části každé stránky na webu:
Krok 3. Zadejte velikost textu ve vztahu k výřezu
Jakmile je váš výřez nastaven, text na vaší stránce se přizpůsobí obrazovce. Písma se však mohou zobrazovat příliš velká nebo příliš malá, pokud jejich velikosti nejsou uvedeny ve vztahu k výřezu. Můžete to provést tak, že definujete velikost písma jako konkrétní procento výřezu s jednotkou vw. Tento příklad říká, že se záhlaví H1 mají zobrazovat na 10% šířky výřezu bez ohledu na jeho velikost:
wikiHow
Krok 4. Pomocí dotazů na média zobrazte různé styly pro různé velikosti obrazovky
Mediální dotazy vám umožňují zvolit, zda se mají zobrazovat určité prvky CSS v závislosti na velikosti obrazovky. Specifika vašeho mediálního dotazu můžete zadat v souboru CSS. V tomto případě se barva pozadí těla změní na červenou, pokud je velikost obrazovky uživatele 480 pixelů nebo větší:
wikiHow
@mediální obrazovka a (min. šířka: 480 pixelů) {tělo {barva pozadí: aqua; }}
Metoda 3 ze 3: Vytváření responzivních obrázků
Krok 1. Ke zmenšení obrázků použijte vlastnost CSS width
Namísto nastavení šířky obrázku na konkrétní počet pixelů (např. 500 pixelů) použijte procentuální hodnotu (např. 100%), aby se obrázek podíval na šířku svého rodiče a podle toho upravil. Nastavení šířky obrázku na 100% vynutí zmenšení obrázku nahoru a dolů v závislosti na velikosti obrazovky diváka. Chcete-li to provést in-line:
Krok 2. Pomocí vlastnosti max-width omezte změnu velikosti skutečné velikosti obrázku
Pokud v předchozím kroku použijete vlastnost width na zmenšení obrázku na 100%, obrázek se zvětší nebo zmenší tak, aby odpovídal 100% jeho kontejneru bez ohledu na velikost. To znamená, že pokud je obrázek na menší straně, zvětší se oproti původní velikosti a bude vypadat méně kvalitní. Abyste tomu zabránili, použijte maximální šířku k nastavení maximální velikosti měřítka obrázku na 100% (jeho skutečná velikost). Zde je postup:
Krok 3. Pomocí prvku obrázku HTML zobrazte různé obrázky na různých velikostech obrazovky
Pokud chcete vytvářet obrázky vlastní velikosti, které se mají zobrazovat na obrazovkách různých velikostí, můžete určit, které fotografie se mají zobrazit v kódu HTML. Vytvořte obrázky různých velikostí a poté použijte tento kód jako příklad pro určení, který obrázek se má použít na obrazovkách šířky 600px a 1500px:
