Częsty kryzys w responsywnym projektowaniu i jak je rozwiązać

Ponieważ nic nie jest osadzone w solidnej podstawie i elementach układu, które są tak elastyczne jak woda, nie jest to nawet „projektowanie” w tradycyjnym sensie. Responsywne projektowanie idzie w parze z przepływem urządzeń na rynku (i dostosowuje się do niego). Wszyscy eksperymentują i bycie projektantem stron internetowych nigdy nie było tak wspaniałe.

Jest tak wiele praktyk projektowania responsywnego, że trudno spojrzeć na jeden zestaw i nazwać je najlepszymi. Nie możemy mieć listy „Co robić”. Możemy jednak uczyć się na błędach innych.

Oto czego nauczyłem się projektując responsywną sieć:

Projekt dla Twojej publiczności. Nie siebie.

Załóżmy, że próbujesz dotrzeć do odbiorców w większości indyjskich za pomocą superszybkiej, znakomicie zaprojektowanej witryny i doskonałego UX dla tych użytkowników mobilnych. Jest tam 1,2 miliarda ludzi; powinno to być natychmiastowe, potężne uderzenie. Same liczby są na twoją korzyść. Albo byłyby, gdybyś wiedział, że zaledwie 13% ludzi ma smartfony. (Źródło: Google Mobile Planet).

To tylko jeden z powodów, dla których nauka i zrozumienie odbiorców jest kluczowe.

Różnorodność kulturowa, wiek, płeć, zawód, język, popularne urządzenia itp. mogą być bardzo ważnymi czynnikami, które mogą stworzyć lub zepsuć Twoją markę/stronę internetową.
To łatwiejsze niż się wydaje.

Wiadomo, że projektanci tracą z oczu, dla kogo projektują.

Więc jeśli nie masz pod ręką architekta UX, dobrze zrobisz, jeśli sam to zbadasz. W końcu zastanowi się nad twoją pracą, więc nie wzruszaj ramionami i nie mów, że to nie twoja mocna strona.

W przypadku numerów telefonów komórkowych skorzystaj z serwisu Google Mobile Planet. Zapytaj swoich klientów o ich odbiorców.

Jeśli potrafisz postawić się w sytuacji swoich odbiorców, będziesz w stanie tworzyć projekty intuicyjnie przyjazne dla użytkownika. To nie jest nauka o rakietach, tylko podstawowa ludzka psychika.

„Makieta” potrzebuje opowieści

Twój projekt responsywny będzie niekompletny bez interakcji. To samo dotyczy twojej makiety.

Twój projekt (prawdopodobnie) nie będzie jednostronicowym koncertem, na którym pojawia się treść i nic więcej się nie dzieje.

Żadnych interakcji, stanów, animacji ani efektów: w zasadzie wszystko, co może sprawić, że Twoja witryna odniesie sukces (lub porażkę, jeśli zostanie użyte bez zastanowienia) zostaje usunięte. Chociaż Style Tiles jest klasykiem nie bez powodu (jak powiedział jego założyciel: „Aby rozpocząć rozmowę na temat projektu”), jest zbyt prosty, aby był wyrafinowany w dzisiejszych terminach projektowych.

ZAINWESTUJ CZAS W TWORZENIE INTERAKTYWNYCH PROTOTYPÓW SWOICH POMYSŁÓW. WSPÓŁPRACUJ Z TYMI SZEROKO PRZED ROZPOCZĘCIEM ROZWOJU FRONTENDOWEGO.

Nie rozrzucaj pomysłów. Słyszałeś o opowiadaniu historii?

Opowiedz swoim klientom responsywną, interaktywną historię, używając jedynie swojego prototypu i intuicji.

Używaj narzędzi takich jak Balsamiq, Axure, UXPin itp., aby tworzyć wizualne wersje tych „historii”. Pogłaszcz ich wyobraźnię słowami; nakarm go dobrze wykonanym prototypem.
Posłuży to do usprawnienia prac projektowych i programistycznych na później i da ci nieco zdefiniowaną ścieżkę, której możesz się trzymać. A jako bonus: pierwsze wrażenia nadal mają znaczenie. Dobry prototyp pokazuje, że jesteś entuzjastycznie nastawiony do projektu.

Treść: Po pierwsze, widoczne i elastyczne. Zawsze

Powodem, dla którego zaczynasz odpowiadać, jest to, aby Twoja wiadomość miała szerszy zasięg dzięki jednolitemu dostępowi i niezależnemu od urządzenia.

Pokonujesz cały cel responsywnego projektowania, ukrywając swoje treści.

Twoi mobilni odbiorcy i tak będą pobierać dane, więc po co je ukrywać? Utwórz spis elementów treści. Określ, które elementy znajdują się na wszystkich stronach, a które na konkretnych. Na przykład przyciski CTA mogą znajdować się na każdej stronie lub na konkretnych (takich jak strona docelowa, strony z powiązanymi zasobami itp.).

Zaczynasz od umieszczenia elementów treści na początku, a następnie budujesz je od tego miejsca. Na końcu idą dzwonki i gwizdki.

Po pierwsze: poznaj cele użytkowników i to, czego chcą od witryny, a następnie dostosuj zawartość, aby mieć łatwy dostęp na ich urządzeniach.

Zamiast ściskać artykuł składający się z miliona słów, aby zmieścić się na stronie mobilnej, daj użytkownikom szansę na przeglądanie informacji bez przewijania w nieskończoność. A skrypty front-endowe lub po stronie serwera nie są (faktyczną) odpowiedzią na to.

