Najlepsze praktyki progresywnego ulepszania projektowania stron internetowych

Rzemiosło tworzenia stron internetowych jest niezwykle złożone z wieloma szybko zmieniającymi się częściami. Celem społeczności projektantów stron internetowych jest zmniejszyć złożoność, i zmniejszyć potencjał błędu na każdym etapie procesu tworzenia.

Progresywne ulepszanie jest taki pomysł w projektowaniu stron internetowych, który ma na celu zmniejszyć błędy i zapewniają spójne wrażenia użytkownika powszechny. Koncepcja ma własną stronę Wikipedii, która wyjaśnia ją jako metodę w pełni dostępna treść, renderowanie rozszerzonych funkcji tylko wtedy, gdy jest obsługiwane przez przeglądarkę.

Łatwo jest zrozumieć progresywne ulepszanie, ale nie tak łatwo zastosować je bezpośrednio do prac projektowych. Chciałbym trochę pokryć najlepsze praktyki stopniowego ulepszania projektów realizowanych w świecie rzeczywistym do pomagać projektantom w bardziej zrównoważonym myśleniu o swojej pracy.

1. Zrozumienie progresywnego ulepszania

Teoria ulepszeń progresywnych zaleca zacznij od prostej strony internetowej to działa we wszystkich przeglądarkach, tworząc go dostępne dla każdego odwiedzającego. Następnie dodaj funkcje, gdy tylko jest to możliwe.

Jest to przeciwieństwo zgrabnej degradacji, która domyślnie obejmuje wszystkie funkcje, a następnie degraduje się, gdy coś nie działa.

Progresywne ulepszanie jest lepsze dla ogólnego doświadczenia użytkownika, ponieważ w jego istocie jest to ładuje tylko niezbędne elementy. Każda przeglądarka internetowa może obsługiwać tekst (i zazwyczaj obrazy). Bez CSS te informacje będą wyglądać mdłe i bez smaku, ale będą dostępne.

To List Apart artykuł dowodzi, że progresywne ulepszanie jest content-first z style i składniki dynamiczne dodane później. Treść w semantycznym kodzie HTML powinna być dostarczona przed wszystkim innym.

Zaawansowane CSS i JavaScript, których używamy dzisiaj, są szeroko wspierane, ale jeśli chcemy postępować zgodnie z zasadami stopniowego ulepszania, należy je uważać za luksusy.

Oto ogólny przegląd głównych cech progresywnego ulepszania, które powinieneś wziąć pod uwagę:

Znaczniki semantyczne dla wszystkich treści
Użytkownicy preferencje przeglądarki należy szanować
Treść i podstawowa funkcjonalność powinny być dostępne dla wszystkich użytkowników
Dyskretny JavaScript jest ładowany tylko w środowiskach, które mogą to obsługiwać

Ograniczenia technologiczne w rozwoju frontonu zależą przede wszystkim od zgodności przeglądarki. Progresywne ulepszenie pozwala Ci wrócić do podstaw myślenia o tym, jak najprostsza strona gołej kości może wyglądać. Stamtąd możesz zaplanuj bardziej zaawansowane funkcje, jak właściwości CSS3.

Ale co z przeglądarkami, które nie obsługują nowoczesnego CSS3? W tym miejscu pojawiają się takie witryny, jak Can I Use. Powinieneś zdecydować, które funkcje warto wdrożyć i dokonać osądów na docelowej grupie odbiorców Twojej witryny.

2. Posiadanie w arkuszach stylów

Większość dzisiejszych przeglądarek obsługuje wszystkie podstawowe właściwości, których potrzebujesz. Ale zaawansowany CSS3 nadal stanowi problem dla starszych użytkowników, a progresywne ulepszanie oferuje rozwiązanie.

Zamiast szukać metod awaryjnych w celu utrzymania tych nowych funkcji, najpierw zajmij się odpowiednie struktury układu.

Napisz semantyczny znacznik HTML i CSS, który działa w możliwie największej liczbie aktywnych przeglądarek (obsługa starożytnych przeglądarek, takich jak obsługa IE5, nie jest konieczna).

