Wprowadzenie

Witaj w kolejnym kursie dla front-end developerów, który przygotowaliśmy na Kodologii. W tym kursie dowiesz się czym jest słynneRWD, czyliResponsive Web Design, poznasz media query, viewport i dobre praktyki, jakie powinieneś zastosować w swoim kodzie. Dowiesz się jak dobrze przygotować layout pod urządzenia mobilne, ale także, jak nie przesadzić z używaniem media query. W ostatnim rozdziale poznasz nowinki i ciekawostki, których możesz użyć w swoich pracach. Gotowy? Więc zaczynajmy!

Czym jest Responsive Web Design?

Jest to tak naprawdę technika projektowania strony w taki sposób, aby jej wygląd i schemat dopasowywał się do każdego urządzenia na której może być wyświetlany. Działa to oczywiście w dwie strony. Layout powinien zostać dobrze wyświetlony zarówno na urządzeniu mobilnym, laptopie jak i na ekranie FullHD czy coraz częściej 4K. Zwróć uwagę, że coraz więcej telewizorów z opcją Smart TV posiada również wbudowane przeglądarki internetowe.

Jeśli jednak zagłębisz się w czeluści internetu, możesz znaleźć również pojęcieAdaptive Web Design. Niestety bardzo często jest ono mylnie uważane za pełnoprawne RWD. Dlaczego tak nie jest? Z zasady responsive web design jest layoutem który płynnie zmienia swoją strukturę i nie ma layoutów pisanych pod konkretne szerokości ekranu czy pod konkretne urządzenia. Layout powinien zawierać breakpointy w miejscach, w których wymaga tego sam layout, a nie urządzenie dostępne na rynku.

Adaptive Web Design jest techniką przystosowania layoutu do kilku najpopularniejszych wielkości ekranów dostępnych na rynku. Jest to technika praktycznie bezużyteczna w dzisiejszych czasach gdyż mnogość dostępnych modeli na rynku nie tworzy nam stałej siatki breakpointów, na której moglibyśmy polegać. Urządzenia mobilne mają bardzo zróżnicowane wielkości ekranów i rozdzielczości, a zatem ciężko byłoby dostosować layout pod konkretne urządzenia, nie zwracając uwagi na całą resztę.

Czy można dodać responsywność do istniejącego layoutu?

Oczywiście, że tak. Jednak otrzymując kod starego projektu warto ocenić, czy jest to opłacalne podejście. Bardzo często może okazać się, że czas który będziesz musiał poświęcić na przerobienie starego projektu okaże się dłuższy albo bardzo zbliżony do przepisania całego projektu od początku, co może poprawić wiele innych aspektów jej użyteczności czy pomoże w pozycjonowaniu strony. Warto zatem przemyśleć czy nie lepiej w takim momencie przepisać layout strony od nowa, wdrażając wiele poprawek i ulepszeń.

Breakpointy

Jak zatem zapisać breakpointy, czyli miejsca załamania layoutu i zmiany stylów dla elementów? Musimy zapisać je w taki sposób, aby elementy pod żadnym pozorem nie wystawały poza szerokość ekranu. Jest to bardzo niepożądane i nieakceptowalne przy stronach responsywnych. Kolejno wszystkie breakpointy powinny mieć zastosowanie tam gdzie layout się zmienia, a nie tam gdzie pojawia się nowa grupa urządzeń. Bardzo często stosowanymi breakpointami są480px,768px,992pxi1200px. Takich używa m.in. jeden z najpopularniejszych frameworków CSS -Bootstrap, o którym będziesz mógł przeczytać nieco więcej w dodatku.

Nie musisz się jednak sugerować się powyższymi wartościami. Powinieneś dostosować je do własnych zastosowań. Pamiętaj jednak, że nie warto przesadzać i robić zbyt częstych zmian. Dowiesz się jak tego uniknąć w lekcji nr 3. Musisz także znać jedną zasadę. Każdy layout powinien dostosowywać się do urządzeń które mają co najmniej320pxszerokości ekranu. Poniżej zazwyczaj są już tylko bardzo stare urządzenia, które często nie obsługują nawet media query, więc nie warto się tym zajmować.

Podsumowanie

We wstępie dowiedziałeś się już czym jest Responsive Web Design, poznałeś różnice między RWD i AWD oraz dowiedziałeś się jak prawidłowo tworzyć punkty załamania layoutu, czyli tzw. breakpointy. Zapraszam Cię do następnej lekcji w której poznamy viewport i media query.