Padrões de Design Mobile

usabilidade e padrões de design mobile

Renato Bongiorno


Atividades e conceitos da aula:

- Layout fixo

- Layout fluído

- Layout elástico

- Layout híbrido

- Responsive Web Design


"A tecnologia de desenvolvimento mobile se tornou um estilo de vida, misterioso e confuso e que envolve uma desconcertante velocidade de

crescimento."Lyza Danger Gardner (@lyzadanger)

Jason Grigsby (@grigs)


Responsive web design



Um site com design bonito desenvolvido para mobile não corresponde a um site

adaptável para mobile.

A beleza muitas vezes se torna superficial...



Conceito criado por Ethan Marcotte, Responsive Web Design (RWD) representa uma série de técnicas de programação

de interface de sites em CSS que tem o objetivo de adaptar layouts de acordo com a forma de utilização do dispositivo

móvel para navegação na Internet, tornando o conteúdo acessível de forma fácil e permitindo acessibilidade ao

conteúdo do web site.



A utilização do Responsive Web Design é uma das formas mais rápidas e simples para adaptar websites às

especificações nos dispositivos móveis, possibilitando a reutilização do design do website, caso este já tenha uma

versão para computadores pessoais.

Caracteriza-se pela combinação de CSS3 media queries, fluid grid layouts e fluid images.



Visa atender a um dos objetivos do W3C "Uma marcação para todos os tipos de mídia"

Sua tentativa para solucionar esse problema iniciou com a revisão do CSS 2.0 de 1998:

As CSS 2.0 suportam folhas de estilo específicas para diferentes mídias, possibilitando aos autores criar apresentação de seus

documentos para servi-los de maneira diferenciada para navegadores visuais, dispositivos aurais, impressoras, dispositivos

braille, móveis, etc.



Problema: Os navavegadores implementaram suporte aceitável somente para leitura e aplicaçãopara mídia - print.

Solução - Aplicação de Técnicas para o desenvolvimento de Responsive Web Design



• CSS Media Queries – Permite a avaliação de certos aspectos do navegador e do ambiente de navegação do usuário para determinar as regras de estilo em CSS que deverão ser aplicadas. Utiliza-se de expressões lógicas (true or false) para representação das regras aplicadas.

• Fluid-grid layouts – Utiliza proporções relativas e absolutas para fornecer o layout dos elementos de uma página, utilizando layout baseado em porcentagem para adequação;

• Fluid images and media – Permite a utilização dos elementos de um web site dentro dos limites das matrizes do navegador.



CSS Media Queries

O funcionamento do conceito de CSS 3.0 Media Queries representa expressões lógicas que identificam as características do navegador do usuário, caso as regras determinadas tenham retorno verdadeiro, a

aplicação das regras para Media Query são aplicadas adaptando o layout para o formado do dispositivo do usuário.



CSS Media Queries

Para entender media queries é ideal relembrar formas de vincular folhas de estilo em CSS 2.0 para diferentes tipos de mídia:

<link rel="stylesheet" type="text/css" media="print, handheld" href="foo.css">

@media print { body { font-size: 10pt } }

@media screen { body { font-size: 13px }

} @media screen, print {

body { line-height: 1.2 } }



CSS Media Queries

Mais sobre media types - http://www.w3.org/TR/CSS2/media.html

http://www.w3.org/TR/CSS2/media.html



CSS Media Queries

Para realizar a importação de CSS 3.0 Media Querie continuamos com a sintaxe de CSS 2.0, porém com nova sintaxe para definir a mídia:

@media screen and (min-width:480px) { /* CSS Rules */ }

<link rel="stylesheet" type="text/css" href="my.css" media="screen and (min-width:480px)" />



CSS Media Queries

Operadores media query:

and - Concatenação - retorna true se as condições à esquerda e à direita forem verdadeiras

only - Esconde folhas de estilo em navegadores que não suportam media query

not - negação - retorna true se a funcionalidade não existir



Otimização de layout para desenvolvimento de layouts “mobile-friendly”

O desenvolvimento de layouts já existentes em versões para computadores pessoais adaptados para dispositivos móveis

devem seguir algumas recomendações, sendo estas:



Otimização de layout para desenvolvimento de layouts “mobile-friendly”

• Analise da estrutura do layout existente;

• Identificação das áreas do layout a serem adaptadas para “mobile-friendly";

• Desenvolvimento do CSS adaptável;

• Aplicação de regras lógicas de Media Queries para adaptação de um mesmo layout CSS para desktop e mobile.



Adequação do layout a ser adaptado para dispositivos mobiles

• Identifique o tamanho ideal para resolução mínima desejável para navegação do web site. Segundo O´Reilly 320 pixel é a resolução mínima padrão para dispositivos mobiles.

