Nejlepší postupy pro progresivní vylepšení Web Design

Řemesla stavebních webových stránek je neuvěřitelně komplexní s mnoha rychle se měnícími díly. Cílem komunity web design je snížení složitosti, a snížení chybovosti v každé fázi procesu vytváření.

Progresivní vylepšení je takový nápad ve web designu, který má za cíl snížení chyb a poskytují konzistentní uživatelské zkušenosti přes palubu. Koncept má svou vlastní stránku Wikipedia, která ji vysvětluje jako metodu plně přístupný obsah, vykreslení rozšířených funkcí pouze v případě, že je podporován prohlížečem.

Je snadné pochopit progresivní vylepšení, ale ne tak snadné jej aplikovat přímo na vaše projekční práce. Chtěl bych některé pokrýt osvědčených postupů pro postupné zlepšování projektů v reálném světě na pomoci návrhářům myslet udržitelněji na jejich pracovní postup.

1. Porozumění progresivnímu vylepšení

Teorie progresivního zlepšování doporučuje začněte s jednoduchou webovou stránkou , který funguje ve všech prohlížečích, takže to přístupné pro každého návštěvníka. Pokud je to možné, přidejte funkce.

To je opak graceful degradace, který obsahuje všechny funkce ve výchozím nastavení, pak degraduje, když něco nefunguje.

Progresivní vylepšení je lepší pro celkový uživatelský zážitek, protože v jeho jádru načte pouze nezbytné prvky. Každý webový prohlížeč může podporovat text (a obvykle obrázky). Bez CSS budou tyto informace vypadat nevýrazně a bez chuti, ale budou dostupné.

Tento Seznam Apart článek tvrdí, že postupné zlepšování je první s a dynamické komponenty přidané později. Obsah v sémantickém HTML by měl být dodán dříve než cokoliv jiného.

Pokročilé CSS a JavaScript, které používáme dnes, jsou široce podporovány, ale pokud chceme dodržovat zásady progresivního zlepšování, měli by být považováni za luxusní zboží..

Zde je obecný přehled hlavních rysů progresivního vylepšení, které byste měli vzít v úvahu:

• Sémantické značení pro veškerý obsah
• Uživatelé předvolby prohlížeče je třeba respektovat
• Obsah a základní funkce by měly být dostupné všem uživatelům
• Nenápadný JavaScript je načítán pouze v prostředích, které ji mohou podporovat

Technologická omezení vývoje frontendu jsou primárně určena kompatibilitou prohlížeče. Progresivní vylepšení vás vrátí zpět k základům přemýšlení o tom, jak nejjednodušší webová stránka holé kosti může vypadat. Odtud můžete plán pro pokročilejší funkce, jako vlastnosti CSS3.

Ale co prohlížeče, které nepodporují moderní CSS3? To je místo, kde stránky jako Can I Use přijít do hry. Měli byste se rozhodnout, které funkce stojí za implementaci, a rozhodovat cílové skupiny vašich webových stránek.

2. Pobyt v Stylesheets

Většina prohlížečů dnes podporuje všechny základní vlastnosti, které potřebujete. Ale pokročilý CSS3 je stále problémem pro starší uživatele, a progresivní vylepšení nabízí řešení.

Namísto hledání nouzových metod pro udržení těchto nových funkcí se nejprve obávejte řádné struktury uspořádání.

Napište sémantické značení HTML a CSS, které funguje v co největším počtu aktivních prohlížečů (podpora pro staré prohlížeče, jako je podpora IE5, není nutná).

Vezměme si například tento JSFiddle, který používá plováky se dvěma postranními panely (.pevný) a oblastí s tekutým obsahem (.tekutina). Pokud smažete všechny CSS a znovu spustíte kód, všimnete si všeho, co se pěkně vyrovná s prvním sloupcem, pak druhým a nakonec posledním..

Někteří vývojáři by raději měli sloupec obsahu (.tekutina) se objeví nejprve v HTML. Toto je místo, kde progresivní vylepšení přichází do hry a alternativní řešení CSS se stávají životaschopnými.

Dva základní cíle kódu HTML jsou následující:

• Plně sémantické a platné kód
• A konzistentní zkušenosti pro každého

Nejjednodušší cestou k dosažení těchto cílů je začít od ničeho a vypracovat, jako většina progresivních advokátů by to doporučilo.

Pokud váš kód vypadá dobře s vypnutým a povoleným CSS, pak nabízí rozumné řešení pro každého.

Také to stojí za zvážení v jakém okamžiku něco propadnete. Microsoft již zrušil velkou podporu pro IE6, takže uživatelé, kteří používají tento prohlížeč, nemusí být za váš čas.

Ale je tu ještě jedna velká otázka: pokud prohlížeč nepodporuje mé moderní CSS, co mám dělat?

Jednoduše napsat kód, který funguje bez to, a považovat moderní CSS za progresivní vylepšení. To je krása metodiky progresivního zlepšování.

Nepotřebujete nouzové situace, protože jste v podstatě za předpokladu, že ve výchozím nastavení není nic podporováno.

Metody progresivního vylepšení jsou o tom, že je web použitelný i v případech, kdy něco není podporováno - ale pokud je podporováno, tím lépe.

Musíte zvážit jak obsah skutečně proudí bez CSS. Když například zakážu CSS na webu společnosti Transmit, obsah stále teče organicky dolů po stránce.

