Mobile first & progressive enhancement [PL]

Notatki do improwizowanej prezentacji live.

Na początku był desktop first design

  • era przed mobile, niska świadomość klientów, brak wymagania mobile
  • “projektujemy stronę główną, frontendowiec zrobi resztę”
  • zmiana sposobu myślenia o tworzeniu projektu

Responsive web design

RWD to nie tylko smartfon.

Kiedy podejście mobile first jest lepsze i dlaczego (prawie) zawsze?

  1. Statystyki (przewaga mobile, mobile rośnie w siłę i stale się umacnia).
  2. Grupa docelowa (produkt stricte desktopowy?).
  3. SEO i mobile first index.
  4. Wypełnianie pustego miejsca vs. brak miejsca na zbędne rzeczy.
  5. UX (mobile jako świetny fundament i produkt sam w sobie, po “kastracji” niekoniecznie).
  6. Co na to topowe frameworki (Bootstrap, Foundation)?
  7. Mobile first to więcej niż graphic design (content design, SEO, realizacja celów: sprzedażowe, wizerunkowe, kreowanie wizerunku marki).

Progressive enhancement i graceful degradation

  • progresywne ulepszanie
    • szybkość wczytywania (above the fold)
    • uznane za dobre kierunki w branży
    • zacząć od najprostszej wersji (statyczne elementy np. informacje o firmie, CTA, bez JS/CSS)
      • Content is The King™
      • HTML
      • prezentacja – CSS
      • zachowanie – JS
      • niezależność warstw
    • teoretycznie jeżeli zrobiony w ten sposób, to strona będzie wspierania przez wszystkie przeglądarki
  • wdzięczna degradacja

Treść → semantyka i metadane (HTML) → prezentacja (CSS) → zachowanie (JavaScript)

  • niezależność warstw i metoda małych kroków
  • przechodzenie od rzeczy najprostszych do bardziej złożonych
  • łatanie bugów?

Mobile first jako progressive enhancement designu

  • Konkurencja też ma ładne strony. Jak się wyróżnić? UX, UX i jeszcze raz UX
  • Dostępność (accessibility)
  • ROS jako przykład mobile first
  • Ryzyko zastępowania natywnych funkcjonalności przez JavaScript (linki bez href, buttony bez type, formularze bez form, submit itd.)
  • Progressive enhancement for the rescue

Newsletter

Podobał Ci się ten wpis? Nie przegap kolejnej dawki przydatnej wiedzy! Tylko konkrety i najlepsze treści ze świata UX, web developmentu i produktywności. Głównie szybkie treści dla zajętych ludzi :).

Twoje dane osobowe będą przetwarzane w celu obsługi newslettera przez DamianWajer.com na zasadach opisanych w polityce prywatności. W każdej chwili możesz zrezygnować.

Komentarze

Jeśli masz jakieś przemyślenia lub komentarze, daj znać na LinkedIn lub wyślij wiadomość na stronie kontakt.