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

Podziel się

Jeśli podobał Ci się ten artykuł, może warto podzielić się z innymi?

https://www.damianwajer.com/blog/mobile-first-progressive-enhancement/

Pozostańmy w kontakcie

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 :).

Nie chcesz zostawiać e-maila?

Zobacz inne opcje pozostania w kontakcie.