Análise Web Design Responsivo Usabilidade Apps Móveis

INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA DE SÃO PAULO
CÂMPUS SÃO JOÃO DA VISTA
JÉSSICA CRISTINA NUNES
ANÁLISE DA CONTRIBUIÇÃO DO WEB DESIGN RESPONSIVO

PARA A USABILIDADE DE APLICAÇÕES WEB EM DISPOSITIVOS
MÓVEIS
SÃO JOÃO DA BOA VISTA

2017
JÉSSICA CRISTINA NUNES
ANÁLISE DA CONTRIBUIÇÃO DO WEB DESIGN RESPONSIVO

PARA A USABILIDADE DE APLICAÇÕES WEB EM DISPOSITIVOS
MÓVEIS
Trabalho de Conclusão de Curso apresentado

ao Instituto Federal de São Paulo, como parte
dos requisitos para a obtenção do grau de
Tecnólogo em Sistemas para Internet.
Área de Concentração: Programação Web
Orientador: Prof. Msc. Gabriel Marcelino

Alves
SÃO JOÃO DA BOA VISTA

2017
Autorizo a reprodução e divulgação total ou parcial deste trabalho, por qualquer meio
convencional ou eletrônico, para fins de estudo e pesquisa, desde que citada a fonte.
Catalogação na Fonte preparada pela Biblioteca Comunitária “Wolgran Junqueira Ferreira”

do IFSP – Câmpus São João da Boa Vista
Nunes, Jéssica Cristina.

Análise sobre a contribuição do web design responsivo
para a usabilidade de aplicações web em dispositivos
móveis. / Jéssica Cristina Nunes; orientador Gabriel
Marcelino Alves. São João da Boa Vista, 2017.
Trabalho de Conclusão de Curso, IFSP, 2017.
1. Web responsivo. 2. Satisfação do usuário. 3.

Tecnologias Web.
I. Caracterização de Web responsividade e da

satisfação dos usuários em aplicações Web
AGRADECIMENTOS
Quero agradecer, em primeiro lugar, a Deus por ter me dado saúde e força para
superar as dificuldades.
À Instituição pelo ambiente criativo e amigável que proporciona.
Ao meu orientador, que incansavelmente me motivou a realização deste trabalho e
pelo seu empenho dedicado à elaboração.
A todos os professores do curso, que foram importantes para minha formação
acadêmica e os colegas que tive nesta jornada.
A minha família, pelo amor, incentivo e apoio incondicional.
A todos que direta ou indiretamente fizeram parte da minha formação, o meu muito
obrigado.
NUNES, Jéssica C. Análise da contribuição do Web Design Responsivo para a
usabilidade de aplicações web em dispositivos móveis. 2017. Trabalho de Conclusão de
Curso (Graduação) – Instituto Federal de São Paulo, São João da Boa Vista. 2017.
RESUMO
Atualmente, a Internet pode ser considerada um dos principais meios de comunicação, pois
possui a capacidade de agregar e disseminar conteúdo dos mais variados tipos, possibilitando
que as pessoas busquem e troquem informações, interajam em redes sociais, estudem à
distância e realizem transações comerciais. Adiciona-se o fato de que diferentes dispositivos
eletrônicos estão, cada vez mais, sendo preparados para se conectar à Internet, como por
exemplo: celulares, tablets, computadores e até mesmo televisores. Verifica-se, portanto, que
as aplicações voltadas para a web têm crescido nos últimos anos, o que desperta o interesse
para que elas estejam disponíveis a um leque cada vez maior de dispositivos e que possuam
bom nível de usabilidade de modo a contribuir para a satisfação dos usuários. Neste contexto,
o objetivo deste trabalho foi o de estudar como as técnicas do Web Design Responsivo podem
contribuir para aprimorar a usabilidade das aplicações web, particularmente, em dispositivos
móveis. Inicialmente, foram selecionados critérios de usabilidade presentes na literatura bem
como critérios associados às técnicas de Web Design Responsivo. Na sequência, um conjunto
de vinte sites foram selecionados e avaliados considerando os critérios técnicos de Web
Design Responsivo bem como os de usabilidade. O resultado das análises indicou forte
correlação, com ρ = 0,797, entre o uso de web design responsivo com a usabilidade das
aplicações web. Portanto, este trabalho contribuiu para compreender melhor a relação de
como as práticas e técnicas de desenvolvimento web podem contribuir para a melhoria da
usabilidade das aplicações, considerando principalmente, o acesso dos usuários em
dispositivos móveis.
Palavras-chave: Web Design Responsivo. Usabilidade. Dispositivos móveis. Programação

Web.
ABSTRACT
NUNES, Jéssica C. Responsive web design analysis of contribution to the usability of

web applications on mobile devices. Analysis of the contribution of Responsive Web
Design to the usability of web applications on mobile devices. 2017. Course Conclusion
Project (Graduation) – Instituto Federal de São Paulo, São João da Boa Vista. 2017.
Nowadays, the Internet is considered one of the main ways of communication since it has the
capacity to aggregate and disseminate content of several types, allowing people to search and
to exchange information, to interact in social networks, to study at long distances and to carry
out commercial transactions. The electronic devices are increasing and they are being
prepared to connect to the Internet, such as cell phones, tablets, computers and even
televisions. Therefore, we checked out that the web-oriented applications have grown in the
last years. The interest has spread and made them available to a wide range of devices with a
good level of usability in order to contribute to the users’ satisfaction, which has increased. In
this context, the aim of this paper is to study how the techniques of Responsive Web Design
can contribute to improve the usability of web applications, particularly in mobile devices.
Initially, we selected the usability criteria presented in the literature as well as criteria
associated with the techniques of Responsive Web Design. It was selected and evaluated a set
of twenty sites considering both aspects of Responsive Web design and their usability. The
results of the analyses have indicated a strong correlation, with ρ = 0.797, in the use of web
design responsive to the usability of web applications. Consequently, this work contributed to
a better understanding of the relation between web development practices and techniques,
which can improve the usability of applications, mainly the access of users to mobile devices.
Keywords: Responsive Web Design. Usability. Mobile devices. Web Programming.

LISTA DE ILUSTRAÇÕES
Figura 1 - Navegador Lynx para modo texto .......................................................................... 33
Figura 2 - Primeiro navegador gráfico .................................................................................... 34
Figura 3 – Tamanho da resolução de acordo com cada dispositivo........................................43
Figura 4 – Layout de páginas web. (A) layout com medidas fixas. (B) layout com medidas
flexíveis .................................................................................................................................... 44
Figura 5 – Cálculo para converter unidade fixa para unidade fluída ...................................... 45
Figura 6 – Representação de como se divide os grids ............................................................. 47
Figura 7 – Estrutura de pastas do Bootstrap versão 3.3 .......................................................... 60
Figura 8 – Navegadores e Sistemas operacionais suportados pelo Bootstrap.3.3 ................... 61
Figura 9 – Tela inicial do MobileOK Checker ........................................................................ 63
Figura 10 – Tela Screenfly do Quirk Tools ............................................................................. 64
Figura 11 – Tela demonstrativa do uso do Quirk Tools .......................................................... 64
Figura 12 – Fluxograma das etapas do processo de avaliação ................................................ 67
Figura 13 – Diagrama do processo de avaliação ..................................................................... 69
Figura 14 – Site 1 visualizado em diferentes resoluções. A) resolução1024 x 600px. B)

resolução 800 x 480px .............................................................................................................. 75
Figura 15 – Site 1 visualizado na resolução 375 x 667 px ...................................................... 76
Figura 16 – Site 2 visualizado em diferentes resoluções. A) resolução 1024 x 600 px. B)

resolução800 x 480 px .............................................................................................................. 76
Figura 18 – Site 3 visualizado em diferentes resoluções. A) resolução 1024 x 600px. B)

resolução800 x 480px ............................................................................................................... 78

resolução 800 x 480px .............................................................................................................. 79
Figura 21 – Site 4 visualizado na resolução 375 x 667 px. A) site visualizado pelo
QuirkTools. B) site visualizado pelo iPhone 6(S) .................................................................... 79

resolução800 x 480px ............................................................................................................... 80
Figura 24 – Site 6 visualizado em duas resoluções. A) resolução 1024 x 600px. B) resolução

800 x 480px .............................................................................................................................. 81

resolução1024 x 600px ............................................................................................................. 82

resolução 375 x 667 px ............................................................................................................. 83
Figura 28 – Site 8 visualizado nas resoluções 1024 x 600px e 800 x 480px .......................... 83

resolução 800 x 480px .............................................................................................................. 84
Figura 32 – Site 10 visualizado na resolução 1024 x 600px ................................................... 85

resolução 375 x 667 px ............................................................................................................. 86

800 x 480px .............................................................................................................................. 86
Figura 35 – Site 11 visualizado na resolução 375 x 667 px. A) visualização na ferramenta

QuirkTools. B) visualização no iPhone 6(S). ........................................................................... 87

800 x 480px .............................................................................................................................. 87
Figura 37 – Site 12 visualizado na resolução 375 x 667 px. A) visualização pela ferramenta
QuirkTools. B) visualização do iPhone 6(S) ............................................................................ 88

800 x 480px .............................................................................................................................. 88
Figura 39 – Site 13 visualizado na resolução 375 x 667 px .................................................... 89

Figura 40 – - Site 14 visualizado em duas resoluções. A) resolução 1024 x 600px. B)
resolução 800 x 480px .............................................................................................................. 89

800 x 480px .............................................................................................................................. 91

800 x 480px .............................................................................................................................. 92

800 x 480px .............................................................................................................................. 93

800 x 480px .............................................................................................................................. 94

800 x 480px .............................................................................................................................. 95
Figura 51 – Site 19 visualizado na resolução 375 x 667 px. A) visualização pela ferramenta
QuirkTools. B) visualização do iPhone 6(S) ............................................................................ 96

800 x 480px .............................................................................................................................. 97

LISTA DE CÓDIGOS
Código 1 - Aplicação de Media Types para dispositivos móveis ............................................ 40
Código 2 - Aplicação de Media Types para computadores desktop ........................................ 40
Código 3 - CSS aplicado margens as colunas da Figura 4A .................................................... 46
Código 4 - Aplicando CSS nas colunas centrais da Figura4A ................................................. 46
Código 5 - Código para aplicar CSS na condição screen ........................................................ 47
Código 6 - Exemplos breakpoints no CSS ............................................................................... 48
Código 7 - Especificação no CSS com largura 640px ............................................................. 48
Código 8 - Especificação no CSS com largura menor ou igual a 767 pixels........................... 49
Código 9 - Especificação no CSS com altura em 300 pixels ................................................... 49
Código 10 - Especificação no CSS com altura menor ou igual a 599 pixels ........................... 49
Código 11 - Especificação no CSS tela menor que 800px de largura ..................................... 50
Código 12 - Especificação no CSS tela menor que 4800px de altura ...................................... 50
Código 13 - Especificação no CSS para dispositivos em modo paisagem .............................. 51
Código 14 - Especificação no CSS janela do navegador em widescreen de 16:9 ................... 51
Código 15 - Especificação no CSS para aplicar regras para dispositivos widescreen ............. 52
Código 16 - Especificação no CSS para dispositivos coloridos .............................................. 52
Código 17 - Especificação no CSS para dispositivos coloridos com no mínimo 4 bits de cor.53
Código 18 - Especificação no CSS para dispositivos coloridos com o máximo de 16 bits de

cor ............................................................................................................................................. 53
Código 19 - Especificação no CSS para todos dispositivos coloridos ..................................... 53
Código 20 - Especificação no CSS para dispositivos com 2 cores .......................................... 53
Código 21 - Especificação no CSS para dispositivos com menos de 256 cores ...................... 54
Código 22 - Especificação no CSS para qualquer dispositivo monocromático ....................... 54
Código 23 - Especificação no CSS para qualquer dispositivo monocromático com no mínimo

2 bits por pixel .......................................................................................................................... 54
Código 24 - Especificação no CSS por pontos por polegadas (dpi) ........................................ 55
Código 25 - Especificação no CSS por pontos por centímetros (dpcm) .................................. 55
Código 26 - Especificação no CSS para aplicar apenas em televisões .................................... 55
Código 27 - Especificação no CSS para aplicar em todos os dispositivos .............................. 56
Código 28 - Especificação no CSS para aplicar dispositivos móveis com display de 15

caracteres ou menos .................................................................................................................. 56
Código 29 - Linha de código do HTML para inserir imagem ................................................. 57
Código 30 - Manipulação da imagem em resoluções diferentes no CSS ................................ 58
Código 31 - Uso da Tag Viewport............................................................................................ 58

LISTA DE TABELAS
Tabela 1 - Resolução de telas de dispositivos. Adaptado pelo autor (2017) ........................... 35
Tabela 2 - Classificação e pontuação dos critérios técnicos .................................................... 68
Tabela 3 - Classificação e pontuação dos critérios de usabilidade .......................................... 68
Tabela 4 - Lista dos sites selecionados para avaliação ............................................................ 73
Tabela 5 - Avaliação técnica dos sites ..................................................................................... 74
Tabela 6 - Avaliação de usabilidade dos sites ......................................................................... 75
Tabela 7 - Pontuação análise Técnica e Usabilidade ............................................................... 98
Tabela 8 - Avaliação da pontuação da análise de usabilidade ................................................. 98
Tabela 9 - Resultado da correlação entre as análises técnicas e de usabilidade ...................... 99

LISTA DE SIGLAS
API Application Programming Interface
ARPA Advanced Research Projects Agency
CSS Cascading Style Sheets
GUI Graphical User Interface
HTML Hypertext Markup Language
ISO Organização Internacional de Normalização
ISP International Service Providers
QoE Qualidade de Experiência
WDR Web Design Responsivo
SASS Syntactically Awesome Style Sheets
SGML Standard Generalized Markup Language
TCP/IP Transmission Control Protocol/Internet Protocol
URI Uniform Resource Identifier
W3C World Wide Web Consortium
WAN Wide Area Networks
WWW World Wide Web
XHTML eXtensible Hypertext Markup Language
XML eXtensible Markup Language

SUMÁRIO
1 INTRODUÇÃO.............................................................................................................23
1.1 Motivação...................................................................................................................24
1.2 Objetivo......................................................................................................................24
1.3 Trabalhos correlatos.................................................................................................24
1.4 Organização do documento......................................................................................26
2 INTERNET E USABILIDADE...................................................................................27
2.1 História da internet...................................................................................................27
2.2 Satisfação do usuário no ambiente Web.................................................................28
2.3 Usabilidade................................................................................................................30
2.4 Navegadores de internet...........................................................................................33
2.5 Dispositivo para acesso à Internet...........................................................................35
3 DESENVOLVIMENTO WEB E WEB DESIGN RESPONSIVO...........................37

3.1 Tecnologias de desenvolvimento web......................................................................37
3.1.1 Linguagem de Marcação HTML.............................................................................37
3.1.2 CSS..........................................................................................................................38
3.1.3 Media Types............................................................................................................39
3.1.4 JavaScript................................................................................................................41
3.2 Web Design Responsivo...........................................................................................42
3.2.1 Layouts fluídos........................................................................................................43
3.2.2 Media Queries.........................................................................................................47
3.2.3 Imagens e mídia flexíveis.......................................................................................57
3.2.4 Tag Viewport..........................................................................................................58
3.3 Frameworks...............................................................................................................59
3.3.1 Bootstrap................................................................................................................59
3.3.2 Foundation.............................................................................................................61
3.3.3 Comparação entre Frameworks.............................................................................61
3.4 Ferramentas para avaliação do Web Design Responsivo......................................63
4 METODOLOGIA.........................................................................................................67
4.1 Métrica de avaliação.................................................................................................70
5 RESULTADOS E DISCUSSÕES................................................................................73
6 CONCLUSÕES...........................................................................................................101
REFERÊNCIAS....................................................................................................................103
23
1 INTRODUÇÃO
Atualmente, a Internet pode ser considerada um dos principais meios de

