Odpovědný webdesign je už buzzword desetiletí a je ideální pro multi-screen spojené svět, ve kterém žijeme. Avšak, kompromis pro to je v výkonu kvůli větší velikosti souborů.

To přimělo některé odborníky k tomu, aby říkaly, že stejně jako počáteční dny hry Flash, reagující design je něco, o čem bychom mohli být všichni nadšeni bez dobrého důvodu. Zatímco v tuto chvíli existují problémy s výkonem, lze je do jisté míry překonat několika malými úpravami, kompresí a změnami velikosti obrazu.

Proč reagující design může pracovat pomalu

Odpovědný design načte všechny stejné prvky HTML pro každé zařízení, včetně těch, které jsou určeny pro práci s tablety a stolními počítači. To znamená, že je často dodáván veškerý obsah, včetně obrázků a skriptů, bez ohledu na to, na jaké zařízení se na něj dívá.

Studie provedené v loňském roce ukázaly, že 86% citlivých webů, které jsou v současnosti online, přináší na mobilní zařízení úplnou stránku pro stolní počítače. To je jednoznačně trend pro konstrukční techniku, která potřebuje řešit, pokud chceme zastavit vývoj nafouknutých webových stránek ve svých stopách.

V tuto chvíli reaguje citlivá konstrukce na posun velikostí stránek a je to trend, který je třeba řešit, zejména pokud si myslíte, že 57% uživatelů mobilních telefonů opustí, během 3 sekund.

Jak lze zlepšit výkonnost?

Pro ty, kteří již mají design a chtějí nyní optimalizovat, Mobitest může být použito k měření výkonnosti, aby mohlo být pokračováno a řešeno. Samozřejmě, když plánujete návrh, optimalizace bude v této fázi jednodušší a výkon by měl být vždy považován za nezbytnou součást návrhu, spíše než za nápad.

Aby se zlepšila výkonnost, je třeba snížit velikost stran a zdrojů, které jsou načteny. To lze provést různými technikami, aniž by se vážně změnilo vzhled a pocit.

První věcí, kterou je třeba zvážit, je, jak zajistit, aby byly cílenému zařízení odeslány pouze potřebné zdroje. To lze provést minimalizací počtu požadavků HTTP, takže uživatel stráví méně času čekáním na načtení DOM. To může být zase provedeno kompresí zdrojů CSS a Javascript, pro které nástroje, jako je Kompas - open source CSS authoring framework - lze použít. To umožňuje vývojářům vytvářet čistší značkování a vytvářet přízraky a rozšíření s minimálním rozruchem.

Pokud jde o JavaScript, nástroje, jako je UglifyJS lze použít, což komprimuje kód.

Podmíněné zatížení

To může být považováno za důležitou techniku, pokud jde o citlivý design, protože může být použita k tomu, aby se ujistil, že uživatelé mobilních telefonů a smartphonů nenakládají aspekty webu, které je zpomalují nebo nepoužívají.

Podmíněné načítání lze použít k zastavení veškerého obsahu načítání, včetně sociálních widgetů, obrázků, map a mnoha dalších. V tomto bodě je důležité si uvědomit, že web musí být důkladně otestován v každé fázi optimalizace, takže je snadné vidět, co změnilo, když jedete.

snímky

Všichni víme, že obrázky jsou obvykle zodpovědné za to, že na webové stránce získáte největší množství kilobajtů. Také je bezpečné říci, že obrázky, které jsou určeny pro stolní prohlížeč, budou při dodávání do mobilního zařízení podhodnoceny.

Pokud má web také hodně staršího obsahu, pak to ještě více ovlivní výkon a určitým způsobem, jak zabránit tomu, aby byl tento obsah načten, musí být implementován. Zatímco to lze provést změnou značkování změnou src nebo img elementů, řešení PHP Adaptivní obrazy je pravděpodobně snadnější. Software rozpozná velikost obrazovky a automaticky vytvoří, ukládá do mezipaměti a dodává příslušné zmenšené vložené obrázky HTML, aniž by bylo nutné měnit značku. Pro použití ve spojení s technikami Fluid Image je to praktické řešení, které vám ušetří spoustu času. Adaptivní obrázky používají jeden soubor htaccess, jeden soubor php a jeden řádek jazyka Javascript pro určení velikosti obrazovky návštěvníků webu.

Text

