Kompleksowy przewodnik po naprawie Responsive Zagadnienia projektowe w 2023 r

Większość stron internetowych korzysta z responsive design używają go nieprawidłowo, co prowadzi do problemów. Ogólne podejście do responsive projektowanie jest leniwe i jeśli zastosujesz takie podejście, niektóre z twoich responsive witryny będą działać absolutnie bezbłędnie, a wiele z nich nie. W przypadku tych, które działają idealnie, prawdopodobnie będzie to kwestia szczęścia.

Pojęcie responsive projekt jest prosty, ale to właśnie jego prostota sprawia, że ​​ludzie tak łatwo popełniają błędy. Projektanci z wieloletnim doświadczeniem przyzwyczaili się do projektowania dla desktopi dlatego zazwyczaj planują projekt w oparciu o desktop układ.

Desktop układy różnią się od układów tabletów i układów mobilnych, ponieważ zwykle są wielokolumnowe, zwykle zawierają ogromną ilość białych znaków i wszystko jest po prostu „duże” z braku lepszego słowa. Jeśli responsive stosowane są techniki projektowania, ten układ wielokolumnowy powinien zostać podzielony na pojedynczą kolumnę.

Jeśli to wszystko twoje responsive design faktycznie działa, gdy jest oglądany na urządzeniu mobilnym, możesz mieć problem. Jak duży jest problem, zależy od Twojego nastawienia, ale dobrzy projektanci dbają o dobry UX. Jeszcze bardziej dbają o zły UX. Jeśli Twoja witryna ma zły UX, a chcesz być dobrym projektantem, musisz to naprawić.

Problem ze zwijaniem układu wielokolumnowego do jednej kolumny polega na tym, że nie działa to na zasadzie proporcjonalności. Jeśli musisz zmniejszyć coś w poziomie i nie wprowadzasz żadnych innych zmian, to oczywiście rozszerzy się w pionie.

Wlej wodę z niskiej, grubej szklanki do wysokiej, cienkiej szklanki, a woda przyjmie kształt wysokiej, cienkiej szklanki, przy czym objętość wody pozostanie dokładnie taka sama. Projektanci muszą zrozumieć, że w przypadku witryny internetowej konieczna jest zmiana głośności. Zwykle zmiana kształtu nie jest dobrym pomysłem, ale należy zachować treść dokładnie ten sam. Coś musi dać.

Ktoś, kto naprawdę zasłużył na miano projektanta, zrozumie, że jest to problem do rozwiązania, a projektanci tak naprawdę zajmują się znajdowaniem rozwiązań problemów. Dlatego idealnym zadaniem jest znalezienie najlepszego sposobu na dostarczenie podstawowej zawartości witryny, bez zmieniania doświadczenia użytkownika w frustrujące przewijanie. Oto kilka rzeczy, które warto wziąć pod uwagę przy rozkładaniu pliku a desktop zaprojektuj w wersji mobilnej:

1. „Najpierw mobilny” jest kretyński

Przepraszam, ale tak jest. Wszyscy to powtarzają, ale jako koncepcja nie jest to zbyt pomocne, ponieważ jeśli naprawdę projektujesz „najpierw urządzenia mobilne”, wówczas próba skalowania tego z powrotem do desktop design, chyba że trzymasz się wyłącznie układu pojedynczej kolumny aż do samej góry.

Najlepszym podejściem jest fizyczne zaprojektowanie co najmniej trzech (maksymalnie 11) różnych układów. Minimalne, które możesz rozważyć, obejmują:

• Desktop
• Krajobraz mobilny
• Portret mobilny

Jeśli chcesz być nieco bardziej dokładny, powinieneś również rozważyć:

• Tabletka krajobrazowa
• Tablet portretowy

A pełna lista, jeśli chcesz być absolutnie kompletna, wyglądałaby następująco:

• Ogromny Desktop
• Zwyczajny Desktop
• Duża tablica krajobrazowa
• Duży tablet portretowy
• Mały tablet krajobrazowy
• Mały tablet portretowy
• Duży krajobraz mobilny
• Duży portret mobilny
• Mały krajobraz mobilny
• Mały portret komórkowy
• Mały/poręczny

Przy tak wielu różnych możliwościach oczywiste jest, dlaczego leniwe podejście „uniwersalne” jest tak kuszące, ale oczywiste jest również, dlaczego istnieje tak wiele sposobów, aby je zrujnować.

2. Oswajaj tę rozległą stopkę strony

Połączenia desktop projekt zawiera jedną z tych ogromnych, grubych stopek stron z mnóstwem wewnętrznych linków? Świetnie, to prawdopodobnie będzie bardzo przydatne na desktop. Na telefonie komórkowym wygląda to absurdalnie i jest czymś więcej niż tylko irytującym dotykiem. Możesz zaprojektować zupełnie inne stopki strony dla każdego punktu przerwania urządzenia. Po prostu udostępnij te linki w stopce w modalnym oknie dialogowym i wszyscy wygrają.

3. Zaakceptuj drobne dziwactwa na nieznanych urządzeniach

Jeśli dane urządzenie nie jest popularne, nie jest tak źle, jeśli w projekcie występuje kilka dziwactw, które pojawiają się tylko podczas oglądania na tym urządzeniu. Im bardziej popularne jest urządzenie, tym więcej będziesz musiał pracować, aby pozbyć się wszelkich dziwactw, które się na nim pojawiają.

4. Możesz ukryć treści, które nie wnoszą nic do głównego przekazu