Ano, je to ošklivé a ano, je to, jako bychom ztratili dvacet let pokroku… ale funguje to.

3. Manipulace s JavaScriptem

Za zmínku stojí, že každý problém JavaScriptu, na který můžete narazit během procesu vývoje, je složitý a jedinečný. Když vytvoříte nový projekt s progresivním vylepšením, měli byste uvést všechny požadované funkce založené na JS a zvážit, jak by mohly pracovat bez JavaScriptu.

To bude vyžadovat spoustu on-line výzkumu najít platná řešení. Aaron Gustafson napsal skvělý blog s řešením různých problémů, jako je nahrazení Ajax meta aktualizací obsahu uvnitř iframe.

Také když vytváříte karty JavaScriptu, je to dobrý nápad použít kotevní spoje s reálnými hodnotami ID. Pokud je JavaScript zakázán, můžete mít stále viditelné a přístupné karty pomocí hodnoty kotvy. Aaron napsal další kus na seznamu Apart, který zahrnuje obecnější přehled o tom, jak byste měli o těchto problémech přemýšlet.

Tady je další příklad. Řekněme, že máte odkaz, který načítá obsah dynamicky. href hodnota je prázdná, protože vše se načítá pomocí JavaScriptu metodou preventDefault ().

Místo toho by bylo moudré nastavit href vlastnictví přejděte na jinou stránku kde se obsah může načíst přirozeně, ale návštěvník vidí tuto stránku pouze v případě, že je zakázán JavaScript.

Progresivní vylepšení je o něco více než JavaScript, ale s vývojem webu se každý rok dále rozšiřuje, není pochyb o tom, že JavaScript hraje významnou roli.

Pracujte za předpokladu, že vše bylo zakázáno, a odtud. To může zahrnovat problémy s vloženými miniaplikacemi, které jsou mimo kontrolu

Zamyslete se také nad funkcemi JavaScriptu, které chybí komplexní podpora prohlížeče. To zahrnuje API fetch, API API, syntaxi funkcí šipek nebo dokonce prohlížeče bez podpory moderních knihoven jako jQuery.

Každá funkce vyžaduje individuální testování s individuálním řešením.

Podstatou progresivně vylepšeného JavaScriptu je vytvářet obsah, který funguje bez skriptování. To může vést k základnímu zážitku uživatele, ale je to v pořádku, pokud je webová stránka použitelná a obsah je přístupný.

Pokud chcete dělat živé testování, můžete typicky vypnout CSS a JavaScript v každém hlavním prohlížeči zjistíte, jak vaše webové stránky fungují. Je také vhodné zvážit použití rozšíření, jako je A-Tester pro shodu WCAG.

JavaScript s progresivním vylepšením je obrovským tématem. Zde jsou některé příspěvky, které vám pomohou hlouběji prohlédnout:

• Progresivní vylepšení! = “Žádný JavaScript”
• Interakce je klíčem: Progresivní vylepšení a JavaScript
• Progresivní vylepšení: Je to o obsahu
• Jak aplikovat progresivní vylepšení, když JavaScript vypadá jako požadavek

Kde progresivní zdokonalení Falls Short

Ačkoli progresivní vylepšení je skvělý nápad pro téměř všechny typy moderních webových stránek, může to prostě být se nevztahují na projekty, jejichž cílem je posunout hranice webových technologií.

Tato metodika například není dobrým řešením pro webové aplikace, které fungují pouze na volání Ajax. Je to dobrá volba pro dostupnost? Ne, samozřejmě že ne. Ale kdyby tomu tak bylo, většina tutoriálů Codropsů by ani neexistovala. Musíš vzpomeňte si na cílové publikum.

Obchodní webové stránky pravděpodobně nemají publikum, které se stará o honosné nové vlastnosti CSS3 perspektivy, ale weboví vývojáři mohou být dokonalým publikem pro tyto pokročilé funkce.

Progresivní vylepšení nestačí pouze pro webové aplikace prostě se nestarají o návrat v čase. Uvědomuji si, že tyto webové aplikace jsou málo a mezi nimi, ale vývojáři milují pokrok, a v některých případech může být rozumné pokračovat v práci s novými technologiemi, kteří nechávají tuláky za sebou..

Jsem zastáncem postupného zlepšování (nebo dokonce ladné degradace, vaší volby) pro obecné webové projekty. Ale také si uvědomuji, že to není ideální řešení pro všechno. Ve skutečnosti neexistuje dokonalé řešení. To vše se redukuje na potřeby publika a cíle projektu.

Další čtení

Pokud neustále budujete webové projekty, měli byste zvážit použití postupného vylepšení pracovního postupu. Je to mnohem jednodušší, než se zdá na první pohled, a to vše začíná základními principy. Většina témat, která obklopují progresivní vylepšení, vyžaduje pouze praxi a testování. Vyzkoušejte návrhy z tohoto článku a zjistěte, co je pro váš pracovní postup nejlepší.

Pokud se chcete dozvědět více o progresivním vylepšení, podívejte se na tyto související příspěvky:

• Porozumění progresivnímu vylepšení
• Progresivní vylepšení: Co to je a jak ho používat?
• Odpor závislý na JavaScriptu: Progresivní vylepšení mýtu