Question to markup: Mobile output

[yellowled]

presenting a mobile view of my blog looking OK to most handhelds

I understand your frustration, but this is not an easy task.

It even does not have to look similar to the desktop design (I would however like the same colors) and it should definitely not have all the features of the desktop version of my blog.

Well, in that case, you're gonna have to employ sort of a hybrid. Responsive web design can only provide the same or a slimmed-down look of the desktop view. It can not suppress features of the blog. (Actually, it can hide stuff using CSS, but it's not able to control the emitted HTML code.)

The mobile plugin can do that, and yes, it would be possible to combine the mobile plugin with elements of responsive design to do so. However, I can not do this alone, I would need active help by a plugin developer.

YL

[konus]

I understand your frustration, but this is not an easy task.

I would be very happy, if someone/you will help me with this task!

[yellowled]

I guess the most promising idea for you would be to get the developers/maintainers of the mobile plugin to improve it according to the ideas in this thread. As far as I know, Grischa was the last to work on it. I can help out with templates, but this definitely requires a "real" coder.

As for a responsive template, I don't think you'd be happy with it alone.

YL

[konus]

I guess the most promising idea for you would be to get the developers/maintainers of the mobile plugin to improve it according to the ideas in this thread. As far as I know, Grischa was the last to work on it.

You are right, but this task looks difficult. Pelle is kind of lost and Grischa is at least not very active at the moment. I will ask him anyway.

[garvinhicking]

Hi!

Depending on the workload and the specific things to do, I might be able to kickstart this thing off the ground.

I'm on vacation the next 2 weeks, then a new business project will get started and I have to see how much it occupies me, and if I have energy left in the evenings.

It would help a lot to create a small but precise "TODO" sheet so that I could easily look up what in the plugin currently makes trouble and needs to be modified. Of course, best sorted by priority. Gathering from what I quickread here the most pressing thing would be to make the browser template be based on the user's choice to visit it, and not a forced redirection...

Regards,
Garvin

[konus]

Gathering from what I quickread here the most pressing thing would be to make the browser template be based on the user's choice to visit it, and not a forced redirection...

Yes, I think, this is the most importent task.

General proposal: Beside of the normal view version there should be only one mobile-view of the blog. This view should be stripped down to the most important content of the blog and should try to be as generic as possible.
The mobile user should have the possibility to manually switch back to the normal-view to see the full blog with all plugins.

Here is the first draft version of the TODO-Sheet, open to discussion:
For the plugin:

1. Change the plugin to work in the following way: If a user opens a link to the normal page like www.blog.com, try to check if the user has a mobile device. If yes, redirect him to the mobile version of that page. I guess this should be a different url like mobile.blog.com
2. Give the user the ability to manually switch from mobile view back to normal view, if he wants to see the full view version of the link and prevent the system to send him automatically right back to the mobile view, since he has a mobile device. I think this could be done with cookies, but is there a way to solve this, if the user/device is not working with cookies?
3. Enhance the device detection to be as generic as possible, maybe give the admin the possibility to manually add new device strings in the plugin config.
4. Add some configuration options for the template.

For the template:

1. create a generic template witch should work for most mobile devices, without flash and without JavaScript. If possible use big boxes for navigation without zooming, like the iphone template does (but this uses javascript for navigation).
2. add a search-box and/or filtering possibility
3. add a configurable header Image with home button functionality
4. add the possibility to include some static links (1-3 for contact and other important non-blog-article informations)
5. give the possibility to tweak the settings/colors of the template by presenting a user.css
6. give the possibility to enter some additional tracking code/header/footer.
7. insert a link for the user to switch to the full version of the current page/article

I am not clear what should be considered as the most important content of the blog and therefore must be working in the mobile template and what not. This is a point to discuss:

• What about comments? Only readable or writing new comments as well? or a link to write comments in the full version of the page?
• what about categories (I would say very important)
• what about dates, author and free-tag informations (I think they are not important)
• I would like to have pictures and in my case I think the don't have to be scaled.
• I would like to have the possibility to use geotag to link to an map (this would be a highly specific wish)

[garvinhicking]

Hi!

Okay, I've checked this to my todo list. Depending on my workload the next weeks, I might find time for this on one of the next weekends!

Regards,
Garvin

[garvinhicking]

Hi!

Browsing through the config of the plugin, it does offer a flag "redirection" that you can disable, so that users are by default not forwarded. Also you can set a "sticky host", so that when that domain name is used by a browser, redirection will not be performed. So with this you could setup 3 VHosts for your blog: "www.domain.com", "mobile.domain.com" and "nomobile.domain.com". You could then enable redirection to mobile.domain.com, and in your template add a link to the sticky domain nomobile.domain.com to prevent misdirection.

The user agent detection is done through the "mobile.class.php" extenion, that uses a "isMobileDevice" flag.

This one currently does browser detection based on the user agent, and tests for:

