Avanços na tecnologia: um dilema para designers da web
Qual dos dispositivos da imagem abaixo você usa?
 |
Provavelmente, você usa todos eles! Já se foi o tempo em que o design estático de páginas da web era a norma - quando não havia imagens, uma página da web era apenas texto e todos visualizavam as páginas da web em um monitor preto e branco padrão de 15 polegadas. Um único usuário pode alternar entre smartphone, tablet e laptop, e muitas pessoas desejam visualizar o mesmo site em todos os seus dispositivos. Hoje, os web designers precisam considerar que os usuários estão visualizando suas páginas da web em vários dispositivos com uma variedade de tamanhos de tela, resoluções e recursos.
Web Design Responsivo: Uma Solução
 |
Você consegue se imaginar visualizando uma página da web projetada para um monitor quadrado (acima) na tela retangular de um smartphone (abaixo)?
 |
Como um web designer pode manter a consistência em vários dispositivos e plataformas? Uma resposta seria criar uma página da web para cada dispositivo, mas isso daria muito trabalho. Uma solução mais eficiente é o web design responsivo ( RWD ), que responde a como o usuário está visualizando e usando a página. As páginas se ajustam automaticamente, levando em consideração o tamanho da tela, a plataforma e a orientação. Os designers que usam RWD eliminam a necessidade de vários designs da web para vários dispositivos.
Este método de web design foi criado por Ethan Marcotte, que baseou o conceito de RWD em arquitetura responsiva . Recursos arquitetônicos responsivos em edifícios ou salas se ajustam ao modo como a sala está sendo usada. Um exemplo seria uma sala que usa sensores de movimento para alterar a temperatura da sala conforme mais pessoas entram na sala.
Da mesma forma, o RWD ajusta uma página da web com base nos recursos do dispositivo no qual a página da web está sendo exibida.
Elementos de RWD
Cascading Style Sheets
Então, o que exatamente uma página da web com RWD faz de diferente? Web designers que usam RWD utilizam Cascading Style Sheets ( CSS ), uma linguagem de folha de estilo com recursos flexíveis. CSS fornece as instruções para controlar como uma página é organizada, como as imagens e o texto são exibidos e outros elementos fundamentais da página da web.
Veja como funciona: O designer cria um CSS básico que tem todos os elementos básicos do design e, em seguida, cria uma folha de estilo definindo o layout e a estrutura da página para cada tipo de dispositivo que pode ser usado (desktop, laptop, tablet, smartphone ) Construída na página principal do CSS está uma consulta de mídia , que pesquisa rapidamente para determinar o tipo de dispositivo que está sendo usado para abrir a página, seus recursos e sua orientação, e então a consulta de mídia carrega o CSS que melhor se adapta ao dispositivo.
Unidades Relativas
Os designers de RWD fazem outra coisa importante de maneira diferente durante o design da web: eles usam unidades relativas em vez de um número absoluto de pixels . Pixels são elementos de imagem usados para definir o número máximo de pontos na tela que o elemento pode ocupar, vertical ou horizontalmente. Por exemplo, uma imagem com um pixel absoluto de 200 x 149 ficaria assim:
 |
Em vez de definir um número definido de pixels, o RWD usa porcentagens. Os designers escrevem a instrução para dizer que o elemento terá 20% x 30%, o que significa que o elemento terá 20% da largura e 30% da altura de qualquer tela em que esteja sendo visualizado. Uma tela maior significa uma imagem maior.
Os designers também usam esse processo para criar imagens flexíveis . As imagens flexíveis podem ser redimensionadas proporcionalmente, onde a largura máxima é determinada pela largura da tela. A altura é determinada mantendo as proporções de largura e altura iguais. Isso é chamado de manutenção da proporção da imagem . Vamos aplicar isso à imagem de 200 x 149 que vimos antes - se a largura máxima for 150 pixels, o aspecto vertical seria 112.
 |
Estruturas de layout personalizado
Os designers também podem usar CSS para desenvolver estruturas de layout personalizadas . Estruturas de layout personalizadas, na verdade, adaptam o layout da página para o dispositivo que está sendo usado. Digamos, por exemplo, que o layout em uma tela mais larga tenha barras laterais (texto ou imagens que são complementares ao texto principal e aparecem nas laterais da tela). Com a estrutura de layout customizada, quando aberta em uma tela menor, as barras laterais se moveriam para a parte inferior e as barras de rolagem verticais seriam usadas.
Vejamos uma página da web em uma tela maior na imagem abaixo:
 |
Em uma tela menor, a mesma página da web pode ter a seguinte aparência:
 |
Se um dispositivo não usa CSS, os designers podem obter o mesmo efeito usando a linguagem de programação JavaScript para escrever um layout flexível. Os designers também podem simplesmente optar por não mostrar determinado conteúdo, como imagens ou texto suplementar, quando a página está sendo exibida em uma tela menor.
Resumo da lição
O web design responsivo foi desenvolvido por Ethan Marcotte e foi baseado no conceito de arquitetura responsiva na indústria da construção. Com o número crescente de dispositivos que as pessoas podem usar para visualizar páginas da web, os web designers criaram páginas da web que poderiam se adaptar a qualquer dispositivo que o visualizador estivesse usando, seja um desktop, laptop, tablet ou smartphone. O design da Web responsivo permite layouts e estruturas flexíveis usando folhas de estilo em cascata (CSS) ou JavaScript.
Ao usar CSS, o designer pode criar uma folha de estilo principal para controlar o layout básico da página da web e, em seguida, criar várias folhas de estilo suplementares para lidar com estruturas de layout para entrega específica. O CSS usa uma consulta de mídia para primeiro determinar que tipo de dispositivo está sendo usado e, em seguida, usa a folha de estilo que funciona melhor naquele ambiente. Usando CSS ou JavaScript, os designers podem definir o elemento da página da web em termos de porcentagens, em vez de pixels absolutos, e podem usar imagens flexíveis que mantêm sua proporção de aspecto, independentemente do tamanho ou orientação do dispositivo.