Design Responsivo02

Gostei (4) (0)
Buscar
post favorito comentrios
Responsive Design: dicas
para tornar seu site acessvel
em qualquer resoluo
Veja nesse artigo algumas dicas sobre Responsive
design (design responsivo) e comece agora mesmo a
criar websites fludos.
0 27
DEVMEDIA
LOGIN
Pgina 1 de 11 Responsive Design: dicas para tornar seu site acessvel em qualquer resoluo
25/06/2014 http://www.devmedia.com.br/responsive-design-dicas-para-tornar-seu-site-acessivel-e...
Ol leitores da DevMedia, nesse artigo sero passadas para vocs algumas dicas
muito importantes para se levar em considerao quando o assunto design
responsivo.
O que design responsivo ?
Design Responsivo uma tcnica de estruturao HTML e CSS, que consiste em
adaptar o site ao browser do usurio sem que seja necessrio definir vrias folhas
de estilos especificaspara cada resoluo, ou seja, um tipo de design onde o
layout fica fludo e variante de acordo com a resoluo do usurio.
Esse tipo de design responsivo teve origem em 2010 com o objetivo de melhorar
a experincia de navegao dos usurios de pginas web.
Por que devemos usar Design Responsivo?
Nos tempos atuais ns sabemos que a quantidade de dispositivos novos com
acesso internet que surgiram, alm dos desktops e notebooks, imensa, como
smartphones, tablets, cmeras fotogrficas e at mesmo geladeiras.
Pensando nisso, os desenvolvedores precisam ter uma preocupao muito maior
de tornar seus websites disponveis para esse pblico, a ento que surge a
importncia de um website ser bem visto em qualquer dispositivo, independente
da sua resoluo de tela.
Mais do que uma simples tendncia de design, o design responsivo um conjunto
de ferramentas e tcnicas modernas que definem como o contedo ser exibido
ao usurio.
Veja a imagem abaixo onde mostra a diferena da porcentagem de acessos por
dispositivos mveis em diferentes regies do mundo entre os anos de 2010 e
2012.
DEVMEDIA
LOGIN
Figura 1: Diferena entre acesso via dispositivos mveis
Mantenha seu layout limpo
Isso pode parecer um pouco clich, mas realmente no . Muitos desenvolvedores
criam seus websites com cdigos sujos, muitas vezes gerados automaticamente
por softwares e IDEs que ajudam os iniciantes na criao dos projetos.
extremamente importante que nessa nova fase de sites responsivos, que os
desenvolvedores faam seus cdigos limpos e que escrevam apenas cdigos que
sero usados de fato. Faa cdigos o mais simples possvel, evitando exageros
desnecessrios.
Evite:
Div's desnecessrias
Estilos CSS inlines(use sempre arquivos externos)
JS ou arquivos Flash sem fallback
position absolute ou posicionamentos float desnecessrios
Evite cdigos redundantes ou cdigos que no so 100% teis
Procure usar:
Doctype html5
Use um Reset CSS
Cdigo simples e semntico
Tcnicas simples para elementos como barras de navegao, menus, etc.
DEVMEDIA
LOGIN
Teste para saber se voc est no caminho certo:
Remova todo e qualquer estilo CSS de seu site e veja em seu navegador
preferido. Se mesmo assim o seu contedo continuar sendo fcil de ser lido e
ordenado, voc provavelmente est no caminho certo para um bom
desenvolvimento de um site responsivo.
Use Media Queries
Para designs responsivos voc precisa ter foco nas condies de width, onde
dependendo da largura do contedo de seu cliente, ou seja, dependendo da
resoluo do dispositivo que seu cliente estiver acessando o website, ir ser
carregada uma folha de estilos diferente ou uma folha de estilo especfica.
Vamos ver alguns exemplos?
Abaixo vamos ver uns exemplos de como chamar diferentes folhas de estilo
dependendo da resoluo de cada dispositivo.
Listagem 1: Exemplo de diferentes CSS em diferentes resolues
<style>
@import url(tiny.css) (min-width:300px);
@import url(small.css) (min-width:600px);
@import url(big.css) (min-width:900px);
</style>
@media screen and (max-width: 300px) {
/* estilos */
}
@media screen and (max-width: 600px) {
/* Estilos */
}
Tambm podemos ver alguns exemplos de resolues abaixo.
Listagem 2: Largura de 200px at 640 px
DEVMEDIA
LOGIN
@media screen and
(min-width: 200px) and
(max-width: 640px)
Listagem 3: Orientao Paisagem de pelo menos 600px:
@media screen and
(min-width: 600px) and
(orientation:landscape)
Listagem 4: Orientao retrato de menos de 380 px:
@media screen and
(max-width: 380px) and
(orientation:portrait)
Resolues mais frequentes
Uma dvida muito comum de saber como definir qual tamanho de resoluo
voc deve buscar. Na figura 2 possvel ver uma tabela em ingls que pode te
ajudar a decidir na hora de desenvolver seus projetos.
DEVMEDIA
LOGIN
Figura 2: Resolues mais frequentes
Defina breakpoints
Resolues comuns podem ser classificadas em seis grandes breakpoints, voc
pode trabalhar com elas da seguinte maneira:
<480 Direcione a primeira gerao de smartphones em modo retrato com <480px
<768
Use a condio <768px para a maioria dos tablets e smartphones de segunda
gerao
>768 Notebooks, desktops e televisores usaro a regra >768px.
Tabela 1: Resolues comuns
bom usarmos da seguinte forma:
<320 Utilize essa largura para baixas resolues
768-
1024
Tablets em modo paisagem devero usar a regra >768px E<1024px
DEVMEDIA
LOGIN
>1024 Utilize o layout em tela cheia widescreen para desktops, notebooks e
dispositivos de altas resolues >1024px
Tabela 2:Definindo breakpoints
Faa seu layout flexvel
Grids flexveis usam colunas para organizar o contedo. Usam larguras relativas
ao invs das fixas para se adaptarem a largura da tela do usurio.
Layout fluido sempre a melhor maneira de estar pronto para qualquer tipo de
tamanho de tela e/ou orientao. Dessa forma pouco vai importar se o usurio
est acessando o site por um smartphone ou por uma televiso de 42", o layout
ir se adaptar resoluo do usurio.
Nota: Para evitar possveis erros de clculos, use medidas como a porcentagem e
deixe que o navegador faa os clculos.
No esquea dos Max e Min width
Voc pode usar max-* e min-* como limites aplicados a seus tamanhos relativos.
Sua principal funo de se usar para impedir que o layout aumente ou diminua
de uma forma errada quando exibido em um dispositivo realmente grande ou
pequeno.
Vamos ver alguns exemplos de uso, suponhamos que queremos um layout fluido
com mais do que 768px de largura e menos de 1024px, ento deveramos usar da
seguinte forma:
Listagem 5: Exemplo de uso de min e maxwidth
min-width: 768px;
max-width: 1024px;
DEVMEDIA
LOGIN
O que voc achou deste post?
Gostei (4) (0)
Se quisermos que uma div com id="main" no tenha menos do que 1000px
quando visto em um desktop, podemos usar da seguinte forma:
Listagem 6: No tenha menos do que 1000px quando visto em um desktop
@media screen and (min-width:
1024px) {
#main { min-width: 1000px; }
}
Conluso
Com as dicas passadas nesse artigo possvel que webdesigners e
desenvolvedores front-end podero entender e aprofundar um pouco mais no
estudo de responsive design, que deixou de ser uma tendncia e virou uma
realidade para o mundo moderno.
Espero que tenham gostado e at o prximo artigo.
Veja tambm
Criando pginas adequadas a vrios dispositivos com o framework Skeleton
Vdeo: Layouts Responsivos
Ricardo Arrigoni
Cursando Anlise e Desenvolvimento de Sistemas na UniCarioca, desenvolvedor Front-end h mais
de 4 anos, coordenador editorial do site MrBool.com. Portfolio: http://www.ricardoarrigoni.com.br
DEVMEDIA
LOGIN
Comentrio | Tire sua dvida
Eliane Santos
Muito bom.
[h +1 ms] - Responder
[autor] Ricardo Arrigoni
Fico feliz que tenha gostado Eliane, espero que o artigo tenha ajudado nos seus
estudos.
abs
[h +1 ms] - Responder
Publicidade
Servios
Inclua um comentrio
Adicionar aos Favoritos
Marcar como lido/assistido
Incluir anotao pessoal
Verso para impresso
DEVMEDIA
LOGIN
+Front-end web
Mais posts
Artigo
Node.js: Criando uma onexo real-time em Java
Artigo
Como usar Atributos Globais do HTML5
Artigo
WordPress: O seu Gereniador de Contedo (CMS)
Artigo
HTML 5: Sites e Apliativos Web velozes om Appliation
Cahe
Artigo
Tableless: Criando um site dentro dos padres
Poket Video
API Google Plaes: Autoomplete
Video aula
Exibir/esonder linhas das tabelas - Curso de jQuery Bsio
- Aula 29
DEVMEDIA
LOGIN
Video aula
Tooltip para clulas das tabelas - Curso de jQuery Bsico -
Aula 28
Video aula
Efeito hover nas colunas das tabelas - Curso de jQuery
Bsico - Aula 27
Video aula
Efeito hover nas linhas das tabelas - Curso de jQuery
Bsico - Aula 26
Listar mais contedo
Anuncie | Loja | Publique | Assine | Fale conosco
Hospedagem web por Porta 80 Web Hosting
DEVMEDIA
LOGIN

Design Responsivo02

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Design Responsivo02

Enviado por

Direitos autorais:

Formatos disponíveis

Gostei (4) (0)

Você também pode gostar