Progressive Enhancement – progresywne ulepszanie

Strategia projektowa dzięki której dostarczamy stronę, aplikację przedstawiającą treść w sposób przejrzysty nie zależnie od czytnika na jakim zostanie wyświetlona.

 

poszczególne warstwy, elementy strony:

  • content, treść – jak wiadomo – content is the king ;)
  • semantyka, metadane, kodowanie danych – html (lub ewentualnie xml, Markdown, BBcode)
  • wygląd, opis prezentacji – css
  • reakcje, zachowanie, programowanie interakcji interfejsu – js

 

Progressive Enhancement

 

zasady Progressive Enhancement:

  • niezależność warstw, całkowite oddzielenie od siebie, podejścia:
    • loose coupling – luźno powiązane – poszczegolne wartswy niewiele lub nic o sobie na wzajem 'nie wiedzą’
    • unobtrusive JavaScript – dyskretny JS
  • komunikacja pomiędzy warstwami za pomocą klas HTML ↔ CSS ↔ JS
  • małe kroki – przechodzenie od rzeczy najprostszych do najbardziej złożonych
  • wyeliminować elementy, atrybuty zdeprecjonowane (http://www.kurshtml.edu.pl/html/elementy_zdeprecjonowane,html.html)
  • stosowanie znaczników które oddają znaczenie elementów:
    • pola formularza zawarte w znacznikach label
    • grupowanie pól formularza za pomocą fieldset, dodanie znacznika legend – ułatwia korzystanie osobom nie widomym
    • znacznik div – nie oddziela logicznych elementów od siebie tylko oznacza fragmenty kodu w celu stylizacji
    • dfn zamiast em czy i
  • identyfikator dla elementów szkieletu (jak nagłówek, stopka, sekcja główna, kolumna kontekstowa)
  • button zamiast input
  • korzystanie z walidatora  i css walidatora
  • selektor body lub html powinien mieć zdefiniowane background, color, font
  • zasada DRY – ang. Don’t Repeat Yourself – nie powtarzanie raz użytego kodu
  • Object Oriented CSS

 

Mobile first

projektowanie serwisu rozpoczynamy od stworzenia strony mobilnej pod kątem dostępnych technologii i funkcjonalności.

Dzięki temu skupiamy się od razu na treści i najważniejszych elementach strony i sukcesywnie rozbudowujemy je wraz ze wzrostem możliwości na kolejnych urządzeniach.

kolejność ładowania/ parsowania css

  1. css globalne – stylowanie formularzy, przycisków, typografi
  2. css desktop
  3. css tablet
  4. css mobile

urządzenia desktop – przetwarzają reguły 1 i 2

urządzenia mobile przetwarzają reguły 1, 2 i 4 – czyli więcej dostają do przetworzenia.

 

W podejściu Mobile first tworzymy pierw style i skrypty globalne, następnie obsługę urządzeń mobilnych i dopiero desktop.

 

THE PROGRESSIVE ENHANCEMENT CHECKLIST

bardzo fajnie opracowane checklisty przez Aaron Gustafson więcej znajdziesz na Adaptive Web Design.

 

kontent

  • unikaj bezmyślnego kopiowania
  • twórz znaczący kontent
  • twórz konwersację
  • planuj dla nieznanego
  • pisz dla prawdziwych ludzi nie dla botów
  • nie wypełniaj tylko pustego miejsca

 

markup i html

  • ucz się na poprzednich błędach
  • podkreśl zawartość
  • oznacz co mówisz
  • sensownie wykorzystaj znaczniki
  • sensowna kalsyfikacja i idenyfikacja
  • zrozum możliwe zagrożenia i jak im przeciwdziałać
  • stosuj Mikroformaty by zminimalizować luki w html
  • stosuj klasyfikację dla grup elementów obsługujących tą samą funkcję
  • identyfikuj elementy orientacyjne

 

design i css

  • twórz serwis, nie podstrony
  • zrozum działanie css
  • rozpocznij od mobile i stwórz responsywność
  • skup się na standardach
  • projektuj defensywnie
  • tylko sensowne ukrywanie treści
  • przemyśl różne media i urządzenia
  • ogarnij podstawowe style
  • podwójnie sprawdź złożone selektory
  • uporządkuj reguły css kaskadowo
  • ukryj zaawansowane reguły css dla starszych przeglądarek
  • warunkowe komentarze do obsługi IE
  • upewnij się że uwzględniłeś alternatywne media i kontekst

 

interakcje i javascript

  • przewidywanie potencjalnych problemów by ich uniknąć
  • określ minimalne wymagania
  • ogranicz straty
  • twórz tylko to co potrzebne
  • opisz co się dzieje
  • pisz kod zawierający deklaratywne instrukcje
  • dostosuj interface
  • nie stosuj styli przed czasem
  • zwiększaj na potrzebę
  • spójrz poza mysz
  • uniezależnij od sieci
  • dyskretny JS – unobtrusive JS
  • cała zawartość i interakcje powinny być dostępne i możliwe do wykonania bez JS
  • użyj JS do dodatkowego, potrzebnego wyróżnienia
  • użyj ARIA (Accessible Rich Internet Applications) dla zwiększenia 'widoczności’ strony dla niepełnosprawnych
  • kontrola nawigacji za pomocą tab dzięki atrybutowi tabindex (tabbing index – indeks tabowania),
    • stosowany do znaczników: a, area, button, input, object, select, textarea
    • przyjmuje wartości liczbowe od 0 do 32767 – kolejność licz to kolejność podświetlania

<a href="http://www.google.com/" tabindex="1">Google</a>

—

 

do poczytania jeszcze:

  • https://www.gov.uk/service-manual/technology/using-progressive-enhancement
  • https://www.gov.uk/service-manual/digital-by-default#criterion-4
  • http://zurb.com/word/progressive-enhancement
  • https://en.bem.info/methodology/

#web development