Responsywne nagłówki i logo - wskazówki i pułapki

Koncepcja responsywnego projektowania stron internetowych przeniknęła sieć i stała się podstawą dla programistów frontendowych. Nie da się zaprzeczyć wartości responsywnego projektowania we współczesnym świecie, ale istnieją pewne trudności z pełnym zrozumieniem, jak właściwie zaprojektować responsywne układy.

Temat może trwać długo, ponieważ jest tak wiele unikalnych obszarów strony internetowej, ale skupienie się na poszczególnych elementach może pomóc w lepszym zrozumieniu celów użytkownika i tego, jak można osiągnąć te cele dzięki responsywnemu projektowi.

Chciałbym to ukryć wskazówki dotyczące projektowania nagłówków, logo, i menu nawigacyjne, ponieważ dotyczą projektowania responsywnego. Weź te sugestie, które dotyczą Twojej własnej pracy i pamiętaj o zaprojektowaniu interfejsów z myślą o zachowaniu użytkownika.

Thinner Navbars

Na dużych ekranach normalne jest posiadanie dużych nagłówków, a może nawet dużych nagłówków z wielopoziomowymi warstwami łącza. Ale mniejsze ekrany nie mają tej samej przestrzeni i powinny być w razie potrzeby ograniczone.

Ponieważ natywne aplikacje mobilne zazwyczaj mają stałe nagłówki, jest to powszechna praktyka w projektowaniu responsywnym. Stały nagłówek powinien się także zmniejszyć gdy na mniejszych urządzeniach: pozostawia więcej miejsca na treści, ale daje czytelnikom bezpośredni dostęp do nagłówka i nawigacji.

Weźmy na przykład układ Cartoon Brew na pełnowymiarowym monitorze i na urządzeniu mobilnym.

W punkcie zatrzymania 600 pikseli nawigacja kurczy się do prawie połowy wysokości na stronie. Dzięki temu zarówno logo, jak i klikalne menu nawigacyjne są mniejsze, ale są dużo bardziej proporcjonalny do względnej przestrzeni ekranu.

Weź również pod uwagę, że Cartoon Brew ma rozwijane menu jako menu responsywne na ekranie telefonu komórkowego. To znaczy nakładki treści na stronie po otwarciu, więc ważne jest, aby zostawić na to dużo miejsca.

Podobny przykład można znaleźć na stronie internetowej Jacksonville Art Walk. Górny pasek nawigacyjny pozostaje stały podczas przewijania, ale zmniejsza się na mniejszych urządzeniach. Jest to lepsze dla responsywnego projektu, ponieważ cieńszy pasek nawigacyjny pozostawia więcej miejsca na treść na mniejszym ekranie telefonu komórkowego.

Każdy link na pasku nawigacyjnym ma powiązaną ikonę dołączoną do łącza tekstowego. Wygląda świetnie na monitorze panoramicznym, ale jest zbyt szczegółowy dla mniejszych ekranów.

Nawigacja Art Walk zmienia się w menu rozwijane ze stałymi linkami wokół punktu przerwania 770 pikseli. Ikony są ukryte w menu rozwijanym, ponieważ byłyby zbyt małe i zbyt ciasne na mniejszych urządzeniach.

Podczas projektowania responsywnego nagłówka zawsze rozważ ogólna przestrzeń ekranu podczas stylizacji paska nawigacyjnego. Jeśli nie chcesz, aby nagłówek pozostał niezmieniony, jest całkowicie w porządku, ale nadal możesz chcieć trochę się kurczyć aby zaoszczędzić miejsce na górze strony.

Iconify Logo

Większość logo zawiera tekst i ikonę lub grafikę reprezentującą markę. Oznacza to, że zawsze możesz iconify (tak, to prawdziwe słowo) tego rodzaju logo aż do symbolu pełnej wersji.

Jest to potężna technika dla responsywnych nagłówków, ponieważ nie zawsze jest wystarczająco dużo miejsca na pełne logo. Tracisz trochę blichtru i uroku pełnego rozmiaru logo, ale to jest cena, którą możesz zapłacić za czysty, responsywny układ.

Sprawdź logo Web Designer News i zobacz, jak się zmienia w miarę zmiany rozmiaru przeglądarki.

Może nie wszyscy rozpoznają tę ikonę podczas pierwszej wizyty na stronie, ale dzięki rozpoznawanie wzorców to nie jest ogromny problem.

