Strony responsywne a mobilne
Dzisiaj każdy chce i co ważniejsze potrzebuje(!) responsywnej strony internetowej. Fakt, coraz więcej użytkowników stron to użytkownicy smartfonów czy tabletów. Jak w takim razie przygotować stronę responsywną?
Strony responsywne a strony mobilne
Wbrew pierwszej myśli strona responsywna i mobilna to 2 całkowicie różne rzeczy.
Strona mobilna – stworzona wyłącznie dla użytkowników urządzeń przenośnych. Tak naprawdę jest to całkowicie oddzielna strona, na którą są przekierowywani użytkownicy smartfonów. Czasem można ją rozpoznać po innym adresie, najczęściej umieszczana jest na subdomienie „m.nazwastrony.pl”. Strona przyjmując użytkownika automatycznie rozpoznaje z jakiego urządzenia korzysta i przekierowuje go odpowiednio albo na stronę dla smartfonów albo na stronę przygotowaną pod komputery. Jeśli strony nie korzystają z tej samej bazy to każdą aktualizację trzeba wykonywać na obu stronach. Możemy za to jednak dostosować stronę pod telefon praktycznie bez ograniczeń.
Strona responsywna – jest to jedna wersja strony, stworzona w taki sposób, że wyświetla się normalnie na komputerach ale dopasowuje się do każdej rozdzielczości ekranu. Dzięki czemu możemy na nią wchodzić ze smartfonów, tabletów, komputerów. Jeżeli ekran jest mniejszy to wczytuje inne właściwości CSS, zmniejsza szerokość, chowa niepotrzebne elementy – zmienia stronę w taki sposób, że jej obsługa jest równie wygodna na telefonie i na tradycyjnym komputerze. Czyli jest to ta sama strona tylko inaczej wyświetlana.
Wdrożenie
Wdrożenie strony mobilnej. Przykład: na wejście przygotowujemy plik, który rozpoznaje z jakiego urządzenia korzysta użytkownik. Możemy do naszego pliku index.php dodać na samym początku:
<?php
$iphone = strpos($_SERVER[’HTTP_USER_AGENT’],”iPhone”);
$android = strpos($_SERVER[’HTTP_USER_AGENT’],”Android”);
$palmpre = strpos($_SERVER[’HTTP_USER_AGENT’],”webOS”);
$berry = strpos($_SERVER[’HTTP_USER_AGENT’],”BlackBerry”);
$ipod = strpos($_SERVER[’HTTP_USER_AGENT’],”iPod”);
if ($iphone || $android || $palmpre || $ipod || $berry == true) header(’Location: http://m.mojastrona.pl/’);
?>
Oczywiście zamiast subdomeny możesz użyć innego adresu, pod którym chcesz mieć wersję mobilną. Pod podanym adresem oczywiście musi znajdować się strona przygotowana pod smartfony.
Stronę responsywną ciężko nazwać wdrożeniem ponieważ jest to bardziej dostosowanie strony pod urządzenia mobilne. Na samym początku w sekcji <head> należy dodać jedną ważną linijkę:
<meta name=”viewport” content=”width=device-width, initial-scale=1„>
Dzięki temu strona nie będzie się automatycznie skalowała. Bez tej linijki strona na telefonie zostanie zwyczajnie kilkukrotnie zmniejszona, tak jakby wcale nie była responsywna.
Reszta zadania to odpowiednie przygotowanie pliku CSS i skorzystanie z reguł @media queries, gdzie możemy zdefiniować jakie style mają zostać wczytane na konkretnych rozdzielczościach ekranu.
Przedstawię Ci najprostszy przykład zastosowania reguły @media (w pliku CSS):
#head{
width: 100%;
height: 300px;
background-color: red;
}
@media screen (max-width: 500px){
#head{
height: 100px;
background-color: blue;
}
}
Efekt będzie taki, że element o ID 'head’ będzie miał na komputerze 300 pikseli wysokości i tło koloru czerwonego. Natomiast na urządzeniach o szerokości ekranu poniżej 500px ten sam element będzie miał 100 pikseli wysokości i tło koloru niebieskiego.
Co z aplikacjami mobilnymi?
Tak, istnieje jeszcze 3 opcja, której nazwa może nawiązywać o tematu jednak aplikacje mobile to coś całkowicie odrębnego. Ze stronami internetowymi ma tyle wspólnego co Java i JavaScript;) Czyli niewiele.
Są to tak naprawdę programy pisane pod konkretny system, np. Android lub iOS. Aplikację taką pobierasz na telefon i instalujesz – dopiero wtedy można jej używać. Omawiane wcześniej strony mobilne i responsywne są otwierane przez przeglądarki, dzięki czemu system z jakiego korzystasz nie ma znaczenia.
Ponadto aplikacje mobilne tworzone są w całkowicie innych językach (np. Java) i w innych środowiskach programistycznych. Nie będę dokładnie się zagłębiał nad szczegółami, chcę tylko abyś kiedyś w rozmowie z klientem nie pomylił tych pojęć i zamiast stworzenia strony podjął się stworzenia aplikacji 😉