comunicação. Isso se deve, de um lado, pela capacidade de agregar e disseminar conteúdo os
mais variados possibilitando que as pessoas busquem e troquem informações, interajam em
redes sociais, estudem à distância e realizem transações comerciais por meio do comércio
eletrônico. E por outro lado, pelo fato de que diferentes dispositivos eletrônicos estarem cada
vez mais preparados para se conectarem à Internet, como por exemplo, celulares, tablets,
computadores e até mesmo televisões (LIMA, 2000).
Observa-se que cada vez mais, o número de pessoas que participam da Internet
torna-se maior, além disso, o tempo de permanência na rede mundial de computadores
também aumenta (IBOPE, 2013). As empresas, de modo geral, perceberam oportunidades de
negócio que poderiam ser realizadas por meio da Internet. Para viabilizar tais oportunidades
foi necessário criar estratégias para expor a marca bem como os produtos. O conceito de
Marketing Digital surgiu desta necessidade de divulgar e criar redes de relacionamentos assim
como promover a marca a fim de garantir a comercialização por meio eletrônico
(MACHADO, 2014).
Este cenário trouxe mudanças para a área de Tecnologia da Informação,
particularmente na área de desenvolvimento de aplicações voltadas à Internet, uma vez que as
equipes foram remodeladas para atender a crescente demanda e exigências das empresas e
clientes, por conteúdos e sistemas que pudessem ser oferecidos nos mais diversos meios de
forma acessível e de fácil interação. Portanto, com a grande diversidade de dispositivos
eletrônicos, elaborar aplicações que sejam compatíveis a toda essas variedade de equipamento
garantido a acessibilidade, a fácil interação e ainda cumprindo os prazos, estabelecidos
representa um desafio para os desenvolvedores web.
A fim de lidar com este desafio, uma nova estratégia foi desenvolvida e é conhecida
como WDR (Web Design Responsivo), que consiste em um mecanismo de exibição do
conteúdo em um layout adequado para diferentes configurações de dispositivo (JIANG,
2014).
Diferentes maneiras podem ser empregadas para viabilizar o conceito de Web
Responsivo nas aplicações. Uma delas é a possibilidade de reescrever os recursos a cada
projeto, uma vez que não são utilizados modelos pré-estabelecidos. Outra possibilidade é a de
utilizar arcabouços também conhecidos como frameworks que são soluções reutilizáveis
24
compostas por recursos pré-estabelecidos e validados que podem ser personalizados no

desenvolvimento de aplicações específicas.
1.1 MOTIVAÇÃO
A motivação deste trabalho se dá pelo fato que as aplicações voltadas para a web e
dispositivos móveis têm crescido nos últimos anos o que desperta o interesse para que tais
aplicações estejam disponíveis a um leque cada vez maior de dispositivos e que possuam bom
nível de usabilidade de modo a contribuir para a satisfação dos usuários.
Neste contexto, o Web Design Responsivo pode ser empregado no desenvolvimento
de aplicações que visem à usabilidade em diferentes tipos de dispositivos. No entanto,
somente aplicar as técnicas de Web Design Responsivo não implica, necessariamente, em
melhor usablidade. Portanto, a motivação deste trabalho consiste em observar a relação entre
a usabilidade e a aplicação das técnicas do Web Design Responsivo. Compreender melhor
essa relação pode auxiliar as equipes de desenvolvedores a aperfeiçoarem os projetos de
desenvolvimento web.
1.2 OBJETIVO
O objetivo deste trabalho é estudar como as técnicas do Web Design Responsivo

podem contribuir para aprimorar a usabilidade das aplicações web, particularmente, em
dispositivos móveis.
Como objetivo secundário, busca-se elencar um conjunto de critérios de usabilidade
a partir da literatura científica disponível.
1.3 TRABALHOS CORRELATOS
Nesta seção são apresentados trabalhos relacionados à Web Design Responsivos e a

usabilidade de aplicações na web.
O trabalho de Baturay e Birtane (2013) relata sobre a necessidade de mudar um
layout de conteúdo instrucional para Web Design Responsivo. O RWD que é capaz de se
remodelar, de acordo com vários tamanhos de tela e resoluções, desde os maiores tamanhos
de tela até os menores.
25
Logo, os usuários tem melhor experiência de visualização com o conteúdo no

dispositivo ou plataforma que eles estão vendo. Isto é mais significativo quando os usuários
estão estudando em sites instrucionais e as páginas não diminuem a sua concentração,
motivação e realização, no seu estudo.
No artigo, os autores informam a popularidade do Web Design Responsivo,
indicando sites educacionais como amostras e discute sobre recursos que trazem melhorias
(BATURAY; BIRTANE, 2013)
Outro trabalho identificado na literatura trata-se do “software líquido”, cujos autores
apontam como uma nova tendência, que não só pode tirar proveito dos recursos de
computação, armazenamento e comunicação disponíveis em todos os dispositivos de
propriedade do usuário, mas também pode de forma dinâmica migrar de um dispositivo para
outro seguindo continuamente a atenção do usuário e contexto de utilização (MIKKONEN;
SYSTÄ; PAUTASSO, 2015). Os autores consideram que os usuários têm diversos tipos de
dispositivos para acessar o conteúdo publicado na web, uma vez que todos esses dispositivos
estiverem conectados a web, seria possível combinar as ações para simplificar vidas dos
usuários, o que os autores ponderam como uma extensão natural da plataforma web.
Um exemplo de software líquido é o Handoff1 disponível para Apple iOS 8. Um
cenário que elucida o termo “software líquido” pelo handoff é aquele em que o usuário iniciou
a composição de um e-mail em um telefone e terminou com um computador que tem tela
maior e um teclado real. Os dispositivos participantes precisariam ser registrados no iCloud
com a mesma identidade, e os dispositivos deveriam ser capaz de comunicar através de
Bluetooth. Handoff pode ser visto como um mecanismo para implementar uma experiência de
software líquido, uma vez que permite o rastreio sequencial para um único usuário
(MIKKONEN; SYSTÄ; PAUTASSO, 2015).
Cada dispositivo executa uma versão específica da aplicação, por conseguinte, a
interface de utilizador está implicitamente adaptada para tirar vantagem dos recursos do
dispositivo (por exemplo, multi touch screen, tamanho da tela e resolução). Em comparação
com Handoff, um Software Líquido deve apoiar dispositivos heterogêneos através das
fronteiras do ecossistema de software. Desta forma, os desenvolvedores teriam de desenvolver
apenas uma aplicação, que, em seguida, poderia adaptar-se para ocorrer em todos os lugares.
Outro trabalho correlato trata-se de estudos que discutem a disponibilização de
recursos de uma biblioteca por meio de dispositivos móveis. Os autores apontam que a
1
https://support.apple.com/pt-br/HT204681
26
comunicação móvel tem grandemente influenciado uma série de iniciativas no âmbito

acadêmico e ambientes de aprendizagem, especialmente nas instituições de ensino superior. O
contínuo avanço no paradigma da comunicação móvel mudou a atenção de bibliotecas para
fornecer serviços relacionados a seus usuários móveis. Este trabalho relata o impacto global
de serviços e aplicações móveis relacionados aos sites de bibliotecas (ANBU; KATARIA,
2015).
1.4 ORGANIZAÇÃO DO DOCUMENTO
Este trabalho está estruturado em seis capítulos além desta introdução. O Capítulo 2
aborda a história da Internet, a satisfação do usuário no ambiente web, e usabilidade. No
capítulo 3 são apresentadas tecnologias de desenvolvimento de sites, enfatizando as principais
técnicas e conceitos utilizados no desenvolvimento web responsivo, além de abordar dois
frameworks utilizados na atualidade. O Capítulo 4 apresenta a metodologia deste trabalho. O
Capítulo 5 aponta os resultados e discussões. Por fim, as conclusões deste trabalho são
apresentadas no Capítulo 6.
27
2 INTERNET E USABILIDADE
Este capítulo trata da revisão da literatura e apresenta a história da Internet, bem

como de aspectos sobre satisfação do usuário em ambientes voltados para o acesso a Internet.
2.1 HISTÓRIA DA INTERNET
A Internet nasceu através do projeto de pesquisa militar ARPA (Advanced Research

Projects Agency), no período da Guerra Fria, no final dos anos cinquenta e início dos anos
sessenta. Este projeto surgiu como resposta do governo americano ao lançamento do Sputnik
pela ex-União Soviética (LIMA, 2000).
No início, o objetivo era conectar os centros universitários de pesquisa americanos
mais importantes com o Pentágono para possibilitar a troca de informações rápidas e
protegidas e também para operacionalizar o país como uma tecnologia que permitisse a
permanência de canais de informação no caso de uma guerra nuclear. No entanto, os
responsáveis pelo projeto não podiam imaginar que a Internet avançaria e alcançaria a
dimensão que ela possui atualmente. Naquela época a tecnologia WAN (Wide Area Networks)
utilizada para transmissão de dados era muito complexa e, portanto, não se imaginava tal
expansão (MERKLE; RICHARDSON, 2000).
Na década de setenta, com a limitação dos recursos utilizados nos programas surgiu
o primeiro uso da Internet, o e-mail, que era utilizado entre os pesquisadores a fim de facilitar
a comunicação e também para a troca de informações entre as universidades.
Com o surgimento nos anos oitenta, dos primeiros provedores de serviço da Internet,
denominados - ISP (International Service Providers) foi possível levar ao cidadão comum a
conexão com a rede de computadores, em sua própria casa e disponibilizar serviços e
aplicações comerciais (MERKLE; RICHARDSON, 2000).
Vale mencionar que a Internet faz o uso de uma linguagem ou protocolo específico
TCP/IP (Transmission Control Protocol / Internet Protocol), que faz a leitura da informação a
ser transmitida e envia para o destino determinado pelo emissor. A difusão do termo “teia
mundial”, ou WWW (World Wide Web), fez com que aumentasse significativamente o
número de servidores conectados à rede mundial de computadores a partir de 1992. Com essa
expansão, milhares de pessoas ao redor do mundo começaram a fazer o uso da Internet e
terem a oportunidade de acessar informações, antes inacessíveis, sem a necessidade de se
deslocar de sua residência e até mesmo interagir com outras pessoas (MERKLE;
RICHARDSON, 2000).
28
A partir disso, as pessoas passaram a permanecer cada vez mais tempo conectadas à
Internet e com isso, surgiram diversas questões. Uma delas refere-se à satisfação do usuário
com relação ao ambiente web em que ele navega.
2.2 SATISFAÇÃO DO USUÁRIO NO AMBIENTE WEB
Profissionais conhecidos como web designers têm se concentrado no

desenvolvimento e emprego de recursos que permitam melhorar a usabilidade e que
proporcionem a satisfação do usuário no ambiente web que ele utiliza enquanto acessa à
Internet. Nesse sentido, há várias questões como, por exemplo, redução do tempo de
carregamento, cor e uso de fonte apropriados ao contexto, organização de conteúdos e de
informações, navegabilidade, links ativos, entre outras. Por outro lado, o tratamento dessas
questões pode não ser suficiente para garantir a satisfação do usuário.
Zhang et. al. (1999) procuraram associar a Teoria Motivação-Higiene de Herzberg
que identifica fatores que causam a satisfação e a insatisfação dos empregados no ambiente de
trabalho a fim de aplicá-las no ambiente web. A insatisfação no trabalho ocorre quando um
grupo de fatores de "higiene" está ausente. Fatores estes que são externos e que afetam uma
pessoa no ambiente na qual ela faz parte. Os fatores de “higiene” são as condições de
trabalho, salário, a política da empresa e administração, relações interpessoais, e supervisão.
A presença desses fatores de higiene não implica, por si só, a satisfação e motivação das
pessoas no ambiente de trabalho. A satisfação é determinada por um grupo de fatores internos
chamados “motivadores”. Fatores motivadores descrevem a relação de uma pessoa para que
ela faça: o conteúdo do trabalho; a natureza e realização de determinadas tarefas, o
reconhecimento e a responsabilidade creditados por determinados assuntos bem como a
promoção profissional dentro do ambiente de trabalho.
No ambiente web, tarefas típicas de usuários envolvem acesso e recuperação de
informações. A interface é o meio que possibilita a interação do usuário com a aplicação.
Portanto, ela proporciona o contexto ou o ambiente no qual um usuário conduz essas tarefas.
Algumas características de design do site são essenciais, porém não necessariamente
suficiente para a satisfação do usuário. O tempo de carregamento rápido, links ativos,
portanto, são características que podem ser consideradas fatores de higiene. Um site que leva
muito tempo para carregar o conteúdo ou tem muitas ligações inativas provavelmente irá
resultar em insatisfação do usuário. Assim, características de higiene são direcionadas a
prevenir a insatisfação, mas podem não ser o suficiente para garantir a satisfação do usuário.
29
A Teoria Motivação-Higiene de Herzberg afirma que "não insatisfeito" não é igual "satisfeito"
e "não satisfeito" não é o mesmo que "insatisfeito" (ZHANG et. al. , 1999).
A satisfação dos usuários em utilizar um determinado site é uma das metas almejadas
pelos web designers. Usuários satisfeitos podem despender mais tempo em um site, podem
revistá-los e recomendá-los para outros. Questões estas particularmente relevantes com o
aumento do comércio eletrônico. Por isso, é útil determinar quais características tornam um
usuário satisfeito com um site, bem como quais são as potenciais insatisfações (ZHANG et.
al. , 1999).
Outro fator é a Qualidade de Experiência (QoE), que se define como:
“o grau de prazer ou aborrecimento do usuário em um aplicativo ou

serviço. É o resultado do cumprimento de suas expectativas em
relação à utilidade e/ou apreciação do pedido ou serviço, tendo em
conta a personalidade do usuário e estado atual” (BARAKOVIć;
SKORIN-KAPOV, 2015).
No ambiente web a QoE é influenciada pelo serviço, conteúdo, dispositivo, a

aplicação e o contexto de uso.
Os fatores de influência da QoE, dá-se a ''qualquer característica de um usuário,
sistema, serviço, aplicativo ou contexto cujo estado ou configuração real pode ter influência
sobre a qualidade de experiência''(BARAKOVIć; SKORIN-KAPOV, 2015). Além disso, os
fatores de influência produz impacto nas seguintes características da QoE:
 Percepção da estética do site;
 Percepção de usabilidade do site;
 Percepção da qualidade da informação;
 Percepção de tempos de carregamento web em geral.
O princípio da próxima geração de serviços é integrar pessoas, tecnologias e
informações e vinculá-los usando a escolha e modo de comunicação que é relevante para os
utilizadores e que deixe os usuários confortáveis com o site. Os autores Madeja e Schoder
(2003), identificaram recursos web como fatores explicativos para o sucesso de uma empresa,
a saber:
 Interatividade possibilita a comunicação bidirecional dos clientes e seus fornecedores
e, em particular, a existência de um canal de feedback dos clientes aos seus
fornecedores, via serviços integrados, tais como e-mail, internet ou telefonia.
30
 Imediato é a oportunidade de transmitir e receber conteúdo, bem como de atualizar e

reagir a novos conteúdos sem qualquer atraso significativo.
 Conectividade possibilita a formação de espaços coletivos interativos de comunicação
e colaboração, são chamados funcionalidades da comunidade ou fóruns de discussão.
 Riqueza de Mídia e Variedade refere-se a oportunidade para conectar diferentes
tipos de informações, textos, gráficos, áudios, imagens e vídeos de modo a exibi-los
em conjunto, como um objeto multimídia.
 Disponibilidade refere-se à presença em toda parte da Internet como um meio de
acesso.
 Riqueza de Informações refere-se a oportunidade de compilar diferentes tipos de
conteúdos bem como de qualidades.
 Facilidade de uso refere-se à capacidade dos usuários em navegarem por conteúdos
de multimídia e informações distribuídas de forma transparente, isto é, sem estar
envolvido em técnicas ou aspectos organizacionais de informações de acesso
distribuídos, usando comunicação/serviço de navegação.
 Individualização e Personalização refere-se a oportunidade de compor a informação
ou conteúdo de acordo com as preferências individuais dos usuário.
Ao utilizar um determinado recurso, ou conjunto deles, as interfaces dos sites podem
se tornarem mais eficiente o que pode levar a maior interação do usuário, implicando na
realização de mais transações comerciais e, consequentemente, sucesso da empresa.
Por outro lado, há características que também determinam a interação do usuário a
exemplo de critérios técnicos, aplicações mono e multiusuário, conteúdo e funcionalidades
como aspectos de multimídia.
2.3 USABILIDADE
De acordo com a Organização Internacional de Normalização (ISO), usabilidade é

definida como um resultado, ou "até que ponto um produto pode ser usado por usuários
específicos para alcançar metas especificadas com eficácia, eficiência e satisfação em um
determinado contexto de uso" (ROSSON; CARROLL, 2002). Portanto, usabilidade pode ser
entendida como um atributo de qualidade que avalia o uso de interfaces, mas também pode se
referir aos métodos empregados durante o processo de design a fim de aprimorar o uso de um
determinado objeto.
31
Os autores Fernandez, Abrahão e Insfran (2011), descreveram usabilidade como a

