Porady praktyczne > Krok 2 - Wzorzec graficzny > Jak utworzyć witrynę "Mobile-Friendly"? > Jak utworzyć wersje witryny na duży ekran i na urządzenia mobilne?

Istnieje kilka sposobów zapewnienia użytkownikowi optymalnych warunków nawigacji po witrynie niezależnie od użytego urządzenia. Jednym z nich jest zbudowanie projekt u witryny responsywnej, czyli stworzenie takiej pojedynczej witryny, która automatycznie adaptuje się do różnych urządzeń. Innym sposobem jest zbudowanie oddzielnych wersji tej samej witryny, opublikowanie każdej pod innym adresem i zapewnienie, by każda jedna wyświetlała się dobrze na urządzeniu, dla którego jest dedykowana.

Pomysł z różnymi adresami URL w porównaniu z projektem witryny responsywnej jest mniej skomplikowany, bo każda wersja jest przeznaczona na konkretny typ urządzenia. Jednak niedogodność stanowi proces aktualizacji witryny, gdyż każdą modyfikację trzeba powtórzyć w projekcie każdej wersji.

Wyobraźmy sobie, witrynę, której poszczególne wersje są przeznaczone odpowiednio na duży ekran, na tablet oraz smartfon. Korzystając z możliwości, jakie daje Strona wstępna można ustawić automatyczne przedkierowanie na podstawie wykrytych informacji o rozdzielczości przeglądarki urządzenia.

▪	Najpierw trzeba mieć zbudowaną wersję witryny na duży ekran, zdefiniować jej strukturę oraz wstawić zawartość.

▪	W Kroku 1 - Ustawienia witryny \| Zaawansowane kliknij przycisk Strona wstępna i w oknie, które się pojawi, zaznacz pole wyboru Pokaż stronę wstępną, następnie wybierz opcję Automatycznie wykryj rozdzielczość.

▪	Używając dostępnych opcji zdefiniuj Punkty kontrolne. Kliknij przycisk Dodaj... i poza istniejącymi już punktami kontrolnymi zdefiniuj nowy dla rozdzielczości 480 pks.

Teraz istnieją 2 punkty kontrolne definiujące 3 różne zakresy rozdzielczości: pierwszy przedział zawiera wszystkie rozdzielczości wyższe od tej dla bieżącego wzorca; drugi zawiera rozdzielczości między tym, a nowym punktem kontrolnym, który właśnie został zdefiniowany w tym wzorcu; i wreszcie trzeci przedział zawiera wszystkie rozdzielczości niższe od wyznaczonej przez nowy punkt kontrolny.

Bieżący projekt jest przeznaczony do wyświetlania w widoku "duży ekran", czyli odpowiada pierwszemu przedziałowi i z nim nie trzeba już nic robić. Natomiast dla pozostałych widoków należy zdefiniować linki do odpowiednich wersji witryny.

▪	Wybierz "Widok 1", który odpowiada drugiemu przedziałowi na liście Punkty kontrolne i kliknij przycisk Edytuj... w celu otwarcia okna Ustawienia punktu kontrolnego.

▪	W pole Adres URL dla tego punktu kontrolnego wpisz adres URL wersji przeznaczonej na tablet. Na przykład http//www.mojastrona.pl/tablet/, zakładając, że wersja ta będzie opublikowana w podkatalogu tablet głównego katalogu na serwerze.

▪	Powtórz tę operację dla widoku "Smartfon", który odpowiada trzeciemu przedziałowi, a następnie przypisz mu odpowiedni adres URL, na przykład http//www.mojastrona.pl/smartfon/, zakładając, że wersja witryny na smartfony ma być opublikowana w podkatalogu "smartfon" głównego katalogu na serwerze.

Witryna jest teraz przygotowana do wykonania przedkierowania na podstawie wykrytej rozdzielczości urządzenia użytego do przeglądania witryny. Nadal jednak nie mamy wersji witryny ani na tablet ani na smartfon.

