← Voltar ao Portal da Disciplina
Conheça meu trabalho como perito
← Voltar ao Portal da Disciplina
Conheça meu trabalho como peritoUsabilidade, desenvolvimento web, mobile e jogos
Data: 25 de Março de 2026
Cria-se para a abundância de espaço e "espreme-se" o conteúdo para o celular.
(Graceful Degradation)Cria-se para o essencial e "expande-se" conforme a tela cresce.
(Progressive Advancement)"Projetar para dispositivos móveis primeiro força você a focar no que é mais importante, eliminando o ruído visual e priorizando a tarefa do usuário."
— Alves (2015)
Obriga o designer e o desenvolvedor a priorizar o conteúdo real sobre a decoração.
Usuários móveis costumam estar em movimento, exigindo respostas rápidas e navegação direta.
Desde 2018, o Google utiliza o Mobile-First Indexing para ranquear sites.
Insights de Aula: Não é sobre diminuir o site, é sobre escalar a experiência.
"Degradação Graciosa" ou O Caminho de Cima para Baixo
display: none."Neste modelo, o design para navegadores antigos ou dispositivos menores é uma consideração secundária, frequentemente resultando em uma experiência 'quebrada' ou mal adaptada."
— Adaptação de Nielsen (2012)
"Avanço Progressivo" ou A Base do Mobile First
Conteúdo e funções básicas para qualquer dispositivo (Mobile).
Adição de estilos complexos e interações para telas maiores.
Alta performance, efeitos visuais avançados e multicolunas.
💡 Regra de Ouro: Projete para a menor tela, construa para a maior.
Substituímos valores fixos (px) por valores relativos (%, vw, vh).
O layout deixa de ser uma "caixa rígida" e passa a ser uma proporção.
target / context = result
Ex: 300px / 960px = 31.25%
"Um layout responsivo não é apenas um layout 'elástico', mas um sistema que utiliza grades fluidas para manter o equilíbrio visual em qualquer resolução."
— Marcotte (2011)
Os Sentinelas do Layout
Permitem aplicar estilos CSS baseados nas características do dispositivo, como largura, altura e orientação.
min-width.💡 Conceito A3: Flexbox e Grid são os motores; Media Queries são os volantes.
Sem esta tag, o navegador móvel "finge" que é um desktop (geralmente 980px) e aplica um zoom out, tornando o texto ilegível.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Ajusta a largura da página para a largura da tela do dispositivo.
Define o nível de zoom inicial quando a página é carregada.
O desafio das telas Retina e HiDPI
Os pontos físicos de luz na tela (Ex: 1080p, 4K).
A unidade de medida que usamos no código. 1px CSS pode representar 2x ou 3x pixels físicos em telas densas.
"Aplicações móveis exigem que o desenvolvedor compreenda a abstração entre a resolução declarada e a resolução real do painel."
— Lee, Schneider & Schell (2005)🚀 Dica para o Lab: Use SVGs! Por serem vetoriais, ignoram a densidade de pixels e mantêm a nitidez.
Uma imagem com largura fixa (ex: 800px) quebrará o layout no mobile. A solução é torná-la consciente do seu container.
img, video, canvas {max-width: 100%;height: auto;}
Por que max-width e não width? max-width permite que a imagem diminua, mas impede que ela estique além de seu tamanho original (preservando a qualidade).
Matemática vs. Pixels
"Ao contrário das imagens bitmap (JPEG/PNG), os vetores são definidos por caminhos matemáticos, garantindo que a usabilidade visual não degrade em dispositivos de alta densidade."
— Adaptado de Lee (2005)
💡 Exercício Prático: Identifique no seu código onde um ícone PNG pode ser substituído por um SVG para otimizar o carregamento móvel.
20:30 – 20:50
Aproveite para o Networking.
Grandes ideias e parcerias para o Projeto A3 costumam surgir no café!
min-width para expandir o layout para Tablet e Desktop."A usabilidade motora no laboratório é testada pela precisão dos alvos de toque (mínimo 44px)." — Ref. Aula 25/03
max-width: 100%"O design responsivo não é sobre o que o usuário vê, mas sobre como ele interage com o conteúdo em diferentes contextos físicos."
— Marcotte (2011)
Com o aumento das telas, o topo do dispositivo tornou-se a "Zona de Perigo".
"Projetar interfaces que ignoram a fisiologia da mão humana resulta em fadiga muscular e aumento na taxa de erros de navegação."
— Alves (2015)
A Regra dos 44px
O dedo humano não tem a precisão de um cursor de mouse. Alvos pequenos causam o fenômeno do "Fat Finger" (toque acidental).
Insight Técnico: Use padding para aumentar a área de toque sem alterar o tamanho visual do ícone.
flex-direction via CSS é a base da "Progressive Advancement".
"Alvos pequenos aumentam a taxa de erro. Seguir padrões é essencial para a acessibilidade e usabilidade motora."
— Gabarito Aula 25/03
Dúvidas?
A hora de errar e perguntar é agora, no ambiente de laboratório controlado.
O Próximo Milestone
"A entrega final deve demonstrar a integração entre frontend e serviços de dados, respeitando normas de acessibilidade."
— Plano de Ensino (Sposito, 2026)
Seu feedback ajuda a refinar a experiência: Mobile First, Performance e Usabilidade Motora.
Inversão da lógica: projetar para o essencial e expandir progressivamente.
Ajuste de escala e densidade de pixels para nitidez em telas Retina/HiDPI.
Uso de Grades Fluidas (%) e Media Queries para layouts multidirecionais.
Zona do polegar e alvos de toque (44-48px) para usabilidade motora.
Acesse o guia completo com exercícios de fixação e gabarito comentado:
📥 Baixar Aula 25/03 (PDF)"A prática leva à consistência. Revise o material para o Projeto A3." — Dr. Lincoln Sposito