Criar responsivo pra um site já feito

[ment0r 1]

Bom dia a todos.

 

Faz algum tempo que não publico nenhuma dúvida aqui no fórum e hoje preciso da ajuda de vocês.

Bom, recentemente eu fiz um site e nesse final de semana o proprietário do site pediu pra que eu fizesse o responsivo do mesmo, só que eu nunca fiz site responsivo (nenhum cliente pediu antes), ou seja, não sei como se trabalha com as várias resoluções de celulares e tabletes.

 

Tenho algumas dúvidas do tipo:

 

• Preciso desenvolver outro site - com as mesmas informações obviamente - pra ser acessado via tablet/smartphone?
• Como faço pra ajustar o site nas diversas resoluções de tablets/smartphones?
• Existe alguma função que identifica qual dispositivo está fazendo o acesso e encaminha para a pasta mobile, por exemplo?
• Existe alguma ferramenta que eu posso testar como vai ficar o site em diferentes dispositivos?
• O custo pra desenvolver o responsivo deve ser aproximado ao valor cobrado do site ou costuma-se não cobrar pelo responsivo?

 

Acho que essas são as dúvidas primordiais pra eu iniciar esse trabalho. Se alguém puder respondê-las ou me indicar artigos que ajudem nessas dúvidas, eu agradeço muito.

 

Muito obrigado a todos.

[dougtop 31]

7 horas atrás, ment0r disse:

Preciso desenvolver outro site - com as mesmas informações obviamente - pra ser acessado via tablet/smartphone?

Não, você pode adaptar todo site já desenvolvido. É um pouco mais trabalhoso do que se você tivesse planejado desde o inicio, mas dá sim!

 

7 horas atrás, ment0r disse:

Como faço pra ajustar o site nas diversas resoluções de tablets/smartphones?

Você precisará usar as medias queries para começar o trabalho de responsividade. Media Queries é uma técnica usada para criar um ponto de mudança de visual (breakpoint). Com os comandos das medias queries, é possível fazer que um site mude o seu visual, se tornando adaptado para diferentes resoluções. Leia sobre elas aqui https://developer.mozilla.org/pt-BR/docs/Web/Guide/CSS/CSS_Media_queries

 

Eu costumo trabalhar com 2 breakpoints (que geram 3 visualizações diferentes):

 

"celular" - 320px à 479px

"tablet" - 480px à 959px

"desktop" - 960px ao infinito 

 

Mas não existe uma regra, você precisa entender o que satisfaz o seu site!

 

Aqui tem um exemplo prático da responsividade aplicada: https://jsfiddle.net/dougtop/ofwwfbbx/15/

Não esqueça de redimensionar seu navegador para testar!

 

7 horas atrás, ment0r disse:

Existe alguma função que identifica qual dispositivo está fazendo o acesso e encaminha para a pasta mobile, por exemplo?

Existe, mas eu não vejo necessidade de identificar o dispositivo, a não ser que seu site tenha alguma funcionalidade ou motivo especifico para isso. Só de você criar os breakpoints com as medias queries já servirá para qualquer tipo de dispositivo e até redimensionamento da janela do navegador.

 

7 horas atrás, ment0r disse:

Existe alguma ferramenta que eu posso testar como vai ficar o site em diferentes dispositivos?

Existem várias, eu uso o própria ferramenta de inspeção do navegador, nela dá para simular as resoluções e os dispositivos. Basta clicar com o botão direito do mouse, clicar em "inspecionar elemento" e clicar no botão com um ícone de celular (Toogle device toobar), isso pode mudar de um navegador para o outro, mas é tranquilo de achar. Aí abrirá algo tipo a imagem abaixo:

 

 

7 horas atrás, ment0r disse:

O custo pra desenvolver o responsivo deve ser aproximado ao valor cobrado do site ou costuma-se não cobrar pelo responsivo?

Quando eu faço o orçamento já contemplo a responsividade, pois hoje não faz mais sentido um site que não atenda as necessidades mobile (com raras exceções). Eu costumo embutir no orçamento de 25% à 30% a mais do valor do projeto.

 

Espero ter ajudado! Abraços

 

[ment0r 1]

Amigo, primeiramente muuuito obrigado pela ajuda.

 

3 horas atrás, dougtop disse:

Não, você pode adaptar todo site já desenvolvido. É um pouco mais trabalhoso do que se você tivesse planejado desde o inicio, mas dá sim!

Eu desenvolvo sites há algum tempo e vergonhosamente ainda não sabia usar o tal responsivo. Bom, não mais; a partir de hoje, vou estudar muito sobre isso e vou usar o site desse cliente pra aprender.

 

A dica que você me deu sobre Media Query foi de extrema ajuda. Num outro site que fiz há um bom tempo atrás eu havia feito uma função que identificava o dispositivo e se fosse Android (exemplo), ela encaminhava pra uma pasta mobile, onde o site estava modificado pra dispositivos móveis.

 

Aproveitando sua grande boa vontade,  nos meus próximos projetos eu posso já fazer o site usando o Media Query, correto? Existe algum tutorial em vídeo ou artigo que me oriente a fazer isso?

 

MUITO OBRIGADO mais uma vez! Abraço.

[dougtop 31]

2 horas atrás, ment0r disse:

nos meus próximos projetos eu posso já fazer o site usando o Media Query

 

