websites for mobile phones

[ahmed mahmoud]

HI,

I'm working on a project in the School and it's to build an idea-management system website, and as an enhancement I wanted to add the Feature to our Website which is to be browsed by mobile browsers . Yet I donnu from where should i start, I mean I found a lot of articles online talking about design concepts but I couldn't find an article talking aout how it'll be done :D

Hope you got My Question. :D

Thanks in Advance

Best Regards,

Ahmed

--

Ahmed Mahmoud Mohammed Abd El-wahab 

el shaheer b Ahmed Fat7y.

[Derek Homan]

There are several ways to go about it.
The easiest/most effective is to have apache redirect traffic from
mobile devices to a mobile version of the site
http://stackoverflow.com/questions/1005153/auto-detect-mobile-browser-via-user-agent

Another solution though is to css media-queries....
http://www.w3.org/TR/css3-mediaqueries/#media0
a good example of it being used to detect mobile browsers would be
from the html5 boilerplate's stylesheet.
https://github.com/paulirish/html5-boilerplate/blob/master/css/style.css

For some odd reason though, when I've used media queries it has
required my phone (droidx) to refresh the page before properly using
the styles in the media query.

I'm not sure if there is a better way to do this in play.
I would imagine you could catch the /mobile redirect from apache in
play and then push a different stylesheet.
and if the mobile user decides they want the "full" version of the
site, you can keep track of their preference in a session variable in
play.

I hope you find these options as some help.
There are numerous ways to go about it, but I have yet to find a
solution that I'm completely happy with.

Derek

On Mar 30, 10:30 am, ahmed mahmoud <thediamondknig...@gmail.com>
wrote:

[Thibault]

Hi,

I use Jquery mobile, http://jquerymobile.com.

I keep the same controllers for both versions (desktop and mobile).
However, I created three main templates.
- main.html -> include main.desktop.html or main.mobile.html
- main.desktop.html
- main.mobile.html

When the view is simple I create only one view file which extends
main.html, so according to a session value it's the main.desktop.html
or main.mobile.html which is used.

When the view is not simple I create three view files, for instance
for the index page we have:
- index.html -> include index.desktop.html or index.mobile.html
- index.desktop.html -> extends main.desktop.html
- index.mobile.html -> extends main.mobile.html

To know if a user want to see the desktop or the mobile version, I
always check a request parameters (for instance main.mobile.html) in a
interceptor like that:
String display_mode = request.params.get("display_mode");
if ("mobile".equals(display_mode))
session.put("display_mode", "mobile");
else if (display_mode != null)
session.put("display_mode", "web");

So in the main.html or in index.html I know which page include or
extends:
#{if session['display_mode'] == 'mobile'}#{include
'main.mobile.html' /}#{/if}
#{else}#{include 'main.desktop.html' /}#{/else}

If you want to use jquery mobile by this way, type data-ajax="false"
as attribute of <form> and rel="external" as attribute of <a>
otherwise all will be done in ajax.

To detect the device (desktop or mobile) used by the client, I found
http://code.google.com/p/mobileesp/source/browse/Java/UAgentInfo.java,
but I had not been used it.

bye

[svenkubiak]

Hey Thibault,

i was looking for a way to integrate jquerymobile into my PlayApp and
your solution looks good.

However, integrating support for Mobile Devices is IMHO more a core
feature or a core plugin. I'm thinking of an additional render-Methode
that does render templates like "main.mobile" if present. Just like
one would render xml or json. Resulting in an strucuter like this fpr
example:

- view
-- categories
--- categories.html
--- categories.mobile
-- main.html
-- main.mobile

So, one doesn't has to create three different templates.

Regards
Sven

On 31 Mrz., 09:54, Thibault <rom...@free.fr> wrote:
> Hi,
>
> I use Jquery mobile,http://jquerymobile.com.

> To detect the device (desktop or mobile) used by the client, I foundhttp://code.google.com/p/mobileesp/source/browse/Java/UAgentInfo.java,