Layout Responsivo

[Gilberto Jr 26]

Boa tarde;

 

Alguém usa o http://getbootstrap.com/?

 

Se alguém já usou podia me dizer como eu aplico no meu site?

 

Att;

[Giovanni Ribeiro 0]

Fala Gilberto,

 

Primeiramente vc vai fazer o download da biblioteca bootstrap.

Após o download vc vai notar que nessa biblioteca vai ter arquivos js e css vc vai paropia documentação do site para inciar sua estrutura do seu layout.

 

Abs.

[Gilberto Jr 26]

Bom dia;

 

Fiz o incluide dessa forma

 

<link href="bootstrap-3.1.1-dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="bootstrap-3.1.1-dist/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="bootstrap-3.1.1-dist/css/bootstrap-theme.min.css" rel="stylesheet" type="text/css" />
<link href="bootstrap-3.1.1-dist/css/bootstrap-theme.css" rel="stylesheet" type="text/css" />
 
<script src="bootstrap-3.1.1-dist/js/bootstrap.js" type="text/javascript"></script>
<script src="bootstrap-3.1.1-dist/js/bootstrap.min.js" type="text/javascript"></script>

 

Esta correto?

 

Seguinte, eu já tenho o site desenvolvido para pc normal.

 

Agora eu quero colocar o site com layout responsivo para mobile. Eu tenho que criar uma nova pasta por exemplo MOBILE e desenvolver uma nova aplicação usando esses arquivos da biblioteca bootstrap?

 

Att;

[reidark 5]

Não volte para o passado.

Se você criar uma nova pasta e "desenvolver uma nova aplicação" você estará praticamente crucificando seu site.

Deixe me explicar o porquê:

Primeiro, o que é Design Responsivo?

 

Design/Layout responsivo é aquele que, independente do aparelho de acesso do usuário, o site vai se enquadrar nas dimensões de tal aparelho. Seja ele um desktop de 1920x1080 ou um smartphone de 320x480.

Ok, até aqui você provavelmente já sabe.

Segundo, o que é o Bootstrap?

 

Bootstrap é um framework, desenvolvido pela antiga equipe do Twitter para um desenvolvimento ágil. Como o amigo lá em cima disse, ela já acompanha um javascript, css e algumas miscelâneas para seu desenvolvimento.

Para usar o Bootstrap você precisará gastar um tempo lendo a documentação do mesmo. Vai aprender a usar o sistema próprio do bootstrap, como os grid, colunas e etc... (que, por natureza, são responsivos).

 

Sim, se você souber usar o bootstrap, o seu site será responsivo, mas lembre-se, leia a documentação.

 

Terceiro, porque estou crucificando meu site?

 

Se você desejava um site responsivo, então você errou desde o começo.

Como citou, você já tem um site para desktop ("pc normal"), certo? O Design responsivo é algo que se deve levar em conta desde o começo do projeto. TUDO depende de estrutura.

Mas então porque não posso criar um site apenas para mobile?

 

Pensar assim é andar uns 800km pra trás. O problema que existia antes do design responsivo era esse mesmo. Os desenvolvedores tinham que criar um site para desktop e um para os "dispositivos de mão" e isso praticamente era cuspir pra cima e voltar na testa.

Criando 2 sites com o mesmo conteúdo, apenas mudando a visualização é um suicídio para indexação no google. Primeiro que vocÊ vai dividir o acesso, sem somar entre os dispositivos.

Exemplo:

10 pessoas entraram no desktop, e 5 entraram no mobile.

Se o Google for indexar sua página, ele vai pegar: Ou o site feito para desktop OU o site feito para mobile (o que tiver mais acesso, se assim posso dizer), e assim o erro a acontece.

E é por isso que o design responsivo existe, pra tudo ser o mesmo site. Ou seja, acessando de qualquer lugar, a visita vai contar, e não ficar dividida entre sites diferentes.

Conclusão

 

Se realmente deseja um site responsivo, com um bom código front-end, optimizado, limpo e rápido: comece novamente.

Refaça tudo, mas pense em como será a estrutura, pense no bootstrap (se for usar), pense no conteúdo, pense nas dimensões, pense nas imagens, pense na velocidade, pense em tudo.

Pode ser um pouco desanimador escutar isso, mas, confie em mim, é o melhor caminho.

Abraços.

[Gilberto Jr 26]

Bom dia

reidark

 

Hoje que deu para voltar e ler o seu post. Vou analisar e ler a documentação.

 

 

Att;