Co wybrać? Dedykowaną i odseparowaną wersję mobilną, czy w pełni elastyczną stronę internetową? Jako, że tematem mojej pracy inżynierskiej było stworzenie strony Internetowej, postanowiłem się nieco uważniej przyjrzeć. Co prawda, wielkie portale oraz sklepy posiadają osobną wersję strony, jednak przy niewielkim projekcie prowadzenie dwóch odrębnych wersji strony może pochłaniać nas bardzo wiele czasu.. A przecież “czas to pieniądz” 😉
Poniżej krótkie porównanie obu wersji:
| wersja responsywna | wersja mobilna | |
|---|---|---|
| adres URL | taki sam jak w wersji desktopowej (pozwala uniknąć problemów z SEO i duplicate content) | inny adres URL (najczęściej domena poprzedzona literą “m.” np. m.facebook.com) |
| treść | jednakowa treść na wszystkich urządzeniach | inna treść (zazwyczaj krótsza niż w wersji desktopowej) |
| CMS | wspólny CMS do zarządzania treścią | oddzielny CMS – dla obu wersji serwisu (aktualizowanie treści wymaga zmian w dwóch miejscach) |
| szybkość strony | wolniejsza | szybka |
| koszt realizacji | wyższy | niski |
| czas realizacji | wolniejszy | szybki |
Ze względu na tematykę, jednym z głównych założeń przy projektowaniu strony była możliwość prawidłowego wyświetlania zawartości strony na mniejszych ekranach urządzeń mobilnych postanowiłem stworzyć stronę w pełni elastyczną.
Strona powinna być elastyczna, z założenia musi się wyświetlać prawidłowo na panoramicznych monitorach jak i małych ekranach smartfonów. Korzystając z możliwości HTML5 i arkuszy CSS3 można stworzyć witrynę, która będzie dynamicznie przystosowywać się do wielkości dowolnego ekranu. Zastosuję do tego technikę Responsive Web Design.
W dzisiejszych czasach strony internetowe są oglądane zarówno na małych ekranach przenośnych urządzeń jak i coraz popularniejszych 27, czy nawet 30-calowych monitorach panoramicznych. Do tego dochodzą jeszcze telewizory, które też obsługują już przeglądanie stron internetowych. Dzięki zastosowaniu skalowalnego układu witryny kontrola rozkładu treści na stronie będzie o wiele łatwiejsza.
Przed rozpoczęciem projektu długo zastanawiałem się nad tym, czy wybrać dedykowaną mobilną wersję strony, czy zdecydować się na stronę w technologii RWD. Po przeanalizowaniu obydwóch wersji postanowiłem, że budując stronę całkowicie od nowa lepiej postawić na metodologię Responsive Web Design. Dalszy rozwój strony opartej na RWD jest prostszy, gdyż wystarczy zmiana jednego kodu, bez potrzeby edytowania plików dwóch wersji, co ma miejsce przy zastosowaniu osobnych stron: mobilnej i desktopowej. Co za tym idzie aktualizacja opierać będzie się na zmianie wyłącznie jednej, uniwersalnej wersji. Pozwoli to wyeliminować również problemy z indeksowaniem w wyszukiwarkach – Google od jakiegoś czasu źle traktuje witryny, które mają tą samą treść pod różnymi domenami/adresami (dedykowana wersja mobilna występuję najczęściej pod adresem w subdomenie według schematu: m.domena-strony.pl). Zastosowanie RWD pozytywnie wpływa na SEO, co więcej samo Google rekomenduje rozwiązania RWD.
Skalowane interfejsy pozwalają na tworzenie projektów, które będą się dobrze prezentować zarówno na komputerach osobistych jak i smartfonach i innych przenośnych urządzeniach.
Układ skonstruowany według idei RWD pozwala na wykonanie elastycznej strony, dostosowującej się do zmiany wielkości ekranu użytkownika. Jeszcze nie tak dawno standardem przy budowie strony internetowej była szerokość 960 pikseli1, przez co każdy użytkownik komputera widział podobne efekty niezależnie od wielkości ekranu monitora. Dużą wadą takiego rozwiązania jest mały rozmiar tekstu i występujące po bokach niewielkie marginesy, które pojawiają się użytkownikom z szerokimi, panoramicznymi ekranami. Aktualnie nie powinno się przywiązywać do podawania wymiarów w pikselach, zamiast nich należy stosować względne jednostki wielkości takie jak em, rem czy procenty. Używanie jednostek podanych w jednostkach em2 jest lepszym rozwiązaniem ponieważ jej wartość zależy od rozmiarów kontekstu.
Em to jednostka oznaczająca proporcje szerokości i wysokości danej litery w odniesieniu do wielkości danego fontu, jej nazwa wzięła się od sposoby wymawiania litery „M”, który został przeniesiony do formy pisemnej. Dawniej litera „M” służyła do określenia wielkości fontu gdyż jest ona największą i najszerszą z liter.
Myślę, że należy wziąć pod uwagę fakt, że obecnie bardzo dużo użytkowników surfuje po sieci, wykorzystując do tego celu przenośne urządzenia z małym ekranem. Nawet będąc w domu często żeby coś sprawdził korzystamy z telefonu, a nie komputera. Liczba użytkowników korzystających ze starszych przeglądarek cały czas się kurczy podczas gdy cały czas przybywa osób które korzystają z najnowszych rozwiązań.
Procentowy udział systemów operacyjnych w ogólnej liczbie wizyt – statystyka forum o tematyce GSM: http://gsmx.co, źródło własne.
Jak widać na przedstawionej wyżej statystyce, drugim systemem operacyjnym, z którego odnotowano najwięcej wizyt (zaraz po systemie Windows, który króluje na komputerach stacjonarnych i przenośnych) jest Android OS. System ten pozostawia resztę mobilnych systemów daleko w tyle.
Ruch w sieci z systemów operacyjnych, źródło: Gemius.pl
Poniższe statystyki dowodzą, że w Europie króluje Android:
Popularność systemów mobilnych na świecie, źródło: kantarworldpanel.com
Skonstruowanie od podstaw w pełni skalowalnego szablonu jest dość czasochłonnym zadaniem, należy poszczególnym elementom odpowiednio zdefiniować style CSS, które przy pomocy zapytań medialnych będą się zmieniać dzięki czemu strona będzie mogła dostosować się do szerokości ekranu. Jednak zamiast budować wszystko od podstaw możemy zaoszczędzić sporo czasu i żmudnej pracy wykorzystując gotowe rozwiązania3.
W Internecie znaleźć możemy gotowe rozwiązania ułatwiające zbudowanie elastycznej strony. Począwszy od prostych siatek CSS, znaleźć możemy także bardziej rozwinięte Framework’i.
Siatka CSS to zbiór zdefiniowanych reguł, które pomagają szybko tworzyć kolumnowe układy strony.
Jeśli tworzymy prosty projekt elastycznej strony możemy skorzystać z minimalistycznej siatki4. Obecnie mamy duży wybór systemów siatek CSS, ale o tym napiszę w kolejnym artykule 😉
1 Ben Frain, Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3, Wydawnictwo Helion, 2014, str. 19
2 Ben Frain, Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3, Wydawnictwo Helion, 2014, str. 85-86
3 System siatek CSS – Ben Frain, Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3, Wydawnictwo Helion, 2014, str. 99-100
4 http://speckyboy.com/2012/11/05/10-lightweight-minimal-responsive-grid-frameworks
Polecam r
