Dobre Praktyki Tworzenia Stron Internetowych Część II: Mobilna wersja strony www
Jak korzystać z poradnika? Zakreśl puste pole przy zadaniu, jeżeli je wykonałeś.
Spis treści 1. Aspekty dotyczące dedykowanej strony mobilnej 11 1.1 1.2 1.3 1.4 1.5 1.6 1.7 1.8 Automatyczne przekierowanie na wersję mobilną 11 Strona mobilna została umieszczona pod odpowiednim adresem 11 Zastosowano odpowiednie przekierowania 11 Zweryfikowano poprawność linków wewnętrznych 12 W kodzie każdej strony oraz w mapie witryny są adnotacje o wersji mobilnej i odpowiednich przekierowaniach 12 Informacje i treści na stronę pobierane są z jednej bazy danych 12 Jest możliwość przejścia na pełną wersję strony 13 [PORADA] Nie wszystkie elementy, treści z wersji desktopowej muszą być na wersji mobilnej 13 2. Treść i wygląd graficzny strony (UX) 15 2.1 2.2 2.3 Wersja mobilna i desktopowa są spójne układem i graficznie 15 Linki i przyciski są odpowiedniej wielkości 15 W przypadku bloku odnośników (np. menu) zastosowano zebrę 16
2.4 2.5 2.6 2.7 2.8 2.9 2.10 Całe bloki tekstu są klikalne i oddzielone są separatorami 16 Zastosowano odpowiedniej wielkości font 16 Ikony są adekwatne do treści do których kierują 16 Stronie posiada czytelną nawigację / menu 16 Na stronie nie występują okna modalne (pop-upy itp.) 17 Nie zastosowano reklam pełnoekranowych 17 Cała treść poprawnie wyświetla się na urządzeniach mobilnych 17 3. Aspekty techniczne 19 3.1 3.2 3.3 3.4 3.5 Strona jest dostosowana na urządzeniach mobilnych 19 Strona posiada deklarację meta tag viewport 19 Nie wykorzystano technologii Flash na stronie 20 Obrazy są zoptymalizowane 20 Zastosowano odpowiednie linki dla numerów telefonów oraz adresów e-mail 20
DOBRA STRONA W tym rozdziale dowiesz się o aspektach związanych z wyświetlaniem Twojej strony na urządzeniach mobilnych typu smartfon i tablet. CZĘŚĆ II MOBILNA WERSJA STRONY WWW 9
DOBRA STRONA W tym dziale czeka cię 7 zadań do wykonania. Do części z nich będziesz potrzebowac pomocy specjalisty. Sprawdź jak wyświetla się Twoja strona na urządzeniach mobilnych. Jeśli przeglądasz stronę na smartfonie lub tablecie i jest ona pod takim samym adresem co wersja desktopowa, to oznacza to, że Twoja strona jest responsywna przejdź do rozdziału 2. Jeśli na urządzeniu mobilnym zostałeś przekierowany na inny adres (najczęściej m.nazwastrony.pl lub nazwastrony.pl/m/) to oznacza, że posiadasz dedykowaną wersję mobilną. 10 CZĘŚĆ II MOBILNA WERSJA STRONY WWW
1. Aspekty dotyczące dedykowanej strony mobilnej 1.1 Automatyczne przekierowanie na wersję mobilną. Użytkownik powinien zostać automatycznie przekierowany na wersję mobilną strony, gdy korzysta z urządzenia mobilnego. 1.2 Strona mobilna została umieszczona pod odpowiednim adresem. Najczęściej dedykowana wersja mobilna dostępna jest pod adresem m.nazwastrony.pl lub nazwastrony. pl/m/ 1.3 Zastosowano odpowiednie przekierowania W przypadku dedykowanej wersji mobilnej używane są inne adresy URL. Użytkownicy powinni być CZĘŚĆ II MOBILNA WERSJA STRONY WWW 11
DOBRA STRONA ASPEKTY DOTYCZĄCE DEDYKOWANEJ STRONY MOBILNEJ przekierowywani z każdego adresu w wersji na komputery do jego odpowiednika w wersji na urządzenia przenośne. Przeniesienie na inne strony (np. zawsze na stronę główną) nie jest dobrym rozwiązaniem. W przypadku kiedy podstrona w wersji mobilnej nie posiada odpowiednika w wersji desktop pamiętaj aby nie stosować przekierowania rel= canonical. Więcej o przekierowaniach przeczytasz na https://developers.google.com/webmasters/mobile-sites/mobile-seo/ configurations/separate-urls?hl=pl 1.4 Zweryfikowano poprawność linków wewnętrznych Wszystkie linki wewnętrzne w wersji mobilnej powinny kierować również do podstron mobilnych, nie desktopowych. 1.5 W kodzie każdej strony oraz w mapie witryny są adnotacje o wersji mobilnej i odpowiednich przekierowaniach Użytkownik zawsze zostaje przekierowany na odpowiednią podstronę w zależności od używanego urządzenia. Więcej informacji jak to poprawnie wykonać jest dostępne na: https://developers.google.com/webmasters/mobile-sites/mobile-seo/ configurations/separate-urls?hl=pl 1.6 Informacje i treści na stronę pobierane są z jednej bazy danych. Pobierając informacje z jednej bazy danych nie ma konieczności podwójnego aktualizowania treści i jest zapewniona spójność danych pomiędzy wersjami strony. 12 CZĘŚĆ II MOBILNA WERSJA STRONY WWW
DOBRA STRONA A S P E K T Y DOTYCZĄCE DEDYKOWANEJ STRONY MOBILNEJ 1.7 Jest możliwość przejścia na pełną wersję strony. Użytkownik może przejść do wyświetlania pełnej wersji (desktopowej) strony na urządzeniach mobilnych (często wykorzystywane na przeglądaniu strony na tablecie). Nie wszystkie elementy, treści z wersji desktopowej muszą być na wersji mobilnej. Nie wszystkie treści z wersji desktopowej są niezbędne i wymagane na wersji mobilnej. Na wersji mobilnej można publikować wyłącznie najbardziej przydatne informacje dla użytkowników mobilnych. CZĘŚĆ II MOBILNA WERSJA STRONY WWW 13
DOBRA STRONA ASPEKTY DOTYCZĄCE DEDYKOWANEJ STRONY MOBILNEJ W tym dziale czeka cię 10 zadań do wykonania. Do części z nich będziesz potrzebowac pomocy specjalisty. 14 CZĘŚĆ II MOBILNA WERSJA STRONY WWW
2. Treść i wygląd graficzny strony (UX) 2.1 Wersja mobilna i desktopowa są spójne układem i graficznie. Obie wersje strony nie powinny odbiegać od siebie kolorystyką i układem, aby nie wprowadzać użytkownika w zakłopotanie. 2.2 Linki i przyciski są odpowiedniej wielkości. Przyciski powinny mieć odpowiednią wielkość (zaleca się stosowanie minimalnej wysokości 26px). Przyciski powinny mieć bardziej kwadratowy format (dopasowanie do kształtu opuszka palca). CZĘŚĆ II MOBILNA WERSJA STRONY WWW 15