Como criar um site responsivo – layout e programação

No seguimento do artigo “Quais os benefícios de um site responsivo?” vou aproveitar o mesmo tema e abordar algumas questões inerentes como:

Para além de desvendar alguns destes conceitos, incluindo a vertente do código, também vou dar continuidade à utilização de ferramentas de desenvolvimento, mas também de teste, ou seja, ferramentas para verificar o comportamento do site nos diversos ecrãs.

Nota: Artigo escrito por Ana Margarida Mota

O design responsivo acompanha a resolução do equipamento, ou seja, é ajustado automaticamente, de uma forma fluída, enquanto o design adaptativo trabalha com medidas fixas e é menos flexível.

Ambas as abordagens são muito semelhantes, mas a 1ª é a solução indicada e a que tem mais benefícios.

H oje em dia estar conectado à internet não é novidade e é um comportamento que faz parte da nossa rotina.

Com o ritmo acelerado do dia a dia começou-se a utilizar os smartphones e tablets para a realização de diversas tarefas que antes eram executadas no computador.
A partir desta mudança começou-se a questionar se não fazia mais sentido em 1º lugar criar o layout para os dispositivos móveis. Foi assim que o conceito mobile first apareceu e foi criado em 2011 por Luke Wroblewski.

Este conceito foca-se na arquitetura e desenvolvimento de sites para a web colocando o mobile em primeiro lugar.
Somente após a criação deste layout é que se começam a desenhar os restantes ecrãs.

Benefícios do mobile first:

I ndependentemente de escolhermos a opção WordPress.com ou .org ambas têm soluções responsivas.

Hoje em dia seja qual for a plataforma de eleição para criar um site há sempre layouts responsivos.
Se optarmos pela utilização de um template é importante testar antes de começarmos a desenvolver o projeto.

A base de um layout responsivo é a combinação de duas linguagens, o HTML (Hyper Text Markup Language) e o CSS (Cascade Style Sheet).

O HTML controla a estrutura, os elementos e o conteúdo da página, enquanto o CSS trabalha a parte visual (fontes, cores, alinhamentos, margens, posicionamento…).
É aqui que a jornada da programação começa.

Pensando numa abordagem responsiva é possível seguir dois caminhos diferentes, ou seja, optar por um layout fluido (baseado em %) ou um layout Flexbox.

Este último vai permitir uma maior flexibilidade e também melhor eficiência na forma da disposição de vários elementos.
A seguir é necessário preparar o conteúdo de forma a adaptar-se aos diversos ecrãs tirando partido das Media Queries.
Se estiverem a utilizar o conceito mobile first não é necessário incluir os pontos de interrupção destes dispositivos.

P ara desenvolver um layout responsivo é possível utilizar várias unidades:

Se optarem por definir uma largura e a largura máxima das imagens ou outro tipo de conteúdo usar a % é a melhor solução.
Assim conseguem garantir que todos os elementos ficam ajustados ao tamanho dos diversos ecrãs.

P ara além das ferramentas de desenvolvimento de sites responsivos mencionados no artigo “Quais os benefícios de um site responsivo?” acrescento as seguintes:

1 – Frameworks

As frameworks são consideradas ferramentas com diversas funções que podem ser usadas no desenvolvimento de um projeto web (site, app…).
Existem diversas frameworks mas aqui vou salientar as que trabalham a vertente de UI, CSS e Javascript.

2 – Teste

Para além das ferramentas de desenvolvimento é importante antes de entregar o trabalho testar a responsividade do aplicativo web que estamos a criar.
Deixo aqui algumas ferramentas e/ou addons que podem ser usadas:

T endo em conta todos os pontos abordados neste artigo não há desculpas para não saber como ter um site responsivo.

Investir num site responsivo ajuda o seu negócio a não ficar para trás.
No caso de precisar de ajuda pode sempre entrar em contacto comigo.

1 – Site Responsivo: O Que É e Como Criar (+ 7 Motivos Para Criar Um)

2 – Mobile First: o que é e quais as vantagens de utilizar essa técnica para criar um site

3 – O Guia para Iniciantes em Design Responsivo da Web (Amostras de Código e Exemplos de Layout)

4 – 10 Best Responsive Web Design Frameworks to Develop Websites