{"id":79485,"date":"2024-04-17T21:08:24","date_gmt":"2024-04-17T21:08:24","guid":{"rendered":"https:\/\/mailrelay.com\/glosario\/responsive-design\/"},"modified":"2024-04-17T21:08:24","modified_gmt":"2024-04-17T21:08:24","slug":"responsive-design","status":"publish","type":"glossary","link":"https:\/\/mailrelay.com\/pt\/glossario\/responsive-design\/","title":{"rendered":"Responsive design"},"content":{"rendered":"

O responsive design, tamb\u00e9m conhecido como design responsivo, \u00e9 uma t\u00e9cnica de web design criada para exibir conte\u00fado igualmente, independentemente do tamanho da tela em que est\u00e1 sendo visto.<\/p>\n

O objetivo \u00e9 criar conte\u00fado que ir\u00e1 se adaptar automaticamente a diferentes tipos de telas e plataformas (computadores desktop, laptops, tablets, celulares, televisores, etc.)<\/p>\n

Da mesma forma, no email marketing<\/a>, tamb\u00e9m se fala em design responsivo sobre a visualiza\u00e7\u00e3o correta de campanhas de email marketing nos diferentes dispositivos nos quais os assinantes podem abrir os emails.<\/p>\n

1. Web responsive design e web design adapt\u00e1vel<\/h2>\n

Muitas vezes, web responsive design e web design adapt\u00e1vel se confundem, pois ambos buscam oferecer uma boa visualiza\u00e7\u00e3o dos sites em qualquer circunst\u00e2ncia, mas n\u00e3o s\u00e3o a mesma coisa.<\/p>\n

O Web Design responsive \u00e9 uma t\u00e9cnica para desenvolver interfaces que usem media queries e folhas de estilos, a fim de se auto-ajustar proporcionalmente a maneira como o conte\u00fado de um site \u00e9 visualizado para diferentes resolu\u00e7\u00f5es.<\/p>\n

Funciona de maneira percentual, com base nas porcentagens do espa\u00e7o de tela dispon\u00edvel e, \u00e9 claro, na resolu\u00e7\u00e3o exigida.<\/p>\n

Por outro lado, o web design adapt\u00e1vel funciona com base no uso de tamanhos de tela pr\u00e9-estabelecidos: 320px, 480px, 760px, 960px, 1200px, etc.<\/p>\n

\u00c9 criado um design para cada um dos tamanhos, de modo que, ao identificar o tipo de dispositivo usado, o design apropriado seja escolhido, entre as op\u00e7\u00f5es dispon\u00edveis. Funciona com medidas fixas, n\u00e3o com base em tamanhos percentuais.<\/p>\n

2. Vantagens do responsive design<\/h2>\n

A ascens\u00e3o de smartphones e tablets fez com que qualquer conte\u00fado consumido atrav\u00e9s destes dispositivos precise de instru\u00e7\u00f5es espec\u00edficas de exibi\u00e7\u00e3o; o responsive design desempenha um papel vital neste processo.<\/p>\n

Al\u00e9m disso, oferece uma s\u00e9rie de vantagens em compara\u00e7\u00e3o com designs n\u00e3o responsivos. Essas vantagens incluem:<\/p>\n