3 Responsive Design Disasters - i jak ich uniknąć
Responsywne metody projektowania są bardzo pomocne dla programistów, ponieważ pozwalają nam dostarczać treści do najszerszej gamy urządzeń bez konieczności utrzymywania oddzielnych wersji witryny i bez negatywnych wady innych metod, takich jak skalowanie i układy płynów.
W tym artykule omówione zostaną 3 najczęściej spotykane błędy projektantów z responsywnymi projektami, a także kilka strategii unikania tych błędów.
Skalowanie w porównaniu z płynem w porównaniu z reagującym
Istnieje wiele nieporozumień związanych z tymi terminami, a projektanci często niewłaściwie używają ich zamiennie. W rzeczywistości każdy z nich jest odrębnym krokiem ewolucyjnym w technice układania, który pojawił się wraz z upływem czasu, zgodnie z postępem technologicznym.
Skalowane układy są zaprojektowane do skalowania każdego elementu względem każdego innego elementu . Są responsywne w tym sensie, że dynamicznie przeskalują zawartość w odpowiedzi na zmiany rozmiaru widocznego obszaru. Sam układ pozostaje statyczny, zmieniając rozmiar każdego elementu, aby zachować spójny wygląd.
Powyżej: przykład skalowania układu w różnych rozdzielczościach: projekt poświęca czytelność dla spójności.
Układy płynów są różne, ponieważ skalują elementy kontenera w stosunku do rozmiaru rzutni . Osiąga się to poprzez użycie względnych jednostek, takich jak ems, w celu przezwyciężenia problemu kurczenia się tekstu. Projekt może zostać zerwany przez skalowanie przez użytkownika.
Powyżej: przykład układu płynów przy różnych rozdzielczościach: konstrukcja poświęca spójność dla czytelności.
Responsywne układy nie skalują niczego. Zamiast tego zmieniają to, co jest wyświetlane, w zależności od rozmiaru rzutni.
Powyżej: przykład elastycznego układu w różnych rozdzielczościach.
Katastrofa 1) Zawijanie menu
Jeśli używasz paska nawigacyjnego u góry strony, responsywny projekt ma "przyciągnąć" go do bardziej zwartego formatu, gdy strona jest wyświetlana na małym ekranie. Ale to nie zawsze działa idealnie, jeśli obszar wyświetlania jest szerszy niż punkt przerwania, ale zbyt mały, aby wyświetlić wszystkie pozycje menu w jednym wierszu. Rezultatem jest menu, które się otacza.
Istnieje kilka sposobów rozwiązania tego problemu. Pierwszym z nich jest zmniejszenie liczby elementów wyświetlanych poziomo na pasku nawigacyjnym poprzez sortowanie ich na kategorie i podkategorie. Następnie możesz użyć rozwijanych pozycji, aby wyświetlić podkategorie, gdy wybrana jest kategoria.
Drugi sposób polega na zmianie punktu przerwania na niższą wartość. Rzeczywista liczba to szerokość, z jaką Twój navbar zaczyna się zawieść, a nie konkretny rozmiar urządzenia.
Trzecim sposobem jest użycie innego menu dla urządzeń, takich jak przesuwna szuflada.
Katastrofa 2) Używanie obrazów o stałej szerokości
Obszary zawartości są zwykle ustawione na rozmiar względem rzutni. Dlatego gdy obraz o stałej szerokości jest szerszy niż rozmiar obszaru, pojawia się kadrowanie obrazu.
Powyżej: przykład nieprawidłowego obrazu o stałej szerokości, który jest zbyt duży: teraz ma paski przewijania i zawartość jest wypychana poza ekran.
Możesz uniknąć tego problemu, używając względnych jednostek do ustawienia szerokości obrazu lub jeśli używasz frameworka, który go obsługuje (takiego jak Bootstrap), możesz użyć responsywnej klasy obrazu (np .: class = "img-responsive" ).
Powyżej: ten sam element z podejściem klasy responsywnej: teraz pasek przewijania już nie istnieje.
Katastrofa 3) Zniekształcenie elementów
Ten jest nieco bardziej niejasny, ale w zasadzie to, co dzieje się, gdy twój układ jest wyświetlany na małej rzutni, jest taki, że wszystkie nieobsługiwane kolumny zachowują się jak wiersze. Jest to problem, ponieważ zniekształcenie treści nieumyślnie zmienia hierarchię projektu.
Powyżej: kolumna staje się rzędem, zniekształcając treść.
Rozwiązanie jest oczywiste, ale zaskakujące jest, jak wiele osób boryka się z tym problemem : po prostu ustaw wysokość, szerokość i dopełnienie elementu jawnie. Jeśli porusza się poza pozycją i obejmuje inne elementy, możesz zmusić go do tego, gdzie chcesz, zawijając go w div i ustawiając marginesy.
Planowanie pomaga unikać błędów
W tym artykule omówiono tylko 3 najczęściej spotykane awaryjne katastrofy projektowe, ale istnieje wiele innych sposobów na to, aby dobry projekt działał nieprawidłowo. Zapobieganie błędom nie jest zbyt trudne. Nowoczesne przeglądarki mają wbudowane testy responsywnego układu, więc dobrze planuj swój projekt i często testuj.