Baixado 10 vezes
Carregado porJuliano Toazza
Design Responsivo
O documento discute o design responsivo, que permite que um site seja acessado de forma otimizada em diferentes dispositivos. Ele explica que o Brasil tem um grande mercado móvel e que os usuários tendem a deixar sites com experiência móvel ruim. Em seguida, define design responsivo e lista suas técnicas e benefícios, como atender mais usuários com um único site adaptável a diferentes telas.
Design Responsivo
- 1. Design Responsivo PRODUTO EINOVAÇÃO SOFTPLAN, 19 DE ABRIL DE 2016
- 2. Por que? ● OBrasil 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
- 3. 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'
- 4. 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
- 5. 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
- 6. 1. Meta tagviewport 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.
- 7. 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.
- 8. 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(%).
- 9. 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
- 10. 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.
- 11. 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.
- 12. 7. Ajustes naTipografia SOFTPLAN, 19 DE ABRIL DE 2016 SOFTPLAN // DESIGN RESPONSIVO Ajustes no tamanho da fonte tornam a leitura mais confortável.
- 13. 8. Ajustes nosFormulá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.
- 14. Referências SOFTPLAN, 19 DEABRIL DE 2016 SOFTPLAN // DESIGN RESPONSIVO Google Mobile Day 2015 https://www.thinkwithgoogle.com/intl/pt-br/collections/mobile-day.html Design and UI - Web Fundamentals - Google Developers https://developers.google.com/web/fundamentals/design-and-ui Responsive Web Wesign - Ethan Marcotte - A Book Apart https://abookapart.com/products/responsive-web-design
- 16.