Kód

Proč má čistá značková záležitost ve webovém designu?

Vzhledem k tomu, že web je měnícím se a stále se vyvíjejícím organizmem, je důležité vytvářet místa, která s ním mohou růst a snadno přistupovat k proudu namísto utopení, když se blíží nová vlna.

Čistá značkování a budování s webovými standardy vám to nejen pomáhá, ale ušetří vám čas i peníze v dlouhodobém horizontu.

Jak se web rozšiřuje, technologie, kterou používá, roste s ním. Zatímco HTML byl po dlouhou dobu, získal poměrně málo sidekicks podél cesty.

První Javascript, pak CSS, XML a později AJAX. Široké přijetí HTML 5 je hned za rohem, protože Firefox, Safari, Opera a Chrome už mají téměř plnou podporu HTML 5 (pomalé dítě v bloku Internet Explorer zaostává jako obvykle).

V tomto článku přezkoumáme základy webových standardů, co jsou, co pro vás znamenají a některé důležité tipy, které vám pomohou vyřešit tento důležitý a často zanedbávaný problém.

Co znamená mít "čistou" značku?

Jednoduše řečeno, znamená to, že je prostě nepořádek, kompatibilní s normami a pomocí značek a struktur jednotlivých jazyků pro svůj zamýšlený účel.

Nekonečný HTML způsobuje řídké používání tagů, eliminuje cizí uživatele a provádí svůj úkol s tak malým označením, jak je potřeba . Vyhýbe se nepotřebným atributům, jako je inline CSS, a každý dokument je strukturovaný a organizovaný.

Stejně tak by se CSS bez rušení mělo vyvarovat opakování, využít dědictví (nezapomeňte, že CSS znamená kaskádový stylový list) a opakujte použití tříd, kdykoli je to možné.

Kompatibilita standardu znamená, že vaše stránky ověřují standardy stanovenými v W3C pro HTML, CSS a XML. To znamená, že pomocí bezplatných validátorů W3C můžete zkontrolovat chyby, opravit je a znovu testovat, dokud nebudete co nejblíže 100% platnému .

Proč bych se měl starat? Funguje, není to dost?

Každý projekt má agresivní lhůtu a každý klient chce své stránky zahájené včera. Takže jako weboví vývojáři a návrháři jsme pod neustálým tlakem pracovat rychleji a efektivněji.

Je snadné se dostat do pasti myšlení rychle musí znamenat nedbalost , a to čisté, standardy-kompatibilní značení trvá více času. Je snadné říci, že "to funguje a to je důležité."

Jistě, funguje to ... prozatím, pro tebe. A co příští rok nebo tři roky? A co nové prohlížeče? A co přístupnost?

Opravdu si myslíte, že hlavní vyhledávače se budou držet speciálních, nedbalých metod kódování? Jsou to falešné, a pokud nejste ve shodě s normami, vykopáte své hodnocení v obličeji .

A co další chudá šťáva, která musí upravovat tyto stránky, které jste vytvořili? Co se stane, když se dostanete do autobusu, přestanete se vrátit na Aljašku nebo se unesou cizinci? Někdo jiný musí vyzvednout, kde jste skončili, a on se dívá na váš kód a snaží se to pochopit. Bude to snadné, nebo mu to udělá bolest hlavy a přiměje ho, aby proklínal tvé jméno?

Udělejte to poprvé. Není to jen trochu otravná, otcovská životní lekce. To vám skutečně ušetří čas i peníze a zajistí, aby ti, kteří vás následovali, měli snadnější čas.

Možná si myslíte, že je to rychlejší jen kvůli poklesu inline CSS namísto správného přidání nové třídy do listu stylů. A možná si myslíte, že je rychlejší házet v jakémkoli kódu HTML, který můžete vylézt bez ohledu na celkovou strukturu dokumentu.

Když přijde čas později aktualizovat daný dokument nebo přepracovat celý web, ušetříte mnohem více času na to, abyste si vymysleli neopatrný kód, než jste kdy ušetřili. Když vytvoříte nový stylový štítek, ty špinavé inline styly, které jste spěšně přidali, se vrátí, aby vás pronásledovaly a budete trávit hodiny, když je budete honit a zbavovat.

Rozšiřitelnost, přístupnost, překlad a budoucnost

Prohlížení mobilních zařízení roste jako Godzilla na atomových steroidech. Namísto toho, aby se před 5 lety přestěhovali do záchranných zařízení Blackberry, dnes každý používá svůj telefon k surfování na webu.

Asistující technologie - čtečky obrazovky pro nevidomé a alternativní zařízení pro postižené - jsou běžné a nechcete ztratit prodej nebo odcizit provoz jen proto, že jste to nezohlednili.

Váš web bude pravděpodobně přeložen do několika jazyků, protože čtenáři z celého světa najdou váš obsah. Díky Internetový archiv , Cache Google a další, stránky, které dnes publikujete, budou dlouhou a dlouhou dobu i poté, co byly odstraněny ze svého živého webu.

Čistá značka a dodržování norem budou dlouhou cestou, aby vaše stránky pracovaly v každém z těchto scénářů.

Pro a proti:

  • Používejte značky tak, jak jsou určeny. Například: h1 je první prvek nejvyšší úrovně na stránce, pak h2, h3 a tak dále. Na stránku by měla být pouze jedna značka h1.
  • DO pojmenujte své třídy a ID CSS pomocí smysluplných termínů a zeptejte se sami sebe, zda někdo jiný bude vědět, co dělá třída / ID pouze z jeho jména. Která jmenovací konvence má větší smysl: # box12 nebo # comment-footer?
  • Dobře využívejte dědičnost CSS. Například: pokud nastavíte písmo na kontejner, nemusíte jej znovu specifikovat na každém podřízeném elementu, pokud tento podřízený prvek nepotřebuje použít jiné písmo. To vám umožní udržet stylové listy nakloněné a rychlé.
  • Ověřte své HTML, CSS a XML a opravte co nejvíce chyb. Věnujte pozornost i generovaným varováním.
  • Zkontrolujte dvakrát WYSIWYG generovaný kód a podle potřeby vyčistěte. Oni jsou proslulí tím, že plivou objemné, nafouklé značkování s množstvím zbytečných, neplatných nevyžádaných pošty.
  • Nepoužívejte inline styly nebo cizorodé značky a atributy, protože jste ve spěchu.
  • Neuspokojíme se o to, že to funguje. Jen proto, že stránka vykresluje, neznamená to, že značka pod kapotou je kompatibilní s normami, bez problémů nebo vhodná pro vyhledávače.

Další čtení a zdroje


Napsal výhradně pro WDD Jeff Couturier.

Dodržujete webové standardy na svých webových stránkách? Proč nebo proč ne? Sdělte nám své připomínky.

design webových standardů čistá značka