Como ter um Website fluido

Praticamente todos os utilizadores já se depararam com um website que não está otimizado corretamente, ou seja, quando reduz ou aumenta o tamanho da janela, ele não se adapta bem; muitas vezes fica com blocos sobrepostos, texto desformatado, erros no scroll lateral, entre outros.

 

Quando criamos um website, temos de ter em conta diversos fatores para que estes problemas não aconteçam. Não vale de nada ter um website bonito, quando o mesmo não é funcional.

Hoje, a Make It Digital apresenta-lhe 4 dicas de programação para que o seu site se adapte a todas as resoluções.

 

  1. Uso de medidas dinâmicas.

Ao utilizarmos medidas dinâmicas (ex: 100%), em vez de medidas absolutas (ex: 400px), para definir a largura ou altura de blocos de conteúdo, faremos com que o próprio se ajuste ao espaço disponível.

Neste exemplo, se a janela tiver 350px de largura, ao utilizarmos as medidas absolutas, parte bloco ficaria “fora”. Ao utilizarmos medidas dinâmicas (percentagens), o bloco iria ter sempre 100% da largura, seja 200px ou 2000px.

Opte sempre por medidas dinâmicas, de forma a que o website fique fluido nos diferentes dispositivos.

 

  1. Tamanho de Letra responsivo.

A melhor maneira para que o conteúdo se adapte ao tamanho do ecrã é utilizar medidas dinâmicas, ou seja neste caso, o uso de “vw” (viewport width).

Viewport width é o tamanho da janela que utilizamos para calcular o tamanho de letra. Quanto maior for a janela, maior será o tamanho de letra e vice-versa.

Em alternativa a medidas estáticas, tais como: 20xp, utilize 5vw.

 

  1. Uso de media Queries.

O uso de media queries faz com que nós tenhamos o controlo do comportamento do website em vários dispositivos.

Podemos controlar como o conteúdo irá ser mostrado em Desktop, Tablet/Ipad e Mobile e, desta forma, adaptar a sua largura de ecrã.

 

  1. Imagens flexíveis.

Imagens flexíveis são importantes para o desenvolvimento de um site fluido.

Do ponto de vista do desenvolvimento, o código permitirá que as imagens sejam dimensionadas através de medidas dinâmicas.

Utilize medidas dinâmicas para que a imagem se adapte à largura da janela do navegador.

 

Estas são algumas Dicas MID para que o seu website não tenha erros de otimização. São fundamentais e podem ditar a qualidade do website. A Make It Digital está aqui para o ajudar a pôr em prática estas medidas!

 

 

 

 

 

 

Contact Us

We're not around right now. But you can send us an email and we'll get back to you, asap.

Abrir Chat
Podemos ajudar? Estamos no WhatsApp
Olá! Podemos ajudar? :)
Powered by