CSS

Je to již půl roku, co si pravidelně platím nástroj Avocode. Tato prima pomůcka vám výrazně ulehčí život, pokud dostáváte hotové grafické podklady, které následně přetváříte do podoby reálného webu.

V posledních týdnech jsem řešil několik drobných problémů s weby pro klienty, kteří se potýkali se špatným fungováním a zobrazením v Internet Exploreru. Možná by se pár tipů mohlo hodit i někomu z vás, postřehy tedy shrnuji do článku.

Měl jsem nějaké zkušenosti s AMP a WordPressem. Spočívaly v zapnutí pluginu. Ale protože se zapnutím pluginu AMP nenaučím, rozhodl jsem se nakódovat nový jednoduchý webík právě rovnou v AMP. Od píky, čistě jen v editoru, bez redakčního systému.

Google spustil mobile first indexaci. Podíl mobilních zařízení stále roste. Designéři, alespoň ti ukecanější, pořád mluví o mobile first návrhu webu. Stránky zrychlujeme i kvůli dobrému načítání na pomalém mobilním spojení. Napadlo mě se mrknout, jak jsou na tom české IT weby. Jde o obor, který by mohl být vzorem.

Asi každý tvůrce webu je poté, co jej pokládá za dokončený, vyveden z omylu a začne řešit připomínky zákazníka. Patříte-li spíše k těm, kdo ty připomínky vytvářejí z pozice zadavatele, mrkněte na nástroj, který vám to výrazně usnadní.

Při tvorbě webu je občas nutné zkontrolovat, zda použité písmo odpovídá zadání, grafickému návrhu. Jindy se zase chcete podívat, jaké písmo použil někdo jiný. Je mnoho způsobů, jak to zjistit, použití nástroje WhatFont je však velice rychlé a pohodlné.

Dlouho jsem hledal řešení, které mi umožní být dostatečně mobilní a přitom s jistým komfortem pracovat na vývoji webů i na cestách. Myslím, že prozatím jsem našel to nejlepší. Kombinaci tabletu a povedeného programátorského editoru a správce souborů Coda.

Jedním z mnoha příjemných rysů uživatelského rozhraní administrace Drupalu je možnost nastavení vzhledu obsahu v editoru tak, aby odpovídal tomu, co pak uživatel vidí po uložení článku. Získá tak lepší představu o výsledné vizuální podobě textu.

Navzdory mnoha škarohlídům si programátorský editor od GitHubu s názvem Atom našel množství příznivců. Já jím v případě Windows nahradil už poněkud zastaralý PSPad a v případě Macu zdarma dostupný TextWrangler. Ostatně i Atom je dostupný zadarmo – jeho funkce jdou navíc rozšiřovat pomocí pluginů.

V záplavě nástrojů určených k testování responzivního designu webových stránek by vás mohl zaujmout relativně nový nástroj Resizer. Přišel s ním Google a od jiných se liší tím, že se velice snadno ovládá.

Ladění webů na mobilních zařízeních je vždy tak trochu problém. Jistě, máme tu spojení Safari s iOS, Chrome s Androidem, ale nic skutečně univerzálního a fungujícího na dálku. A proto přichází javascriptová knihovna a node.js aplikace Vorlon.js.

Ladit responsivní weby je zdánlivě jednoduché. Prostě si zmenšíte okno webového prohlížeče a upravujete styly. V okamžiku, kdy potřebujete reagovat na přesné rozměry, potřebujete něco sofistikovanějšího. Nabídnou vám to  Firefox i Chrome v základní výbavě.

Definovatelné vlastnosti v CSS a také proměnné už mají dostatečně širokou podporu napříč webovými prohlížeči, takže je nejvyšší čas je začít používat. Respektive ten čas nastal už loni, takže pokud jste CSS proměnnými stále nepolíbeni, je nevyšší čas to změnit. Ušetříte si totiž práci.

Na jaře jsem byl na školení u Martina Michálka o optimalizaci rychlosti načítání webových stránek. Tedy optimalizaci především z hlediska frontendu. Získané vědomosti plus několik dalších věcí, na které jsem se chystal, jsem postupně vnesl na jednom webu do praxe a průběžně hodnotil, jaký měly přínos.

Z uplynulých konferencí se mi nahromadilo několik zajímavých odkazů, o které bych se s vámi rád podělil. V článku najdete pár tipů na služby pro stažení fontů, ikonek, souborů SVG a zjištění barev.