Ponieważ sieć mobilna rozwija się w stałym tempie, a Google potwierdza, że ​​ocenia strony na podstawie ich responsywności, bardzo ważne jest, aby Twoja witryna mogła dostosować się do różnych urządzeń i rozmiarów ekranu.

Ale responsywne projektowanie stron internetowych to coś więcej niż tylko rozciąganie lub ściskanie układu w celu dostosowania. Polega na dostarczaniu jednej witryny internetowej na wiele różnych sposobów przy zachowaniu zawartości i funkcjonalności.

Mając to na uwadze, oto siedem wskazówek dotyczących najlepszych praktyk dotyczących responsywnego projektowania stron internetowych.

1. Myśl responsywnie

Kiedy zaczęło się responsywne projektowanie stron internetowych, projektanci zaczęli od planowania największych ekranów, a następnie zmniejszali, aż doszli do najmniejszego. Zbyt często zawierały fantazyjne elementy, które nie zepsuły się dobrze, aby zmieścić się na mniejszym ekranie, co doprowadziło do tego, że wersja mobilna była rozwodnioną kopią oryginału i sprawiała wrażenie nieco późniejszej. Obecnie urządzenia mobilne generują największy ruch w wielu witrynach, więc użytkownicy mobilni oczekują takiej samej jakości przeglądania, jak inni użytkownicy, i zasługują na nią. Ale to nie znaczy, że większe rozmiary ekranu również powinny być ignorowane. Wiele osób nadal korzysta z dużego pulpitu, a jeszcze więcej przeskakuje między różnymi ekranami w ciągu dnia.

Najlepszym sposobem na rozwiązanie tego problemu jest przyjęcie podejścia „najpierw mobilność”, polegającego na projektowaniu najpierw na najmniejszym ekranie, a następnie dodawaniu niezbędnych elementów w miarę zwiększania rozmiarów ekranu.

Skoncentruj się na projektowaniu pod kątem popularnych punktów przerwania, ale uwzględnij również luki pomiędzy nimi – nowe urządzenia pojawiają się na rynku każdego dnia, a rozmiar ekranu, którego rzadko używa się dzisiaj, może być nowym wielkim wydarzeniem w przyszłym miesiącu. I pamiętaj, aby wziąć pod uwagę osoby, które używają tabletów w trybie portretowym – może to wymknąć się spod radaru i wyglądać jak zgnieciony pulpit lub podstawowy układ mobilny z dużą ilością zmarnowanego miejsca.

2. Zwróć uwagę na treść

Nie wpadaj w pułapkę podejścia „dopasuj do rozmiaru”, w którym skupiasz się na dopasowaniu wszystkich elementów do strony bez uwzględniania ich kontekstu. Zacznij od skoncentrowania się na treści i funkcjach, które są najważniejsze, i brutalnie podejdź do tego, które elementy muszą się zmierzyć. W miarę przesuwania się w górę o różne rozmiary ekranu kwestionuj ich uwzględnienie na każdym etapie – jeśli musisz o tym myśleć zbyt długo, prawdopodobnie nie musi ich tam być. Gdy masz jasność co do treści i funkcji, których potrzebujesz, możesz rozpocząć pracę nad układem. Sama różnorodność rozmiarów ekranu oznacza, że ​​tradycyjna koncepcja „nad zakładką” jest prawie martwa. Ludzie są przyzwyczajeni do przewijania – pojawienie się witryn takich jak Facebook i Twitter sprawiło to, że zaprojektuj swoje witryny w sposób, który zachęca do przewijania, ale zachowuje najważniejsze informacje w górnej części ekranu. Obejmuje to dane kontaktowe, wezwania do działania, a w witrynach handlu elektronicznego bardzo ważny przycisk „Dodaj do koszyka”.

Nadaj priorytety elementom na podstawie ich znaczenia dla użytkownika, więc jeśli możesz zmieścić tekst obok obrazu na komputerze, zastanów się, który z nich najlepiej przykuwa uwagę użytkowników na urządzeniu mobilnym i upewnij się, że jest to pierwsze. Inne elementy, takie jak towarzyszący obraz bloga na stronie podglądu, można całkowicie pominąć w wersji mobilnej, skupiając się na samej treści.

3. Eksperymentuj ze skalowalną nawigacją

Nawigacja jest jednym z najtrudniejszych aspektów responsywnego projektowania stron internetowych, ale jest również jednym z najważniejszych. W przeciwieństwie do większości zasad projektowania stron internetowych, jest to jedno miejsce, w którym nie musisz być spójny – duże, złożone menu używane na dużych ekranach po prostu nie będą działać na telefonach komórkowych, więc jest całkowicie dopuszczalne tworzenie innego rodzaju nawigacji dla innego ekranu rozmiary. Ukryta nawigacja jest popularna w wielu witrynach mobilnych, z prostą ikoną, taką jak burger, wskazującą na obecność menu. Możesz przesunąć menu w dół na zawartość poniżej lub nałożyć je na cały ekran. Inną opcją jest przesunięcie w poziomie, gdzie treść oczywiście znika z boku ekranu, a użytkownicy mogą przesuwać palcem, aby ją zaangażować.