Stojí za to přemýšlet také o textu, protože to přirozeně zabalí, když je zařízení zúžené a může způsobit problémy s zobrazením. FitText je nástroj, který vám pomůže vyřešit tento problém, plugin jQuery, který automaticky aktualizuje velikost písma, s možnostmi pro minimální a maximální velikosti, které budou povoleny.

To je ideální pro nadpisy, které mohou být na mobilním zařízení špatně zobrazeny, a umožňuje ignorovat velikost písma určená pro CSS3. FitText je však určen pouze pro titulky a neměl by být použit v textu odstavce.

Proč se rozhodnout navrhnout odpovídajícím způsobem?

Zatímco reagující design má své problémy, podobně jako jakákoli relativně nová technologie nebo technika, stále stojí za to rozhodnout se vybudovat místo tímto způsobem. Nikdo nechce jít zpět a zatímco může být snadnější vytvořit mobilní web, je mnohem lepší být co nejmodernější.

Společnost Google souhlasí, jejich radu je použít citlivý design jako nejlepší způsob, jak navrhnout pro mobilní zařízení. Samozřejmě pro vyhledávací giganty to znamená, že mají pouze jednu adresu URL pro procházení než spoustu adres URL pro to, co je v podstatě stejná, takže je to opravdu v jejich zájmu.

Nicméně v této době sociální mania sdílení má také smysl, protože mobilní uživatelé mohou sdílet stránku s někým pomocí počítače. Abychom vytvořili jednotný zážitek, měl by to obsahovat stejný obsah.

Kromě toho, mít vstřícné místo zvyšuje produktivitu pracovní síly, protože v podstatě je mnohem méně práce. To platí pro obsah, aktualizace a SEO, protože to bude nutné provést samostatně, pokud budou postaveny různé stránky.

Postavy

Mobilní zařízení a tablety se stávají normou pro připojení k internetu a surfování v této době téměř po PC. Celosvětové prodeje tabletů vzrostly za pouhý rok, v tomto období se zdvojnásobily a mnozí spotřebitelé nyní vybírají různá zařízení se systémem Android a iOS.

Není pochyb o tom, že doposud reagující design má pozitivní dopad i přes výkonnostní obavy. Podle jedné zprávy , který požádal některé z nejlepších světových značek o to, jak ovlivnit návštěvnost všech zařízení, když návštěvníci reagovali na návštěvnost.

To zahrnovalo průměrný nárůst mobilních návštěvníků o 23%, stejně jako snížená míra odchodů o 26%, přičemž návštěvníci tráví na stránkách o 7,5% více času, než bylo dříve vidět.

O'Neill, trendový maloobchodní prodejce oblečení, hlásí konverzní poměr o 65,7% vyšší v iPadu a iPhonu v důsledku rozvíjejícího se webu. To představuje 101,2% růst tržeb pouze na těchto zařízeních.

Pokud jde o zařízení Android, konverzní poměr byl dokonce ještě lepší, a to o 407,3%, což představuje obrovský nárůst tržeb o 591,4%. Menší míra konverze byla zaznamenána na nepohyblivých zařízeních, ačkoli růst byl ještě viděn.

Jedná se pouze o jednu z značek, které uvolňují své údaje, a to je dost obtížné získat data od ostatních právě teď, stejně jako tomu bylo před několika lety před dopadem sociálních médií. Nicméně, to nějak dokazuje, že výnosy z navrhování citlivé webové stránky mohou být podstatné.

S ohledem na to, jaké další důvody musí každý návrhář začít navrhnout odpovědně pro své klienty a snažit se zajistit, že budou fungovat stejně dobře, jak by mohli? Neexistuje ani jeden, a ti návrháři, kteří nechtějí jít do problémů s učením, jak navrhnout, postavit a optimalizovat místo pomocí citlivých technik, se ocitnou v prachu.

67% uživatelů říká, že si zakoupilo prostřednictvím mobilního webu a předpokládá se, že využití mobilního internetu bude předcházet užívání počítače v příštím roce. S ohledem na všechny tyto skutečnosti je snadné pochopit, proč se firmy budou stále více zajímat o nejlepší mobilní webová řešení, která mohou nabídnout.

Odpovědný návrh může být ještě v plenkách, ale zdá se být jasné, že poptávka na trhu povede k rychlému růstu, a proto je užitečné poznat co nejvíce aspektů disciplíny.

Jaké techniky jste použili k optimalizaci citlivých stránek? Dodává alternativní obsah, který negativně ovlivňuje výhody citlivého designu? Dejte nám vědět v komentářích.