How to develop a specific layout for web and another for desktop?

Asked

Viewed 250 times

0

Good morning, I’m trying to develop a layout for a flight search site, hotels, car rentals. The layout structure will be similar to sites like https://www.booking.com and https://www.kayak.com.br/.

My question is, I noticed that these sites has a different view of the mobille version for desktop version. It’s not like it just adapts the screen information, it displays a distinct layout. So much so that the layout only changes in the mobile version if I refresh the screen.

With the best way to develop a layout like this. I thought to use the angular, would be correct?

javascript html5 css3 angular typescript

  • What you might be looking for and responsive design, where the user screen size changes the content display.

  • The language you will use has nothing to do with the layout. Angular, Java, C#, Whatever. The language is indifferent. What you’ll need to study is CSS and perhaps (depending on the complexity of the layout) Jquery. Also has the possibility of you using some ready-made Thema, there are some free but most are paid (and in my opinion these are usually the most pleasing to the eye). Usually these Themas are already created to be responsive, use Bootstrap and a range of plugins already adapted to work without conflicts.

  • @user140828 the little guy erased his answer and his answer was in it, if there is any way to reply again to me I’d appreciate it.

2 answers

2

You can make a different design for web and mobile using the @media of the CSS. For example, in my CSS I want a <div class="main-div"> has the background color of red.

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

However, in mobile, I would like it to be blue. For this, we use the @media :

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

With this CSS, the background color will be red, but in Vices with length(width) less than or equal to 992px , the color will be blue.

-2

In case you didn’t want to go so deep in css you can create 2 HTML pages, one for mobile and one for desktop. When accessing the Index page that can be the desktop for example, you do a validation in JS to know if it is using a mobile device, if yes just redirect it to the other HTML.

It’s just an idea, it will vary a lot of the kind of application you need. But I think it’s very important to know how to do it with css as already mentioned in the previous answers, because this case may not always be used.

  • I have been analyzing and really this situation is better for my case, the most appropriate would even create two Layouts, one specific for web with a certain information and another for mobille. The two sites I specified above do this, in the page header is done a check of the type of device being loaded and thus applies the appropriate layout. This is because sites in this segment display a lot of information, for web ok, but for mobille needs something cleaner. The downside of this type of approach is that work is doubled.

  • Yes, the work is folded in this case. With a css framework you could take care of the layout quietly. But if the amount of information that comes from the server can vary depending on the device used, ends up compensating work this way. I myself work like this in a restaurant app, when opening on the desktop I have all the rear, and when opening on mobile I have only the service part.

  • you could guide me as you do to identify the device to be used and which layout to load from it?

Browser other questions tagged javascript html5 css3 angular typescript

You are not signed in. Login or sign up in order to post.