locaweb
45
1
Megamenu de itens importantes é um dos destaques do site da Starbucks, cujo slideshow
varia de acordo com o tamanho da tela, oferecendo uma navegação amigável ao visitante
2
Adcast no topo do site revela cuidado
da Adobe com o design responsivo
3
Elementos do site Media Queries variam
de tamanho para se adequar às telas
2
Adobe
(
O design responsivo desse site
aparece dentro do próprio adcast
do topo da página, que mostra a
preocupação da empresa em fornecer
compatibilidade com os dispositivos
do mercado. Outra consideração seria
para a questão do menu, que em
janelas menores vira um quadrado no
canto superior esquerdo da tela – que
por sua vez aponta para o rodapé da
página. “Essa é uma solução muito
mais interessante do que o menu virar
um
select
de opções, como era moda
no início da web responsiva. O site
da Adobe também é extremamente
vertical, facilitando o número de
elementos a ser implementados e
trabalhados”, aponta Lopes.
3
Media Queries
(
O destaque, segundo Lopes, é
a pouca mudança de posição dos
elementos, que trabalham mais com o
tamanho dos boxes (imagens) conforme
o espaço da tela, além da alteração
no tamanho da fonte. Isso caracteriza
uma pequena mudança de identidade
visual. “A mudança de cor nos
botões do rodapé é muito inteligente.
notebooks, passaram a ser (mais do
que nunca) tablets e smartphones.
Portanto, site que não roda em
determinado navegador, ou que tem
conteúdo lento e distorcido, não
costuma ter perdão: deixa de ser
acessado rapidamente.
Por conta disso, programadores e
desenvolvedores precisam pensar na
melhor experiência online possível
para as pessoas que usam todos os
tipos de mídias. Aí entram em cena
termos com TableLess e Responsive
Web Design. O Responsive Web
Design, ou web design responsivo,
em português, agrega um conjunto de
boas práticas cujo objetivo é entregar
de maneira eficaz conteúdo para os
diversos equipamentos, sejam tablets,
notebooks ou smartphones.
Já o termo TableLess é uma
forma de desenvolvimento de sites
que não usa tabelas (tables) para a
disposição do conteúdo na página,
acatando sugestão do W3C (World
Wide Web Consortium). De maneira
simplificada, o consórcio defende
que os códigos HTML deveriam
ser usados para o propósito a que
foram criados e que tabelas foram
desenvolvidas apenas para exibir
dados tabulares.
Especialistas da Locaweb,
como Pedro Lemes, Gregory
Lopes, William Moraes e Marco
Bruno, que fazem parte da equipe
de desenvolvimento do site da
empresa, listaram dez supersites
que podem ser considerados casos
de sucesso em TableLess e design
responsivo. Confira:
1
Starbucks
É simples, rápido e funciona
muito bem tanto em desktop quanto
em mobile. “Ao ser aberto no
desktop, tem a opção de megamenu,
que é muito interessante. E quando
a tela é diminuída, ele mostra
apenas os links mais importantes,
para não atrapalhar a navegação do
usuário”, diz Lemes. “Outro fator de
que eu gosto bastante é o slideshow.
Em resoluções grandes, ele tem uma
forma: thumbnails são mostradas na
lateral. Já em tablets, os thumbnails
não são mostrados, dando maior
destaque ao slide. Por fim, no
mobile, os thumbnails das laterais
vão para baixo dos slides e viram
bullets”, completa o especialista.
design
designderespeito
