Different desktop and mobile view - what approach is the best?

Question

I got a WWW website project where mobile version is the same as mobile app but "desktop" version is completely different. Different nav, different cards, views divided in different way..

What is the best approach to do this in PHP/Laravel and HTML/CSS/JS? I'm asking about general approach.

Thank you in advance.

K

Answer 1

This should be done through css using media queries by doing this you can control the cards sizes and views depending on the device size. You can find more information https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Answer 2

The 'trick' I use for that is using a different css stylesheet.

You can set a min and max for your css styles, fe:

@media (max-width: 600px) {
//put css here for very small screens
}
@media (min-width: 601px) and (max-width: 1024px) {
//put css here for medium sized screens
}
@media (min-width: 1025px) {
//put css here for large screens
}

Note that this only works if your html stays the same over all screens and the layout is only defined by different css. But in certain situations this is a possible approach.

Answer 3

But differences are huge and in my opinion using only CSS is not enought. Changing size of elements and position in grid is obvious and exist in all projects. This is some kind of edge case.

For example on desktop I have user profiles in one view with 2 sections but on mobile I have two dedicated subpages.

In desktop I have normal menu in nav bar but on mobile each view have on top and bottom contextual buttons.

In desktop some things are in modal but in mobile in separated subpage or as a appearing text label (simple status).

...and so on