0

Bom dia, estou tentando desenvolver um layout para um site de pesquisa de voos, hotéis, alugueis de carros. A estrutura do layout será semelhante a de sites como https://www.booking.com e https://www.kayak.com.br/.

Minha dúvida é, notei que estes sites possui uma exibição diferente da versão mobille para versão desktop. Não é como se ele simplesmente adaptasse as informações da tela, ele exibe um layout distinto. Tanto que o layout só mudam na versão mobile se eu dou um refresh na tela.

Com a melhor forma de desenvolver um layout assim. Pensei em utilizar o angular, estaria correto?

3
  • O que você pode estar procurando e design responsivo, onde o tamanho da tela do usuário muda a exibição do conteúdo. 15/03/2019 às 12:42
  • A linguagem que você vai usar não tem nada a ver com o layout. Angular, Java, C#, Whatever. A linguagem é indiferente. O que você vai precisar estudar é CSS e talvez (dependendo da complexidade do layout) Jquery. Também tem a possibilidade de você usar algum thema já pronto, existem alguns gratuitos mas a maioria é pago (e na minha opinião esses costumam ser os mais agradáveis aos olhos). Geralmente esses themas já são criados para serem responsivos, usam Bootstrap e uma gama de plugins já adaptados para funcionarem sem conflitos. 15/03/2019 às 12:45
  • @user140828 o carinha apagou a resposta dele e a sua resposta estava nela, se tiver como responder novamente para eu favoritar agradeceria. 15/03/2019 às 13:39

2 Respostas 2

2

Você pode fazer um design diferente para web e mobile usando o @media do CSS. Por exemplo, no meu CSS quero uma <div class="main-div"> tenha a cor de fundo de vermelho.

.main-div{
   background-color: red;
}

Porém, no mobile, gostaria que ela fosse azul. Para isso, usamos o @media :

@media (min-width: 992px) {
      .main-div{
         background-color: blue;
      }
   }

Com esse CSS, a cor de fundo vai ser vermelha, mas em devices com comprimento(width) menor ou igual a 992px , a cor vai ser azul.

-2

Caso não queria ir tão a fundo no css vc pode criar 2 páginas HTML tbm, uma pra mobile e uma pra desktop. Ao acessar a página Index que pode ser a desktop por exemplo, você faz uma validação em JS para saber se ele está usando um dispositivo mobile, caso sim é só redirecionar ele para o outro HTML.

É só uma idéia, vai variar muito do tipo de aplicação que você precisa. Mas acho muito importante saber como fazer com css assim como citado já nas respostas anteriores, pois nem sempre este caso poderá ser utilizado.

3
  • Estive analisando e realmente esta situação é melhor para o meu caso, o mais apropriado seria mesmo criar dois Layouts, um especifico para web com um certas informações e outro para mobille. Os dois sites que especifiquei acima fazem isso, no header da página é feito uma verificação do tipo de dispositivo que está sendo carregado e assim aplica o layout apropriado. Isto ocorre pois sites deste segmento exibem muita informação, para web ok, mas para mobille precisa de algo mais clean. A desvantagem deste tipo de abordagem é que o trabalho é dobrado. 18/03/2019 às 12:04
  • Sim, o trabalho é dobrado nesse caso. Com uma framework css você conseguiria cuidar do layout tranquilamente. Mas se a quantidade de informações que vem do servidor pode variar dependendo do aparelho usado, acaba compensando trabalhar desta forma. Eu mesmo trabalho assim em um aplicativo para restaurantes, ao abrir no desktop tenho toda a retaguarda, e ao abrir no mobile tenho somente a parte de atendimento.
    – Andre Lima
    19/03/2019 às 4:24
  • tu poderia me orientar como tu faz para identificar o dispositivo a ser utilizado e qual layout carregar a partir dele? 20/03/2019 às 12:10

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .