Jak zajistit, aby vaše webové stránky byly mobilní

V létě 2015 bylo poprvé prostřednictvím mobilu než počítače poprvé provedeno více vyhledávání Google – a vy’d lépe tomu věřit’od té doby jsem jen stoupal!


jestli ty’při čtení tohoto článku je pravděpodobné, že jste’již si uvědomujeme důležitost webové stránky vhodné pro mobilní zařízení a snaží se zajistit, aby vaše mobilní uživatelé měli skvělý zážitek. Můžeme vás naučit, jak to udělat!

Chcete-li, aby váš web byl mobilní, jste vy’Musím:

  1. Vyberte téma nebo šablonu reagující na mobilní zařízení
  2. Odstraňte svůj obsah
  3. Vytvářejte obrázky a CSS co nejlehčí
  4. Vyhněte se Flash
  5. Změňte velikost a umístění tlačítka
  6. Mezerou vaše odkazy
  7. Použijte velké a čitelné písmo
  8. Odstraňte vyskakovací okna
  9. Testujte pravidelně

Nejprve však, co to vlastně znamená pro mobily?

Když mluvíme o a ‘mobilní’ webové stránky, my’mluvím o zobrazení jiného ‘verze’ vašeho webu návštěvníkům, kteří si prohlížejí váš web z mobilu, aby jim poskytli lepší zážitek.

Existuje několik způsobů, jak toho dosáhnout:

  • Citlivý design – tvoje webová stránka’s design se upraví tak, aby se přizpůsobil velikosti obrazovky, ať jste vy’stačí jen změnit velikost karty na ploše nebo procházet z mobilního telefonu nebo tabletu.
  • Dynamické podávání – návštěvníkům se zobrazí odlišná, účelová verze webu v závislosti na zařízení, které používají’znovu prohlížíte.
  • Mobilní aplikace – v některých případech má zcela samostatnou aplikaci pro vaše mobilní publikum největší smysl (i když je tomu tak, měli byste se také ujistit, že váš web je nulový pro ty, kdo’nechci jej stáhnout).

Citlivý design je holé minimum, na které byste měli usilovat, a to’s tím, co Google doporučuje. To znamená, že si to myslíme’Stejně tak stojí za to dále upravovat váš automaticky generovaný mobilní web – konec konců, chcete namísto toho usilovat o fantastickou zkušenost mobilního uživatele. ‘přijatelný’ jeden.

Pokud si myslíte, že by pro vaše stránky fungovala mobilní aplikace, doporučujeme kontaktovat vývojáře, který vám s tím může pomoci.

Zde jsou některé další články, které by se vám mohly líbit:

Jak navrhnout web – Jestli ty’znovu začnete navrhovat (nebo přepracovávat) svůj web, podívejte se do tohoto článku, kde najdete podrobného průvodce a klíčové body, které je třeba zvážit.

Jak vytvořit web – Haven’Na vašem webu jste ještě nezačali? Žádný strach, tento průvodce vás provede celým procesem!

5 nejlepších tvůrců webových stránek pro SEO – Každý tvůrce webových stránek se silným SEO přichází s pečlivostí pro mobilní zařízení přímo do svých šablon. Zde je pět z nejlepších.

1

Vyberte téma nebo šablonu reagující na mobilní zařízení

Dobře, takže toto je první krok, a to’s velký: vyberte téma nebo šablonu reagující na mobilní zařízení!
Vzhledem k tomu, že je mobilní design citlivý design, je tak důležité’Je to něco, co téměř každý top webový tvůrce pokrýval v každé ze svých šablon. Například:

Squarespace – má vodotěsnou schopnost reagovat na mobily a byla by naší nejlepší volbou, kdybyste vy’budování webu od nuly a zobrazení mobilní zkušenosti jako nejvyšší priority.

Wix – všechny šablony reagují na mobily, ale vždy se ujistěte, zda se v mobilním zobrazení kontrolujete. Protože weby Wix jsou tak přizpůsobitelné, někdy i velké změny’Přeložte tak hladce a vy’Musím udělat nějaké vyladění.

jestli ty’při vytváření webu pomocí systému CMS, jako je WordPress, se ujistěte, že motiv, ze kterého jste si vytvořili svůj web, reaguje na mobilní zařízení – nebo pokud’Už jsem postavil web, přepněte na ten, který je!

Stačí hledat ‘citlivé téma’ ve WordPress’ vlastní tematickou knihovnu nebo na webech třetích stran, jako je Themeforest. Nezapomeňte si přečíst recenze a pokud je to možné, podívejte se na všechny weby, které používají toto téma z vašeho mobilního telefonu, abyste sami mohli posoudit, jak to funguje..

Pomoc! Co když já’m na nereagující téma, a mohu’t přepnout?

Pokud byl váš web vytvořen pomocí starého, nereagujícího motivu nebo šablony, a vy’Pokud jej nelze přepnout, zkuste přidat tento řádek kódu na každou stránku’s tag:

To znamená, že vaše stránky by se měly automaticky přeformátovat tak, aby odpovídaly šířce zařízení, a přepínat z krajinářského stylu na portrét.

