The Distilled Practice for Building Mobile Friendly Website

01.06.2020
Artykuły i więcej… 'The Distilled Practice for Building Mobile Friendly Website
0 10 мин.

budowanie przyjaznej strony mobilnej


W 2015 r. Google wprowadziło algorytm „Mobilegeddon”, który karał witryny, które nie były przyjazne dla urządzeń mobilnych. Zgodnie z tym algorytmem ranking witryn, które nie były przyjazne dla urządzeń mobilnych, spadłby.

Jak widać, telefon komórkowy wyprzedził komputery stacjonarne i laptopy i jest najczęściej używanym urządzeniem do przeglądania Internetu. Google zachęca firmy do myślenia o urządzeniach mobilnych.

globalny ruch danych mobilnych

Oznacza to, że projektanci graficzni i marketerzy muszą rozszerzyć swoją wizję na komputery stacjonarne i laptopy podczas pracy na stronie internetowej.

Co to jest strona mobilna?

co to jest strona przyjazna dla urządzeń mobilnych

Jak sama nazwa wskazuje, witryna dostosowana do urządzeń mobilnych to witryna zaprojektowana, opracowana i zoptymalizowana w taki sposób, aby działała bezproblemowo na urządzeniach mobilnych – jest bardziej skomplikowany i konieczny niż się wydaje. Na najbardziej podstawowym poziomie – użytkownicy chcą treści, które można łatwo przeglądać na urządzeniach mobilnych.

Jeśli twój tekst jest zbyt mały lub obrazy się nie ładują, użytkownicy będą zirytowani i odejdą. Dlatego tak ważne jest, aby treść była odpowiednio dopasowana. Niestety implementacja jest trudna, ponieważ smartfony, tablety mają różne rozmiary i rozdzielczości; dlatego nie ma ustalonego formatu, który idealnie wyświetlałby treść na „każdym” urządzeniu.

Oto kilka wskazówek, które pomogą Ci zoptymalizować witrynę pod kątem urządzeń mobilnych.

Unikaj tworzenia osobnej witryny dostosowanej do urządzeń mobilnych:

unikaj tworzenia osobnej witryny przyjaznej dla urządzeń mobilnych

Aby ułatwić wdrożenie, czasami projektanci projektując witrynę na urządzenia mobilne, decydują się na wycięcie treści w celu dopasowania i części, które nie będą wyświetlane na telefonie komórkowym. Nie możemy jednak kontrolować rodzaju treści, które użytkownicy chcą oglądać, i nie można utworzyć oddzielnej przestrzeni na urządzenia mobilne oprócz komputera.

Google będzie Cię karać, jeśli dowie się, że masz identyczne treści dla dwóch tych samych witryn – jedna jest wersją na komputery stacjonarne i / lub laptopy, a druga wersją mobilną, ponieważ jest tylko jeden Google. Dlatego nawet nie myśl o stworzeniu osobnej witryny na urządzenia mobilne.

Skorzystaj z responsywnych projektów:

używaj responsywnych szablonów projektowych

Elastyczne projektowanie pozwala twórcom stron internetowych stworzyć stronę internetową, którą można łatwo przeglądać na różnych rozmiarach urządzeń. Zmniejsza to ilość dodatkowego wysiłku, który programiści muszą włożyć, aby strona była kompatybilna z urządzeniami o różnych rozmiarach.

Responsywny projekt wykorzystuje elastyczne obrazy, elastyczne układy i rosnącą liczbę zapytań o arkusze stylów. Gdy ten responsywny projekt zostanie zastosowany w witrynie, strona będzie w stanie wykryć rozmiar ekranu i pozycję użytkownika, a następnie odpowiednio dostosować układ strony.

Skorzystaj z zapytań o media:

Zapytania o media pozwalają zapytać urządzenie o jego rozmiar, a następnie skierować przeglądarkę do wyświetlania rzeczy zgodnie z zestawem CSS ustawionym w kodzie:

przykładowe zapytania do ekranu mediów

