Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

ment0r

Criar responsivo pra um site já feito

Recommended Posts

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.

Compartilhar este post


Link para o post
Compartilhar em outros sites
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:

 

Capturar.JPG

 

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

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

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.

Compartilhar este post


Link para o post
Compartilhar em outros sites
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.

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

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! :wink:

 

Abraços, Doug.

Compartilhar este post


Link para o post
Compartilhar em outros sites

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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por Kisha
      Estou procurando um programador web para desenvolver um site front responsivo, de preferência pessoas com referências e trabalhos já feitos.
       
      Contato via discord: quando eu tinha uma glock#5547
    • Por 4Unknow
      Boa noite comunidade da Imasters, como vocês estão?

      Pessoal peguei um botão responsivo com popup, mas não consigo adicionar mais dele um do lado do outro.
      Vou deixar o conteúdo dele aqui se alguém puder me dar uma luz. Só queria copiar ele para adicionar mais dois botões um ao lado do outro.

      Quem puder me ajudar, ficaria agradecido.

      segue código:

      index.html:
       
      <!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Alterações Robô Everest</title> <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css'><link rel="stylesheet" href="./style.css"> </head> <body> <!-- partial:index.partial.html --> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous"> <h1> Configurações Robô Everest </h1> <h2> Data: 14/04/2021</h2> <button type="button" class="main-btn-rect popup-btn" data-popup="popup-reg">Modo Agressivo</button> <div id="popup-reg" class="popup"> <div class="popup-content"> <div class="event-header"> <h6>Don't be shy, say hi!</h6> </div> Stop Loss: 255<br> Stop Gain: 30<br><br> Ou a seu gosto!<br><br> Desvio Envelope: 0.12<br><br> Pausas nas operações: 10:00,11:00,10:30,12:30<br> <span class="fade-out main-btn-circle">╳</span> </div> </div> <!-- partial --> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script><script src="./script.js"></script> </body> </html>
      script.js:
       
      $(document).ready(function(){ $('.popup-btn').click(function(){ var popupBlock = $('#'+$(this).data('popup')); popupBlock.addClass('active') .find('.fade-out').click(function(){ popupBlock.css('opacity','0').find('.popup-content').css('margin-top','350px'); setTimeout(function(){ $('.popup').removeClass('active'); popupBlock.css('opacity','').find('.popup-content').css('margin-top',''); }, 600); }); }); });
      style.css:
       
      @import url('https://fonts.googleapis.com/css?family=Lobster'); @import url('https://fonts.googleapis.com/css?family=Roboto'); body{ margin: 0; padding: 0; height: 100vh; font-family: 'RobotoLight', sans-serif; border-bottom: 1px solid #FFFFF0; background: #00c6ff; background: -webkit-linear-gradient(to right, #0072ff, #00c6ff); background: linear-gradient(to right, #0072ff, #00c6ff); overflow: hidden; } button { text-decoration: none; border: none; } h1 { position: absolute; display: inline-table; top: 20%; left: 50%; transform: translate(-50%, -50%); font-size: 30px; text-transform: uppercase; letter-spacing: 2px; color: #FFFFF0; } h2 { position: absolute; top: 35%; left: 50%; transform: translate(-50%, -50%); font-size: 25px; text-align: center; color: #FFFFF0; } .popup-btn{ position: absolute!important; top: 55%; left: 50%; transform: translate(-50%,-50%); } .main-btn-rect, .main-btn-circle{ position: relative; margin: 0; font-family: 'Roboto', sans-serif; color: #FFFFF0; background-color: rgb(252, 79, 79); text-transform: uppercase; font-size: 25px; letter-spacing: 1px; outline: none; cursor: pointer; z-index: 100; } .main-btn-rect { padding: 10px 80px; line-height: 30px; } .main-btn-rect:before, .main-btn-rect:after{ position: absolute; content: ''; top:0; width: 0%; height: 100%; background-color: rgba(255, 255, 240, 0.2); -webkit-transition: width 0.3s; -o-transition: width 0.3s; transition: width 0.3s; } .main-btn-rect:before { left: 0; } .main-btn-rect:after { right: 0; } .main-btn-rect:hover:before, .main-btn-rect:hover:after{ width: 50%; } .main-btn-circle{ height: 40px; width: 40px; -webkit-border-radius: 50%; border-radius: 100%; line-height: 40px; -webkit-transition: box-shadow 0.3s; -o-transition: box-shadow 0.3s; transition: box-shadow 0.3s; } .main-btn-circle:hover{ -webkit-box-shadow: inset 2px 1px 0px 20px rgba(255, 255, 240, 0.2); -moz-box-shadow: inset 2px 1px 0px 20px rgba(255, 255, 240, 0.2); box-shadow: inset 2px 1px 0px 20px rgba(255, 255, 240, 0.2); } .popup{ position: fixed; top: 100%; width: 100%; height: 100%; z-index: 10001; } .popup.active{ top:0; background-color: rgba(3, 3, 3, 0.98); transition: background-color .6s ,opacity .6s; } .popup .main-btn-rect{ padding: 10px 100px; } .popup .popup-content{ position: absolute; top: 50%; left: 50%; max-height: 568px; min-width: 320px; margin-top: 150px; padding: 25px; background-color: #FFFFF0; color: #070000; -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transition: margin .6s; -webkit-transition: margin .6s; -moz-transition: margin .6s; -o-transition: margin .6s; } .popup.active .popup-content{ margin-top: 0px; } .popup-content h6{ display: table; font-size: 16px; text-align: center; margin: 10px auto; font-family: 'Roboto',sans-serif; text-transform: uppercase; font-weight: 100; } .form-group{ position: relative; width: 90%; margin: 0px auto; } form#send input, form#send textarea{ position: relative; margin-bottom: 32px; width: 100%; height: 29px; font-family: 'RobotoLight', sans-serif; text-indent: 20px; background-color: transparent; outline: 0; border: none; border-bottom: 1px solid #070000; -webkit-transition: border 0.6s; -o-transition: border 0.6s; transition: border 0.6s; } form#send input:focus, form#send textarea:focus{ border-bottom: 1px solid rgb(63, 173, 168); } form#send label{ position: absolute; top: 0; line-height: 28px; -webkit-transition: color .5s; -o-transition: color .5s; transition: color .5s; } form#send input:focus + label, form#send textarea:focus + label{ color: rgb(63, 173, 168); } form#send .txt{ line-height: 22px; left: 2px; } form#send .main-btn-rect { position: relative; display: block; padding: 12px 80px; margin: 0px auto; font-size: 14px; } form#send .main-btn-rect i { margin-right: 5px; } .popup .fade-out{ position: absolute; top: -20px; right: -20px; text-align: center; font-size: 15px; } .share-wrap{ position: absolute; display: inline-table; top: 67%; left: 50%; transform: translate(-50%, -50%); padding: 15px; text-align: center; } .share-btn{ color: #FFFFF0; padding: 7px 25px; text-decoration: none; cursor: pointer; font-weight: 100; font-size: 14px; font-family:'Lobster', sans-serif; background-color: rgba(63, 173, 168, .8); text-transform: uppercase; border-radius: 5px; transition: background-color .5s; -webkit-transition: background-color .5s; -moz-transition: background-color .5s; -o-transition: background-color .5s; } .share-btn:hover{ color: #FFFFF0; text-decoration: none; background-color: rgba(63, 173, 168, 1.0); } .resp-sharing-button__link, .resp-sharing-button__icon { display: inline-block } .resp-sharing-button__link { text-decoration: none; color: #fff; margin: 2px; } .resp-sharing-button { border-radius: 5px; transition: 25ms ease-out; padding: 6px 9px; transition: background-color .5s; -webkit-transition: background-color .5s; -moz-transition: background-color .5s; -o-transition: background-color .5s; } .resp-sharing-button__icon svg { width: 1em; height: 1em; margin-right: 0.4em; vertical-align: top } .resp-sharing-button--small svg { margin: 0; vertical-align: middle } .resp-sharing-button__icon, .resp-sharing-button__icon--solid, .resp-sharing-button__icon--solidcircle { fill: #fff; stroke: none } .resp-sharing-button--facebook { background-color: #3b5998; border-color: #3b5998; } .resp-sharing-button--facebook:hover, .resp-sharing-button--facebook:active { background-color: #2d4373; border-color: #2d4373; } .resp-sharing-button--twitter { background-color: #55acee; border-color: #55acee; } .resp-sharing-button--twitter:hover, .resp-sharing-button--twitter:active { background-color: #2795e9; border-color: #2795e9; } .resp-sharing-button--linkedin { background-color: #0077b5; border-color: #0077b5; } .resp-sharing-button--linkedin:hover, .resp-sharing-button--linkedin:active { background-color: #046293; border-color: #046293; } @media only screen and (max-width: 768px){ h1 {font-size: 25px;} h2 {font-size: 14px;} form#send .main-btn-rect {padding: 7px 60px; font-size: 14px;} .popup-btn{padding: 7px 60px; font-size: 14px;} } Tentei copiar o código do index.html mas não aparece os outros botões.
      Puderem me ajudar agradeço.

      Um abraço.
    • Por kaionr
      Olá, estou com uma dificuldade para posicionar um elemento. 
      Se trata de um pop-up que aparece na tela ao clicar. Acontece que esse pop-up não fica centralizado em todas as telas dependendo da resolução.
      No momento estou usando o position absolute, a div é essa abaixo: 
      .form-structor { background-color: #222; border-radius: 15px; height: 550px; width: 450px; position: absolute; top: -100px; left: 170px; overflow: hidden; } Também já tentei:
      {position: relative; top: 50%; left: 50%;}
       
       
      Alguém pode me ajudar? 
      Qual propriedade eu utilizo para ficar centralizado tanto horizontal e quanto vertical em qualquer resolução?
    • Por Sherlock02
      Olá!
       
      Eu estou tentando fazer um layout de postagem em que o primeiro ocupa a largura de 100%. Os demais são dispostos em grid, dois posts.
      (Vou anexar uma imagem para exemplificar o que desejo).
       
      Segue o código:
      .post:first-child{width:100%;position:relative;} .post{margin-bottom:60px;width:48.8%;float:left;background:#eee} .post:nth-child(2n+2){margin-right:30px;}  
      <div  id='mainwrapper'> <div class="post">   <div class="post-entry">        1 Post com width 100%. Here goes my post.   </div> </div> <div class="post">   <div class="post-entry">        2. Post com width 48%. Here goes my post.   </div> </div> <div class="post">   <div class="post-entry">        3. Post com width 48%. Here goes my post.   </div> </div>   </div><!-- mainwrapper--> Esse código que fiz não me satisfez por completo porque o post da direita não "gruda" no canto, então está ficando desigual o primeiro e os demais.
       
      Eu gostaria de saber se não existe uma forma mais prática de fazer esse código.
      Obrigada!

    • Por BelleFisio
      Olá! Bom dia!
       
      Tenho uma imagem que fica responsiva na maioria dos navegadores, porém no internet explore ela não fica responsiva. No iexplore ela tbm sai da posição correta, então fiz um codigo especifico para o iexplore (o posicionamento ficou correto, porém a imagem não esta responsiva)
       
      Teria alguma forma de corrigir isso?
       
      O codigo esta assim:
      <div class="conteudo"> <div id="cabeçalho"> <div class="logotipo"> <img src="arquivo/img/logotipo.png"> </div> </div> </div>  O CSS:
      .cabeçalho{width:90%;margin-left:auto;margin-right:auto;} .logotipo {width:100%;max-width:1000px;}} .logotipo img{width:100%!important;height:auto;max-width:180px;}  
      Obrigada
       
       
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.