Przeglądam internet codziennie, na wielu urządzeniach. Używam mojego Macbooka Pro, iMaca, PC, iPada, iPhone'a i tak nawet mojego telewizora. Naprawdę przeszkadza mi to, gdy widzę strony internetowe, które nie są zoptymalizowane pod kątem większych rozdzielczości ekranu lub które trwają dwie minuty, aby załadować na moje urządzenie mobilne.
Wszyscy przyjęliśmy koncepcję responsywnego projektowania. Bardzo niewielu ludzi się temu sprzeciwia. W rzeczywistości, jedyną przekonującą odpowiedzią, jaką ostatnio słyszałem, jest to, że klient nie chce płacić za dodatkowy czas. Ale tak jak w przypadku każdej nowej praktyki, mity wyrosły, aby ją zrównoważyć.
Zobaczmy, czy możemy zgasić kilka z tych nieporozumień ...
Tak, sieć mobilna eksploduje i tak jest siłą napędową odpowiedzialnego projektowania, ale kiedy myślimy o elastycznym projekcie, musimy wziąć pod uwagę nie tylko mobilność. Wraz z wprowadzeniem wyświetlaczy Retina i przeglądarek gier wideo, internauci przeglądają teraz strony internetowe na większych rozdzielczościach ekranu iw wielu różnych kontekstach.
Staraj się uwzględniać różne konteksty użytkowników podczas projektowania i tworzenia responsywnych stron internetowych. Musisz zastanowić się, jakiego urządzenia używa użytkownik: czy jest to użytkownik na urządzeniu mobilnym czy w domu przed telewizorem? Trzeba pomyśleć o tym, gdzie znajduje się użytkownik: czy użytkownik jest w linii w sklepie spożywczym lub spędza wakacje na pustyni? Posiadanie dobrej zawartości nic nie znaczy, jeśli twoja strona zajmuje dziesięć minut, aby załadować, podczas gdy twoi użytkownicy siedzą na plaży po margaricie.
Treści są wszystkim, ale kontekst jest wszędzie i jest to coś, nad czym absolutnie nie panujesz. Dlatego, realistycznie, Twoje treści powinny być skalowane do dowolnej rozdzielczości, dużej lub małej. Dysponujemy zestawem narzędzi, które pozwolą nam manipulować układami, optymalizować rozmiary tekstu i zwiększać wydajność w dowolnym kontekście, więc pamiętaj, aby z nich korzystać.
Pamiętaj, że kontekst zmienia się cały czas, dlatego tak ważne jest zrównoważenie układu graficznego, potrzeb użytkownika i wydajności, gdy zbliżasz się do responsywnego projektu. Nie chodzi tylko o telefon komórkowy.
Kiedyś twierdziłem, że responsywny projekt strony nie zadziała dla każdego projektu i zależy od przypadku użycia. Niedawno zmieniłem zdanie i mocno wierzę, że jeśli chcemy być projektantami i programistami skupionymi na użytkowniku, musimy podejść do każdego projektu z myślą o elastycznym projekcie.
Strony o stałej szerokości mogą ograniczać się do większych i mniejszych rozdzielczości ekranu. Najważniejsze jest to, że nasze strony internetowe powinny być dostępne dla każdego bez względu na to, jakiego urządzenia lub rozdzielczości ekranu używają, bez ograniczeń.
Zauważyłem trend pojawiający się w branży, w której projektanci i programiści budują responsywne strony internetowe, które skalują się tylko do określonych rozdzielczości urządzeń, i jestem również winny tego. Trzy najpopularniejsze urządzenia to oczywiście laptopy / komputery stacjonarne, iPady i iPhone'y (lub inne urządzenia mobilne). Jako projektanci musimy zdać sobie sprawę, że projektowanie responsywne dotyczy przerw w projektowaniu i sprawia, że treść jest czytelna i dostępna dla wszystkich, a nie tylko dla użytkowników określonych urządzeń.
Biorąc to pod uwagę, jeśli projektujesz strony internetowe w oprogramowaniu, ważne jest, aby mieć pewien rodzaj frameworka z punktami przerwań do pracy. Sugeruję stworzenie własnego. Zoptymalizuj swój układ zgodnie z zawartością. Najlepszym sposobem na sprawdzenie, które punkty przerwania działają najlepiej, jest najpierw szkicowanie kilku szkieletów w celu uzyskania idei, a następnie możesz rozpocząć układanie pikseli w wybranym oprogramowaniu. Upewnij się, że pracujesz nad tą samą siatką, gdy modelujesz i drukujesz.
Jeśli jesteś podobny do mnie, to zakoduj swoje szkielety i stwórz żywy prototyp. Pomogło mi to w moim responsywnym przepływie pracy, ponieważ mogę stworzyć płynną makietę i dodać punkty przerwania do projektu, ponieważ projekt pęka, zamiast próbować zapychać piksele w Photoshopie.
Jednym z największych problemów, które zauważyłem na wielu responsywnych stronach internetowych, jest to, że typografia jest rzucana do wilków, gdy projektanci i programiści decydują się na użycie punktów przerwania urządzeń nad punktami przerw w projektowaniu. Moim zdaniem wybór urządzenia nad projektem wskazuje na całkowite lekceważenie publikowanych treści i użytkowników, którzy je wykorzystują. Treść powinna zachować czytelność, dopóki nie zostanie dostosowana, aby zachować tę czytelność. Zawartość zawsze będzie królem, a dostępność i czytelność twoich treści powinna zawsze mieć najwyższy priorytet.
Jednym ze sposobów, którymi chciałbym się zająć przy utrzymywaniu czytelności treści w responsywnym projekcie, jest użycie jednostek względnych, takich jak ems, dla rozmiaru czcionki, dopełnienia, marginesów i układu. Responsywny design dotyczy proporcjonalnych układów i, moim zdaniem, ems idealnie pasuje.
Ems to względne jednostki, które są skalowalne do rozmiaru czcionki elementów macierzystych, mogą zaoszczędzić wiele czasu i kłopotów, a także pomóc w utrzymaniu struktury całego układu. Co to znaczy, że pytasz? Cóż, oznacza to, że wraz ze wzrostem lub zmniejszeniem podstawowego rozmiaru czcionki, układ dopasowuje się równomiernie, nie powodując niczego.
Oto przykład, powiedzmy, że znaleźliśmy dwa punkty przerwania projektu: jeden dla bardzo dużego monitora biurkowego w super rozdzielczości i jeden dla małego tabletu. Powiedzmy również, że nasz podstawowy rozmiar czcionki to 16 pikseli, co równa się 1.0em, a rozmiar strony głównej jest większy niż 22 piksele, gdy witryna jest wyświetlana w rozdzielczości 3840 x 2160 (super rozdzielczość), a my obniżamy podstawowy rozmiar czcionki do 14 pikseli w rozdzielczości 800 x 600 (mały laptop / tablet). Dopiero dramatycznie zmieniliśmy rozmiar i układ naszej strony w dwóch wyznaczonych punktach przerwania, jeden duży i jeden mały. Nagłówek w wersji 1.4em z 22-bitowym base-size dla większych rozdzielczości oznacza, że 1.4em równa się 30.8px, a przy mniejszej podstawie rozmiar czcionki 14px, 1,4em będzie równy 19.6px. Mimo że rozmiar czcionki znacznie się zwiększył na 3840 x 2160, nie musimy się martwić o uszkodzenie layoutu, ponieważ został on również dostosowany. Powiedzmy, że nasz element zawierający ma szerokość 50em. Przy rozdzielczości 800 x 600, która wynosiłaby 700 pikseli, ale przy rozdzielczości 3840 x 2160 byłaby to 1100 pikseli. Nasze dopełnienie i marginesy również się dostosują. W większej rozdzielczości o rozmiarach czcionek i układzie w ems pozwolił nam proporcjonalnie skalować nasz projekt, dzięki czemu nasze treści są bardziej dostępne i czytelne.
Celem responsywnego projektowania jest udostępnienie twoich treści wszystkim, nawet niepełnosprawnym, we wszystkich rozdzielczościach ekranu i urządzeniach. Ukrywanie treści nigdy nie jest dobrym pomysłem i istnieje duża szansa, że jeśli będziesz musiał to ukryć, nie musisz tego robić. Ukrywanie treści powoduje, że nie można go odczytać dla czytników ekranu, a Ty sprawiasz, że treści stają się niedostępne dla osób z niepełnosprawnością wzrokową lub poznawczą. Pamiętaj, że treści powinny być uniwersalne na wszystkich urządzeniach, nie karaj użytkowników, ograniczając to, co mogą zobaczyć na oddzielnym urządzeniu.
Biorąc to pod uwagę, nadal znajduję kilka przypadków użycia, w których wyświetlacz: brak; przydaje się. Przeważnie wszystkie przypadki użycia dotyczą pewnego rodzaju nawigacji, a ja używam wyświetlacza: brak; na elementach nawigacyjnych, które zmieniają formę na różnych urządzeniach. Nigdy nie jest dobrym pomysłem ograniczanie lub ukrywanie treści na różnych urządzeniach, ponieważ najprawdopodobniej opierasz tę decyzję na założeniu, a jakiś użytkownik, gdzieś, będzie miał bardzo złe doświadczenia.
Ostatnio widziałem wiele stron internetowych, które wykazały brak empatii w stosunku do użytkowników o niskiej przepustowości. Większość tych witryn ma te same cechy wspólne, duże obrazy i duże biblioteki JavaScript, a wiele z nich można było zoptymalizować, gdyby zostały zaprojektowane z myślą o mobilnym pierwszym podejściu.
Ponieważ wciąż jest dużo dyskusji na temat responsywnych obrazów, trudno jest każdemu zaangażować się w jedno rozwiązanie. Rozumiem ten dylemat, ale czekanie na doskonałe rozwiązanie, które jest standardem we wszystkich przeglądarkach i urządzeniach, nie sprawia, że Twoja obecna strona internetowa jest łatwiejsza w użyciu na urządzeniach o ograniczonej przepustowości. Znajdź rozwiązanie, które najlepiej rozwiąże problem i z niego skorzystaj. Nie znalezienie rozwiązania oznacza problemy z wydajnością dla wszystkich, a to całkowicie negatywnie wpływa na cel projektowania responsywnego.
Duże biblioteki JavaScript mogą również powodować problemy na mniejszych urządzeniach. Spróbuj znaleźć sposób, aby zadzwonić do nich warunkowo na podstawie rozdzielczości ekranu lub typu urządzenia. Wydajność nie powinna być po prostu refleksją, jeśli chodzi o responsywny projekt.
Internet eksplodował, a wraz z pojawieniem się technologii mobilnych i smartfonów możemy uzyskać dostęp do treści w dowolnym miejscu iw dowolnym kontekście. Ważne jest, aby upewnić się, że możemy dotrzeć do wszystkich naszych użytkowników i dać im to, czego chcą i kiedy chcą. Responsywny design to bardzo nowa technika i moim zdaniem jest to doskonała technika do ujednolicenia naszych treści w Internecie.
Jakie inne mity na temat responsywnego projektu chciałbyś odrzucić? Czy są jakieś wady w zakresie projektowania responsywnego? Daj nam znać w komentarzach.
Wyróżniony obraz / miniatura, responsywny obraz sieciowy przez Shutterstock.