Zapytania o media są kluczowym elementem w witrynach najbardziej przyjaznych dla urządzeń mobilnych, ale wcześniej należy upewnić się, że system jest odpowiednio skonfigurowany dla wszystkich aktualnie używanych urządzeń – nie tylko dwóch lub trzech najpopularniejszych urządzeń mobilnych. Zachowaj listę urządzeń lub możesz wykupić subskrypcję, aby uzyskać te informacje.

Skorzystaj z ram takich jak Bootstrap:

W interfejsie możesz korzystać z dowolnie dostępnych ram, takich jak Podstawa 3, Szkielet itp. Najlepsze darmowe ramy to Bootstrap na Twitterze.

użyj frameworka bootstrap

Bootstrap to front-endowa platforma zaprojektowana w celu szybkiego i nieuchronnego skalowania strony internetowej na dowolnym urządzeniu. Uruchomienie wstępnie zbudowanego systemu jest znacznie łatwiejsze niż tworzenie nowego kodu dla każdej możliwej kombinacji na własną rękę (a nawet testowanie go) – i jest znacznie mniej uciążliwe.

Ale zanim zaczniesz używać dowolnego frameworka, sprawdź, czy jest on w pełni zgodny z twoją witryną i celami. Im więcej niestandardowych kodów i funkcji w witrynie, tym trudniej będzie upewnić się, że wszystko działa płynnie na urządzeniu mobilnym; skorzystaj z pomocy eksperta, jeśli napotkasz jakiekolwiek trudności.

Zawsze korzystaj z wirtualnego metatagu:

Rzutnia jest wirtualnym obszarem używanym przez silnik interpretujący przeglądarkę do określania sposobu skalowania i wielkości zawartości. Powiedziawszy to, jest to kluczowy kod podczas budowania doświadczenia na wielu urządzeniach. Bez tego kodu Twoja witryna nie będzie działać dobrze na urządzeniach mobilnych.

Tag rzutni mówi przeglądarce, że strona musi zmieścić się na ekranie. Istnieje wiele innych konfiguracji, o których kontrolowanie można powierzyć rzutni. Oto zalecany do użycia na początku dokumentu:

Zero w prostszej konstrukcji:

używaj prostego responsywnego projektu

Istotna różnica między witrynami na komputery stacjonarne i urządzenia mobilne polega na tym, że ludzie wolą proste projektowanie witryn podczas przeglądania na urządzeniach mobilnych. Jest to rzeczywistość, jak wszystko inne – duże i skomplikowane rzeczy stają się wolne na urządzeniach mobilnych, a jednym z głównych wymagań użytkowników jest natychmiastowe udostępnianie zawartości witryny.

Utrzymanie prostoty projektów ułatwia także zwrócenie uwagi widzów na treści, które chcesz, aby zobaczyli – użytkownicy urządzeń mobilnych mają bardzo krótki okres uwagi i w twoim najlepszym interesie jest, aby projekt był prosty, a nie inwestowanie w kompleks motyw.

Nigdy nie ignoruj ​​rozmiaru czcionki i rozmiaru przycisku:

Rozmiar czcionki i rozmiar przycisku na stronie mają duże znaczenie dla urządzeń mobilnych. Rozmiar czcionki powinien wynosić co najmniej 14 pikseli. Może to wyglądać na duże, ale jest lepsze niż zmuszanie użytkownika do powiększania treści; ułatw im to, dostosowując czcionkę do maksymalnej przejrzystości. Jedynym czasem, w którym powinieneś użyć mniejszej czcionki (do minimum 12 pikseli), jest etykieta lub formularze.

nie ignoruj ​​rozmiaru czcionki

Teraz, gdy zbliżasz się do przycisków, im większy przycisk, tym lepiej – zmniejszy to ryzyko, że użytkownicy klikną niewłaściwy przycisk lub go nie klikną. Podobnie jak wytyczne Apple zalecają rozmiar przycisku co najmniej 44 na 44 piksele. Dzięki tym wytycznym polepszysz komfort użytkowania i zwiększysz współczynnik konwersji dla handlu elektronicznego.

Zwiększ rozmiar obrazu:

