Responsive Design Workshops – creativestyle – Monachium

Dwa tygodnie temu uczestniczyłem w warsztatach Responsive Web Design prowadzonych przez Vitaly’ego Friedmana. Warsztaty zostały zorganizowane przez Creativestyle i odbyły się w naszej siedzibie w Monachium. Wraz z prawie 30 osobami spędziłem 10 niesamowitych godzin, rozmawiając na temat różnego rodzaju technik, rozwiązań, wzorców projektowych oraz użytecznych narzędzi kształtujących pracę nad RWD.

Vitaly, redaktor naczelny Smashing Magazine, znakomicie wypełnił swoje zadanie, poruszając wiele fascynujących tematów. Kiedy zaczynasz interesować się projektowaniem stron internetowych, orientujesz się, że w tej sferze przewija się wiele tematów, ale w rzeczywistości nie zaznajamiasz się z nimi szczegółowo. Osobiście uważam, że zawsze dobrze jest poświęcić trochę czasu na to, aby coś dorzucić, sięgnąć głębiej i omówić szerzej dane kwestie czy rozwiązania. A takie warsztaty stanowią doskonałą okazję dla osób, które podzielają moją opinię.

W trakcie warsztatów RWD zorganizowanych przez Creativestyle poruszono naprawdę wiele tematów. Nie wchodząc zbytnio w szczegóły, omawialiśmy trzy główne zagadnienia:

1. Projektowanie i UX

2. Wyzwania techniczne

3. Responsive Web Design (RWD): za i przeciw

Gdybym miał wskazać najbardziej interesujące kwestie, zdecydowanie zwróciłbym uwagę na:

  • Atomic Design Brada Frosta – wielu ludzi mówi, że to podejście naprawdę się sprawdza. Na pewno wkrótce je wypróbuję!
  • Przewodniki stylu (Styleguides) – istnieje wiele narzędzi pomagających w tworzeniu przewodników stylu i sądzę, że byłyby one bardzo przydatne przy realizacji projektów, nad którymi obecnie pracujemy. Przewodniki stylu pomagają także w dostarczaniu klientom projektów typu responsywnego.
  • Typografia responsywna, która wymaga uwzględnienia wielu zmiennych, rozmiarów ekranów oraz odległości odczytu. Zwykle jest to dobre rozwiązanie w przypadku urządzeń mobilnych.

– body {font-size: 100%; }

– line-height: 1.46;

– line-length ÷ line-height = 24.9;

– <p> spacing ÷ line-height = 1.43;

– use the keyphrase agh!iIl10O to test

  • Tworzenie optymistycznego interfejsu. Oznacza to taki interfejs, który natychmiast pokazuje użytkownikowi wyniki. Można to osiągnąć za pomocą imitowania, wstępnego ładowania, wstępnego pobierania i tak dalej.
  • Tworzenie responsywnych tabeli. Czasami lepiej ukryć niektóre kolumny. Filtruj lub po prostu pokazuj inną prezentację danych.
  • Ikony: zwiększa się zastosowanie SVG. Ogólnie ikony w formacie SVG przynoszą lepsze, bardziej niezawodne rezultaty w porównaniu z ikonami w postaci fontów.

Korzystaj z Grumpicon, SVG sprites, SVG Stacks.

  • Wprowadzanie na urządzeniach mobilnych: Pisanie jest trudne i zajmuje dużo czasu. Pomóż użytkownikowi oszczędzać czas dzięki auto uzupełnianiu, sprytnej domyślnej zawartości oraz dobremu wyborowi form komponentów. Tę technikę doskonale omawia Luke Wroblewski.
  • Flexbox – składnia jest być może skomplikowana, ale we współczesnych przeglądarkach to działa. Flexbox rozwiązuje wiele powszechnych problemów związanych z layoutem. Przykłady można zobaczyć tutaj.
  • Responsywne obrazy: Użyj Picturefill https://github.com/scottjehl/picturefill – Version 2  będącego ścisłym polyfillem elementu obrazu, umożliwiającym aktualizację w przyszłości!
  • Prędkość: korzystaj z SPDY / HTTP 2.0, ponieważ daje darmowe korzyści
  • Responsywne emaile: to możliwe! Wyświetl: tabela-* właściwości, aby zmienić kolejność zawartości.

Poruszono jeszcze wiele innych tematów. Zadziwiające jest to, że prawie codziennie tworzone są nowe narzędzia, techniki oraz rozwiązania, a ludzie się nimi ze sobą dzielą.

I niech tak pozostanie, aby sieć – responsywna sieć – stawała się jeszcze lepszym miejscem.

 

 

pluswerk