Embed Size (px)
Citation preview
Buscar
home
home
o bbburp!
o bbburp!
artigos
artigos
categorias
categorias
dê um alô!
dê um alô!
O Cenário do Web
O Cenário do Web
Design Responsivo
Design Responsivo
Site responsivo é muito mais que media queries,
Site responsivo é muito mais que media queries,
breakpoints e redimensionamento de imagens. Na
breakpoints e redimensionamento de imagens. Na
Smashing Magazine, Stéphanie Walter mostra o
Smashing Magazine, Stéphanie Walter mostra o
que é, o que será possível, e o que precisa ser
que é, o que será possível, e o que precisa ser
melhorado no RWD.
melhorado no RWD.
DESENVOLVIMENTO
DESENVOLVIMENTO
DESIGN
DESIGN
EXPERIÊNCIA DO USUÁRIO
EXPERIÊNCIA DO USUÁRIO
MOBILE
MOBILE
02
02
jul
jul
Publicado em 02 Julho 2013
Publicado em 02 Julho 2013
O Web design responsivo está por aí há alguns anos, e foi destaque
O Web design responsivo está por aí há alguns anos, e foi destaque
em 2012. Muitas estrelas da web, como Brad Frost e Luke Wroblewski,
em 2012. Muitas estrelas da web, como Brad Frost e Luke Wroblewski,
possuem vasta experiência neste tema e têm nos ajudado a fazer
possuem vasta experiência neste tema e têm nos ajudado a fazer
grandes melhorias.
grandes melhorias.
Mesmo assim, ainda há muito a ser feito
Mesmo assim, ainda há muito a ser feito
.
.
Neste artigo, vamos ver o que já é possível fazer hoje, o que será
Neste artigo, vamos ver o que já é possível fazer hoje, o que será
possível no futuro - usando propriedades ainda não padronizadas
possível no futuro - usando propriedades ainda não padronizadas
(como CSS nível 4 e API's do HTML5) - e o que ainda precisa ser
(como CSS nível 4 e API's do HTML5) - e o que ainda precisa ser
melhorado. Este não é um artigo tão completo, por isso não
melhorado. Este não é um artigo tão completo, por isso não
entraremos a fundo em cada técnica, entretanto, você terá links e
entraremos a fundo em cada técnica, entretanto, você terá links e
referências para explorar por conta própria.
referências para explorar por conta própria.
O CENÁRIO DAS IMAGENS NO WEB DESIGN RESPONSIVO
O CENÁRIO DAS IMAGENS NO WEB DESIGN RESPONSIVO
Há um aspecto melhor para começar a falar no web design responsivo
Há um aspecto melhor para começar a falar no web design responsivo
que não seja imagens? Este até agora tem sido o tópico principal. E
que não seja imagens? Este até agora tem sido o tópico principal. E
fica cada vez mais importante com a chegada das telas de alta
fica cada vez mais importante com a chegada das telas de alta
densidade. E quando digo alta densidade, quero dizer telas com uma
densidade. E quando digo alta densidade, quero dizer telas com uma
proporção de pixel maior que 2; esses dispositivos são chamados pela
proporção de pixel maior que 2; esses dispositivos são chamados pela
Apple de tela retina, e pelo Google de XHDPI. No web design
Apple de tela retina, e pelo Google de XHDPI. No web design
responsivo, as imagens vem relacionadas a dois grandes desafios:
responsivo, as imagens vem relacionadas a dois grandes desafios:
cadastre seu e-mail... cadastre
Newsletters
Newsletters
Acompanhe o bbburp! e receba
Acompanhe o bbburp! e receba
notificações dos novos posts por
notificações dos novos posts por
email!
email!
@bbburp
@bbburp
"Sendo Criativo com Usabilidade". Artigo
"Sendo Criativo com Usabilidade". Artigo
da @
da @
DesignerDepot
DesignerDepot
traduzido no
traduzido no
@
@
bbburp
bbburp
http://t.co/TnT9D9YsQP
http://t.co/TnT9D9YsQP
3 days ago
3 days ago
Bbburp
Curtir
275 pessoas curtiram Bbburp.
6
6
17
17
6
6
17
17
SeguirSeguir
tamanho e desempenho.
tamanho e desempenho.
A maioria dos designers buscam a perfeição no pixel, porém imagens
A maioria dos designers buscam a perfeição no pixel, porém imagens
de tamanho "normal" em dispositivos de alta densidade aparecem
de tamanho "normal" em dispositivos de alta densidade aparecem
pixeladas e borradas. Servir imagens com o dobro do tamanho a esses
pixeladas e borradas. Servir imagens com o dobro do tamanho a esses
dispositivos parece ser tentador não é mesmo? No entanto, isso pode
dispositivos parece ser tentador não é mesmo? No entanto, isso pode
criar um problema de performance, pois imagens com o dobro do
criar um problema de performance, pois imagens com o dobro do
tamanho levam mais tempo para carregar, e usuários de dispositivos
tamanho levam mais tempo para carregar, e usuários de dispositivos
com alta densidade de pixels nem sempre tem a largura de banda
com alta densidade de pixels nem sempre tem a largura de banda
necessária para fazer o download dessas imagens. Além disso,
necessária para fazer o download dessas imagens. Além disso,
dependendo do país em que o usuário vive, esta largura de banda
dependendo do país em que o usuário vive, esta largura de banda
pode ser bem cara.
pode ser bem cara.
O segundo problema afeta dispositivos menores: Por que um
O segundo problema afeta dispositivos menores: Por que um
dispositivo teria que fazer o download de uma imagem de 700 pixels
dispositivo teria que fazer o download de uma imagem de 700 pixels
quando ele só necessita de uma de 300? Teríamos uma maneira de
quando ele só necessita de uma de 300? Teríamos uma maneira de
"cropar" essas imagens para que usuários de dispositivos menores
"cropar" essas imagens para que usuários de dispositivos menores
possam focar no que realmente importa a eles?
possam focar no que realmente importa a eles?
Duas soluções de marcação: O elemento <picture> e o atributo
Duas soluções de marcação: O elemento <picture> e o atributo
srcset
srcset
O primeiro passo para resolver o desafio de imagens responsivas é
O primeiro passo para resolver o desafio de imagens responsivas é
mudar a marcação das imagens embutidas em uma página HTML.
mudar a marcação das imagens embutidas em uma página HTML.
O
O
"Responsive Images Community Group"
"Responsive Images Community Group"
apoia a proposta de um
apoia a proposta de um
elemento novo e mais flexível, o elemento
elemento novo e mais flexível, o elemento
picture
picture
. O conceito é usar
. O conceito é usar
as já tão conhecidas media queries para
as já tão conhecidas media queries para
servir imagens diferentes a
servir imagens diferentes a
diferentes dispositivos
diferentes dispositivos
. Assim, dispositivos menores receberiam
. Assim, dispositivos menores receberiam
imagens menores. Funciona um pouco como a marcação para vídeo,
imagens menores. Funciona um pouco como a marcação para vídeo,
mas com imagens diferentes sendo refenciadas no elemento de
mas com imagens diferentes sendo refenciadas no elemento de
origem.
origem.
O código na especificação proposta fica da seguinte forma:
O código na especificação proposta fica da seguinte forma:
11. .
<picture
<picture
width
width
=
=
"500"
"500"
height
height
=
=
"500"
"500"
>
>
22. .
<
<
source
source
media
media
=
=
"(min-width: 45em)"
"(min-width: 45em)"
src
src
=
=
"large.jpg"
"large.jpg"
>
>
33. .
<
<
source
source
media
media
=
=
"(min-width: 18em)"
"(min-width: 18em)"
src
src
=
=
"med.jpg"
"med.jpg"
>
>
44. .
<
<
source
source
src
src
=
=
"small.jpg"
"small.jpg"
>
>
55. .
<
<
img
img
src
src
=
=
"small.jpg"
"small.jpg"
alt
alt
=
=
""
""
>
>
66. .
<
<
p
p
>
>
Accessible text
Accessible text
<
<
/
/
p
p
>
>
77. .
<
<
/
/
picture>
picture>
Se oferecer fontes diferentes para imagens é possível, poderíamos
Se oferecer fontes diferentes para imagens é possível, poderíamos
também imaginar o fornecimento de imagens com
também imaginar o fornecimento de imagens com
recortes diferentes
recortes diferentes
e focar naquilo que realmente importa aos dispositivos menores. O
e focar naquilo que realmente importa aos dispositivos menores. O
tópico
tópico
"Art Direction"
"Art Direction"
da W3C mostra um belo exemplo do que
da W3C mostra um belo exemplo do que
poderia ser feito.
poderia ser feito.
(Imagem:
(Imagem:
Egor Pasko
Egor Pasko
)
)
A solução vem sendo discutida pelo
A solução vem sendo discutida pelo
W3C Responsive Images
W3C Responsive Images
Community Group
Community Group
mas, até onde sabemos, ainda não é utilizável por
mas, até onde sabemos, ainda não é utilizável por
RT @
RT @
tableless
tableless
: Padrões Complexos de
: Padrões Complexos de
Navegação no Design Responsivo
Navegação no Design Responsivo
http://t.co/wWR8MmRClw
http://t.co/wWR8MmRClw
Uma
Uma
tradução do @
tradução do @
bbburp
bbburp
para o Tableless.
para o Tableless.
4 days ago
4 days ago
RT @
RT @
tableless
tableless
: Survey do Tableless - A
: Survey do Tableless - A
pesquisa dos desenvolvedores web para
pesquisa dos desenvolvedores web para
conhecermos melhor nosso mercado!
conhecermos melhor nosso mercado!
DIVULGUE!
DIVULGUE!
http://t.co/ZfN2aI…
http://t.co/ZfN2aI…
4 days ago
4 days ago
+ Categorias
+ Categorias
escolha uma categoria...
Nós adoramos!
Nós adoramos!
A List Apart
A List Apart
Behance
Behance
Brad Frost
Brad Frost
Dribbble
Dribbble
Mailchimp
Mailchimp
Smashing Magazine
Smashing Magazine
Tableless
Tableless
Tuts+Hub
Tuts+Hub
Web Designer Depot
Web Designer Depot
nenhum browser. Um polyfill chamado
nenhum browser. Um polyfill chamado
Picturefill
Picturefill
está disponível, e faz
está disponível, e faz
praticamente a mesma coisa. Utiliza uma div e um atributo na sintaxe
praticamente a mesma coisa. Utiliza uma div e um atributo na sintaxe
por questões de segurança.
por questões de segurança.
A segunda proposta para a marcação de imagens responsivas foi feita
A segunda proposta para a marcação de imagens responsivas foi feita
pela Apple para a W3C e é chamada de "atributo srcset"; Ela é
pela Apple para a W3C e é chamada de "atributo srcset"; Ela é
equivalente ao image-set() (propriedade CSS nível 4). A proposta deste
equivalente ao image-set() (propriedade CSS nível 4). A proposta deste
atributo é forçar os navegadores a selecionar um recurso apropriado
atributo é forçar os navegadores a selecionar um recurso apropriado
do set, ao invés de baixar o conjunto.
do set, ao invés de baixar o conjunto.
A sintaxe HTML para esta proposta se baseia na própria tag
A sintaxe HTML para esta proposta se baseia na própria tag
img
img
, e o
, e o
exemplo na especificação fica desta forma:
exemplo na especificação fica desta forma:
11. .
<
<
img
img
alt
alt
=
=
"The Breakfast Combo"
"The Breakfast Combo"
22. .
src
src
=
=
"banner.jpeg"
"banner.jpeg"
33. .
srcset
srcset
=
=
"banner-HD.jpeg 2x,
"banner-HD.jpeg 2x,
44. .
banner-phone.jpeg 100w,
banner-phone.jpeg 100w,
55. .
banner-phone-HD.jpeg 100w 2x"
banner-phone-HD.jpeg 100w 2x"
>
>
Como você pode ver a
Como você pode ver a
sintaxe não é não é tão intuitiva
sintaxe não é não é tão intuitiva
. Os valores da
. Os valores da
tag consistem em uma string separada por vírgulas. Os valores do
tag consistem em uma string separada por vírgulas. Os valores do
atributo são os nomes ou URL's de várias imagens, a densidade de
atributo são os nomes ou URL's de várias imagens, a densidade de
pixels do dispositivo e o tamanho máximo da viewport a que se
pixels do dispositivo e o tamanho máximo da viewport a que se
destina.
destina.
Numa linguagem clara, o que o trecho acima diz é:
Numa linguagem clara, o que o trecho acima diz é:
A imagem padrão é
A imagem padrão é
banner.jpeg
banner.jpeg
.
.
O dispositivo que tiver um pixel ratio maior do que 2 deve usar
O dispositivo que tiver um pixel ratio maior do que 2 deve usar
o
o
banner-HD.jpeg
banner-HD.jpeg
.
.
Dispositivos com um tamanho máximo da viewport de
Dispositivos com um tamanho máximo da viewport de
100w
100w
deve utilizar o
deve utilizar o
banner-phone.jpeg
banner-phone.jpeg
.
.
Dispositivos com um tamanho máximo da viewport de
Dispositivos com um tamanho máximo da viewport de
100w
100w
e
e
um pixel ratio maior que 2 devem utilizar o
um pixel ratio maior que 2 devem utilizar o
banner-phone-
banner-phone-
HD.jpeg
HD.jpeg
.
.
Caso o atributo
Caso o atributo
srcset
srcset
não seja suportado, a primeira fonte é a imagem
não seja suportado, a primeira fonte é a imagem
padrão. O sufixo
padrão. O sufixo
2x
2x
para o
para o
banner-HD.jpeg
banner-HD.jpeg
significa que esta imagem
significa que esta imagem
em particular deveria ser usada para dispositivos com um pixel ratio
em particular deveria ser usada para dispositivos com um pixel ratio
maior que 2, e o
maior que 2, e o
100w
100w
no
no
banner-phone.jpeg
banner-phone.jpeg
representa o tamanho
representa o tamanho
mínimo da viewport em que esta imagem deve ser utilizada.
mínimo da viewport em que esta imagem deve ser utilizada.
Devido a
Devido a
sua complexidade
sua complexidade
, a sintaxe do atributo srcset ainda não foi
, a sintaxe do atributo srcset ainda não foi
implementada nos navegadores.
implementada nos navegadores.
A sintaxe da propriedade CSS
A sintaxe da propriedade CSS
image-set()
image-set()
funciona praticamente da
funciona praticamente da
mesma forma e permite que você carregue uma determinada imagem
mesma forma e permite que você carregue uma determinada imagem
de background tendo como base a resolução da tela:
de background tendo como base a resolução da tela:
1.
background-image
background-image
:
:
image-set
image-set
(
(
"foo.png"
"foo.png"
1x
1x
,
,
2.
"foo-2x.png"
"foo-2x.png"
2x
2x
,
,
3.
"foo-print.png"
"foo-print.png"
600dpi
600dpi
)
)
;
;
Esta proposta ainda esta em fase de projeto na W3C, e por enquanto
Esta proposta ainda esta em fase de projeto na W3C, e por enquanto
funciona no Safari (6+) e no Chrome (21+).
funciona no Safari (6+) e no Chrome (21+).
Formatos de Imagem, Compressão e SVG: A mudança de como
Formatos de Imagem, Compressão e SVG: A mudança de como
trabalhamos com imagens na web.
trabalhamos com imagens na web.
Como podem ver, as tentativas em encontrar um novo formato de
Como podem ver, as tentativas em encontrar um novo formato de
marcação para imagens ainda são altamente experiementais.Isto por si
marcação para imagens ainda são altamente experiementais.Isto por si
só levantou uma questão sobre formatos de imagens. Podemos
só levantou uma questão sobre formatos de imagens. Podemos
conceber uma solução responsiva para mudar a forma como lidamos
conceber uma solução responsiva para mudar a forma como lidamos
com eles?
com eles?
O primeiro passo seria buscar formatos alternativos de imagens que
O primeiro passo seria buscar formatos alternativos de imagens que
tenham uma melhor taxa de compressão. O Google, por exemplo,
tenham uma melhor taxa de compressão. O Google, por exemplo,
desenvolveu um
desenvolveu um
novo formato de imagem
novo formato de imagem
chamado
chamado
WebP
WebP
, o qual é
, o qual é
26% menor que o PNG e 25 a 34% menor que o JPEG. O formato é
26% menor que o PNG e 25 a 34% menor que o JPEG. O formato é
suportado pelo Chrome, Opera, Yandex, Android e Safari, e pode ser
suportado pelo Chrome, Opera, Yandex, Android e Safari, e pode ser
ativado no Internet Explorer usando o
ativado no Internet Explorer usando o
Google Chrome Frameplugin
Google Chrome Frameplugin
.
.
O problema principal deste formato é que o firefox não tem planos de
O problema principal deste formato é que o firefox não tem planos de
implementá-lo. Sabendo disto, por enquanto, o seu uso generalizado
implementá-lo. Sabendo disto, por enquanto, o seu uso generalizado
é improvável.
é improvável.
Outra ideia que está ganhando popularidade são as
Outra ideia que está ganhando popularidade são as
imagens JPEG
imagens JPEG
progressivas
progressivas
. Estas imagens são, como o nome sugere,
. Estas imagens são, como o nome sugere,
progressivamente renderizadas. A primeira renderização é embaçada,
progressivamente renderizadas. A primeira renderização é embaçada,
então a imagem vai progressivamente ganhando nitidez. Já as imagens
então a imagem vai progressivamente ganhando nitidez. Já as imagens
JPEG não-progressivas são renderizadas de cima pra baixo. Em seu
JPEG não-progressivas são renderizadas de cima pra baixo. Em seu
artigo
artigo
"JPEG's progressivos: Uma nova boa prática"
"JPEG's progressivos: Uma nova boa prática"
, Ann Robson
, Ann Robson
afirma que o JPEG progressivo aparenta ser mais veloz que o JPEG
afirma que o JPEG progressivo aparenta ser mais veloz que o JPEG
baseline. Um JPEG progressivo dá ao usuário uma impressão geral
baseline. Um JPEG progressivo dá ao usuário uma impressão geral
sobre a imagem antes mesmo de ela ser totalmente carregada, o que
sobre a imagem antes mesmo de ela ser totalmente carregada, o que
beneficia a experiência do usuário.
beneficia a experiência do usuário.
Uma outra solução aos problemas de performance e tamanho de
Uma outra solução aos problemas de performance e tamanho de
imagem está em
imagem está em
alterar a taxa de compressão das imagens
alterar a taxa de compressão das imagens
. Durante
. Durante
muito tempo, pensamos que o alargamento da taxa de compressão de
muito tempo, pensamos que o alargamento da taxa de compressão de
uma imagem prejudicaria a sua qualidade. Entretanto, Daan Jobsis fez
uma imagem prejudicaria a sua qualidade. Entretanto, Daan Jobsis fez
uma extensa pesquisa sobre o assunto e escreveu um artigo a respeito
uma extensa pesquisa sobre o assunto e escreveu um artigo a respeito
chamado
chamado
"Retina Revolution"
"Retina Revolution"
. Em seus experimentos, ele testou
. Em seus experimentos, ele testou
diferentes tamanhos de imagens e taxas de compressão, o que gerou
diferentes tamanhos de imagens e taxas de compressão, o que gerou
uma solução muito interessante. Se você dobrar o tamanho de uma
uma solução muito interessante. Se você dobrar o tamanho de uma
imagem, mas também usar uma taxa de compressão mais alta, a
imagem, mas também usar uma taxa de compressão mais alta, a
imagem terá um arquivo com um tamanho menor que o original, mas
imagem terá um arquivo com um tamanho menor que o original, mas
ainda serão nítidas em telas normais e de alta densidade. Com esta
ainda serão nítidas em telas normais e de alta densidade. Com esta
técnica, Jobsis reduziu em 75% o peso da imagem.
técnica, Jobsis reduziu em 75% o peso da imagem.
*Demonstração de compressão de imagens por Daan Jobsis.
*Demonstração de compressão de imagens por Daan Jobsis.
Dadas as dores de cabeça das imagens responsivas, a ideia de ganhar
Dadas as dores de cabeça das imagens responsivas, a ideia de ganhar
a independência do pixel a partir de imagens, sempre que possível,
a independência do pixel a partir de imagens, sempre que possível,
está seduzindo cada vez mais designers e desenvolvedores. O formato
está seduzindo cada vez mais designers e desenvolvedores. O formato
SVG, por exemplo, pode ser usado para criar todos os elementos da
SVG, por exemplo, pode ser usado para criar todos os elementos da
interface de um website
interface de um website
independente da resolução
independente da resolução
. Os elementos
. Os elementos
serão dimensionados para dispositivos menores e não ficarão
serão dimensionados para dispositivos menores e não ficarão
pixelados nos dispositivos de alta densidade de pixels.
pixelados nos dispositivos de alta densidade de pixels.
Font icons
Font icons
são
são
outra tendência crescente. Eles envolvem o uso de uma fonte, onde
outra tendência crescente. Eles envolvem o uso de uma fonte, onde
os caracteres alfanuméricos são substituídos por ícones glifos, dando
os caracteres alfanuméricos são substituídos por ícones glifos, dando
a flexibilidade que uma fonte oferece. Infelizmente, esta solução ainda
a flexibilidade que uma fonte oferece. Infelizmente, esta solução ainda
não funciona com imagens, o que faz com que seja ansiosamente
não funciona com imagens, o que faz com que seja ansiosamente
esperado uma marcação ou formato de imagem viável.
esperado uma marcação ou formato de imagem viável.
O DESAFIO DO LAYOUT RESPONSIVO: REORGANIZAR E
O DESAFIO DO LAYOUT RESPONSIVO: REORGANIZAR E
TRABALHAR O CONTEÚDO SEM TOCAR NO HTML?
TRABALHAR O CONTEÚDO SEM TOCAR NO HTML?
Sejamos realistas, os grids fluidos usados atualmente, produzidos com
Sejamos realistas, os grids fluidos usados atualmente, produzidos com
floats e blocos inline, são um pobre improviso aguardando uma
floats e blocos inline, são um pobre improviso aguardando uma
solução melhor. Trabalhar com o layout e rearranjar blocos numa
solução melhor. Trabalhar com o layout e rearranjar blocos numa
página mobile sem recorrer ao JavaScript hoje em dia é um pesadelo,
página mobile sem recorrer ao JavaScript hoje em dia é um pesadelo,
e não é nem um pouco flexível. Isto é algo crucial a websites criados
e não é nem um pouco flexível. Isto é algo crucial a websites criados
com CMS, onde o designer não pode alterar o HTML de cada página
com CMS, onde o designer não pode alterar o HTML de cada página
ou versão do site.
ou versão do site.
E aí, como isto pode ser melhorado?
E aí, como isto pode ser melhorado?
Quatro Soluções com CSS3 que abordam o problema do Layout
Quatro Soluções com CSS3 que abordam o problema do Layout
Flexível
Flexível
A solução mais óbvia possível é o
A solução mais óbvia possível é o
modelo de box flexível do CSS3
modelo de box flexível do CSS3
(ou
(ou
flexbox
flexbox
). Seu status atual é a de "candidato a recomendação" na W3C,
). Seu status atual é a de "candidato a recomendação" na W3C,
e é suportado pela
e é suportado pela
maioria dos browsers mobile e desktop
maioria dos browsers mobile e desktop
(no IE
(no IE
começou na versão 10). O model permite reorganizar facilmente os
começou na versão 10). O model permite reorganizar facilmente os
elementos na tela, independente do HTML. Você também pode alterar
elementos na tela, independente do HTML. Você também pode alterar
o fluxo e a orientação do box, distribuir o espaço e alinhá-lo de
o fluxo e a orientação do box, distribuir o espaço e alinhá-lo de
acordo com o contexto. Abaixo um exemplo de layout que poderia
acordo com o contexto. Abaixo um exemplo de layout que poderia
ser reorganizado para mobile. A sintaxe ficaria assim:
ser reorganizado para mobile. A sintaxe ficaria assim:
11. .
.parent
.parent
{
{
22. .
display
display
:
:
flex
flex
;
;
33. .
flex-flow
flex-flow
:
:
column
column
;
;
/* exibe itens na coluna */
/* exibe itens na coluna */
44. .
}
}
55. .
66. .
.children
.children
{
{
77. .
order
order
:
:
1
1
;
;
/* muda a ordem dos elementos */
/* muda a ordem dos elementos */
88. .
}
}
O artigo
O artigo
"CSS3 Flexible Box Layout Explained"
"CSS3 Flexible Box Layout Explained"
dará a você uma
dará a você uma
compreensão mais profunda de como o flexbox funciona. (nota do
compreensão mais profunda de como o flexbox funciona. (nota do
tradutor: o bbburp traduziu um
tradutor: o bbburp traduziu um
excelente artigo sobre flexbox
excelente artigo sobre flexbox
)
)
Outra solução bastante próxima do conceito flexbox de reordenação
Outra solução bastante próxima do conceito flexbox de reordenação
de blocos na página, porém com JavaScript, é o
de blocos na página, porém com JavaScript, é o
Relocate
Relocate
.
.
Um segundo tipo de layout, que hoje em dia é bastante utilizado no
Um segundo tipo de layout, que hoje em dia é bastante utilizado no
design responsivo, é o
design responsivo, é o
layout multiple-column do CSS3
layout multiple-column do CSS3
. O módulo
. O módulo
está no estágio de "candidato a recomendação" na W3C, e
está no estágio de "candidato a recomendação" na W3C, e
funciona
funciona
muito bem na maioria dos browsers
muito bem na maioria dos browsers
(aguardado para IE9 e abaixo). A
(aguardado para IE9 e abaixo). A
principal vantagem deste model é que o conteúdo pode fluir de uma
principal vantagem deste model é que o conteúdo pode fluir de uma
coluna a outra, proporcionando um ganho enorme na flexibilidade. No
coluna a outra, proporcionando um ganho enorme na flexibilidade. No
que diz respeito a responsividade, o número de colunas pode ser
que diz respeito a responsividade, o número de colunas pode ser
alterado de acordo com o tamanho da viewport.
alterado de acordo com o tamanho da viewport.
É possível apenas ajustar o tamanho das colunas e deixar com que o
É possível apenas ajustar o tamanho das colunas e deixar com que o
browser calcule o seu número de acordo com o espaço disponível.
browser calcule o seu número de acordo com o espaço disponível.
Também é possível ajustar o número de colunas, com gaps e regras
Também é possível ajustar o número de colunas, com gaps e regras
entre elas, e deixar que o browser calcule a sua largura.
entre elas, e deixar que o browser calcule a sua largura.
A sintaxe se parece com isto:
A sintaxe se parece com isto:
1.
.container
.container
{
{
2.
column-
column-
width
width
:
:
10em
10em
;
;
3.
/* O browser vai criar uma coluna de 10em.
/* O browser vai criar uma coluna de 10em.
4.
O número de colunas vai depender dos espaço disponível */
O número de colunas vai depender dos espaço disponível */
5.
}
}
6.
7.
.container
.container
{
{
8.
columns
columns
:
:
5
5
;
;
9.
/* O browser vai criar 5 colunas.
/* O browser vai criar 5 colunas.
10.
O tamanho das colunas vai depender do espaço disponível. */
O tamanho das colunas vai depender do espaço disponível. */
11.
column-gap
column-gap
:
:
2em
2em
;
;
12.
}
}
Para aprender mais, leia o artigo de David Walsh:
Para aprender mais, leia o artigo de David Walsh:
“CSS Columns”
“CSS Columns”
.
.
Uma terceira propriedade CSS3 que pode ganhar mais atenção no
Uma terceira propriedade CSS3 que pode ganhar mais atenção no
futuro é a
futuro é a
CSS3 grid layout
CSS3 grid layout
. Esta propriedade dá a designers e
. Esta propriedade dá a designers e
desenvolvedores um
desenvolvedores um
grid flexível
grid flexível
, onde eles podem trabalhar com na
, onde eles podem trabalhar com na
criação de layouts diferentes. Ela permite que os elementos de
criação de layouts diferentes. Ela permite que os elementos de
conteúdo sejam exibidos nas linhas e colunas sem uma estrutura
conteúdo sejam exibidos nas linhas e colunas sem uma estrutura
definida. Primeiro você deve declarar um grid no container, e então
definida. Primeiro você deve declarar um grid no container, e então
colocar todos os elementos filhos neste grid virtual. Você pode, então,
colocar todos os elementos filhos neste grid virtual. Você pode, então,
definir um grid diferente para dispositivos menores ou alterar a
definir um grid diferente para dispositivos menores ou alterar a
posição dos elementos no grid. Isto gera uma enorme flexibilidade
posição dos elementos no grid. Isto gera uma enorme flexibilidade
quando usado com media queries, em mudanças de orientação, etc.
quando usado com media queries, em mudanças de orientação, etc.
A sintaxe para esta propriedade é assim (projeto de trabalho no W3C -
A sintaxe para esta propriedade é assim (projeto de trabalho no W3C -
working draft - a partir de 2 de abril de 2013):
working draft - a partir de 2 de abril de 2013):
11. .
.parent
.parent
{
{
22. .
display
display
:
:
grid
grid
;
;
/* declare o grid */
/* declare o grid */
33. .
grid-definition-columns
grid-definition-columns
:
:
1stgridsize 2ndgridsize …
1stgridsize 2ndgridsize …
;
;
44. .
grid-definition-rows
grid-definition-rows
:
:
1strowsize 2ndrowsize …
1strowsize 2ndrowsize …
;
;
55. .
}
}
66. .
77. .
.element
.element
{
{
88. .
grid-column
grid-column
:
:
1
1
;
;
99. .
grid-row
grid-row
:
:
1
1
;
;
1010. .
}
}
1111. .
1212. .
.element2
.element2
{
{
1313. .
grid-column
grid-column
:
:
1
1
;
;
1414. .
grid-row
grid-row
:
:
3
3
;
;
1515. .
}
}
Para definir o tamanho das linhas e colunas você pode usar diversas
Para definir o tamanho das linhas e colunas você pode usar diversas
unidades, conforme
unidades, conforme
detalhado na especificação
detalhado na especificação
. Para posicionar os
. Para posicionar os
elementos, a especificação diz o seguinte: "Cada parte está
elementos, a especificação diz o seguinte: "Cada parte está
posicionada entre as linhas do grid, fazendo referência a linha de grid
posicionada entre as linhas do grid, fazendo referência a linha de grid
inicial e então especificando, se houver mais de uma, o número de
inicial e então especificando, se houver mais de uma, o número de
linhas ou colunas distribuídas para determinar a linha de grid final,
linhas ou colunas distribuídas para determinar a linha de grid final,
delimitando a área do layout".
delimitando a área do layout".
O maior problema com esta propriedade é que é
O maior problema com esta propriedade é que é
suportada apenas
suportada apenas
pelo IE10
pelo IE10
. Para aprender mais sobre este layout, leia o artigo "
. Para aprender mais sobre este layout, leia o artigo "
Giving
Giving
Content Priority With CSS3 Grid Layout
Content Priority With CSS3 Grid Layout
" de Rachel Andrew. Além
" de Rachel Andrew. Além
disso, note que a especificação e a sintaxe para grid layouts com CSS
disso, note que a especificação e a sintaxe para grid layouts com CSS
foi alterada no dia 2 de abril de 2013. Andrew escreveu uma
foi alterada no dia 2 de abril de 2013. Andrew escreveu uma
atualização sobre a sintaxe, a qual foi intitulada de
atualização sobre a sintaxe, a qual foi intitulada de
"CSS Grid Layout:
"CSS Grid Layout:
What Has Changed?"
What Has Changed?"
(CSS Grid Layout: O que mudou?).
(CSS Grid Layout: O que mudou?).
O último layout, que pode tornar-se bastante útil no futuro se
O último layout, que pode tornar-se bastante útil no futuro se
implementado nos browsers, é o
implementado nos browsers, é o
CSS3 template layout
CSS3 template layout
. Este módulo
. Este módulo
CSS3 funciona associando um elemento ao "nome" do layout, e em
CSS3 funciona associando um elemento ao "nome" do layout, e em
seguida ordenando os elementos num grid invisível. O grid pode ser
seguida ordenando os elementos num grid invisível. O grid pode ser
fixo ou flexível, e pode ser alterado de acordo com o tamanho da
fixo ou flexível, e pode ser alterado de acordo com o tamanho da
viewport.
viewport.
A sintaxe fica assim:
A sintaxe fica assim:
11. .
.parent
.parent
{
{
22. .
display
display
:
:
"ab"
"ab"
33. .
"cd"
"cd"
;
;
/* criando um grid invisível */
/* criando um grid invisível */
44. .
}
}
55. .
66. .
.child1
.child1
{
{
77. .
position
position
:
:
a
a
;
;
88. .
}
}
99. .
1010. .
.child2
.child2
{
{
1111. .
position
position
:
:
b
b
;
;
1212. .
}
}
1313. .
1414. .
.child3
.child3
{
{
1515. .
position
position
:
:
c
c
;
;
1616. .
}
}
1717. .
1818. .
.child4
.child4
{
{
1919. .
position
position
:
:
d
d
;
;
2020. .
}
}
E é renderizado assim:
E é renderizado assim:
Infelizmente, o suporte a navegadores para este módulo é
Infelizmente, o suporte a navegadores para este módulo é
praticamente nulo. Talvez algum dia, se designers e desenvolvedores
praticamente nulo. Talvez algum dia, se designers e desenvolvedores
mostrarem interesse suficiente nesta especificação, algum fabricante
mostrarem interesse suficiente nesta especificação, algum fabricante
de browser possa implementá-lo. Por enquanto, você pode testá-lo
de browser possa implementá-lo. Por enquanto, você pode testá-lo
usando
usando
um polyfill
um polyfill
.
.
Unidades Relativas da Viewport e o fim do Layout baseado em pixels
Unidades Relativas da Viewport e o fim do Layout baseado em pixels
Medidas de comprimento baseadas na viewport
Medidas de comprimento baseadas na viewport
-
-
vw
vw
,
,
vh
vh
,
,
vm
vm
,
,
vmin
vmin
e
e
vmax
vmax
- são unidades de medida relativa das dimensões da própria
- são unidades de medida relativa das dimensões da própria
viewport.
viewport.
Uma unidade vw é igual a 1% da largura do bloco inicial que a contém.
Uma unidade vw é igual a 1% da largura do bloco inicial que a contém.
Se a largura da viewport é 320, então 1
Se a largura da viewport é 320, então 1
vw
vw
é 1 x 320/100 = 3.2 pixels.
é 1 x 320/100 = 3.2 pixels.
A unidade vh funciona da mesma maneira, mas é relativa a altura da
A unidade vh funciona da mesma maneira, mas é relativa a altura da
viewport. Desta forma, 50
viewport. Desta forma, 50
vh
vh
equivale a 50% da altura do documento.
equivale a 50% da altura do documento.
A esta altura você pode se perguntar qual a diferença desta unidade
A esta altura você pode se perguntar qual a diferença desta unidade
para a percentual. A diferença é que enquanto a unidade percentual é
para a percentual. A diferença é que enquanto a unidade percentual é
relativa ao tamanho do elemento pai, as unidades
relativa ao tamanho do elemento pai, as unidades
vh
vh
e
e
vw
vw
serão
serão
sempre relativas ao tamanho da viewport, independente do tamanho
sempre relativas ao tamanho da viewport, independente do tamanho
dos seus elementos-pai.
dos seus elementos-pai.
Isso fica bem interessante quando você quer, por exemplo, criar um
Isso fica bem interessante quando você quer, por exemplo, criar um
container e ter a certeza de que ele nunca se extenderá abaixo da
container e ter a certeza de que ele nunca se extenderá abaixo da
altura do viewport para que o usuário não precise rolar a página para
altura do viewport para que o usuário não precise rolar a página para
baixo para achar o conteúdo. Também possibilita que criemos um
baixo para achar o conteúdo. Também possibilita que criemos um
elemento com 100% da altura sem alterar todos os containers pai.
elemento com 100% da altura sem alterar todos os containers pai.
A unidade
A unidade
vmin
vmin
é igualada ao menor valor da unidade
é igualada ao menor valor da unidade
vm
vm
ou
ou
vh
vh
, e
, e
vmax
vmax
ao maior valor; por isso, essas unidades também respondem
ao maior valor; por isso, essas unidades também respondem
perfeitamente às alterações na orientação dos dispositivos.
perfeitamente às alterações na orientação dos dispositivos.
Infelizmente, por enquanto,
Infelizmente, por enquanto,
essas unidades não são suportadas pelo
essas unidades não são suportadas pelo
browser do Android
browser do Android
. Sendo assim, pode ser que você ainda tenha que
. Sendo assim, pode ser que você ainda tenha que
aguardar um tempo para utilizá-las.
aguardar um tempo para utilizá-las.
Uma Palavra sobre Tipografia Adaptável (Adaptive Typography)
Uma Palavra sobre Tipografia Adaptável (Adaptive Typography)
O layout de um site vai depender muito do conteúdo. Não posso
O layout de um site vai depender muito do conteúdo. Não posso
concluir uma seção que fala sobre as diversas possibilidades do layout
concluir uma seção que fala sobre as diversas possibilidades do layout
responsivo sem abordar a tipografia. O CSS3 introduziu uma unidade
responsivo sem abordar a tipografia. O CSS3 introduziu uma unidade
para fontes que pode ser bastante útil a tipografia responsiva:
para fontes que pode ser bastante útil a tipografia responsiva:
a
a
unidade “
unidade “
rem
rem
”
”
. Enquanto as fontes medidas pela unidade “
. Enquanto as fontes medidas pela unidade “
em
em
”
”
apresentam um tamanho herdado do seu elemento pai, a fonte
apresentam um tamanho herdado do seu elemento pai, a fonte
medida pela unidade “rem” é relativa ao tamanho da fonte do seu
medida pela unidade “rem” é relativa ao tamanho da fonte do seu
elemento root (ou raiz). Para um site responsivo, você poderia escrever
elemento root (ou raiz). Para um site responsivo, você poderia escrever
o CSS como o código abaixo, e em seguida alterar o tamanho de
o CSS como o código abaixo, e em seguida alterar o tamanho de
todas as fontes simplesmente mudando o tamanho da fonte
todas as fontes simplesmente mudando o tamanho da fonte
especificada no elemento
especificada no elemento
html
html
:
:
1.
html
html
{
{
2.
font-size
font-size
:
:
14px
14px
;
;
3.
}
}
4.
5.
p
p
{
{
6.
font-size
font-size
:
:
1rem
1rem
/* isto tem 14px */
/* isto tem 14px */
7.
}
}
8.
9.
@media screen and (max-width:380px) {
@media screen and (max-width:380px) {
10.
html
html
{
{
11.
font-size
font-size
:
:
12px
12px
;
;
12.
/* tornando a fonte menor para dispositivos mobile */
/* tornando a fonte menor para dispositivos mobile */
13.
}
}
14.
15.
p
p
{
{
16.
font-size
font-size
:
:
1rem
1rem
;
;
17.
/* isto agora equivale a 12px */
/* isto agora equivale a 12px */
18.
}
}
19.
}
}
Com exceção do IE8 e do Opera mini, o
Com exceção do IE8 e do Opera mini, o
suporte ao "
suporte ao "
rem
rem
"
"
é excelente.
é excelente.
Para aprender mais sobre a unidade
Para aprender mais sobre a unidade
rem
rem
, leia o artigo de Matthew
, leia o artigo de Matthew
Lettini
Lettini
"In Defense of Rem Units"
"In Defense of Rem Units"
.
.
A MELHOR MANEIRA DE TRABALHAR RESPONSIVAMENTE
A MELHOR MANEIRA DE TRABALHAR RESPONSIVAMENTE
COM OUTROS CONTEÚDOS COMPLEXOS
COM OUTROS CONTEÚDOS COMPLEXOS
Aos poucos vamos ficando cada vez melhor em lidar com imagens e
Aos poucos vamos ficando cada vez melhor em lidar com imagens e
textos em layouts responsivos, embora ainda seja necessário encontrar
textos em layouts responsivos, embora ainda seja necessário encontrar
soluções para outros tipos mais complexos de conteúdo
soluções para outros tipos mais complexos de conteúdo
Lidando com Formulários no Website Responsivo
Lidando com Formulários no Website Responsivo
De um modo geral, lidar com formulários, especialmente os muito
De um modo geral, lidar com formulários, especialmente os muito
grandes, no web design responsivo é um enorme desafio! Quanto
grandes, no web design responsivo é um enorme desafio! Quanto
maior o formulário, mais complicado será adaptá-lo a dispositivos
maior o formulário, mais complicado será adaptá-lo a dispositivos
menores. A adaptação física não é tão difícil; a maioria dos designers
menores. A adaptação física não é tão difícil; a maioria dos designers
simplesmente colocam os elementos do formulário numa única
simplesmente colocam os elementos do formulário numa única
coluna e esticam os inputs completando a largura da tela. Entretanto,
coluna e esticam os inputs completando a largura da tela. Entretanto,
fazer formulários visualmente atraentes não é o bastante. Temos que
fazer formulários visualmente atraentes não é o bastante. Temos que
torná-los fáceis de usar também nos dispositivos mobile.
torná-los fáceis de usar também nos dispositivos mobile.
Para começar,
Para começar,
Luke Wroblewski aconselha
Luke Wroblewski aconselha
evitar inputs de texto,
evitar inputs de texto,
contando com checkboxes, radio buttons e menus drop-downs
contando com checkboxes, radio buttons e menus drop-downs
, e
, e
utilizando o select sempre que possível. Desta forma, o usuário precisa
utilizando o select sempre que possível. Desta forma, o usuário precisa
digitar o mínimo de informação. Outra dica é não fazer com que o
digitar o mínimo de informação. Outra dica é não fazer com que o
usuário aperte o botão "enviar" antes de obter um feedback sobre o
usuário aperte o botão "enviar" antes de obter um feedback sobre o
conteúdo a ser submetido. A checagem de erros imediata é
conteúdo a ser submetido. A checagem de erros imediata é
extremamente importante no mobile, onde a maioria dos formulários
extremamente importante no mobile, onde a maioria dos formulários
ultrapassa a altura da tela. Se o usuário digitar um campo
ultrapassa a altura da tela. Se o usuário digitar um campo
incorretamente e tiver que enviar o formulário para só assim perceber
incorretamente e tiver que enviar o formulário para só assim perceber
o erro, provavelmente ele não verá onde o erro está.
o erro, provavelmente ele não verá onde o erro está.
No futuro, novos inputs e atributos HTML5 serão de grande ajuda na
No futuro, novos inputs e atributos HTML5 serão de grande ajuda na
melhoria dos formulários, e não haverá a necessidade de utilizar tanto
melhoria dos formulários, e não haverá a necessidade de utilizar tanto
JavaScript. Por exemplo, você poderia usar o
JavaScript. Por exemplo, você poderia usar o
atributo
atributo
required
required
para
para
dar feedback imediato sobre um campo específico. Infelizmente, por
dar feedback imediato sobre um campo específico. Infelizmente, por
enquanto,
enquanto,
o suporte para dispositivos mobile
o suporte para dispositivos mobile
ainda é ruim. O
ainda é ruim. O
atributo
atributo
autocomplete
autocomplete
também poderia ajudar a montar formulários mais
também poderia ajudar a montar formulários mais
responsivos.
responsivos.
Um smartphone é um bem pessoal, por isso podemos assumir que
Um smartphone é um bem pessoal, por isso podemos assumir que
dados como nome e endereço serão algo consistente. Usando o
dados como nome e endereço serão algo consistente. Usando o
atributo
atributo
autocomplete
autocomplete
do HTML5
do HTML5
poderíamos fazer um auto-
poderíamos fazer um auto-
preenchimento dos campos
preenchimento dos campos
sem que o usuário tivesse que digitar
sem que o usuário tivesse que digitar
todas as informações. Há ainda uma
todas as informações. Há ainda uma
lista inteira de novos inputs
lista inteira de novos inputs
HTML5
HTML5
que podem ser utilizados muito em breve, a fim de tornar os
que podem ser utilizados muito em breve, a fim de tornar os
formulários mais responsivos.
formulários mais responsivos.
Datas em elementos de formulário são um bom exemplo do que se
Datas em elementos de formulário são um bom exemplo do que se
pode melhorar com o HTML5. Já estamos acostumados a contar com
pode melhorar com o HTML5. Já estamos acostumados a contar com
JavaScript ao criar calendários. Eles podem ser muito úteis se
JavaScript ao criar calendários. Eles podem ser muito úteis se
utilizados em grandes telas desktop, mas difíceis de usar em
utilizados em grandes telas desktop, mas difíceis de usar em
dispositivos touch screen, pois selecionar a data certa com o dedo é
dispositivos touch screen, pois selecionar a data certa com o dedo é
difícil quando a área sensível ao toque é muito pequena.
difícil quando a área sensível ao toque é muito pequena.
*Como posso selecionar uma data se meu dedo está tocando três ao mesmo
*Como posso selecionar uma data se meu dedo está tocando três ao mesmo
tempo?
tempo?
Uma solução promissora está no novo
Uma solução promissora está no novo
input type="date"
input type="date"
do HTML5 ,
do HTML5 ,
que define uma string no formato de data. Já o
que define uma string no formato de data. Já o
input type="datetime"
input type="datetime"
define uma string no formato de data e hora. A grande vantagem deste
define uma string no formato de data e hora. A grande vantagem deste
método é que deixamos o browser decidir qual UI utilizar. Desta
método é que deixamos o browser decidir qual UI utilizar. Desta
forma, a UI é automaticamente otimizada em dispositivos mobile.
forma, a UI é automaticamente otimizada em dispositivos mobile.
Abaixo um exemplo da aparência de um
Abaixo um exemplo da aparência de um
input type="date"
input type="date"
no
no
desktop, em smartphone e tablet com Android (com o browser
desktop, em smartphone e tablet com Android (com o browser
Chrome), Iphone e Ipad.
Chrome), Iphone e Ipad.
*Renderização do input input type="date" em diferentes dispositivos.
*Renderização do input input type="date" em diferentes dispositivos.
Note que as screenshots foram feitas em meu browser e no Android
Note que as screenshots foram feitas em meu browser e no Android
phone, então a linguagem foi automaticamente adaptada ao sistema
phone, então a linguagem foi automaticamente adaptada ao sistema
de linguagem (Francês). Ao utilizar componentes nativos, você não
de linguagem (Francês). Ao utilizar componentes nativos, você não
precisa mais adaptar a lingua para diferentes versões do site.
precisa mais adaptar a lingua para diferentes versões do site.
Por enquanto, com exceção do Opera e do Chrome,
Por enquanto, com exceção do Opera e do Chrome,
não há suporte
não há suporte
ao
ao
input type="date"
input type="date"
para o desktop. Browsers nativos do Android
para o desktop. Browsers nativos do Android
ainda não o suportam completamente, mas o Chrome Android sim, e
ainda não o suportam completamente, mas o Chrome Android sim, e
também o Safari para iOS. O fato é que ainda há muito a ser
também o Safari para iOS. O fato é que ainda há muito a ser
trabalhado para sermos capazes de utilizar esta solução em sites
trabalhado para sermos capazes de utilizar esta solução em sites
responsivos. Enquanto isto, você pode usar um polyfill como o
responsivos. Enquanto isto, você pode usar um polyfill como o
Mobiscroll
Mobiscroll
para browsers mobile que não suportarem o atributo
para browsers mobile que não suportarem o atributo
nativamente.
nativamente.
Além destas soluções de inputs HTML5, foram feitas tentativas para
Além destas soluções de inputs HTML5, foram feitas tentativas para
melhorar outros padrões de design, como as
melhorar outros padrões de design, como as
senhas do mobile
senhas do mobile
e
e
inputs complexos utilizando máscaras
inputs complexos utilizando máscaras
. Como você pode notar, isto
. Como você pode notar, isto
tudo é experimental. O formulário responsivo perfeito não existe no
tudo é experimental. O formulário responsivo perfeito não existe no
momento; Muito ainda deve ser feito neste campo.
momento; Muito ainda deve ser feito neste campo.
Lidando com Tabelas em Sites Responsivos
Lidando com Tabelas em Sites Responsivos
Outro tipo de conteúdo que fica bastante confuso em sites mobile e
Outro tipo de conteúdo que fica bastante confuso em sites mobile e
responsivos são as tabelas. A maioria das tabelas são orientadas
responsivos são as tabelas. A maioria das tabelas são orientadas
horizontalmente e apresentam uma grande quantidade de dados de
horizontalmente e apresentam uma grande quantidade de dados de
uma só vez. Imagine então que exibi-las corretamente em small
uma só vez. Imagine então que exibi-las corretamente em small
screens seja bem complicado. Tabelas HTML são bastante flexíveis -
screens seja bem complicado. Tabelas HTML são bastante flexíveis -
você pode usar porcentagens para mudar a largura das colunas - o
você pode usar porcentagens para mudar a largura das colunas - o
que também pode rapidamente tornar o conteúdo ilegível.
que também pode rapidamente tornar o conteúdo ilegível.
Ainda não encontraram uma forma perfeita de mostrar tabelas, mas
Ainda não encontraram uma forma perfeita de mostrar tabelas, mas
algumas sugestões foram feitas:
algumas sugestões foram feitas:
Uma forma de abordagem é
Uma forma de abordagem é
esconder colunas consideradas "menos
esconder colunas consideradas "menos
importantes"
importantes"
, e oferecer checkboxes para que o usuário escolha quais
, e oferecer checkboxes para que o usuário escolha quais
ele deseja ver. No desktop, todas as colunas seriam mostradas,
ele deseja ver. No desktop, todas as colunas seriam mostradas,
enquanto no mobile o número de colunas dependeria do tamanho da
enquanto no mobile o número de colunas dependeria do tamanho da
tela. O Filament Group
tela. O Filament Group
explica este método
explica este método
e
e
demonstra
demonstra
em um de
em um de
seus artigos. A solução também é usada no
seus artigos. A solução também é usada no
table column toggle do
table column toggle do
jQuery Mobile
jQuery Mobile
.
.
*Alguns exemplos de tabelas responsivas.
*Alguns exemplos de tabelas responsivas.
A segunda abordagem brinca com a ideia de
A segunda abordagem brinca com a ideia de
scroll em tabelas
scroll em tabelas
. Você
. Você
poderia "fixar" uma única coluna com tamanho fixo a esquerda, e
poderia "fixar" uma única coluna com tamanho fixo a esquerda, e
então deixar uma scroll bar numa pequena parte da tabela a direita.
então deixar uma scroll bar numa pequena parte da tabela a direita.
David Bushell implementa esta ideia
David Bushell implementa esta ideia
em um artigo usando CSS para
em um artigo usando CSS para
exibir todo o conteúdo da
exibir todo o conteúdo da
do lado esquerdo da tabela, deixando o
do lado esquerdo da tabela, deixando o
usuário mover-se pelo conteúdo a direita através da scroll bar.
usuário mover-se pelo conteúdo a direita através da scroll bar.
Zurb
Zurb
utiliza a mesma ideia, mas de um jeito diferente,
utiliza a mesma ideia, mas de um jeito diferente,
neste plug in
neste plug in
. Neste
. Neste
caso, as headers ficam no topo da tabela, e a tabela é duplicada com
caso, as headers ficam no topo da tabela, e a tabela é duplicada com
JavaScript de modo que apenas a primeira coluna seja mostrada a
JavaScript de modo que apenas a primeira coluna seja mostrada a
esquerda, e as demais colunas sejam mostradas do lado direito através
esquerda, e as demais colunas sejam mostradas do lado direito através
da scroll bar.
da scroll bar.
*Dois exemplos de tabelas responsivas com scroll
*Dois exemplos de tabelas responsivas com scroll
A grande questão em utilizar scroll bars e propriedades CSS tais como
A grande questão em utilizar scroll bars e propriedades CSS tais como
overflow: auto
overflow: auto
é que muitos dispositivos mobile e tablets
é que muitos dispositivos mobile e tablets
simplesmente não exibem uma scroll bar visível. A área da direita da
simplesmente não exibem uma scroll bar visível. A área da direita da
tabela permite a rolagem, mas o usuário não terá qualquer indício
tabela permite a rolagem, mas o usuário não terá qualquer indício
visual desta possibilidade. Precisamos encontrar uma maneira de
visual desta possibilidade. Precisamos encontrar uma maneira de
indicar que há mais conteúdo a ser exibido à direita.
indicar que há mais conteúdo a ser exibido à direita.
Uma terceira abordagem é em
Uma terceira abordagem é em
reestruturar a tabela e dividir as
reestruturar a tabela e dividir as
colunas
colunas
em listas de itens com cabeçalhos.
em listas de itens com cabeçalhos.
Esta técnica é utilizada no
Esta técnica é utilizada no
"reflow mode"
"reflow mode"
no jQuery Mobile e foi explicada por Chris Coyier em
no jQuery Mobile e foi explicada por Chris Coyier em
seu artigo
seu artigo
“Responsive Data Tables”
“Responsive Data Tables”
.
.
*Reestruturando uma tabela para dispositivos móveis
*Reestruturando uma tabela para dispositivos móveis
Existem
Existem
diversas outras técnicas
diversas outras técnicas
, e qual usar depende muito do seu
, e qual usar depende muito do seu
projeto. Não há dois projetos iguais, por isso só posso mostrar como
projeto. Não há dois projetos iguais, por isso só posso mostrar como
outras pessoas estão lidando com isto. Se você chegar a uma boa
outras pessoas estão lidando com isto. Se você chegar a uma boa
solução, por favor compartilhe nos comentários, no Twitter ou em
solução, por favor compartilhe nos comentários, no Twitter ou em
qualquer outro lugar. Estamos no mesmo barco, e exibir tabelas no
qualquer outro lugar. Estamos no mesmo barco, e exibir tabelas no
mobile está uma droga (é sério). Então vamos melhorá-las juntos!
mobile está uma droga (é sério). Então vamos melhorá-las juntos!
INCORPORANDO CONTEÚDO DE TERCEIROS: O PROBLEMA
INCORPORANDO CONTEÚDO DE TERCEIROS: O PROBLEMA
DO IFRAME RESPONSIVO
DO IFRAME RESPONSIVO
Muitos desses conteúdos, ao serem incorporados, fazem você utilizar
Muitos desses conteúdos, ao serem incorporados, fazem você utilizar
iframes. Mas vamos encarar: lidar com iframes no design responsivo é
iframes. Mas vamos encarar: lidar com iframes no design responsivo é
doloroso. O grande problema é que iframes exigem largura e altura
doloroso. O grande problema é que iframes exigem largura e altura
fixa diretamente no seu código HTML. Forçar uma largura de 100% no
fixa diretamente no seu código HTML. Forçar uma largura de 100% no
iframe deveria resolver, mas daí você perderia a proporção do
iframe deveria resolver, mas daí você perderia a proporção do
conteúdo incorporado. Então, para incorporar um vídeo ou slideshow
conteúdo incorporado. Então, para incorporar um vídeo ou slideshow
e preservar a proporção original, seria necessário encontrar uma
e preservar a proporção original, seria necessário encontrar uma
solução alternativa.
solução alternativa.
Uma solução com HTML e CSS
Uma solução com HTML e CSS
Thierry Koblentz
Thierry Koblentz
escreveu um ótimo artigo chamado
escreveu um ótimo artigo chamado
"Creating
"Creating
Intrinsic Ratios for Vídeo"
Intrinsic Ratios for Vídeo"
(criando proporções intrínsecas para vídeos),
(criando proporções intrínsecas para vídeos),
onde ele propõe uma forma de incorporar vídeos responsivos usando
onde ele propõe uma forma de incorporar vídeos responsivos usando
uma proporção 16:9. Esta solução pode ser estendida a outros tipos
uma proporção 16:9. Esta solução pode ser estendida a outros tipos
de conteúdos, como apresentações em SlideShare e Google Maps.
de conteúdos, como apresentações em SlideShare e Google Maps.
Koblentz envolve o iframe num container usando uma classe a qual
Koblentz envolve o iframe num container usando uma classe a qual
podemos manipular no CSS. O container torna possível o iframe ser
podemos manipular no CSS. O container torna possível o iframe ser
redimensionado fluidamente, mesmo tendo um valor fixo de pixels no
redimensionado fluidamente, mesmo tendo um valor fixo de pixels no
HTML. O
HTML. O
código, adaptado por Anders M. Andersen
código, adaptado por Anders M. Andersen
, fica assim:
, fica assim:
11. .
.embed-container
.embed-container
{
{
22. .
position
position
:
:
relative
relative
;
;
33. .
padding-bottom
padding-bottom
:
:
56.25%
56.25%
;
;
/* 16:9 ratio */
/* 16:9 ratio */
44. .
padding-top
padding-top
:
:
30px
30px
;
;
/* solução para IE 6 */
/* solução para IE 6 */
55. .
height
height
:
:
0
0
;
;
66. .
overflow
overflow
:
:
hidden
hidden
;
;
77. .
}
}
88. .
99. .
.embed-container
.embed-container
iframe
iframe
,
,
1010. .
.embed-container
.embed-container
object
object
,
,
1111. .
.embed-container
.embed-container
embed
embed
{
{
1212. .
position
position
:
:
absolute
absolute
;
;
1313. .
top
top
:
:
0
0
;
;
1414. .
left
left
:
:
0
0
;
;
1515. .
width
width
:
:
100%
100%
;
;
1616. .
height
height
:
:
100%
100%
;
;
1717. .
}
}
Isto vai funcionar em todos os iframes. O único problema é que você
Isto vai funcionar em todos os iframes. O único problema é que você
terá que envolver todos os iframes de seu site em um elemento.
terá que envolver todos os iframes de seu site em um elemento.
Enquanto esta técnica funcionaria muito bem para desenvolvedores
Enquanto esta técnica funcionaria muito bem para desenvolvedores
que tivessem controle total de seu código, ou para clientes que
que tivessem controle total de seu código, ou para clientes que
estivessem razoavelmente familiarizados com HTML, não funcionaria
estivessem razoavelmente familiarizados com HTML, não funcionaria
com clientes que não tivessem qualquer habilidade técnica. Você
com clientes que não tivessem qualquer habilidade técnica. Você
poderia, é claro, usar JavaScript para detectar os elementos iframe e
poderia, é claro, usar JavaScript para detectar os elementos iframe e
automaticamente incorporá-los na classe, mas como podemos ver,
automaticamente incorporá-los na classe, mas como podemos ver,
seria uma grande solução, mas não a solução perfeita.
seria uma grande solução, mas não a solução perfeita.
LIDANDO COM VÍDEOS RESPONSIVOS NO FUTURO
LIDANDO COM VÍDEOS RESPONSIVOS NO FUTURO
O HTML5 abre um mundo de possibilidades para o vídeo -
O HTML5 abre um mundo de possibilidades para o vídeo -
particularmente com o
particularmente com o
elemento video
elemento video
. A grande notícia é que o
. A grande notícia é que o
suporte a este elemento é surpreendentemente bom em dispositivos
suporte a este elemento é surpreendentemente bom em dispositivos
mobile
mobile
! Com exceção do Opera Mini, a maioria dos browsers o
! Com exceção do Opera Mini, a maioria dos browsers o
suportam. O elemento video também é bastante flexível, e apresentar
suportam. O elemento video também é bastante flexível, e apresentar
um vídeo responsivo é tão simples quanto isto:
um vídeo responsivo é tão simples quanto isto:
11. .
video
video
{
{
22. .
max-width
max-width
:
:
100%
100%
;
;
33. .
height
height
:
:
auto
auto
;
;
44. .
}
}
Você provavelmente está se perguntando, "Então, qual o problema?"
Você provavelmente está se perguntando, "Então, qual o problema?"
O problema é que, embora YouTube e Vimeo suportem o elemento
O problema é que, embora YouTube e Vimeo suportem o elemento
video, você ainda precisa incorporar vídeos usando o tal método do
video, você ainda precisa incorporar vídeos usando o tal método do
iframe. E isso meu amigo, é uma droga. Sendo assim, até que YouTube
iframe. E isso meu amigo, é uma droga. Sendo assim, até que YouTube
e Vimeo ofereçam um meio de incorporar vídeos em sites utilizando a
e Vimeo ofereçam um meio de incorporar vídeos em sites utilizando a
tag video do HTML5,
tag video do HTML5,
teremos que descobrir soluções
teremos que descobrir soluções
para que
para que
incorporações de vídeo trabalhem adequadamente em sites
incorporações de vídeo trabalhem adequadamente em sites
responsivos. Pensando nisto, Chris Coyier criou uma solução com um
responsivos. Pensando nisto, Chris Coyier criou uma solução com um
plugin jQuery chamado
plugin jQuery chamado
FitVids.js
FitVids.js
. Ele usa a primeira técnica
. Ele usa a primeira técnica
mencionada acima: cria um container em torno do iframe e preserva a
mencionada acima: cria um container em torno do iframe e preserva a
sua proporção.
sua proporção.
Incorporando Google Maps
Incorporando Google Maps
Se você incorporou um Google Map em seu site, a técnica descrita
Se você incorporou um Google Map em seu site, a técnica descrita
acima com container e CSS funcionará. Mas, de novo, é um hackzinho
acima com container e CSS funcionará. Mas, de novo, é um hackzinho
sujo. Além disso, o mapa vai redimensionar proporcionalmente e pode
sujo. Além disso, o mapa vai redimensionar proporcionalmente e pode
ficar tão pequeno, que poderá perder a área de foco que você quer
ficar tão pequeno, que poderá perder a área de foco que você quer
mostrar ao usuário. A
mostrar ao usuário. A
página do Google Maps para mobile
página do Google Maps para mobile
diz que
diz que
você pode utilizar uma
você pode utilizar uma
API de mapas estáticos
API de mapas estáticos
para incorporações
para incorporações
mobile. Usar um mapa estático de fato eliminaria os problemas com
mobile. Usar um mapa estático de fato eliminaria os problemas com
iframe. Brad Frost escreveu um belo artigo a respeito, e criou uma
iframe. Brad Frost escreveu um belo artigo a respeito, e criou uma
demo de
demo de
mapas adaptáveis (adaptive maps)
mapas adaptáveis (adaptive maps)
onde utiliza a mesma
onde utiliza a mesma
técnica. Um JavaScript detecta o tamanho da tela, em seguida o
técnica. Um JavaScript detecta o tamanho da tela, em seguida o
iframe é substituído pelo mapa estático em celulares. Como podemos
iframe é substituído pelo mapa estático em celulares. Como podemos
ver, temos novamente que recorrer a técnicas que lidem com
ver, temos novamente que recorrer a técnicas que lidem com
problemas de iframe, devido a ausência de uma solução nativa (ou
problemas de iframe, devido a ausência de uma solução nativa (ou
seja, do Google).
seja, do Google).
Precisamos de APIS Melhores
Precisamos de APIS Melhores
Agora a grande pergunta: Há um jeito melhor? O maior problema em
Agora a grande pergunta: Há um jeito melhor? O maior problema em
usar iframes para incorporar o conteúdo de terceiros responsivamente
usar iframes para incorporar o conteúdo de terceiros responsivamente
é a falta de controle sobre o código gerado.
é a falta de controle sobre o código gerado.
Desenvolvedores e
Desenvolvedores e
designers são muito dependentes
designers são muito dependentes
de conteúdo de terceiros e, por
de conteúdo de terceiros e, por
extensão, o seu HTML gerado. E o número de sites que oferecem
extensão, o seu HTML gerado. E o número de sites que oferecem
conteúdo de outros sites cresce rapidamente. Precisamos de soluções
conteúdo de outros sites cresce rapidamente. Precisamos de soluções
muito melhores do que iframes para incorporar este conteúdo.
muito melhores do que iframes para incorporar este conteúdo.
Agora, fale a verdade: incorporar iframes do Facebook é um verdadeiro
Agora, fale a verdade: incorporar iframes do Facebook é um verdadeiro
sofrimento. A falta de controle sobre o CSS pode fazer nosso trabalho
sofrimento. A falta de controle sobre o CSS pode fazer nosso trabalho
parecer bem desleixado e algumas vezes arruinar o design. A web é
parecer bem desleixado e algumas vezes arruinar o design. A web é
um lugar aberto, por isso talvez fosse um bom momento em começar
um lugar aberto, por isso talvez fosse um bom momento em começar
a pensar em mais API's abertas! No futuro, vamos precisar de API's que
a pensar em mais API's abertas! No futuro, vamos precisar de API's que
sejam melhores e mais simples de utilizar, de modo que qualquer
sejam melhores e mais simples de utilizar, de modo que qualquer
pessoa possa incorporar um conteúdo de maneira flexível, sem ter
pessoa possa incorporar um conteúdo de maneira flexível, sem ter
que contar com iframes fixos não responsivos. No entanto, até que
que contar com iframes fixos não responsivos. No entanto, até que
decidam criar essas API's, estamos presos a iframes medíocres, tendo
decidam criar essas API's, estamos presos a iframes medíocres, tendo
que recorrer a truques para torná-los viáveis.
que recorrer a truques para torná-los viáveis.
NAVEGAÇÃO RESPONSIVA: UM PANORAMA PELAS
NAVEGAÇÃO RESPONSIVA: UM PANORAMA PELAS
SOLUÇÕES ATUAIS
SOLUÇÕES ATUAIS
Outro grande desafio é o que fazer com a navegação. Quanto mais
Outro grande desafio é o que fazer com a navegação. Quanto mais
complexa e profunda a arquitetura de um website, mais inventivos
complexa e profunda a arquitetura de um website, mais inventivos
precisamos ser.
precisamos ser.
(Nota do tradutor: O bbburp! publicou uma tradução sobre menus
(Nota do tradutor: O bbburp! publicou uma tradução sobre menus
complexos para navegação no web design responsivo.
complexos para navegação no web design responsivo.
Confira
Confira
o
o
artigo!)
artigo!)
Uma das primeiras tentativas de lidar com isto de maneira simples foi
Uma das primeiras tentativas de lidar com isto de maneira simples foi
converter a navegação em um menu dropdown
converter a navegação em um menu dropdown
para telas pequenas.
para telas pequenas.
Infelizmente, esta forma não é a ideal. Primeiro porque esta solução
Infelizmente, esta forma não é a ideal. Primeiro porque esta solução
fica terrivelmente complicada numa navegação multi-level, podendo
fica terrivelmente complicada numa navegação multi-level, podendo
também causar problemas de acessibilidade. Eu recomendo o artigo
também causar problemas de acessibilidade. Eu recomendo o artigo
"Stop Misusing Select Menus"
"Stop Misusing Select Menus"
para entender todos os problemas
para entender todos os problemas
consequentes desta técnica.
consequentes desta técnica.
Algumas pessoas, incluindo
Algumas pessoas, incluindo
Brad Frost
Brad Frost
e Luke Wroblewski, têm
e Luke Wroblewski, têm
tentado resolver este problema. Brad Frost compilou algumas de suas
tentado resolver este problema. Brad Frost compilou algumas de suas
técnicas no site
técnicas no site
This Is Responsive
This Is Responsive
, na seção de navegação.
, na seção de navegação.
A navegação alternada (toggle navigation) envolve ocultar o menu nos
A navegação alternada (toggle navigation) envolve ocultar o menu nos
dispositivos mobile, exibindo um único link. Quando o usuário dá um
dispositivos mobile, exibindo um único link. Quando o usuário dá um
clique todos os links aparecem como um bloco de elementos abaixo
clique todos os links aparecem como um bloco de elementos abaixo
do link, empurrando o conteúdo principal pra baixo da navegação.
do link, empurrando o conteúdo principal pra baixo da navegação.
Uma variante deste tipo de menu, inspirado em alguns padrões de
Uma variante deste tipo de menu, inspirado em alguns padrões de
aplicativos nativos, é a navegação
aplicativos nativos, é a navegação
off-canvas
off-canvas
. Essa navegação fica
. Essa navegação fica
escondida debaixo de um link no menu ou ícone. Quano o usuário
escondida debaixo de um link no menu ou ícone. Quano o usuário
clica, a navegação desliza em forma de painel pela esquerda ou direita,
clica, a navegação desliza em forma de painel pela esquerda ou direita,
empurrando o conteúdo principal.
empurrando o conteúdo principal.
*Alguns exemplos do toggle navigation
*Alguns exemplos do toggle navigation
O problema com essas técnicas é que a navegação permanece no
O problema com essas técnicas é que a navegação permanece no
topo da tela. Neste artigo
topo da tela. Neste artigo
"Responsive Navigation: Optimizing for
"Responsive Navigation: Optimizing for
Touch Across Devices"
Touch Across Devices"
, Luke Wroblewski mostra
, Luke Wroblewski mostra
quais zonas são
quais zonas são
facilmente acessíveis aos diferentes tipos de dispositivos
facilmente acessíveis aos diferentes tipos de dispositivos
. A área
. A área
superior esquerda é a mais difícil de chegar num dispositivo mobile.
superior esquerda é a mais difícil de chegar num dispositivo mobile.
*Áreas facilmente acessíveis na tela de celulares e tablets, de acordo com Luke
*Áreas facilmente acessíveis na tela de celulares e tablets, de acordo com Luke
Wroblewski.
Wroblewski.
Com base nisto, Jason Weaver criou
Com base nisto, Jason Weaver criou
algumas demos
algumas demos
com a
com a
navegação no bottom da tela. Uma solução é o
navegação no bottom da tela. Uma solução é o
footer anchor
footer anchor
(âncora
(âncora
de rodapé), com a navegação fixada no bottom da página para
de rodapé), com a navegação fixada no bottom da página para
dispositivos menores, e um menu link que envia o usuário até lá. Esta
dispositivos menores, e um menu link que envia o usuário até lá. Esta
técnica utiliza o sistema link âncora do HTML.
técnica utiliza o sistema link âncora do HTML.
Diversas
Diversas
outras
outras
tentativas
tentativas
foram
foram
feitas
feitas
para solucionar problemas de
para solucionar problemas de
navegação no web design responsivo. Como você pode ver, ainda não
navegação no web design responsivo. Como você pode ver, ainda não
há uma solução perfeita; isso realmente depende do projeto e da
há uma solução perfeita; isso realmente depende do projeto e da
profundidade da navegação. Felizmente para nós, alguma pessoas
profundidade da navegação. Felizmente para nós, alguma pessoas
estão tentando resolver esse problema e têm compartilhado suas
estão tentando resolver esse problema e têm compartilhado suas
experiências com a comunidade.
experiências com a comunidade.
Outra questão não resolvida é qual ícone usar
Outra questão não resolvida é qual ícone usar
para dizer ao usuário
para dizer ao usuário
"Olá! há um menu escondido aqui. Clique em mim!". Alguns websites
"Olá! há um menu escondido aqui. Clique em mim!". Alguns websites
tem um símbolo de mais (+), outros uma grade de quadrados e alguns
tem um símbolo de mais (+), outros uma grade de quadrados e alguns
têm três linhas (como um ícone de hamburger).
têm três linhas (como um ícone de hamburger).
Para ver esses ícones usado em websites reais, dê uma olhada no
Para ver esses ícones usado em websites reais, dê uma olhada no
"We
"We
Need a Standard ‘Show Navigation’ Icon for Responsive Web Design”
Need a Standard ‘Show Navigation’ Icon for Responsive Web Design”
(precisamos de um ícone padrão no web design responsivo para
(precisamos de um ícone padrão no web design responsivo para
"mostrar a navegação").
"mostrar a navegação").
O maior problema é descobrir qual desses ícones seria o mais
O maior problema é descobrir qual desses ícones seria o mais
reconhecível a uma quantidade de usuários. Se todos
reconhecível a uma quantidade de usuários. Se todos
concordássemos em usar um deles, os usuários seriam instruídos a
concordássemos em usar um deles, os usuários seriam instruídos a
reconhecê-los. O problema é, qual escolher? Eu realmente gostaria de
reconhecê-los. O problema é, qual escolher? Eu realmente gostaria de
saber qual ícone vocês usam, então não hesite em compartilhar nos
saber qual ícone vocês usam, então não hesite em compartilhar nos
comentários 1 (1 - nota do tradutor: para deixar sua opinião sobre qual
comentários 1 (1 - nota do tradutor: para deixar sua opinião sobre qual
o ícone você utiliza, acesse o artigo original).
o ícone você utiliza, acesse o artigo original).
ESPECIFICIDADES MOBILE: "O USUÁRIO ESTÁ COM UM
ESPECIFICIDADES MOBILE: "O USUÁRIO ESTÁ COM UM
DISPOSITIVO MOBILE? SE SIM, O QUE PODE SER FEITO?"
DISPOSITIVO MOBILE? SE SIM, O QUE PODE SER FEITO?"
Dispositivos mobile e tablets são um mundo novo - longe dos
Dispositivos mobile e tablets são um mundo novo - longe dos
computadores desktops -, com suas próprias regras, comportamentos
computadores desktops -, com suas próprias regras, comportamentos
e capacidades. Podemos querer adaptar nossos projetos a esta nova
e capacidades. Podemos querer adaptar nossos projetos a esta nova
gama de capacidades.
gama de capacidades.
Detectando Capacidades Touch com JavaScript Nativo
Detectando Capacidades Touch com JavaScript Nativo
Além do tamanho da tela, aposto que se você perguntasse qual a
Além do tamanho da tela, aposto que se você perguntasse qual a
principal diferença entre mobiles (incluindo tablets) e desktops, a
principal diferença entre mobiles (incluindo tablets) e desktops, a
maioria das pessoas diriam ser a capacidade touch. Não há mouse
maioria das pessoas diriam ser a capacidade touch. Não há mouse
num celular (é verdade!), e com exceção de alguns dispositivos
num celular (é verdade!), e com exceção de alguns dispositivos
híbridos raros, em que você pode plugar um mouse, você não vai
híbridos raros, em que você pode plugar um mouse, você não vai
poder realizar muitos eventos num tablet com um mouse. Isto
poder realizar muitos eventos num tablet com um mouse. Isto
significa que, dependendo do browser, a pseudo-classe
significa que, dependendo do browser, a pseudo-classe
:hover
:hover
do
do
CSS pode não funcionar. Alguns browsers são inteligentes o bastante
CSS pode não funcionar. Alguns browsers são inteligentes o bastante
para oferecer um fallback nativo ao evento do hover traduzindo em
para oferecer um fallback nativo ao evento do hover traduzindo em
um evento touch. Infelizmente, nem todos os browsers são tão
um evento touch. Infelizmente, nem todos os browsers são tão
flexíveis assim. Criar um design que não dependa de elementos
flexíveis assim. Criar um design que não dependa de elementos
ocultos, a serem revelados sob eventos
ocultos, a serem revelados sob eventos
:hover
:hover
, seria o mais sensato.
, seria o mais sensato.
Capturar eventos touch
Capturar eventos touch
poderia também ser uma outra solução. A
poderia também ser uma outra solução. A
W3C working group começou a trabalhar numa
W3C working group começou a trabalhar numa
especificação de
especificação de
eventos touch
eventos touch
. Futuramente, seremos capazes de capturar eventos
. Futuramente, seremos capazes de capturar eventos
tais como
tais como
touchstart
touchstart
,
,
touchmove
touchmove
e
e
toucheend
toucheend
. Seremos capazes de
. Seremos capazes de
lidar com esses eventos diretamente no JavaScript sem a necessidade
lidar com esses eventos diretamente no JavaScript sem a necessidade
de frameworks de terceiros como
de frameworks de terceiros como
Hammer.js
Hammer.js
ou
ou
jGestures
jGestures
. Mas
. Mas
JavaScript é uma coisa - E o que acontece com o CSS?
JavaScript é uma coisa - E o que acontece com o CSS?
CSS nível 4 - Media Query "Pointer"
CSS nível 4 - Media Query "Pointer"
O CSS nível 4 especifica uma
O CSS nível 4 especifica uma
nova media querry chamada "pointer"
nova media querry chamada "pointer"
,
,
que pode ser usada para capturar a existência e precisão de um
que pode ser usada para capturar a existência e precisão de um
dispositivo apontador (pointing device), tal como um mouse. A media
dispositivo apontador (pointing device), tal como um mouse. A media
query tem um dos três valores:
query tem um dos três valores:
none
none
O dispositivo não tem nenhum pointing device.
O dispositivo não tem nenhum pointing device.
coarse
coarse
O dispositivo tem um pointing device com precisão limitada,
O dispositivo tem um pointing device com precisão limitada,
por exemplo, um celular ou tablet com capacidades touch,
por exemplo, um celular ou tablet com capacidades touch,
onde o "pointer" seria um dedo.
onde o "pointer" seria um dedo.
fine
fine
O dispositivo tem um pointing device preciso, como um
O dispositivo tem um pointing device preciso, como um
mouse, trackpad ou caneta (stylus).
mouse, trackpad ou caneta (stylus).
Usando esta media query, nós podemos ampliar a maneira de
Usando esta media query, nós podemos ampliar a maneira de
utilização de botões e links para dispositivos móveis:
utilização de botões e links para dispositivos móveis:
11. .
@media (pointer:coarse) {
@media (pointer:coarse) {
22. .
input
input
[
[
type
type
=
=
"submit"
"submit"
]
]
,
,
33. .
a
a
.button
.button
{
{
44. .
min-width
min-width
:
:
30px
30px
;
;
55. .
min-height
min-height
:
:
40px
40px
;
;
66. .
background
background
:
:
transparent
transparent
;
;
77. .
}
}
88. .
}
}
A media query pointer ainda não é suportada - apenas sendo
A media query pointer ainda não é suportada - apenas sendo
proposta. Todavia, ser potencial é enorme, pois seria permitiria
proposta. Todavia, ser potencial é enorme, pois seria permitiria
detectar dispositivos touch via CSS
detectar dispositivos touch via CSS
, sem a necessidade de uma
, sem a necessidade de uma
bilbioteca, como
bilbioteca, como
Modernizr
Modernizr
.
.
CSS nível 4 - Media Query "Hover"
CSS nível 4 - Media Query "Hover"
A especificação CSS nível 4 propõe uma nova
A especificação CSS nível 4 propõe uma nova
media query hover
media query hover
, que
, que
detecta se o sistema primário do dispositivo dá suporte ao hover. Ele
detecta se o sistema primário do dispositivo dá suporte ao hover. Ele
retorna valores
retorna valores
boleanos: 1
boleanos: 1
se o dispositivo suporta hover,
se o dispositivo suporta hover,
0
0
se não
se não
suporta. Note que isto não tem nada a ver com a pseudo-classe
suporta. Note que isto não tem nada a ver com a pseudo-classe
:hover
:hover
.
.
Usando a media query hover podemos melhorar a interface e ocultar
Usando a media query hover podemos melhorar a interface e ocultar
certas características dos dispositivos que o suportam. O código fica
certas características dos dispositivos que o suportam. O código fica
mais ou menos assim:
mais ou menos assim:
11. .
@media (hover) {
@media (hover) {
22. .
.hovercontent
.hovercontent
{
{
display
display
:
:
none
none
;
;
}
}
33. .
/* oculta o conteúdo apenas para dispositivos com suporte ao hover. */
/* oculta o conteúdo apenas para dispositivos com suporte ao hover. */
44. .
.hovercontent
.hovercontent
:hover
:hover
{
{
display
display
:
:
block
block
;
;
}
}
55. .
}
}
Pode também ser usado para criar menus dropdowns com hover; e o
Pode também ser usado para criar menus dropdowns com hover; e o
fallback para dispositivos mobile é em CSS nativo, sem a necessidade
fallback para dispositivos mobile é em CSS nativo, sem a necessidade
de um framework que detecte a feature.
de um framework que detecte a feature.
CSS nível 4 - Media Query Luminosity
CSS nível 4 - Media Query Luminosity
Outra capacidade dos dispositivos mobile é o sensor de luminosidade.
Outra capacidade dos dispositivos mobile é o sensor de luminosidade.
A especificação CSS nível 4 tem a
A especificação CSS nível 4 tem a
media query luminosity
media query luminosity
, que nos dá
, que nos dá
acesso ao sensor de luz dos dispositivos diretamente no CSS. Abaixo a
acesso ao sensor de luz dos dispositivos diretamente no CSS. Abaixo a
descrição da especificação.
descrição da especificação.
A característica da media "luminosity" é usada para verificar a
A característica da media "luminosity" é usada para verificar a
luminosidade do ambiente o qual o dispositivo está sendo usado,
luminosidade do ambiente o qual o dispositivo está sendo usado,
e permitir que o autor ajuste o estilo do documento
e permitir que o autor ajuste o estilo do documento
responsivamente.
responsivamente.
No futuro, seremos capazes de criar
No futuro, seremos capazes de criar
websites que respondam a
websites que respondam a
luminosidade do ambiente
luminosidade do ambiente
. Isto vai melhorar muito a experiência do
. Isto vai melhorar muito a experiência do
usuário. Seremos capazes de detectar, por exemplo, ambientes
usuário. Seremos capazes de detectar, por exemplo, ambientes
extremamente brilhantes usando o valor
extremamente brilhantes usando o valor
washed
washed
, adaptando o
, adaptando o
contraste do site ao local. O valor
contraste do site ao local. O valor
dim
dim
é usado para ambientes escuros
é usado para ambientes escuros
(a noite por exemplo), e o valor
(a noite por exemplo), e o valor
normal
normal
para quando o nível de
para quando o nível de
luminosidade não necessita de qualquer tipo de adaptação.
luminosidade não necessita de qualquer tipo de adaptação.
O código fica assim:
O código fica assim:
11. .
@media (luminosity: washed) {
@media (luminosity: washed) {
22. .
p
p
{
{
background
background
:
:
white
white
;
;
color
color
:
:
black
black
;
;
font-size
font-size
:
:
2em
2em
;
;
}
}
33. .
}
}
Como podemos ver, as CSS4 prometem um monte de coisas novas.
Como podemos ver, as CSS4 prometem um monte de coisas novas.
Se você está curioso em ver o que vem por aí - não só para mobile -
Se você está curioso em ver o que vem por aí - não só para mobile -
então dê uma olhada na
então dê uma olhada na
"Sneak Peek Into the Future: Selectors, Level
"Sneak Peek Into the Future: Selectors, Level
4"
4"
Mais Recursos Mobile para Detectar o Uso de API's e JavaScript
Mais Recursos Mobile para Detectar o Uso de API's e JavaScript
Muitas outras coisas poderiam ser detectadas para tornar a experiência
Muitas outras coisas poderiam ser detectadas para tornar a experiência
do usuário surpreendente num site responsivo. Por exemplo,
do usuário surpreendente num site responsivo. Por exemplo,
poderíamos ter acesso nativo ao giroscópio, bússola e acelerômetro
poderíamos ter acesso nativo ao giroscópio, bússola e acelerômetro
para detectar a orientação do dispositivo usando o
para detectar a orientação do dispositivo usando o
DeviceOrientationEvent
DeviceOrientationEvent
do HTML5. O
do HTML5. O
suporte ao
suporte ao
DeviceOrientationEvent
DeviceOrientationEvent
nos browsers do Android e iOS está ficando
nos browsers do Android e iOS está ficando
cada vez melhor, mas a especificação ainda está em fase de rascunho.
cada vez melhor, mas a especificação ainda está em fase de rascunho.
No entanto, a API parece promissora. Imagine jogar jogos HTML5
No entanto, a API parece promissora. Imagine jogar jogos HTML5
diretamente no browser!
diretamente no browser!
Outra API que seria particularmente utilizada por alguns usuários
Outra API que seria particularmente utilizada por alguns usuários
mobile é a de
mobile é a de
geolocation
geolocation
. A boa notícia é que ela já é
. A boa notícia é que ela já é
bem
bem
suportada
suportada
. Esta API
. Esta API
nos permite localizar geograficamente o usuário
nos permite localizar geograficamente o usuário
usando o GPS
usando o GPS
e inferir sua localização a partir de sinais de rede, como
e inferir sua localização a partir de sinais de rede, como
IP, RFID, Wi-Fi e endereços MAC Bluetooth. Isto pode ser usado em
IP, RFID, Wi-Fi e endereços MAC Bluetooth. Isto pode ser usado em
alguns sites responsivos para oferecer informações contextuais aos
alguns sites responsivos para oferecer informações contextuais aos
usuários. Uma grande cadeia de restaurantes poderia melhorar sua
usuários. Uma grande cadeia de restaurantes poderia melhorar sua
experiência mobile mostrando aos usuários a localização de seus
experiência mobile mostrando aos usuários a localização de seus
restaurantes em sua área. As possibilidades são infinitas.
restaurantes em sua área. As possibilidades são infinitas.
A W3C também propôs um rascunho para uma
A W3C também propôs um rascunho para uma
API de vibração
API de vibração
. Nele
. Nele
o browser pode oferecer um feedbacl tátil ao usuário em forma de
o browser pode oferecer um feedbacl tátil ao usuário em forma de
vibração. Isto, no entanto, ainda está engatinhando em campos mais
vibração. Isto, no entanto, ainda está engatinhando em campos mais
específicos de aplicações Web and mobile games in the browser.
específicos de aplicações Web and mobile games in the browser.
Outra API que tem sido altamente discutida é a
Outra API que tem sido altamente discutida é a
network information
network information
API
API
. A possibilidade de medir a largura de banda do usuário, e otimizar
. A possibilidade de medir a largura de banda do usuário, e otimizar
conforme o resultado, tem seduzido muitos desenvolvedores.
conforme o resultado, tem seduzido muitos desenvolvedores.
Seriamos capazes de servir imagens com qualidade de alta definição
Seriamos capazes de servir imagens com qualidade de alta definição
para usuários com alta largura de banda e imagens de baixa qualidade
para usuários com alta largura de banda e imagens de baixa qualidade
aos usuários com baixa largura de banda. Com o atributo
aos usuários com baixa largura de banda. Com o atributo
bandwith
bandwith
da
da
network API, seria possível calcular a velocidade de download de um
network API, seria possível calcular a velocidade de download de um
usuário em megabytes por segundo. O segundo atributo,
usuário em megabytes por segundo. O segundo atributo,
metered
metered
, é
, é
um booleano que nos diz se o usuário tem uma conexão aferida
um booleano que nos diz se o usuário tem uma conexão aferida
(como um cartão pré-pago). Esses dois atributos são atualmente
(como um cartão pré-pago). Esses dois atributos são atualmente
acessíveis via JavaScript.
acessíveis via JavaScript.
Infelizmente,
Infelizmente,
medir a conexão de um usuário é algo tecnicamente
medir a conexão de um usuário é algo tecnicamente
complicado
complicado
, pois uma conexão poderia mudar de forma abrupta. O
, pois uma conexão poderia mudar de forma abrupta. O
usuário poderia, por exemplo, entrar num túnel e perder sua conexão,
usuário poderia, por exemplo, entrar num túnel e perder sua conexão,
ou sua velocidade poderia cair de repente. Sendo assim, a media
ou sua velocidade poderia cair de repente. Sendo assim, a media
query mágica que mede a largura de banda parece ser hipotética no
query mágica que mede a largura de banda parece ser hipotética no
momento. Yoav Weiis escreveu um belo artigo sobre os problemas
momento. Yoav Weiis escreveu um belo artigo sobre os problemas
criados por essa media query e sobre medição de largura de banda
criados por essa media query e sobre medição de largura de banda
chamado
chamado
“Bandwidth Media Queries? We Don’t Need ’Em!”
“Bandwidth Media Queries? We Don’t Need ’Em!”
(media
(media
queries de largura de banda? Não precisamos delas!")
queries de largura de banda? Não precisamos delas!")
Muitas outras API's lidam com recursos mobile. Se você estiver
Muitas outras API's lidam com recursos mobile. Se você estiver
interessado em aprender mais, a Mozilla tem uma
interessado em aprender mais, a Mozilla tem uma
lista bem detalhada
lista bem detalhada
.
.
A maioria ainda não está completamente disponível ou padronizada, e
A maioria ainda não está completamente disponível ou padronizada, e
é destinada mais a aplicações web do que a sites responsivos. No
é destinada mais a aplicações web do que a sites responsivos. No
entanto, é um ótimo panorama de como grandes e complexos sites
entanto, é um ótimo panorama de como grandes e complexos sites
mobile podem ser no futuro.
mobile podem ser no futuro.
REPENSANDO A MANEIRA COMO NÓS E O USUÁRIO
REPENSANDO A MANEIRA COMO NÓS E O USUÁRIO
LIDAMOS COM O CONTEÚDO
LIDAMOS COM O CONTEÚDO
Do ponto de vista técnico, ainda existem muitos desafios ao lidar com
Do ponto de vista técnico, ainda existem muitos desafios ao lidar com
o conteúdo em grande escala. O método mobile-first tem sido parte
o conteúdo em grande escala. O método mobile-first tem sido parte
do processo de desenvolvimento e design já há algum tempo.
do processo de desenvolvimento e design já há algum tempo.
Poderíamos, por exemplo, servir a dispositivos mobile o mínimo de
Poderíamos, por exemplo, servir a dispositivos mobile o mínimo de
dados necessários, e então usar JavaScript e AJAX para
dados necessários, e então usar JavaScript e AJAX para
condicionalmente carregar mais conteúdo e imagens para desktop e
condicionalmente carregar mais conteúdo e imagens para desktop e
tablets. No entanto, para isto, também teríamos que
tablets. No entanto, para isto, também teríamos que
repensar como
repensar como
lidar com o conteúdo
lidar com o conteúdo
e ser capaz de priorizar uma forma de gerar um
e ser capaz de priorizar uma forma de gerar um
conteúdo suficientemente flexível e adaptável. Um bom exemplo disto
conteúdo suficientemente flexível e adaptável. Um bom exemplo disto
é o mapa de solução responsiva descrito acima: Carregamos uma
é o mapa de solução responsiva descrito acima: Carregamos uma
imagem para mobile, e melhoramos a experiência com um mapa real
imagem para mobile, e melhoramos a experiência com um mapa real
para desktops. Quanto mais responsivo o website, mais complexo será
para desktops. Quanto mais responsivo o website, mais complexo será
lidar com o conteúdo. Um código flexível pode nos ajudar a formatar
lidar com o conteúdo. Um código flexível pode nos ajudar a formatar
um conteúdo adaptável.
um conteúdo adaptável.
Uma forma sugerida por alguns é criar frases responsivas e marcá-las
Uma forma sugerida por alguns é criar frases responsivas e marcá-las
com spans que tenham classes, e então exibi-los de acordo com o
com spans que tenham classes, e então exibi-los de acordo com o
tamanho da tela. Aparar trechos das frases para dispositivos menores é
tamanho da tela. Aparar trechos das frases para dispositivos menores é
possível com media querries. Você pode ver esta técnica no 37signals'
possível com media querries. Você pode ver esta técnica no 37signals'
Signal vs. Noise
Signal vs. Noise
blog e no artigo de Frankie Roberto
blog e no artigo de Frankie Roberto
"Responsive Text"
"Responsive Text"
.
.
Mesmo que tal técnica pudesse ser usada para melhorar pequenas
Mesmo que tal técnica pudesse ser usada para melhorar pequenas
partes de um website, tais como um slogan do footer, aplicando isto a
partes de um website, tais como um slogan do footer, aplicando isto a
todos os textos de um site é difícil de imaginar.
todos os textos de um site é difícil de imaginar.
Isto levanta uma questão no web design responsivo que se tornará
Isto levanta uma questão no web design responsivo que se tornará
mais e mais importante no futuro: a importância de meta dados e a
mais e mais importante no futuro: a importância de meta dados e a
estrutura semântica de conteúdo. Se quisermos ser capazes de
estrutura semântica de conteúdo. Se quisermos ser capazes de
reutilizar o conteúdo de outros websites automaticamente, eles
reutilizar o conteúdo de outros websites automaticamente, eles
deverão estar bem estruturados e preparados para isto. Novas tags
deverão estar bem estruturados e preparados para isto. Novas tags
HTML5 como
HTML5 como
article
article
e
e
section
section
são um bom começo para ganhar
são um bom começo para ganhar
algum significado semântico. O objetivo é pensar e estruturar o
algum significado semântico. O objetivo é pensar e estruturar o
conteúdo de modo que um único item (por exemplo, um post em um
conteúdo de modo que um único item (por exemplo, um post em um
blog), possa ser reutilizado e exibido em diferentes dispositivos, e em
blog), possa ser reutilizado e exibido em diferentes dispositivos, e em
diferentes formatos.
diferentes formatos.
O grande desafio será
O grande desafio será
fazer com que os metadados sejam facilmente
fazer com que os metadados sejam facilmente
compreendidos
compreendidos
a todas as pessoas que fazem parte da criação de
a todas as pessoas que fazem parte da criação de
conteúdo do website. Teremos que explicar a todos eles como os
conteúdo do website. Teremos que explicar a todos eles como os
metadados podem ser utilizados para priorizar o conteúdo e
metadados podem ser utilizados para priorizar o conteúdo e
programaticamente reunir o conteúdo, sendo uma plataforma
programaticamente reunir o conteúdo, sendo uma plataforma
independente. Um grande desafio será o de ajudá-los a pensar em
independente. Um grande desafio será o de ajudá-los a pensar em
blocos reutilizáveis, em vez de um grande pedaço de texto no qual
blocos reutilizáveis, em vez de um grande pedaço de texto no qual
eles copiam e colam conteúdo do Microsoft Word no seu sistema de
eles copiam e colam conteúdo do Microsoft Word no seu sistema de
gerenciamento de conteúdo WYSIWYG. Teremos que ajudá-los a
gerenciamento de conteúdo WYSIWYG. Teremos que ajudá-los a
entender que conteúdo e estrutura são coisas distintas e
entender que conteúdo e estrutura são coisas distintas e
independentes, como quando os designers tiveram que entender que
independentes, como quando os designers tiveram que entender que
o conteúdo (HTML) e a apresentação (CSS) eram mantidos melhor
o conteúdo (HTML) e a apresentação (CSS) eram mantidos melhor
separados.
separados.
Não podemos nos dar ao luxo de escrever um conteúdo que seja
Não podemos nos dar ao luxo de escrever um conteúdo que seja
orientado a uma única plataforma
orientado a uma única plataforma
. Quem sabe em qual dispositivo
. Quem sabe em qual dispositivo
ele será publicado daqui a seis meses, ou um ano?
ele será publicado daqui a seis meses, ou um ano?
Precisamos
Precisamos
preparar nossos websites para o inesperado
preparar nossos websites para o inesperado
. Mas, para isto,
. Mas, para isto,
precisamos de ferramentas melhores de publicação também. Karen
precisamos de ferramentas melhores de publicação também. Karen
McGrane deu uma palestra intitulada
McGrane deu uma palestra intitulada
"Adapting Ourselves to Adaptive
"Adapting Ourselves to Adaptive
Content"
Content"
(Nos Adaptando a um Conteúdo Adaptável), com alguns
(Nos Adaptando a um Conteúdo Adaptável), com alguns
exemplos reais da indústria editorial. Ela fala sobre o processo de
exemplos reais da indústria editorial. Ela fala sobre o processo de
criação de conteúdo reutilizável e apresenta a ideia do COPE: create
criação de conteúdo reutilizável e apresenta a ideia do COPE: create
once and publish everywhere (Criar uma vez e publicar em todos os
once and publish everywhere (Criar uma vez e publicar em todos os
lugares). Precisamos construir CMS's melhores, que possam utilizar e
lugares). Precisamos construir CMS's melhores, que possam utilizar e
gerar metadados para priorizar o conteúdo. Precisamos explicar às
gerar metadados para priorizar o conteúdo. Precisamos explicar às
pessoas como o sistema funciona e pensar em objetos de módulos de
pessoas como o sistema funciona e pensar em objetos de módulos de
conteúdo reutilizáveis em vez de páginas WYSIWYG. Como McGrane
conteúdo reutilizáveis em vez de páginas WYSIWYG. Como McGrane
diz:
diz:
"Você pode escrever três versões diferentes de título; você pode
"Você pode escrever três versões diferentes de título; você pode
escrever duas versões diferentes de resumos e anexar diversas
escrever duas versões diferentes de resumos e anexar diversas
imagens para isto, com diferentes cortes e tamanhos, e você
imagens para isto, com diferentes cortes e tamanhos, e você
pode não ser a pessoa responsável em decidir qual imagem ou
pode não ser a pessoa responsável em decidir qual imagem ou
qual título será exibido em uma determinada plataforma. Essa
qual título será exibido em uma determinada plataforma. Essa
decisão será tomada pelos metadados. Será feita pelas regras de
decisão será tomada pelos metadados. Será feita pelas regras de
negócios. [...] Metadados é a nova direção de arte."
negócios. [...] Metadados é a nova direção de arte."
Truncar o conteúdo para dispositivos menores não é uma estratégia
Truncar o conteúdo para dispositivos menores não é uma estratégia
de conteúdo "à prova do futuro". Precisamos de CMS's que ofereçam
de conteúdo "à prova do futuro". Precisamos de CMS's que ofereçam
a estrutura necessária para criar esse conteúdo reutilizável. Precisamos
a estrutura necessária para criar esse conteúdo reutilizável. Precisamos
de melhores workflows de publicação em CMS's também. Interfaces
de melhores workflows de publicação em CMS's também. Interfaces
desajeitadas assustam os usuários, e a maioria das pessoas que geram
desajeitadas assustam os usuários, e a maioria das pessoas que geram
conteúdo não estão particularmente confortáveis com ferramentas
conteúdo não estão particularmente confortáveis com ferramentas
complicadas. Temos que oferecer a essas pessoas ferramentas mais
complicadas. Temos que oferecer a essas pessoas ferramentas mais
fáceis de entender e que lhe ajudem a publicar um conteúdo limpo e
fáceis de entender e que lhe ajudem a publicar um conteúdo limpo e
semântico, independente da apresentação.
semântico, independente da apresentação.
CONCLUSÃO
CONCLUSÃO
Por mais longo que este artigo seja,
Por mais longo que este artigo seja,
ele só abrange o básico
ele só abrange o básico
. Mas
. Mas
agora, a maioria dos leitores da Smashing Magazine entendem que o
agora, a maioria dos leitores da Smashing Magazine entendem que o
web design responsivo é muito mais que usar media queries, escolher
web design responsivo é muito mais que usar media queries, escolher
breakpoints certos e dobrar o tamanho das imagens para celulares de
breakpoints certos e dobrar o tamanho das imagens para celulares de
alta densidade. Como você pode ver, o caminho é longo e ainda não
alta densidade. Como você pode ver, o caminho é longo e ainda não
chegamos lá. Há ainda muitas questões não resolvidas, e a solução
chegamos lá. Há ainda muitas questões não resolvidas, e a solução
responsiva perfeita ainda não existe.
responsiva perfeita ainda não existe.
Soluções técnicas podem ser descobertas no futuro usando alguma
Soluções técnicas podem ser descobertas no futuro usando alguma
nova tecnologia apresentada neste artigo, com a ajuda da
nova tecnologia apresentada neste artigo, com a ajuda da
W3C
W3C
,
,
WHATWG
WHATWG
e organizações como o
e organizações como o
Filament Group
Filament Group
.
.
Mais importante, nós web designers e desenvolvedores podemos
Mais importante, nós web designers e desenvolvedores podemos
ajudar a encontrar soluções ainda melhores. Pessoas como
ajudar a encontrar soluções ainda melhores. Pessoas como
Luke
Luke
Wroblewski
Wroblewski
e
e
Brad Frost
Brad Frost
, e todas as incríveis pessoas mencionadas
, e todas as incríveis pessoas mencionadas
neste artigo estão experimentando uma série de soluções e técnicas
neste artigo estão experimentando uma série de soluções e técnicas
diferentes. Se serão bem ou mal sucedidas,
diferentes. Se serão bem ou mal sucedidas,
a coisa mais importante é
a coisa mais importante é
compartilhar
compartilhar
o que nós - designers, desenvolvedores, estrategistas de
o que nós - designers, desenvolvedores, estrategistas de
conteúdo e membros da comunidade web - estamos fazendo para
conteúdo e membros da comunidade web - estamos fazendo para
tentar resolver alguns dos desafios da comunidade do web design.
tentar resolver alguns dos desafios da comunidade do web design.
Afinal, estamos todos no mesmo barco, tentando tornar a web um
Afinal, estamos todos no mesmo barco, tentando tornar a web um
lugar melhor, não estamos?
lugar melhor, não estamos?
Will Sales
Will Sales
Trabalha e se diverte ao mesmo tempo com Design
Trabalha e se diverte ao mesmo tempo com Design
Digital e Arquitetura de Informação na Sparkle e Fatec
Digital e Arquitetura de Informação na Sparkle e Fatec
Barueri. É graduando em desenvolvimento de
Barueri. É graduando em desenvolvimento de
sistemas para a internet.
sistemas para a internet.
0 comentários
Deixar uma mensagem...
Mais votadosMais votados ComunidadeComunidade ⚙⚙ ⤤⤤CompartilharCompartilhar
Nenhum comentário até o momento.
Feed de com entáriosr Ins crever-s e via em ai l✉
0★
---
---
Traduzido com autorização da
Traduzido com autorização da
Smashing Magazine
Smashing Magazine
.
.
Artigo original escrito por
Artigo original escrito por
Stéphanie Walter
Stéphanie Walter
.
.
Acesse o artigo original na
Acesse o artigo original na
Smashing Magazine
Smashing Magazine
- "The State Of
- "The State Of
Responsive Web Design" - 29 de maio de 2013.
Responsive Web Design" - 29 de maio de 2013.
---
---
02
02
jul
jul
O bbburp! traduz os melhores artigos da web!
O bbburp! traduz os melhores artigos da web!
6
6
17
17
![Web Design Responsivo com CSS3 [MVP ShowCast 2013 - DEV - Desenvolvimento Web]](https://img.document.onl/doc/110x75/547b1e4d5806b5d63f8b459b/web-design-responsivo-com-css3-mvp-showcast-2013-dev-desenvolvimento-web.jpg)