Ludzie byli w Internecie wystarczająco długo, aby wiedzieć, że lewy górny róg strony jest zazwyczaj zarezerwowany dla logo. Ta mała różowa ikona jest również używana w favikonie, więc łatwo jest wyciągnąć pewne wnioski, nie zagłębiając się zbytnio w witrynę.

W przypadku tej skondensowanej techniki logo nie zawsze trzeba polegać na grafice. Nagłówek Young And Hungry używa jasnozielonego tekstu do logo, które ostatecznie skrapla się w tekście „Y&H”.

To może nie działać w przypadku każdej witryny, jeśli oznakowanie nie jest łatwe do rozpoznania jako pojedyncze litery. Ale to pokazuje, że logo można uprościć zarówno w grafice i tekście, jak i obu wariantach zajmują mniej miejsca na mniejszych ekranach.

Obsługa ekranów pełnoekranowych

Wiele stron docelowych używa pełnych ekranów, aby przyciągnąć więcej uwagi. Jest to potężna technika, ale często działa najlepiej na dużych monitorach.

Jak sobie z tym radzisz na mniejszym ekranie? Generalnie też projektanci usuń obraz tła obok pewnego punktu przerwania lub samego obrazu zostaje zmieniony zmieścić się w oknie.

Cap Radio Raffle wykorzystuje tę technikę na swojej stronie głównej. Obraz tła utrzymuje punkt widzenia przez cały czas, bez względu na rozmiar ekranu.

Tego rodzaju rozwiązanie zazwyczaj wymaga pozycjonowania CSS ale jest to naprawdę proste, gdy się tego dowiesz. Właśnie utrzymuj punkt centralny na widoku przez cały czas i zmień rozmiar kontenera obrazów dopasować proporcjonalnie do urządzenia.

Poza dużymi warunkami ze względów estetycznych, możesz również użyć dużych obrazów do treści strony. Strona główna Mashable używa wyróżnionego tła obrazu dla głównej historii, która obejmuje cały układ.

Ich responsywny układ kompresuje obraz podczas utrzymanie centralnego punktu centralnego. Trudno to zrobić, ponieważ opisywany obraz zmienia się, gdy historia się zmienia, więc zdjęcia muszą być starannie kurowane. Rozwiązanie Mashable jest nadal świetną metodą obsługi zdjęć pełnoekranowych dla blogów i układów czasopism, gdy są odpowiednio zaprojektowane.

Uprość nawigację

Podczas modernizacji dla mniejszych ekranów, zachowaj jak najwięcej linków w nawigacji i uczynić go łatwo dostępnym. Oznacza to, że możesz potrzebować kilku linków, jeśli masz wielopoziomowe menu rozwijane.

Chociaż jeśli masz odpowiednią strategię, nadal możliwe jest zachowanie wszystkich rozwijanych list. Na przykład Kidscreen używa a wysuwane menu z małymi ikonami strzałek wskazanie podlinków w menu responsywnym.

Wiele osób kłóci się z menu hamburgerów, ale przyjmuję je jako niezbędny element do długich menu nawigacyjnych. Po prostu działa i jest powszechnie rozumiany przez większość użytkowników smartfonów jako „przycisk menu”.

W rzeczywistości trudno byłoby znaleźć responsywną stronę, która nie opiera się na menu z trzema słupkami. CyberChimps to świetny przykład używa pionowej listy rozwijanej zamiast wsuwania.

Struktura nawigacji dla CyberChimps zostanie zmieniona, aby przesunąć się w dół na górze strony. Menu spada z góry za pomocą duże elementy blokowe dla linków.

Z więcej miejsca do kliknięcia i większy tekst linku, proces nawigowania po stronach staje się znacznie prostszy. Staraj się przestrzegać tej filozofii wraz z całym responsywnym nagłówkiem, a Twoje projekty drastycznie się poprawią.

Zbuduj swoją własną

Dysponując tymi wskazówkami, nie powinno być problemu z budowaniem przydatnych nagłówków responsywnych. Chociaż istnieje wiele narzędzi, które mogą ci pomóc, jedynym sposobem, aby naprawdę to zrozumieć, jest praktyka.

Więc weź te techniki ze sobą i zacznij budować strony internetowe! Wymieniłem również kilka dodatkowych zasobów dla responsywnych nagłówków, które możesz sprawdzić poniżej.

• Utwórz podstawowe mobilne menu nawigacyjne CSS (teamtreehouse.com)
• Najlepsza praktyka dla nagłówka responsywnej witryny (ux.stackexchange.com)
• Jak mogę sprawić, że mój nagłówek będzie odpowiednio reagował? (stackoverflow.com)