2

Odstraňte svůj obsah

Vy’vybrali jsme krásné responzivní téma nebo šablonu, takže teď vy’je vše v pořádku, že? Špatně!

Přechod na správnou šablonu nebo motiv je velkým krokem, ale je to’Je to jen jeden z mála, který byste měli vzít k dokonalému mobilnímu zážitku.

Teď to je’s čas podívat se na automatizované mobilní zobrazení vašeho webu a odstranit ji zpět:

Vyplňte svou nabídku

Vypracujte hlavní cíl stránky, kterou jste’znovu a ne’t neváhejte a učinte to ve své mobilní verzi mnohem výraznějším.

Podívejte se na tento příklad z Trainline:

Příklad vlaku pro mobilní zařízení

Domovská stránka je navržena tak, aby povzbudila uživatele k vyhledávání jízdenek na vlak, a tato forma se v mobilní verzi dostává do centra pozornosti. Ve verzi pro počítače se to zdá příliš přitažlivé, ale u mobilní verze to funguje.

Vyhněte se velkým částem textu

Kopie na vašem webu by měla být v nejlepším čase krátká a sladká (s výjimkou blogových příspěvků, jako je tento!), Ale v mobilních zařízeních je to o to důležitější. Přečtěte si naše tipy pro psaní na web a vezměte své virtuální nůžky na jakékoli dlouhé kousky textu.

Zkraťte formy

Vyplňování dlouhých forem je fuška v nejlepším případě, ale na mobilu? Na cestách? Zapomeň na to! Dlouhé formy ztratí čtenáře rychleji, než můžete říct ‘Toto je požadované pole’. Ujistěte se, že každý formulář vás’opětovné zobrazení na mobilu vyžaduje pouze informace, které’je naprosto nezbytné.

Nejlepší tip! Pesky autocorrect je jistý způsob, jak přeměnit vyplňování formulářů na velkou ztrátu času. Uložte čtenářům stres tím, že jej vypnete. Pokud máte přístup k kódu formuláře, ujistěte se, že je automatické pole nastaveno na autocorrect = off. 3

Vytvářejte obrázky a CSS co nejlehčí

Dělat svůj web co nejlehčí je vždy dobrý nápad – ale co přesně to znamená? Každý prvek na vašem webu nese virtuální ‘hmotnost’ – zda’s video nebo obrázek, který má velikost souboru, nebo kód, který je třeba načíst při každém kliknutí na web.

Google si byl velmi dobře vědom skutečnosti, že rychlost webových stránek je rozhodujícím faktorem hodnocení, což znamená pomalé (a.k.a). ‘těžký’) webové stránky ztratí konkurenci na stránkách s výsledky vyhledávače (SERP).

Pokud jde o mobil, je to o to důležitější. jestli ty’Snažili jsme se někdy načíst webovou stránku někde na dálku, jen proto, abychom sledovali, jak každý prvek dopadá bolestivě pomalu na místo’Rozumím proč.

Co s tím můžete dělat?

Komprimujte své obrázky

Když vás’znovu nahrajte jakýkoli obrázek na svůj web – mobilní nebo stolní verzi – je’Je důležité, abyste obrázky komprimovali pomocí bezplatného online nástroje, například kraken.io. Tím se výrazně sníží velikost souborů obrázků, aniž by došlo ke snížení kvality obrázků.

Hostujte svá videa s třetí stranou

Nahráním videí na třetí stranu a jejich vložením na svůj web to znamená virtuální ‘hmotnost’ z těchto videí je z větší části uchováno na vybraném webu než na vašich.

Wistia je populární platforma pro to, ale YouTube také funguje – vy’Jen se chci ujistit’znovu vypněte automatické přehrávání, takže nesouvisející video nefunguje’nehraje po tobě. Chcete-li to provést, jednoduše:

  • Přejděte na svou stránku nebo příspěvek WordPress
  • Najděte vložený kód a klikněte na ikonu ‘text’ tab
  • Najděte část, která říká src =”youtubeurlhere”
  • Přidat ?autoplay = 0&rel = 0 po youtubeurlhere
  • Kód by nyní měl číst src =”youtubeurlhere? autoplay = 0&rel = 0 ″
  • Udeřil ‘Aktualizace’ a vy’je dobré jít

Nejlepší tip! Pokud ne’Nemyslete si, že by váš obsah na YouTube klesl příliš dobře (některá videa ne’t dělat hodně smysl bez kontextu celé stránky), ujistěte se, že jste nastavili viditelnost ‘neuvedeno’. Tímto způsobem na ni nikdo nenakazí nikde kromě vašich webových stránek. 4

Vyhněte se Flash

Flash se často používá k vytváření animací, ale obvykle není’Pokud je podporována mobilními zařízeními, je nejlepší se mu úplně vyhnout.

5

Změňte velikost a umístění tlačítka

Téměř každý web používá tlačítka k přepojení do jiných sekcí nebo do formulářů. Ale a ‘dobrý’ tlačítko se může rychle stát ‘špatný’ tlačítko na mobilu, pokud ano’je na nesprávném místě nebo je nesprávná velikost.