Code: Select all

/(up.browser|up.link|windows ce|iemobile|mmp|symbian|smartphone|midp|wap|phone|vodafone|o2|pocket|mobile|pda|psp)/

plus it checks the first 4 bytes for a match to this:

Code: Select all

'acs-','alav','alca','amoi','audi','aste','avan','benq','bird','blac','blaz','brew','cell','cldc','cmd-','dang','doco','eric','hipt','inno','ipaq','java','jigs','kddi','keji','leno','lg-c','lg-d','lg-g','lge-','maui','maxo','midp','mits','mmef','mobi','mot-','moto','mwbp','nec-','newt','noki','opwv','palm','pana','pant','pdxg','phil','play','pluc','port','prox','qtek','qwap','sage','sams','sany','sch-','sec-','send','seri','sgh-','shar','sie-','siem','smal','smar','sony','sph-','symb','t-mo','teli','tim-','tosh','tsm-','upg1','upsi','vk-v','voda','wap-','wapa','wapi','wapp','wapr','webc','winw','winw','xda','xda-'

As far as template development goes, I sadly don't know enough for optimizations to help...but it would be great to get one template kickstarted. Maybe the provided templates that ship with the plugin can be modified for better guidance?!

Regards,
Garvin

[konus]

Thank you for looking into it. The idea of a normal www domain with redirection, and two additional domains for displaying normal template as nomobile and the mobile template without redirection sounds good.

As far as I understand, at the moment, there is no way in the plugin to enter the nomobile.domain.com. without the redirection. Is this correct? Would it be possible to add this?

Should the development result in a new plugin or be a new version of mobile output? In this case it should discussed what to do with the function to bring separate templates to iphone and android (which I don't need/like because of the enhanced complexity)

[garvinhicking]

Hi!

I think it should work already, if you enter mobile.domain.com as the target, have www.domain.com as your usual domain and then everything that does not match those two hosts should, according to how I read the plugins code, not be forwarded to different hosts.

The plugin already supports using custom or different mobile templates I believe, so I don't see the need for a new plugin at all...?

Regards,
Garvin

[konus]

I did not know, that s9y is responding as catch-all to a subdomain I did not configurate. I just tested it and found out about it: amazing!

I would say todo 1.) and 2.) are finished .

However for task 3.), I would like to see an enhanced device detection, since my phone (a HP Pre2 with WebOS 2.1) is not recognized out of the box. I would suggest to change the user agend tests to

Code: Select all

/(up.browser|up.link|windows ce|iemobile|mmp|symbian|smartphone|midp|wap|phone|vodafone|o2|pocket|mobile|pda|psp|ipad|iphone|opera mini|blackberry|pre\/|palm os|webos|palm|hiptop|avantgo|plucker|xiino|blazer|elaine|iris|3g_t|iemobile)/

so all user could take advantage. Or would you say it is better to move the code to the config settings or let the user make the changes to the code by themself?

4.) Would it be possible to add some configurable fields to the plugin-configuration like it is done for the bulletproof template? I think of a field for the user.css, a header image or some configurable links.

[garvinhicking]

Hi!

Great! Yes, s9y is usually able to "listen" on any domain, as long as the HTTP Path does not change (ie. "/" vs. "/blog").

About the change in the detection: What exactly did you add/insert?

Passing the detection string as a config option could be done, but I'm not sure if this wouldn't overcomplicate things for users? IMHO a maintained list of this would be beneficial for the user...

4.) Would it be possible to add some configurable fields to the plugin-configuration like it is done for the bulletproof template? I think of a field for the user.css, a header image or some configurable links.

Sure, but that means that the distributed templates would need their custom config.inc.php files and their own configurations etc....so this is not really only depending on the plugin itself, more of the template...

Regards,
Garvin

[konus]

About the change in the detection: What exactly did you add/insert?

I only changed line 17 in mobile.class.php. To get all current devices, it would be necessary to change a little bit more. As I wrote before,

The original plugin is based of the work of Andy Moore from http://detectmobilebrowsers.mobi/ There is a newer version (April 2010) of the code available for download, however the license states, that the code is only free to download and use on non-profit websites

So I am not sure, if it would be OK to take out the the user_agents from the orignal code.

[konus]

I found some other php code with detection code:

http://detectmobilebrowser.com/ with working example, open source

http://blog.mobileesp.com/ with example, open source

other solution from mobiforge.com

The most comprehensive source for mobile device (browser and otherwise) is WURFL. WURFL Database is already used in the plugin, but apparently only for image resizing, not for detection, which would also be possible.

[konus]

The mobile plugin can do that, and yes, it would be possible to combine the mobile plugin with elements of responsive design to do so. However, I can not do this alone, I would need active help by a plugin developer.
YL

How could we begin now? I think it would be good to start with a very simple template and add features step by step. I like the clean view of the iphone script and the big touch areas, but this uses javascript.