{"id":257964,"date":"2022-12-25T16:15:00","date_gmt":"2022-12-25T13:15:00","guid":{"rendered":"https:\/\/inform.click\/techniki-obslugi-nawigacji-w-projektach-responsywnych\/"},"modified":"2022-12-25T16:29:00","modified_gmt":"2022-12-25T13:29:00","slug":"techniki-obslugi-nawigacji-w-projektach-responsywnych","status":"publish","type":"post","link":"https:\/\/inform.click\/pl\/techniki-obslugi-nawigacji-w-projektach-responsywnych\/","title":{"rendered":"Techniki obs\u0142ugi nawigacji w projektach responsywnych"},"content":{"rendered":"

\n Nawigacja jest kluczowym elementem responsywnego projektu. Dzieje si\u0119 tak, poniewa\u017c miar\u0105 u\u017cyteczno\u015bci responsywnego projektu strony internetowej jest w du\u017cej mierze \u0142atwo\u015b\u0107 przej\u015bcia mi\u0119dzy uk\u0142adami mobilnymi i stacjonarnymi.\n<\/p>\n

\n Skuteczna responsywna nawigacja wymaga\u0142aby p\u0142ynnej zmiany rozmiaru do ni\u017cszych rozdzielczo\u015bci, a nast\u0119pnie powi\u0119kszenia do wi\u0119kszych ekran\u00f3w, takich jak te na komputerach stacjonarnych.\n<\/p>\n

\n Jaki rodzaj nawigacji jest przydatny w responsywnych projektach?\n<\/p>\n

\n Istniej\u0105 r\u00f3\u017cne trendy i techniki zarz\u0105dzania nawigacj\u0105 w serwisach internetowych.\n<\/p>\n

\n Minimalistyczne podej\u015bcie do nawigacji
\n<\/h5>\n

\n Takie podej\u015bcie do nawigacji jest uwa\u017cane za minimalistyczne, poniewa\u017c wymaga minimalnej pracy nad nawigacj\u0105, aby zapewni\u0107 p\u0142ynne, czyste prze\u0142\u0105czanie. Zmiana nawigacji nie jest nag\u0142a; do\u015b\u0107 delikatnie zrobione, poniewa\u017c rozmiar ekranu ulega zmianom. St\u0105d podej\u015bcie jest takie, \u017ce przeprowadza si\u0119 minimalne przer\u00f3bki element\u00f3w nawigacji, aby uzyska\u0107 maksymalne, eleganckie i subtelne efekty. Linki nawigacyjne s\u0105 dopasowane do rozmiaru i ograniczone do minimum oraz dobrze dopasowane do strony. Podej\u015bcie to mo\u017cna zastosowa\u0107 w przypadku witryn, kt\u00f3re chc\u0105 skupi\u0107 si\u0119 na elegancji i prostocie oraz promuj\u0105 wybrane funkcje. Na przyk\u0142ad strona internetowa CrossTrees<\/strong>pokazuje bardzo proste menu nawigacyjne, koncentruj\u0105c si\u0119 na najwa\u017cniejszych rzeczach i zachowuj\u0105c g\u0142\u00f3wn\u0105 przestrze\u0144 na prezentacj\u0119 zawarto\u015bci obrazu. Przesuwa uwag\u0119 u\u017cytkownika na g\u0142\u00f3wny temat, kt\u00f3ry chce przekaza\u0107, i nie pozwala u\u017cytkownikowi straci\u0107 koncentracji. Poza portalami nieruchomo\u015bci, z takich serwis\u00f3w mog\u0105 korzysta\u0107 m.in. arty\u015bci, projektanci i fotografowie.\n<\/p>\n

\n Jak wida\u0107 ta strona k\u0142adzie nacisk na minimalizm; nacisk k\u0142adziony jest na obraz i slogan, kt\u00f3ry brzmi \u201eMiejsce biurowe do wynaj\u0119cia w Glasgow”. \u0141atwo\u015b\u0107 dost\u0119pu do paska nawigacyjnego jest ograniczona do minimum, ale przejrzysta.\n<\/p>\n

\n Innym przyk\u0142adem jest witryna do projektowania stron internetowych Hashtag17<\/strong>, kt\u00f3ra oferuje r\u00f3wnie\u017c wiele innych us\u0142ug. Wyzwaniem jest zaprezentowanie wszystkich oferowanych us\u0142ug na jednej stronie, bez za\u015bmiecania strony. Technika zastosowana przez agencj\u0119 polega\u0142a na pokazaniu migawki wszystkich us\u0142ug na dole strony na bia\u0142ym tle, co pomo\u017ce u\u017cytkownikowi przej\u015b\u0107 do dowolnej z 17 stron z tego pojedynczego obszaru.\n<\/p>\n

\"\"<\/a><\/p>\n

\n Zalet\u0105 jest to, \u017ce jedno spojrzenie poka\u017ce widzowi wszystkie 17 us\u0142ug oferowanych przez t\u0119 firm\u0119. Bia\u0142e t\u0142o zapewnia podej\u015bcie bez rozpraszania uwagi, a u\u017cytkownicy mog\u0105 natychmiast zlokalizowa\u0107 obszar, w kt\u00f3rym mog\u0105 szuka\u0107 pomocy.\n<\/p>\n

\n Gdy pasek nawigacyjny ud\u017awignie ci\u0119\u017car strony!
\n<\/h5>\n

\n Wi\u0119kszo\u015b\u0107 responsywnych stron internetowych umieszcza menu nawigacyjne u g\u00f3ry. Ma to oczywiste zalety, takie jak \u0142atwo\u015b\u0107 implementacji, brak zale\u017cno\u015bci od JavaScript i prosty CSS. Nie jest to jednak optymalne pozycjonowanie dla telefon\u00f3w kom\u00f3rkowych, gdzie nieruchomo\u015bci stanowi\u0105 wyzwanie. Ciekawym sposobem obs\u0142ugi nawigacji w responsywnym projekcie strony internetowej jest zepchni\u0119cie jej na d\u00f3\u0142 strony, jak sugeruje autor \u0141ukasz Wr\u00f3blewski. Pasek nawigacyjny zajmuje mniej miejsca na pulpicie, dzi\u0119ki czemu mo\u017cna go umie\u015bci\u0107 na g\u00f3rze. Co wi\u0119cej, tutaj u\u017cytkownicy r\u00f3wnie\u017c b\u0119d\u0105 go szuka\u0107. Ale w przypadku mniejszych urz\u0105dze\u0144 idealnie jest zepchn\u0105\u0107 go na d\u00f3\u0142, gdzie nie zajmie du\u017co miejsca. Lista nawigacyjna umieszczona jest w stopce serwisu lub tu\u017c nad stopk\u0105. Link do kotwicy znajduje si\u0119 w nag\u0142\u00f3wku strony.\n<\/p>\n

#access li a {\n   padding: 0;\n   margin: 0;\n   font-size: 16px;\n   height: 57px;\n}\n.container {\n   padding-bottom: 549px;\n   position: relative;\n}\n.nav-strip {\n   position: absolute;\n   bottom: 0;\n}<\/code><\/pre>\n
\n  Zalet\u0105 tego jest miejsce na wi\u0119cej tre\u015bci w g\u00f3rnej cz\u0119\u015bci serwisu; jednocze\u015bnie nawigacja jest \u0142atwiejsza, dost\u0119pna i dyskretna. Dodatkow\u0105 zalet\u0105 jest to, \u017ce u\u017cytkownik mo\u017ce zapozna\u0107 si\u0119 z ca\u0142\u0105 tre\u015bci\u0105 i przewin\u0105\u0107 do do\u0142u strony, gdzie znajduje pasek nawigacyjny. To da im wi\u0119cej opcji do klikni\u0119cia. Inne zalety tego podej\u015bcia to to, \u017ce nie wymaga u\u017cycia JavaScript, a zatem jest \u0142atwiejsze w zarz\u0105dzaniu i rozwi\u0105zywaniu problem\u00f3w. Ta metoda jest \u0142atwiejsza do projektowania responsywnych stron internetowych, poniewa\u017c po\u0142o\u017cenie nag\u0142\u00f3wka i stopki (kt\u00f3re s\u0105 sta\u0142e) umo\u017cliwia \u0142atwe przej\u015bcie.\n<\/p>\n
\n  Niezr\u0119czn\u0105 cz\u0119\u015bci\u0105 tego rodzaju rozmieszczenia elementu nawigacyjnego jest to, \u017ce osoba musi skaka\u0107 tam iz powrotem, aby uzyska\u0107 dost\u0119p do \u0142\u0105czy. W zwi\u0105zku z tym jest to niewygodny rodzaj interakcji, kt\u00f3ry mo\u017ce by\u0107 do\u015b\u0107 uci\u0105\u017cliwy na urz\u0105dzeniach mobilnych i mo\u017ce utrudnia\u0107 p\u0142ynno\u015b\u0107 mobilnej nawigacji. Inn\u0105 wad\u0105 jest to, \u017ce je\u015bli u\u017cytkownik nie czyta tre\u015bci, mo\u017ce nie przewin\u0105\u0107 do do\u0142u ekranu, przez co mo\u017ce przegapi\u0107 pasek nawigacyjny i teraz wie, gdzie go szuka\u0107.\n<\/p>\n
\n  Mo\u017cna to naprawi\u0107 za pomoc\u0105 menu prze\u0142\u0105czania
\n<\/h5>\n
\n  Tutaj menu otwiera si\u0119 w samym nag\u0142\u00f3wku i zapewnia czysty, elegancki wygl\u0105d z funkcj\u0105 poka\u017c\/ukryj. Jest \u0142atwy do kodowania i zapewnia p\u0142ynne przej\u015bcie. Ale wyzwaniem jest to, \u017ce Android mo\u017ce nie zapewnia\u0107 tak p\u0142ynnego przej\u015bcia z animacjami CSS.\n<\/p>\n
\n  Dobrym przyk\u0142adem u\u017cycia Toggle jest Starbucks<\/strong> :\n<\/p>\n
\"\"<\/a><\/p>\n
\n  Co wi\u0119cej, je\u015bli menu jest du\u017ce, mo\u017ce nadal zajmowa\u0107 du\u017co miejsca. Ten problem mo\u017cna rozwi\u0105za\u0107, tworz\u0105c r\u00f3\u017cne menu dla r\u00f3\u017cnych urz\u0105dze\u0144. Skutecznym sposobem na to jest u\u017cycie wtyczki Responsive Select Menu.\n<\/p>\n
\n  Inn\u0105 metod\u0105 jest zastosowanie podej\u015bcia Select Menu.
\n<\/h5>\n
\n  W przeciwie\u0144stwie do innych metod nawigacyjnych, ta technika wymaga u\u017cycia Javascript. To czyni nas w\u0142a\u015bciwo\u015bci\u0105 formularza. Konwertuje list\u0119 menu na wybrany element. Chocia\u017c mo\u017ce to by\u0107 najlepiej dzia\u0142aj\u0105cy element w ka\u017cdej przegl\u0105darce, poniewa\u017c pochodz\u0105 one z rozwijanych menu, projektanci mog\u0105 uzna\u0107 je za restrykcyjne ze wzgl\u0119du na trudno\u015bci w dostosowywaniu w r\u00f3\u017cnych przegl\u0105darkach. Najwi\u0119ksz\u0105 zalet\u0105 tych menu w responsywnych projektach stron internetowych jest to, \u017ce dzia\u0142aj\u0105. Kolejnym pozytywnym punktem jest to, \u017ce mo\u017cna ich u\u017cywa\u0107 do kontrolowania \u0142\u0105czy nawigacyjnych, gdy s\u0105 one w nadmiarze; mo\u017ce to stanowi\u0107 problem dla podej\u015bcia TopNav. Zwalniaj\u0105 r\u00f3wnie\u017c du\u017co miejsca w uk\u0142adzie strony, kt\u00f3re mo\u017cna wykorzysta\u0107 do projektowania stron internetowych. Wybrane menu mo\u017cna dostosowa\u0107 do r\u00f3\u017cnych urz\u0105dze\u0144 \u2014 r\u00f3\u017cne przegl\u0105darki mobilne obs\u0142uguj\u0105 wybrane menu na r\u00f3\u017cne sposoby.\n<\/p>\n
\n  \u0141atwym sposobem korzystania z Select Menu jest TinyNav<\/strong>, wtyczka JQuery.\n<\/p>\n
\n  Do\u0142\u0105cz plik JS po za\u0142adowaniu swojej wersji jQuery, a nast\u0119pnie napisz nast\u0119puj\u0105cy kod:\n<\/p>\n
\n<script>\n<![CDATA[\n\n$(function() {\n\u00a0\u00a0$(\"#nav\").tinyNav();\n});\n]]>\n<\/script><\/code><\/pre>\n
\n  Dodaj kilka linii do CSS. Ukryj klas\u0119 tinynav. Ustaw wy\u015bwietlanie w dowolnym punkcie przerwania:\n<\/p>\n
\/* styles for desktop *\/\n.tinynav { display: none }\n \n\/* styles for mobile *\/\n@media screen and (max-width: 600px) {\n    .tinynav { display: block }\n    #nav { display: none }\n}<\/code><\/pre>\n
\n  Wad\u0105 jest to, \u017ce mog\u0105 nie by\u0107 tak schludne i estetyczne jak inne techniki menu nawigacyjnych. Najlepiej sprawdzaj\u0105 si\u0119 na prostych stronach z uk\u0142adami pojedynczych stron, takimi jak ApacheCoube<\/strong>.\n<\/p>\n
\"\"<\/a><\/p>\n
\n  Zarz\u0105dzanie tre\u015bci\u0105 ma kluczowe znaczenie dla wydajnej nawigacji po responsywnych stronach internetowych. Podczas planowania szkieletu responsywnej strony internetowej okre\u015bl, jakie tre\u015bci s\u0105 wymagane na desktopie, a jakie s\u0105 bardziej preferowane w uk\u0142adzie mobilnym. Upewnij si\u0119, \u017ce umieszczane s\u0105 tylko te tre\u015bci, kt\u00f3re spe\u0142niaj\u0105 okre\u015blone cele. Pod tym wzgl\u0119dem nawigacja mo\u017ce przebiega\u0107 w podobny spos\u00f3b. Aby usprawni\u0107 responsywne menu nawigacyjne dla telefon\u00f3w kom\u00f3rkowych, upewnij si\u0119, \u017ce menu nawigacji mobilnej zawiera tylko najwa\u017cniejsze linki; mniej wa\u017cne nale\u017cy pomin\u0105\u0107. Dlatego u\u017cytkownicy mobilni mog\u0105 po prostu zobaczy\u0107 to, co chc\u0105 na swoich stronach internetowych.\n<\/p>\n
\n  B\u0119dziesz musia\u0142 okre\u015bli\u0107, jakie tre\u015bci s\u0105 absolutnie niezb\u0119dne do umieszczenia w cz\u0119\u015bci witryny, kt\u00f3ra jest maksymalnie obserwowana przez ludzi, czy to na komputerze, czy na urz\u0105dzeniu mobilnym, i zr\u00f3b to.\n<\/p>\n
\n  Podczas pracy nad responsywn\u0105 stron\u0105 internetow\u0105 nale\u017cy pami\u0119ta\u0107 o kilku kluczowych kwestiach, aby zapewni\u0107 p\u0142ynn\u0105 nawigacj\u0119:\n<\/p>\n