Projektowanie witryn mobilnych jest skomplikowane, ponieważ jedna mobilna wersja witryny może nie być kompatybilna z każdym urządzeniem. Projektanci muszą zdawać sobie sprawę z najlepszych praktyk projektowych, aby Twoja mobilna obecność była znacząca i wartościowa.
Wśród twórców stron internetowych ciągle trwa debata na temat tego, który sposób tworzenia witryny zoptymalizowanej pod kątem urządzeń mobilnych jest najlepszy. Istnieją trzy wiodące metody opracowywania witryny mobilnej.
To są:
- Elastyczne projektowanie stron internetowych.
- Dedykowane strony mobilne.
- RESS: Programowanie po stronie serwera renderuje CSS i HTML, w zależności od typu urządzenia.
Każda metoda ma swoje wady i zalety. Twórca stron internetowych musi być świadomy każdej techniki implementacji najlepszej dla danej sytuacji.
3 sposoby projektowania witryny mobilnej
Responsive Web Design (RWD)
RWD polega na zapytaniach o media CSS3, aby wyrównać układ strony internetowej z rozmiarem obszaru wyświetlania urządzenia. Ten sam kod HTML służy do prezentacji różnych układów strony na tablety, urządzenia mobilne, komputery stacjonarne i inne gadżety.
Korzyści:
- Twoja strona internetowa będzie miała podobne treści i znaczniki HTML, więc użytkownicy mobilni będą mieli takie samo doświadczenie, niezależnie od rodzaju urządzenia, z którego korzystają.
- Pojedynczy adres URL ułatwia użytkownikom linkowanie i udostępnianie treści. (Jeśli strona internetowa jest dostępna pod więcej niż jednym adresem URL, użytkownicy mogą się pomylić).
Wady:
Nie można oddzielnie optymalizować zawartości mobilnej. Dlatego projektant używający RWD nie może dostosowywać treści osobno dla użytkowników mobilnych.
Według danych z stycznia 2013 r. Z archiwum HTTP, średnia strona internetowa to około 1,3 MB. Jednak większość witryn RWD jest stosunkowo większa. Ten większy rozmiar zmniejsza wydajność witryn mobilnych, dzięki czemu są wolniejsze.
Użytkownicy mobilni są bardziej dostosowani do wzorców projektowych interfejsu użytkownika mobilnego. Co więcej, użytkownicy mobilni są przyzwyczajeni do wielozadaniowości. O ile struktura nawigacji nie jest dostosowana do konkretnych urządzeń, użytkownicy mogą napotkać problemy podczas wykonywania kilku zadań jednocześnie.
Dedykowane witryny mobilne
Ta metoda poprawia wrażenia użytkowników mobilnych, tworząc całkowicie oddzielną witrynę.
Korzyści:
- Prostota zarządzania: wymagane są osobne zmiany na stronach mobilnych i stacjonarnych. Wprowadzone zmiany są ograniczone do każdej odpowiedniej wersji. Oznacza to, że zmian przeznaczonych dla platformy mobilnej nie można uzyskać z komputera.
- Tworząc witrynę mobilną, łatwiej jest ją usprawnić i zoptymalizować specjalnie dla tej grupy odbiorców.
- Treść i struktura nawigacji mogą być dostosowane do użytkowników mobilnych.
Wady:
Udostępnianie strony internetowej za pośrednictwem mediów społecznościowych staje się trudniejsze, ponieważ dzięki dedykowanym stronom mobilnym istnieje wiele adresów URL stron. Gdy użytkownicy komputerów klikają mobilne adresy URL udostępnione na platformach mediów społecznościowych, mogą nieumyślnie otrzymać mobilną wersję witryny, a nie wersję komputerową.
Aby uniknąć powielania problemów z treścią, twórca stron internetowych musi używać tagów metadanych rel = "alternative" i rel = "canonical". Jeśli użytkownik mobilny przeszuka Google i kliknie URL na komputerze, użytkownik wyświetli wersję komputerową lub zostanie przekierowany do mobilnej wersji strony. Jeśli wersja mobilna nie istnieje, użytkownik otrzyma komunikat o błędzie.
Stworzenie zupełnie innej strony dla użytkowników mobilnych oznacza, że strona będzie dostosowana specjalnie do użytkowników mobilnych. Aby jednak osiągnąć ten cel, twórcy stron internetowych muszą ograniczyć funkcjonalność i zawartość, co okazuje się dla nich koszmarem.
Responsive Web Design+ Składniki po stronie serwera (RESS)
Ta metoda zależy od programowania po stronie serwera w celu zapewnienia niestandardowego kodu HTML i CSS dla różnych urządzeń. Kod dla użytkowników mobilnych będzie inny niż dla użytkowników komputerów stacjonarnych.
Głównym celem tej implementacji jest poprawa wydajności witryny. Ta metoda działa dobrze w połączeniu z responsywnym wyglądem sieci Web. Dlatego ta implementacja może być określana jako Responsive Web Design + komponenty po stronie serwera (RESS).
Korzyści:
- Struktura nawigacji może być dostosowana do różnych zadań wykonywanych przez użytkowników komputerów i urządzeń przenośnych.
- Programiści mogą usuwać elementy strony z kodu HTML i CSS, aby osiągnąć pożądany wygląd.
- Możliwe jest usunięcie niepotrzebnego kodu JavaScript z HTML, który zwalnia zasoby procesora, pamięć i pamięć podręczną urządzeń mobilnych.
Wady:
- Dynamiczny HTML zwiększa obciążenie serwera.
- Wykrywanie urządzenia nie może polegać.
- HTML i CSS są zoptymalizowane pod kątem wydajności mobilnej. Wersja Desktop wykorzystuje więcej żądań HTTP i Java Scripts.
Którą metodę wybrać?
Decyzja o zaprojektowaniu witryny zoptymalizowanej pod kątem urządzeń przenośnych zależy od sprzedawanych produktów, docelowych odbiorców, wymaganych inwestycji, konkurencji, współczynników konwersji itp. Metoda projektowania, która najlepiej zadziała, zależy w dużej mierze od formatów ekranu, systemów operacyjnych, przeglądarek i uchwały.
Większość responsywnych witryn z projektowaniem stron internetowych nie jest optymalnie wdrażana, dlatego te witryny wymagają więcej czasu. Ponieważ konkurencja jest zacięta, możesz stracić klientów, jeśli witryna działa wolniej. Użytkownik po prostu przejdzie na inną stronę, której otwarcie zajmuje mniej czasu. Chociaż możliwe jest tworzenie stron internetowych o krótszym czasie ładowania z dedykowanymi witrynami mobilnymi, istnieją również różne niedociągnięcia związane z tą implementacją.
RESS zapewnia korzyści RWD przezwyciężając jego dwie główne wady. Główną wadą RESS jest to, że wykrywanie urządzenia jest niewiarygodne. Musisz często testować nowe urządzenia, aby upewnić się, że proces nadal działa poprawnie.
Istnieją usługi takie jak DeviceAtlas, WURFL i inne, które mogą wykrywać nowe urządzenia. Będzie to bardzo pomocne w aktualizowaniu nowych urządzeń w bazie danych.
Projektowanie mobilne w Internecie jest skuteczne tylko wtedy, gdy witryna jest poprawnie wyświetlana na urządzeniu mobilnym. Mimo że projektanci mają zniechęcające zadanie do reprezentowania wszystkich istotnych elementów witryny na komputery w małym, mobilnym oknie, każdego dnia pojawiają się nowe techniki, które sprawiają, że witryny mobilne są lepsze, szybsze i bardziej w pełni funkcjonalne.
Mobilna strona internetowa Zdjęcie za pośrednictwem Shutterstock
15 komentarzy ▼
