Mobile "views" and browser detection
So I am trudging thru the development of a companion "mobile" site to my main Elgg site. I've found it ever-so amusing searching Google for advice, only to return articles and documentation stating that mobile/iPhone integration with Elgg's view system is "easy" and "powerful"; yet search results find no real world examples or explanation on *how* to do so. All of my progress has been personally developed from the very thin documentation provided from the "views" sections on the Elgg documentation site. I am not really seeing how developing an entirely new view for every single module is more effecient than a separate install connected to the same database, but I'm trying to roll with it.
I've made a lot of progress and have individual pages looking pretty good by manually adding "?view=mobile" to the end of each URL I want to view on my phone. However, I don't see how it's possible to get Elgg to detect a mobile device and automatically change the view from "default" to "mobile". There's no documentation on where to insert the code. I've tried inserting browser detection routines and a "set_input('view','mobile');" in to the index.php of my plugin/theme, the header.php of my default view and various other places, but that does not appear to be the correct way to do this. It simply doesn't work.
Has anyone developed a mobile site using views? Where is the proper place to insert browser detection if you'd like to switch views? Does it have to be done on every page element? That sounds excessive if it can be done with a main switch, but I am willing to try anything.
You are raising queries on a rather hackneyed issue. many other have asked similar questions ...
You could try and contact my friend Pedro Prez who has his site's views ( probably the only one Elgg IPhone site in the entire world !! ) coded to cater for the IPhone.
"... manually adding "?view=mobile" to the end of each URL..." is really a hack.
'... the proper place to insert browser detection if you'd like to switch views?..." is *NOT an *ELGG issue *at *all
Do not be offended by my saying that you are "barking up the wrong tree".. in playing around with code to "....browser detection if you'd like to switch views...". That is *not the way to do views to push to mobile devices ;-(
you will need to do some HTML Standards Research on how <link rel alternate.... caters for different *media* ( read ==> "browser" platform) e.g. WAP, standard browsers, RSS, ATOM, ODD, etc....
So... before you do get offended and defensive ;-) .... do some more research and then post queries back here... We might spend some more time and help you out ;-)
I'm working on an iPhone version of my site (which is why I have been a bit quiet just lately) and I would recommend looking at the following:
iui - Google Code
How to build a website for the iphone
They may help a little...
Thank you both for the suggestions! I do appreciate it. I finally figured out a way to do this and it works and I am very pleased.
@Dhrup - I am by no means a "skilled" programmer, so I do not take offense to any advice or suggestions. However, I am just not sure if alternate links/stylesheets are the right way to approach this. It's quite possible I just don't understand the concept fully and it IS the "correct" way, but I spent some time looking in to that method and it just seemed so limited from my understanding of how it works.
@jededitor - Thanks for the links; iPhone support is only half of my goal. I personally use a Windows Mobile device. The problem with the WinCE phones is "NO JAVASCRIPT"! Which also means NO Ajax! I've had to hack away at the widgets and strip out the Ajax, etc. So that made this especially challenging. I had to find a PHP solution.
This morning, I finally thought up a PHP solution and found a couple of links that helped me put it together (similar routines as your second link, jededitor).
I used the browser detection script from:
http://detectmobilebrowsers.mobi/
And instead of forwarding mobile users to a different "site" per-se, I instead used PHP to detect the URL the user is currently on and then concatenate Elgg's view changing string "?view=mobile" to point to my "mobile" view set.
The PHP I used for detecting the URL was found at this site:
http://www.bradino.com/php/get-current-url/
I placed all of this code on the front of the pageshell.php file of my default theme (so that it runs each time a new page is loaded and forwards mobile users to the mobile view). The downside to that is that the browser detection code runs on every page load. Fortunately, I have a relatively small community, and the code is fairly lightweight and most importantly: it works! Desktops are getting the normal site, and the iPhone and WinCE tests I have done so far are working perfectly.
This may not be the "right" way to do this, but it works! So hopefully, if someone else is stuck trying to do this, it might help. Now comes the long haul for perfecting each mobile module to look good on tiny screens and perform as close to the desktop version as possible...
I've gone for the detectmobilebrowsers approach and set up a one column version of the web site using the normal web sites mysql database and a new css.php to suit the iphone. I would imagine that once the iPhone version looks good then it will be relatively easy to clone it for windows mobile devices and a generic mobile phone version.
There are, of course, a reduced number of mods as they all need rewriting to suit the one column layout better.
Personal note: Is really only four months since I was wondering what PHP was and how the hell to change the theme???
have a look here for some ideas
Also if you do a view source on an Elgg page, you will see :=
<link rel"alternate" type="application/rss+xml" title="RSS" href="http://community.elgg.org/mod/groups/topicposts.php?topic=182546&group_guid=7&view=rss" />
<link rel="alternate" type="application/odd+xml" title="OpenDD" href="http://community.elgg.org/mod/groups/topicposts.php?topic=182546&group_guid=7&view=odd" />
==>
That is how to provide alternate views from your site.
So if you code a new view for a mobile device, you will probably have something like
<link rel="alternate" media="handheld" type="application/odd+xml" href="http://community.elgg.org/mod/groups/topicposts.php?topic=182546&group_guid=7&view=mobile" />
or something like that ( I am not sure of the exact params that need to go in there) -- which would have been triggered by Elgg's page drawing / handler routines because the /views folder would have your /views/mobile/ with all the required presentations for mobile devices.
I agree; I'm doing all of my design structure around the iPhone as a base point. I am sure the bulk of the mobile user base will be from iPhones and as you said, if it looks good there it should look good on other handhelds.
Speaking of modifying modules for mobiles/iPhones.Windows Mobile devices etc
Maybe we should make this a collabaratuve effort? At the moment as far as I can see the way to go is to incorporate any relevent sidebar stuff into the top of the single-column layout version of each mod and change all the width measurements to %
I certainly would not like to spend time doing stuff that may have been done already by another person.
Also --
And here is an emulator to cut back on your phone bill...
Blackbaud Labs - Labs Article
aptana also has the ability to render for iphone + IDE and its free as well
my current approach to this whole need to deal with the mobile web is going to be a very simplistic approach. I basically am going to do a check for whether or not a pc based browser is in use or not. I am theming everything into a singular column, and the basic adjustement I am going to make will be two key areas.
Because on a pc I really think having some margins makes things nice, if i detect a PC based browser, the percentage for the container of the page will leave room for them. If not, things default to 100. Also, when I fail to detect a PC based browser, the font size will increase slightly in order to produce readable text.
This approach I think will make the sight familiar to a user from the pc onto his mobile device. It will also make my site appear simplier.
There are some other things I aim to do as well, but I thought I would give my approach to this.
- Previous
- 1
- 2
- Next
You must log in to post replies.