What I’m interested in learning how to do is create 2 pages, one for mobile and one for sizes above 600px. When the browser is below 600px, I would like to code the page so that it redirects to a different page. When the browser width is above 600px, it reverts to the other one. Both pages would be of my hosting, nothing externally written.
Does anyone have any suggestions or article examples relating to browser redirections like this? This can’t be a completely new idea, but I can;t quite find it on Google. I am also unsure what coding methods would be involved, CSS or other.
For the record, what started this was wanting to use a different image in a different location going from tablet size to mobile size. I will look at media queries for this instead. I don’t want to wander into bad practices without knowing what I’m doing, and that does seem to be where this can go.
In the old days the browser was queried by the server, browser sniffing. Nowadays most people use feature detection because it’s faster. Modernizr does this, https://modernizr.com/
Want it more done for you then Google Amp is a little closer to that (not quite). Just meet all their requirements and code it their way, but you can get in the search results carousel which is shown before organic search results.
Mobile user gets only the page elements he needs the right size and doesn’t download the same image twice or scale down a desktop image.
Least time, battery, and data plan used. Best experience.
Championed by Google
Con
You have to maintain two documents for each page.
Good practice
Your main text content doesn’t change
You improve the layout
you do everything listed above in “Pro”
You’re not overloading the device with elements with large file sizes.
Bad Practice
Main text content changed a lot or totally.
Equivalent mobile URL completely different content
Spammy or phishy (same as above?)
Intent to deceive
After thought
Did you know that FCC is teaching desktop first development and that this way it is possible for mobile devices to start downloading desktop sized images then when the CSS media query is finally read it starts downloading the smaller mobile sized image then replaces the larger with the smaller?
There goes your battery and data plan!