Google+

Design responsivo: você com certeza já ouviu falar

sevenquick-responsive-postblog

Com certeza você já deve ter ouvido falar a respeito da expressão: Web design responsivo. O que significa isso nos dias atuais? Qual a importância de termos isso em nosso meio digital?

Essa e outras perguntas serão esclarecidas agora no novo post da SevenQuick que também pode trazer esta solução para sua empresa.

Web Design Responsivo é uma ótima solução para o nosso problema quando o assunto é multi-tela, isso quer dizer que podemos acessar um site, por exemplo, através de qualquer tipo de dispositivo, que o site terá uma visualização ajustada para cada tela. No tamanho de página fixa, não há milímetros ou polegadas, não há restrições físicas para lutar contra. No desenvolvimento de projetos atuais, projetar em pixels para desktop e móvel já é coisa do passado, à medida que mais e mais gadgets surgem, as possibilidades para abrir um site só aumentam. Portanto, vamos esclarecer alguns princípios básicos de web design responsivo aqui para abraçar a web fluido, em vez de combatê-la.

Para mantê-lo simples, vamos nos concentrar em layouts.

Responsive vs Adaptive web design

Pode parecer o mesmo, mas não é. Ambas as abordagens se complementam, por isso não há maneira certa ou errada de fazê-lo. Deixe o conteúdo decidir.

Responsivo x adaptivo

O fluxo

Dependendo do tamanho da tela de seu dispositivo a visualização do conteúdo tornam-se menores, o conteúdo começa a ocupar mais espaço vertical e abaixo alguma coisa vai ser empurrado para baixo, ele é chamado o fluxo. Isso pode ser complicado de entender se você está acostumado a projetar com pixels e pontos, mas faz todo o sentido quando você se acostumar com isso.

Flúido x estático

Unidades relativas

A tela pode ser um desktop, tela do celular ou tablet. A densidade de pixels também pode variar, por isso precisamos de unidades que são flexíveis e trabalham em todos os lugares. É aí que unidades relativas, como porcentagens, podem vir a calhar muito bem nesse quesito. Assim, fazer algo 50% maior significa ter metade da tela (ou janela de exibição, que é o tamanho da janela de navegador aberto). Não entendeu? Tudo bem, agora uma imagem pra esclarecer um pouco mais :).

Relativo x Estático

Os pontos de interrupção

Os pontos de interrupção permitem que o layout mude em pontos pré-definidos, ou seja, na visualização do desktop temos 3 colunas, mas no dispositivo móvel, como um smartphone temos apenas uma coluna. A maioria das propriedades CSS pode ser alterada a partir de um ponto de interrupção para outra. Se uma sentença quebra, pode ser necessário adicionar um ponto de interrupção. Mas devemos usá-los com cuidado – pode ficar bem confuso quando se torna difícil entender o que está influenciando o quê.

Com pontos x Sem pontos

Max e Min valores

Na maioria das vezes é ótimo que o conteúdo ocupe toda a largura de uma tela, como em um dispositivo móvel, mas com o mesmo conteúdo que se estende a toda a largura da tela da TV, muitas vezes faz menos sentido. É por isso que os valores “Min / Max” faz-se importante neste quesito. Por exemplo, ter largura de 100% e Max largura de 1000px significaria que o conteúdo vai encher a tela, mas não passar por cima 1000px.

Com valor máximo x Sem valor máximo

Objetos alinhados

Você lembra da posição relativa? Ter um monte de elementos dependendo um do outro seria difícil de controlar, portanto, elementos de envolvimento proporcionam um ambiente mais compreensível, limpo e arrumado. Este é o lugar onde as unidades estáticas, como pixels, podem ajudar. Eles são úteis para o conteúdo que você não quer submetidos à escala, como logos e botões.

Alinhado x Não alinhado

O que fazer primeiro: Móvel ou Desktop?

Tecnicamente não há muita diferença se um projeto é iniciado a partir de uma tela menor (dispositivos móveis) ou em um dispositivo maior (desktop). No entanto, ele adiciona limitações extras que te ajudam a tomar decisões, se você começar primeiro pelo dispositivo móvel. Muitas vezes, as pessoas começam a partir de ambas as extremidades de uma só vez, então realmente, a dica é ir e ver o que funciona melhor para você.

Desktop x Mobile

 

WebFonts vs Fontes do sistema

A utilização de qualquer fonte na Web sempre foi um sonho que com o tempo foi se tornando cada vez mais possível. Atualmente temos 2 opções para facilitar a vida de quem está iniciando um projeto web. Aqui temos as vantagens e desvantagens de cada opção que é a utilização da fonte web ou a fonte do sistema.  Embora o efeito possa parecer bastante encantador, lembre-se que cada fonte utilizada da web será baixada e quanto mais você tem, mais tempo vai demorar para carregar a página. Em compensação, as fontes do sistema são bem mais rápidas, exceto quando o usuário não as tem que localmente, o que o fará cair de volta para a fonte padrão.

Fontes do sistema x Fontes da web

As imagens Bitmap vs Vetores

Será que o seu ícone tem muitos detalhes e alguns efeitos de fantasia aplicada? Se sim, é bom utilizar um mapa de bits. Se não, considere o uso de uma imagem vetorial. Para bitmaps, use um jpg, png ou gif, para vetores a melhor escolha seria um SVG ou uma fonte ícone. Cada um tem algumas vantagens e algumas desvantagens. No entanto, tenha em mente o tamanho – sem imagens deve ir on-line sem otimização. Vetores, por outro lado, muitas vezes são menores, mas alguns navegadores mais antigos não suportam. Além disso, se ele tem muitas curvas, pode ser mais pesado do que um bitmap, então escolha sabiamente.

Vetores x Imagens

Ao dar início a um novo projeto devemos considerar qual o seu alcance e qual será o público alvo. No caso de novos sites, está cada vez mais usual a visualizaçao através de dispositivos móveis, forçando com isso que sites mais antigos sejam readequados para o novo padrão da web, como no caso do site responsivo. Independente do dispositivo a ser utilizado, a informação do site será passada.

Se você é uma dessas pessoas que necessitam de um novo projeto na web onde todas essas questões possam ser consideradas na implementação de um novo site, é só entrar em contato conosco. Poderemos conversar sobre seu novo projeto ou adequação do seu antigo site para os novos padrões de utilização da internet.

As informações contidas nesta postagem foram inspiradas neste site da Froont 🙂

Posted on dezembro 17, 2014 in Blog

Share the Story

Back to Top