![[ Ferramentas Blog ]](/wordpress/wp-content/themes/fb5/images/logo.png){kind=logo}
Vamos falar a fundo sobre Layouts Responsivos (Responsive Design) para Blogs.
Antigamente ao desenvolver um website ou blog você devia tomar cuidados com os tamanhos de telas, geralmente tomávamos como padrão um valor que seria utilizado para qualquer tipo de resolução de tela do visitante. Com a grande variação de dispositivos moveis e resoluções de telas que encontramos hoje em dia, fica praticamente impossível ter um padrão e ao mesmo tempo apresentar com qualidade o conteúdo do blog/site para os todos que acessam.
Para resolver este problema, desenvolvemos hoje blogs e sites responsivos que poderão servir e se ajustar para qualquer tipo de dispositivo de uma forma a proporcionar uma boa experiência para os nossos usuários.
Caso você não sabia o que é um Layout Responsivo (Responsive Design), recomendo você ler este artigo:
A ideia é fazer com que que o layout de seu blog ou site reconheça que tipo de tela o seu visitante está usando para acessar o conteúdo do Blog/site, ajustando automaticamente, sem plugins ou redirecionamentos para endereços especiais.
Introdução desta serie de posts:
Este post é uma introdução para uma serie de posts que estarei escrevendo com o intuito de ensinar e informar nossos leitores como funciona um layout responsivo e como desenvolve-lo. O conteúdo dessa séria será técnico, mas também muito informativo e prático para blogueiros em todos os níveis.
Para o melhor aproveitamento e entendimento do que estaremos estudando nos próximos posts desta serie, é de vital importância que você tenha conhecimento em:
- HTML/XHTML básico
- CSS básico
Estudaremos a construção de layouts e a adaptação com exemplos práticos e tudo que for estudado aqui será possível aplicar ao Blogger ou WordPress.
Além do funcionamento, você aprenderá como criar novos elementos com jQuery que serão apresentados apenas para os tamanhos de tela que você escolher e ainda como fazer o Media Queries funcionar no Internet Explorer 7 e 8 (caso seja necessário o funcionamento deles nestes navegadores).
Para não terminar este post aqui apenas como introdução ao que estaremos estudando, vou aproveitar e introduzir alguns conceitos que serão requisitos para os futuros artigos desta serie.
O que são Media Types e como funcionam?
Como todos já sabemos o HTML foi desenvolvido para marcar o conteúdo de uma página HTML e o CSS para formatar a apresentação da página. São os códigos por trás de praticamente todos os tipos de blogs e sites.
Utilizando o Media Types podemos avisar ao dispositivo interpretador qual será a folha de estilos utilizada e como será a apresentação.
Um exemplo clássico de sua utilização é a seguinte:
Na primeira linha estamos indicando uma folha de estilos para monitores utilizando media=”screen” e na segunda CSS para impressão definindo media=”print”.
É possível declarar também o tipo de “media” utilizando @import do CSS:
Também como anternativa inserir no cabeçalho do site ou em folhas de estilo:
Conheça todos os tipos de “media” que você pode detectar para exibir folhas de estilos para cada um.
- all: todos os tipos de dispositivos
- braille: dispositivos de leitura tátil
- embossed: impressão para leitura tátil (braille)
- handheld: dispositivos portáteis (tela pequena e largura de banda limitada)
- print: impressão comum em papel
- projection: apresentações (exemplo: powerpoint)
- screen: telas coloridas (computadores, tabletes, smartphones e etc)
- speech: dispositivos com sintetizadores de voz
- tty: dispositivos que utilizam uma grade fixa de caracteres (como teletipos, terminais, ou dispositivos portáteis com capacidades de exibição limitadas)
- tv: televisores
Estas propriedades foram introduzidas no CSS 2 e são recomendadas pelo W3C.
O que são Media Queries e como funcionam?
Utilizando apenas os Medias Types não é possível detectar um tablet, por exemplo. Mesmo que ele tenha algumas características de um dispositivo handheld, ele não funciona na pratica como um, pois existem tablets com resoluções similares a monitores comuns e ao mesmo tempo alguns smartphones com largura de tela pequena estarão sendo servidos com esta folha de estilos.
Para que seja possível detectar telas realmente pequenas foi criado com o CSS3 as Media Queries.
Utilizando Media Queries é possível detectar altura e largura.
O Media Queries surgiu com o CSS3 e é destinado a detectar características do dispositivo do visitante, como por exemplo: largura de tela, altura, cor e etc. Tudo o que for necessário para que o layout de seu blog ou site se ajuste àquele tipo de resolução.
Desta forma podemos inserir várias folhas de estilo, uma para cada tipo de dispositivo: uma folha de estilos para monitores com alta resolução, uma para tablets, uma para smartphones e outras quantas você julgar necessário (por exemplo: telas coloridas e telas monocromáticas).
Aqui um exemplo de como podemos utilizar para detectar vários tipos de dispositivos com larguras e características diferentes:
É possível ainda utilizar condições de exibição utilizando os valores: “only”, “and” e “not”:
Podemos utilizar com o @import e em arquivos css, aqui um exemplo de como utilizar:
Conheça a lista completa de características que é possível inspecionar:
Dispositivos visuais e táteis:
- width: Largura do browser
- height: Altura do browser
- device-width: Largura do dispositivo
- device-height: Altura do dispositivo
- grid: Verifica se o dispositivo de saída utiliza grade ou bitmap
Mídias de bitmap (imagens):
- orientation: Orientação do bitmap. Exemplo: retrato (portrait) e paisagem (landscape)
- aspect-ratio: Descreve a relação de aspecto da área de exibição de destino do dispositivo de saída (largura e altura)
- device-aspect-ratio: Descreve a relação de aspecto do dispositivo de saída (largura e altura)
- resolution: Resolução do dispositivo de saída
TV:
- scan: Descreve o processo de digitalização do dispositivo
Todas as mídias visuais:
- color: Mídia colorida (sendo possível definir valores para o máximo ou mínimo de cores suportadas)
- color-index: Verifica a existência de uma tabela de cores do dispositivo
- monochrome: Mídia monocromática (preto e branco)
Considerações:
Aqui tivemos uma explicação técnica de como funcionam os Media Types e Media Queries, como funcionam e o que são capazes de fazer.
Para desenvolver um layout responsivo não é necessário utilizar tudo o que foi visto neste post, por este motivo vocês não precisam decorar tudo isso.
Exatamente por este motivo não entramos em detalhes de todos as funcionalidades. Caso seja de seu interesse uma leitura mais detalhada e técnica do que foi aprendido aqui hoje, sugiro consultar os seguintes links:
Fontes:
- W3C Media Types (em inglês): http://www.w3.org/TR/CSS2/media.html
- W3C Media Queries (em inglês): http://www.w3.org/TR/css3-mediaqueries/
Agora, esperem por mais. Esta série será muito completa. Deem sugestões, façam perguntas e comentem aqui mesmo para que os próximos artigos da série também contemplem as dúvidas mais comuns dos blogueiros e desenvolvedores sobre Layouts Responsivos.
Muito interessante sua série, eu mesmo procuro editar meus templates, adiciono menus, códigos e dicas aqui mesmo do blog de vocês, e acho de grande valia sua nova série, pois o layout é a estrutura de um blog, um layout desorganizado, afasta os leitores, gostaria também que vocês, pudessem nos ajudar a colocar botões personalizados, tipo “curtir” do Facebook, mas com outro nome e outro tipo de botão, estou tentando colocar botões como esse no meu blog e não encontro em lugar nenhum algum código, participei de fóruns e milhares de blogueiros assim como eu estão em busca desse código, se puder nos ajudar, agradeço. Vou acompanhar sua série!!
Obrigado, este mês vou lançar um plugin para wordpress que irá inserir esses botões de uma forma bem legal.
Super interessante! Minha pergunta é: Vamos precisar de algum programa de edição? porque decorar todos os códigos é complicado. Eu acredito que quando algum profissional vai fazer um layout ele usa alguns programinhas que escrevem os códigos por traz do design que ele está criando. Outra pergunta: A forma como se organiza a estrutura do css pode determinar a eficiência do blog junto aos buscadores?
Maxwel eu uso NetBeans (http://netbeans.org/) e VIM (http://www.vim.org/), não uso e não gosto de editores do tipo WYSIWYG (exemplo DreamWeaver).
O melhor é decorar se você for usar sempre, se for usar de vez enquanto basta apenas deixar anotado.
Entretanto para fazer essas coisas você pode usar até o bloco de notas.
Organização do CSS não influencia no SEO do site.
Concordo… nunca dependa de um programa para fazer um bom trabalho de um programador. “códigos são feitos por humanos”
Perguntei isso do css, porque já fiz uma leitura em algum lugar falando sobre ter uma estrutura enxuta do css e recomendações até pra usar programas online deixam o css do site mais “clean”
Isso diminuiria tempo de resposta e daria mais eficiêncencia no momento do carregamento, já que um texto mais organizado facilitaria a compreenção do seus códigos pelo navegador. Isso também se referindo ao Html.
Acho que você entendeu um pouco errado ou levou muito a serio isso que você leu.
É possível retirar espaços, ponto e virgula antes de fechar chaves e quebras de linha de seu css.
Além de usar seletores corretamente.
Isso vai realmente deixar o arquivo do CSS mais leve.
Porque você vai deixar o código inteiro em apenas uma linha.
Para você o código vai ser incompreensivo, vai ser bem difícil de ler e dar manutenção naquele código.
Para o navegador praticamente nada irá mudar. Ele irá ler da mesma forma.
Única coisa que pode influenciar na leitura do css é a ordem que foi escrita, por causa do efeito cascata do CSS.
Então na hora de deixar tudo em uma linha, basta deixar na ordem correta.
Aconselho você fazer o seguinte:
Escreva o css normalmente.
E na hora que for subir o site cria outro arquivo de css desse jeito que te falei e guarda o antigo como backup.
Assim toda vez que precisar alterar algo, você usa o backup para gerar um novo css comprimido.
Artigo importantíssimo este! Estava justamente procurando sobre o assunto. Vou ficar ligada na série. 🙂
Boa noite Cláudio! Um tema bastante relevante para a blogosfera. Não sabia que isto existia (eita). Cara, estou pensando em migrar meu blog do blogger para wordpress e pretendo instalar um tema bacana. Fiquei sabendo que vc faz temas wordpress. O motivo de querer mudar é o fato de como meu blog ser de notícias, o blogger não ajuda muito principalmente na questão das categorias e do próprio layout. Enfim, gostaria de saber como isso funciona, preços etc. Se puder me ajudar, agradeço! Abraço
Entra em contato aqui mesmo: https://ferramentasblog.com/contato
Que conversamos melhor.
themeforest.com (<< nao sei se posso postar, qlqr coisa excluem ai)
não sei se é isso que vc quer… mas talves possa te ajudar. você vai gastar uns trocados, mas são layout profissionais.
abrss
😀 Muito bom o artigo, eu tinha comentado num post anterior sobre ter sentido falta de conceitos técnicos, acho que este foi para complementar aquele.. parabéns!
Vi o seu comentário xD.
Mas o Marcos e eu já tínhamos planejado de falar sobre esse assunto assim com mais detalhes.
Entretanto eu estava super ocupado aqui com diversas coisas e por tinha parado de publicar.
O Marcos aproveitou e fez aquela introdução do que é Layout Responsivo e as vantagens de usar, assim eu já poderia chegar aqui quebrando tudo e metendo código xD
Ótima abordagem, é algo que quero muito aprender a fazer. mas eu chego lá. Obrigada por compartilhar conosco =]
Olá Claudio, obrigado por disponibilizar essas informações. Tava procurando isso, mas só encontrava conteúdo em inglês. Quero aplicar essas técnicas no layout do meu blog.
É complicado aplicar em uma layout pronto ou você indicaria criar um layout do zero?
Abraço.
Você pode usar sim em um layout já pronto sem problemas.
A vantagem de criar um novo, seria você projetar ele já pensando no layout responsivo.
Olá Claudio!
Realmente é melhor do que ficar usando plugins ou redirecionamentos.
Alguns plugins mobile ficam em conflito com o plugin de cache,então fiz a versão mobile do meu blog pelo site GOMO,fica até bacana,mas nada do que ter algo seu personalizado ao máximo.
E aproveitando que você voltou a postar,nesta serie não terá nada falando sobre o css sprite? Se não,estou no aguardo de um post sobre este assunto (última vez que peço rs).
Abraço!
Pingback: Os melhores artigos do mês de maio sobre wordpress | ZanTutos
Olá, tenho uma dúvida…Estou começando a entrar nessa área de Design Responsivo, e gostaria de saber, já que é um conhecimento a mais, quanto cobrar para fazer o layout se ajustar em todas as resoluções? Ou seja, deve-se cobrar algo por isso? Se sim, deve-se colocar o custo no valor total do projeto ou dar a opção do cliente escolher, se ele quer ou não que seu site se adapte em todos as telas? Não sei se consegui me expressar direito…Espero que sim…rs
Andreia, antes de mais nada, o cliente que diz o que ele quer no projeto.
Você deve cobrar a mais para desenvolver algo assim. Porque não é simples e muda todo o fluxo do trabalho.
Desde do wireframe e o design do site.
Não é apenas pegar algo pronto e simplesmente programar.
Você pode fazer o orçamento para o cliente como ele pediu e falar que por mais X você pode desenvolver o projeto focando em um layout responsivo.
O valor depende do seu trabalho e conhecimento.
Muito obrigada Claudio. Confesso que estava meio confusa em relação a isso. E fico aliviada que deva ser feito assim (o cliente escolher se quer ou não e calcular o valor em cima do trabalho a ser feito), bem mais justo…Ainda não me arrisco a oferecer isso ao cliente, como disse ainda estou aprendendo, mas já estava pensando mais la na frente, quando conseguir dominar mais o layout responsivo…Obrigada.
Nos próximos dias vou começar a ensinar na pratica como fazer um layout responsivo.
Falta apenas um post com conceitos. Com ele todo mundo vai ter os fundamentos básicos para desenvolver.
Vou ensinar também alguns truques com jQuery para otimizar a experiência do usuário.
Pingback: Os melhores artigos sobre WordPress do mês de maio - Aprenda Blogando
Pessoal, minha equipe acabou de lançar um portal inteirinho com design responsivo, e temos também um blog (já responsivo, claro) que promove a presença digital da Instituição nas redes sociais. Vocês conhecem algum outro portal brasileiro que tenha sido montado 100% assim? Obrigada!
Pingback: Testando layouts responsivos em diferentes dispositivos | Daniel Vieira
Cláudio estou tentando montar LAYOUT das telas de um site Responsive no Fireworks . Estou com um pouco de dúvida pq imaginei que o correto seria fazer duas telas por device – max. e min (6 telas). Exemplo (320 e 480) (768 e 1024) (1680 e 1050) nesta última p/ Desktop tb tem algumas recomendações de (1920 e 1080).
É este o raciocínio correto?
Se puder ajudar…Thank’s
Sandro Lima
Pensando diretamente na fase da criação do layout, de acordo com o que eu entendi,digamos que eu queira fazer o layout responsivo para abranger 6 tipos de resoluções diferentes desta forma terei de criar 6 layouts diferentes a serem aplicados a estas resoluções. Correto?
Robson,
Não é bem assim.
O layout responsivo é um único layout que se adapta automaticamente às larguras da tela de quem abre. Não são vários layouts que só abrem quando necessário. É o mesmo layout que se ajusta, se conforma à tela.
Olá Cláudio!
Primeiramente gostaria de parabenizar pelo post!
Só fiquei com um dúvida: Qual a diferença entre “width” e “device-width’?
Agradeço desde já!
Olá legal a materia tenho uma dúvida no qual ja pesquisei em todos os lugares e não achei a resposta no resposive como colocar uma div sobre outra div no caso para duas imagens aparecerem uma sobre a outra, sem ser como background, se alguem puder me responser fico feliz
Rapaz, com todo respeito, o que você come? algum tipo de sopa especial? sua mãe repica livros e faz você comer com aveia? Mesmo assim parabéns pelo post, me ajudou pacas. 🙂
Owww Claudio, estou começando agora essa vida! Dae gostaria de saber uma coisa. Quando eu fizer essas declarações em rodar em tal dispositivo, ou monitor, tv, tablet e talz… o “MEDIA QUERIES” vai tambem ajudar na organização do site caso eu não queira deixar maximizado a janela na tela do computador deixar somente pela metade? Todos os elementos estarão no seu devido lugar? Olhando esse “MEDIA QUERIES” posso dizer que não é preciso eu trabalhar arduamente para deixar bem organizado cada um dos elementos do site, que independente do eletronico que visualize a pagina ele irá dar conta desde que eu tenha feito oque foi dito aqui? Acho que a pergunta foi tão grande que pode nem ter entendido. Mas entendeu? qualquer coisa me fala to com umas duvidazinhas!
Pingback: MARKETING DIGITAL – Passado, Presente e Tendências para o Futuro