Jak zbudować stronę mobilną (w 4 prostych krokach)
w październiku 2016 r.liczba użytkowników Internetu na telefonach komórkowych i tabletach po raz pierwszy przekroczyła liczbę użytkowników komputerów stacjonarnych. Ta zmiana paradygmatu posłużyła jako wezwanie do działania dla programistów, aby zaczęli ponownie rozważać całą swoją branżę. Od tego czasu Korzystanie z urządzeń mobilnych nadal rośnie i staje się jeszcze bardziej powszechne, a do obsługi tych użytkowników stosuje się wiele eleganckich rozwiązań do tworzenia stron internetowych.
te rozwiązania są w stanie zapewnić użytkownikom podobne wrażenia, jakie uzyskaliby na pulpicie, bez uszczerbku dla treści lub funkcji witryny. Podczas budowania witryny, która jest w stanie stworzyć to doświadczenie, może wydawać się zniechęcające, jest to o wiele łatwiejsze niż myślisz.
w rzeczywistości jest to tak proste, że przygotowaliśmy łatwy do naśladowania 4 przewodnik krok do tworzenia mobilnej strony internetowej, aby zacząć.
Wybierz podejście do projektowania stron internetowych
istnieje kilka rozwiązań, które możesz zastosować, aby stworzyć stronę przyjazną dla urządzeń mobilnych. Podczas gdy każde podejście do projektowania stron internetowych ma swoich zwolenników, którzy powiedzą ci, że jest najlepszy, powinieneś określić, który z nich odpowiada twoim potrzebom na podstawie własnego rozważenia informacji.
Responsive Web Design
Responsive web design (RWD) wykorzystuje elastyczne układy, które są możliwe dzięki zastosowaniu mediów opartych na proporcjach, rozszerzeń i siatek zaplecza. Oznacza to, że jeśli okno przeglądarki zostanie rozszerzone lub zakontraktowane, zawartość będzie podążać za nim i odpowiednio dostosować. Rezultatem jest strona internetowa, która wygląda podobnie zarówno na komputerze stacjonarnym, jak i mobilnym.
ten plastikowy interfejs użytkownika jest często porównywany do wody. Możesz wlać szklankę wody do szklanki, garnka lub dzbanka, a objętość wody pozostanie taka sama, pomimo zmiany naczynia.
Adaptive Web Design
w przeciwieństwie do RWD, Adaptive web design (AWD) nie opiera się na jednym zmieniającym się układzie. Zamiast tego używa różnych układów dla różnych urządzeń i rozmiarów ekranu. Oznacza to, że po zalogowaniu się na stronie internetowej, otrzymujesz stronę, która najlepiej odpowiada potrzebom Urządzenia, z którego aktualnie korzystasz.
na przykład niektórzy mogą wybrać utworzenie trzech stron internetowych: jednej dla smartfonów, jednej dla tabletów i jednej dla komputerów stacjonarnych. Wymagałoby to trzech różnych projektów, które pozostałyby „w gotowości”, dopóki nie zostaną wezwane przez każdego odwiedzającego. Zamiast uniwersalnej strony internetowej, AWD działa jako dostosowana brama dla wszystkich użytkowników.
podejście, które wybierzesz do stworzenia swojej mobilnej strony internetowej, to dopiero początek procesu projektowania.
Użyj kreatora stron internetowych lub CMS
po ustaleniu, jak chcesz, aby Twoja strona działała na różnych urządzeniach, jesteś gotowy do rozpoczęcia jej budowania! Platforma, na której tworzysz swoją witrynę, ma zasadnicze znaczenie dla wykorzystania Twojego mobilnego planu projektowego. Dla podstawowych użytkowników istnieją dwie opcje do rozważenia.
twórcy stron internetowych
twórcy stron internetowych biorą wszystkie domysły z projektowania stron internetowych i pozwalają stworzyć w pełni konfigurowalną i bogatą w funkcje stronę internetową w zaledwie kilka minut. Osiągają to, umożliwiając użytkownikom wybór motywu lub szablonu i po prostu przeciągnij i upuść funkcje, które lubią na swoich stronach internetowych i łatwo usuń te, których nie robią.
Większość kreatorów stron internetowych, w tym złoty standard Wix, pozwala użytkownikom po prostu określić, jak ich witryny będą reagować na urządzeniach mobilnych. Platforma Wix opiera się głównie na adaptacyjnych stronach internetowych, podczas gdy inne usługi, takie jak Weebly, polegają głównie na responsywnym projektowaniu. W zależności od rodzaju podejścia, które przewidziałeś dla swojej witryny, możesz zdecydować się na Kreator stron internetowych, który spełni Twoje potrzeby.
Systemy Zarządzania Treścią
System Zarządzania Treścią (CMS) jest najlepszą alternatywą dla dedykowanego kreatora stron internetowych. CMS, takie jak WordPress, polegają na nieco większej wiedzy o komputerze i internecie, ale mogą zapewnić więcej funkcji niż twórcy stron internetowych. Dodatkowo CMS oferuje zarówno projekty RWD jak i AWD.
podobnie jak w przypadku kreatorów stron internetowych, CMS może skorzystać z dowolnego podejścia do projektowania mobilnego, integrując je z wieloma motywami dostępnymi dla użytkowników. Te motywy mogą być po prostu bogate, jak te Znalezione w kreatorach stron internetowych, ale lepiej służą tym, którzy nie mają nic przeciwko pobrudzeniu rąk i nauczeniu się trochę o projektowaniu stron internetowych.
jeśli zdecydujesz się użyć CMS, możesz po prostu pobrać motyw gotowy na urządzenia mobilne, za darmo lub za opłatą, i użyć go do stworzenia swojej strony internetowej. Większość z tych motywów ma pełne wsparcie i regularne aktualizacje, więc nie musisz się martwić o utrzymanie i zarządzanie witryną.
Zaprojektuj stronę mobilną
po ustaleniu, na jakiej platformie zbudujesz swoją witrynę, jesteś gotowy do zaprojektowania i stworzenia swojej witryny. Niezależnie od tego, czy tworzysz bloga, portfolio, witrynę biznesową, czy nawet sklep eCommerce, możesz to zrobić przy użyciu standardowych zasad niezbędnych do każdego projektu witryny. Po zakończeniu projektu będziesz musiał po prostu przetestować swoją witrynę, aby sprawdzić, czy poprawnie reaguje (RWD) lub stworzyć inny projekt dla urządzeń mobilnych (AWD).
projektowanie witryny mobilnej jest prawie tak proste, jak projektowanie witryny na komputery stacjonarne, ale jest kilka rzeczy, o których warto pamiętać.
a. użytkownicy urządzeń mobilnych mają zazwyczaj ograniczoną przepustowość
należy zawsze pamiętać, że większość użytkowników urządzeń mobilnych korzysta z sieci komórkowych, które ograniczają ich przepustowość. W rezultacie ważne jest, aby Twoja witryna mobilna była lekka i wolna od zbyt dużej ilości treści, które mogą pożreć te kluczowe bajty.
b. Użytkownicy urządzeń mobilnych chcą szybko uzyskać istotne informacje
często użytkownicy urządzeń mobilnych odwiedzają witrynę, aby uzyskać istotne informacje o miejscach, które odwiedzają, takie jak godziny przechowywania lub numery telefonów. Jeśli te istotne informacje nie są dostępne szybko i wyraźnie, może to spowodować utratę klienta. Upewnij się, że witryna mobilna ma Szybkie linki do informacji kontaktowych i innych istotnych danych.
C. urządzenia mobilne są mniej wydajne
komputery stacjonarne i laptopy są zbudowane z kart graficznych i procesorów, które są w stanie obsłużyć duże obciążenie. Podczas gdy urządzenia mobilne są niezwykle wydajne, nie są zbudowane w ten sam sposób. Zamiast tego tracą funkcję na rzecz formy i w rezultacie nie mogą obsługiwać treści obciążonych procesorem w taki sam sposób, jak komputer.
jeśli Twoja witryna wymaga tego rodzaju poświęcenia zasobów, możesz pomyśleć dwa razy o obsłudze mobilnej publiczności tego samego rodzaju witryny.
organizuj zawartość
podczas tworzenia witryny mobilnej ważne jest, aby upewnić się, że użytkownicy mają dostęp do wszystkiego na komputerze, zachowując jednocześnie możliwość pracy na mniejszym ekranie. Istnieje kilka kwestii, o których należy pamiętać podczas organizowania treści.
a. Mobile First
Mobile First jest jednym z najnowszych ruchów w świecie projektowania. Oznacza to, że musisz najpierw zaprojektować swoją witrynę mobilną, zanim rozszerzysz ją na strony dla komputerów stacjonarnych i tabletów. Zawartość tworzoną na potrzeby witryny mobilnej można również załadować do wersji desktopowej.
takie podejście jest zatem pomocne w przypadku dynamicznie obsługiwanych i responsywnych stron internetowych, w których zawartość w wersji mobilnej jest identyczna z zawartością w witrynie stacjonarnej.
b. Mobile Second
jeśli masz już stronę internetową na komputery stacjonarne, organizowanie treści może być nieco trudniejsze, chociaż nie całkowicie niemożliwe. Najpierw określ elementy Witryny na pulpicie, które musisz pokazać w wersji mobilnej.
Zbierz dane użytkowników za pomocą standardowych narzędzi analitycznych, których używasz i dowiedz się:
- treści, które są najważniejsze dla odwiedzających.Co użytkownicy mobilni mają tendencję do ignorowania.Ścieżka, którą zazwyczaj podążają odwiedzający.
wykorzystaj zebrane spostrzeżenia, aby wiedzieć, co powinno, a co nie powinno iść na stronie mobilnej. Pomoże Ci to wyczyścić witrynę na pulpicie. Następnie Mapuj ścieżkę zawartości, którą będą przyjmować odwiedzający.
gdy masz dobry pomysł na wizualny przepływ swojej witryny, możesz łatwo rozłożyć wstępny projekt dla ekranów mobilnych i przejść od razu do tworzenia mobilnych stron internetowych.
c. Nawigacja
ekrany telefonów komórkowych są małe. Oznacza to, że należy zminimalizować opcje nawigacji mobilnej. Rozważ użycie szkła powiększającego lub trzyliniowego (hamburger) menu navicon. Gdy skończysz, przetestuj swoją witrynę na popularnych urządzeniach używanych przez nawet 90% użytkowników mobilnych.
D. Design for Touch
ponieważ nie jest możliwe kliknięcie prawym przyciskiem myszy lub najechanie palcami na urządzenie mobilne, musisz umieścić linki na swojej mobilnej stronie internetowej, aby upewnić się, że użytkownicy przypadkowo nie klikną niewłaściwych linków. Zrób to poprzez:
- udzielanie informacji zwrotnych za każdym razem, gdy ekran jest dotykany.Używanie przycisków do określania, gdzie użytkownicy mogą klikać, a gdzie nie.Przeprojektuj rozwijane menu.Minimalizacja wprowadzania tekstu.
i tu masz! Użyj tych informacji, gdy następnym razem będziesz musiał całkowicie przeprojektować witrynę komputerową do wyświetlania na urządzeniach mobilnych lub gdy tworzysz nową witrynę mobilną od podstaw.