5 základních kamenů pro vlastní web bez zbytečných chyb

Až budeš mít funkční aplikaci, neznamená to konec. Nauč se testovat na různých velikostech obrazovky a v různých rozlišeních. Android je rozmanitý, a to, co vypadá dobře na jednom telefonu, může být na jiném nepoužitelné. Používej flexibilní rozložení, které se přizpůsobí, a ne pevné rozměry. Sám se pak vyhneš spoustě problémů. A pokud se zasekneš, nevzdávej se. Vyhledávání v dokumentaci je normální součást práce – i zkušení vývojáři to dělají každý den.

Užitečné je také myslet na klávesnici, zejména u formulářů. Enter by měl odeslat formulář, tlačítko Escape by mělo zavřít dialog nebo přesunout focus na předešlý prvek. Tato drobnost dělá aplikaci přívětivou pro pokročilé uživatele i lidi s postižením. A když už mluvíme o přístupnosti – nezapomeňte na popisky u ikon a dostatečný kontrast mezi textem a pozadím. Tím usnadníte používání lidem s poruchami zraku a zároveň pomůžete i ostatním, kteří mají slabší displej nebo sluneční světlo na mobilu.

Další pastí je nekonzistence. Pokud na jedné obrazovce používáte modré tlačítko pro uložení, na druhé by nemělo být zelené a na třetí oranžové. Stejná pravidla platí pro ikony, typografii nebo zarovnání. Vytvořte si jednoduchý styl – byť jen pár pravidel pro barvy a mezery – a držte se ho. Pomáhá také vyhnout se příliš mnoha modálním oknům; každé přerušení toku uživatele ho stojí čas a pozornost. Pokud se něco dá vyřešit inline, nelamte to přes dialog.

Při responzivním designu se vyhněte pevným hodnotám jako width: 300px. Místo toho používejte jednotky fr, %, auto, nebo minmax(). Například pro obsah s bočním panelem použijte grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)). Tím zajistíte, že se prvky samy přeskupí, když je obrazovka úzká. U Flexboxu zase hlídáte vlastnost flex-wrap. Pokud ji nenastavíte na wrap, prvky se budou zmenšovat, až se nevejdou. To je druhý nejčastější problém – prvky se mačkají místo toho, aby se posunuly do nového řádku.

Nakonec si osvojte zvyk pravidelně testovat vlastní návrhy. Není nutné mít laboratoř – stačí, když si sednete k hotové obrazovce a projdete si hlavní úkoly, jako byste byli uživatel. Zeptejte se sami sebe: Kde váhám? Co je nejasné? Jak dlouho mi trvalo najít klíčovou funkci? Takovýto self-test odhalí mnoho nedostatků dřív, než aplikaci vypustíte do světa. A když můžete, nechte si návrh projít někým, kdo vaši aplikaci nezná – jeho pohled je přesně ten, který potřebujete.

Pro práci s CSS používejte externí soubor, ne style přímo v HTML. Oddělení obsahu od vzhledu vám umožní měnit design bez zásahu do struktury. Stačí v head připojit odkaz na CSS soubor a v něm definovat pravidla. Selektory píšete podle tříd, id a elementů. Třídy jsou univerzální, id používejte jen pro jedinečné prvky. Pokud chcete nadpis označit modře, napište .nadpis a v HTML
. Vyhněte se stylování podle id, protože to snižuje přehlednost a ztěžuje pozdější úpravy.

Když se vývojář pustí do návrhu rozhraní, často se zaměří na funkčnost a kód, ale už méně na to, jak se v aplikaci bude uživatel orientovat. Přitom stačí pár základních pravidel, aby výsledek působil profesionálně a uživatel se v něm neztratil. Nejdřív si ujasněte, kdo bude aplikaci používat a jaký problém mu řeší. Bez této znalosti budete jen hádat, kam umístit tlačítka nebo jaké barvy zvolit. Zkuste si představit konkrétní scénář – třeba jak uživatel zadává objednávku nebo vyhledává informaci – a podle toho přizpůsobte tok obrazovkami.

Když zabezpečujete API, máte v zásadě dvě cesty: klasické session uložené na serveru, nebo stateless tokeny typu JWT. Hlavní rozdíl je v tom, kdo si pamatuje, že je uživatel přihlášený. U session držíte stav na serveru, u JWT ho nesete v každém požadavku. Volba mezi nimi není o modernosti, ale o tom, co vaše aplikace skutečně potřebuje. Pokud stavíte mikroservisy nebo potřebujete sdílet přihlášení mezi více nezávislými službami, JWT vám ušetří spoustu starostí.

Když se rozhodneš začít s vývojem pro Android, první věc, kterou uděláš, je výběr vývojového prostředí. Nemusíš hned instalovat vše, co existuje. Stačí ti oficiální nástroj od Googlu, který obsahuje editor, emulátor i potřebné knihovny. Stáhneš si ho, nainstaluješ a vytvoříš nový projekt. Nezapomeň si zkontrolovat verzi Java Development Kitu, protože bez něj projekt ani nespustíš. Po prvním spuštění se ti ukáže předpřipravená šablona – nech ji tak, jak je, a projdi si strukturu složek.

Další past je nepoužívání validátorů. Po napsání kódu si ho projděte v nástroji pro kontrolu syntaxe. HTML a CSS mají přísná pravidla a chybějící uvozovka nebo špatně zapsaná hodnota může rozbít celou stránku. Validátor najde chyby, které byste jinak hledali hodiny. Také se vyplatí testovat v různých prohlížečích, protože každý má drobné odchylky. Nezapomínejte ani na přístupnost: alt texty u obrázků, správné nadpisy a kontrast barev. To není jen o etice, ale i o SEO a použitelnosti pro všechny uživatele.