Dobrym sposobem na to jest użycie krótkiego i dokładnego podsumowania do podglądu .

Pozwól użytkownikowi zdecydować, czy chce przewijać Twoje treści do końca. TL; DR jest powszechny wśród wszystkich (nawet w mediach, dlatego otrzymujemy artykuły publikowane bez faktycznego sprawdzania faktów i oparte wyłącznie na szumie). Dodaj więc sekcję na końcu treści i ułatw to.

Po drugie: PODAJ użytkownikom pełne informacje, a nie tylko ich fragmentaryczną wersję.

Używaj responsywnych kolumn i krojów pisma. Użyj tabel responsywnych Zurb dla tabel danych płynów. Kompresuj media (użyj CDN i buforowania, aby zwiększyć wydajność).
Treść to Twoja wiadomość. Upewnij się, że jest wyraźny i widoczny, niezależnie od wielkości urządzenia.

Bonus: Content-first zwraca uwagę na hierarchię treści, co sprawia, że ​​projektowanie nawigacji przebiega płynniej.

Przestrzegaj ograniczeń i możliwości urządzenia

Kiedy mówimy o „ukierunkowaniu na urządzenia mobilne” lub „progresywnym ulepszeniu”, czy naprawdę rozumiemy i dostosowujemy się do absolutnego minimum? Oto podsumowanie tego, czym powinno być „absolutne minimum”:

• Użyteczna szerokość ekranu: minimum 120 pikseli.
• Obsługa języka znaczników: XHTML Basic 1.1 dostarczany z typem zawartości application/xhtml + xml.
• Kodowanie znaków: UTF-8
• Obsługa formatu obrazu: JPEG, GIF 89a.
• Kolory: 256 kolorów, minimum.
• Obsługa arkuszy stylów: CSS Level 1, CSS Level 2 @media rule wraz z urządzeniem przenośnym i wszystkimi typami multimediów
• HTTP: HTTP/1.0 lub nowszy HTTP1.1
• Skrypt: brak obsługi skryptów po stronie klienta.

W oparciu o te specyfikacje nie jest trudno stworzyć funkcjonalny projekt. Problem narasta.
Warto wziąć pod uwagę wymiary urządzenia, ale to dopiero początek, a nie całość. Ważne jest tutaj minimalizowanie i normalizowanie skryptów (wydajność i doświadczenie), projektowanie czystych interfejsów z dbałością o wystarczającą ilość białych znaków (do stukania), przestrzeganie ograniczeń łączności i obciążenia urządzeń (wydajność) oraz zawsze rygorystyczne testowanie.

Proszę zmniejszyć obciążenie

Nie chcę się rozwodzić nad tym tematem (mamy wiele opinii na ten temat), ale nie można zaprzeczyć, że szybkość strony ma znaczenie dla wyższych pozycji w rankingu i lepszego doświadczenia użytkownika.

Mówiąc najprościej: jeśli Twoja strona ładuje się wolno, nikt nie będzie zawracał sobie głowy czekaniem, aż nadrobi zaległości.

Podejście takie jak mobile-first faktycznie sprawdza się w tym przypadku bardzo dobrze. W progresywnym ulepszaniu zaczynamy od minimum wszystkiego: elementów interfejsu użytkownika, funkcji i faktu, że projektujemy dla najwęższych przepustowości wszystkich urządzeń. Ci, którzy wciąż potępiają zalety podejścia mobile-first, zgodzą się, że stawia to na uwadze wydajność i szybkość ponad wszystko inne .

Dodatkowo, i nie powinieneś o tym przypominać, musisz kontrolować rozmiar swoich multimediów.

Dlatego zastosuj CDN (możliwe w przypadku witryn o średnim i dużym natężeniu ruchu) i techniki programowania zaplecza, które w szczególności zmniejszają obciążenie stron. Użyj buforowania. Popraw postrzeganą wydajność (jak szybko witryna „poczuje się” dla użytkownika), zaznaczając odpowiednie pole przed zapisaniem obrazu JPG do Internetu.

Zachowaj szczupły projekt i przycinaj go (co najmniej dla wszystkich klientów i użytkowników).

TL; DR

Oto czego nauczyłem się projektując jedną responsywną sieć:

• Projekt dla publiczności. Poszukaj trochę i użyj Google Mobile Planet (i innych podobnych narzędzi) do liczb.
• Szkielet może zostać ożywiony przez historię. „Prototyp” oznacza wstępną wersję urządzenia/systemu. Zrób to coś, co naprawdę działa. Korzystaj z interaktywnych narzędzi do prototypowania.
• Spraw, aby treść była widoczna i elastyczna. Nie ukrywaj treści przed telefonami komórkowymi, gdy i tak zostanie pobrana. Jeśli jest jeden oryginalny post, dodaj krótkie, trafne podsumowanie, które lepiej nadaje się do czytania na telefonach komórkowych.
• Szanuj ograniczenia i możliwości urządzenia. Odłóż debatę myszą/dotknij palcem lub odłóż na bok wymiary, zaprojektuj minimalną specyfikację urządzenia używanego przez docelowych odbiorców.
• Zwróć uwagę na wydajność. Nie tylko dla lepszych rankingów wyszukiwania, ale także dla doświadczenia.

Biografia autora: Lucy Barret jest związana z HireWPGeeks Ltd. Dostarcza usługi konwersji HTML na WordPress i ma zespół doświadczonych programistów, którzy jej pomogą. Jest także zapaloną blogerką i uwielbia dzielić się swoją wiedzą z dużą społecznością WordPressa. Śledź jej firmę w sieciach społecznościowych, takich jak Facebook i Google+.