qualidade de um sistema informático interativo em relação à facilidade de aprendizagem,
facilidade de uso e da satisfação do usuário. Em outras palavras, do ponto de vista do usuário,
a interface do sistema deve ser fácil de aprender, eficaz e agradável.
Majid Ahmed observou que muitas pessoas têm percebido a importância da
usabilidade na web e os benefícios que ela pode trazer. Adicionalmente, o estudo mostrou que
o comportamento dos usuários ao utilizar um site depende de diversos fatores (AHMED, 2010
apud MAJID, 2015).
Para o pesquisador Nielsen, a usabilidade é dividida nos seguintes objetivos: a
eficácia, eficiência, segurança, utilidade, aprendizado e memorabilidade. (NIELSEN, 1993).
Além disso, Nielsen e colaboradores (2001) elencaram dez princípios de usabilidade, a saber:
1. Visibilidade de status do sistema - Mantenha sempre os usuários informados sobre o
que está fazendo, fornecendo comentários dentro de um prazo razoável.
2. Correspondência entre sistema e o mundo real - Utilize o idioma dos usuários, por
meio de palavras, frases e conceitos familiares ao usuário, em vez de termos
orientados para o sistema.
3. Controle de usuário e liberdade - Forneça formas de permitir que os usuários
facilmente saiam de lugares que inesperadamente se encontram, usando claramente
'Saídas de emergência'.
4. Consistência e padrões - Evite que os usuários se perguntem se diferentes palavras,
situações ou ações significam o mesmo.
5. Ajudar usuários reconhecer, diagnosticar e recuperar erros - Use linguagem simples
para descrever a natureza do problema e sugerir uma maneira de resolver isso.
6. Prevenção de erros - Sempre que possível evite erros ao primeiro acesso.
7. Reconhecimento ao invés de recordar - Tornar objetos, ações e opções visíveis.
8. Flexibilidade e eficiência de uso - Forneça dicas de navegação invisíveis para usuários
novatos, mas que permitem usuários mais experientes a realizarem tarefas mais
rapidamente.
9. Estética e design minimalista - Evite usar informações irrelevantes ou que raramente
são necessárias.
10. Ajuda e documentação – Forneça informações que possam ser facilmente procuradas
bem como forneça ajuda em um conjunto de passos concretos que podem ser seguidos
facilmente.
32
O papel do design é vital, pois somente um layout amigável e limpo vai garantir que
essa relação entre o homem e o computador seja a mais fluída possível. Se o design for direto
e simples, ele destacará o conteúdo, facilitando o uso do site ou da interface. Portanto, se a
aparência agradar ao usuário, ele com certeza voltará.
Particularmente, em se tratando de web design responsivo, Majid et. al. (2015)
realizou uma pesquisa a fim de descobrir quais são os princípios de usabilidade mais
apropriados para as técnicas de web design responsivos no desenvolvimento de aplicações
web.
Inicialmente, os pesquisadores realizaram o estudo de três trabalhos renomados na
área de usabilidade. Os trabalhos selecionados foram os livros escritos por: Jakob Neilsen,
publicado em 1990, intitulado “Designing User Interfaces para uso internacional"; Jenny
Preece, publicado em 1994, intitulado “Interaction Design: Além da Interação Homem-
Computador" e; Wilbert O. Galitz, publicado em 2002, intitulado “O guia essencial para o
design da interface do usuário: uma Introdução aos Princípios e Técnicas de Design da
GUI”.
A partir dos trabalhos selecionados, Majid et. al. (2015), avaliaram os princípios e as
diretrizes estabelecidas pelos trabalhos em diferentes perspectivas e estruturas de pesquisa
como, por exemplo, o User Centered Design, a avaliação heurística de usabilidade e de
interação homem e computador.
Por outro lado, mesmo os princípios sendo baseados em diferentes pontos de vista e
campos de pesquisa, Majid et. al. (2015) observaram que os trabalhos selecionados, de modo
semelhante, visaram o valor estético e a usabilidade dos sistemas e, por isso, possuem
aspectos em comum. Logo, os autores organizaram cinco princípios derivados dos três
trabalhos selecionados, considerados por eles como escolas2 no estudo da usabilidade. Os
cinco princípios comuns entre tais escolas são:
 Consistência – refere-se a elementos diferentes que possuem mesmo
significado;
 Familiaridade – refere-se ao layout, que foi adaptado para dispositivos com
resoluções menores e ocultou informações ou as alterou na adaptação para o
dispositivo móvel;
 Flexibilidade – refere-se a recursos que auxiliem diferentes usuários, como
aumentar e diminuir fonte, trocar a cor, o tema, ler a tela, aplicar contraste;
2
Sistema, doutrina ou tendência de pensamento de indivíduo ou de grupo de indivíduos que se destacou
em algum ramo do conhecimento.Fonte: http://michaelis.uol.com.br.
33
 Feedback – refere-se a fornecer respostas de fácil entendimento pelo usuário;

 Estética – refere-se a elementos que são fáceis, eficazes e agradáveis de usar
e levando em consideração a efetividade de ícones, fontes, cores, animações,
gráficos e layout.
2.4 NAVEGADORES DE INTERNET
Inicialmente, o acesso à Internet era exclusivamente por meio de computadores que

utilizavam navegadores. Um navegador é um software que possibilita a busca e exibição de
informações da Internet. No início as informações eram basicamente textos, pois as imagens,
vídeos e áudios eram acessados por links que abriam em janelas separadas. Na Figura 1 é
apresentada a tela do Lynx, um dos primeiros navegadores que exibia apenas textos, sua
navegação era realizada basicamente por teclas de cursor (setas), que serviam para locomoção
pelos links das páginas.
Figura 1 – Navegador Lynx para modo texto.

Fonte: https://nakedsecurity.sophos.com/pt/2013/04/30/cern-geneva-celebrates-20years-of-the-world-
wide-web
Em 1993 isso mudou, pois foi lançada a primeira versão do Mosaic, um dos
antecessores do Mozilla Firefox que é considerado o primeiro navegador gráfico popular da
Internet, aqui apresentado na Figura 2 (TERRA, 2013).
34
Figura 2 – Primeiro navegador gráfico.

Fonte: http://tecnologia.terra.com.br/internet/mosaic-ha-20-anos-era-lancado-o-1-navegador-grafico-
da-web,6f3289d31f13e310VgnVCM3000009acceb0aRCRD.html
A partir da evolução dos navegadores de modo texto para o modo gráfico foi
incluído o recurso de renderização que na época foi aplicado por meio da HTML (HyperText
Markup Language) que era a mais recente linguagem de marcação. A renderização é o
processo pelo qual se obtém o produto final de um processamento digital qualquer. Desde
então, os navegadores têm buscado se manterem atualizados quanto às evoluções e demandas
da Internet (FERREIRA; EIS 2011).
Os navegadores da atualidade suportam imagens, vídeos, áudios além da
renderização de HTML5. Atualmente, há vários navegadores como, por exemplo: Mozilla
Firefox, Google Chrome, Opera, Internet Explorer e Safari.
O Mozilla Firefox é um navegador de código aberto, tem sua programação open-
source, livre para ser usada e modificada. O Chrome é desenvolvido e mantido pela empresa
Google, e permite sincronização com os aplicativos da empresa bem como a sincronização da
lista de sites favoritos do usuário em diversos dispositivos. O navegador Internet Explorer é
da Microsoft, foi descontinuado e substituído pelo Microsoft Edge a partir de 2015 e vem
vinculado ao Windows assim como o Internet Explorer anteriormente. O navegador Opera
chegou com uma proposta de ser mais leve para os usuários e o Safari é o navegador padrão
do sistema operacional Mac, da empresa Apple.
35
Atualmente, diferentes dispositivos além dos tradicionais computadores utilizam de

softwares como os navegadores para realizar acesso a Internet. A seguir é apresentada uma
visão geral sobre tais dispositivos.
2.5 DISPOSITIVOS PARA ACESSO À INTERNET
Os usuários hoje usufruem muitas maneiras de acessar o conteúdo publicado na web,

proporcionando em parte pelo rápido desenvolvimento da tecnologia sem fio. A comunicação
móvel tem aumentado as exigências e expectativa dos usuários em termos de acesso a uma
ampla variedade de serviços web, ou seja, em qualquer lugar, a qualquer hora, e através de
múltiplos dispositivos (ZEMEL, 2012).
Porém isso amplia a complexidade causada pelo grande número de dispositivos
habilitados para a web, pois exige repensar sobre o formato dos sites de maneira que sejam
compatíveis com a multiplicidade de dispositivos, como celulares, tablets, notebooks,
televisões. Um aspecto a ser considerado é o fato dos dispositivos apresentarem o recurso
touch screen. Tal recurso possibilita o usuário interagir com o equipamento diretamente pela
tela utilizando o contato manual. Outro aspecto é a resolução dos dispositivos. A Tabela 1
apresenta uma relação de dispositivos disponíveis na atualidade e suas respectivas resoluções.
Tabela 1 – Resolução de telas de dispositivos. Elaborada pela autora.

Dimensões nativas (pixels)
Dispositivo
(width x height)
iPhone 3/4 320 x 480
iPhone 5 320 x 568
iPhone 6/7 (S) 375 x 667
iPhone 6/7 Plus (S) 414 x 736
Samsung Galaxy S2 320 x 533
Samsung Galaxy S3-7 360 x 640
iPad PRO 1024 x 768
iPad 768 x 1024
Samsung Galaxy Tab 7” 1024 x 600
Kindle Fire HD 7” 800 x 480
Adaptar uma aplicação web às diferentes resoluções dos diversos dispositivos é um

desafio. Uma solução seria a concepção e implementação de uma arquitetura, um sistema
distribuído, para aplicações multidispositivos. Os desenvolvedores poderiam criar aplicativos
web em termos de componentes lógicos, para adicionar propriedades que definem o
comportamento do aplicativo em um dispositivo de alto nível de abstração. Assim, durante a
36
fase de desenvolvimento, os desenvolvedores não precisariam estar cientes de um contexto

multidispositivo ou definir modos de exibição para um conjunto específico de dispositivos,
tais como TVs, rádios, celulares, laptops, entre outros (ZORRILLA et. al., 2015).
Por outro lado, os desenvolvedores teriam que definir linhas gerais para permitir que
a arquitetura decidisse a melhor configuração para visualização através de um conjunto
dinâmico de dispositivos envolvidos. As bibliotecas e ferramentas que integrariam essa
abordagem seriam responsáveis por análise e gestão do contexto do dispositivo e as
propriedades definidas no aplicativo para: (a) decidir quais componentes lógicos seriam
apresentados em cada dispositivo em um momento específico, (b) criar um layout responsivo,
perfeitamente adaptado para cada dispositivo, e (c) gerar um canal de comunicação integrada
entre dispositivos (comunicação seamless). O usuário seria, então, capaz de mover-se
suavemente entre partes da aplicação de um dispositivo para outro de uma maneira intuitiva, e
a aplicação seria auto adaptável a cada dispositivo (ZORRILLA et. al., 2015).
37
3 DESENVOLVIMENTO WEB E WEB DESIGN RESPONSIVO
Este capítulo apresenta uma revisão sobre tecnologias de desenvolvimento web, que
compreende a linguagem de marcação HTML, CSS (Cascading Style Sheets), JavaScript e
JQuery, além de abordar sobre design responsivo e suas características.
3.1 TECNOLOGIAS DE DESENVOLVIMENTO WEB
Existem várias tecnologias de desenvolvimento e neste tópico são abordadas a

HTML, CSS, JavaScript e JQuery.
3.1.1 Linguagem de marcação HTML
A HTML é uma linguagem de marcação cujo arquivo é interpretado pelos

navegadores para a exibição dos conteúdos web. Esse arquivo é um documento codificado
estruturado que contêm textos, referências a imagens, vídeos, além de outros recursos que são
exibidos pelo navegador. Cada versão da HTML tem sido desenvolvida visando atender as
evoluções e demandas da Internet de modo que as informações sejam visualizadas por
diversos equipamentos, com diversas resoluções, utilizando vários números de cores, etc. A
HTML4 apresentou o mecanismo de folhas de estilos CSS, responsável por determinar a
aparência (layout) das páginas web (FERREIRA; EIS 2011).
Esse mecanismo permitiu separar a marcação do conteúdo da formatação, o que
facilitou na elaboração e manutenção dos sites e aplicações web. O CSS permite controlar
opções de margem, linhas, cores, alturas, larguras, imagens e posicionamento, sem a
necessidade de utilizar a HTML. Além disso, a partir de um único documento CSS é possível
formatar vários documentos HTML.
A vantagem de separar a marcação da formatação possibilita reduzir o tempo de
produção, pois o conteúdo e a formatação podem ser trabalhados simultaneamente pelo
programador e o designer.
Outra vantagem é a manutenção ou alteração, pois, por exemplo, se o cliente quer
fazer uma alteração de coluna em todo o site com várias páginas, na abordagem tradicional
seria perdido muito tempo, pois seria alterado página por página. Já com o CSS isso pode ser
realizado com poucas alterações impactando no resultado final de todas as páginas ao mesmo
tempo (ANDRADE, 2005).
Posteriormente, uma nova versão da HTML foi criada e denominada como XHTML
(eXtensible Hypertext Markup Language), adotando os padrões de XML (eXtensible Markup
38
Language), que é baseado em SGML (Standard Generalized Markup Language), uma

metalinguagem projetada para máquinas com a função de ser base para a criação de outras
linguagens, trazendo os códigos de forma mais estruturada e organizada.
Utilizando a XHTML era possível compatibilizar aplicações com outras aplicações
XML de modo a tornar a HTML mais clara e limpa fazendo com que novas facilidades
fossem aumentadas, como por exemplo, formulários mais funcionais. Em geral, os
desenvolvedores não aderiram a esta vinculação entre XML e HTML, pois o desenvolvimento
tornou-se mais rígido o que fez com que a XHTML caísse em desuso e continuaram apenas
com o XML. A partir disso, ambos foram desenvolvidos paralelamente, e com o tempo foi
criada uma especificação conhecida como Web Forms 2. 0, que posteriormente foi renomeada
para HTML5 (IKENO; MARCHI 2013).
A HTML5, portanto, é a atual versão da HTML que tem como objetivo facilitar o
desenvolvimento tornando a criação de páginas web mais simples e clara para o
desenvolvedor além de possibilitar atender melhor as demandas do usuário. Ela é capaz de
fornecer recursos para o JavaScript, que é uma linguagem de programação interpretada pelos
navegadores que tem condições de realizar ações dentro de uma página web e que interagem
com o usuário, com por exemplo, criar efeitos especiais, elementos que tenham movimento,
que mudem cor entre outros recursos dinâmicos. Já para o CSS, a HTML possui várias API
(Application Programming Interface). Uma API é um conjunto de instruções e padrões de
programação, capaz de fazer a permissão da própria manipulação dos elementos, de forma
que eles continuem com o melhor desempenho possível (FERREIRA; EIS 2011).
A HTML5 permite a criação de novas marcações (tags), que são estruturas de
linguagem de marcação, e altera certas funções de outras, diferentes nas outras versões, que
não continham um padrão para a criação de seções comuns e específicas. E, por exemplo:
cabeçalho, rodapé, menus, entre outros. A organização das informações na página e a maneira
de como escrever o código também são modificados. Pois não necessita da instalação de plug-
ins3 e assim ameniza a perda de desempenho (FERREIRA; EIS 2011).
3.1.2 Cascading Style Sheets
Como dito anteriormente, o CSS formata algumas características básicas como cores,
background, características de fonte, margens, preenchimentos, posição entre outros itens que
compõem a folha de estilos de uma página.
3
Plug-ins é um programa de computador usado para adicionar funções a outros programas, provendo
alguma funcionalidade especial.
39
A versão atual é o CSS3 que apresentou mudanças significantas para o design web
como, por exemplo:
 selecionar primeiro e último elemento;
 selecionar elementos pares ou ímpares;
 selecionar elementos específicos de um determinado grupo de elementos;
 aplicar gradiente em textos e elementos;
 aplicar bordas arredondadas;
 aplicar sombras em texto e elementos;
 ajustar opacidade;
 controlar a rotação;
 controlar a perspectiva;
 realizar animações;
 definir estruturação independente da posição no código HTML.
Há pouco tempo, o desenho de uma interface já vinha com todos os componentes
gráficos devidamente dimensionados, com larguras e alturas fixas e rígidas (SILVA, 2014a).
Com o aumento de diferentes dispositivos, a unidade de medida do CSS de absoluta,
o pixel, passou a ser relativa, porcentagem e EM, que serão detalhadas na seção sobre web
design responsivo.
3.1.3 Media Types
Media types é uma recomendação da W3C (World Wide Web Consortium)4 desde o
CSS2. Com media types é possível apresentar o site de maneira diferente, dependendo da
mídia (media) do dispositivo que está acessando o conteúdo.
Logo, é possível uma apresentação diferenciada (por meio de folhas de estilo)
quando a página está sendo visualizada de um projetor, que pode ser diferente de quando se
usa uma impressora, um sintetizador de voz, uma televisão, dentre outros.
A ideia é que, ao ser acessada, a página web seja renderizada conforme o estilo mais
apropriado ao dispositivo que está sendo usado para realizar o acesso (ZEMEL, 2012).
Essa diferença entre dispositivos é controlada pelas media types. A seguir é
apresentada uma lista de valores para tipos de mídia.
 all: este valor é usado para que o código CSS seja aplicado para todos os dispositivos.
 braille: para dispositivos táteis.
4
http://ow.ly/cQ3MF
40
 embossed: para dispositivos que imprimem em Braille.

 handheld: para dispositivos de mão, celulares e outros dispositivos deste perfil e,
