Ricardo AleixoVivemos em uma era altamente tecnológica. Todos buscam se manter conectados por meio dos mais diferentes tipos de dispositivos: tablets, desktops, smartphones, todos com diferentes tamanhos de tela e resoluções. Nesse contexto, a criação de sites que se adaptem a esses diferentes tipos de dispositivos , ou seja sites com design responsivo, se tornou essencial
O design responsivo é a iniciativa de desenvolver páginas otimizadas para qualquer dispositivo móvel baseadas em apenas um design, e o Dreamweaver é a ferramenta certa para te ajudar nisso.
Criar um site com design responsivo no Dreamweaver ficou ainda mais fácil na versão CS6 do programa e nós separamos aqui algumas dicas para você mandar bem. Confira!
Ah, e se você quiser criar sites responsivos e potencializar seus conhecimentos em desenvolvimento de sites, conheça nossos cursos online de Front-End.
O que há de novo para criar um site com design responsivo no Dreamweaver?
O Dreamweaver CS6 conta com um recurso genial: o “layout de grade fluida”. Ele permite ao usuário criar, de forma simplificada, layouts que se adaptam a todos os dispositivos, com ferramentas de inserção e edição de tags e div, CSS e HTML. O recurso facilita muito a vida de quem precisa economizar tempo ou não tem tanta intimidade com os complexos códigos de programação.
1. Colunas
Com a opção “layout de grade fluida”, você pode escolher quantas colunas deseja para celulares, tablets e desktops. Isso determinará a porcentagem da tela que o layout ocupará e é totalmente programável pelo usuário. Ao clicar em “criar”, o programa te mostrará um arquivo dividido em colunas, no qual você poderá organizar todos os elementos (imagens, textos, etc.) que deseja colocar em sua página.
Essa forma de design usa larguras relativas para se adaptarem às diferentes telas. Então, não importa se você está visualizando o site num celular, tablet ou TV, o layout se adaptará à resolução do dispositivo.
2. Organização de conteúdo
Você deverá organizar cada elemento separadamente para cada dispositivo. Isso é muito importante, mas até então era um trabalho demorado, meticuloso e até chato.
Com o Dreamweaver CS6, isso ficou muito mais fácil. Isso porque o programa cria uma janela com o conteúdo da página, em que cada elemento pode ser visualizado e dimensionado individualmente para cada dispositivo.
Mais uma dica: devido à filosofia MOBILE FIRST adotada pela Adobe, a visualização padrão vai ser a da tela de celulares. Então, para mudar a visualização para as outras páginas utilize os botões da barra superior ou na barra do rodapé.
3. Viewport
Os navegadores de smartphones têm uma funcionalidade padrão que transformam os sites em full-view, o que impede que o usuário faça zoom nos layouts. Para anular essa configuração, utilize a tag meta viewpoirt. Ela definirá o ponto de vista de sua página em todos os dispositivos numa relação 1×1 e acionará a funcionalidade.
4. Max-width e min-width
Essas propriedades são utilizadas para controlar o tamanho dos elementos. A primeira, max-width, controla o tamanho máximo do elemento e evitar que ele se estenda para fora do container. Já a min-width é usada para a função oposta, ou seja, definir o tamanho mínimo de um elemento, prevenindo que ele seja menor que o valor esperado.
5. Mídias flexíveis
Com a tag “max-width:100%”, você pode fazer com que o navegador escolha automaticamente o tamanho da imagem ou mídia e a adapte para os diferentes tipos de dispositivos. Desde que a imagem esteja em boa qualidade e tenha o tamanho correto, o CSS adaptará automaticamente as mídias.
Vale lembrar, porém, que a propriedade max-width não é compatível com o IE8 ou inferiores. É por isso que é necessário utilizar a propriedade max-width:100%.
Gostou das nossas dicas para criar um site com design responsivo no Dreamweaver? Então confira os nossos cursos de webdesign para colocar todas elas em prática e fique fera!