Niezależnie od tego, co wybierzesz, nie neguj całkowicie spójności – Twoje menu powinno przypominać inne wersje pod względem cech wizualnych, nawet jeśli ma inną funkcjonalność.

4. Wszystko o obrazach

Jakość obrazów na stronach internetowych ma kluczowe znaczenie, ponieważ stanowią one dużą część pierwszego wrażenia odwiedzającego witrynę. Jednak duże obrazy mają negatywny wpływ na prędkość pobierania urządzeń mobilnych ze względu na ich mniejszą przepustowość. Podobnie jak w przypadku treści, powinieneś zakwestionować uwzględnienie każdego obrazu dla każdego rozmiaru ekranu i uwzględnić tylko te, które są absolutnie niezbędne, jednocześnie ponownie rozważ elementy, takie jak suwaki, które zawierają wiele dużych obrazów.

Zoptymalizuj pozostałe obrazy, czyniąc je elastycznymi dzięki adaptacyjnemu rozmiarowi i przechowuj je w odpowiednim formacie. Pamiętaj, że prawdopodobnie nie będziesz potrzebować funkcji „powiększ obraz” na telefonie komórkowym, ponieważ obraz i tak będzie prawdopodobnie wyświetlany na pełnym ekranie. Jeśli chcesz uwzględnić galerie obrazów, wybierz nawigację z długim przewijaniem lub przesuwaj palcem w poziomie, aby poruszać się między nimi.

5. Pomyśl o typografii

Wybrana typografia wymaga starannego rozważenia, ponieważ wiele krojów pisma, które działają na średnim lub dużym ekranie, staje się zbyt trudne do prawidłowego odczytania po zmniejszeniu do mniejszych rozmiarów ekranu, dlatego zawsze dokładnie testuj na różnych ekranach. Ostrożnie zrównoważ swoje nagłówki — ich funkcja musi być oczywista, chociaż jeśli są zbyt duże, mogą wydawać się zbyt dominujące — i upewnij się, że między kolorem tła a czcionką jest odpowiedni kontrast.

W miarę przesuwania się w górę o różne rozmiary ekranu zwracaj uwagę na długość wiersza w treści – jeśli wiersz jest zbyt długi, może być trudny do odczytania. Długość linii powinna wynosić około 60–75 znaków, a na szerszych ekranach wypełniaj przestrzeń paskiem bocznym lub obrazami.

6. Optymalizacja pod kątem ekranów dotykowych

Responsywne projektowanie stron internetowych wymaga nie tylko uwzględnienia różnych rozmiarów ekranów; musi być również zoptymalizowany pod kątem różnych metod wprowadzania. Ekrany dotykowe mogą być trudne, więc najlepiej jest hojnie określić rozmiary przycisków i linki, dążąc do klikalnego obszaru o wielkości około 44 punktów kwadratowych. Musisz także zoptymalizować wrażenia użytkownika dla ekranów dotykowych. Tak, są z natury intuicyjne, ale subtelne pomoce nawigacyjne, takie jak gesty przesuwania, są cennym dodatkiem.

7. Przetestuj na rzeczywistych urządzeniach

Wreszcie, planowanie projektu jest kluczowym krokiem, nie polegaj tylko na teorii. Istnieją emulatory mobilne, które pomogą sprawdzić twoje projekty i punkty przerwania CSS, ale nic nie przebije testowania na rzeczywistych – wiele z tych emulatorów tylko powiela różne rozmiary ekranu, ale nie funkcjonalność różnych systemów operacyjnych. Upewnij się, że masz różne rozmiary ekranów do zabawy i wielu różnych użytkowników, i dokładnie przetestuj swoje projekty. To często przyniesie nowy punkt widzenia i potwierdzi, że jesteś na dobrej drodze lub pokaże, gdzie można wprowadzić ulepszenia.

Responsywne projektowanie stron internetowych nieustannie ewoluuje i rozwija się, a my tylko zarysowaliśmy tutaj powierzchnię. Najlepsze praktyki w tej dziedzinie również często się zmieniają, więc warto być na bieżąco z najnowszymi osiągnięciami. Pamiętaj, że wielu użytkowników ma słabą przepustowość, niską rozdzielczość i małą moc obliczeniową na swoich urządzeniach, więc Twoja witryna powinna być prosta, dobrze zorganizowana, przejrzysta, łatwa w użyciu i dobrze wyglądać na różnych ekranach.