Jay Moreno

Any of you that have read my previous posts will know I am not a big fan of Javascript screensize detect and redirect for mobile devices instead i prefer to use PHP user agent detection...

However i know a lot of people here on WF do use Javascript based screen size detect and redirect... one of the biggest issues with that is many of the new Androids don't get the screen size detected properly and as a result many Android visitors are not getting redirected to your mobile site!

Well despite me not liking that type of redirection i still don't want you missing out on your mobile visitors - so i have a fix for you

Replace http://www.yourdomainhere.com with the domain you want to redirect your mobile visitor too

With this code implemented it will redirect visitors with screen sizes smaller than 1024 and also ALL your android visitors.

Place the code before your </head> tag in your html code.

Hope that helps!

But remember...

1) Google mobile bot will not be redirected to your site using this method
2) As mobile screen sizes become bigger this will become less effective.

Cheers,

Jay

danifae

Thank you for the code!
Probably a very stupid question but.... can I use this code beside another one, so that also Google bots are redirected to the mobile site?

Jay Moreno

you could but not with javascript, it would need to be php based or done with a .htaccess file - you need to create a 301 redirect for the google mobilbot...

hope that helps

cheers

jay

Nail Yener

Jay, thanks for the Android addition but that code will also redirect desktop users with a screen width less than 1024px. And pixel is not a physical measure; when you change your screen resolution to 800x600 on a large screen, then the software will read its width as 800px.

I wouldn't recommend screen size based redirection in any case. Here is a user-agent based JavaScript redirection that I have been using:

Terry Jett

Thanks Jay! Hope all is well for you and the family.

Do you have recommendation for a script (php or java) that will handle the search engine bots? Want to make sure they find the clients mobile sites.

Terry

QikSoft Free Software | Best Autoresponder

Jay Moreno

Nail am with you as i mentioned before i am NOT a fan of screen size redirection never have never will be!

i personally use our own Wordpress Plugin based on PHP user agent detection or hard coded PHP useragent solution - our Wordpress doesnt just redirect it does a host of other things that you configure that most other solutions simply don't offer.

Reason i posted this code is a lot of people on the WF do you use this type of simple redirect script... the javascript version is probably one of the most basic ones and simplest to deploy - problem is I get a lot of people asking be about the problems they have with this and it not redirecting certain Android devices...

i am really not too bothered what screensize you pick thats down to personal preference as we have both mentioned before i wouldn't personal use this! lol ... but for those that want to or have to its very simple to edit 1024 to 799 or whatever you like... thing is screen sizes resolution on mobile devices are constantly increasing... some mobile devices have resolutions over 800 now and stats show its very rare you will get a desktop screen size less than 1024 - resizing your browser window is another matter...

Using this modified javascript will certainly help anyone who was having issues before with their previous version and android not redirecting it also gives me a reference point to show people who ask me about it... literally the main reason why i took the time to come up with a solution.

Bottom line for me is use PHP useragent detection where possible - it's much more reliable, it will redirect google's mobile bot if configured correctly - second preference i guess would be .htaccess and then lastly this.

User agent detection can be used for many things more than just redirect... it's your friend read up on it - it can certainly help for a better mobile user experience!

Jay Moreno

Hi Terry, our next update to our own WP plugin will work 100% with the Google Mobile Bot, we have held of updating as we are wrapping up our actual WP Mobile Framework and theme.

If you have you own PHP script thats doing user agent detection take a look at this page and ensure you script is detecting both the google mobile bots...

Official Google Webmaster Central Blog: Introducing smartphone Googlebot-Mobile

REMEMBER though.... unless your site actually validates correctly Google will not consider it mobile and will place your site in the same pool as regular desktop sites.... i have wrote extensively on WF about this particular subject so wont go into too much detail repeating myself here but its worth reading up on to understand the value of validation, and speed. I think both of these will become even more important factors in Mobile Web in the next 18 months.

FYI - From my understanding Google will ignore ANY javascript based redirection script.

WillR

Nail,

It's also worth pointing out that the current statistics show that less than 1% of desktop users have a screen resolution of less than 1024, so I don't see this as a big problem.

Browser Display Statistics

Terry,

Creating and submitting a Google Mobile sitemap will take care of this for you. This should be standard practice for any sites you create whether mobile or standard.

.

➨ Here's How to Make Your First $177 Online
This Week Using the Piggyback Method...

.

Nanaswhimsy

I still like the idea of instead of a redirect to simply have it read a different CSS file to render the page.
something like:

If size is less than 600 load mobile.css,
if size is 600 >= 1024 load tablet.css,
else if > 1024 px load site.css

It gives you more control over the site.

Suzanne

WillR

Problem with that is you are still serving up the same content to mobile, tablet and PC users which is not always ideal.

.

➨ Here's How to Make Your First $177 Online
This Week Using the Piggyback Method...

.

Terry Jett

Thanks Will.

QikSoft Free Software | Best Autoresponder

HypeText

Just some quick Clarification for those not "Coding Adept"

The Redirect Script needs to be before the </HEAD> Tag, as he said, but make sure it is AFTER the <HEAD> Tag and BEFORE the </HEAD> Tag or it will not work properly.

Nanaswhimsy

Not if the css is set up to not load certain content based on device.

M Stacks

Sorry, but there is currently no CSS-only method to avoid loading content that works across all devices. display:none does not stop the browser from downloading the element in most cases. What about images? Squishing the image to fit does not make it smaller in file size. Some browsers will not download images specified as background images in the css, but some will, and some will not only if the parent element is set to display:none. Having all your images as background images is bad practice, anyway.

The content that gets downloaded needs to really be decided server-side, before anything gets downloaded.

But you can mix both ways. I currently use css to control display and switch some content (content that would be a very small download). I use a server-side method for images and for other large content, I design creatively. Designing for mobile first makes this a bit easier.

Look at Adaptive Images or TinySrc for some reasonably simple to implement image solutions.

WillR

Yes but then the phone is downloading content it doesn't need.

.

➨ Here's How to Make Your First $177 Online
This Week Using the Piggyback Method...

.

fabritaly

[QUOTE=
<script type="text/javascript">
if (screen.width < 1024 || navigator.userAgent.toLowerCase().indexOf('android ')!=-1)
(window.location.replace("http://www.yourdomainhere.com"));
</script>
[/QUOTE]

Thank you very much Jay, this script seems to work properly, while the many others that I have tested had some problems
:- )