Design Adaptável. Web sites para pessoas, em qualquer lugar ou dispositivo.

Otimizando imagens para cada contexto de uso no WordPress

Caso o usuário esteja acessando seu site de um dispositivo móvel não faz sentido carregar as imagens utilizadas nas versões para desktop para então utilizar as técnicas de imagens fluidas. Neste artigo vou demonstrar como usar a detecção de dispositivos do lado do servidor para servir imagens adequadas para cada contexto de uso usando a plataforma WordPress.

Mobile first vs desktop first

Desde que surgiu o conceito de Design Adaptável que uma discussão se arrasta e preenche muitas páginas de blogs sobre webdesign. Seria o Design Adaptável a "bala de prata" para construirmos sites mobile em uma única tacada... ou com um único tiro? Para demonstrar o impacto na velocidade de carregamento do site veja na íntegra o benchmark em vídeo.

Responsive Web Design – o livro

Desde o surgimento das técnicas de adaptação que foram trazidas ao nosso conhecimento, este é o primeiro livro que aborda o assunto. Ethan não criou uma tecnologia que permitiu que os sites se adaptassem aos dispositivos, ele foi inteligente o suficiente para perceber que a tecnologia atual era suficiente para tal uso e às combinou de forma única.

Temas adaptáveis para WordPress

Como este é o primeiro post sobre o assunto, vou simplesmente apresentar algumas opções de temas gratuitos para Wordpress. E nos próximos artigos vou escolhendo alguns temas para colocar minhas reflexões sobre as adaptações propostas com foco na experiência de navegação, usabilidade e design. Deixe suas impressões e sugestões de novos temas!

Liquidificando: Webinsider

Estou de volta com mais um artigo “liquidificando”. Desta vez aplicando as técnicas de adaptação no site Webinsider, no ar desde 2000, criado pelo jornalista Vicente Tardin. Durante as adaptações fui explicando passo a passo as técnicas de layout e imagens fluidas. O resultado é bastante interessante, só parei nos banners em iframes... aí não deu. ;-)

O passo a passo dos wireframes do blog Design Adaptável

Wireframe é um guia visual para o site que organiza os elementos da interface e conteúdo no espaço. Fornece a estrutura que será usada pelo designer para construir o layout, bem como requisitos funcionais que serão usados pelo desenvolvedor. Por isso deve ser simples, permitindo rápidas alterações; e informativo, permitindo que se façam testes com usuários.

Liquidificando: Crimes Tipográficos

Definição de liquidificação: ato de transformar uma substancia sólida ou gasosa, de forma mecânica ou química, em outra no estado líquido da matéria. A proposta deste post é mostrar em tempo real como é possível fazer adaptações nos sites fixos para se tornarem fluidos e assim proporcionar uma melhor experiência de navegação.

Arquitetura da Informação – A ordem dos fatores altera o produto (parte 3)

Todas as decisões sobre a adaptação do site não devem ser pensadas apenas pelo olhar estético, mas também pelo viés da Arquitetura da Informação que tem a responsabilidade de organizar o conteúdo de forma que faça sentido e atenda as necessidades dos usuários. Por isso, se faz necessário pensar em como esta adaptação acontecerá logo no início do projeto.

Arquitetura da Informação – Adaptando títulos, links e botões (parte 2)

A Arquitetura da Informação trata não só da organização das informações, mas também da rotulagem de links e botões. As vezes temos um rótulo para um botão que julgamos como ideal, mas acaba produzindo um resultado visual indesejado, pois ao mesmo tempo que o rótulo é explicativo torna o botão desproporcional aos objetos ao redor.

Arquitetura da Informação “adaptável” (parte 1)

A Arquitetura da Informação se baseia no homem, ou seja, na forma como as pessoas pensam e interpretam o mundo, por isso o contexto em que estamos inseridos passa a ser fundamental nesta abordagem. Telas grandes são capazes de conter mais informações. Esta constatação por si só já nos força a pensar como será a adaptação de um site em desktops para smartphones.