Responsywność (Responsive Web Design, RWD) to temat nieodzowny dla każdego designera stron internetowych. W obecnych czasach większość osób korzysta z różnorodnych urządzeń mobilnych, więc tworzenie produktów cyfrowych, które dynamicznie reagują na zmiany wielkości wyświetlacza to nie tylko opcja, ale wręcz konieczność!
RWD pozwala na dostosowanie wyglądu i układu strony do różnych rozmiarów ekranów, bez względu na to, czy użytkownik korzysta z komputera, tabletu czy smartfona.
W tym blogpoście wypowiada się Magda, UX Designerka z kilkuletnim doświadczeniem.
🦸🏼 Strony www + Elastyna?
Elastyna, jak mówi jej superbohaterski pseudonim, jest bardzo elastyczna i potrafi się świetnie rozciągać — tak, aby skutecznie walczyć z przestępcami.
W obecnych czasach, przy tak dużej ilości urządzeń i różnych ich rozdzielczościach oraz szerokościach ekranu strony muszą być odpowiednio zaprojektowane, tak aby dostosowywały się do danego urządzenia. Muszą się kurczyć i rozciągać, dokładnie tak jak bohaterka serii „Iniemamocni” – Elastyna!
Większość z was już pewnie miało przyjemność poznać Tomka Biskupa, który poprowadził świetny kurs web i UI designu – Digital Designer. Dla tych, którzy jeszcze nie mieli okazji, serdecznie polecam jak najszybciej nadrobić zaległości.
To właśnie na podstawie jednej z jego lekcji nakreślę w tym blogpoście temat responsywności, z którym projektanci i projektantki spotykają się na co dzień.
🤸🏼 Responsywność, ach ta responsywność
Responsywne projektowanie stron internetowych (ang. responsive web design, RWD) to taki sposób projektowania strony, aby jej układ automatycznie dostosowywał się do wielkości urządzenia, na jakim jest wyświetlana.
Dzisiaj to chleb powszedni i właściwie internet bez RWD nie istnieje. Strony, które się nie skalują, to naprawdę archaiczne twory, którym przydałaby się niezła metamorfoza 💇🏼♀️
👉 O responsywności (i innych zasadach projektowania) dowiesz się z blogpostu “🌐 Web design – 5 zasad projektowania”.
🏫 Mądre słówka do zapamiętania
Viewport – obszar przeglądarki internetowej, w którym wyświetlana jest strona internetowa. Szerokość viewport’u determinuje, w jaki sposób strona internetowa wyświetla treści.
Ciekawostka – w języku CSS (który jest odpowiedzialny za stylowanie stron internetowych), istnieją dynamiczne jednostki viewport height (vh) i viewport width (vw), które zależne są właśnie od wymiarów okna przeglądarki w danym momencie. Więc dana sekcja na stronie nie musi mieć stałej wysokości wyrażonej w pikselach, może się zmieniać w zależności od viewportu.
Breakpoint – moment przekroczenia progu szerokości viewport’u wymierzonego w pikselach.
🧠 Więcej mądrych słówek? Jaszka! Znajdziesz je w naszym ✨ Słowniczku Designera. ✨
🕵🏼 Eksploruj to, co już jest!
Tomek Biskup w swojej minilekcji podaje ciekawy przykład strony hedron.space, na którym pokazuje, jak zachowuje się layout, kiedy zaczynamy zmieniać szerokość okna przeglądarki.
Warto zrobić to samemu!
Najlepszym sposobem na to, żeby nauczyć się mechanizmów, za pomocą których moduły stron internetowych składają się przy zwężaniu viewportu jest obserwowanie dobrych projektów i analiza tego, jak dana strona zachowuje się na różnych rozdzielczościach.
Jesteś obecnie na jakiejś stronie? Przeglądasz ciuszki na Zalando? Zamawiasz pizzę?
Chwyć bok przeglądarki z jednej albo z drugiej strony i zacznij ją kurczyć, albo rozciągać. Obserwuj jak się zachowuje, jak zmienia się wielkość tekstu, zdjęć, layout.
Staraj się „męczyć” te strony, zmieniając ich wielkość, bo to pozwoli Ci zaobserwować pewne schematy i zacząć lepiej projektować.
🤹🏼 Ułatwiacze życia
Nigdy w projektowaniu nie projektujemy płynnego procesu.
Skupiamy się na kilku stałych breakpointach. Zastanawiasz się pewnie, w jaki sposób możemy zobaczyć, jak strona się będzie zachowywać na konkretnych breakpoint’ach?
Można do tego wykorzystać:
- Windows Resizer – rozszerzenie do przeglądarki Chrome, pozwala wybrać rozdzielczość viewport’ów, w której bedzie wyświetlana strona.
Jeżeli chodzi o mobile, to warto skorzystać z DevTools, czyli tak zwanej konsoli deweloperskiej, kryjącej się pod przyciskiem F12. Wystarczy uruchomić opcję Simulator, żeby zasymulować, jak nasza strona będzie wyświetlała się w danym urządzeniu (od iPada po telefon Samsung).
💻 Jak ułatwić życie programistce i programiście?
Poniżej możesz skorzystać z zestawu rozdzielczości viewport-ów, który z pewnością pomoże programistkom i programistom:
- Desktop 1440px
- Tablet landscape 1024px i portrait 768px
- Mobile portrait między 390 a 375 px
👫🏼 Razem raźniej
Weź sobie mocno do serduszka, że budowanie projektów cyfrowych to praca zespołowa 👩🏼🔧🧑🏼🔧Przede wszystkim staraj się rozmawiać z osobami, które są zaangażowane w tworzenie produktu. No i najważniejsze – nie bój się porozmawiać z developer(k)ami.
Bo przecież wszyscy gramy do tej samej bramki!
Pytaj:
- jakie są ich oczekiwania,
- jakie projekty i wersje trzeba dostarczyć, żeby zbudować responsywną stronę,
- przy trudniejszych rozwiązaniach czy komponentach pytaj, co oni mogą zaproponować z frontendowego punktu widzenia (to ważne zwłaszcza przy tabelach, kompleksowych listingach czy bardziej szalonych kompozycjach layoutu).
Rozmowa może Ci wyjść tylko na dobre. Sama uwielbiam współpracować z developer(k)ami – można się tyle od nich nauczyć!
Jestem przekonana, że w tej współpracy uczymy się od siebie nawzajem. A z każdą taką współpracą kolejny projekt idzie szybciej i przyjemniej!
⚒ Siatka kolumnowa w Figmie
No dobrze, wszystko brzmi super, jednak proces skalowania zawartości strony internetowej pomiędzy różnymi rozdzielczościami na początku może wydawać się dość skomplikowany.
Dlatego też — krok po kroku.
Zacznijmy od:
- **Siatki kolumnowej** (column grid) – pozwalającej w najbardziej klasyczny sposób organizować layout’y.
Parametry, których możesz się trzymać na początku:
- Desktop 1440 px : Column - 12, Margin 40 px, Gutter 20 px
- Tablet landscape 1024px: Column 12, Margin 20px
- Tablet portrait 768px: Column 6, Margin 20px
- Mobile: Column 2, Margin 16px
A później, to już eksploruj!
🎨 Jak żyć (projektować)?
Przede wszystkim wdech i wydech. Nie da się wszystkiego opanować od razu. Tomek w swojej lekcji radzi, aby obserwować dobre projekty i analizować, w jaki sposób pracują, jak się zmienia layout, wielkość tekstu, nawigacja na różnych rozdzielczościach.
Najlepiej zacznij od zaraz, i nie muszą to być jakieś wyszukane strony. Sprawdzaj to, z czego korzystasz na co dzień. Eksploruj wszystko, co się da i gdzie się da.
Nie pożałujesz, zaufaj! Najciekawsze rozwiązania zapisuj lub skrinszotuj!
Powodzenia w „męczeniu” stron internetowych 🤞🏻
A jeśli szukasz porządnej dawki wiedzy, to koniecznie zapisz się na nasze wideo lekcje projektowania zupełnie za friko! 📺 Znajdziesz je pod tym linkiem.