normalmente com telas pequenas ou banda limitada.
 print: para impressão em papel.
 projection: para apresentações em slides, como o Microsoft PowerPoint.
 screen: para dispositivos com telas coloridas e de alta resolução.
 speech: para sintetizadores de voz. O CSS2 possui uma especificação de CSS
chamada Aural5 qual se pode “formatar” a voz de leitores de tela e de outros
sintetizadores.
 tty: para dispositivos que utilizam uma grade fixa para exibição de caracteres, como
teletypes, terminais, dispositivos portáteis com display limitado.
 tv: para dispositivos como televisores antigos que tem com baixa resolução, com boa
quantidade de cores e scroll limitado, os atuais televisores possuem alta resolução
podendo se utilizar o screen.
A aplicação media type consiste em adicionar a marcação da hyperlink com o
atributo media com um dos possíveis valores. O Código 1 apresenta trecho de um código
HTML em que uma mídia é definida.
<link rel=”stylesheet” href=”estilo.css” type=”text/css” media=”handheld”>

Código 1 – Aplicação de Media Types para dispositivos móveis.
Note que neste exemplo um arquivo CSS (estilo. css), é vinculado ao código HTML
e que foi destinado a ser melhor visualizado em dispositivos de media handheld, ou seja,
aparelhos móveis, celulares com tela pequena e aparelhos similares. Logo, esse CSS não será
aplicado quando o usuário visitar o site utilizando um computador desktop. Neste caso, teria-
se que utilizar a media screen, como está apresentado no Código 2.
<link rel=”stylesheet” href=”estilo.css” type=”text/css” media=”screen”>

Código 2 – Aplicação de Media Types para computadores desktop.
Porém, surgiu um problema, devido a gama de dispositivos que chegaram no

mercado, com tamanhos e hardwares semelhantes aos computadores desktops, principalmente
no que diz respeito a configuração de tela, a qual os fabricantes tem dado mais atenção nos
últimos anos.
5
http://www.w3.org/TR/CSS2/aural.html
41
Isso significou um problema, pois começou a não ficar tão clara a diferença entre os
vários tipos de dispositivos e suas capacidades, deixando as medias types numa posição
isolada, pois não atendiam mais às necessidades de desenvolvimento, já que muitos
dispositivos, como o celular iPhone da Apple, acabaram ficando numa “zona cinzenta” de
mídias, pois ele apresentava características tanto de handheld, quanto de desktop.
Tal situação motivou o surgimento das Media Queries, recomendada pelo W3C
desde junho de 2012, que de modo geral considera os cenários específicos em que o CSS deve
atuar. As medias queries serão abordadas em mais detalhes na seção 3.2.2.
3.1.4 JavaScript
O JavaScript é uma linguagem que foi criada para adicionar interatividade a uma
página web. Ela é capaz de definir, alterar e controlar de forma dinâmica a apresentação de
um documento HTML, como os aspectos relacionados à cor de fundo, de textos e de links, ou
mesmo interferir no posicionamento dos elementos HTML de um documento. É possível
manipular a folha de estilos associada ao documento criando novas regras CSS ou anulando
regras existentes (SILVA, 2013).
Com o JavaScript pode-se controlar o comportamento do navegador em diversos
aspectos, como criar janelas pop-up, apresentar mensagens aos usuários, alterar as dimensões
do navegador, interferir na barra de status, retirar menus, fechar e abrir janelas (SILVA,
2010).
Além disso, é possível utilizar códigos já existentes criado por outros
desenvolvedores, utilizando uma biblioteca. Uma biblioteca é um arquivo JavaScript que
contém várias funções, e essas funções realizam alguma tarefa útil na página web, assim
como, o JQuery.
O JQuery é uma biblioteca JavaScript que destina-se a adicionar interatividade e
dinamismo às páginas web, proporcionando ao desenvolvedor funcionalidades necessárias à
criação de scripts que visem incrementar, de forma progressiva e não obstrutiva, a
usabilidade, a acessibilidade e o design, enriquecendo a experiência do usuário. Alguns
exemplos do uso de JQuery são: adicionar efeitos visuais e animações, prover interatividade,
alterar conteúdos, modificar apresentação e estilização, simplificar tarefas específicas de
JavaScript, realizar outras tarefas relacionadas às descritas (SILVA, 2013).
42
3.2 WEB DESIGN RESPONSIVO
A nova geração de desenvolvedores é estimulada a utilizar as técnicas de Web

Design Responsivo, pois ela possibilitam o desenvolvimento de um único design para uma
variedade de dispositivos visando a facilidade de navegação e enfatizam os dispositivos
móveis.
O termo RWD surgiu em 2010, cunhado por Ethan Marcotte no blog “A List Apart”,
onde ele destacou a mudança de conduta e crescimento de usuários de dispositivos móveis,
mostrando que isso já estava alcançando empresas que queriam seus sites acessíveis para
novos dispositivos. Silva (2014b p. 35-36) explica o conceito de Design Responsivo dizendo
que
é necessário que fique muito claro que design responsivo não diz
respeito simplesmente e somente à adaptação do layout ao tamanho da
tela. Vai muito, além disso, pois o conceito de design responsivo na
sua forma ampla deve ser entendido como o design capaz de
"responder" às características do dispositivo ao qual é servido.
Responder, nesse contexto, tem o sentido de movimentar-se
expandindo e contraindo. Em outras palavras, o design responsivo ou
layout responsivo expande e contrai com a finalidade de se acomodar
de maneira usável e acessível à área onde é visualizado ou, mais
genericamente, ao contexto onde é renderizado, seja um smartphone,
um tablet, um desktop, um leitor de tela, um mecanismo de busca etc.
Portanto, o usuário que está visualizando um site em uma tela pequena precisa que o
conteúdo seja adaptado ao tamanho da tela. Neste caso, a informação pode ser apresentada em
uma ordem diferente. Eventualmente, a fonte pode ser alterada ou as áreas de interação
precisem responder melhor em um ambiente de tela sensível ao toque. Todos esses fatores
influenciam no design responsivo. Na Figura 3 são ilustradas diferentes medidas de resolução
de pixels de acordo com cada tipo de dispositivo.
43
Figura 3 - Tamanho da resolução de acordo com cada dispositivo.

Fonte: http://www.agbernartt.com.br/o-que-e-um-site-responsivo/
Para o desenvolvimento do web design responsivo, são utilizadas quatro técnicas:

layouts fluídos, media queries, imagens e mídias flexíveis e meta tag viewport que são
abordadas nos próximos tópicos.
3. 2. 1 Layouts fluídos
O layout fluído deve ser criado quando o conteúdo for exibido em vários tipos
aparelhos. Neste caso, todas as medidas referentes ao layout do site devem conter valores
relativos, fazendo com que o design seja adaptado conforme a tela em que é visualizada.
Os tipos de medidas recomendados no CSS são de medidas fixas e relativas. As
medidas fixas são dadas em pixels (px) e em pontos (pt) e medidas relativas porcentagens (%)
e EM que se adaptam a qualquer resolução de tela.
A unidade EM, é o tamanho da fonte. Em um elemento com fonte de 2in6, 1 EM será,
portanto, 2in. Exprimir tamanhos, como margens e preenchimentos, com EM significa que eles
são relativos ao tamanho da fonte e se o usuário tem uma fonte grande (ex. uma tela grande)
ou uma fonte pequena (ex. dispositivo handheld), os tamanhos serão proporcionais.
A unidade px é a unidade mais utilizada do CSS. Ela não é relacionada ao tamanho
da fonte atual nem a unidades absolutas. A unidade px é definida para ser pequena, mas
visível, e tal como uma linha de 1px de largura, pode ser exibida com bordas afiadas. O que é
nítido, pequeno e visível, depende do dispositivo e da maneira como ele está sendo usado. Por
exemplo: segurando perto de seus olhos, como em um celular, no comprimento dos braços,
6
1in = 25,4 mm (1 polegada).
44
como num monitor de computador ou alguma coisa entre um e outro, como se fosse um livro.
O px, portanto, não é definido como uma medida constante, mas algo que depende do tipo de
dispositivo e o uso típico deste.
Na Figura 4, está representando um layout utilizando medidas fixas (A) e medidas
flexíveis (B).
Figura 4 – Layout de páginas web. (A) layout com medidas fixas. (B) layout com medidas flexíveis.
Fonte: http://www.kadunew.com/blog/web-design/convertendo-um-layout-fixo-para-fluido.
Para converter um layout de unidade fixa para fluída utilizamos a equação abaixo:
(1)
onde, meta é a coluna e contexto o tamanho total do layout. A Figura 5 apresenta um exemplo
de conversão da unidade fixa pixel (px) para a unidade fluída porcentagem (%).
45
Figura 5 - Cálculo para converter unidade fixa para unidade fluída.

Fonte: http://www.kadunew.com/blog/web-design/convertendo-um-layout-fixo-para-fluido.
Baseando as proporções em um tamanho, no caso da Figura 4A 960 pixels de

largura, o layout de referência tem esse tamanho que é o tamanho máximo do layout. Então, o
cabeçalho e o rodapé ocupam toda a largura do layout, isto é, se estendem à largura total do
layout. Logo, fica fácil aplicar a fórmula como na Equação 2.
960/960 = 100% (2)
As colunas da esquerda e da direita têm 240 pixels de largura dentro dos 960 pixels
total. Para obter uma medida proporcional, utiliza-se a mesma fórmula como mostra a
Equação 3.
240/960 = 25% (3)
O cálculo é direto, ou seja, as colunas se estendem um quarto da largura do layout,

logo o valor proporcional é 25%.
Para calcular a coluna central da página considera-se que neste exemplo que a coluna
está posicionada sem ser flutuada utilizando o CSS do Código 3.
46
#main {
margin:10px 250px 0 250px
}
Código 3 – CSS aplicado margens as colunas da Figura 4A.
Os valores 250px na esquerda e direita são usados para encaixar a coluna central no
meio das duas colunas. Agora temos que converter esses valores para proporção como mostra
a Equação 4.
250/960 = 26,042% (4)
Aplicando ao CSS ficaria como mostra no Código 4.
#main {
margin:10px 26,0416667% 0 26,042%
}
Código 4 – Aplicando CSS nas colunas centrais da Figura4A.
Nos exemplos já citados parece que sempre será dividido o valor pelo total da
página, Mas muitas vezes o contexto muda. Como no layout nas colunas de 220 pixels.
Nesse contexto a divisão seria 220/960. O resultado disso seria 22,9166667% do seu
elemento pai (elemento com 460 px), com isso, o navegador renderizaria aproximadamente
23% de 460.
Para que os elementos fiquem proporcionais ao elemento central que tem 460 pixel, a
fórmula correta seria como mostra a Equação 5.
220/460 = 47,826% (5)
Na Equação 5 de conversão de fixo para fluído, nota-se que o elemento contexto do

layout na fórmula é o elemento de 460 pixel, onde os dois outros elementos de 220 pixel
estavam dentro, observa-se melhor na Figura 4B.
Outra maneira para criação de layouts fluídos é utilizar grids flexíveis. Através dos
grids (grades) divide-se o site em colunas de mesma largura onde se organiza o conteúdo. A
Figura 6 apresenta um exemplo em que foram utilizadas até 12 colunas. O conteúdo pode,
portanto, ser dividido como for necessário, apenas seguindo a lógica de que a soma total das
colunas seja igual a 12.
47
Figura 6 – Representação de como se divide os grids.

Fonte: http://getbootstrap.com/css/#grid.
Com a ideia de layouts fluídos, pode-se criar um site responsivo. O design se adapta
as resoluções se todas as colunas forem definidas com valores relativos. Porém, se existir uma
necessidade de ajustes específicos no layout e mudanças nas especificações do CSS deve-se
utilizar media queries.
3.2.2 Media Queries
As media queries definem condições para que o CSS seja utilizado em cenários
específicos. Se essas condições forem aprovadas, ou seja, se o dispositivo se adequar a todas
as condições estabelecidas na sua media query, o CSS será aplicado. O Código 5 apresenta
um exemplo de media query.
<link rel=”stylesheet” href=”estilo. css” media=”screen and (max-width:

480px)”>
Código 5 - Código para aplicar CSS na condição screen.
No código foi especificado que o arquivo estilo.css, será aplicado em dispositivos

que se enquadram na condição de screen (ou seja, dispositivos que tenham uma tela com alta
capacidade de cores) e com uma largura máxima de 480px devido ao valor “max-width”.
Geralmente utilizam-se as media queries dentro código CSS, pois fica melhor
organizado.
No código CSS, é preciso separar os breakpoints, que são as condições da largura
das telas dos dispositivos, que definem quando cada bloco de CSS será utilizado. O Código 6
apresenta exemplos de breakpoints.
48
1 /* Código geral, que será herdado por qualquer dispositivo.

2 Nesse caso, seria o código usado no desktop, na maioria das vezes. */
3 a {color: yellow;}
4
5 /*Para dispositivos que tem uma largura mínima de 768 pixels. Tablets,
6 por exemplo. */
7 @media screen and (min-widht: 768px) {
8 a {color; yellow;}
9 }
10 /*Com uma largura mínima de 992 pixels. Monitores por exemplo. */
11 @media screen and (min-width: 992px) {
12 a {color: green;}
13 }
14
15 /*Dispositivos com largura minima e 1200 pixels. Por exemplo TVs. */
16 @media screen and (min-width: 1200px) {
17 a {color: black;}
18 }
Código 6 - Exemplos breakpoints no CSS.
Fonte: Adaptado de https://tableless.com.br/introducao-sobre-media-queries/.
É possível especificar o uso de estilos separados por arquivo ou blocos dentro do

mesmo arquivo usando um ou vários parâmetros como será visto a seguir. Importante
ressaltar que a maioria dos parâmetros pode ser pré-fixado com “min“ ou “max“, que
representam, respectivamente, “maior ou igual a” e “menor ou igual a”.
Os parâmetros que podem ser utilizadas para selecionar os diversos dispositivos são:
width, height, device-width, device height, orientation, aspect-ratio, device-aspect-ratio,
color, color-index, monochrome, resolution, scan e grid. A seguir cada um dos parâmetros é
descrito em mais detalhes:
a) Parâmetro WIDTH
Representa a largura, em pixels, da janela do navegador sendo utilizado. Para meios
contínuos na página, é a altura da viewport, incluindo o tamanho da barra de rolagem; para
meios paginados, é a largura da “page box” da impressora.
Por exemplo, o Código 7 especifica regras CSS para dispositivos com a largura da
janela do navegador em 640px.
@media screen and @media (width: 640px) {

[...]
}
Código 7 – Especificação no CSS com largura 640px.
49
O Código 8, por sua vez, especifica regras para dispositivos com largura menor ou
igual a 767 pixels.
@media screen and @media (max-width: 767px) {

[...]
}
Código 8 – Especificação no CSS com largura menor ou igual a 767 pixels.
Os valores do parâmetro width são:

 Valor: <comprimento>
 Media: visual, tátil
 Aceita min/max: sim
O valor do parâmetro refere-se ao comprimento da largura do navegador no dispositivo e não
pode ser negativo.
b) Parâmetro HEIGTH
Representa a altura, em pixels, da janela do navegador sendo usado. Para meios
contínuos, é a altura da viewport, incluindo o tamanho da barra de rolagem; para meios
paginados, é a largura da “page box” da impressora.
Por exemplo, o Código 9 especifica regras CSS para dispositivos cuja altura da
janela do navegador foi definida em 300 pixels.
@media screen and @media (height: 300px) {

[...]
}
Código 9 – Especificação no CSS com altura em 300 pixels.
O Código 10 apresenta código que especifica regras para dispositivos cuja altura é no
máximo igual a 599 pixels.
@media screen and @media (max-height: 599px) {

[...]
}
Código 10 – Especificação no CSS com altura menor ou igual a 599 pixels.
Os valores do parâmetro heigth são:

 Valor: <altura>
50

O valor do parâmetro refere-se à altura do navegador no dispositivo e não pode ser
negativo.
c) Parâmetro DEVICE-WIDTH
Descreve a largura, em pixels, do display do aparelho. Para meios contínuos, é a
largura da tela; para meios paginados, é a largura do tamanho da folha de cada página.
Por exemplo, aplicar uma folha de estilo a um documento quando visualizado numa
tela menor que 800px de largura é apresentado no Código 11.
<link rel="stylesheet" media="screen and (max-device-width:799px)"

href="style.css">
Código 11 – Especificação no CSS tela menor que 800px de largura.
Os valores do parâmetro device-width são:

 Valor: <comprimento>
O valor refere-se ao comprimento da largura do dispositivo e não pode ser negativo.
d) Parâmetro DEVICE HEIGTH

Descreve a altura, em pixels, do display do aparelho. Para meios contínuos, é a altura
da tela; para meios paginados, é a altura do tamanho da folha de cada página.
Por exemplo, aplicar uma folha de estilo a um documento quando visualizado numa
tela menor que 480px de altura é apresentado no Código 12.
<link rel="stylesheet" media="screen and (max-device-height:379px)"

