Ściągawka z projektowania mobilnego: projektowanie responsywne, dynamiczne wyświetlanie i witryny mobilne

Aktualizacja redakcji (lipiec 2015): W kwietniu 2015 r. Google dokonał zapowiedzianej wcześniej aktualizacji algorytmu rankingu wyników wyszukiwania mobilnego. Przyjazność witryny mobilnej jest potwierdzonym sygnałem rankingowym dla rankingów wyszukiwania mobilnego. Zwróć uwagę i spraw, aby Twoja witryna była przyjazna dla urządzeń mobilnych, korzystając z poniższego artykułu.

Wszyscy słyszeliśmy statystyki: 2014 to rok, w którym więcej osób korzysta z internetu na smartfonie niż na komputerze czy laptopie. Mobilny design to przyszłość. Nie chcesz zostawiać swojej witryny w tyle, ale jak dokładnie programujesz dla tego coraz bardziej mobilnego Internetu? Istnieją trzy główne opcje, z których każda ma swoje zalety i wady. W tym poście przedstawię opcje gotowości na urządzenia mobilne, podając zalety i wady każdego z nich, aby pomóc Ci wybrać najlepszą ścieżkę dla Twojej witryny i strategii SEO.

Opcja 1: projekt responsywny

Konstrukcja responsywna określa rozdzielczość ekranu, na którym wyświetlana jest strona, za pomocą zapytań o media, a następnie odpowiednio dostosowuje rozmiar i układ strony. Google stwierdził, że preferuje responsywne projektowanie stron internetowych, co czyni go głównym w tej dyskusji.

Plusy :

1. Istnieje tylko jedna wersja każdej strony. Ta sama strona dostosowuje się do rodzaju urządzenia, na której jest wyświetlana (zamiast wykrywać typ urządzenia i na jego podstawie wyświetlać różne treści). Posiadanie tego samego kodu HTML i adresu URL na wszystkich urządzeniach upraszcza obsługę witryny.
2. Projektowanie responsywne nie opiera się na wykrywaniu klienta użytkownika, jak to robią pozostałe dwie opcje. Wykrywanie klienta użytkownika (tj. wykrywanie przeglądarki lub urządzenia żądającego strony internetowej) samo w sobie nie jest złe, ale nie jest doskonałe, a jeśli w procesie wystąpi usterka, użytkownicy mogą otrzymać niewłaściwą wersję Twojej witryny. Ponadto oszczędza to robotom-pająkom wyszukiwarek przed koniecznością indeksowania Twojej witryny jako kilku różnych klientów użytkownika – co oznacza, że ​​​​indeksowana jest większa część Twojej witryny.
3. Responsywność zazwyczaj ładuje się szybciej w przeglądarkach. Ponieważ wszystkie urządzenia otrzymują tę samą zawartość, nie ma procesu wykrywania żądanego agenta użytkownika — możliwego przekierowania. A każdy, kto kiedykolwiek był głodny i szukał dobrej restauracji na swoim smartfonie, wie, że liczy się prędkość.

Cons:

1. Przeprojektowanie istniejącej witryny może być długim i intensywnym procesem. Jeśli więc masz dużą witrynę, przejście na responsywną może nie być najlepszym wyborem.
2. W zależności od układu witryny umieszczenie treści na ekranie telefonu komórkowego może być po prostu zbyt trudne. Witryny takie jak NYTimes.com utrzymują oddzielne witryny mobilne, ponieważ łatwiej jest podzielić treść niż umieścić ją na jednej stronie.
3. Rozmiary elementów nawigacyjnych nie zawsze są prawidłowe; elementy po najechaniu kursorem w ogóle nie działają na ekranie dotykowym. Dlatego przejście na responsywność może oznaczać zmianę nawigacji.
4. Zdarzały się przypadki, w których responsywne strony z dużą ilością obrazów ładowały się wolniej dzięki responsywnemu projektowi. Muszę podkreślić, że to nie jest norma, ale tak się stało.

Jeśli zdecydujesz się na projektowanie responsywne, pamiętaj, że przed udostępnieniem jej na żywo warto zoptymalizować obrazy i przetestować witrynę na różnych przeglądarkach i urządzeniach (lub użyć dobrego emulatora klienta użytkownika).

Opcja 2: dynamiczne udostępnianie

Czasami określane jako „sniffowanie” klienta użytkownika, dynamiczne udostępnianie może odbywać się na dwa sposoby i jest trudne do zaimplementowania. W rzeczywistości Google przedstawia kilka typowych błędów popełnianych podczas dynamicznego udostępniania. Ta technika polega na wykrywaniu klienta użytkownika odwiedzającego (tj. urządzeniu, którego używa do przeglądania Twojej witryny), a następnie przekierowywaniu na poziomie serwera . Jednym ze sposobów implementacji wyświetlania dynamicznego jest przekierowanie jednokierunkowe , w którym linki do witryny są domyślnie przekierowywane do witryny na komputery, ale urządzenia mobilne są przekierowywane z witryny na komputery do witryny mobilnej.

Drugi typ, przekierowania dwukierunkowe , ma kod zarówno na stronach stacjonarnych, jak i mobilnych, zapewniając każdemu odwiedzającemu, niezależnie od urządzenia, odpowiednią treść. (Te fragmenty kodu są czasami nazywane tagami switchboard). Implementacja oznacza umieszczenie na pulpicie tagu rel=”alternate”, wskazującego na witrynę mobilną; a w witrynie mobilnej umieszczenie tagu rel="canonical" wskazującego witrynę na komputery.

Plusy:

1. Ponieważ przekierowanie odbywa się na poziomie serwera, potrzebujesz tylko jednego adresu URL na stronę.
2. Dynamiczne serwowanie działa również dobrze na telefonach z internetem . Zgodnie z definicją PCMag.com, telefon z funkcjami to „telefon komórkowy, który zawiera stały zestaw funkcji poza połączeniami głosowymi i wiadomościami tekstowymi, ale nie jest tak rozbudowany jak smartfon”. Na przykład telefony z internetem zazwyczaj nie mogą pobierać aplikacji, ale zwykle mają pewne możliwości przeglądania stron internetowych. Według Google największą różnicą jest to, że telefony z internetem nie mogą przetwarzać CSS, więc nie radzą sobie zbyt dobrze z responsywnym projektowaniem. Dlatego ważne jest, aby znać swoich odbiorców i typ urządzeń mobilnych, z których korzystają.
3. Jeśli chcesz mieć osobny zestaw słów kluczowych specjalnie dla użytkowników mobilnych, ta opcja pozwoli Ci to zrobić, ponieważ użytkownicy mobilni i użytkownicy komputerów widzą odrębny kod HTML. (Wyszukiwarka Land ma świetny artykuł, który omawia słowa kluczowe specyficzne dla telefonów komórkowych).

Cons:

1. Dynamiczne przekierowanie podwaja prace związane z utrzymaniem witryny, ponieważ tworzy oddzielną witrynę dla urządzeń mobilnych, z osobnym zestawem zindeksowanego kodu HTML, który wymaga osobnego projektu SEO.
2. Niezbędna lista ciągów agenta użytkownika wymaga również ciągłej konserwacji, ponieważ nowe ciągi muszą być dodawane za każdym razem, gdy nowe urządzenie mobilne jest wydawane.
3. Na koniec pamiętaj, że musisz użyć nagłówka „Vary HTTP-User Agents”, jeśli Twoja witryna wyświetla treści dynamicznie. Nagłówek pomaga w prawidłowym serwowaniu treści i pomaga w prawidłowym buforowaniu jej przez silniki. Google ma szczegółowe informacje na temat dodawania tego nagłówka.

Opcja 3: Witryna mobilna

Ta opcja, jak sama nazwa wskazuje, polega na stworzeniu osobnej domeny specjalnie dla użytkowników mobilnych. Najczęstsze przykłady to m.domain.com lub mobile.domain.com . Jest to popularna opcja dla dużych detalistów; Bridget Randolph zwraca uwagę, że „73% stron internetowych umieszczonych w Top 100 000 witryn Quantcast korzystało z przekierowań adresów URL na adresy URL przeznaczone dla urządzeń mobilnych”. Podobnie jak dynamiczne serwowanie, technika ta obejmuje tworzenie treści specjalnie dla odwiedzających korzystających z urządzenia mobilnego; jednak oddzielne adresy URL witryny mobilnej są różne, więc nie ma przekierowania na poziomie serwera.

Plusy:

1. W przypadku większych witryn, których liczba stron wynosi setki tysięcy lub miliony, wdrożenie projektowania responsywnego może być po prostu zbyt pracochłonne. Witryna mobilna pozwala dostosowywać wrażenia użytkownika i powoli tworzyć unikalne wrażenia na urządzeniach mobilnych.
2. Podobnie jak dynamiczne udostępnianie, witryna mobilna jest lepsza dla telefonów z internetem niż projektowanie responsywne. W zależności od danych demograficznych witryny może to nie być kryterium; ale dla niektórych firm jest to ważna kwestia.

Minusy :

1. Twoja witryna mobilna nie skorzysta z żadnego pozytywnego profilu linków zwrotnych utworzonego przez witrynę na komputery (chyba że zaimplementujesz przekierowania dwukierunkowe). Jeśli więc chcesz, aby użytkownicy mobilni znaleźli Cię w bezpłatnych wynikach wyszukiwania, może to być poważny problem.
2. Twoja witryna mobilna będzie wymagała dodatkowej pracy z zakresu SEO. Musisz przesłać osobną mapę witryny XML do narzędzi Google i Bing Webmaster Tools. Ponadto mniejsze ekrany oznaczają mniejsze SERP, więc może być konieczna edycja metatagów. Metatagi przeznaczone dla komórek powinny być krótsze niż w przypadku witryny na komputery.

Jak widać, treść została radykalnie sformatowana i zmniejszona, aby była czytelna na urządzeniu mobilnym.

Przeglądając wszystkie te informacje, aby dokonać właściwego wyboru dla swojej witryny, nie zapomnij zadać sobie pytania, ilu odwiedzających korzysta z urządzeń mobilnych, aby uzyskać dostęp do witryny. Sprawdź swoje statystyki. Jeśli łączny odsetek ruchu mobilnego jest niższy niż pięć procent, prawdopodobnie możesz poczekać z wdrożeniem projektu mobilnego. Na razie. Jeśli prognozy są prawidłowe, korzystanie z telefonów komórkowych będzie nadal generować coraz większy ruch internetowy.

Aby uzyskać informacje o tym, jak zoptymalizować swoje strony pod kątem szybkości i SEO mobilnego, zalecamy rozpoczęcie od tych zasobów:

• Kompleksowa mobilna lista kontrolna SEO i projektowa
• 7 najlepszych praktyk nawigacji przyjaznej dla urządzeń mobilnych
• Poradnik SEO: SEO mobilne i optymalizacja UX
• Optymalizacja obrazu: pierwsza rzecz, którą możesz zrobić, aby poprawić UX na urządzeniach mobilnych
• Przewodnik dla webmasterów witryn mobilnych autorstwa Google Developers