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

 

 

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/