href="style.css">
Código 12 – Especificação no CSS tela menor que 4800px de altura.
Os valores do parâmetro device-heigth são:

 Valor: <altura>
Nesse parâmetro, o valor refere-se ao comprimento da altura do dispositivo e não
pode ser negativo.
51
e) Parâmetro ORIENTATION
Indica se o dispositivo está em modo “paisagem” (landscape), com a tela mais larga
que alta, ou “retrato” (portrait), com a tela é mais alta que larga.
Portanto para se aplicar regras para dispositivos que estão no modo “paisagem”, é
necessário utilizar a configuração apresentada no Código 13.
@media all and (orientation:landscape) {

[...]
}
Código 13 – Especificação no CSS para dispositivos em modo paisagem.
Os valores do parâmetro orientation são:

 Valor: landscape | portrait
 Media: visual
 Aceita min/max: não
f) Parâmetro ASPECT-RATIO
Descreve a proporção da área de exibição do navegador usado. O valor é composto
de dois números inteiros positivos, separados por um caractere de barra (“/”). O primeiro
termo representa a proporção de pixels na horizontal para o segundo termo que indica os
pixels na vertical.
Por exemplo, para aplicar regras com a janela do navegador em widescreen de
proporção 16:9 utiliza-se o trecho CSS apresentado no Código 14.
@media screen and (aspect-ratio:16/9) {

[...]
}
Código 14 – Especificação no CSS janela do navegador em widescreen de 16:9.
Os valores do parâmetro aspect-ratio são:

 Valor: <proporção>
52
g) Parâmetro DEVICE-ASPECT-RATIO
Descreve a proporção do display do dispositivo. O valor é composto de dois números
inteiros positivos, separados por um caractere de barra (“/”). De forma idêntica ao parâmetro
aspect-ratio, o primeiro termo representa a proporção de pixels na horizontal para os pixels na
vertical.
Por exemplo, para aplicar regras em dispositivos widescreen utiliza-se o trecho CSS
apresentado no Código 15.
@media screen and (device-aspect-ratio:16/9), screen and (device-aspect-

ratio:16/10) {
[...]
}
Código 15– Especificação no CSS para aplicar regras para dispositivos widescreen.
Os valores do parâmetro device-aspect-ratio são:

 Valor: <proporção>
h) Parâmetro COLOR
Indica o número de bits por componente de cor do dispositivo. Se ele não é um
dispositivo de cor, o valor é igual a 0. Se os componentes de cor têm diferentes números de
bits, o menor número é usado. Por exemplo, se um display utiliza 5 bits para azul e vermelho
e 6 bits para verde, o dispositivo vai usar 5 bits. Se o dispositivo usa cores indexadas, o
número mínimo de bits por componente de cor na tabela de cores é usado. O Código 16
apresenta um exemplo para especificar regras para dispositivos coloridos.
@media all and (color) {

[...]
}
Código 16 – Especificação no CSS para dispositivos coloridos.
O Código 17 apresenta configuração para estilos que somente serão aplicados em

dispositivos com, pelo menos, 4 bits de cor.
53
@media all and (min-color: 4) {

[...]
}
Código 17 – Especificação no CSS para dispositivos coloridos com no mínimo 4 bits de cor.
O Código 18, por sua vez, destaca configuração para dispositivos com no máximo 16
bits de cor.
@media (max-color:16) {
[...]
}
Código 18 – Especificação no CSS para dispositivos coloridos com o máximo de 16 bits de cor.
Os valores do parâmetro color são:

 Valor: <cor>
 Media: visual
i). Parâmetro COLOR-INDEX

Descreve o número de entradas na tabela de cores do dispositivo. Se o dispositivo
não possuir tabela de cores, então o valor é 0.
O Código 19 apresenta um exemplo para especificar que algumas regras serão
aplicadas a todos os dispositivos com cores indexadas.
@media all and (color-index) {

[...]
}
Código 19 – Especificação no CSS para todos dispositivos coloridos.
O Código 20 apresenta configuração para dispositivos com, pelo menos, 2 cores

indexadas.
@media (min-color-index:2) {
[...]
}
Código 20 – Especificação no CSS para dispositivos com 2 cores.
54
O Código 21 apresenta configuração que incorpora uma folha de estilos para

dispositivos com menos de 256 cores indexadas.
<link rel="stylesheet" media="all and (max-color-index: 256)"

href="http://foo.bar.com/stylesheet.css">
Código 21 – Especificação no CSS para dispositivos com menos de 256 cores.
Os valores do parâmetro color-index são:

 Valor: <inteiro>
 Media: visual
j) Parâmetro MONOCHROME
Esse parâmetro indica o número de bits por pixel em dispositivos monocromáticos
(escala de cinza). Se o dispositivo não for monocromático, o valor é zero.
O Código 22 apresenta um exemplo para aplicar estilos em qualquer dispositivo
monocromático.
@media all and (monochrome) {

[...]
}
Código 22 – Especificação no CSS para qualquer dispositivo monocromático.
O Código 23 apresenta configuração para aplicar estilos em qualquer dispositivo

monocromático com, pelo menos, 2 bits por pixel.
@media all and (min-monochrome:2) {

[...]
}
Código 23 – Especificação no CSS para qualquer dispositivo monocromático com no mínimo 2 bits
por pixel.
Os valores do parâmetro monochrome são:

 Media: visual

55
k) Parâmetro RESOLUTION
Trata sobre a resolução do dispositivo, que pode ser especificada em pontos por
polegada (dpi) ou pontos por centímetro (dpcm). O Código 24 apresenta exemplo de
resolução configurada em pontos por polegada.
@media (resolution: 72dpi) {

[...]
}
Código 24 – Especificação no CSS por pontos por polegadas (dpi).
O Código 25 apresenta exemplo de resolução configurada em pontos por centímetro

e utilizando o prefixo “min-“ que indica menor valor possível para a resolução.
@media (min-resolution: 118dpcm) {

[...]
}
Código 25 – Especificação no CSS por pontos por centímetros (dpcm).
Os valores do parâmetro resolution são:

 Valor: <resolução>
 Media: bitmap
O valor que refere-se a resolução sem os prefixos “min-” ou “max-” não atuará em
dispositivos cujos pixels não são quadrados
l) Parâmetro SCAN
Esse parâmetro trata sobre o processo da leitura que um dispositivo do tipo “TV”
pode realizar. O Código 26 apresenta um exemplo que aplica uma folha de estilo apenas para
televisões com escaneamento progressivo.
@media tv and (scan: progressive) {

[...]
}
Código 26 – Especificação no CSS para aplicar apenas em televisões.
Os valores do parâmetro scan são:

 Valor: progressive | interlace
56
 Media: tv
m) Parâmetro GRID
Esse parâmetro determina se trata-se de um dispositivo de grade ou de mapa de bits
(bitmap). Caso o dispositivo seja baseado em grade (tal como um terminal TTY ou um visor
do telefone, com apenas uma fonte), o valor é 1; caso contrário, é 0.
O Código 27 apresenta um exemplo que aplica regras a todos dispositivos de grade.
@media (grid) {
[...]
}
Código 27 – Especificação no CSS para aplicar em todos os dispositivos.
O Código 28 apresenta configuração para aplicar estilo em dispositivos móveis com

display de 15 caracteres ou menos.
@media handheld and (grid) and (max-width:15em) {

[...]
}
Código 28 – Especificação no CSS para aplicar dispositivos móveis com display de 15 caracteres ou
menos.
Os valores do parâmetro grid são:

 Media: todas
Note que a unidade “em” tem um significado especial para dispositivos assim, já que
a largura exata de um “em” não pode ser determinada, assume-se que 1em é a largura de uma
célula da grade horizontal e a altura de uma célula vertical.
Para o design responsivo, as medias queries são adequadas ao definir qual bloco do
CSS atende melhor ao determinado tamanho de tela do dispositivo. Criar uma media query
para cada resolução de tela, se torna impraticável, perante o número de diferentes tamanhos.
Por isso, se torna importante o uso do design fluído. As medidas fluídas fazem com que o
design se ajuste a qualquer resolução, porém, pode ser necessário realizar ajustes em algum
ponto de intervalo que o design não se comporte como esperado, ou atrapalhe na visualização.
57
3.2.3 Imagens e mídias flexíveis
Imagens e mídias flexíveis são preparadas para diminuir ou aumentar suas dimensões
ou suportar alterações por meio de scripts de acordo com o cenário onde estão sendo
renderizadas.
Em dispositivos de alta densidade as imagens aparecem pixeladas e borradas. Se
utilizar imagens com o dobro de tamanho pode criar um problema de performance, pois as
imagens com o dobro do tamanho levam mais tempo para carregar, e usuários de dispositivos
com alta densidade de pixels nem sempre tem a banda larga necessária para fazer o download
dessas imagens.
Ainda não existe uma solução para o problema das imagens responsivas pelo W3C.
O W3C atualmente está tentando encontrar e definir uma solução padrão, para criação de
imagens fluídas.
Uma solução alternativa é declarar no arquivo CSS que todas as imagens tenham
largura máxima de 100%, isso faz com que todas sejam renderizadas automaticamente e
proporcionalmente com a largura do layout em que se encontram.
O problema que isso acarreta, é que quando a resolução da imagem for menor que a
do dispositivo, ela será esticada e irá apresentar pixels, deformando a imagem. Além disso,
carregar uma imagem de alta resolução e diminuí-la por meio de código faz com o usuário
acesse uma imagem maior do que ele realmente precisa, consequentemente deixando a página
mais pesada.
A utilização de várias imagens em resoluções diferentes é uma solução. O Código 29
apresenta uma configuração na qual define uma classe CSS, denominada “img-responsive”.
<div class=”img-responsive” title=”Imagem Responsiva”></div>

