Jak upewnić się, że Twoja witryna wygląda dobrze na wszystkich urządzeniach?

Jeszcze 10 lat temu webmasterzy nie musieli martwić się o tworzenie wielu wersji strony internetowej do oglądania na różnych platformach. Konsumenci używali komputerów stacjonarnych lub laptopów w domu lub biurze, aby wyszukiwać produkty, rezerwować wakacje i czytać najnowsze wiadomości. Ekrany, choć różniące się wielkością, przedstawiały konsumentom informacje według tych samych wzorców projektowych i istniało poczucie przewidywalności, co nieco ułatwiało pracę.

Obecnie konsumenci uzyskują dostęp do sieci z komputerów stacjonarnych, laptopów, smartfonów, tabletów, czytników e-booków i konsol do gier. Urządzenia te wykorzystują różne szybkości połączenia, są dostępne w wielu rozmiarach ekranu, różnej rozdzielczości i oferują szybkości przetwarzania od żółwia do zająca pod względem czasu reakcji. W przypadku konsumentów surfujących po Twojej stronie na dowolnej liczbie różnych urządzeń, w jaki sposób możesz upewnić się, że Twoja witryna wygląda dobrze bez względu na to, jakiego urządzenia używają do interakcji z Twoją marką?

W tym poście omówimy czynniki, o których należy pamiętać, i przedstawimy kilka pomocnych wskazówek, które poprowadzą Cię przez optymalizację strony internetowej pod kątem wyświetlania na wielu urządzeniach.

Jak wyświetlić swoją witrynę na różnych urządzeniach

Jeśli jesteś jak większość Amerykanów, prawdopodobnie masz smartfona lub tablet, albo jedno i drugie. Jednak jest mało prawdopodobne, że masz te urządzenia wyposażone we wszystkie różne rozmiary ekranu, procesory i systemy operacyjne krążące obecnie po rynku. Na szczęście dobrzy ludzie z HubSpot stworzyli narzędzie, które umożliwia przeglądanie witryny na różnych urządzeniach bez konieczności testowania jej na każdym urządzeniu. Ich Device Lab został uruchomiony w 2013 roku i pozwala po prostu wpisać adres URL swojej witryny.

Laboratorium urządzeń nie tylko pokaże Ci, jak wygląda Twoja strona na różnych urządzeniach i systemach operacyjnych, ale także wygeneruje szybkie raporty na temat odsetka użytkowników mobilnych z różnych platform. Zobaczysz raporty dla urządzeń iPhone 4/4S, iPhone 5 i iPhone 6/6 Plus, a także dla urządzeń Samsung Galaxy S3/S4/S5 oraz najpopularniejszych obecnie tabletów.

Jak stworzyć witrynę dostosowaną do urządzeń mobilnych

Device Lab pomoże Ci przeglądać Twoją witrynę na różnych platformach. Zobaczysz, czy Twoja strona jest odcinana na tabletach lub czy nie wymaga od odwiedzających zbyt wiele czynności powiększania i przewijania, ale nie powie Ci, jak wprowadzić zmiany niezbędne do opracowania platformy przyjaznej dla urządzeń mobilnych. Chcesz mieć pewność, że Twoi klienci znajdą interesującą witrynę, która jest przyjazna dla użytkownika, niezależnie od urządzenia, na którym uzyskują dostęp do Twojej witryny.

Przedsiębiorca oferuje podstawowe punkty wyjścia dla webmasterów, którzy chcą stworzyć witrynę, która będzie wyglądać świetnie na każdym urządzeniu. Na początek powinieneś poświęcić trochę czasu na przejrzenie swojej obecnej witryny i upewnienie się, że pasuje ona do dzisiejszego użytkownika sieci. Ponad miliard ludzi korzysta ze smartfonów na całym świecie, a wielu używa ich jako głównego punktu dostępu do Internetu.

