RWD vs AWD – różnice w znaczeniu pojęć
Autor: Piotr Drabik , 23 stycznia 2017
Strona główna » CSS3 i HTML5 » RWD vs AWD – różnice w znaczeniu pojęć
RWD vs AWD
Responsive Web Design kontra Adaptive Web Design
Obie definicje RWD Responsive Web Design oraz AWD Adaptive Web Design określają ten sam ostateczny efekt, jaki twórca strony internetowej zamierza osiągnąć. Efektem tym jest stworzenie strony internetowej, która dopasuje się do szerokości ekranu. Jednak istnieje zasadnicza różnica między środkami jakie zostaną użyte w jednym oraz drugim przypadku.
Wykres prezentujący najważniejszą różnicę w obu technikach:
Efekt teoretycznie jest ten sam. Jeżeli otworzymy stronę na tablecie uzyskamy inny wygląd niż na desktopie. Również całkiem inny efekt, gdy przeglądamy stronę na wyświetlaczu telefonu komórkowego. Natomiast sposób osiągnięcia tego efektu jest inny co w wielkim skrócie zauważyć można na powyższej grafice. W przypadku RWD strona będzie się płynnie skalowała w momencie zmiany rozmiaru okna przeglądarki. Natomiast dla AWD zmiana szerokości strony będzie następowała w konkretnych z góry ustalonych momentach.
RWD
RWD jest to obecnie najbardziej popularna metoda projektowania responsywnych witryn. Wymaga ona mniej pracy, ale designer ma też trochę mniejszy wpływ na widok poszczególnych stanów. Nadaje się bardzo dobrze pod SEO ponieważ zawsze ładowana jest ta sama witryna. Technika ta dużą popularność zdobyła m.in. dzięki popularyzacji frameworków typu Bootstrap czy Foundation. Witryny zbudowane w oparciu o RWD są płynne oraz elastyczne.
AWD
AWD z kolei budowane jest na bazie Media Query. Oznacza to, że projektant strony zakłada z góry określoną liczbę stanów strony. W przypadku AWD często wykorzystuje się stworzenie innej witryny przykładowo wskazującą stronę typu: m.przykladowastrona, gdy strona na desktop znajduje się pod adresem www.przykladowastrona. Daje to z jednej strony możliwość bardziej indywidualnego przygotowania treści dla różnych wielkości wyświetlaczy, ale z drugiej wymaga więcej pracy i może sprawiać problemy z SEO.
RWD czy AWD?
Odpowiedzią na pytanie, którą z technik zastosować może być połączenie obu technik. Jako podstawowa technika warto używać RWD, przy czym dla wybranego rozmiaru nic nie stoi na przeszkodzie, żeby użyć AWD co da nam pełną kontrolę nad każdym detalem strony.
- 11
- 11
- 11
- 23
- 14
Lista tematów
Redux – zarządzanie stanem w React
Promise w JavaScript zaawansowane użycie – Promise chaining, Await/Async
Funkcja wyższego rzędu (Higher-Order Functions) w JavaScript
Angular2 – walidacja formularzy w html-u i komponencie
RxJs – programowanie reaktywne w Angular2
ILLUSTRATOR – trasowanie zdjęć na wektory
TypeScript – typy danych oraz modyfikatory dostępu
JavaScript najważniejsze elementy ECMAScript 6 [ES6]
Formularz na stronie bez back-endu czyli Google Forms
AngularJS – dyrektywy w Angularze 1.X
AngularJS – problem z routeProvider w Angular 1.6
Wzorzec MVC (Model – View – Controller)
AngularJS 1 – przegląd serwisów: provider, decorator, constant [2/2]
AngularJS 1 – przegląd serwisów: factory, service, value [1/2]
SASS / SCSS preprocesory CSS: modułowość, warunki, pętle 2/2
SASS / SCSS preprocesory CSS: zmienne, mixiny, dziedziczenie 1/2
Gulp.js – automatyzator zadań z intuicyjną konfiguracją
Grunt.js – konfiguracja automatyzatora zadań
RWD vs AWD – różnice w znaczeniu pojęć
GIT – komendy do pracy z GIT i GITHUB
JavaScript – domknięcia (closures)
JavaScript – użycie metod bind, call, apply
RequireJS – czym jest AMD API i podstawy użycia loadera
CSS3 – wyrównywanie zawartości dzięki Flexbox
JavaScript – funkcja natychmiastowa IIFE
HTML5 – tworzenie formularzy w HTML (FORM)
JavaScript – wyrażenia regularne RegExp
JavaScript – iteracja po tablicach i obiektach w pętli for (in, of)
JavaScript – pętla for i jej różne wywołania for (;;)
JavaScript – skrócony zapis wybranych instrukcji JS
PHOTOSHOP – niedziałająca funkcjonalność 3D
Photoshop – dodatkowe możliwości Move Tool / Przesunięcie (V)
Photoshop – szybka maska (Q) i inne narzędzia selekcji
JavaScript – obiekt window i położenie kursora
JavaScript – konwersje typów danych w JS
JavaScript – różne sposoby na tworzenie obiektów
HTML/CSS3 – Grid w Bootstrap vs grid w Foundation
Photoshop – oblewanie tekstu w kształcie
PHOTOSHOP – Content Aware Move / Przesuwanie z uwzględnieniem zawartości
ILLUSTRATOR – wyszukiwanie obiektu po kolorze (kolory globalne)
ILLUSTRATOR – tworzenie palety kolorów (przejścia tonalne)
WORDPRESS – wygenerowanie chmury tagów
HOSTING – Delegacja domeny, transfer domeny. Znaczenie pojęć.
PHOTOSHOP – definiowanie i użycie wzorów (define pattern)
PHOTOSHOP – usuwanie niechcianych obiektów dzięki Photomerge
PHOTOSHOP – tworzenie panoramy za pomocą Photomerge
CSS3 – prefiksy dla różnych przeglądarek
CSS3 / BOOTSTRAP – kolejność deklaracji stylów: class, id
ILLUSTRATOR – łączenie ścieżek wektorowych
ILLUSTRATOR – użycie narzędzi Knife i Scissors (nóż i nożyczki)
HTML5 / CSS3 / PHP – brak polskich czcionek
PHOTOSHOP – renderowanie obiektów 3D w Photoshop
ILLUSTRATOR – tworzenie kształtów za pomocą Shape Builder Tool
INDESIGN – publikacja internetowa z efektem przerzucania kartek
ILLUSTRATOR – wypełnianie obiektu bitmapą / obrazem
CSS3 stylowanie linków (różny styl linków na stronie)
WORDPRESS – pętla (the loop)
PHOTOSHOP – jak ustawić język angielski w programie
INDESIGN – jakość grafiki podczas pracy z aplikacją
ILLUSTRATOR – tworzenie ścieżki na bazie istniejącego obiektu (Offset Path)
PHOTOSHOP – operacje na ścieżkach kształtów
WORDPRESS – style CSS3 wymagane przy wyświetlaniu obrazów
InDesign import długich tekstów (również dla publikacji wielokolumnowych)
CSS3 BORDER-IMAGE czyli responsywne ramki
PHOTOSHOP – dopełnianie brakujących pikseli (narzędzie Fill)
PHOTOSHOP – kadrowanie (Crop Tool)
PHOTOSHOP – prostowanie obrazów (Ruler tool)
JavaScript – obiekt globalny: STRING
JavaScript – obiekty globalne MATH NUMBER
JavaScript – Use Strict wyłapie pomyłki w kodzie