Danger in Creating a Mobile Version of Home Page This Way?

[Relish]

Is there any danger in creating a mobile "site summary" version of the
home page and calling it index-m.html (or some other name), and having
that displayed whenever a mobile phone is detected?

I've been told that this can be considered a form of cloaking. I don't
want to be penalized by Google and the other engines for trying this.
If it's likely that I'll be penalized, is there some better way to do
this.

Thanks.

[Jeremy Geerdes]

It's actually fairly standard practice to serve different content to different platforms. So I don't think it will be a big deal for you. You may, however, want to look into CSS media queries. You could use different CSS rules to display only the critical portions of the page to mobile users.

Jeremy R. Geerdes, Pastor
Debra Heights Wesleyan Church
4025 Lower Beaver Rd
Des Moines, IA 50310

jgee...@debraheightswesleyan.org
(515) 344-3037

http://jgeerdes.wordpress.com
http://www.facebook.com/jrgeerdes
http://www.twitter.com/jgeerdes

AIM/iChat: jgee...@mac.com
Google Talk/MSN Messenger: jrge...@gmail.com
Yahoo! Messenger: jeremy....@yahoo.com
IRC: jgeerdes on Freenode and Geekshed

> --
> You received this message because you are subscribed to the Google Groups "Webmasters Helping Webmasters" group.
> To post to this group, send email to webmaste...@googlegroups.com.
> To unsubscribe from this group, send email to webmaster-supp...@googlegroups.com.
> For more options, visit this group at http://groups.google.com/group/webmaster-support?hl=en.
>

[James Jackson]

You, essentially, have two options:

1. Dynamically generated content.
2. Dynamically displayed content.

#1 can either use client-side (e.g. Javascript) or server-side (e.g.
PHP) to detect the browser and display only the relevant content.
With Javascript, if you're using jQuery, you can easily do this with a
$.browser check, and in PHP you can use what's called, "referrer" data
to check the User Agent (i.e. Browser name, version, etc.).

#2 offers a great way to do this: set a solid background color (say,
black), and then display your mobile content as "display: none" by
default. Then, with Javascript, you can detect that they are in a
mobile browser and display that content as, "display: block" and the
non-mobile content to, "none". The major drawback to this technique
is that you end up loading extra content that's guaranteed not to be
seen. Fortunately, if you do go with this technique, you reduce HTTP
requests and the Mobile content is going to be smaller, by nature.
You can also share resources between the mobile and the full view of
the site (e.g. libraries like jQuery, moo.fx, etc.).

Both offer their own benefits, drawbacks and supporters. Some people
are passionately against the other, too.

tl;dr: Using Javascript to redirect is the simplest solution and is
standard in the industry.

- James Jackson