Design Responsivo

  • View
    54

  • Download
    0

Embed Size (px)

Text of Design Responsivo

Design ResponsivoPRODUTO E INOVAOSOFTPLAN, 19 DE ABRIL DE 2016

Por que?O Brasil tem mais de 80 milhes de smartphones e j o 5 maior mercado de smartphones do mundo. (Depois de EUA, China, Japo e Alemanha) #GoogleDay2015

Em um ano, a proporo de domiclios que acessam a Internet via celular saltou de 53,6% para 80,4%. #IBGE #PNAD2014

61% dos usurios de smartphones tendem a deixar a pgina se ela no oferecer uma boa experincia mvel. #GoogleDay2015SOFTPLAN // DESIGN RESPONSIVOSOFTPLAN, 19 DE ABRIL DE 2016

O mercado mvel brasileiro gigantesco.Conhea alguns nmeros

#

O que ? uma configurao na qual o servidor sempre envia o mesmo cdigo HTML a todos os dispositivos, e o CSS usado para alterar o processamento da pgina no dispositivo.

Foi definido originalmente por Ethan Marcotte no A List Apart em 2010.SOFTPLAN // DESIGN RESPONSIVOSOFTPLAN, 19 DE ABRIL DE 2016

Responsivo ETIM lat. responsvus 'que serve para responder'

#

Para que serve?SOFTPLAN, 19 DE ABRIL DE 2016SOFTPLAN // DESIGN RESPONSIVOPara proporcionar uma boa experincia de navegao ao usurio, independente do tamanho da tela do dispositivo que ele est utilizando.Maior facilidade de leitura, com o mnimo de redimensionamento e rolagem horizontal.Aumenta os nveis de converso.Diminui as taxas de rejeio.Um nico site que funciona em Desktop e Mobile.Reduz custos com manuteno de pginas.Alcana mais usurios.Benefcios para usurios e empresas

#

Como aplicado?SOFTPLAN, 19 DE ABRIL DE 2016SOFTPLAN // DESIGN RESPONSIVO

Usando tcnicas de HTML5 e CSS3 ou um framework como Bootstrap.Incluir Meta Tag viewport.Usar Media Queries.Usar Unidades relativas.Usar Imagens flexveis.Usar Vdeos flexveis.Usar Grids flexveis.Ajustar Tipografia.Ajustar Formulrios.Tcnicas bsicas

#

1. Meta tag viewportSOFTPLAN, 19 DE ABRIL DE 2016SOFTPLAN // DESIGN RESPONSIVOA meta tag viewport d as instrues do navegador sobre como controlar dimenses e escalonamento da pgina.

#

2. Media QueriesSOFTPLAN, 19 DE ABRIL DE 2016SOFTPLAN // DESIGN RESPONSIVOAs consultas de mdia so usadas para aplicar estilos CSS conforme a tela do dispositivo.

#

3. Unidades relativasSOFTPLAN, 19 DE ABRIL DE 2016SOFTPLAN // DESIGN RESPONSIVOOs principais conceitos do design gil so fluidez e proporcionalidade. Diga ol para a porcentagem(%).

#

4. Imagens flexveisSOFTPLAN, 19 DE ABRIL DE 2016SOFTPLAN // DESIGN RESPONSIVOTamanhos flexveis impedem que as imagens transbordem o recipiente.

Imagens na marcao

Imagens no cdigo CSS

#

5. Vdeos flexveisSOFTPLAN, 19 DE ABRIL DE 2016SOFTPLAN // DESIGN RESPONSIVODimensionar vdeos corretamente assegurar que eles no transbordem os recipientes.

#

6. Grids flexveisSOFTPLAN, 19 DE ABRIL DE 2016SOFTPLAN // DESIGN RESPONSIVOGrid uma malha que divide a tela em partes proporcionais e possibilita a distribuio do contedo de forma uniforme, proporcionando equilbrio visual e estrutural.

#

7. Ajustes na TipografiaSOFTPLAN, 19 DE ABRIL DE 2016SOFTPLAN // DESIGN RESPONSIVOAjustes no tamanho da fonte tornam a leitura mais confortvel.

#

8. Ajustes nos FormulriosSOFTPLAN, 19 DE ABRIL DE 2016SOFTPLAN // DESIGN RESPONSIVOOs melhores formulrios so aqueles com menos entradas e que economizam tempo do usurio preenchendo automaticamente campos comuns.

#

RefernciasSOFTPLAN, 19 DE ABRIL DE 2016SOFTPLAN // 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 TOAZZAjuliano.toazza@softplan.com.br48 3027 8000