Kompletny przewodnik po Progressive Enhancement
Przez lata projektanci stron internetowych stosowali pełne wdzięku zasady degradacji, aby zapewnić, że odwiedzający w starszych przeglądarkach mogą przynajmniej zobaczyć zawartość na swoich stronach internetowych, nawet jeśli nie widzą dokładnie tego, co zamierzał projektant.
Wrażliwa degradacja pozwala projektantom projektować najnowsze i najlepsze przeglądarki bez całkowitego zrażania tych, którzy używają starszych wersji przeglądarek.
I dlatego, że osoby ze starszymi przeglądarkami często miały mniej niż optymalną wygodę użytkowania, nie zniechęciły projektantów do skupienia się wyłącznie na najnowszych technologiach i technikach, racjonalizując fakt, że osoby korzystające ze starszych przeglądarek były albo do nich przyzwyczajone, albo po prostu je uaktualniały.
Progresywne ulepszenie daje nam lepszą opcję. Zamiast skupiać się na technologiach i wsparciu przeglądarki, PE skupia się na treści.
Jak większość projektantów na pewno się zgodzi, treść jest najważniejszą częścią praktycznie każdego projektu strony internetowej. Ale wielu projektantów nie w pełni rozumie postępowe ulepszanie, jak to działa i dlaczego jest lepszym modelem niż zgrabna degradacja.
Czytaj dalej, aby uzyskać odpowiedzi na te pytania i informacje na temat korzystania z funkcji stopniowego ulepszania w następnym projekcie strony internetowej.
Kto korzysta z Progressive Enhancement?
Wielu projektantów uważa, że ulepszanie progresywne przynosi korzyści tylko tym użytkownikom, którzy korzystają z przestarzałych przeglądarek, ale inni użytkownicy również korzystają. Mobilne przeglądarki najprawdopodobniej w pełni wykorzystują progresywne ulepszenia. Przyczyny tego są dwojakie. Po pierwsze, przeglądarki mobilne, które nie obsługują CSS lub JavaScript, nadal mogą wyświetlać zawartość Twojej witryny. Podczas gdy większość współczesnych przeglądarek smartfonów obsługuje przynajmniej jedną z nich, nie wszystkie przeglądarki obsługują podstawowe telefony komórkowe.
Drugi sposób, w jaki korzystają przeglądarki mobilne, polega na tym, że witryny zbudowane z progresywnym ulepszeniem mogą łatwiej włączyć wersję mobilną. W końcu fundamentowy HTML będzie działał niezależnie od warstw CSS na nim ułożonych. Tworzenie oddzielnego arkusza stylów dla przeglądarek mobilnych nie wymaga wiele dodatkowej pracy.
Czytniki ekranu mają znacznie łatwiejszy czas, jeśli podstawowy HTML jest dobrze skonstruowany i semantyczny. Dzięki temu twoja strona stanie się bardziej dostępna dla tych, którzy używają czytników ekranu. Wyszukiwarki mogą łatwiej skanować dobrze sformatowany HTML niż słabo kodowane strony, co może oznaczać znacznie lepsze pozycjonowanie w wyszukiwarce dla Twojej witryny.
Inne zalety stopniowego ulepszania
Oprócz natychmiastowych korzyści wynikających z poprawy komfortu użytkowania witryny zbudowane z progresywnym ulepszeniem są na ogół łatwiejsze w utrzymaniu niż inne witryny.
Ponieważ podstawowa treść i funkcjonalność są całkowicie oddzielone od wizualnych elementów strony, wprowadzenie zmian w wyglądzie witryny nie powinno nawet wpłynąć na sposób działania witryny ani na zawartość, którą zawiera. Zmiana wyglądu witryny jest o wiele łatwiejsza z tego powodu. Wszystko, co musisz zrobić, to zmienić swoje pliki CSS.
Szczerze mówiąc, nie powinniśmy przeoczyć korzyści, jakie daje strona, którą można oglądać w najszerszej liczbie przeglądarek.
Chociaż nie wszyscy dostają identyczne wrażenia, fakt, że ktoś używa przestarzałej lub przestarzałej przeglądarki może nadal wyświetlać treść witryny, może prowadzić do większej liczby odwiedzających lub klientów. Witryny, które przyjmują podejście, które zaczyna się od progresywnego ulepszania, nie muszą wykonywać żadnych dodatkowych prac, aby było to możliwe.
Buduj od środka
Progresywne ulepszenia nie koncentrują się na kompatybilności przeglądarki w taki sam sposób, jak w przypadku pełnej degradacji. Zamiast tego koncentruje się najpierw na treści, a następnie na prezentacji tej treści, a następnie na każdym skryptowaniu. W ten sposób niezależnie od urządzenia lub przeglądarki, z której korzysta odwiedzający, będą oni mogli oglądać Twoje treści bez żadnych problemów.
Progresywne ulepszanie może również przynieść korzyści w zakresie dostępności, a nawet optymalizacji pod kątem wyszukiwarek. Rozpoczynając od dobrze skonstruowanego, semantycznego HTML, zapewnisz dobrą podstawę do zbudowania projektu witryny. I ten podstawowy HTML jest łatwo interpretowany przez czytniki ekranu i pająki wyszukiwarek.
Najpierw umieść zawartość
Ilekroć rozpoczynasz nowy projekt strony internetowej, powinieneś najpierw skoncentrować się na strukturze treści. Tworząc dobrze skonstruowany, semantyczny HTML jako podstawę Twojej witryny, będziesz mieć łatwiejszy czas na poziomie prezentacji swojego projektu.
Przemyślany HTML ma tę zaletę, że nie ma potrzeby używania warstw prezentacji. Oznacza to, że czytniki ekranu, roboty wyszukiwarek i te w podstawowych przeglądarkach mobilnych będą mogły wyświetlać Twoje treści bez rozpraszających problemów związanych z formatowaniem.
Powyżej widać, jak MSNBC zachowuje całą zawartość w przybliżeniu w tej samej kolejności, nawet bez CSS. Strona jest doskonale użyteczna nawet bez warstwy prezentacji.
Podczas gdy struktura witryny będzie zależała od zawartości danej witryny, istnieją pewne wytyczne, których powinieneś używać w przypadku podstawowych witryn.
Zacznij od nagłówka, głównej nawigacji, a następnie treści. Po treściach warto umieścić dodatkowe informacje na pasku bocznym lub łącza, a następnie informacje o stopce.
W ten sposób informacje identyfikujące twoją witrynę są wyświetlane najpierw, a następnie nawigacja (w przypadku, gdy ktoś chce przejść bezpośrednio do innej strony, takiej jak kontakt lub strona), a następnie przechodzi bezpośrednio do treści, która prawdopodobnie na co większość osób znajduje się w Twojej witrynie. Dostosuj ten model do potrzeb swojej witryny, ale zawsze pamiętaj o tym, co będzie najbardziej interesujące dla użytkowników i umieść go tak blisko górnej części kodu, jak to możliwe.
Upewnij się, że każda funkcja w twojej witrynie jest możliwa w tej warstwie podstawowej. Oznacza to, że formularze i aplikacje powinny nadawać się do użytku przy użyciu skryptów HTML i skryptów po stronie serwera. Chociaż prawdopodobnie funkcjonalność nie będzie tak dobrze zaprezentowana, jak chcesz lub jako przyjazna dla użytkownika, powinna być użyteczna na minimalnym poziomie.
Prezentacja jest następna
Po ustawieniu kodu HTML i podstawowych funkcji będziesz chciał przejść do elementów prezentacji. Zdecydowana większość przeglądarek, w tym wiele przeglądarek mobilnych, obsługuje CSS (choć nie wszystkie obsługują każdy aspekt CSS, szczególnie CSS3). Poziom prezentacji powinien poprawić treść. Powinno to ułatwić przeglądanie i używanie oraz polepszenie komfortu użytkowania.
W pewnym stopniu możesz mieć więcej niż jedną warstwę ulepszenia CSS. Pierwsza powinna skupiać się na podstawowych stylach rozpoznawanych przez praktycznie każdą nowoczesną przeglądarkę. Twój układ, typografia i schemat kolorów powinny być zawarte w tej warstwie wraz z innymi opcjami stylistycznymi.
Następnie dodaj kolejną warstwę, która korzysta z bardziej zaawansowanych właściwości, które mogą nie być obsługiwane przez każdą przeglądarkę, ale zwiększy komfort użytkowników korzystających z przeglądarek z obsługą.
JavaScript powinien być ostatni
Czasami wydaje się, że JavaScript jest używany praktycznie w każdej nowej stronie internetowej. JavaScript może znacznie przyczynić się do użyteczności witryny i aplikacji internetowych.
Ajax zrewolucjonizował sposób działania wielu witryn i wprowadził ogromną różnicę w tym, co teraz robimy online. Twoja witryna lub aplikacja powinna działać bez JS. Zawsze powinna istnieć alternatywa skryptowa HTML lub serwerowa, zwłaszcza gdy mówimy o ogólnych stronach internetowych, a nie aplikacjach internetowych.
Upewnij się, że twoja strona jest dostępna bez JavaScript. Podczas gdy większość użytkowników internetu ma teraz włączoną obsługę JS w swojej przeglądarce, wciąż są przypadki, w których JavaScript jest niepożądany. Nie każda przeglądarka mobilna ma dobre wsparcie dla JavaScript. Często nie jest dostępny dla czytników ekranu. I są ludzie, którzy wciąż nie mają włączonej obsługi JavaScript w swoich przeglądarkach.
Jak widać na poniższych zrzutach ekranu, nie ma żadnej utraty funkcjonalności między wersją strony internetowej aplikacji Alfred z obsługą JavaScript a tą z wyłączonym JavaScriptem. Jedyną różnicą jest to, że Warunki są zakotwiczone na dole strony, a nie otwierane w oknie modalnym po kliknięciu łącza. Ale w obu przypadkach są połączone i w pełni czytelne.
Oto w pełni funkcjonalna wersja strony z oknem modalnym.
Oto wersja z wyłączoną obsługą JavaScript, a warunki i zasady pojawiają się tuż nad stopką. Nadal jest linkowany z tego samego miejsca w treści.
Wdrażanie Progressive Enhancement
Mówiliśmy o PE na powyższym poziomie teorii. Ale przyjrzyjmy się praktycznym aspektom wdrożenia go na projekcie strony internetowej. Pierwszą rzeczą do zrobienia jest dowiedzieć się architektury informacji dla Twojej witryny.
Sprawdź dostępne treści i sposób ich uporządkowania. Utwórz kilka szkieletów, aby pokazać, jak chcesz pokazać zawartość, rozmieszczenie różnych elementów itp. Ustal priorytety na tym etapie, co powinno się znajdować najbliżej górnej krawędzi kodu (najważniejsze elementy) i co może być niższe.
Ten etap architektury informacji jest niezbędny przy stopniowym ulepszaniu. Gdy już wiesz, dokąd chcesz się udać, możesz rozpocząć kodowanie. Upewnij się, że ustawiłeś kod HTML we właściwej kolejności, zgodnie z tym, co najważniejsze. Nie musi to idealnie pasować do kolejności, w jakiej rzeczy pojawiają się na ukończonej, stylizowanej stronie internetowej, ale prawdopodobnie nie będzie zbyt daleko (nagłówek na górze, treść w środku, stopka na dole).
Upewnij się, że kod HTML, który tu kodujesz, jest semantyczny. Użyj właściwego , , tagi itp., a także odpowiednio nazywać elementy div, w których pojawia się treść. To nie tylko czyni go bardziej dostępnym, ale także ułatwia utrzymanie kodu i kodowanie kodu CSS.
Będziesz także chciał kodować w dowolnej funkcjonalności w tym momencie za pomocą skryptów po stronie serwera. Podczas gdy Twoja ostateczna strona może używać Ajax do podstawowej funkcjonalności, nadal na wszelki wypadek warto mieć kopię zapasową po stronie serwera.
Po zakończeniu podstawowego HTML będziesz chciał przejść do warstwy prezentacji. Zajmij się tym w dużym stopniu, podobnie jak projekt dowolnego projektu strony internetowej. Ale upewnij się, że podczas kodowania CSS utrzymujesz, że nie każda własność CSS będzie działała w każdej przeglądarce. Upewnij się, że nawet jeśli niektóre selektory nie działają, Twoja ogólna prezentacja nie będzie miała wpływu.
Trochę zgrabnej degradacji może być odpowiednia dla niektórych twoich CSS, w przypadkach, gdy naprawdę chcesz użyć określonej techniki, która nie jest szeroko obsługiwana. Nie ma nic złego w korzystaniu z niego selektywnie, w szczególnych przypadkach. Jednak celem jest poleganie na dobrym, opartym na standardach kodowaniu i semantycznych znacznikach, aby zbędna degradacja była niepotrzebna.
Trochę debatowano nad tym, czy dobrym pomysłem jest używanie wielu arkuszy stylów do progresywnego ulepszania. Oddzielenie różnych aspektów prezentacji (układu, typografii, koloru itp.), A także różnych arkuszy stylów dla takich elementów, jak układy wydruku lub układy mobilne, może mieć sens, szczególnie jeśli twój arkusz stylów jest długi lub skomplikowany.
Oddzielne arkusze stylów ułatwiają znalezienie określonego elementu i mogą ułatwić i utrudnić utrzymanie witryny. W końcu, jeśli chcesz tylko zmienić kolor, łatwiej jest otworzyć arkusz stylów kolorów i znaleźć wszystkie wystąpienia tego koloru, i wiesz, że niczego nie przeoczyłeś. Ale załóżmy, że chcesz zmienić kolor i typografię określonego rodzaju elementu na stronie (tak jak wszystkie twoje H1 lub linki na pasku bocznym). Aby wprowadzić zmiany, musisz otworzyć wiele arkuszy stylów. Niezależnie od tego, czy korzystasz z wielu plików CSS, czy nie, sprowadzasz się bardziej do osobistego wyboru niż cokolwiek innego.
Gdy kod CSS zostanie zakodowany i wszystko zostało przetestowane, nadszedł czas na dodanie skryptów po stronie klienta. W tym momencie Twoja witryna powinna działać z lub bez JavaScript. Ale dodanie JS może znacznie poprawić wygodę i zadowolenie użytkowników. Po dodaniu wszystkich niezbędnych skryptów koniecznie przetestuj witrynę z wyłączonym skryptem, aby upewnić się, że wszystko działa poprawnie.
Przekonanie swoich klientów
Pracując nad własnymi, osobistymi projektami stron internetowych, stopniowe ulepszanie jest czymś, co można wdrożyć bez problemu. Jednak w kontaktach z klientami może być nieco trudniej. Wielu klientów wciąż obstaje przy tym, że ich strona internetowa musi wyglądać dokładnie tak samo w każdej przeglądarce, z której kiedykolwiek korzystali. Zawsze.
Wyjaśnij korzyści progresywnego ulepszenia swoim klientom. Powiedz im, że jest to szybsze i tańsze, ponieważ projektujesz witrynę z myślą o stopniowym ulepszaniu, a ich użytkownicy prawdopodobnie nie będą się tym przejmować, dopóki zawartość będzie dostępna.
Jeśli nadal będą się opierać, powiedz im, że musisz odpowiednio dostosować swoją ofertę, aby zrekompensować dodatkowy czas kodowania i wymagany wysiłek.
W wielu przypadkach, gdy klient widzi, że progresywne ulepszenie pozwoli zaoszczędzić pieniądze bez szkodliwego wpływu na odwiedzających, są bardziej niż szczęśliwi, że zaprojektowali swoją witrynę w ten sposób.
Przypadkowe stopniowe ulepszanie
Jestem pewien, że niektórzy z was czytają ten artykuł i myślą: "Ale w ten sposób i tak projektuję strony internetowe!" Wielu projektantów projektuje swoje strony internetowe wokół zawartości, upewniając się, że każda warstwa jest funkcjonalna przed dodaniem kolejnego. warstwa.
Ich HTML jest dobrze skonstruowany, ich CSS działa jako całość, ale wciąż wygląda dobrze, nawet jeśli jeden lub dwa elementy nie działają poprawnie, a nawet bez skryptów po stronie klienta, wszystko nadal działa.
Niektórzy projektanci w naturalny sposób stosowali progresywny styl projektowania stron internetowych. Dla tych projektantów ten artykuł wygląda jak stary kapelusz.
Ale dla tych z was, którzy przyjmują przeciwne podejście, albo z pełną gracją degradacją, albo po prostu projektując na najniższy wspólny mianownik i nie zawracając sobie głowy bardziej zaawansowanymi technikami, rozważcie stopniowe ulepszanie swojego następnego projektu.
Napisany wyłącznie dla WDD przez Cameron Chapman .
Czy automatycznie projektujesz witryny z postępowym ulepszeniem? A może wolisz przyjąć zgrabną metodę degradacji? Podziel się swoimi strategiami w komentarzach!