How to create a mobile version of a website
I need to create a mobile version of the site, which is radically different from the computer layout and css. This is not just an adaptive template. The question is, how do I do this?
3 answers
If you need to change the layout on mobile, that is, the HTML markup, then you can put it in a separate block, for example, for the header (similarly, for other large blocks that will differ from the desktop version). This block will be hidden on large resolutions via the display: none property, and shown on mobile devices via display: block. Accordingly, the block with the desktop version will also have to be wrapped in a wrapper, hide it on mobile devices and show it on desktop.
@media screen and (min-width: 525px) {
.header-pc {
display: block
}
.header-mobile {
display: none
}
}
@media screen and (max-width: 525px) {
.header-pc {
display: none
}
.header-mobile {
display: block
}
}<div class="header-pc">Header On PC</div>
<div class="header-mobile">Header on Mobile</div>However, this is a rather "crutch" and ugly solution. It would be more correct to initially build the page layout so that, depending on the resolution, some of the blocks can be hidden, and some can be positioned differently on the page. This is the meaning of the adaptive and its difference from the responsive: the adaptive page rebuilds its structure using CSS depending on the screen resolution, that is, it is, as you say, radically different the pages are visual, although their markup remains the same at all resolutions.
CSS for mobile is assigned via media queries or using css frameworks like Bootstrap.
Probably met subdomains sites, for example vk.com, and there is m.vk.com. When navigating to a site with a subdomain m.vk.com you open the "mobile version" of the site. What do you need to implement this functionality?:
- Correct routing on the web server you are using.
- It is best to create a separate project if you want to make a completely different styling from the "parent site".
- Think through the design of the mobile versions
- Build a project.
- Set up all redirects, if the web server detects that it is a mobile device, for example, you go from your phone to the site
vk.com, installed and correctly configured the web server redirects you to the mobile version(your subdomain)m.vk.com, on desktop this should not happen .
I agree with Lebedev on this issue
The biggest stupidity in the world is creating separate mobile versions of websites.
Probably on the forty-fifth floor in the meeting room of a large bank a beautiful story about the advantages of the mobile version sounds convincing.
- Look at this! We take a regular iPhone. We go to your site. And what do we see? A regular website? It's terrible. See how this works for the bank N. They have a special opening developed mobile version! Three buttons!
- Marie-Isabelle, sign a contract with the young people.
Once again, for those who have read the first sentence inattentively: the biggest stupidity in the world is creating separate mobile versions of websites.
It makes sense to make mobile versions of websites only for the money of those, who has nowhere to put the money.
What is good about a modern smartphone? The fact that it is practically a full-fledged computer. He can all. Including-normally show sites. The question is, if the phone normally shows the site, why invent something else? Everything is perfectly visible through the phone.
As proof that the mobile versions of the sites are not available to anyone If you don't need them, you can use Apple as an example. They are all this we invented and made iPhones and iPads. And their own website opens on all their devices, just like on any regular computer. Bezo all sorts of mobile devices versions.
Well, if you really need to work separately through smartphones, then you need to write applications for them that work with the resource API