I have a site with two vastly different layouts for mobile and larger screens, and I was wondering if its good practice, in this case, to make separate html for each. I would just “display: none;” the components for each version in the media query.
Thanks in advance.
is there a link to a code pen? Without actual examples is difficult to give anything except speculative advise.
Guess you could do, but not often heard of. I take it the colour combinations and styles differ between the two? Why not keep these the same and make it easier and quicker to scale between the 2 sites using media queries? Layouts will always differ between mobile sized screens and monitors but media queries usually make pretty quick work of these.
The structure is different.
Where certain elements in one container, are found in others.
It’s not unusual to have a completely separate site for mobile, and this used to be how mobile web development was always done, usually with a different domain like http://m.example.com. Nowadays, it’s usually doable with CSS, and it’s vastly easier to maintain that way since there’s only one site one needs to work on. Still, sometimes there’s a use case for a different site, and the easiest way to do that still is to use a different subdomain.
Typically you automatically redirect mobile users by first detecting a cookie that indicates which site is preferred, and if the cookie is absent, having the webserver detect the User-Agent of the browser. Then you provide a link somewhere at the top or bottom to switch to the mobile or desktop versions of the site, which also sets the cookie to the preferred site.
If this sounds like a lot of extra work, it is. This is why it’s considered good practice to develop for the mobile version of the site first, then use CSS to “upgrade” the same pages to larger browser sizes with media queries, while only ever maintaining the one version of the site.