São Paulo - SP, Brazil
contato@oriontecinfo.com.br

Design responsivo

Projetos na área de TI

Um design responsivo muda a sua aparência e disposição com base no tamanho da tela em que é exibido. Então, se o usuário tem uma tela pequena, os elementos se reorganizam para lhe mostrar as coisas principais em primeiro lugar.

O sistema Survey System é responsivo. Assim, por exemplo, um usuário poderá responder a um formulário de pesquisa com um desktop ou com um dispositivo móvel (smartphone, tablet, notebook). O design responsivo permite que o conteúdo a ser exibido se adeque ao tamanho da tela do dispositivo.

Grid System do Bootstrap

De acordo com o site http://getbootstrap.com.br/: “Bootstrap é o mais popular framework HTML, CSS, e JS para desenvolvimento de projetos responsivo e focado para dispositivos móveis na web.”

No projeto do Survey System foi utilizado o framework Bootstrap devido a sua eficácia no que diz respeito a responsividade. O Bootstrap traz uma série de classes em seu arquivo bootstrap.min.css que facilitam o gerenciamento dessa questão da responsividade de uma forma mais genérica.

Survey System utiliza o sistema de grids (grades) do framework Bootstrap para organizar e posicionar os elementos na página (imagens, botões, campos de formulário, etc.) em linhas e colunas, de maneira responsiva.

Grid é uma malha que divide a tela ​em partes proporcionais e possibilita ​a distribuição do conteúdo de forma​ uniforme, proporcionando equilíbrio visual e estrutural. Construir um Design Responsivo se torna muito mais fácil se ele for apoiado em um Grid Flexível.

O grid system do Bootstrap é responsivo, orientado a dispositivos móveis (mobile first) e flexível, ou seja, se ajusta de acordo com a tela (fluid), quando ela muda de tamanho ou de orientação. Funciona como uma espécie de tabela abstrata.

Uma das vantagens do sistema de grade com relação às tabelas é o fato dele ser responsivo. Assim, o conteúdo pode ser automaticamente ajustado para exibição ótima em dispositivos com diferentes tamanhos de telas (desktops, tablets, smartphones, etc.).

Mobile First

O Bootstrap é Mobile First. Ou seja, seu desenvolvimento foi feito pensando primeiramente em dispositivos móveis (smartphones e tablets). Isso quer dizer que o framework assume, inicialmente, que a tela é de um dispositivo móvel, com tamanho pequeno. Assim, ele adapta todos os conteúdos para o tamanho menor. Depois, ele verifica o tamanho real da tela e vai ajustando os itens para que fiquem posicionados corretamente, conforme o tamanho e a resolução. Dessa forma, o framework tem ótima compatibilidade com todos os tamanhos de tela.

Container

No Bootstrap, existe o conceito de container. O container é uma div, que garante que o seu layout vai ficar alinhado na página, e com margens para as laterais. Ele também centraliza o conteúdo na tela do browser.

Exibição de tela (SmartPhones)

Exemplo – Resolução 360 x 640