Código 29 – Linha de código do HTML para inserir imagem.
A classe carrega uma imagem de 800 x 600 pixels como pode ser visto no Código
30. Por outro, também é possível observar que define uma imagem de resolução menor (480 x
320 pixels) para dispositivos com telas de até 480 pixels.
58
.img-responsive{
max-width:100%;
background-image: url(imagens/img800.jpg;
}
@media screen and (min-width:480px){

background-image: url(imagens/img480.jpg);
}
Código 30 – Manipulação da imagem em resoluções diferentes no CSS.
Logo, pode se observar que as medias queries adéquam a imagem de acordo com
tamanho de resolução para cada dispositivo e representam uma boa alternativa para lidar com
mídias flexíveis.
3.2.4 Tag Viewport
O viewport é a área onde seu site aparece. É a área branca da janela quando você
abre o navegador. O viewport sempre vai ter o tamanho da janela. Mas a forma como os
elementos são renderizados vai depender bastante do dispositivo. Em desktops não existe
preocupação, pois não varia tanto o tamanho de tela e a resolução média utilizada pelos
usuários. Mas quando varia muito o tamanho das telas, a largura do viewport começa a ser
uma preocupação porque afeta diretamente a forma como o usuário utiliza seu website. Uma
tela pequena, com uma resolução muito grande, por exemplo como as telas dos Iphone e da
maioria dos smartphones de hoje, o conteúdo pode aparecer muito pequeno. Por isso é preciso
fazer com que o viewport mostre o conteúdo se baseando pelo tamanho da tela e não da
resolução.
O uso da tag meta tag viewport controla o layout para o acesso em dispositivos
móveis veja como utilizar no Código 31.
<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>

Código 31 – Uso da Tag Viewport.
O <meta> elemento de exibição fornece instruções do navegador sobre como

controlar as dimensões e a escala da página.
A width=device-width define a largura da página para seguir a largura da tela do
dispositivo (que variará de acordo com o dispositivo).
59
A initial-scale=1.0 define o nível de zoom inicial quando a página é carregada

pela primeira vez no navegador.
3.3 FRAMEWORKS
Um dos principais objetivos da Engenharia de Software é o reuso. Por meio da

reutilização de software obtém-se aumento da qualidade e redução do esforço de
desenvolvimento (GIMENES; HUZITA, 2005). Uma das formas de reutilização de código é o
uso dos frameworks, que em desenvolvimento de software são:
Uma abstração que une códigos comuns entre vários projetos de

software provendo uma funcionalidade genérica. Um framework pode
atingir uma funcionalidade específica, por configuração, durante a
programação de uma aplicação (MULLER, 2008).
Um framework, portanto, captura a funcionalidade comum entre várias aplicações,

provê uma solução para uma família de problemas semelhantes, usando um conjunto de
classes e interfaces que mostra como decompor a família de problemas, especificando apenas
as particularidades de cada aplicação. Sua utilização permite a construção de várias aplicações
com menor esforço. Com o grande número de aplicações, surgiram vários tipos de
frameworks para diferentes áreas, a exemplo da área de desenvolvimento web.
Particularmente dois frameworks voltados para o desenvolvimento web de forma responsiva
são apresentados neste trabalho, a saber: Bootstrap e Foundation.
3.3.1 Bootstrap
O Bootstrap7 é um framework criado em 2011 por Mark Otto e Jacob Thornton como
uma solução interna do Twitter, visando resolver a instabilidade de código dentro da sua
equipe de desenvolvedores. A equipe, não utilizava nenhuma estrutura de código, com isso
cada programador fazia da sua maneira, o que trazia dificuldade na junção dos módulos do
projeto. O Bootstrap, portanto, incentivou o uso de uma estrutura de código comum a todos
desenvolvedores.
Em 2011, foi lançado publicamente como um software-livre, o que permitiu receber
a contribuição de diversos desenvolvedores não necessariamente vinculados a empresa
Twitter.
7
https://getbootstrap.com/
60
Em menos de um ano, foi lançada sua segunda versão, na qual foram adicionadas
algumas melhorias como: inserção de grids, alteração de componentes existentes entre outras
funcionalidades.
A terceira versão trouxe algumas novidades como o mobile first, que é um novo
projeto web, que ao invés de começar o desenvolvimento pela versão desktop, deve-se iniciar
pela versão mobile para depois criar a versão desktop. O conceito de flat design, que é a
simplicidade dos elementos, da clareza do layout. O conceito funciona sem variações na
estrutura do layout, como chanfros, relevo, gradientes ou outras ferramentas que adicionam
profundidade. E os plug-ins de JavaScript vieram com uma nova roupagem bem como os
ícones que passaram a utilizar o conceito de Glyphicons, ou seja, fontes tipográficas em
formato de ícones.
Em outubro de 2015, foi lançada a versão alpha do Bootstrap 4, contendo algumas
novidades como: mais rapidez na compilação, melhoramento no sistema de grid, flexbox, que
faz parte da especificação do CSS3 tem intuito de organizar elementos na página
previsivelmente quando o layout precisa ser visualizado em diversos tamanhos de tela e em
diversos dispositivos, entre outros.
O Bootstrap em sua versão 3.3.5 está organizado em três pastas: CSS, JavaScript e
Fonts, como mostrado na Figura 7.
Figura 7 – Estrutura de pastas do Bootstrap versão 3.3

Fonte: https://getbootstrap.com/docs/3.3/getting-started/
61
Nestas pastas são encontrados os arquivos de CSS e JS compilados para uso nos
projetos web. A Figura 8 mostra a compatibilidade do framework com os navegadores web e
alguns sistemas operacionais desktop e mobile.
Figura 8 – Navegadores e Sistemas operacionais suportados pelo Bootstrap 3.3

Fonte: https://getbootstrap.com/docs/3.3/getting-started/#support
Vale mencionar que o Bootstrap foi construído para ser executado nas versões mais
recentes dos navegadores. Eventualmente, as versões mais antigas podem renderizar
elementos de forma diferente do habitual.
3.3.2 Foundation
O projeto surgiu em 2008 pela empresa ZURB, como um guia de estilo a ser
utilizado pela sua equipe de desenvolvedores para a criação rápida de seus projetos.
Em 2011, este guia de estilos, junto a plug-ins jQuery, tornou-se o Foundation8,
oferecendo opções de costumização, permitindo adicionar e remover elementos, definir
tamanhos, além de fornecer vários modelos prontos.
O Foundation apresenta quatro opções para download: a primeira com todos os
arquivos, a segunda oferece uma versão mais básica, a terceira uma versão customizada e a
quarta é uma versão que oferece suporte a versão com SASS (Syntactically Awesome Style
Sheets). Nas pastas são encontrados arquivos de CSS e JavaScript e até mesmo imagens.
3.3.3 Comparação entre Bootstrap e Foundation
É possível verificar as diferenças e semelhanças entre os frameworks Bootstrap e

Foundation. A estrutura básica dos dois frameworks são bem parecidas (SILVA, 2014a).
O Bootstrap utiliza um arquivo CSS e um JavaScript. Além disso, utiliza uma
biblioteca JQuery, que é acessada por meio de um link que o próprio Google disponibiliza.
8
https://foundation.zurb.com/
62
O Foundation necessita de um arquivo CSS e um JavaScript, e utiliza a biblioteca

modernize. js, que já vem incorporada em sua estrutura de pastas, e que é a responsável por
manter a compatibilidade com os navegadores mais antigos.
O processo de instalação dos dois frameworks ao projeto também são próximos. A
documentação de ambos disponibiliza várias informações bem explicadas e com vários
exemplos.
Os sistemas de grid apresentam diferenças na maneira conforme se criam as colunas.
O Bootstrap utiliza uma nomenclatura um pouco confusa para iniciantes, diferente do
Foundation.
O Bootstrap apresenta uma maneira simples para tornar uma imagem responsiva,
apenas adicionando no elemento img a classe a classe “img-responsive”. Suas classes utilizam
um max-width (valor máximo) de 100%, o que torna as imagens responsivas.
O Foundation trata as imagens de uma maneira bem diferente. Ele exibe a imagem de
acordo com o dispositivo que está acessando a aplicação web naquele determinado momento.
Dentro da estrutura do elemento img coloca-se o atributo data-interchange onde
como primeiro parâmetro é passado o lugar onde a imagem se encontra e no segundo
parâmetro é a consulta de mídia. Ele verifica se a página está sendo acessada por um desktop
e mostra a devida imagem para aquele tipo de dispositivo.
Apesar do processo de redimensionamento de imagens do Bootstrap ser simples,
dependendo do tamanho da imagem original, a aplicação pode perder a eficiência por carregar
a imagem original e apenas depois fazer o redimensionamento para o tamanho necessário ao
dispositivo.
O Foundation trabalha de uma forma mais inteligente. Nele pode se inserida uma
imagem para vários tamanhos de telas, e assim de acordo com o dispositivo que acessar ele
exibe uma imagem correspondente para aquele tamanho de tela. O que torna o desempenho
muito melhor.
Verifica-se que os dois frameworks são adequados para o desenvolvimento de
aplicações web, porém o Bootstrap possui uma variedade maior de componentes CSS e
JavaScript em relação ao Foundation, o que tende a facilitar o desenvolvimento de aplicações
web. Porém o Bootstrap é rígido com relação aos temas o que deixa os layouts com uma
aparência muito similar.
O Foundation possui mais flexibilidade de personalização em relação ao Bootstrap e,
por isso, é indicado para desenvolvedores que já possuem familiaridade com o framework e é
indicado para projetos maiores (SILVA, 2014a).
63
3.4 FERRAMENTAS WEB RESPONSIVO
Existem ferramentas que avaliam a responsividade de um site e também ajudam a

visualizar o site em todas as resoluções de dispositivos.
O MobileOK9 Checker foi um pacote de softwares desenvolvido pelo grupo “Best
Practices Working Group” e possuia licença W3C. O pacote foi utilizado no início deste
trabalho, no entanto ele foi descontinuado neste período. Ele era projetado para fornecer
verificação automatizada quanto à compatibilidade avaliando principalmente a usabilidade
básica, eficiência e interoperabilidade com dispositivos móveis. Os desenvolvedores
esperavam que essa ferramenta de testes melhorasse a autoria de conteúdo que aborda a
experiência de navegação dos usuários em uma ampla gama de dispositivos.
Os testes eram aplicados em um URI (Uniform Resource Identifier), que ao concluir
as verificações apresentava os resultados e a compatibilidade com diferentes resoluções. A
Figura 9 mostra a tela inicial onde era possível inserir um endereço de site que seria
verificado pelo pacote.
Figura 9 – Tela inicial do MobileOK Checker.
Outra ferramenta que ajuda no desenvolvimento de aplicações web responsivas é o

Quirktools10. O QuirkTools é um aplicativo criado pelo desenvolvedor web Kyle Schaeffer
para ajudar tanto com a prototipagem de um projeto quanto para testá-los.
O Screenfly compõe a suíte de serviços gratuitos de QuirkTools, e permite simular
um determinado site e, desktops, tablets, celulares e televisores, o que ajuda a desenvolver um
9
https://www.w3.org/2016/11/mobile-checker-disabled/
10
http://quirktools.com/
64
design responsivo, quanto avaliar um já existente. A Figura 10 apresenta a tela principal da

ferramenta.
Figura 10 – Tela Screenfly do Quirk Tools.
É possível observar na Figura 10 o local em que se insere o link do site, indicado

pela seta, o qual será avaliado e renderizado. A Figura 11 apresenta as opções que o
desenvolvedor pode escolher ao utilizar a ferramenta Quirktools.
Figura 11 – Tela demonstrativa do uso do Quirk Tools. Os números indicados de 1 a 12 referem-se à

opções ou informações disponibilizadas pela ferramenta.
Na Figura 11 são apresentadas 12 opções. A opção 1 indica as resoluções de tela para

desktops; a opção 2 indica as resoluções de tablets; a resolução 3 são as resoluções para
65
smartphones; a opção 4 para televisores; a opção 5 pode ser colocada a resolução

manualmente; a opção 6 é para atualizar a página; a opção 7 é para rotacionar para a posição
vertical; a opção 8 permite a rolagem do site; a opção 9 permite alterar o proxy caso não se
consiga acessar um determinado site; a opção 10 permite o compartilhamento do link da
ferramenta. A opção 11 mostra a informação de resolução da tela que está sendo utilizada, e a
opção 12 a resolução que está sendo renderizada pela ferramenta.
66
67
4 METODOLOGIA
A concepção deste trabalho considerou a seleção de princípios de usabilidade e a

avaliação destes de modo a verificar a pertinência das técnicas responsivas no
desenvolvimento web visando o aumento da usabilidade das aplicações. Para isso, a
metodologia do trabalho considerou três etapas como ilustrado o fluxograma da Figura 12.
Etapa 1
Seleção de critérios
Etapa 2
Coleta de dados
Etapa 3
Análise dos dados

Figura 12 – Fluxograma das etapas do processo de avaliação.
Na etapa 1 foram selecionados os critérios de avaliação. Estes critérios foram

separados em duas categorias, critérios técnicos e critérios de usabilidade. Os critérios
técnicos considerados foram:
1. Resolução adaptativa. O critério consiste em verificar se o site se adapta a
diferentes resoluções de dispositivos. A avaliação deste critério será realizada
com o auxílio da ferramenta Quirktools.
2. Inclusão de técnicas web responsivas na construção do site. O critério
consiste em verificar se o conjunto de códigos que formam um site contém as
seguintes técnicas web responsivas: layouts fluídos, imagens e mídias
flexíveis, media queries e meta tag viewport. A avaliação deste critério será
realizada com o auxílio da ferramenta Quirktools e análise manual do
conjunto de códigos que formam um site (análise do código HTML e CSS, se
houver).
Além disso, os critérios técnicos foram classificados como: Não Configurado, Mal
Configurado e Configurado. Um critério classificado como “Não Configurado” significa, por
exemplo, que a resolução de um site não se adapta a diferentes resoluções e que não possui
nenhuma técnica web responsiva no conjunto de códigos que compõe o site. O critério
68
classificado como “mal configurado” indica que embora o site contenha técnicas web
responsivas no conjunto de código elas não foram configuradas adequadamente. Um exemplo
é um site conter a opção de imprimir o conteúdo, mas não apresentar uma folha de estilo
adequada para tal ação. Outro exemplo, é o site conter imagens flexíveis embora não tenha
sido observado os limites de resolução dos dispositivos. Já o critério classificado como
“configurado” indica que o site utiliza as técnicas web responsivas de forma adequada, ou
seja, não foram encontrados problemas de configuração como os citados no caso da
classificação “mal configurado”. Para cada classificação foi associada uma pontuação de
modo a quantificar a análise dos critérios técnicos. A Tabela 2 apresenta a relação de
pontuação de acordo com a classificação dos critérios.
Tabela 2 – Classificação e pontuação dos critérios técnicos.

Classificação Pontuação
Não configurado 0
Mal configurado 5
Configurado 10
Como critérios de usabilidade foram considerados quatro princípios de usabilidade

estabelecidos no trabalho de Majid et. al. (2015), a saber: Consistência, Familiaridade,
Flexibilidade e Estética.
A Consistência dos elementos diferentes com mesmo significado, como símbolos e o
layout dentro da página, seguido pela Familiaridade com o layout na adaptação para
dispositivos menores, a Flexibilidade do site em resposta à diferentes diferenças individuais,
como recursos que auxiliem esses diferentes usuários, tais como diminuir fonte, trocar cor,
tema, ler a tela e contraste. E a Estética, que são elementos fáceis, eficaz e agradável de usar e
a efetividade de ícones, fontes, cores animações, gráficos e layout.
Os critérios de usabilidade foram classificados como: Atende (A), Atende
Parcialmente (AP) e Não Atende (NA). A Tabela 3 apresenta a relação de pontuação de
acordo com a classificação dos critérios.
Tabela 3 – Classificação e pontuação dos critérios de usabilidade.

Classificação Pontuação
Atende (A) 2
Atende parcialmente (AP) 1
Não atende (NA) 0
69
A etapa 2, refere-se a coleta de dados que neste trabalho significa a seleção de um

conjunto de sites a serem submetidos à avaliação dos critérios técnicos e dos critérios de
usabilidade.
Procurou-se selecionar sites de forma aleatória, por meio de consultas na web,
buscando sites que utilizam os frameworks Bootstrap ou Foundation, sites que não utilizam
nenhum framework, mas que utilizavam recursos web responsivos bem como sites que não
utilizam nenhum framework e que não possuíam técnicas web responsivas. Nesta fase, evitou-
se acessar o conjunto de códigos que formavam os sites selecionados. A busca priorizou sites
voltados à educação, como sites institucionais ou páginas de conteúdos publicadas por
professores e pesquisados.
A terceira etapa consistiu em realizar a avaliação dos critérios técnicos bem como
dos critérios de usabilidade. A fim de sistematizar o processo de avaliação dos critérios
técnicos foi definido um fluxograma que está ilustrado na Figura 13.
Figura 13 – Diagrama do processo de avaliação.
Cada um dos sites selecionados foi visualizado na ferramenta de avaliação,

Quirktools, de modo a verificar o comportamento em diferentes dispositivos. Caso o site não
70
atendesse a esse requisito, ele foi considerado como “não configurado”. Caso contrário, Se ele
atendeu a diferentes resoluções, foi avaliado o conjunto de código que o compunha bem como
a disposição dos elementos a fim de verificar se ele era considerado como “mal configurado”
ou “configurado”.
Na avaliação de usabilidade, foi acessado site a site, verificando todos os critérios
selecionados, definindo se Atente, Atende Parcialmente ou Não atende a esses critérios. A
analise técnica feita na parte da ferramenta Quirktools, ajudou na verificação quanto a
Familiaridade do site e as mudanças no design responsivo.
A pontuação total da avaliação dos critérios de usabilidade se dá por meio da
somatória dos valores obtidos em cada critério como mostra a Equação 5.
(5)
onde P é a somatória da pontuação, Ci corresponde ao valor de um dos quatro critérios (i = 1,

2, 3, 4). Um critério pode assumir um dos seguintes valores: 0, 1 ou 2 de acordo com o
indicado na Tabela 3.
4.1 MÉTRICA DE AVALIAÇÃO
Para cada site avaliado foram geradas pontuações para os critérios técnicos e critérios
de usabilidade. Tais dados foram organizados em duas principais tabelas. Com base nesses
dados foi possível avaliar, por meio do coeficiente de correlação, a relação entre os critérios
técnicos e os critérios de usabilidade.
Em probabilidade e estatística, correlação, dependência ou associação é qualquer
relação estatística (causal ou não causal) entre duas variáveis e a correlação é qualquer relação
dentro de uma ampla classe de relações estatísticas que envolva dependência entre duas
variáveis.
Em alguns casos, a correlação não identifica dependência entre as variáveis. Em geral,
há pares de variáveis que apresentam forte dependência estatística, mas que possuem
correlação nula. Para estes casos, são utilizadas outras medidas de dependência.
Formalmente variáveis são dependentes se não satisfizerem a propriedade matemática
da independência probabilística. Em termos técnicos, correlação refere–se a qualquer um dos
vários tipos específicos de relação entre os valores médios. Existem diferentes coeficientes de
71
correlação para medir o grau de correlação. Um dos coeficientes de correlação mais

conhecidos é o coeficiente de correlação de Pearson, obtido pela divisão da covariância de
duas variáveis pelo produto dos seus desvios padrão e é sensível a uma relação linear entre
duas variáveis. Este coeficiente, normalmente representado por ρ assume apenas valores entre
-1 e 1, sendo que:
 ρ = 1: Significa uma correlação perfeita positiva entre as duas variáveis.
 ρ = -1: Significa uma correlação negativa perfeita entre as duas variáveis - Isto
é, se uma aumenta a outra sempre diminui.
 ρ = 0: Significa que as duas variáveis não dependem linearmente uma da outra.
No entanto, pode existir uma dependência não linearo que sugere que deve ser
investigado por outros meios.
O coeficiente de correlação de Pearson é calculado de acordo com a Equação 1.
(6)
onde, cov(X,Y) é a covariância entre as variáveis X e Y, var(X) e var(Y) são,

respectivamente, a variância das variáveis X e Y. Vale mencionar que o resultado de ρ é
interpretado da seguinte maneira:
 0,9 positivo ou negativo indica uma correlação muito forte.
 0,7 a 0,9 positivo ou negativo indica uma correlação forte.
 0,5 a 0,7 positivo ou negativo indica uma correlação moderada.
 0,3 a 0,5 positivo ou negativo indica uma correlação fraca.
 0 a 0,3 positivo ou negativo indica uma correlação desprezível.
72
73
5 RESULTADOS E DISCUSSÕES
Para a avaliação dos sites realizou-se a coleta dos dados no período de julho a setembro
de 2017 que resultou na seleção de vinte sites elencados na Tabela 4.
Tabela 4 – Lista dos sites selecionados para avaliação.

ID Endereço do site
Site 1 sbv.ifsp.edu.br/
Site 2 https://www.ifsuldeminas.edu.br/index.php
Site 3 http://www2.ufscar.br/#
Site 4 https://www.unip.br/portal.aspx
Site 5 http://www.unifesp.br/
Site 6 http://www5.usp.br/
Site 7 http://www.fae.br/portal/
Site 8 http://www.pucsp.br/home#
Site 9 http://www.baraodemaua.br/
Site 10 http://www.unaerp.br/
Site 11 http://www.unesp.br/
Site 12 http://www.sp.senai.br/
Site 13 http://blogpixie.com
Site 14 http://cozar.me/
Site 15 http://www.selfusnow.com/
Site 16 https://www.jamesstone.com/
Site 17 https://tableless.com.br/
Site 18 https://marketingdeconteudo.com
Site 19 https://www.dafont.com/pt/
Site 20 https://dqisrv.dequi.eel.usp.br/domingos/
A análise foi realizada em um notebook com sistema operacional Windows 10 e

utilizou-se o navegador Google Chrome, versão 62.0.3202.89. A ferramenta utilizada para
auxiliar as avaliações foi a QuirkTools que permitiu a verificação de resoluções em diferentes
dispositivos. Além disso, foi utilizado o celular iPhone 6(S) para testes em ambiente não
simulado.
A Tabela 5 apresenta os resultados de avaliação dos critérios técnicos nos 20 sites
selecionados. É importante destacar que as classificações dos critérios técnicos são
mutuamente exclusivas, portanto não é possível encontrar um site classificado como “não
74
configurado” e “mal configurado”, por exemplo. A pontuação foi calculada de acordo com o
estabelecido na Tabela 2.
Tabela 5 - Avaliação técnica dos sites.

Não configurado Mal configurado Configurado Pontuação
Site 1 x 5
Site 2 x 5
Site 3 x 10
Site 4 x 0
Site 5 x 10
Site 6 x 5
Site 7 x 5
Site 8 x 10
Site 9 x 10
Site 10 x 5
Site 11 x 0
Site 12 x 0
Site 13 x 10
Site 14 x 10
Site 15 x 10
Site 16 x 10
Site 17 x 10
Site 18 x 10
Site 19 x 0
Site 20 x 0
A Tabela 6 apresenta os resultados de avaliação dos critérios de usabilidade realizada

nos 20 sites selecionados. Ao contrário dos critérios técnicos, na análise da usabilidade os
critérios não são mutuamente exclusivos, ou seja, é possível que o site seja parcialmente
consistente e ainda atender ao critério de flexibilidade, por exemplo. Logo, na Tabela 6, a
coluna “Pontuação” expressa o somatório dos valores obtidos em cada critério de acordo com
a Equação 5.
75
Tabela 6 – Avaliação de usabilidade dos sites

Consistência Familiaridade Flexibilidade Estética Pontuação
Site 1 2 2 1 1 6
Site 2 2 2 1 1 6
Site 3 2 2 1 2 7
Site 4 0 0 0 0 0
Site 5 2 2 2 2 5
Site 6 2 2 0 1 5
Site 7 2 2 0 1 4
Site 8 2 2 0 2 6
Site 9 2 2 0 2 6
Site 10 2 2 0 1 6
Site 11 0 0 0 0 0
Site 12 0 0 0 0 0
Site 13 2 2 0 0 6
Site 14 2 0 0 0 3
Site 15 2 2 0 0 6
Site 16 2 2 0 0 6
Site 17 2 2 0 0 5
Site 18 2 2 0 0 6
Site 19 0 0 0 0 0
Site 20 2 2 0 0 4
Legenda: Atende (A) = 2; Atende parcialmente (AP) = 1; Não atende (NA) = 0.
A Figura 14 mostra o site 1 visualizado nas resoluções 1024 x 600 px e 800 x 480 px
sendo renderizados pela ferramenta QuirkTools.
Figura 14 – Site 1 visualizado em diferentes resoluções. A) resolução1024 x 600px. B) resolução 800

