Responsive Web Design e User Experience na adequação funcional de sites empresariais para dispositivos móveis

(1)

Responsive Web Design e User Experience

na adequação funcional de sites empresariais para dispositivos móveis

Coordenador do Projeto: Prof. Dr. Edécio Fernando Iepsen

Pesquisador Orientador: Prof. Dr. Paulo Roberto Gomes Luzzardi

Charline Sodré Konrath Matheus Viegas de Souza

(2)

Introdução

• Crescente uso de dispositivos móveis para acessar a internet • Sites com layout fixo ou fluído

• Necessidade de tornar esses layouts responsivos • Melhorar a experiência do usuário

(3)

Design Responsivo (RWD) - Conceito

Segundo Silva (2014), layout responsivo é aquele que responde às características do dispositivo ao qual é servido, sendo capaz de expandir-se e contrair-se com o propósito de melhor adaptar-se à área onde é visualizado.

(4)

• Tamanho das telas

• Capacidade de armazenamento dos dispositivos

• Velocidade, preço e instabilidade da internet móvel no Brasil • Limitações dos aparelhos

• Ausência de teclado físico

• Energia limitada (alimentação por bateria) • Capacidade de processamento inferior

• Acessibilidade

• Conteúdo disponível a todos os usuários, independentemente de suas capacidades ou limitações

(5)

(6)

RWD e UX – Tecnologias Fundamentais

• Forte embasamento na semântica

• Melhora na acessibilidade (leitores de tela)

• Utilizar recursos nativos dos dispositivos • Código mais leve

• Páginas mais rápidas de serem carregadas • Metatag viewport (RWD)

(7)

RWD e UX – Tecnologias Fundamentais

• Media queries

• Medidas relativas • Porcentagem (%) • em

(8)

RWD e UX – Tecnologias Fundamentais

(9)

RWD e UX – Comparação

Fixo Responsivo

(10)

RWD e UX – Comparação

Layout em um smartphone - landscape

(11)

RWD e UX – Comparação

(12)

RWD e UX – Comparação

(13)

(14)

Site de exemplo

http://rwd.zz.mu/

TCC ligado à pesquisa

http://www.bvp.hol.es/AreaRestrita2/users/login

(15)

(16)

Links Úteis

• Calculadora de Conversão de “px” para “em”

• http://pxtoem.com/

• Calculadora de Conversão de “px” para “%”

• http://www.rwdcalc.com/ (exemplo.png)

• Teste de Responsividade

(17)

• Design responsivo é uma necessidade iminente

• A era dos dispositivos móveis

• O design responsivo influencia diretamente na experiência de usuário

• O conteúdo se adapta ao visor do dispositivo (elimina a necessidade de zoom) • Maior agilidade no carregamento de páginas

• Acessibilidade melhorada

• Enfatiza o objetivo primordial da internet

• Disseminar a informação

• Torná-la acessível a todos independentemente dos dispositivos utilizados

(18)

(19)