Como criar um design responsivo?

[Claudio Junior 18 3]

E aí pessoal! :coolio:

 

Bom, vocês que tem mais experiência sem dúvida vão poder me ajudar...

 

Como crio um design responsivo?

 

Aquele que funciona em todos os dispositivos se adaptando ao tamanho da tela do usuário?

 

Já li aquele artigo no Tableless e não entendi nada!! :upset: E eu sei que estava bem explicado, mas como eu não tenho experiência e nunca tive contato com nada que tenha haver com design responsivo ficou meio difícil de compreender, certo? :yes:

 

Se alguém puder me indicar tutoriais, ou mesmo apostilas que ensinem como criar do "0" (zero) um design responsivo agradeço muito! Mandem todos que eu vou ler e estudar todos, preciso mesmo é de bastante conteúdo que com o resto eu me viro. Quero aprender como se faz! :graduated:

 

Agradeço desde já e até mais!

[Bergs 53]

Explique o que você não entendeu naquele artigo para podermos saber como lhe ajudar. passar links sobre o assunto não vai te ajudar se você não começar a entender e testar o que já está lendo.

 

Inicialmente tente entender mediaquery da css3, como os grids (colunas) são criados em um layout responsivo e o uso das medidas em porcentagem e relativa.

[jgustavo99 85]

Olá! Uma dica para você criar Layout Responsivo: Use a tag HTML Viewport, e as famosas Media Queries do CSS. Sabendo esses dois você já tem uma grande "Noção", de como funciona.

[Claudio Junior 18 3]

Explique o que você não entendeu naquele artigo para podermos saber como lhe ajudar. passar links sobre o assunto não vai te ajudar se você não começar a entender e testar o que já está lendo.

 

Inicialmente tente entender mediaquery da css3, como os grids (colunas) são criados em um layout responsivo e o uso das medidas em porcentagem e relativa.

 

Certo, para começar não sei o que são "grids"! Nem "media queries" e nem como detectar o dispositivo ao qual o usuário está usando para poder adaptar a página para ele, entende?

 

Não sei nada que tenha haver com o design responsivo, por isso acho que não entendi o artigo do Tableless pois não tinha a mínima noção do que era...

 

Vou ler novamente e tentar entender... :yes:

 

Depois vou pesquisar um pouco também:

 

:google:

 

E vou por fim tentar colocar em prática, mais se puder me esclarecer o que são grids, frameworks, media queries eu agradeço muito...

[jgustavo99 85]

Olá Claudio! Pesquisa sim no Google, existem vários artigos falando do Layout Responsivo. Dando uma resumida, Media Queries nada mais é que um "IF" e "Else", da sua tela. Ou seja como exemplo: Se a altura for 100px, e a largura for 300 px faz isso.. Um exemplo prático:

@media only screen and (max-width : 768px) {
body{
background:#ccc;
}
}

Nesse exemplo, se a tela chegar até 768px, ele coloca um fundo de Cinza. Espero que tenha entendido. O meu forte é programação, mas tive que apreender fazer esses tipos de layouts para um site que estava desenvolvendo.

 

Boa Sorte ;)

[Bergs 53]

 

Certo, para começar não sei o que são "grids"! Nem "media queries" e nem como detectar o dispositivo ao qual o usuário está usando para poder adaptar a página para ele, entende?

 

Não sei nada que tenha haver com o design responsivo, por isso acho que não entendi o artigo do Tableless pois não tinha a mínima noção do que era...

 

Vou ler novamente e tentar entender... :yes:

 

Depois vou pesquisar um pouco também:

 

:google:

 

E vou por fim tentar colocar em prática, mais se puder me esclarecer o que são grids, frameworks, media queries eu agradeço muito...

Grid é a estrutura do layout no RWD (responsive web design), as medidas são em porcentagem para poder ser flexível quanto a largura da tela.

Com as Media Queries das CSS3 você pode reoganizar a estrutura/conteúdo para que se apresente da melhor maneira as diferentes telas e posições de computadores, tablets e etc.

Não se preocupe em detectar qual dispositivo está sendo visto o site e sim como ele se apresenta no tamanho da tela.

Lembre-se de utilizar a metatag viewport para fazer seus testes com ela que é possível detectar dimensões da tela.

Agora é voltar aquele post mencionado e colocar em ação!

[Claudio Junior 18 3]

Obrigado mais uma vez, agora entendo bem mais vou estudar para ficar fera!

[victorqueiroz 34]

Use o Bootstrap, para criar sites responsivos profissionais :)