Zeroarts - Agência de Publicidade e Internet

Zeroarts - Agência de Publicidade e Internet
  • Zeroarts - Agência de Publicidade e Internet
  • Adicionar Zeroarts - Agência de Publicidade e Internet ao favoritos
  • Entre em contato com a Zeroarts - Agência de Publicidade e Internet
  • Feed RSS da Zeroarts
  • Fanpage da Zeroarts no Facebook
  • Twitter da Zeroarts
  • Local da Zeroarts no FourSquare
  • Perfil da Zeroarts no GooglePlus
  • Pintrest da Zeroarts
  • Canal da Zeroarts no YouTube

Blog da ZeroArts

Clique para voltar Clique para voltar

Dicas para desenvolvimento de sites responsivo


Postado em Desenvolvimento de sites no dia Escrito por: | Veja também meu: , ,
Confira algumas dícas de como proceder no desenvolvimento de sites responsivos
Confira algumas dícas de como proceder no desenvolvimento de sites responsivos
Atualmente um dos termos mais populares no desenvolvimento de sites é o layout responsivo. Porém, o que realmente é um layout responsivo? Qual a sua utilidade e benefícios?

Atualmente um dos termos mais populares no desenvolvimento de sites é o layout responsivo. Porém, o que realmente é um layout responsivo? Qual a sua utilidade e benefícios? Daqui para frente pretendo abordar o assunto de uma forma simples e objetiva como também abordando um pouco da área técnica.

O que é layout responsivo?

Design responsivo nada mais é do que uma estrutura de um website flexível as diversas resoluções de dispositivos digitais com acesso à internet capazes de visualizarem sua página. Passando de computadores, notebooks, smartphones, tablets e agora as smart tv.

Consiste, basicamente, na previsão do design para essas resoluções dentro do projeto de diagramação de conteúdo do site. Posteriormente, já no desenvolvimento, o jeito mais simples de aplicarmos isso ao resultado final é utilizando apenas estrutura CSS com “media queries” e “sprite”.

Lembrando que este não é a única forma de produzir uma página com layout responsivo, porém é a qual eu acredito ser a ideal atualmente.

Por onde começar?

Tudo começa na diagramação do conteúdo, basicamente do “mock up” do layout, quando estiver desenhando o “wireframe” do projeto. Muitos dizem, especificamente tratando-se de layout responsivo, que o ideal seria pensar primeiramente no “mobile” e posteriormente no desktop. Na minha opinião é indiferente.

Desde sempre acabei por optar em desenvolver sites com estrutura de grade fixa, ou seja, largura fixa através de uma resolução mínima. Atualmente, quando o projeto incluí o layout responsivo, o que muda é que existem várias resoluções mínimas para fixar a largura da página, basicamente esse é o pensamento.

Veja dois rascunhos abaixo, um para modelo desktop, utilizando uma grade de largura fixa na faixa de 1000 pixles (não é incomum desenvolvedores adotarem algo entre 950/980 pixels para layouts não responsivo, sendo como base a resolução mínima de 1024x768px).

Mock up para Design Responsivo Desktop
Mock up para Design Responsivo Desktop
Wire Frame para Design Responsivo Desktop
Wire Frame para Design Responsivo Desktop

Em seguida o mesmo ideal diagramado em uma tela de smartphone (320x480px).

Mock up para Design Responsivo para Smartphone
Mock up para Design Responsivo para Smartphone
Wire Frame para Design Responsivo para Smartphone
Wire Frame para Design Responsivo para Smartphone

Atualmente no projeto final, acabo optando por cinco modelos de resolução mínima

  • 320 pixels - Smartphones retrato
  • 480 pixels - Smartphones paisagem
  • 768 pixels - Tablets retrato
  • 960 pixels - Tablets paisagem
  • 1024 ou 1280 pixels - Desktops e notebooks em geral

Lembrando que essa definição pode mudar de acordo com seu foco e projeto. Também existem muitos trabalhos com “grids” complexos, porém o resultado é extremamente semelhante.

Qual a utilidade e benefícios?

