Nic dziwnego, że niedawne sprawozdanie agencji ONZ, Międzynarodowa Unia Telekomunikacyjna , przewidywał, że na świecie będzie więcej subskrypcji mobilnych niż ludzi w ciągu najbliższych 9 miesięcy. "Rewolucja smartfonów" jest zdecydowanie na nas i tak w ostatnich latach eksplodowała mobilna konstrukcja internetowa.
Oznacza to, że programiści stron internetowych musieli zmierzyć się z projektowaniem witryn mobilnych, jeśli chcą konkurować i planować swoją firmę w przyszłości. Mając to na uwadze, wymyśliłem kilka wskazówek, aby dać programistom punkt wyjścia, z pewnymi rzeczami, o których należy pamiętać przed kontynuowaniem.
Szybkie spojrzenie na to, jak daleko sięgają urządzenia mobilne od czasu wprowadzenia iPada, potwierdza, że technologia mobilna to szybko rozwijająca się i ciągle zmieniająca się branża, dlatego warto zastanowić się, w jaki sposób można projektować w przyszłości.
Oznacza to, że nadążanie za najnowszymi trendami jest niezbędne, jeśli chcesz w jakiś sposób zapewnić, że strona będzie opłacalna za kilka lat. Reagujący projekt jest oczywiście wściekły w tej chwili i prawdopodobnie będzie to częścią twojego planu.
Chociaż można bezpiecznie założyć, że większość użytkowników będzie miała smartfony, warto wziąć pod uwagę, że nie wszystkie będą, a więc może zajdzie potrzeba włączenia tego do projektu. Warto przeanalizować grupę docelową na etapie planowania, aby móc poradzić sobie z typowymi używanymi urządzeniami, a także z zachowaniem użytkowników.
Użytkownicy mobilni odwiedzający witrynę internetową niekoniecznie uzyskują dostęp do stron internetowych w ruchu, dlatego warto o tym pamiętać. Często przeglądanie mobilne odbywa się podczas oczekiwania; w pociągu, w samochodzie, a nawet na kanapie w domu.
Oznacza to, że pozbycie się projektu, aby było zbyt uproszczone, może przynieść efekt przeciwny do zamierzonego. Jeśli masz witrynę bez szkieletów, która nie zawiera nic w treści, może to zniechęcić odbiorców, ponieważ Twoja witryna nie zapewnia prawdziwego użytku i może być traktowana jedynie jako przewymiarowana baner reklamowy.
Komórka w tych dniach jest używana tak samo jak, jeśli nie więcej, niż komputer stacjonarny do przeglądania Internetu, więc pamiętaj o tym podczas procesu projektowania i upewnij się, że Twoja strona jest łatwa w użyciu, a jednocześnie bogata w treść.
Optymalizacja witryn mobilnych jest również istotna, szczególnie w przypadku stron docelowych, ponieważ są to punkty wejścia na stronę internetową. Oznacza to, że strona mobilna powinna być zoptymalizowana pod kątem użytkownika, a także wyszukiwarki, aby zapewnić prostą nawigację, przejrzysty tekst, łatwe formularze za pomocą jednego kliknięcia oraz odpowiednie meta-informacje i znaczniki alt.
Rozmiary plików należy rozpatrywać pod względem masy, a na stronach docelowych należy umieścić wyraźne wezwanie do działania. Jeśli musisz używać formularzy, zachowaj je tak proste, jak to możliwe, z jak najmniejszą ilością pól wejściowych, aby użytkownik nie stał się sfrustrowany i nie wychodził.
To samo dotyczy działań; zachować je proste i używać tylko wtedy, gdy jest to konieczne. Chociaż może być fajnie mieć fantazyjny system nawigacji, jeśli nie można go używać, należy oczekiwać wysokiego współczynnika odrzuceń.
Tam, gdzie muszą być używane przyciski, upewnij się, że pomyślnie przeszły one "test kciuka", co oznacza, że powinieneś wygodnie naciskać przycisk kciukiem, bez uderzania w inną zawartość, która może spowodować wyświetlenie niepożądanej strony.
Optymalizacja jest czymś, co należy wziąć pod uwagę również przy tworzeniu responsywnej strony internetowej. Ostatnio toczą się liczne debaty na temat tego, jak projektowanie responsywne spowalnia Internet i czy zasadniczo oznacza to koniec responsywnych stron. Istnieją jednak warunkowe techniki ładowania, które mogą przyspieszyć działanie witryny, aby zapewnić, że urządzenia nie pobierają automatycznie pełnej wersji strony internetowej za każdym razem.
Zasoby CSS i JavaScript powinny być skompresowane, a do tego pomocna jest duża liczba oprogramowania open source. Na przykład, UglifyJS może być użyty z JavaScriptem do kompresowania kodu i Kompas może być użyty do tworzenia czystszych znaczników, a także sprajów i rozszerzeń, bez zbytniego zamieszania i ciężkiej pracy.
W przypadku projektowania responsywnego jedną z kluczowych rzeczy do zdefiniowania na początku jest siatka i punkty przerwania. Znowu jest ich wiele narzędzia online które pomogą ci zdefiniować kolumny, ich szerokość i rynny.
Niektórzy programiści lubią ustawiać pułapki na podstawie rozdzielczości, ale nie jest to najlepsze rozwiązanie, ponieważ na rynku jest tyle urządzeń mobilnych, a rozdzielczości zmieniają się z czasem.
Oznacza to, że punkty przerwania powinny być oparte na projekcie i zawartości, a nie na rozdzielczości. Aby przetestować punkty przerwania i siatki, okno przeglądarki może być używane podczas projektowania, aby zobaczyć, jak zachowuje się zawartość po zmianie rozmiaru.
Idealnie powinien płynąć naturalnie i możesz użyć tylu punktów przerwania, ile potrzebujesz, aby to osiągnąć.
Nie wszystkie mobilne systemy operacyjne są tworzone tak samo, jak wiecie, dlatego warto zapoznać się z wytycznymi, jeśli chodzi o tworzenie aplikacji na system Android i iOS i przeglądarki, których można na nich użyć.
Należy pamiętać, że użytkownicy będą przeglądać różne systemy operacyjne, a niektóre będą starszymi wersjami, dlatego warto upewnić się, że witryna mobilna jest wstecznie kompatybilna. W tym miejscu warto przejrzeć analitykę witryny głównej, jeśli jest taka możliwość, ponieważ będziesz mógł zobaczyć, z jakich urządzeń Twoi odbiorcy odwiedzają witrynę.
Oczywiście analiza analityki po ukończeniu witryny pomoże również wprowadzić niezbędne zmiany i nauczyć się na przyszłość.
Jak wszyscy wiemy, treść jest królem sieci ponownie, dlatego tak ważne jest planowanie modułów treści. Zachowanie modułów treści będzie musiało być zdefiniowane w celu zapewnienia, że będą wyświetlane tak, jak powinny, podczas gdy użytkownik nawiguje i podejmuje działanie.
Oznacza to, że musisz przejrzeć i zdefiniować, w jaki sposób zawartość wyświetla się podczas przełączania między pulpitem a ekranem mobilnym, aby określić, w jaki sposób moduły będą się układać i zmieniać kolejność.
W związku z tym często łatwiej jest to osiągnąć na etapie planowania. Zrób szkic, jak wyobrażasz sobie wyświetlanie treści, a następnie przeanalizuj, jak można to osiągnąć.
Staraj się jednak nie odkładać zbytnio na definiowanie wszystkiego. Podczas gdy twoje główne strony będą wymagać szkieletów, nie musi to oznaczać, że każda strona będzie. Tworzenie zestawu głównego dla rozmiarów ekranu i orientacji powinno być naprawdę wystarczające.
Najpierw zbuduj prototyp i dokładnie przetestuj, upewniając się, że wszystkie aspekty działają zgodnie z twoimi oczekiwaniami. Rozsądnie jest również mieć na uwadze użytkownika podczas testowania, upewniając się, że nawigacja jest prosta, a najlepiej maksymalnie trzy warstwy. Spróbuj znaleźć kogoś, kto nie jest technologicznie myślący, ale używa różnych urządzeń, aby przetestować stronę.
Projektowanie stron mobilnych jest koniecznym wyzwaniem, aby poradzić sobie z projektowaniem, aby zaoferować klientowi pełną obsługę. Podobnie jak wiele rzeczy w życiu, jednym z najważniejszych aspektów jest planowanie, tak abyś miał jasne pojęcie, jak iść dalej.
Efektywne planowanie i utrzymywanie użytkownika w umyśle pomoże pokonać większość przeszkód, na jakie napotkasz, a dokładne testy dostaną resztę. Zastanów się szybko, szybko i łatwo, z doskonałymi, przydatnymi treściami i nie możesz posunąć się za daleko.
Wyróżniony obraz / miniatura, obraz sieci mobilnej przez Shutterstock.