Design Responsivo

Design ResponsivoPRODUTO E INOVAÇÃO

SOFTPLAN, 19 DE ABRIL DE 2016

Por que?

● O Brasil tem mais de 80 milhões de smartphones e já é o 5º maior mercado de smartphones do mundo. (Depois de EUA, China,

Japão e Alemanha) #GoogleDay2015

● Em um ano, a proporção de domicílios que acessam a Internet via celular saltou de 53,6% para 80,4%. #IBGE #PNAD2014

● 61% dos usuários de smartphones tendem a deixar a página se ela não oferecer uma boa experiência móvel. #GoogleDay2015

SOFTPLAN // DESIGN RESPONSIVO

SOFTPLAN, 19 DE ABRIL DE 2016

O mercado móvel brasileiro é gigantesco.

Conheça alguns números

O que é?É uma configuração na qual o servidor sempre envia o mesmo código HTML a todos os dispositivos, e o CSS é usado para alterar o processamento da página no dispositivo.

Foi definido originalmente por Ethan Marcotte no A List Apart em 2010.

SOFTPLAN // DESIGN RESPONSIVO

SOFTPLAN, 19 DE ABRIL DE 2016

Responsivo

⊙ ETIM lat. responsīvus 'que serve para responder'

Para que serve?

SOFTPLAN, 19 DE ABRIL DE 2016

SOFTPLAN // DESIGN RESPONSIVO

Para proporcionar uma boa experiência de navegação ao usuário, independente do tamanho da tela do dispositivo que ele está utilizando.

● Maior facilidade de leitura, com o mínimo de redimensionamento e rolagem horizontal.

● Aumenta os níveis de conversão.● Diminui as taxas de rejeição.● Um único site que funciona em Desktop e Mobile.● Reduz custos com manutenção de páginas.● Alcança mais usuários.

Benefícios para usuários e empresas

Como é aplicado?

SOFTPLAN, 19 DE ABRIL DE 2016

SOFTPLAN // DESIGN RESPONSIVO

Usando técnicas de HTML5 e CSS3 ou um framework como Bootstrap.

1. Incluir Meta Tag viewport.2. Usar Media Queries.3. Usar Unidades relativas.4. Usar Imagens flexíveis.5. Usar Vídeos flexíveis.6. Usar Grids flexíveis.7. Ajustar Tipografia.8. Ajustar Formulários.

Técnicas básicas

1. Meta tag viewport

SOFTPLAN, 19 DE ABRIL DE 2016

SOFTPLAN // DESIGN RESPONSIVO

A meta tag viewport dá as instruções do navegador sobre como controlar dimensões e escalonamento da página.

2. Media Queries

SOFTPLAN, 19 DE ABRIL DE 2016

SOFTPLAN // DESIGN RESPONSIVO

As consultas de mídia são usadas para aplicar estilos CSS conforme a tela do dispositivo.

3. Unidades relativas

SOFTPLAN, 19 DE ABRIL DE 2016

SOFTPLAN // DESIGN RESPONSIVO

Os principais conceitos do design ágil são fluidez e proporcionalidade. Diga olá para a porcentagem(%).

4. Imagens flexíveis

SOFTPLAN, 19 DE ABRIL DE 2016

SOFTPLAN // DESIGN RESPONSIVO

Tamanhos flexíveis impedem que as imagens transbordem o recipiente.

Imagens na marcação Imagens no código CSS

5. Vídeos flexíveis

SOFTPLAN, 19 DE ABRIL DE 2016

SOFTPLAN // DESIGN RESPONSIVO

Dimensionar vídeos corretamente é assegurar que eles não transbordem os recipientes.

6. Grids flexíveis

SOFTPLAN, 19 DE ABRIL DE 2016

SOFTPLAN // DESIGN RESPONSIVO

Grid é uma malha que divide a tela em partes proporcionais e possibilita a distribuição do conteúdo de forma uniforme, proporcionando equilíbrio visual e estrutural.

7. Ajustes na Tipografia

SOFTPLAN, 19 DE ABRIL DE 2016

SOFTPLAN // DESIGN RESPONSIVO

Ajustes no tamanho da fonte tornam a leitura mais confortável.

8. Ajustes nos Formulários

SOFTPLAN, 19 DE ABRIL DE 2016

SOFTPLAN // DESIGN RESPONSIVO

Os melhores formulários são aqueles com menos entradas e que economizam tempo do usuário preenchendo automaticamente campos comuns.

Referências

SOFTPLAN, 19 DE ABRIL DE 2016

SOFTPLAN // DESIGN RESPONSIVO

Google Mobile Day 2015https://www.thinkwithgoogle.com/intl/pt-br/collections/mobile-day.html

Design and UI - Web Fundamentals - Google Developershttps://developers.google.com/web/fundamentals/design-and-ui

Responsive Web Wesign - Ethan Marcotte - A Book Aparthttps://abookapart.com/products/responsive-web-design

Obrigado.

JULIANO TOAZZA

juliano.toazza@softplan.com.br 48 3027 8000