Sim! Na verdade, se o projeto contempla versão mobile, o ideal é que você vá desenvolvendo desde o início pensando e testando de forma responsiva.

 

Se o seu projeto tem como foco o acesso de celulares e tablets, te convido a ir mais além, e procurar por Mobile First, um conceito muito falado ultimamente devido à importância que os dispositivos móveis ganharam em nossa vida. A ideia é que comecemos a desenvolver e planejar projetos web, desde um pequeno site até um grande sistema, primeiramente para dispositivos móveis e somente depois para desktops.

 

Na prática você vai precisar fazer 3 coisas:

 

1 - Desenvolver com o Device Toobar do inspetor do navegador sempre ativo;

2 - Mudar a estrutura do seu css. Observe o exemplo que dei no meu comentário anterior e como ficaria pensando Mobile First:

 

Obs: estou usando apenas um breakpoint abaixo para encurtar o código de exemplo.

/* Estilos aplicados visando a largura abaixo de 480 pixels (Resolução de celulares) */

.content{
  width: 100%;
  height: 300px;
  background-color: #4aa
} 

input[type="text"]{
  margin: 10px;
  width: 50px;
}

/* Estilos aplicados visando a larguras acima de 480 pixels (Resolução de tablet/desktop) */

@media screen and (min-width: 481px) {
	.content{
      background-color: #473
    } 

    input[type="text"]{
      width: 200px;
    }
}

Viu a diferença? Ocorre a inversão do código. Agora, quem é tratado como exceção, usando a técnica de medias queries são os meus estilos do visual tablet/desktop;

 

3 - Pensar e estruturar o layout de forma responsiva. Esse é o mais difícil, pois requer que seu planejamento visual já trabalhe com elementos que facilmente consigam se adaptar às trocas dos breakpoints. por exemplo:

 

Ao invés de eu criar colunas com 400px de largura, porque eu não crio colunas com 320px e facilito meu trabalho, já que a largura mínima de um dispositivo é essa. Entende? É necessário pensar assim para diversas partes do layout e elementos. Criar esboços (mockups) pode diminuir seu retrabalho nesse quesito e ao longo do tempo você vai se acostumando a pensar de forma responsiva.

 

Faça uma busca rápida no youtube e em blogs sobre "Responsividade", "Media Queries", "Mobile First". Existe bastante conteúdo na web e tenho certeza que não será difícil implementar depois do estudo.

 

Boa sorte e bons estudos.

 

[ment0r 1]

Xará (também chamo Douglas), muitíssimo obrigado pela ajuda. Suas orientações me servirão como norte pra começar a estudar sobre isso. Pretendo me aprofundar mais, pois tenho ciência de que isso é crucial já à algum tempo nesse ramo.

 

Faz tempo que eu não utilizo o fórum, portanto, estou por fora das atualizações. Enfim, existe alguma forma de te qualificar ou bonificar? Você se deu ao trabalho de escrever tudo isso pra me ajudar, então se eu puder te ajudar de alguma forma, estarei às ordens.

 

Grande abraço e que Deus te abençoe.

[dougtop 31]

Pra mim é um prazer compartilhar informações e só de ter o ser feedback já me senti bonificado!

Penso que outras pessoas poderão encontrar esse post e serem ajudadas também em algum outro momento!

 

Qualquer dúvida que você tiver durante seus estudos, conte com a gente! 

 

Abraços, Doug.

[Omar~ 87]

Só completando.

Acho que uma das coisas mais cruciais que se deve conhecer para desenvolver responsivo é ter em mente:

•  Realmente o site precisa ser responsivo?
• Qual é o alcance do público e qual é o objetivo, para saber se deve ter um capricho de acertos mínimos que fazem grande diferença visual, ou se fazer mais ou menos dando somente os efeitos já é o suficiente.
• Dominar muito bem a propriedade "float". Basicamente só dominando isso 50% das necessidades já serão supridas (mas nem tudo se pode fazer assim não é?).
• Tudo será um tamanho relativo.

Digamos que eu venha a dizer que um elemento tenha 500px de largura logo qualquer resolução de 500 acima esse elemento estará correto, mas no meu media tenho ajustes para 450, preciso ficar utilizando dezenas de médias para fazer os ajustes? Não.

Se tudo for bem estruturado raramente precisará fazer ajuste. Convenhamos assim.

Tenho um container de 1280px de largura que quando a resolução máxima for 1280 ele passa a ser 100% dentro dele eu tenho um elemento de 500px

Logo então ao invés de dizer que o elemento é width: 500px; digo que ele é width: 39%; e se ficar muito pequeno em resoluções menores aí sim faço ajustes em seu tamanho.

É muito simples dominar isso basta usar a matemática: 500 / 1280 = 0,390625

 

Outro fato, é que dependendo da situação será necessário a intervenção do javascript para fazer ajustes do layout.

No mais dizem que fazer responsivos é mais complicado, eu não acho.

Para mim a idéia de site responsivo facilitou muito mais o desenvolvimento do layout, apesar que passou a consumir mais tempo, por isso desenvolvi meu próprio arquivo CSS que trata de posicionamentos e etc.. mais comuns, uma espécie de framework pessoal.

[ment0r 1]

Muito obrigado Omar, pela resposta. Achei muito válido o que você disse. Pretendo focar mais nesse estudo de responsividade, afinal, faz parte do desenvolvimento de qualquer site atualmente.

 

Grande abraço.