▪	Najszybszym sposobem utworzenia wersji witryny na tablet jest skopiowanie jej projektu. W oknie Wybór projektu , wybierz projekt zrobionej witryny przeznaczonej na duży ekran. Kliknij przycisk Duplikuj. Następnie kliknij przycisk Zmień nazwę, żeby zmienić nazwę projektu.

▪	Otwórz kopię projektu i wprowadź wymagane zmiany we wzorcu, układzie i treści.

▪	W Kroku 1 - Ustawienia witryny \| Zaawansowane otwórz okno Strona wstępna i usuń zaznaczenie pola wyboru Pokaż stronę wstępną.

▪	Po zakończeniu procedury dla wersji witryny na tablet należy ją powtórzyć dla wersji na smartfon.

Teraz można już opublikować witrynę na serwerze.

▪

Publikowanie wersji witryny na duży ekran: Jest to ta wersja, dla której aktywna jest Strona wstępna. Podczas publikowania witryny na serwerze tworzony jest plik index.html, w którym zapisana jest Strona wstępna. Plik ten zapisany jest w folderze, z którego witryna jest dostępna online. Należy utworzyć podfoldery "tablet" oraz "smartfon". Adresy URL dla tych wersji muszą istnieć na serwerze.

Po wykonaniu tych czynności wersja na duży ekran jest już dostępna online i działa kod wykrywania rozdzielczości oraz przekierowania do odpowiednich wersji witryny. Kod ten zawiera Strona wstępna.

▪	Publikowanie wersji witryny na tablet: Ten projekt należy opublikować na serwerze we właśnie utworzonym podfolderze "tablet". Wtedy przedkieroanie, jakie ma zdefiniowane Strona wstępna będzie działać.

▪	Publikowanie wersji witryny na smartfon: Ten projekt należy opublikować na serwerze we właśnie utworzonym podfolderze "smartfon". Wtedy przedkieroanie, jakie ma zdefiniowane Strona wstępna będzie działać.

Google doskonale akceptuje konfigurację oddzielnych adresów URL wersji witryny na duży ekran i wersji mobilnej, ale zaleca używanie określonych tagów, które pozwolą algorytmom Google prawidłowo zinterpretować je.

▪	Na stronie przeznaczonej na duży ekran wstaw tag link z atrybutem rel="alternate" i z adresem odpowiadającym wersji mobilnej.

▪	Na stronie przeznaczonej na urządzenie przenośne wstaw tag link z atrybutem rel="canonical" i z adresem odpowiadającym wersji na duży ekran.

Taka para tagów poinformuje algorytmy Google, że dwa adresy URL zawierają równoważną treść i należy je traktować jak jeden, a nie jak dwa oddzielne. To ważne, ponieważ gdyby wersje na duży ekran i mobilna były traktowane jak dwie różne, obie pojawiałyby się w wynikach wyszukiwania. Co gorsze, obie strony spadłyby w rankingach, ponieważ zostałyby ukarane za duplikowanie treści.

Zanim umieścisz na stronach tagi, sprawdź czy:

▪	Zachowana jest zależność 1:1 stron wersji na duży ekran i mobilnej. W szczególności unikaj wstawiania tagów do większej liczby stron wersji na duży ekran niż wersji mobilnej (i na odwrót).

▪	Upewnij się, że przekierowania dotyczą par odpowiednich stron.

Kiedy robi się to w programie WebSite X5, najłatwiej jest zachować te zasady, tworząc wersję mobilną z kopii wersji na duży ekran. To daje gwarancję, że obie wersje mają dokładnie takie same strony (nazwy plików stron są identyczne) i wtedy łatwo zachować jest między nimi relację 1:1.

Załóżmy teraz, że chcemy wstawić tagi Google do 3 wersji witryny: na duży ekran, na tablet i na smartfon. W tym celu należy:

▪	Otworzyć projekt witryny dla wersji na duży ekran w Kroku 1 - Ustawienia witryny \| Zaawansowane, otworzyć okno Statystyki, optymalizacja SEO i kod i przejść na kartę Kod.

▪	Teraz w polu Kod niestandardowy wybrać opcję Przed tagiem zamykającym sekcję HEAD i wpisać:

Zapisać zmiany, a następnie rozpocząć pracę nad wersją witryny przeznaczoną na tablet.

▪	Otworzyć projekt witryny dla wersji tablet i, tak jak poprzednio, przejść do Kroku 1 - Ustawienia witryny \| Zaawansowane, otworzyć okno Statystyki, optymalizacja SEO i kod i przejść na kartę Kod.

▪	Ponownie, w polu Kod niestandardowy wybrać opcję Przed tagiem zamykającym sekcję HEAD i tym razem wpisać:

▪	Tę samą procedurę należy powtórzyć dla wersji na smartfon. Tag link będzie taki sam.

Aby lepiej zrozumieć, jak to działa, warto wiedzieć, że:

▪	Kiedy wstawia się tagi w oknie Statystyki, optymalizacja SEO i kod, są one automatycznie wstawiane w kodzie każdej strony witryny.

▪	Kiedy wpisuje się tagi, należy jako atrybut href podać adres URL strony, z którą się pracuje: ustawienie [CURPAGE] identyfikuje nazwę pliku strony i jest automatycznie wstawiany przez program.

▪	Na stronach wersji na duży ekran należy użyć tagu link z atrybutem rel="alternate", tak by zadeklarować wszystkie możliwe alternatywy. W tym wypadku powtórzony jest dwa razy, żeby podać adresy obu wersji na tablet i na smartfon.

▪

Gdy wstawia się tag link z atrybutem rel="alternate", należy też zadeklarować, czy przekierowanie ma być do wersji na tablet, czy na smartfon, nie zaś do wersji na duży ekran. W kodzie powyższego przykładu atrybut media wskazuje, że Google ma przekierować na adres URL wersji na smartfon przy rozdzielczości mniejszej od 480 pks, a do wersji na tablet przy rozdzielczości między 481 a 1024 pks.

Jeżeli zdarzy się tak, że wersje witryny na duży ekran, tablet i smartfon nie zawierają dokładnie takich samych storn albo nazwy niektórych z nich się różnią, należy zaingerować w kod i ręcznie zmienić kod każdej strony i wprowadzić potrzebne modyfikacje tagów.

▪	Otwórz wersję witryny na duży ekran. W Kroku 3 - Mapa wybierz stronę, którą chcesz zmodyfikować i kliknij przycisk Właściwości.

▪	Otwórz okno Właściwości strony, przejdź na kartę Zaawansowane i umieść kursor w polu Kod niestandardowy.

▪	Wybierz opcję Przed tagiem zamykającym sekcję HEAD i wpisz następujące tagi:

gdzie http//www.mojastrona.pl/smartfon/strona-1.html i http//www.mojastrona.pl/tablet/strona-1.html są odpowiednio adresami URL wersji strony na smartfon i na tablet odpowiadającymi stronie na duży ekran, którą modyfikujesz.

▪	Ostatnią czynność należy powtórzyć dla wszystkich stron witryny i powstawiać tagi z adresami URL odpowiadających sobie stron na w wersjach na tablet i smartfon.

Całą procedurę trzeba przeprowadzić dla poszczególnych stron w wersjach na tablet i na smartfon. Tym razem należy wstawić tagi:

gdzie http//www.mojastrona.pl/desktop/strona-1.html jest adresem URL strony w wersji na duży ekran odpowiadającej stronie na tablet lub na smartfon, która jest modyfikowana.

Porady praktyczne:

-	Jak utworzyć witrynę "Mobile-Friendly"?