{"id":260667,"date":"2022-12-25T16:15:00","date_gmt":"2022-12-25T13:15:00","guid":{"rendered":"https:\/\/inform.click\/tecnicas-para-lidar-com-a-navegacao-em-designs-responsivos\/"},"modified":"2022-12-25T16:45:00","modified_gmt":"2022-12-25T13:45:00","slug":"tecnicas-para-lidar-com-a-navegacao-em-designs-responsivos","status":"publish","type":"post","link":"https:\/\/inform.click\/pt-pt\/tecnicas-para-lidar-com-a-navegacao-em-designs-responsivos\/","title":{"rendered":"T\u00e9cnicas para lidar com a navega\u00e7\u00e3o em designs responsivos"},"content":{"rendered":"

\n A navega\u00e7\u00e3o \u00e9 um elemento cr\u00edtico do design responsivo. Isso ocorre porque a medida da utilidade de um design de site responsivo \u00e9, em grande parte, pela facilidade de transi\u00e7\u00e3o entre os layouts de dispositivos m\u00f3veis e computadores.\n<\/p>\n

\n A navega\u00e7\u00e3o responsiva eficaz exigiria redimensionamento suave para resolu\u00e7\u00f5es mais baixas e, em seguida, upsizing para telas maiores, como as de desktops.\n<\/p>\n

\n Que tipo de navega\u00e7\u00e3o \u00e9 \u00fatil para designs responsivos?\n<\/p>\n

\n Existem diferentes tend\u00eancias e t\u00e9cnicas na gest\u00e3o da navega\u00e7\u00e3o em websites.\n<\/p>\n

\n Abordagem minimalista \u00e0 navega\u00e7\u00e3o
\n<\/h5>\n

\n Essa abordagem de navega\u00e7\u00e3o \u00e9 considerada minimalista, pois h\u00e1 um trabalho m\u00ednimo feito na navega\u00e7\u00e3o para garantir uma troca suave e limpa. A mudan\u00e7a na navega\u00e7\u00e3o n\u00e3o \u00e9 abrupta; feito com bastante delicadeza conforme o tamanho da tela sofre altera\u00e7\u00f5es. Assim, a abordagem \u00e9 tal que o tipo m\u00ednimo de retrabalho dos elementos de navega\u00e7\u00e3o \u00e9 feito para trazer efeitos m\u00e1ximos, elegantes e sutis. Os links de navega\u00e7\u00e3o s\u00e3o dimensionados e reduzidos ao m\u00ednimo, e bem ajustados \u00e0 p\u00e1gina. Essa abordagem pode ser usada para sites que desejam manter o foco na eleg\u00e2ncia e na simplicidade e optam por promover alguns recursos selecionados. Por exemplo, o site CrossTrees<\/strong>mostra um menu de navega\u00e7\u00e3o muito simples, concentrando-se no essencial e mantendo o espa\u00e7o principal para a exibi\u00e7\u00e3o do conte\u00fado da imagem. O muda o foco do usu\u00e1rio para o tema principal que \u00e9 o que ele quer transmitir, e n\u00e3o deixa o usu\u00e1rio perder o foco. Al\u00e9m de sites imobili\u00e1rios, artistas, designers e fot\u00f3grafos, entre outros, podem usar esses sites.\n<\/p>\n

\n Como voc\u00ea pode ver, este site enfatiza o minimalismo; o foco est\u00e1 na imagem e no slogan que \u00e9 “Townhouse Office Space To Let in Glasgow”. A facilidade de acesso \u00e0 barra de navega\u00e7\u00e3o \u00e9 minimizada, mas clara.\n<\/p>\n

\n Outro exemplo \u00e9 um site de web design Hashtag17<\/strong>, que tamb\u00e9m oferece v\u00e1rios outros servi\u00e7os. O desafio \u00e9 mostrar todos os servi\u00e7os oferecidos em uma \u00fanica p\u00e1gina, sem sobrecarregar a p\u00e1gina. A t\u00e9cnica adaptada pela ag\u00eancia foi mostrar um instant\u00e2neo de todos os servi\u00e7os na parte inferior do site sobre um fundo branco que ajudar\u00e1 o usu\u00e1rio a navegar em qualquer uma das 17 p\u00e1ginas dessa \u00fanica \u00e1rea.\n<\/p>\n

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

\n A vantagem aqui \u00e9 que um \u00fanico olhar mostrar\u00e1 ao espectador todos os 17 servi\u00e7os oferecidos por esta empresa. O fundo branco fornece uma abordagem sem distra\u00e7\u00e3o e os usu\u00e1rios podem identificar imediatamente a \u00e1rea em que podem estar procurando ajuda.\n<\/p>\n

\n Quando a barra de navega\u00e7\u00e3o suporta o peso da p\u00e1gina!
\n<\/h5>\n

\n A maioria dos sites responsivos posiciona o menu de navega\u00e7\u00e3o na parte superior. Existem vantagens claras de fazer isso, como facilidade de implementa\u00e7\u00e3o, nenhuma depend\u00eancia de JavaScript e CSS simples. No entanto, este n\u00e3o \u00e9 o posicionamento ideal para celulares onde o mercado imobili\u00e1rio \u00e9 um desafio. Uma maneira interessante de lidar com a navega\u00e7\u00e3o no design de site responsivo \u00e9 empurr\u00e1-la para o final do site, conforme sugerido pelo autor Luke Wroblewski. Uma barra de navega\u00e7\u00e3o ocupa menos espa\u00e7o na \u00e1rea de trabalho e, portanto, pode ser colocada na parte superior. Al\u00e9m disso, \u00e9 aqui que os usu\u00e1rios tamb\u00e9m o procurariam. Mas em aparelhos menores, o ideal \u00e9 empurr\u00e1-lo para o fundo onde n\u00e3o ocupar\u00e1 muito espa\u00e7o. A lista de navega\u00e7\u00e3o \u00e9 colocada no rodap\u00e9 do site ou logo acima do rodap\u00e9. H\u00e1 um link de \u00e2ncora para ele na parte do cabe\u00e7alho do site.\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  A vantagem disso \u00e9 o espa\u00e7o para mais conte\u00fado na parte superior da dobra do site; ao mesmo tempo, a navega\u00e7\u00e3o \u00e9 mais f\u00e1cil e acess\u00edvel e discreta. Uma vantagem adicional \u00e9 que o usu\u00e1rio pode ler todo o conte\u00fado e rolar at\u00e9 o final da p\u00e1gina, onde encontra a barra de navega\u00e7\u00e3o. Isso dar\u00e1 a eles mais op\u00e7\u00f5es para clicar. Outras vantagens s\u00e3o que essa abordagem n\u00e3o requer o uso de JavaScript e, portanto, \u00e9 mais f\u00e1cil de gerenciar e solucionar problemas. Esse m\u00e9todo \u00e9 mais f\u00e1cil para projetar sites responsivos, pois a posi\u00e7\u00e3o do cabe\u00e7alho e do rodap\u00e9 (que s\u00e3o fixos) permite uma transi\u00e7\u00e3o f\u00e1cil.\n<\/p>\n
\n  A parte estranha desse tipo de arranjo do elemento de navega\u00e7\u00e3o \u00e9 que uma pessoa precisa pular para frente e para tr\u00e1s para acessar os links. Portanto, \u00e9 um tipo de intera\u00e7\u00e3o desajeitado, que pode ser bastante complicado no celular e pode impedir a suavidade da navega\u00e7\u00e3o m\u00f3vel. Outra desvantagem \u00e9 que, se um usu\u00e1rio n\u00e3o estiver lendo o conte\u00fado, ele pode n\u00e3o rolar para a parte inferior da tela e, portanto, pode perder a barra de navega\u00e7\u00e3o e agora saber onde procur\u00e1-la.\n<\/p>\n
\n  Isso pode ser corrigido usando o menu de altern\u00e2ncia
\n<\/h5>\n
\n  Aqui, os slides do menu abrem no pr\u00f3prio cabe\u00e7alho e d\u00e3o uma apar\u00eancia limpa e elegante com um recurso de mostrar\/ocultar. \u00c9 f\u00e1cil de codificar e \u00e9 uma transi\u00e7\u00e3o suave. Mas o desafio \u00e9 que o Android pode n\u00e3o oferecer uma transi\u00e7\u00e3o t\u00e3o suave com anima\u00e7\u00f5es CSS.\n<\/p>\n
\n  Um bom exemplo de uso do Toggle \u00e9 o Starbucks<\/strong> :\n<\/p>\n
\"\"<\/a><\/p>\n
\n  Al\u00e9m disso, se o menu for grande, ainda pode ocupar muito espa\u00e7o. Esse problema pode ser corrigido criando menus diferentes para dispositivos diferentes. Uma maneira eficaz de fazer isso \u00e9 usando o plug-in Responsive Select Menu.\n<\/p>\n
\n  Outro m\u00e9todo \u00e9 atrav\u00e9s do uso da abordagem Selecionar Menu.
\n<\/h5>\n
\n  Ao contr\u00e1rio dos outros m\u00e9todos de navega\u00e7\u00e3o, esta t\u00e9cnica envolve o uso de Javascript. Faz-nos da propriedade da forma. Ele converte a lista de menu em um elemento de sele\u00e7\u00e3o. Embora possa ser o elemento de melhor desempenho em todos os navegadores, como s\u00e3o derivados de menus suspensos, os designers podem consider\u00e1-los restritivos devido \u00e0 dificuldade de personaliza\u00e7\u00e3o em diferentes navegadores. As maiores vantagens desses menus em designs de sites responsivos s\u00e3o que eles funcionam. Outro ponto positivo \u00e9 que podem ser usados \u200b\u200bpara controlar os links de navega\u00e7\u00e3o quando estiverem em excesso; isso pode ser um problema para a abordagem TopNav. Eles tamb\u00e9m liberam muito espa\u00e7o no layout da web, que pode ser usado para web design. Os menus selecionados podem ser adaptados para os diferentes dispositivos – diferentes navegadores m\u00f3veis manipular\u00e3o os menus selecionados de maneiras diferentes.\n<\/p>\n
\n  Uma maneira f\u00e1cil de usar o Select Menu \u00e9 atrav\u00e9s do TinyNav<\/strong>, um plugin JQuery.\n<\/p>\n
\n  Inclua o arquivo JS depois de carregar sua vers\u00e3o do jQuery e, em seguida, escreva o seguinte c\u00f3digo:\n<\/p>\n
\n<script>\n<![CDATA[\n\n$(function() {\n\u00a0\u00a0$(\"#nav\").tinyNav();\n});\n]]>\n<\/script><\/code><\/pre>\n
\n  Adicione algumas linhas ao seu CSS. Ocultar a classe tinynav. Configure-o para exibir em qualquer ponto de interrup\u00e7\u00e3o que voc\u00ea deseja:\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  A desvantagem \u00e9 que elas podem n\u00e3o ser t\u00e3o elegantes e est\u00e9ticas quanto outras t\u00e9cnicas de menu de navega\u00e7\u00e3o. Eles s\u00e3o melhores em p\u00e1ginas simples com layouts de p\u00e1gina \u00fanica, como o do ApacheCoube<\/strong>.\n<\/p>\n
\"\"<\/a><\/p>\n
\n  O gerenciamento de conte\u00fado \u00e9 fundamental para a navega\u00e7\u00e3o eficiente de sites responsivos. Durante o planejamento do wireframe para site responsivo, determine qual conte\u00fado \u00e9 necess\u00e1rio para a \u00e1rea de trabalho e qual tipo de conte\u00fado \u00e9 mais preferido para o layout m\u00f3vel. Certifique-se de que apenas o conte\u00fado que atenda aos objetivos espec\u00edficos seja colocado. A este respeito, a navega\u00e7\u00e3o pode seguir uma abordagem semelhante. Para simplificar os menus de navega\u00e7\u00e3o responsivos para celulares, certifique-se de que o menu de navega\u00e7\u00e3o m\u00f3vel mostre apenas os links mais importantes; os menos importantes precisam ser deixados de fora. Portanto, os usu\u00e1rios m\u00f3veis podem ver apenas o que desejam em seus sites.\n<\/p>\n
\n  Voc\u00ea precisar\u00e1 determinar qual conte\u00fado \u00e9 absolutamente cr\u00edtico para ser colocado na parte do site que \u00e9 mais observada pelas pessoas, seja no desktop ou no celular e fazer isso.\n<\/p>\n
\n  Existem alguns pontos-chave a serem lembrados ao trabalhar em um site responsivo para garantir uma navega\u00e7\u00e3o suave:\n<\/p>\n