Přemýšlejte o tom, jak držíte a používáte telefon. Šance jste’Palcem používejte téměř všechno, což znamená cokoli’Dosah palcem se stane naprostou bolestí.

Tady’s, kde byste měli usilovat o umístění CTA na mobilní web:

Vytvoření webu vhodného pro mobilní zařízení: kam přidat CTA

Takže teď’Máte tlačítka na správném místě’je čas, aby byly správné velikosti. To obecně znamená, že jste’Budu je muset trochu zvětšit – to’Je mnohem těžší kliknout přesně palcem než myší.

6

Mezerou vaše odkazy

Když už mluvíme o tom, jak těžké je kliknout palcem na rozdíl od myši, to nás pěkně přivádí k našemu dalšímu bodu: podívejte se na vaše odkazy!

Konkrétně ty’Chci zkontrolovat, zda všechny hypertextové odkazy na vašem mobilním webu:

  • Arene’příliš blízko u sebe, aby nedocházelo k náhodnému kliknutí na špatný.
  • Odkaz na stránky, které jsou také optimalizovány pro mobily pro bezproblémovou cestu uživatele.

7

Použijte velké a čitelné písmo

To’doporučuje používat na ploše velikost písma alespoň 14 pixelů, ale vyzkoušejte, jak to vypadá ve vaší mobilní verzi – je pravděpodobné, že se vám zdá, že se zobrazí trochu malá, a vy’Budu to chtít trochu narazit.

Zkontrolujte také čitelnost písma. To’Jedna věc vyzkoušet více experimentální písmo na ploše, ale tento pohyb je nepravděpodobné, vyplatí na mobil. To znamená, že’Budu chtít ponechat písma jako ‘na značku’ na všech platformách.

Při práci na mobilním zobrazení vašeho webu vy’Mám mnohem menší prostor na hraní. Na ploše můžete mezery na řádcích a obrázky. V mobilních zařízeních zkuste namísto toho spojit různé řádky textu tučným písmem nebo velkým písmem.

8

Odstraňte vyskakovací okna

Při správném používání mohou vyskakovací okna fungovat dobře na desktopové verzi webu. Možná jste si jich všimli’něco, co používáme na několika málo stránkách zde na WBE.

Pokud však jde o mobilní zařízení, vyskakovacím oknům se nejlépe vyhnete. Nejen, že máte k dispozici menší obrazovku, ale můžete’t přizpůsobit vyskakovací okno tak, aby se spouštělo v klíčových okamžicích, například když uživatel odejde z obrazovky.

9

Testujte pravidelně

Nejlepší způsob, jak zjistit, jak mobilní web je mobilní, je vyzkoušet ho! Vy’Chci to udělat třemi různými způsoby:

Spouštějte adresy URL prostřednictvím Googlu’s nástrojem přátelským pro mobily

Google má zdarma testovací nástroj vhodný pro mobilní zařízení, který může kdokoli použít k testování toho, jak je daná adresa URL vhodná pro mobily – zda’s domovskou stránku (viz níže) nebo stránku na vašem webu.

Test společnosti Google pro mobilní zařízení

Vyzkoušejte různé velikosti zařízení z vašeho počítače

Skvělý způsob, jak zkontrolovat, jak citlivý je váš web, je jen pohrát si s tvarem karty na vašem webu, kterou máte otevřenou. Když zmenšujete šířku karty, měli byste si všimnout, že váš web začíná ‘smlouva’ a přeměnit se na verzi vhodnější pro mobily.

Chcete-li rychle vyzkoušet vzhled čehokoli na mobilu, můžete také pravým tlačítkem kliknout na svou webovou stránku a vybrat ‘Kontrolovat’, a poté klikněte na ikonu dvou obrazovek, které se zobrazí na panelu nástrojů v horní části:

Zobrazit mobilní verzi z počítače

Jak zajistit, aby váš web byl mobilní: Přehled

Děkujeme, že jste se na nás drželi, když jsme vysvětlili, jak učinit vaše webové stránky mobilními. Tady’s tyto kroky znovu:

Jak zajistit, aby vaše webové stránky byly mobilní:

  1. Vyberte téma nebo šablonu reagující na mobilní zařízení
  2. Odstraňte svůj obsah
  3. Vytvářejte obrázky a CSS co nejlehčí
  4. Vyhněte se Flash
  5. Změňte velikost a umístění tlačítka
  6. Mezerou vaše odkazy
  7. Použijte velké a čitelné písmo
  8. Odstraňte vyskakovací okna
  9. Testujte pravidelně

Dobrou zprávou pro většinu webů je, že velká část tvrdé práce bude pravděpodobně vykonána podle vašeho motivu nebo šablony. To znamená, že si to myslíme’stojí za to udělat další vylepšení popsaná výše, aby se zajistilo, že vaši mobilní uživatelé získají brilantní zážitek, spíše než přijatelný. Statistiky nakonec říkají’Pravděpodobně bude tvořit většinu vašich uživatelů!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map