Výstupní checklist šablon

Abychom se vám hned v prvním ostrém příspěvku zavděčili, ukážeme vám čím naše šablony procházejí před odesláním klientovi. Jsou to tipy co je dobré zkontrolovat před odevzdáním klientovi.

Znáte to, vždycky na konci projektu řešíte, jestli jste všechno v šablonách udělali, zkontrolovali, otestovali a šablony jsou tedy připravené na odeslání. Pokud nemáte checklist pak většinou na něco zapomenete a pak to klient reportuje nebo si na to vzpomenete a dodáte to později, což také nepůsobí dobře. U nás jsme si dali tyto body dohromady a vytvořili z nich checklist, bez kterého se šablony neodesílají.

Check list vám pomůže zkontrolovat vše, co by jste měli zkontrolovat před odevzdáním finálních šablon.

Co tedy vše zkontrolovat:

  • vytvořit rozcestník HTML šablon, aby si klient mohl jednoduše šablony projít
  • zkontrolovat funkčnost menu accessibility
  • zkontrolovat zda jsou nastaveny rozměry u všech obrázků (width + height)
  • zkontrolovat zda jsou nastaveny alty u všech obrázků mimo rozcestníkových obrázků a obrázků kde to nemá význam
  • projít CSS obrázky a zamyslet se, zda by se nedali ještě nějaké spojit dohromady (sprite.png)
  • pročistit CSS od nepotřebných CSS pravidel
  • pročistit JS od přebytečných scriptů
  • zkonrolovat jestli v JS nejsou zapomenuté console.logy
  • odstranit přebytečné soubory (temp obrázky apod.)
  • optimalizace velikosti obrázků (png optim + jpg mini + posterizace)
  • zkontrolovat font-family ve formulářových prvcích, měl by být stejný jako font standardního textu (input, textarea, button)
  • zkontrolovat zda jsou formuláře obaleny do formu
  • zkontrolovat zda buttony mají správně definovaný type (většinou type="submit")
  • zkontrolovat zda jsou nadpisy ve správném pořadí. Pouze jedna H1, pod ní nadpisy H2 a pod jednolitvými nadpisy H2 další podnadpisy H3…
  • připravit tiskový styl
  • vytvořit nebo požádat grafika o favicon
  • na titulní stránce nesmí být logo klikací (všeobecně zkontrolovat zda stránka nevede sama na sebe)
  • validace HTML – zjístí se tak drobné nedostatky jako špatně uzavřený tag nebo stejná ID u formulářových element apod.
  • jsou nastaveny stavy odkazů
    • :hover
    • :visited
    • :active
  • otestovat zobrazení
    • FF
    • Chrome
    • Safari
    • Opera
    • IE 9
    • IE 8
    • IE 7
  • vše commitnout do SVG / GITu – kvůli záloze
  • vystavit na testovací server
  • poslat ke kontrole klientovi poznámky k šablonám, odkaz na testovací server a zip

Poznámka na závěr: Checklistem je dobré procházet i následné dodělávky, předělávky a opravy.

Budeme rádi, když nám do komentářů napíšete co ještě navíc kontrolujete vy, rádi checklist doplníme o vaše úkoly.

Sdílet článek:

Tomáš Krejčí Autor: Tomáš Krejčí
tomas.krejci@superkoderi.cz Twitter Kippt LinkedIn LastFM

Komentáře

  • Avatar

    1. Martin Hakl 02. 11. 2013 v 11:43

    Ahoj,

    u nás máme pravidla nastavená hodně podobně. Navíc se snažíme ještě odkontrolovat delší nadpisy a případy, kdy text přeteče na více řádků.

    Díky za fajn článek!

  • Avatar

    2. Ondra Geršl 02. 11. 2013 v 12:20

    Ahoj Tome,

    díky za pěkný checklist. Rád bych se zeptal, jestli některé body máte automatizované, nebo všechno kontrolujete ručně. Dokážu si představit, že třeba kontrola odkazů, validace HTML, ověření favicony, optimalizace obrázků atd. by šly udělat skriptem či jiným automatizovaným způsobem.

    Díky a ať se daří!

  • Avatar

    3. Michal Matuška - SuperKodér | 03. 11. 2013 v 10:25

    Ahoj Ondro,

    ano teď přecházíme na grunt kde jsme již některé body automatizovali. O gruntu chystám článek možná i seriál. Uvidíme jak to bude rozsáhlé až to hodím všechno na papír.
    Ruční resp. vizuální kontrola, ale je a bude pořád potřeba :)

  • Avatar

    4. Daniel Střelec 04. 11. 2013 v 10:08

    Hezký seznam. Zajímalo by mně, jaké programy/postupy používáte při optimalizaci velikosti obrázků (gauntlet? jpegmini?)…tak jestli třeba někdy nebude článek věnovaný podpůrnému SW? ;) Jinak díky za blog a těším se na články a RSS.

  • Avatar

    5. Michal Matuška - SuperKodér | 04. 11. 2013 v 15:33

    Ahoj Dane,
    asi nemá cenu se teď o tom rozepisovat víc v komentáři, protože kolem optimalizace obrázků je toho hodně. Už to máme jako jedno téma na článek.
    Díky za nápad.
    RSS již běží http://www.superkoderi.cz/rss

  • Avatar

    6. Daniel Střelec 04. 11. 2013 v 16:06

    Paráda, díky. RSS putuje do čtečky a na článek se těším!

  • Avatar

    7. Ondřej Masopust 10. 06. 2014 v 22:18

    Ahoj,

    vše commitnout do SVG má být nejspíš SVN.. :) Jinak pěkný seznam :)

  • Avatar

    8. Petrrr 07. 01. 2015 v 13:38

    na titulní stránce nesmí být logo klikací (všeobecně zkontrolovat zda stránka nevede sama na sebe)

    Mohl bys me poucit proc se to tak ma delat?

    Diky :)

  • Avatar

    9. Tomáš Hejč - SuperKodér | 07. 01. 2015 v 14:08

    Ahoj,
    obecně z hlediska SEO by stránka neměla odkazovat sama na sebe. Nechci se tu pouštět do nějakých SEO argumentací, zda to má nebo nemá význam – tohle ponechme SEO mágům.

    Pro nás je tohle zažité. Je to podobné jako např. v hlavním menu – pokud jsi na nějaké stránce, tak v menu tato stránka není odkazem. Logo je odkaz na homepage, proto na homepage odkaz odstraňujeme.

  • Avatar

    10. Petrrr 07. 01. 2015 v 15:14

    Ahoj Tomáši, díky za info. Tušil jsem, že zde zazní slovo SEO :) Zkusím si toho na webech více všímat, protože teďka co mě v rychlosti napadly to takto udělané neměli.






Využijte formátování Texy!

Evropský fond pro regionální rozvoj CzechStarter Společnost SuperKodéři s.r.o. byla podpořená agenturou CzechInvest v rámci projektu Podpora start-upů, klíčové aktivity CzechStarter, realizované z programu Marketing, prioritní osy č. 2 "Rozvoj podnikání a konkurenceschopnosti malých a středních podniků" v rámci Operačního programu Podnikání a inovace pro konkurenceschopnost.

SuperKodéři se mění na SUPERKODERS. Už jsme spustili prozatímní jednoduchou stránku, která vám nové Superkodéry představí.

Přejít na nový web Zůstat na současném webu