x 480px.
76
Na Figura 14, não é possível observar nenhuma alteração significativa nas duas
resoluções indicadas. Isto se deve, provavelmente, ao fato de serem resoluções amplamente
utilizadas em dispositivos tais como monitores de computadores desktop e notebooks que
possuem telas em torno de 14”, ou superior. A Figura 15, no entanto, apresenta o site 1
visualizado em resolução ainda menor.
Figura 15 – Site 1 visualizado na resolução 375 x 667 px.
É possível observar que o site possui estrutura organizada, o código HTML e CSS
estão separados o que facilita a manutenção, além disso faz o uso de imagens e mídias
flexíveis bem como o recurso de tag viewport.
Por outro lado, como mostra a Figura 15B o rodapé contém um menu de navegação do
site, porém observou-se a dificuldade de visualização como mostrado no retângulo.
A Figura 16 apresenta o site 2 visualizado nas resoluções 1024 x 600 px e 800 x 480
px.
Figura 16 – Site 2 visualizado em diferentes resoluções. A) resolução 1024 x 600 px. B) resolução800
x 480 px.
77
Na resolução 1024 x 600 px era possível observar o menu do lado esquerdo. Na

resolução 800 x 480 px o menu foi alterado e retraído para um botão que abre as opções de
menu antes visíveis como visto na Figura 16B. A Figura 17 apresenta o site 2 visualizado em
resolução ainda menor.
Figura 17 – Site 2 visualizado na resolução 375 x 667 px.
Na Figura 17 verifica-se que o site é visualizado na resolução 375 x 667 px. O círculo
na figura destaca que existem itens de navegação que foram parcialmente ocultados ao reduzir
a resolução dificultando a visualização e acesso ao site por parte do usuário.
Verificou-se que o site 2 apresenta estrutura organizada, utiliza o recurso da tag
viewport, medias queries, imagens flexíveis e utiliza o framework Bootstrap. De qualquer
modo apresentou itens não configurados que afetaram, mesmo que parcialmente, o acesso e a
visibilidade do usuário em smartphones.
O próximo site avaliado (site 3) é apresentado pela Figura 18 em duas diferentes
resoluções.
78
Figura 18 – Site 3 visualizado em diferentes resoluções. A) resolução 1024 x 600px. B) resolução800

x 480px.
Não foram observadas, no caso do site 3, nenhuma alteração significativa do site, logo
considerou-se que ele respondeu bem às duas resoluções. A Figura 19 apresenta o site 3
visualizado em uma resolução menor (375 x 667 px).
Figura 19 - Site 3 visualizado na resolução 375 x 667 px.
Verificou-se que o site também atendeu bem à resolução de 375 x 667 px, e que possui
estrutura organizada, além de fazer uso dos principais itens de web responsividade. Porém, a
imagem do banner rotativo como mostra o círculo na Figura 19 está com o texto sobreposto a
imagem. Este erro ocorreu, provavelmente, porque o texto não está na imagem e não foi
79
limitado ou configurado para não se sobrepor a imagem. Vale mencionar, ainda, que o site 3
não utilizava nenhum framework. A seguir, a Figura 20 apresenta a análise visual do próximo
site (site 4) em duas diferentes resoluções.
Figura 20 - Site 4 visualizado em diferentes resoluções. A) resolução 1024 x 600px. B) resolução 800
x 480px.
Na resolução 800 x 480 px como mostra a Figura 20B, os itens não respondem à
resolução especificada, como destacado pelo retângulo no canto superior direito da figura, o
que impossibilitou parcialmente a visualização. Isso também ocorreu na resolução 375 x 667
px como mostra na Figura 21A.
Figura 21 - Site 4 visualizado na resolução 375 x 667 px. A) site visualizado pelo QuirkTools.
B) site visualizado pelo iPhone 6(S).
Ao reduzir a resolução observou uma área maior em que os elementos ficaram

parcialmente ocultos. Ao acessar o site 4, na mesma resolução, em um dispositivo móvel
80
(Figura 21B) verificou-se que o site foi inteiro visualizado, porém o tamanho da fonte ficou
muito pequeno o que tornou o conteúdo ilegível, exigindo ampliar (aplicar zoom) para que
fosse possível navegar pelo site 4. Neste caso, uma solução seria utilizar o recurso de tag
viewport que, provavelmente, melhoraria a visualização em resoluções menores.
Outro aspecto observado na análise do site 4 é que o código HMTL e o CSS não
estarem separados. Isso tende a dificultar a manutenção, as alterações e a padronização do
site. Logo, manter o código HTML e CSS não é considerada uma boa prática de
desenvolvimento web.
A Figura 22 apresenta a análise visual do site 5 visualizado em diferentes resoluções.
Figura 22 - Site 5 visualizado em diferentes resoluções: A) resolução 1024 x 600px; B) resolução800 x

480px.
O site 5 apresentado na Figura 22A está sendo visualizado nas resoluções 1024 x 600
px nota-se que o menu está no cabeçalho do site. Na Figura 22B observou-se que o menu foi
alterado, sendo contraído para o botão como mostra o retângulo para atender a resolução 800
x 480 px . A Figura 23 apresenta o site 5 na resolução 375 x 667 px.
81
Verifica-se que o site 5 atendeu as características de web responsividade, adaptadou-se

as diferentes resoluções, além disso os códigos CSS e HTML estão separados que facilita a
manutenção, e foi observado o uso da tag viewport e do framework Bootstrap. A Figura 24
apresenta a análise do site 6 visualizado em duas resoluções.
Figura 24 - Site 6 visualizado em duas resoluções. A) resolução 1024 x 600px. B) resolução 800 x
480px.
O site 6 não apresentou alterações com a mudança da resolução 1024 x 600 px para
800 x 480 px. A Figura 25 apresenta o site 6 visualizado em resolução menor.
82
Observou-se que o site 6 estava configurado para atender a todos os dispositivos e às

características de responsividade, porém suas imagens não estavam flexíveis dificultando a
leitura como enfatiza o círculo na Figura 25.
Na avaliação seguinte, o site 7 foi submetido à resolução maior do que nas avaliações
anteriores. A Figura 26 apresenta o site 7 visualizado em duas resoluções.
Figura 26 - Site 7 visualizado em diferentes resoluções. A) resolução 1903 x 984px. B) resolução1024

x 600px.
A Figura 26A apresenta o comportamento do site na resolução 1903 x 984 px. O

intuito foi verificar o comportamento dos elementos de um site em resoluções maiores. A
Figura 27 apresenta o site 7 visualizado em resoluções menores.
83
Figura 27 – Site 7 visualizado em diferentes resoluções. A) resolução 800 x 480 px. B) resolução 375
x 667 px.
Observou-se que o site 7 foi configurado para atender a todos os dispositivos, porém
considerou-se que a configuração foi parcial. Isso pode ser demonstrado pela Figura 26B que
os itens em destaque no retângulo estão desalinhados e pelas Figuras 27A e 27B que
apresentam problemas semelhantes.
A Figura 28 apresenta o site 8 sendo visualizado nas resoluções 1024 x 600 px e 800 x
480 px.
Figura 28 - Site 8 visualizado nas resoluções 1024 x 600px e 800 x 480px.
Não foram observadas alterações significativas na alteração da resolução maior (1024

x 600 px) para a menor (800 x 480 px). A Figura 29 apresenta o site 8 visualizado em
resolução 375 x 677 px.
84
Verificou-se que o site estava bem configurado, atendendo a todas as resoluções de

dispositivos definidas para análise. Além disso, o site apresentava as principais características
de web design responsivo. A próxima análise, indicada pela Figura 30, apresenta o site 9
visualizado em duas resoluções.
Figura 30 - Site 9 visualizado em diferentes resoluções. A) resolução 1024 x 600px. B) resolução 800
x 480px.
Na análise do site 9 não foram observadas alterações significativas da resolução 1024

x 600 px para 800 x 480 px. A Figura 31 apresenta o site 9 visualizado na resolução 375 x
667 px.
85
Verificou-se que o site estava bem configurado, e atendia a todas as resoluções de

dispositivos, além disso apresentava as principais características de web design responsivo,
além de utilizar o framework Bootstrap. A Figura 32 apresenta a análise visual do site 10 em
uma resolução.
Figura 32 - Site 10 visualizado na resolução 1024 x 600px.
Verificou-se que o site 10 ao rolar a barra de rolagem os textos e as imagens não

ficaram alinhados, o que dificultou a visualização do site. Os círculos na Figura 32B destacam
dois principais pontos em que a configuração do site comprometeu a visualização por parte do
usuário. A Figura 33 apresenta o site 10 visualizado em duas diferentes resoluções.
86
Figura 33 - Site 10 visualizado em diferentes resoluções. A) resolução 800 x 480 px. B) resolução 375
x 667 px.
Verificou-se que o site 10 estava configurado visando atender a diferentes resoluções,

no entanto o site continha itens que não estavam bem configurados, como foi observado na
Figura 32B. A Figura 34 apresenta a análise visual do site 11 em duas resoluções.
480px.
Verificou-se que o site 11 não respondeu adequadamente ao alterar a resolução maior

(1024 x 600 px) para a menor (800 x 480 px). Na Figura 34B é possível observar no retângulo
à direita que vários elementos do site estão parcialmente ocultos o que dificulta a visualização
do conteúdo por parte dos usuários. A Figura 35 apresenta a visualização do site 11 na
resolução 375 x 667 px.
87
Figura 35 - Site 11 visualizado na resolução 375 x 667 px. A) visualização na ferramenta QuirkTools.
B) visualização no iPhone 6(S).
Verificou-se que o site não estava adaptado a dispositivos móveis, pois ao acessá-lo
diretamente de um dispositivo móvel como ilustra a Figura 35B, observou-se que todo o site
foi visualizado, porém com o tamanho da fonte tipográfica muito pequeno o que tornou o
conteúdo praticamente ilegível, exigindo a necessidade de aplicar zoom para navegar no site
pelo dispositivo móvel. A Figura 36 apresenta o site 12 visualizado em duas resoluções.
480px.
Verificou-se que o site 12 não tratou todos os elementos ao reduzir a resolução. Na

Figura 36B o retângulo destaca que o site está sendo cortado atrapalhando sua visualização. A
Figura 37 apresenta o site 12 visualizado na resolução 375 x 667 px.
88
Figura 37 - Site 12 visualizado na resolução 375 x 667 px. A) visualização pela ferramenta
QuirkTools. B) visualização do iPhone 6(S).
Verificou-se que o site não está totalmente adaptado a dispositivos móveis, pois ao
acessar direto de um dispositivo móvel (Figura 37B), observou-se que o site foi visualizado
por completo, no entanto o tamanho da fonte tipográfica era muito pequeno o que tornou o
conteúdo praticamente ilegível. Vale destacar que a Figura 37A visualizada pela ferramenta
Quirktools também apresentou elementos que ficaram parcialmente ocultos, como destaca o
retângulo do lado direito. Tal situação compromete a visualização adequada do conteúdo por
parte do usuário. A Figura 38 apresenta o site 13 em duas resoluções.
480px.

667 px.
89
Na análise do código verificou-se que o site está bem configurado, pois sua estrutura
está organizada, HTML e CSS estão separados de modo que seja fácil realizar alterações e
manutenção do site.
Foi utilizado o método de tag viewport, framework Bootstrap e imagens flexíveis que
são os requisitos para um site responsivo. Sendo assim, considera-se um site bem
configurado, pois está atendendo a todos os requisitos de um site responsivoA Figura 40
apresenta a análise visual do site 14 em duas resoluções.
480px.
90

667 px.
O site em resolução menor que de 800 px não disponibiliza a visualização dos

banners.
Na análise do código, observou-se que ele está bem configurado, possui estrutura
organizada, o HTML e o CSS estão separados de modo que seja fácil realizar alterações e
manutenção do site. Além disso, verificou-se que foi utilizado a tag viewport, framework
Bootstrap para o site atender a responsividade.
Esse site pode ser classificado como bem configurado, pois ele atende aos requisitos
de responsividade. Nota-se que “ocultar” o banner em menores resoluções, foi uma opção de
desenvolvimento, pois as demais imagens contidas no site, são imagens flexíveis que atendem
a todas as resoluções. A Figura 42 apresenta o site 14 em duas resoluções.
91
480px.

667 px.
Na análise do código verificou-se que o site está bem configurado, pois sua estrutura
92
Foi utilizado o método de tag viewport, medias queries, imagens flexíveis e

framework Foundation que o tornam um site responsivo. A Figura 44 apresenta o site 16 em
duas resoluções de telas.
480px.
O site 16 em sua análise não foi observado alterações significativas da resolução 1024
667 px.

93
Na análise do código observou-se que o site está bem configurado, pois sua estrutura
Foi utilizado o método de tag viewport, medias queries, imagens flexíveis e
framework Foundation que tornam um site responsivo. A Figura 46 mostra o site 17.
Figura 46 - Site 17 visualizado em duas resoluções. A) 1024 x 600px. B) 800 x 480px.
Notasse que o site na resolução de 800 x 480 px, Figura 46B se adaptou ao tamanho,
realinhando alguns itens como, por exemplo, colocando o menu abaixo do logo e alinhando a
esquerda, diminuiu o tamanho das fontes, para que todos os elementos do site sejam
visualizados. A Figura 47 mostra o site na resolução 375 x 667 px.

94
Observou-se que que os itens se adaptaram à tela. As imagens são flexíveis, se

adaptando as resoluções das telas. Porém nos itens de menu gerou barra de rolagem, que não
seria apropriado no ponto de vista visual e de usabilidade.
Na análise do código constatou-se que o site está bem configurado, pois sua estrutura
manutenção do site. Além disso, foi utilizado o método de tag viewport, medias queries e
imagens flexíveis que são os requisitos para um site responsivo.
Embora tenha ocorrido a questão da barra de rolagem, que poderia ser selecionada
com o uso de JavaScript, JQuery entre outros, os elementos estavam bem configurados assim
como o layout estava adaptado, por isso, considerou-se o site como bem configurado. A
Figura 48 mostra o site 18 em duas resoluções.
480px.
Nota-se que na resolução 800 x 480 px, a imagem foi alterada, o desenvolvedor
optou por trocar a imagem por uma imagem flexível em resoluções menores a 800 px, assim
como na Figura 49 com resolução 375 x 667px.
95
Na análise do código observou-se que o site está bem configurado, pois sua estrutura
manutenção do site. Foi utilizado o método de tag viewport, medias queries, imagens
flexíveis e o framework Bootstrap que tornam um site responsivo. A Figura 50 mostra o site
19 em duas resoluções.
480px.
Na configuração em dispositivos de resolução 800 x 480 px, foi possível visualizar

que impossibilita a visualização de parte do site, cortando as informações como mostra o
96
retângulo na Figura 50B. A Figura 51 mostra o site na resolução 375 x 667 px pela ferramenta
Quirktools e pelo dispositivo iPhone(S).
Figura 51 - Site 19 visualizado na resolução 375 x 667 px. A) visualização pela ferramenta
QuirkTools. B) visualização do iPhone 6(S).
Verificou-se que a ferramenta Quirktools espera que o site responda às

especificações de resolução, sendo assim, ela corta o site. No entanto, foi observado que ao
acessar o site diretamente de um telefone celular, ele foi inteiramente visualizado, porém com
tamanho ilegível, necessitando aplicar zoom, como mostra a Figura 51B.
Outro aspecto que levou a considerar o site como mal configurado deu-se pelo
código de marcação, no qual o CSS, em grande parte, estava embutido junto com o HTML, o
que dificulta a manutenção, a alteração e a padronização do site e, portanto, não é considerada
uma boa prática de desenvolvimento web. A Figura 52 mostra o site 20 em duas resoluções.
97
480px.
O site 20 em sua análise não foi observado alterações significativas da resolução

1024 x 600 px para 800 x 480 px. A Figura 53 apresenta o site 20 visualizado na resolução
375 x 667 px.
O site 20 é simples, utiliza um método obsoleto de construção do layout por meio de

tabelas. Este tipo de desenvolvimento não atende a resolução de dispositivos móveis. Além
disso, o CSS está embutido junto com o HTML.
98
A Tabela 7 resume as pontuações obtidas tanto na análise técnica quanto na análise de