As vantagens podem ser classificadas em ordens diferentes de acordo com as prioridades de cada projeto, mas basicamente trata-se do alcance digital do site e da manutenção mais rígida de sua identidade visual. Projetos de sites com versão “mobile” (não responsivo, ou seja, um segundo site projetado para dispositivos móveis) quase sempre acabam sendo feitos de forma distinta, perdendo bastante o foco da identidade visual.

Uma identidade visual uniforme, acaba tornando a usabilidade mais fácil para um site em suas diferentes experiências por qualquer que seja o dispositivo de acesso. Isso acaba sendo de grande utilidade para empresas que buscam grande engajamento com os usuários.

Dicas

Procure trabalhar com layout de colunas com números múltiplos. Ex.: 4 - 2 - 1 (quatro colunas para desktop, 2 colunas para tablets e uma coluna para smartphone). Evite por exemplo trabalhar com 3 - 2 - 1, isso vai facilitar o seu trabalho de css, evitando chegar a regras de css mais complexas.

Utilize técnicas de CSS sprite para itens do tipo "ícones", "sombras" ou "efeitos visuais" no site. Vai otimizar a velocidade de carregamento em qualquer situação, principalmente quando necessário rede móvel de internet no dispositivo.

Buscar ao máximo a manutenção da identidade visual. Nesse quesito, quase sempre o item que sofre mais é o menu de navegação. Atente que existem certos padrões de navegação bem inseridos no cotidiano de usuários que utilizam smartphones e tablets para navegar, como clicar em um ícone que arrasta todo layout horizontalmente abrindo um menu de navegação vertical. Utilize pensamentos com esse tipo de lógica sem esquecer de manter o padrão visual.

Considerações

Pensando na questão de imagens, acabo por optar pelo processo criativo do “maior para o menor”. Penso no site para desktop para depois projetar suas versões para resoluções inferiores. Atualmente com monitores FullHD, 2k e Retina, já é mais comum acessarmos layouts com foco em grandes imagens e textos com tamanhos de fonte ampliados, pois estes equipamentos possuem uma densidade de pixels maior e necessitam de tipografia e imagens com mais resolução. Outro argumento é que os browsers tem respondido bem a renderização de imagens redimensionadas dentro de boxes, por isso eu prefiro projetar as imagems grandes e ir redimensionando elas com css para demais variações no layout.

Para você que já realiza trabalhos com layout responsivo, está começando nessa área ou simplesmente quer verificar como está o seu site em relação a layout responsivo recomendo o a ferramenta online e gratuita “Viewport Resizer”.

Passado mais de um ano de estudos e produções ainda nos bastidores do desenvolvimento responsivo, o site da agência ainda não passou por reformulação completa, mas você já pode encontrar layout responsivo em nosso portfólio.

Dúvidas, sugestões, dicas e críticas são bem vindas nos comentários.


Tags: layout responsivo, design responsivo, design, diagramação, desenvolvimento

Comentários: (0)

Nenhum comentário, seja o primeiro!
Comentário
Postagens relacionadas

Design minimalista dos brasões das seleções da Copa do Mundo Fifa - Brasil 2014

Postado em Design no dia 17/03/2014 às 12:45
Design minimalista dos brasões das seleções da Copa do Mundo Fifa - Brasil 2014
O designer Leandro Urban, de Curitiba (meu conterrâneo), criou um projeto gráfico muito criativo que abrange as áreas de Branding, Design Gráfico e Design de ícones...


Como se tornar um designer gráfico

Postado em Design no dia 13/03/2012 às 12:16
Como se tornar um designer gráfico
Atualmente nosso mundo é repleto de mudanças, tanto em cultura como em tecnologia, onde empresas e negócios disputam o mercado cada vez mais através do visual e...


5 sites para inspiração

Postado em Design no dia 27/02/2012 às 19:56
5 sites para inspiração
Trabalha com criatividade? Então não dispensa uma boa dose de inspiração para deixar o dia a dia mais prazeroso apreciando excelentes designs ótimos designers e ajudando a você a se tornar um grande designer...



Adicione o feed de notícias da Zeroarts - Agência de Publicidade e Internet ao Google