W przypadku urządzeń mobilnych celem jest jak najmniejszy rozmiar pliku dla obrazów, a jednocześnie wyglądać ostro i bogato na każdym ekranie, który był oglądany. Powodem jest to, że przepustowość urządzenia mobilnego jest znacznie mniejsza w porównaniu do komputera stacjonarnego lub laptopa, a zatem powoduje dłuższy czas ładowania.

Dlatego jeśli masz zamiar zmusić widzów do pobrania pliku 1 MB tylko w celu wyświetlenia miniatury, będą zirytowani i opuszczą witrynę.

Przyjazność dla urządzeń mobilnych to nie tylko dobra strona – ale także poprawa komfortu użytkowania i czasu ładowania. Zmniejszenie rozmiaru obrazu zużywa mniej danych (zapisywanie danych z ograniczonych planów danych), pomaga szybciej załadować stronę i pozostawia pozytywne wrażenie na Twojej stronie.

Pozbądź się domyślnego powiększenia:

Automatyczne powiększanie może popsuć elementy układu, szczególnie w przypadku obrazów i nawigacji. Może wydawać się mały lub zbyt duży w twoim układzie. Aby rozwiązać ten problem, użyj metatagu rzutni, aby skonfigurować niestandardowe zmienne w treści. Upewnij się, że dodajesz znacznik do kodu HTML:

Spróbuj użyć standardowych czcionek:

Niestandardowe, kreatywne czcionki sprawiają, że witryna wygląda ładnie, ale w przypadku urządzeń mobilnych użytkownicy nie lubią monitów o pobranie czcionki w celu wyświetlenia strony internetowej. Są szanse, że nie pobiorą czcionki i nie przejdą na inną stronę.

Chociaż większość czcionek jest zainstalowana na urządzeniu mobilnym, dzięki czemu będziesz mógł używać ich w projekcie swojej witryny. Jest jednak jeszcze jedna rzecz do zapamiętania – niektóre czcionki są łatwiejsze lub trudniejsze do przystosowania do różnych rozmiarów, dlatego upewnij się, że sprawdziłeś czytelność czcionki przed użyciem jej w swoim projekcie.

Pamiętaj, kierunki:

Przeciętny komputer stacjonarny lub laptop jest poziomy, oczywiście przewijamy w górę iw dół, ale jest on szeroki. Z drugiej strony smartfony są w większości eleganckie i oszczercze, stąd szerokość treści może się różnić i dlatego należy rozważyć. Tworząc filmy, obrazy i listy rozwijane, pamiętaj, w jakim kierunku będą podążać ludzie podczas przeglądania treści.

Nie bój się polegać na tym, że profesjonalista naprawi Twoją witrynę i sprawi, że będzie przyjazna, jeśli coś zawiedzie. Może to wymagać pewnej inwestycji, ale przy rosnącej liczbie użytkowników mobilnych i zaktualizowanym algorytmie Google ta inwestycja może okazać się obliczona.

Na wynos:

Ponieważ świat mobilizuje się, bardzo ważne jest, aby Twoja witryna była przyjazna dla urządzeń mobilnych, a tak naprawdę jest to coś ponad oczekiwania, tylko wtedy możesz przyciągnąć użytkowników do swojej witryny. Przed rozpoczęciem pracy z witryną zapoznaj się ze wskazówkami dotyczącymi przyjazności dla urządzeń mobilnych i zasięgnij opinii ekspertów. Mam nadzieję, że te wskazówki pomogą Ci dostosować witrynę do urządzeń mobilnych. Twoja witryna nie jest jedyną rzeczą, która musi być dostosowana do urządzeń mobilnych, upewnij się, że zarządzanie społecznością jest również dostosowane do urządzeń mobilnych.

Earleen Brown współpracuje z renomowaną firmą SEO Services, wiodącą firmą SEO w Indiach. Firma w zasadzie jest firmą IT świadczącą usługi Usługi SEO Indie i bardzo jej pomogła w poprawie umiejętności pisania.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Оцените статью
    Понравилась статья?
    Комментарии (0)
    Комментариев нет, будьте первым кто его оставит

    Комментарии закрыты.

    Adblock
    detector