O que é design responsivo?

Design Responsivo é uma técnica de estruturação HTML, CSS e JS, em que o site se adapta ao browser (navegador) do usuário.

Na prática:

Como desenvolver?

Para o desenvolvimento do layout responsivo, é necessário seguir as regras do grid e ter em mente que o mesmo layout será usado para versão Mobile e Desktop.

O Grid

Utilizamos como padrão o framework Foundation com 1000px de largura dividido em 12 colunas com espaçamento:

DOWNLOAD GRID EM PSD

O grid serve apenas para guiar a construção das colunas, ele não precisa ser simétrico como no desenho acima, com todas as partes igual.

Confira na página do prórpio Foundation outros exemplos de preenchimento. clique Aqui

Seguindo o grid separamos as informações por colunas permitindo assim que cada coluna seja tratada separadamente em cada resolução.

Exemplos:

Abaixo como um layout construido com o grid se comporta em um desktop e na versão mobile.

Desktop:

Mobile:

Foundation

Zurb Foundation é um framework Front End para o desenvolvimento responsivo de forma rápida priorizando o valor semântico dos elementos, mantendo uma estrutura HTML limpa e de carregamento rápido. Utiliza o conceito mobile first para criação de design responsivo. Você pode fazer o download apenas de partes do framework que lhe interessa. Você irá encontrar estilos prontos para seus formulários, tabelas, botões, listas e até links. Mas não pense que é só isso, o Foundation é completo e irá ajuda-lo na tarefa de codificar qualquer tipo de projeto online. Para maiores informações acesse o site: foundation.zurb.com

FAQ

Ainda tem dúvida?

15 3031 5056

contato@sorocabacom.com.br

Preencha o nome
Preencha o e-mail
Preencha a mensagem