Najważniejszą częścią witryny jest główny przekaz. Tak, w niektórych witrynach najważniejszą częścią są reklamy, a witryny istnieją tylko po to, aby dostarczać te reklamy, ale jeśli musisz wybrać pomiędzy pokazywaniem głównego przekazu a pokazywaniem reklam, wybierz przekaz. Google z większym prawdopodobieństwem uzna Cię za osobę persona non grata jeśli ukryjesz podstawową treść, a następnie wyświetlisz kilka reklam. Dzieje się tak dlatego, że Google zaindeksował Cię na podstawie tej podstawowej treści, a jeśli ta treść nie jest wyświetlana, Google uważa to za zwodnicze.

Ponadto rzeczy takie jak obrazy, które mają charakter wyłącznie dekoracyjny lub estetyczny, ale które nie wnoszą znaczącego wkładu w główny przekaz, nadają się do redukcji lub całkowitego ukrycia.

Niektórzy twierdzą, że ukrywanie treści jest „karaniem” użytkowników mobilnych, ale jest to trochę absurdalne założenie. Rzeczywistość jest taka, że ​​ukrywasz treść, ponieważ ma ona na celu ulepszenie desktop doświadczenie, ale nie wnosi wystarczającego wkładu w główne przesłanie witryny, aby było to konieczne

5. Możesz użyć alternatywnego tła

Niedawno dostałem absurdalne zadanie, w ramach którego właściciel witryny zapłacił za określone tło i chciał, aby cała treść została dostosowana do tego tła. Pozycje punktowane musiały składać się z bardzo dokładnej liczby znaków, całkowita liczba wierszy musiała być dokładna i tak dalej.

Jest to zdecydowanie zła praktyka w projektowaniu stron internetowych, ponieważ powinnaś nigdy zaprojektuj treść tak, aby pasowała do układu. Układ powinien zawsze być zaprojektowane tak, aby pomieścić zawartość. Jeśli z jakiegoś powodu układ nie może pomieścić treści, należy przeprojektować układ, a nie treść. Całkiem możliwe jest użycie różnych teł dla różnych urządzeń. Jesteś projektantem. Użyj swojej wyobraźni.

Treść jest sercem witryny internetowej, a modyfikowanie jej lub ograniczanie w oparciu o ograniczenia układu jest wyraźną oznaką amatorstwa ze strony właściciela witryny i oznaką, że układ został źle zaprojektowany na początku miejsce. Trzymaj się swoich zasad, bo ten klient będzie miał kłopoty, jeśli się zgodzisz.

Klient ma zawsze rację, z wyjątkiem sytuacji, gdy jest klientem zajmującym się projektowaniem stron internetowych. Klienci rzadko wiedzą, co jest dla nich najlepsze, dlatego ważne jest, aby wykazać się jako projektant stron internetowych, który wie, jak zapewnić klientowi odpowiedni wynik. Innywise ryzykujesz utworzeniem kolejnej strony internetowej wstręt.

6. Ręcznie kontroluj kolejność zwijania (lub unikaj odniesień przestrzennych w treści)

Jest to złożony problem. Kolejność zwijania witryny zależy od kolejności ułożenia elementów div. Musisz ułożyć elementy div we właściwej kolejności, aby zwinęły się we właściwej kolejności.

Jednym z problemów związanych z narzędziami do tworzenia witryn WYSIWYG metodą „przeciągnij i upuść” jest to, że zwykle nie można dyktować kolejności układania elementów div, a w bardzo rzadkich przypadkach, gdy jest to możliwe, za każdym razem Twoja ciężka praca zostaje zniweczona dokonasz najmniejszej edycji i będziesz musiał wrócić i ponownie zhakować kod źródłowy.

Jeśli nie kontrolujesz kolejności zwijania, ten obraz jasno wyjaśnia, co może pójść nie tak. Powinieneś także unikać odniesień przestrzennych (takich jak „w kolumnie po lewej stronie”), ponieważ na telefonie komórkowym to, co było po lewej lub prawej stronie, może zostać przesunięte w górę lub w dół, plus jeśli sprawisz, że czytelnik pomyśli, że przewinięcie jest wystarczająco ważne, aby zobaczyć, będzie musiał przewinąć ponownie, a to nie jest fajne.

7. Możesz potrzebować różnych rozmiarów czcionek dla różnych układów

Łatwo jest kontrolować rozmiar czcionki za pomocą CSS i możesz ustawić różne rozmiary czcionek, a nawet różne kroje czcionek (jeśli będą wyglądać lepiej) dla określonych rozmiarów wyświetlacza. Rozmiar wyświetlacza można znaleźć za pomocą zapytań o media CSS, a następnie zmodyfikować rozmiar czcionki lub krój czcionki, tak aby uzyskać wartości, które maksymalnie wyświetlają treść na docelowym typie urządzenia.

8. Najlepiej używać responsive zdjęcia

Wszystkie obrazy powinny być responsive kiedykolwiek możliwe. Prowadzi to do tego, że czasami szczegóły obrazu mogą zostać utracone, jeśli zostanie on zbyt mocno zmniejszony. Rozwiązaniem tego problemu jest umożliwienie kliknięcia obrazu, dzięki czemu użytkownik będzie mógł wyświetlić powiększoną wersję obrazu oddzielnie od treści. Zwykle można to zrobić za pomocą modalnego okna dialogowego.

obraz nagłówka dzięki uprzejmości Artura Martynowskiego