design responsivo

16
Design Responsivo PRODUTO E INOVAÇÃO SOFTPLAN, 19 DE ABRIL DE 2016

Upload: juliano-toazza

Post on 21-Feb-2017

56 views

Category:

Design


0 download

TRANSCRIPT

Page 1: Design Responsivo

Design ResponsivoPRODUTO E INOVAÇÃO

SOFTPLAN, 19 DE ABRIL DE 2016

Page 2: Design Responsivo

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

Page 3: Design Responsivo

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'

Page 4: Design Responsivo

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

Page 5: Design Responsivo

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

Page 6: Design Responsivo

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.

Page 7: Design Responsivo

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.

Page 8: Design Responsivo

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(%).

Page 9: Design Responsivo

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

Page 10: Design Responsivo

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.

Page 11: Design Responsivo

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.

Page 12: Design Responsivo

7. Ajustes na Tipografia

SOFTPLAN, 19 DE ABRIL DE 2016

SOFTPLAN // DESIGN RESPONSIVO

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

Page 13: Design Responsivo

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.

Page 14: Design Responsivo

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

Page 15: Design Responsivo
Page 16: Design Responsivo

Obrigado.

JULIANO TOAZZA

[email protected] 48 3027 8000