Jak przeprojektować stronę internetową, aby wyglądała niesamowicie na urządzeniu mobilnym?
Opublikowany: 2016-01-24[ Proto .io to narzędzie do prototypowania aplikacji mobilnych używane przez przedsiębiorców i startupy do tworzenia w pełni interaktywnych realistycznych prototypów, które wyglądają i działają jak prawdziwe aplikacje.]
Piętnaście lat temu przeprojektowanie strony internetowej było o wiele prostszym przedsięwzięciem – po prostu zdecydowałeś, jak będzie wyglądać Twój pulpit, odpowiednio zorganizowałeś zawartość i zbudowałeś witrynę. To niewiarygodne, że niektórym witrynom nadal brakuje prawdziwego doświadczenia mobilnego, niezależnie od tego, czy jest to całkowicie oddzielna strona internetowa, czy dobrze zaplanowany projekt responsywny.
Projektowanie może czasem wydawać się niekończącą się grą w nadrabianie zaległości, ale ci eksperci od aplikacji mobilnych mogą pomóc Ci poprowadzić Cię przez proces przeprojektowania Twojej strony internetowej, tak aby wyglądała świetnie na dowolnym urządzeniu, komputerze lub telefonie komórkowym.
Jak przeprojektować stronę internetową, aby uzyskać przystojne wrażenia mobilne?
Handsome (@HandsomeMade) to firma zajmująca się projektowaniem i technologią, której podstawowe wartości obejmują „myślenie zorientowane na człowieka na każdym poziomie” oraz „celowo piękne i zachwycające oprogramowanie”. Dyrektor kreatywny Brandon Termini i dyrektor techniczny Alex Zub wyjaśniają, w jaki sposób stosują te zasady do przeprojektowania witryny mobilnej:
Mówi Termini, kluczem do przeprojektowania strony internetowej Handsome jest przyjęcie „podejścia do projektowania z myślą o urządzeniach mobilnych”, dzięki czemu wrażenia użytkownika są tak eleganckie i łatwe w użyciu, jak to tylko możliwe. „Jednym ze sposobów, w jaki stosujemy projektowanie z myślą o urządzeniach mobilnych, jest rozpoczęcie od mniejszych rozmiarów ekranu, co zmusza nas do maksymalnego uproszczenia interfejsu i umieszczenia na ekranie tylko tego, co naprawdę najważniejsze”.
Zub dodaje: „Kluczem jest wykorzystanie technologii i najlepszych praktyk – takich jak projektowanie responsywne i projektowanie adaptacyjne, wraz z ich kompatybilną implementacją techniczną. W przypadku wielu produktów sensowne jest trzymanie się responsywnych systemów siatki, co upraszcza nakład pracy wymagany do jej zbudowania, zachowując jednocześnie świetny wygląd na wszelkiego rodzaju ekranach”.
Jak przeprojektować stronę internetową, aby wyglądała pięknie na urządzeniach mobilnych?
Poprosiliśmy Terminiego o podzielenie się kilkoma najlepszymi praktykami w zakresie projektowania wizualnego. „Istnieją setki nakazów i zakazów, które opracowaliśmy przez lata”, mówi. Oto trzy najlepsze najlepsze praktyki, które stosuje w przystojnym:
- Przemyśl dokładnie swoją hierarchię układu. „Udany układ oznacza, że użytkownik powinien być w stanie przeprowadzić Cię przez to, co widzi/czyta w zamierzonej kolejności. Dobre wykorzystanie białej przestrzeni, teorii kolorów, typografii itp. odgrywają w tym kluczową rolę”.
- Używaj odpowiednio koloru. „Wybierz kolory odpowiednie dla Twojej marki i upewnij się, że dobrze ze sobą współgrają. Użyj koloru bohatera, który kojarzy się z ważnymi elementami interfejsu użytkownika, takimi jak przyciski wezwania do działania. Upewnij się, że używasz kolorów oszczędnie w odpowiednich miejscach, aby Twój użytkownik przepływał przez interfejs i nie utknął”.
- Typografia powinna być przyjemna dla oczu. „Upewnij się, że typografia jest odpowiednia dla marki i czytelna na urządzeniach, dla których projektujesz, i oszczędnie używaj ozdobnych czcionek”.
Testowanie przeprojektowania witryny mobilnej
Oczywiście po zbudowaniu witryny mobilnej musisz ją dokładnie przetestować, aby zapewnić użytkownikom doskonałe wrażenia. Mówi Termini: „Częste testowanie i dostosowywanie ma kluczowe znaczenie. Rozpocznij testowanie, gdy tylko pokażesz potencjalnym użytkownikom pierwsze odręczne szkice, i kontynuuj testowanie przez cały proces, aż do w pełni zbudowanych systemów. Skonfigurowanie tak, aby móc słyszeć, syntetyzować i powtarzać informacje zwrotne, jest bardzo ważne dla sukcesu każdego produktu”.
Polecany dla Ciebie:
Co oznacza przepis anty-profitowy dla indyjskich startupów?
W jaki sposób start-upy Edtech pomagają indyjskim pracownikom podnosić umiejętności i być gotowym na przyszłość...
Akcje New Age Tech w tym tygodniu: Kłopoty Zomato nadal, EaseMyTrip publikuje Stro...
Indyjskie startupy idą na skróty w pogoni za finansowaniem
Digital Marketing Platform Logicserve Bags Finansowanie INR 80 Cr, zmienia nazwę na LS Dig...
Raport ostrzega przed odnowioną kontrolą regulacyjną dotyczącą przestrzeni Lendingtech
Zub dodaje: „Zapewnienie jakości jest zasadniczą częścią tworzenia produktu, który jest używany na różnego rodzaju urządzeniach. A ponieważ praktycznie niemożliwe jest posiadanie w biurze każdego możliwego urządzenia, korzystamy z usług online, które zapewniają dostęp do dziesiątek „wirtualnych” urządzeń w chmurze, maksymalnie je automatyzując. Dzięki odpowiednim inwestycjom w automatyzację można łatwo i szybko przeprowadzić testy na różnych urządzeniach.”
Chcieliśmy dowiedzieć się jeszcze więcej o testowaniu i kontroli jakości przeprojektowania witryny mobilnej. W tym celu usłyszeliśmy od Simona Papineau, dyrektora generalnego Crowdsourced Testing(@crowdsourcingqa). Papineau stworzył Crowdsourced Testing, aby rozwiązać niektóre problemy, które napotkał podczas testowania wielu aplikacji mobilnych, stron internetowych, gier i nie tylko.
To, co działa na komputerze, nie zawsze działa na urządzeniach mobilnych — i na odwrót
Mówi Papineau: „Jedyną rzeczą, o której programiści często zapominają, jest to, że nie potrzebujesz takiej samej głębi lub tej samej treści w swojej witrynie mobilnej, którą wyświetlasz w witrynie na komputery. Intencja, sposób myślenia i cel użytkownika mobilnego są zupełnie inne. Odwiedzający nie spędzą 20 minut na telefonie, czytając historię Twojej firmy i jej drobne druki.
Zamiast tego daj im to, czego chcą, tak bezpośrednio i tak szybko, jak to możliwe. Jeśli to Twoje dane kontaktowe, umieść je bezpośrednio na stronie głównej, bez dodatkowego zamieszania”.
Jednym z wyzwań, mówi Papineau, jest zapewnienie, że przeprojektowanie witryny mobilnej będzie dobrze wyglądać i działać na wielu urządzeniach: „Testowanie, czy witryny są responsywne, może być bardzo czasochłonne i kosztowne. Najlepszą rzeczą, jaką firma może zrobić, jest skupienie się na 15-20 najlepszych urządzeniach, które stanowią większość jej wizyt. Zawsze znajdzie się urządzenie mobilne, na którym strona nie będzie wyglądać idealnie. Ale jeśli to urządzenie reprezentuje 0,05% odwiedzających, prawdopodobnie nie jest warte dodatkowego wysiłku programistycznego”.
Jak przeprojektować stronę internetową za pomocą projektowania responsywnego
Bob Bentz jest prezesem ATS Mobile (@atsMobile), agencji marketingu mobilnego oferującej pełen zakres usług, która nadzoruje przeprojektowywanie witryn internetowych dla klientów z wielu branż. Firma Bentz z pasją dba o to, aby witryna internetowa wyglądała i działała równie dobrze na urządzeniu mobilnym, jak na monitorze stacjonarnym o wysokiej rozdzielczości, a jednym z głównych sposobów, w jaki ATS Mobile osiąga to dla swoich klientów, jest stosowanie responsywnego projektowania.
Dlaczego projektowanie responsywne? Elementarz
„Responsywne projektowanie stron internetowych (RWD), najczęściej projektowane w HTML5, będzie prawdopodobnym wyborem w prawie wszystkich nowych kompilacjach witryn mobilnych” — mówi Bentz. „Można go również zaprojektować przy użyciu CSS3 i JavaScript. Responsywny projekt ma tę uderzającą zaletę, że jest bardzo elastyczny, ponieważ płynnie zmienia się w celu dostosowania do dowolnego urządzenia. RWD działa, wysyłając ten sam kod, niezależnie od urządzenia, a następnie zmieniając go po stronie klienta, dzięki czemu ta sama strona internetowa może być wyświetlana na dowolnym urządzeniu.”
Aby zobaczyć, jak działa responsywny projekt, wyświetl ten wpis na blogu na ekranie komputera, jeśli jeszcze tego nie zrobiłeś (poczekamy!). Zauważysz, że istnieje wiele rozmiarów okien, przy których interfejs użytkownika „przełamuje się” i zmienia kolejność, dzięki czemu strona wygląda inaczej w zależności od używanego urządzenia (i wielkości okna wewnątrz tego urządzenia).
Jak więc dokładnie działa projektowanie responsywne — i dlaczego warto go wykorzystać do przeprojektowania witryny? „Redesign responsywnej strony internetowej wyświetla ten sam kod HTML pod tym samym adresem URL, niezależnie od tego, czy urządzeniem użytkownika jest komputer stacjonarny, tablet, phablet, smartfon, telefon z internetem czy urządzenie do noszenia (takie jak Apple Watch)” – mówi Bentz. „Może również reagować inaczej w zależności od rozmiaru ekranu witryny. Deweloperzy mogą decydować, jakie grafiki i treści będą wykorzystywane przez użytkowników telefonów komórkowych i tabletów. Tekst i obrazy można dostosowywać w zależności od przeglądarki lub rozmiaru ekranu”.
Dzięki responsywnemu projektowi ubezpieczasz się przed dokonaniem nowej aktualizacji za każdym razem, gdy coś zmieni status quo urządzenia mobilnego. „Kiedy nowe urządzenie trafia na rynek i uzyskuje dostęp do Twojej witryny, nie jest wymagane dodatkowe programowanie, jeśli witryna jest zbudowana w oparciu o responsywny projekt” — mówi Bentz. „Co najważniejsze jednak, projektowanie responsywne jest zalecaną przez Google najlepszą praktyką projektową. W przypadku wielu witryn RWD zapewnia rozsądną równowagę między przyjaznością dla urządzeń mobilnych a łatwością wdrożenia”.
Najlepsze praktyki w responsywnym projektowaniu wizualnym
Według firmy Bentz, uwzględnienie następujących najlepszych praktyk pomoże sprawić, by Twoja responsywna strona internetowa wyglądała i działała jak najlepiej:
- Prosty, efektowny nagłówek. „Nagłówek i masthead powinny być proste, aby nie odrywać od kluczowych punktów sprzedaży. Logo jest kluczowym wizerunkiem marki; zbyt poziome logo może nie wyglądać dobrze na mniejszych pionowych ekranach”.
- Łatwa w obsłudze nawigacja. „Nawigacja jest znacznie trudniejsza na małym ekranie. Często projektanci używają przycisku nawigacyjnego przedstawionego trzema poziomymi liniami, zwykle w prawym górnym rogu witryny. Nazywa się to „menu hamburgerów”, ponieważ wygląda jak burger otoczony bułką. Niektóre witryny korzystają z nawigacji po lewej stronie, która może rozwijać się na zewnątrz, aby objąć większą część ekranu”.
- Mnóstwo obrazów. „Trudno umieścić zbyt wiele obrazów na ekranie telefonu komórkowego, ale słowa mogą szybko przytłoczyć interfejs użytkownika. Dlatego projektanci często używają karuzeli obrazów, które pozwalają użytkownikom przeglądać wiele obrazów produktów zamiast ograniczać ekran kopią”.
- Inteligentne wykorzystanie stopki. „Konsumenci są przyzwyczajeni do używania stopki jako narzędzia nawigacyjnego i nie zajmuje ona tak cennego miejsca, jak nagłówek powyżej. Powinien również zawierać bardzo ważny link „Skontaktuj się z nami”.
Wspaniały przeprojektowanie strony internetowej zaczyna się od wspaniałego prototypu
Nauczenie się, jak przeprojektować witrynę internetową pod kątem urządzeń mobilnych, to nie lada wyczyn, ale posiadanie potężnego narzędzia do szybkiego prototypowania, które pomoże Ci przetestować działanie, robi największą różnicę. Po przycięciu kopii, skróceniu elementów i ustaleniu schematu nawigacji, możesz szybko uzyskać informację zwrotną od użytkowników, czy przeprojektowanie Twojej witryny mobilnej jest nadal użyteczne i intuicyjne. Następnie, jak zasugerował Termini, kontynuuj iterację, aż będziesz mieć prototyp, z którego jesteś naprawdę dumny.