Weźmy na przykład ten JSFiddle, który używa pływaków z dwoma paskami bocznymi (.naprawiony) i obszar zawartości płynu (.płyn). Jeśli usuniesz cały CSS i ponownie uruchomisz kod, zauważysz, że wszystko układa się ładnie w pierwszej kolumnie, potem w drugiej i wreszcie w ostatniej.

Niektórzy programiści woleliby mieć kolumnę treści (.płyn) pojawia się najpierw w HTML. Tu właśnie pojawia się progresywne ulepszanie, a alternatywne rozwiązania CSS stają się opłacalne.

Dwa główne cele Twojego kodu HTML są następujące:

Całkowicie semantyczny i ważny kod
ZA spójne doświadczenie dla wszystkich

Najprostszym sposobem osiągnięcia tych celów jest zacznij od niczego i doprowadzić się do czegoś, jak większość zwolenników postępowej poprawy poleciłoby to.

Jeśli twój kod wygląda dobrze z CSS wyłączonym i włączonym, oferuje rozsądne rozwiązanie dla wszystkich.

Warto również rozważyć w którym momencie upuszczasz wsparcie dla czegoś. Microsoft już zrezygnował z poważnego wsparcia dla IE6, więc użytkownicy korzystający z tej przeglądarki mogą nie być warty twojego czasu.

Ale jest jeszcze jedno wielkie pytanie: jeśli przeglądarka nie obsługuje mojego nowoczesnego CSS, co powinienem zrobić?

Po prostu napisz kod, który działa bez to, i uważaj nowoczesny CSS za ulepszenie progresywne. Oto piękno metodologii progresywnego ulepszania.

Nie potrzebujesz upadków, ponieważ jesteś zasadniczo zakładając, że domyślnie nic nie jest obsługiwane.

Metody ulepszania progresywnego polegają na uczynieniu witryny użyteczną nawet w przypadkach, gdy coś nie jest obsługiwane, ale jeśli jest obsługiwane, tym lepiej.

Musisz wziąć pod uwagę jak rzeczywiście płynie treść bez CSS. Na przykład, gdy wyłączam CSS na stronie Transmit, zawartość nadal przepływa organicznie w dół strony.

Tak, to brzydkie, i tak, wydaje się, że straciliśmy dwadzieścia lat postępu ... ale to działa.

3. Obsługa JavaScript

Warto wspomnieć, że każdy problem z JavaScript, na który możesz się natknąć podczas procesu tworzenia, jest trudny i unikalny. Kiedy budujesz nowy projekt z progresywnym ulepszaniem, powinieneś wymienić wszystkie wymagane funkcje oparte na JS i zastanowić się, w jaki sposób mogą działać bez JavaScript.

Będzie to wymagało wielu badań online, aby znaleźć prawidłowe rozwiązania. Aaron Gustafson napisał świetny wpis na blogu zawierający rozwiązania różnych problemów, na przykład zastąpienie Ajaksu meta odświeżaniem treści wewnątrz ramki iframe.

Ponadto, gdy tworzysz karty JavaScript, dobrze jest użyj linków kotwiczących z rzeczywistymi wartościami identyfikacyjnymi. W ten sposób, gdy JavaScript jest wyłączony, możesz nadal mieć karty widoczne i dostępne dzięki wartości kotwicy. Aaron napisał kolejny utwór na A List Apart, który zawiera bardziej ogólny przegląd tego, jak powinieneś myśleć o tych problemach.

Oto kolejny przykład. Załóżmy, że masz łącze, które dynamicznie ładuje zawartość. The href wartość jest pusta, ponieważ wszystko ładuje się za pomocą JavaScript za pomocą metody preventDefault ().

Zamiast tego rozsądnie byłoby ustawić href własność do wskaż inną stronę gdzie treść może ładować się naturalnie, ale odwiedzający widzi tę stronę tylko wtedy, gdy JavaScript jest wyłączony.

Udoskonalanie progresywne to coś więcej niż JavaScript, ale z rozwojem stron internetowych postępującym co roku, nie ma wątpliwości, że JavaScript odgrywa znaczącą rolę.

Działaj przy założeniu, że wszystko zostało wyłączone, i skaluj stamtąd. Może to obejmować problemy z osadzonymi widżetami, które są poza kontrolą użytkownika