Web & Graphic Designer | [email protected] | (+351) 918 472 525 - chamada para rede móvel nacional
Fev 06
Maquetes de vários websites adaptados a diversos ecrãs

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:

  • A diferença entre design responsivo e design adaptativo
  • O conceito mobile first
  • Os sites em WordPress são responsivos?
  • Como desenvolver um site responsivoHTML e CSS
  • Unidades e valores do CSS para um design responsivo
  • Ferramentas de desenvolvimento e teste

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

A diferença entre design responsivo e design adaptativo

Layouts para criação de um website institucionalA diferença entre design responsivo e design adaptativo

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.

O conceito mobile first

Criação de sites responsivos para telemóveisO conceito mobile first

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:

  • Melhor posicionamento no Google:
  • Melhor experiência do utilizador
  • Aumento da credibilidade da marca
  • Otimização do carregamento das páginas

Os sites em WordPress são responsivos?

Websites responsivos em WordPressOs sites WordPress são responsivos?

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.

Como desenvolver um site responsivo – os blocos de construção?

Maqueta site responsivoComo desenvolver um site responsivo – os blocos de construção?

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.

Unidades e valores do CSS para um design responsivo

Desenvolvimento de um site responsivoUnidades e valores do css para um design responsivo

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

  • PX – um único pixel
  • EM – unidade relativa com base no tamanho da fonte do elemento.
  • REM – unidade relativa com base no tamanho da fonte do elemento.
  • VH, VW – % da altura ou largura do viewport.
  • % – a percentagem do elemento pai

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.

Ferramentas de desenvolvimento e teste

Ferramentas online de desenvolvimento e teste para websites responsivosFerramentas de desenvolvimento e teste

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.

  • Material UI
  • Semantic
  • Pure.Css
  • Skeleton
  • Montage
  • Simple Grid
  • Gumby
  • Cascade
  • Foundation

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:

  • Responsinator
  • Resizer
  • Screenfly
  • Google Dev Tools Device Mode
  • Google Resizer
  • CrossBrowserTesting
  • Google Mobile-Friendly Test

Conclusão

Como criar um site responsivo - layout e programação - blogue Ana Margarida Mota

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.

SOLICITE UM ORÇAMENTO PARA DARMOS OS PRÓXIMOS PASSOS.

Artigos relacionados

Plugins de SEO para sites Wordpress - otimização dos motores de busca

Quais são os plugins de SEO que devo usar num site WordPress?

Atualmente, utilizar técnicas de SEO (Search Engine Optimization) é imprescindível para obtermos um bom posicionamento nos motores de busca (Google, Bing, Yahoo). (more…)

About The Author

Quem sou eu? Olá, o meu nome é Ana Margarida Mota e sou web & graphic designer. Sou uma pessoa pró-ativa e organizada, com um alto senso de responsabilidade e uma rigorosa ética de trabalho, sempre de forma comprometida e motivada.