Redirects according to page width?

Greetings, all:

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.

Thank you in advance.

Regards,
Dwayne Brock

Do you want different content For the two divices ? (This is highly not recommended) or same content different layout?

1 Like

You will have to use JavaScript if you want to redirect, but this is not considered a good practice. Try to read about Media Queries with CSS: https://medium.com/beginners-guide-to-mobile-web-development/media-queries-54a1a463356f

If you really want to redirect, you have to find the width of your page and then redirect. You could try the code below:

window.addEventListener('resize', function() {
	if (window.innerWidth <= 600) {
		window.location.href = "http://www.google.com"; 
	}
});
1 Like

Greetings ieahleen,

The idea was to have the same content but different layout. I am beginning to hear it us possible but not a good practice.

Thank you for responding.

Dwayne Brock

Greetings michaelmarechal,

If it is considered a bad practice, I might want to reconsider this.

Thank you for your time and response.

Regards,
Dwayne Brock

Greetings, all:

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.

Regards,

Dwayne

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.

1 Like

Good Practice - Bad practice
Pro

  • 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!

Look into using srcset.