usabilidade. Tais resultados consistem na pontuação que foi calculada nas análises
apresentadas pelas Tabelas 5 e 6.
Tabela 7 – Pontuação análise Técnica e Usabilidade

Análise Técnica Análise Usabilidade
Site 1 5 6
Site 2 5 6
Site 3 10 7
Site 4 0 0
Site 5 10 8
Site 6 5 5
Site 7 5 5
Site 8 10 6
Site 9 10 6
Site 10 5 5
Site 11 0 0
Site 12 0 0
Site 13 10 6
Site 14 10 3
Site 15 10 6
Site 16 10 6
Site 17 10 5
Site 18 10 6
Site 19 0 0
Site 20 0 4
Verificou-se que na análise técnica, 50% dos sites foram considerados bem
configurados, 25% foram considerados mal configurados e 25% não continham configurações
web design responsivo.
Na análise de usabilidade, a pontuação de um site pode ser um valor inteiro no
intervalo [0, 8]. A Tabela 8 apresenta uma observação sobre a pontuação de usabilidade.
Tabela 8 – Avaliação da pontuação da análise de usabilidade.

Pontuação Porcentagem (%)
0 20
1 0
2 0
3 5
4 5
5 20
6 40
7 5
8 5
99
A fim de avaliar os resultados apresentados pela Tabela 8, considerou-se que sites que
obtiveram pontuações entre 0 e 3 como sites com “pouca ou nenhuma” usabilidade. Sites com
pontuações entre 4 e 6 foram considerados com “usabilidade moderada” e sites com
pontuações 7 ou 8 foram considerados como sendo sites com “boa usabilidade”. Logo, pode-
se inferir que 25% dos sites apresentaram pouca ou nenhuma usabilidade, 65% dos sites
apresentaram usabilidade moderada e 10% dos sites foram considerados com boa usabilidade.
Adicionalmente, foi realizada a análise de a correlação entre as análises técnicas e de
usabilidade. A Tabela 9 apresenta o resultado da análise de correlação entre as duas análises.
Tabela 9 – Resultado da correlação entre as análises técnicas e de usabilidade.

Análise Técnica Análise Usabilidade
Média 6,250 4,500
Variância 18,092 6,368
Desvio padrão 4,253 2,524
Correlação 0,797
O resultado de 0,797 indica forte correlação entre os critérios técnicos e os critérios de

usabilidade.
A variância menor na análise de usabilidade indica que mesmo que talvez as
configurações técnicas não estivessem adequadas os sites apresentaram pouca variação em
termos de usabilidade. Esse entendimento é reforçado pela observação de que 65% dos sites
apresentaram usabilidade moderada.
100
101
6 CONCLUSÕES
Neste trabalho estudou-se e buscou-se compreender como as técnicas do Web Design

Responsivo podem contribuir para aprimorar a usabilidade das aplicações web, notadamente,
em dispositivos móveis.
A seleção de critérios de usabilidade se mostrou apropriada, pois considerou estudos
apresentados na literatura científica e que consideraram as três grandes escolas. A seleção dos
critérios técnicos do Web Design Responsivo considerou os principais aspectos como layout
fluído e mídias flexíveis.
A definição de classificações e de escalas valores para as análises de ambos os
critérios se mostrou promissora como meio para consolidar um modelo de avaliação da
usabilidade por meio do emprego de técnicas do Web Design Responsivo.
O resultado de correlação obtido na análise de um conjunto de vinte sites foi de ρ =
0,797, apontando forte correlação entre os critérios técnicos e de usabilidade. Isso leva ao
entendimento de que o uso adequado das técnicas do Web Design Responsivo pode contribuir
para a melhoria da usabilidade das aplicações web que, consequentemente, contribui para a
satisfação do usuário.
Portanto, o estudo neste trabalho contribuiu para compreender melhor a relação de
como as práticas e técnicas de desenvolvimento web podem melhorar a usabilidade das
aplicações, considerando principalmente, o acesso dos usuários em dispositivos móveis.
Como trabalhos futuros, sugere-se ampliar o número de sites a serem analisados
considerando a participação de voluntários para analisá-los. Além disso, sugere-se utilizar
outras estatísticas para análise dos resultados.
102
103
REFERÊNCIAS
ANDRADE, Walmar. Separar informação e formatação, princípio básico dos web

standards. 2005. Disponível em: <http://fator.ws/separar-informacao-e-formatacao-
principio-basico-dos-web-standards/>. Acesso em: 26 maio 2015.
BARAKOVIć, Sabina; SKORIN-KAPOV, Lea. Multidimensional modelling of quality of
experience for mobile web browsing. Computers In Human Behavior, [s. l.], v. 50, p. 314-
332, set. 2015. Elsevier BV. DOI: 10.1016/j.chb.2015.03.071. Disponível em:
<http://api.elsevier.com/content/article/PII:S0747563215002721?httpAccept=text/xml>.
Acesso em: 27 out. 2015.
BATURAY, Meltem Huri; BIRTANE, Murat. Responsive Web Design: A New Type of
Design for web-based Instructional Content. Procedia - Social And Behavioral Sciences, [s.
l.], v. 106, p. 2275-2279, dez. 2013. Elsevier BV. DOI: 10.1016/j.sbspro.2013.12.259.
Disponível em:
<http://api.elsevier.com/content/article/PII:S1877042813048829?httpAccept=text/xml>.
Acesso em: 17 nov. 2015.
Cf. IBOPE – Disponível em: <http://www.ibope.com.br/pt-br/noticias/Paginas/Numero-de-
pessoas-com-acesso-a-internet-passa-de-100-milhoes.aspx>. Acesso em: 10 mar. 2015.
FERNANDEZ, A., ABRAHÃO, S, INSFRAN, E., A Web usability evaluation process for
model-driven Web development. Proceedings of the 23rd International Conference on
Advanced Information Systems Engineering (CAiSE’11), Springer, 2011, pp. 108–122.
FERREIRA, E.; EIS, D. HTML5 Curso W3C Escritório Brasil. Disponível em:
<http://pt.slideshare.net/ceperuchi/html5-por-w3c-brasil>. Acesso em: 13 abr. 2015.
GIMENES, I. M. S, HUZITA, E. H. M. Desenvolvimento baseado em componentes:
conceitos e técnicas. São Paulo: Ciência Moderna, 2005.
IKENO, S.; MARCHI, K. Análise da Nova Linguagem HTML5 para o Desenvolvimento
Web. 2013.
JIANG, Wei et. al. Responsive Web Design Mode and Application. In: IEEE WORKSHOP
ON ADVANCED RESEARCH AND TECHNOLOGY IN INDUSTRY
APPLICATIONS (WARTIA), 33914, 2014, Ottawa. Workshop. Ottawa: Ottawa Section
Ias Chapter, 2014. p.1303-1306.
K. J. P. Anbu and S. Kataria, "Access to library resources through portable devices: A pre-
design prototype for creating library websites,"2015 4th International Symposium on
Emerging Trends and Technologies in Libraries and Information Services, Noida, 2015, pp.
1-5.doi: 10.1109/ETTLIS.2015.7048162
LIMA, F. O. A Sociedade Digital: O Impacto da Tecnologia na Sociedade, na Cultura,
na Educação e nas Organizações. Rio de Janeiro: Qualitymark Ed., 2000.
MACHADO, Lúcia Cristina Vargas. A INFLUÊNCIA DA TECNOLOGIA E DA
INTERNET NO MARKETING. Terci - Temiminós Revista Científica, Ilha do
Governador, v.4, n.2, p.32-41, jul./dez. 2014.
MADEJA, Nils; SCHODER, Detlef. Designed for Success: Empirical Evidence on Features
of Corporate Web Pages. In: PROCEEDINGS OF THE 36TH HAWAII INTERNATIONAL
CONFERENCE ON SYSTEM SCIENCES (HICSS’03), 36., 2003, Big Island, Hi, Usa.
Proceddings. Big Island, Hi, Usa: Ieee, 2003. 10p. Disponível em:
104
<http://ieeexplore.ieee.org/xpls/abs_all.jsp?arnumber=1174429&tag=1>. Acesso em: 02 nov.

2015.
MAJID, Ezwan Shah Abdul et. al. Adaptation of Usability Principles in Responsive Web
Design Technique for E-Commerce Development. In: INTERNATIONAL CONFERENCE
ON ELETRICAL ENGINEERING AND INFORMATICS, 5, 2015, Bali, Indonésia.
Conference. Bali, Indonésia: Ieee, 2015. p.1-4.
MERKLE, E. R. e RICHARDSON, R. A. Digital Dating and Virtual Relating:
Conceptualizing Computer Mediated Romantic Relationships, Family Relations,
49:187-192, 2000.
MIKKONEN, Tommi; SYSTÄ, Kari; PAUTASSO, Cesare. Towards Liquid Web
Applications. Engineering The Web In The Big Data Era, [s. l.], p.134-143, 2015. Springer
Science + Business Media. DOI: 10.1007/978-3-319-19890-3_10.
MULLER, N. Framework, o que é e para que serve. Documento online:
https://www.oficinadanet.com.br/artigo/1294/framework_o_que_e_e_para_que_serve
Acessado em 16/09/2015.
NIELSEN, J, and TAHIR, M, Homepage Usability: 50 Websites Deconstructed., New Riders
Publishing, Indianapolis, ISBN 0-73571-102-X, 2001.
NIELSEN, J., Usability Engineering, SanDiego, CA.:Academic Press, 1993.
ROSSON, M. B, CARROLL, J. M., Usability Engineering: Scenerio-based Development of
Human-Computer Interaction. , San Francisco, CA:Morgan Kaufmass, 2002.
SILVA, Arthur de Almeida Pereira da. Design responsivo: Técnicas, frameworks e
ferramentas. 2014. 86 f. TCC (Graduação) - Curso de Bacharel em Sistemas de Informação,
Unirio, Rio de Janeiro, 2014a.
SILVA, Maurício Samy. JavaScript Guia do Programador. São Paulo: Novatec, 2010.
SILVA, Maurício Samy. JQuery A Biblioteca do Programador JavaScript. 3. ed. São
Paulo: Novatec, 2013.
SILVA, Maurício Samy. Web Design Responsivo. 1st. São Paulo: Novatec, 2014b.
TERRA. Mosaic: há 20 anos, era lançado o 1º navegador gráfico da web. 2013.
Disponível em: <http://tecnologia.terra.com.br/internet/mosaic-ha-20-anos-era-lancado-o-1-
navegador-grafico-da-web,6f3289d31f13e310VgnVCM3000009acceb0aRCRD.html>.
Acesso em: 27 maio 2015.
ZEMEL, Tárcio. Web Design Responsivo: Páginas adaptáveis para todos os dispositivos.
São Paulo: Casa do Código, 2012.
ZHANG, Ping et. al. Websites that Satisfy Users: A Theoretical Framework for Web User
Interface Design and Evaluation. In: PROCEEDINGS OF THE 32ND HAWAII
INTERNATIONAL CONFERENCE ON SYSTEM SCIENCES, 32., 1999, Maui, Hi,
Usa. Proceddings. Maui, Hi, Usa: Ieee, 1999. p.1-8.
ZORRILLA, Mikel et. al. A Web-based distributed architecture for multi-device adaptation
in media applications. Pers Ubiquit Comput, [s. l.], v.19, n.5-6, p.803-820, 21 jun. 2015.
Springer Science + Business Media. DOI: 10.1007/s00779-015-0864-x.

Análise Web Design Responsivo Usabilidade Apps Móveis

Enviado por

Dados do documento

Descrição original:

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Análise Web Design Responsivo Usabilidade Apps Móveis

Enviado por

Direitos autorais:

Formatos disponíveis

INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA DE SÃO PAULO

CÂMPUS SÃO JOÃO DA VISTA

JÉSSICA CRISTINA NUNES

ANÁLISE DA CONTRIBUIÇÃO DO WEB DESIGN RESPONSIVO

SÃO JOÃO DA BOA VISTA

ANÁLISE DA CONTRIBUIÇÃO DO WEB DESIGN RESPONSIVO

Trabalho de Conclusão de Curso apresentado

Área de Concentração: Programação Web

Orientador: Prof. Msc. Gabriel Marcelino

SÃO JOÃO DA BOA VISTA

Catalogação na Fonte preparada pela Biblioteca Comunitária “Wolgran Junqueira Ferreira”

Nunes, Jéssica Cristina.

Trabalho de Conclusão de Curso, IFSP, 2017.

1. Web responsivo. 2. Satisfação do usuário. 3.

I. Caracterização de Web responsividade e da

Palavras-chave: Web Design Responsivo. Usabilidade. Dispositivos móveis. Programação

NUNES, Jéssica C. Responsive web design analysis of contribution to the usability of

Keywords: Responsive Web Design. Usability. Mobile devices. Web Programming.

Figura 1 - Navegador Lynx para modo texto .......................................................................... 33

Figura 2 - Primeiro navegador gráfico .................................................................................... 34

Figura 3 – Tamanho da resolução de acordo com cada dispositivo........................................43

Figura 6 – Representação de como se divide os grids ............................................................. 47

Figura 7 – Estrutura de pastas do Bootstrap versão 3.3 .......................................................... 60

Figura 8 – Navegadores e Sistemas operacionais suportados pelo Bootstrap.3.3 ................... 61

Figura 9 – Tela inicial do MobileOK Checker ........................................................................ 63

Figura 10 – Tela Screenfly do Quirk Tools ............................................................................. 64

Figura 11 – Tela demonstrativa do uso do Quirk Tools .......................................................... 64

Figura 12 – Fluxograma das etapas do processo de avaliação ................................................ 67

Figura 13 – Diagrama do processo de avaliação ..................................................................... 69

Figura 14 – Site 1 visualizado em diferentes resoluções. A) resolução1024 x 600px. B)

Figura 15 – Site 1 visualizado na resolução 375 x 667 px ...................................................... 76

Figura 16 – Site 2 visualizado em diferentes resoluções. A) resolução 1024 x 600 px. B)

Figura 17 – Site 2 visualizado na resolução 375 x 667 px ...................................................... 77

Figura 18 – Site 3 visualizado em diferentes resoluções. A) resolução 1024 x 600px. B)

Figura 19 – Site 3 visualizado na resolução 375 x 667 px ...................................................... 78

Figura 20 – Site 4 visualizado em diferentes resoluções. A) resolução 1024 x 600px. B)

Figura 22 – Site 5 visualizado em diferentes resoluções. A) resolução 1024 x 600px. B)

Figura 23 – Site 5 visualizado na resolução 375 x 667 px ...................................................... 81

Figura 24 – Site 6 visualizado em duas resoluções. A) resolução 1024 x 600px. B) resolução

Figura 25 – Site 6 visualizado na resolução 375 x 667 px ...................................................... 82

Figura 26 – Site 7 visualizado em diferentes resoluções. A) resolução 1903 x 984px. B)

Figura 27 – Site 7 visualizado em diferentes resoluções. A) resolução 800 x 480 px. B)

Figura 29 – Site 8 visualizado na resolução 375 x 667 px ...................................................... 84

Figura 30 – Site 9 visualizado em diferentes resoluções. A) resolução 1024 x 600px. B)

Figura 31 – Site 9 visualizado na resolução 375 x 667 px ...................................................... 85

Figura 32 – Site 10 visualizado na resolução 1024 x 600px ................................................... 85

Figura 33 – Site 10 visualizado em diferentes resoluções. A) resolução 800 x 480 px. B)

Figura 34 – Site 11 visualizado em duas resoluções. A) resolução 1024 x 600px. B) resolução

Figura 35 – Site 11 visualizado na resolução 375 x 667 px. A) visualização na ferramenta

Figura 36 – Site 12 visualizado em duas resoluções. A) resolução 1024 x 600px. B) resolução

Figura 38 – Site 13 visualizado em duas resoluções. A) resolução 1024 x 600px. B) resolução

Figura 39 – Site 13 visualizado na resolução 375 x 667 px .................................................... 89

Figura 41 – Site 14 visualizado na resolução 375 x 667 px .................................................... 90

Figura 42 – Site 15 visualizado em duas resoluções. A) resolução 1024 x 600px. B) resolução

Figura 43 – Site 15 visualizado na resolução 375 x 667 px .................................................... 91

Figura 44 – Site 16 visualizado em duas resoluções. A) resolução 1024 x 600px. B) resolução

Figura 45 – Site 16 visualizado na resolução 375 x 667 px .................................................... 92

Figura 46 – Site 17 visualizado em duas resoluções. A) resolução 1024 x 600px. B) resolução

Figura 47 – Site 17 visualizado na resolução 375 x 667 px .................................................... 93

Figura 48 – Site 18 visualizado em duas resoluções. A) resolução 1024 x 600px. B) resolução

Figura 49 – Site 18 visualizado na resolução 375 x 667 px .................................................... 95

Figura 50 – Site 19 visualizado em duas resoluções. A) resolução 1024 x 600px. B) resolução