Wróć do informacji o e-podręczniku Wydrukuj Pobierz materiał do PDF Zaloguj się, aby dodać do ulubionych Zaloguj się, aby skopiować i edytować materiał Zaloguj się, aby udostępnić materiał Zaloguj się, aby dodać całą stronę do teczki

Strona responsywna a strona mobilna

W momencie pojawienia się potrzeby dostosowywania stron do wyświetlania na urządzeniach mobilnych pojawiły się dwa podejścia (a jednocześnie pojęcia): strona responsywna i strona mobilna. Często bywają one zestawiane jako synonimy. Jednak znaczenie ich jest odmienne.

Polecenie 1

 Przeanalizuj infografikę, a następnie wykonaj ćwiczenie, aby zapoznać się z różnicami pomiędzy pojęciami: strona responsywna i strona mobilna.

RpDtuppo7DguD1
Strona responsywna a strona mobilna. Ilustracja przedstawia schemat projektowania responsywnego i oddzielną stronę mobilną. Po lewej stronie jest symbol komputera, a obok telefonu komórkowego. Znajdują się w ramce. Poniżej napisy komputer, telefon połączone linią i strzałka do góry w kierunku ramki. Nad obrazkiem napis: Projektowanie Responsywne (1 adres URL). Obok jest ikona komputera i telefonu komórkowego - w oddzielnych ramkach. Poniżej napis komputer i telefon. Od napisów strzałki do ikony komputera i telefonu. Pomiędzy napisami linia, a pośrodku niej romb, tam napis Urządzenie?. Nad ilustracją: Oddzielna Strona mobilna (2 adresy URL). Strona responsywna: Dopasowuje się do różnych wielkości i rozdzielczości ekranów dzięki zastosowaniu jednego rozwiązania. Jest uniwersalna, ta sama strona działa na desktopie, jak i na każdym innym urządzeniu mobilnym. Warto zainwestować w stronę responsywną, jeśli dopiero planujesz stworzyć swój serwis. Jedną z zalet takiego rozwiązania jest fakt, że nie musisz aktualizować dwóch witryn. Inną natomiast, że wyszukiwarka Google preferuje strony responsywne, więc lepiej je pozycjonuje.
  • Strona mobilna: Rozwiązanie opierające się na umieszczeniu wersji mobilnej strony pod osobnym adresem. Od wersji desktopowej różni się kodem HMTL. Strona mobilna jest popularnym rozwiązaniem w sytuacji, kiedy nie przeprowadza się częstych zmian na stronie internetowej. Może być dobrym wyjściem, jeśli twoja strona już istnieje.
  • Źródło: Contentplus.pl sp. z o.o., licencja: CC BY-SA 3.0.
    R9yQgNeYHAhim
    Ćwiczenie 1
    Wymyśl pytanie na kartkówkę związane z tematem materiału.

    Mobile First

    RE2zCvtUZh0s61
    Źródło: Contentplus.pl sp. z o.o., licencja: CC BY-SA 3.0.

    To zalecane podejście tworzenia stron internetowych, w którym zaczyna się definiowanie elementów od najprostszych do bardziej złożonych. Od razu rozwiązuje ograniczenia urządzeń mobilnych i wykorzystuje dostępną przestrzeń. To założenie pomaga też w określeniu, co jest najważniejsze na stronie.