Web Design Responsivo

  • View
    90

  • Download
    7

Embed Size (px)

Text of Web Design Responsivo

  • Buscar

    home

    home

    o bbburp!

    o bbburp!

    artigos

    artigos

    categorias

    categorias

    d um al!

    d um al!

    O Cenrio do Web

    O Cenrio 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, Stphanie Walter mostra o

    Smashing Magazine, Stphanie Walter mostra o

    que , o que ser possvel, e o que precisa ser

    que , o que ser possvel, e o que precisa ser

    melhorado no RWD.

    melhorado no RWD.

    DESENVOLVIMENTO

    DESENVOLVIMENTO

    DESIGN

    DESIGN

    EXPERINCIA DO USURIO

    EXPERINCIA DO USURIO

    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 experincia neste tema e tm nos ajudado a fazer

    possuem vasta experincia neste tema e tm 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 possvel fazer hoje, o que ser

    Neste artigo, vamos ver o que j possvel fazer hoje, o que ser

    possvel no futuro - usando propriedades ainda no padronizadas

    possvel no futuro - usando propriedades ainda no padronizadas

    (como CSS nvel 4 e API's do HTML5) - e o que ainda precisa ser

    (como CSS nvel 4 e API's do HTML5) - e o que ainda precisa ser

    melhorado. Este no um artigo to completo, por isso no

    melhorado. Este no um artigo to completo, por isso no

    entraremos a fundo em cada tcnica, entretanto, voc ter links e

    entraremos a fundo em cada tcnica, entretanto, voc ter links e

    referncias para explorar por conta prpria.

    referncias para explorar por conta prpria.

    O CENRIO DAS IMAGENS NO WEB DESIGN RESPONSIVO

    O CENRIO DAS IMAGENS NO WEB DESIGN RESPONSIVO

    H um aspecto melhor para comear a falar no web design responsivo

    H um aspecto melhor para comear a falar no web design responsivo

    que no seja imagens? Este at agora tem sido o tpico principal. E

    que no seja imagens? Este at agora tem sido o tpico 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

    proporo de pixel maior que 2; esses dispositivos so chamados pela

    proporo de pixel maior que 2; esses dispositivos so 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

    notificaes dos novos posts por

    notificaes 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 perfeio no pixel, porm imagens

    A maioria dos designers buscam a perfeio no pixel, porm 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 no mesmo? No entanto, isso pode

    dispositivos parece ser tentador no 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 usurios de dispositivos

    tamanho levam mais tempo para carregar, e usurios 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

    necessria para fazer o download dessas imagens. Alm disso,

    necessria para fazer o download dessas imagens. Alm disso,

    dependendo do pas em que o usurio vive, esta largura de banda

    dependendo do pas em que o usurio 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? Teramos uma maneira de

    quando ele s necessita de uma de 300? Teramos uma maneira de

    "cropar" essas imagens para que usurios de dispositivos menores

    "cropar" essas imagens para que usurios de dispositivos menores

    possam focar no que realmente importa a eles?

    possam focar no que realmente importa a eles?

    Duas solues de marcao: O elemento e o atributo

    Duas solues de marcao: O elemento 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 marcao das imagens embutidas em uma pgina HTML.

    mudar a marcao das imagens embutidas em uma pgina 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 flexvel, o elemento

    elemento novo e mais flexvel, o elemento

    picture

    picture

    . O conceito usar

    . O conceito usar

    as j to conhecidas media queries para

    as j to 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 marcao para vdeo,

    imagens menores. Funciona um pouco como a marcao para vdeo,

    mas com imagens diferentes sendo refenciadas no elemento de

    mas com imagens diferentes sendo refenciadas no elemento de

    origem.

    origem.

    O cdigo na especificao proposta fica da seguinte forma:

    O cdigo na especificao proposta fica da seguinte forma:

    11. .

    22. .

    33. .

    44. .

    55. .

    66. .

    Accessible text

    Accessible text

    77. .

    Se oferecer fontes diferentes para imagens possvel, poderamos

    Se oferecer fontes diferentes para imagens possvel, poderamos

    tambm imaginar o fornecimento de imagens com

    tambm 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

    tpico

    tpico

    "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 soluo vem sendo discutida pelo

    A soluo vem sendo discutida pelo

    W3C Responsive Images

    W3C Responsive Images

    Community Group

    Community Group

    mas, at onde sabemos, ainda no utilizvel por

    mas, at onde sabemos, ainda no utilizvel por

    RT @

    RT @

    tableless

    tableless

    : Padres Complexos de

    : Padres Complexos de

    Navegao no Design Responsivo

    Navegao no Design Responsivo

    http://t.co/wWR8MmRClw

    http://t.co/wWR8MmRClw

    Uma

    Uma

    traduo do @

    traduo 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...

    Ns adoramos!

    Ns 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 Desig