IMG_0497 24.02.15

Imagens responsivas

Olá gente, tudo bom?

É tanta informação que mal tive tempo de escrever entre uma super apresentação e outra. Mas agora encontrei um tempinho… Pela manhã no #awwwardsBCN uma das apresentações que chamaram atenção foi a de um dos desenvolvedores do Opera, o super bem-humorado Bruel Lawson – @brucel – que compartilhou as mais recentes novidades relacionadas à imagens responsivas.

O que é responsivo? Brucel trouxe uma definição bastante objetiva do termo referindo-se a ele como ‘algo que responde rápido de forma devida e adequada à uma situação específica’.

IMG_0162

No caso das imagens responsivas, Brucel mencionou que “quanto maior o tempo de carregamento das imagens, mais a concorrência ganha” pois “no mundo world wide web sempre há alguém à frente”.

Cada segundo a mais que uma imagem demora para carregar no seu website, é uma oportunidade a menos de efetivação simplesmente porque o usuário não espera.

0.5s de atraso é equivalente a uma redução de 20% no tráfego do seu website.

Brucel apresenta também alternativas que já começam a ser implementadas nos navegadores mais modernos como o elemento picture. Ele foi baseado no elemento Video do HTML5 que tem por finalidade especificar diferentes fontes URL para uma mesma imagem dependendo do tipo de dispositivo que o usuário estiver acessando sua webapp ou site. Os dispositivos com tela de retina tem em torno de x2 ou mais pixels que os dispositivos de tela normal, por essa razão as imagens podem aparecer borradas se não houver o cuidado de configurá-las através do elemento picture.

Os browsers antigos não seriam afetados por ela uma vez que é possível ainda declarar o src padrão dentro da nova tag picture, apenas os navegadores mais modernos que já suportam a tag – Chrome, Opera, Android – interpretariam as novas declarações. É possível que nos próximos meses todos os browser já sigam nessa direção. Inclusive o firefox já declarou que suportará a tag PICTURE em alguns meses.

Gente, tenho aprendido muito aqui e vai levar um tempinho para organizar tudo! kkkkkkk Hoje já teve uma palestra exclusiva só para tipografia responsiva – interessantíssimo – “ideias estúpidas”, empatia nos usuários, princípios para compreender o projeto (etapas que precedem à criação)… vamos em frente que ainda há muitos mais, escreverei mais sobre eles em breve.

Seguem os slides da palestra do @brucellawson sobre imagens responsivas para telas de retina, com a tag PICTURE: http://brucelawson.github.io/talks/2015/awwwards/

Agradeço a você pelo seu tempo! Por favor, deixe seu comentário sobre esse tema…


Hello guys, how are you?

I’ve been receiving so many information that barely had time to write between one super presentation and another. But now I found some time … This morning at #awwwardsBCN one of the presentations that call most of my attention was the one of the Opera developers, super funny Bruel Lawson -brucel – who shared the latest news related to the responsive images.

What is ‘responsive’? Brucel brought a pretty straightforward definition of the term referring to it as ‘something that responds fast due and proper form to a specific situation’.

In the specific case of responsive images, Brucel mentioned that “the larger the images load time, more competition wins” because “in the world world wide web there is always someone ahead.”

Each second longer than it takes to load an image on your website, it is one less opportunity of effectiveness simply because the user does not wait that long.

0.5s delay is equivalent to a 20% reduction in traffic to your website.

Brucel also presents alternatives that are beginning to be implemented in most modern browsers such as picture element. It was based on the Video element of HTML5 which aims to specify different URL sources for the same image depending on the type of device that the user is accessing your webapp or website. The devices with retina display has around x2 or more pixels than the normal screen devices, therefore the pictures may appear blurred if not careful to configure them through the picture element.

The older browsers would not be affected by it since it is still possible to declare the src standard within the new picture tag, only the most modern browsers already support the tag – Chrome, Opera, Android – interpret the new reports. It is possible that in the coming months all browser already follow this direction. Including firefox has held that support the PICTURE tag in a few months.

I have been learning a lot here and it will take a little time to organize everything! kkkkkkk Today we had an exclusive talk about responsive typography – very interesting – “stupid ideas”, users empathy, principles to understand the project (steps preceding the creation) … there are still many more coming, I’ll keep writing more about them in soon.

Follow @brucellawson the lecture slides on responsive images for retina screens, with the tag PICTURE: http://brucelawson.github.io/talks/2015/awwwards/

Thank you everybody for your time! Please, drop us a message and tell us what’s on your mind…

© guibento.com, 2015. All rights reserved. Done by Gui Bento