Projektowanie z myślą o urządzeniach mobilnych — co to jest i dlaczego ma znaczenie
Jesień 2018 roku była okresem prób dla marketerów internetowych, blogerów, agencji cyfrowych… w zasadzie dla wszystkich, których chleb powszedni pochodzi ze świata online. Czemu? Ponieważ właśnie wtedy gigant wyszukiwarek, Google, zaczął wprowadzać indeksowanie zoptymalizowane pod kątem urządzeń mobilnych. Z pewnością nie było to zaskoczeniem, ponieważ „Mobilegeddon" w 2015 r. wprowadził już priorytety witryn, które dobrze wyświetlają się na urządzeniach mobilnych. Projektowanie z myślą o urządzeniach mobilnych było już rzeczą, ale Google nadal zdołał wywołać pewną panikę.
Cofnijmy się jednak na chwilę i przyjrzyjmy się, co tak naprawdę oznacza „mobilność”.
Objaśnienie projektowania dla urządzeń mobilnych
Krótko mówiąc, projektowanie zorientowane na urządzenia mobilne to rodzaj projektowania, w którym priorytetem są urządzenia mobilne. Ogólnie dotyczy to smartfonów i tabletów lub dowolnych urządzeń z mniejszym ekranem. Aby właściwie zrozumieć tę koncepcję, musimy najpierw porozmawiać o responsywnym projektowaniu stron internetowych lub RWB. W RWB zasadniczo umożliwiamy dopasowanie sieci i wszystkich jej kształtów i treści do mniejszych ekranów bez utraty jakości. Należy to również zrobić w sposób, który ludzie uznają za wygodny lub wygodny. Poprawnie wykonany projekt responsywny oznacza, że użytkownik nie musi powiększać, przewijać ani przesuwać ekranu, aby wyświetlić całą zawartość witryny.
Oczywiście, biorąc pod uwagę stopień, w jakim wyszukiwania mobilne wyprzedziły te na komputerach, naturalne jest, że witryna internetowa jest responsywna. Nie chodzi nawet o przetrwanie najsilniejszych. To prostsze. Jeśli Twoja witryna nie reaguje, równie dobrze może nie istnieć. Ludzie nie mają czasu ani cierpliwości na nieresponsywne strony internetowe.
Ale to coś więcej niż tylko responsywność. Podczas opracowywania produktu projektanci przyjmowali za punkt wyjścia wersję desktopową. Następnie, po sfinalizowaniu tej konkretnej wersji, w zasadzie porzucili pewne elementy, aby zoptymalizować produkt pod kątem urządzeń mobilnych.
Dziś proces jest inny. „Postępowy postęp” to powszechnie stosowana zasada w projektowaniu, która za punkt wyjścia przyjmuje wersję mobilną. I to jest dokładnie to, co oznacza „mobile-first”. Projektowanie zaczyna się od strony mobilnej, a następnie stopniowo rozwija się do bardziej zaawansowanych wersji.
Indeksowanie zoptymalizowane pod kątem urządzeń mobilnych
Jak wspomnieliśmy wcześniej, w 2018 roku Google zainicjował zupełnie nowy sposób indeksowania witryn. Indeksowanie jest ważne, ponieważ jest to jeden z mechanizmów używanych przez Google do decydowania o tym, jak wysoko Twoja witryna będzie się wyświetlać na stronach wyników wyszukiwania.
Zasadniczo indeksowanie zoptymalizowane pod kątem urządzeń mobilnych oznacza, że gdy Google wdraża swoje roboty indeksujące, najpierw będą szukać mobilnej wersji Twojej witryny, a następnie wersji na komputery. Pamiętaj, że wersja mobilna nie jest jedyną, która jest indeksowana i klasyfikowana. Twoja wersja na komputery również jest brana pod uwagę, ale dopiero po wersji mobilnej. Jeśli Twoja witryna nie ma wersji mobilnej, będzie to miało znaczący negatywny wpływ na pozycję Twojej witryny. Nie tylko to. Ważna jest również jakość obsługi urządzeń mobilnych, jakie oferuje Twoja witryna.
Dlatego właśnie mobile-first powinien być traktowany bardzo, bardzo poważnie przez każdego właściciela witryny.
Jak zoptymalizować pod kątem urządzeń mobilnych
Więc masz fajny responsywny motyw? Dobrze. Reagowanie jest niezwykle ważne. Ale nie myśl przez chwilę, że twoja praca przy optymalizacji pod kątem urządzeń mobilnych na tym się kończy. To jest bardziej skomplikowane.
Niezależnie od tego, czy organizujesz wiosenne porządki starej witryny WordPress, czy tworzysz nową, możesz zrobić, aby była bardziej atrakcyjna dla robotów indeksujących Google i indeksowania zoptymalizowanego pod kątem urządzeń mobilnych.
- Zoptymalizuj szybkość swojej witryny
Google nienawidzi powolnych stron internetowych. Nie naprawdę. Ma szczególną tendencję do stron internetowych, które wolno się ładują. Od lata 2018 roku Google oficjalnie nadaje priorytet szybkim stronom internetowym, więc jest to zdecydowanie coś do przemyślenia.
Nawet jeśli Twoja witryna jest nieco powolna, nie martw się. Jest wiele rzeczy, które możesz zrobić, aby to przyspieszyć. Na przykład możesz użyć jednej z doskonałych wtyczek do pamięci podręcznej, które tworzą wersję witryny z obsługą HTML, dzięki czemu ładują się szybciej. Możesz także skompresować wszystkie swoje pliki, aby były przesyłane w najmniejszym i najlżejszym możliwym rozmiarze. Na koniec poświęć trochę czasu na przejrzenie swojej witryny i poszukaj błędów technicznych, takich jak niedziałające linki, nadmiernie nasycone strony i tak dalej.
Jeśli chodzi o optymalizację witryn pod kątem wyszukiwarek (SEO), zakładając, że stosujesz już wszystkie najlepsze praktyki w tej dziedzinie, należy pamiętać o kilku dodatkowych kwestiach.
Po pierwsze, musisz zapewnić parzystość treści między wersjami Twojej witryny. Dotyczy to w szczególności linków wewnętrznych, danych strukturalnych, tagów i tym podobnych. Upewnij się też, że Twoje serwery mogą obsłużyć szybkość indeksowania. Kiedyś był to problem, gdy po raz pierwszy wprowadzono indeksowanie mobilne, ale zaskakująca liczba witryn nadal nie dostosowała się do nowej aktywności indeksowania.
Na koniec regularnie monitoruj stan indeksacji i upewnij się, że plik robots.txt jest weryfikowany, a pliki dziennika serwera są w porządku.
- Wybierz responsywny framework
Tak, powiedzieliśmy wcześniej, że użycie responsywnego motywu, zbudowanego na responsywnym frameworku, nie wystarczy do właściwej optymalizacji mobilnej. Pozostaje jednak jednym z podstawowych czynników, więc pomyśleliśmy, że powinniśmy powtórzyć.
Bootstrap i Foundation są obecnie najpopularniejszymi i prawdopodobnie najlepszymi responsywnymi frameworkami, więc wybierz motyw wykorzystujący jeden z nich. Są idealne do tłumaczenia projektu witryny na mniejsze ekrany z minimalnym ryzykiem usterek i błędów. Co więcej, robią to zarówno na poziomie frontonu, jak i zaplecza, dzięki czemu znacznie zmniejszają obciążenie programisty.
- Zoptymalizuj nawigację, zawartość i interakcję
Znalezienie idealnej równowagi między niewystarczającą ilością treści a zbyt dużą ilością treści jest powszechną dolegliwością wszystkich witryn mobilnych. Jest to jednak bitwa, w której po prostu musimy walczyć. Odwiedzający potrzebują informacji, które muszą być przedstawione w jasny i prosty sposób. Bałagan jest niedopuszczalny. Uporządkuj swoje treści tak, abyś mógł powiedzieć to, co masz do powiedzenia, opracować strategię wezwania do działania i nic więcej.
Weź również pod uwagę nawigację w witrynie. Jeśli jest zbyt skomplikowany, po prostu nie sprawdzi się w przypadku urządzeń mobilnych.
Następnie, jeśli pasek nawigacyjny na komputerze jest długi, musisz go znacznie skrócić w wersji mobilnej. Rozważ powiększenie tekstu i przekształć linki w przyciski, które można łatwo stuknąć.
Na koniec sprawdź, czy Twoje układy są odpowiednio zoptymalizowane pod kątem typowych czynności wykonywanych ręcznie, takich jak stukanie i przesuwanie.
To dość logiczny krok, ale nie zaszkodzi powtórzyć to jeszcze raz. Zawsze musisz wszystko sprawdzić i przetestować na swojej stronie. Nawet jeśli ostatnio nie wprowadziłeś żadnych zmian, rozważ wykonanie okazjonalnego testu, aby sprawdzić, czy wszystko działa poprawnie.
Obecnie większość ludzi korzysta z nowoczesnych przeglądarek lub przeglądarek zoptymalizowanych pod kątem urządzeń mobilnych. Jednak zdumiewający odsetek internautów nadal korzysta ze starszych wersji przeglądarek i trzeba o nich również pomyśleć. Chcesz, aby Twoja witryna wyglądała równie dobrze na starym iPhonie 4s, jak na nowym Huawei P20.
Po prostu przetestuj projekt swojej witryny pod kątem responsywności i nie zapomnij o testach A/B, szczególnie w przypadku stron docelowych. Oczywiście przede wszystkim dostosuj mobilną wersję swojej witryny i przygotuj ją dla użytkowników.
Mobile-first to trend, który utrzyma się przez jakiś czas i to jest rzeczywistość, którą wszyscy musimy zaakceptować. Przez „my” rozumiemy wszystkich zaangażowanych w tworzenie i prowadzenie strony internetowej. Projektanci, programiści, administratorzy, eksperci SEO, redaktorzy, copywriterzy – każdy musi pamiętać, aby priorytetowo traktować mobile. Oczywiście nie oznacza to, że powinniśmy zaniedbywać wersje desktopowe. Chodzi tylko o to, że projektowanie z myślą o urządzeniach mobilnych należy traktować poważnie.
Mamy nadzieję, że ten artykuł okazał się pomocny. Jeśli Ci się spodobało, zapoznaj się również z niektórymi z tych artykułów!