• Identificar as regras de formatação de folha de estilo padrões para a utilização em ambas as versões, reduzindo a necessidade de requisições de regras repetidas para ambas versões;

• Inserir a meta informação “viewport” no cabeçalho HTML, permitindo que os navegadores renderizem o conteúdo aplicando a ampliação máxima definida;



Funcionalidades de mídia

As diferenças entre funcionalidades de mídia e propriedades CSS são:

- Propriedades CSS são usadas em declarações CSS que fornecem informações sobre como apresentar o documento.

- Funcionalidades de mídia são usadas em expressões destinadas a descrever requisitos do dispositivo de saída do documento



Funcionalidades de mídia

As diferenças entre funcionalidades de mídia e propriedades CSS são:

- Propriedades CSS requerem a declaração de um valor

- Funcionalidades de mídia podem ser usadas com ou sem declaração de um valor, exceto com os prefixos min- e max-.



Fixed Layout

Fluid Layout

Elastic Layout

Hibrid Layout



Fixed Layout

O desenvolvimento de websites utilizando o conceito de layout fixo caracteriza-se pela utilização de unidades de

medidas fixas (ex.: pixels) para estruturação das áreas de conteúdo um web site.



Fixed Layout - Desvantagens

O principal problema apresentado por esta técnica deve-se a não uniformidade das resoluções dos computadores ao redor do mundo, fazendo com que um mesmo layout definido em uma medida fixa tenha perda na visualização

do conteúdo em diferentes resoluções.



Fixed Layout - Desvantagens

Ao visualizar um site em resoluções com medidas maiores das definidas, áreas vazias e sem conteúdo irão aparecer.

Layouts com largura fixa funcionam bem com o tamanho padrão de texto do navegador, mas ao aplicar-se zoom ou aumentar o

tamanho da fonte para que os espaços disponíveis aos textos se tornem inadequados para leitura.



Fixed Layout - Vantagens

Fornecem ao desenvolvedor mais controle sobre o layout e posicionamento dos objetos.



Fluid LayoutO desenvolvimento de websites utilizando o conceito de layout

fluído caracteriza-se pela utilização de porcentagens para estruturação das áreas de conteúdo um web site.



Fluid Layout - Vantagens

A principal vantagem na utilização de layout fluído está na possibilidade de adaptar o layout de um web site a qualquer tipo de dispositivo, sem que áreas fiquem fora do campo de visão do

visitante.



Fluid Layout - Desvantagens

Em resoluções muito pequenas, a leitura do texto pode ser comprometida, por tornar-se extremamente estreitas.

Inversamente, se a resolução for muito grande, as linhas podem tornar-se longas demais para uma boa legibilidade.



Elastic Layout

Layouts elásticos funcionam configurando a largura dos elementos em relação ao tamanho da fonte em vez de em relação

à largura dos navegadores.



Elastic Layout - Vantagens

Configurando a largura em ems - quando o tamanho da fonte aumentar, o layout todo será redimensionado.

Permite manter o comprimento das linhas de acordo com um tamanho legível e é extremamente útil para pessoas com visão

reduzida.



Elastic Layout - Desvantagens

Assim como layouts fixos, podem não utilizar toda área útil adequadamente.

Como todo layout aumenta quando o texto aumenta, podem surgir barras de rolagens indesejadas horizontais.



Elastic Layout + Fluid Layout

Layouts híbridos podem ser uma solução adequada para seus layouts:

- Larguras em ems- Larguras máximas em %



Atividade 01 - Desenvolver um layout nas 04 possibilidades de layout.



Atividade 02 - A partir do layout desenvolvido, aplicar a configuração através

de media query da seguinte forma:

● De 760px a 1000px - 03 colunas● De 400px a 760px - 02 colunas● Abaixo de 400px - 01 coluna


meta viewport

Utilizada para "servir" o layout nos dispositivos móveis e afeta diretamente a forma como o

usuário utiliza seu website.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximun-scale=1" />


meta viewport


THE FLUID FORMULA

Como converter corretamente as medidas de um layout fixo em fluido?

The fluid formula:

target (tamanho elemento em px) = result*100 (%) content (tamanho total do elemento pai)


THE FLUID FORMULA


THE FLUID FORMULA

● Top = (960px / 960px) * 100 = 100%

● Left = (240px/960px) * 100 = 25%

● Right = (240px/960px) * 100 = 25%

● Center = (460px / 960px) * 100 = 47.91%


media queriesrecomendation w3c 2012

http://www.w3.org/TR/css3-mediaqueries/




exercicio media queries







width = 1280px width = 640px width = 320px