css Artigo - Layout Fluído ou Responsivo

[Arkanun1000 4.604]

Layout Fluído ou Responsivo

 

Muitas pessoas confundem os layout fluídos com os responsivos, pensam que tudo que é responsivo apenas estica e diminui, mas não é bem assim. Layouts fluídos são bem diferentes de responsivos, pois o Fluído (como o nome diz) flui com o tamanho da tela do usuário, enquanto o Responsivo responde ao tamanho.

 

 

Layout Responsivos

 

Os layouts responsivos são aqueles que precisam ter uma atenção maior da área de UX, quando é analisada toda a usabilidade do site, contemplando todos os dispositivos e se possível partindo do princípio “mobile first”, onde toda a arquitetura começa sendo pensada a partir do menor dispositivo utilizável seguindo em ordem crescente e adequando as informações.

 

O layout não segue a mesma estrutura em todos os dispositivos, muitos trocam as informações de lugar para melhor visualização, as vezes escondem e mostram a partir de um click, mudam os tamanhos das fontes, ícones e qualquer outro elemento. Para esse tipo de desenvolvimento são utilizadas as media queries css e algumas libs como

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

,

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

e o

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

A seguir você confere 3 estados diferentes para layout e sua respectiva reação com a página.

 

1. Monitores com resolução de 1024px de largura ou superior e Internet Explorer 8 e inferior. Foi declarado uma largura absoluta de 960 px para o corpo do site.
   
2. Largura igual ou inferir a 900px. Aqui declaramos que existem apenas larguras relativas de 100%.
   
3. Largura igual ou inferir a 400px. Ocultamos a sidebar do lado esquerdo (apenas para ilustrar o exemplo).
   

Neste exemplo podemos ver claramente como o efeito cascata do CSS funciona corretamente com o Media Queries, desta forma o CSS que fizemos como padrão é mantido normalmente por todo o documento, sendo alterado apenas quando declaramos alguma modificação com o Media Queries.

 

Note também que o css declarado para a largura de janela de 900px é mantido para o de 400px.

 

 

 

Layouts Fluídos

Os layouts fluídos são aqueles que acompanham o tamanho da tela, apenas aumentando e diminuindo, não trocando estrutura e não pensando muito na usabilidade, vamos pensar em acessar um site em uma tv de 50″ e acessar o mesmo site em um celular onde esse site é visto da mesma forma pelos 2 dispositivos, é claro que ficará horrível em um dos casos se não nos dois, para construir esse tipo de layout não se pensa muito em “px” e sim em “%”, para que o elemento se estique de acordo com o pai tendo assim a sua “fluidez”. Aqui tem um exemplo simples de como ele funciona:

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

.

 

Para ilustra melhor o que estamos dizendo, a imagem a seguir exemplifica um layout construído em “%”.

 

 

Veja que caso o usuário tenha a tela muito grande o texto ficará praticamente em apenas uma linha e quando diminuímos a tela o texto fica totalmente espremido na sidebar.

 

 

 

Layouts Fluídos Híbridos

Temos também os layouts fluídos híbridos onde seguem o mesmo padrão dos fluídos, porém com uma limitação de largura, nesse caso utilizamos o “max-width” e “min-width” assim conseguimos ter certo controle do layout.

 

Para demonstrar como funciona o Fluído Híbrido, é aplicado um max-width de 960px e min-width de 600px no exemplo anterior.

 

 

 

 

Para conferir na prática a diferença entre cada layout, na lista abaixo abaixo você pode acessar um exemplo de página para cada tipo layout. Apenas altere o zoom da página para testemunhar o efeito de cada layout em diferentes resoluções de tela.

 

• É necessário se cadastrar para acessar o conteúdo.

  • Entre
  • ou
  • Cadastre-se
  ;
  
• É necessário se cadastrar para acessar o conteúdo.

  • Entre
  • ou
  • Cadastre-se
  ;
  
• É necessário se cadastrar para acessar o conteúdo.

  • Entre
  • ou
  • Cadastre-se
  .
  

 

Fonte:

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

[fillxd 0]

muito obrigado pelos conhecimentos, estou aprendendo programação para melhorar de vida. Sou amante de computador e tudo que envolva tecnologia.

Gostaria de saber se você possui materiais como apostilas para que eu possa fazer o download do PDF e estudar.(pode ser apostila de CSS3,Html5,javascript,Java,SQL)

mas enfim, obrigado!!

seus ensinamentos estão mudando a vida de alguém!

[Arkanun1000 4.604]

muito obrigado pelos conhecimentos, estou aprendendo programação para melhorar de vida. Sou amante de computador e tudo que envolva tecnologia.

Gostaria de saber se você possui materiais como apostilas para que eu possa fazer o download do PDF e estudar.(pode ser apostila de CSS3,Html5,javascript,Java,SQL)

mas enfim, obrigado!!

seus ensinamentos estão mudando a vida de alguém!

OI amigo!

 

Pode da uma olhada nos posts de Biblioteca Digital (tem uma em cada tipo de assunto)

http://www.webcheats.com.br/threads/biblioteca-digital-css-xml-xhtml-html-javascript.2543738/

 

Forte Abraço!