Zacznij od uproszczenia ogólnego projektu witryny. Musisz wziąć pod uwagę prostsze projekty stron i większe rozmiary czcionek, aby przyspieszyć ładowanie i ułatwić przeglądanie na urządzeniach mobilnych. Stare gazetowe określenie „nad zakładką” jest ważne we współczesnym projektowaniu stron internetowych. Jeśli Twoi widzowie będą musieli przewijać stronę w dół na urządzeniu mobilnym, szybko zrezygnują na rzecz dobrze zaprojektowanej witryny. Upewnij się, że najważniejsze informacje znajdują się w górnej części ekranu (co oznacza brak przewijania, aby je znaleźć) i używaj dużych, dotykalnych przycisków. Wybieranie odbytu to już przeszłość, ale grube palce na co dzień prowadzą do przypadkowych naciśnięć przycisków na smartfonach.

Jeśli nie chcesz zadzierać z dostosowywaniem swojej obecnej witryny, masz również możliwość stworzenia witryny mobilnej. Tworzenie witryny mobilnej dla Twojej firmy tworzy równoległą witrynę, która istnieje niezależnie od tradycyjnej witryny, ale jest z nią połączona. Procesory określają, czy odwiedzający pochodzą z komputerów stacjonarnych/laptopów lub smartfonów/tabletów, i przekierowują ich do Twojej witryny mobilnej natychmiast po wprowadzeniu adresu URL.

Istnieją jednak kompromisy, które wiążą się z witryną mobilną. Tworząc witrynę mobilną, która korzysta z drugiego adresu URL, w szczególności z subdomeny .m, ucierpi Twoja widoczność w wyszukiwarkach. Google i Bing nie znajdują się w subdomenie .m i naciskają na webmasterów, aby używali jednego adresu URL w celu zwiększenia widoczności i optymalizacji pod kątem wyszukiwarek.

Mając to na uwadze, budżet może zmusić Cię do utworzenia oddzielnej witryny mobilnej zamiast odbudowy głównej witryny. Witryna mobilna, która jest mniej widoczna, jest lepsza niż całkowite pominięcie odbiorców mobilnych. Upewnij się tylko, że łączysz swoją witrynę komórkową z witryną główną, a będziesz w stanie wypełnić część luki.

Najlepsza opcja

Oczywiście zawsze możesz dokonać znacznej inwestycji w swój biznes i przebudować witrynę, która będzie działać na każdym urządzeniu w dowolnym momencie. Dzięki adaptacyjnemu i responsywnemu projektowi możesz zbudować witrynę, która będzie się wyświetlać prawidłowo za każdym razem, gdy odwiedzający klikną na Twoją stronę, niezależnie od urządzenia, z którego korzystają. Oto krótkie wprowadzenie do obu koncepcji:

• Projektowanie adaptacyjne: Duże firmy inwestują duże środki w projektowanie adaptacyjne. Adaptacyjna witryna internetowa wykrywa i identyfikuje urządzenie każdego użytkownika w ciągu kilku sekund i generuje stronę dostosowaną do możliwości tego konkretnego urządzenia.
• Projektowanie responsywne: korzystając z technologii Cascading Style Sheets (CSS), responsywne projektowanie tworzy pojedynczą wersję Twojej witryny, która automatycznie dostosowuje się do prawidłowego wyświetlania na większości urządzeń, z wyjątkiem starszych telefonów komórkowych. Projekty responsywne są wystarczająco elastyczne, aby zapewnić dobry wygląd witryny bez względu na rozmiar wyświetlacza lub szybkość procesora urządzenia.

Te podejścia mają wady. Projektowanie adaptacyjne stanowi szczyt dzisiejszego projektowania witryn internetowych, ale jego wdrożenie i obsługa jest niezwykle kosztowna. Projektowanie responsywne jest bardziej przystępne, ale nie na poziomie projektowania adaptacyjnego. Mimo to, w porównaniu z innymi opcjami, responsywność to głowa i ramiona ponad tworzeniem prostej witryny mobilnej.

Rozważając przeprojektowanie strony internetowej, pamiętaj o czynnikach, o których wspomnieliśmy w tym poście. Bez względu na budżet, musisz odłożyć środki na zaprojektowanie strony internetowej, która będzie widoczna i przyjazna dla użytkownika na każdym urządzeniu. Dziś to smartfony, tablety i rosnąca liczba telewizorów Smart. Jutro konsumenci mogą oglądać Twoją stronę w kuchni na drzwiach lodówki lub w łazience na lustrach. Już dziś przygotuj swoją stronę internetową na wyzwania.