Answered Mobile version of webpage

Quote from: kudykam at Sep 02, 2013, 06:15 AM

Well I dont need autodetection of mobile browser. I need mobile website on domain www.m.site.com or www.site.com/mobile/

Perhaps you have this part covered but I'll post in case it is helpful.

I suspect you will be most productive using the same MODX install for both sites (ex: www.site.com and www.m.site.com) so that you don't have to recreate resources or access them in a convoluted way. Any reason not after reading below?

You also indicated some interest in a /mobile path (ex: www.site.com/mobile/category/product123). If that is still of interest is it instead of or with a separate mobile domain name? Would a URL parameter work just as well (ex: www.site.com/mobile/category/product123?version=mobile)

Mobile detection could allow you to identify a mobile device and send it to the right domain and/or to adjust formatting. That may be unnecessary for you- ok moving on for now.

A little bit of responsive design or extensive responsive design in a few key places might make sense. For example, the /category/product123 page could have extensive responsive design that works for all products; while, the www.site.com/mobile and/or the www.m.site.com/ pages could be completely separate.

With separate domains under the same MODX, you can logically choose which template is used to display any resource. How best to accomplish this probably depends on your current codebase. Is your content in MODX resources? (alternatives include: custom database tables, text files, web services). In any case, is your content itself reasonably-free of any rendering (explicit CSS, HTML etc) such that both the destktop and mobile-app versions can easily use the exact same content?

How many site-templates?
How separated in your codebase are: content accessing/aggregating calls, chuck-templates, CSS, Javascript (in whichever form)?

You mentioned the importance of caching for your situation- how caching is working for you today may change or not. It would help to know if you just enabled caching, recoded to cache better, or tweeked MODX internals. Are you more concerned about the amount of disk space caching uses, making sure content changes trigger updates to all cached pages affected, or something else?

Based on my understanding of your prior postings (without answers to above questions yet):
Responsive design for product pages could give you simplified caching with home pages completely different based on starting URL and/or mobile device identification (as you choose). Other pages between home and end product pages (plus other leaf pages like checkout etc.) can be better evaluated once you have those first two working.

Hopefully this helps you or someone else- though I understand if it is not what you wanted.

Quote from: nir-z at Sep 02, 2013, 07:41 AM

Then maybe use a context for the mobile site.

I think this would be your best bet. Though, you might have challenges with sharing resource content between separate contexts.

Perhaps, and someone correct me if I'm wrong, you could have and additional context "mobile", with a specified resource field as your unique identifier (alias would work well here if structure doesn't deviate for mobile). You'd then run a condition that IF requested identifier (by URL) exists under "mobile", display that content, else display the default under "web" context.

If shared content is not possible between contexts, your best bet might be to go with a responsive "hybrid" via MODx. You'd essentially have one template for both mobile and desktop, but within it conditional output based on what they are viewing with. You'd use browser detection to determine which "view" to display (I think you'd have to do create a custom plugin here to render your initial condition before page load) and all your HTML structure would be handled via chunks. You would probably setup two categories for your TVs, one for desktop and one for mobile and make those available on your resources. Store all desktop specific data in TVs in your desktop category and all your mobile specific data in TVs in your mobile category, similar data could be in a shared category. Then, when detection fires your "view" your chunks would display the appropriate TVs.

With the latter option, you could eliminate the need for a separate mobile web site.

Since MODx is so flexible in this manner, it allows for various approaches and I'm sure our MODx developers could elaborate on a more elegant solution. [ed. note: nuwebstudios last edited this post 10 years, 8 months ago.]

Quote from: nuwebstudios at Sep 03, 2013, 04:59 PM

You'd essentially have one template for both mobile and desktop, but within it conditional output based on what they are viewing with.

That's an interesting idea. Responsive designs usually work through querying screen size rather than browser type, it being somewhat more reliable. I wonder if media screen queries could be used as a conditional for outputting different chunk.

Quote from: absent42 at Sep 03, 2013, 05:28 PM

That's an interesting idea. Responsive designs usually work through querying screen size rather than browser type, it being somewhat more reliable. I wonder if media screen queries could be used as a conditional for outputting different chunk.

Media queries are all client-side and performed after requests are returned from server, which means MODx would have already ran its queries so that probably wouldn't work.

You'd need to attach a plugin event to fire on OnWebPagePrerender that sets the view to mobile or desktop and then using something like the IF statement to check against the view and display content accordingly. I've never tried this, so I can't comment on the efficacy of its efficiency.

Quote from: nuwebstudios at Sep 03, 2013, 05:42 PM

Media queries are all client-side and performed after requests are returned from server, which means MODx would have already ran its queries so that probably wouldn't work.

You'd need to attach a plugin event to fire on OnWebPagePrerender that sets the view to mobile or desktop and then using something like the IF statement to check against the view and display content accordingly. I've never tried this, so I can't comment on the efficacy of its efficiency.

I was thinking more along the lines of some javascript/AJAX or something that passed the media query back to MODX when the user initially visited the site, then used that result for further conditional chunks. [ed. note: absent42 last edited this post 10 years, 8 months ago.]

I looked again on extra Mobile Detection, but I found 2 big problems:

1. If I have chunk in my template which contains unclosed element (for example div), which closes in template or different chunk, mobile detection get confused and render page with both mobile and standard part of the code...

2. Problem 1 can by fixed by changing content of the chunks, but this is much bigger issue. Modx actually process both <mobile> and <standard> part of the code and after that shows one of them. So it takes twice as long to render page. Thats useless...

Please don not suggest to make responsive design of the site, thats not what I want...
Creating a new context for mobile site is not a solution since I dont want to recreate hunderets or thousands of resources for mobile site... or this is maybe a last option...

Quote from: nuwebstudios at Sep 03, 2013, 04:59 PM

...
Perhaps, and someone correct me if I'm wrong, you could have and additional context "mobile", with a specified resource field as your unique identifier (alias would work well here if structure doesn't deviate for mobile). You'd then run a condition that IF requested identifier (by URL) exists under "mobile", display that content, else display the default under "web" context.
...

Yes this is probably what I need, maybe I dont need a different context, I might just use folder for separate mobile content. But not sure if I can write a plugin which:

- gets content and tvs from specified resource (for example site.com/category/product123)
- detect /mobile/ in url (site.com/mobile/category/product123) and show this resource with different template
- all this without need to recreate duplicate product resource in /mobile/ folder

Quote from: kudykam at Sep 05, 2013, 12:43 PM

Please don not suggest to make responsive design of the site, thats not what I want...
Creating a new context for mobile site is not a solution since I dont want to recreate hunderets or thousands of resources for mobile site... or this is maybe a last option...

When I say "responsive hybrid" that is probably misleading. Where a traditional responsive layout relies upon media queries to find the screen resolution, I'm suggesting a pre-render check of the browsing environment (I say this because we can't necessarily capture resolution via PHP) to 1) set a session variable and output conditional chunks depending on its value or 2) perform a text-replacement on your primary chunk that controls your layout.

With the former, you'd determine the viewport and set a variable 'mobile' or 'desktop' via the $_SESSION array and do conditional output based on its value. This would keep most of your HTML structure within a MODx template, but could get complex as you need to plan for each conditional output. You'd then use something like the IF snippet to check the session value and display your content as appropriate. Your value would persist throughout the visit to be used similarly throughout your web site.

The latter option would store your HTML in chunks, and the default chunk you'd call would be your desktop one.. let's say 'siteDefaultHomeTpl'. Your pre-render check would again check if its mobile and if so replace 'siteDefaultHomeTpl' with 'siteMobileHomeTpl'. The downside is you'd be storing your HTML structure within MODx chunks instead. The benefit is you don't have to model any conditional output... simply build your HTML as you prefer for each chunk.

You could also combine both ideas.. store your session variable and if mobile replace any instance of 'siteDefault...' with 'siteMobile...' for every page and perform that check throughout the visit. Both options have the benefit of maintaining all your content in one resource and will avoid taxing the server so bad since its returning one or the other, unlike what the Mobile Detection extra is doing. You'd probably want to store any mobile or desktop specific TVs in their own categories on the resource as I alluded to in my prior post.

Your challenge will be identifying mobile prior to render. Luckily, this can be done by conducting checks on the HTTP headers and other data available to PHP at the time your plugin fires. Something like https://code.google.com/p/php-mobile-detect/ would probably do the trick. [ed. note: nuwebstudios last edited this post 10 years, 8 months ago.]

Quote from: kudykam at Sep 05, 2013, 12:57 PM

Yes this is probably what I need, maybe I dont need a different context, I might just use folder for separate mobile content. But not sure if I can write a plugin which:

- gets content and tvs from specified resource (for example site.com/category/product123)
- detect /mobile/ in url (site.com/mobile/category/product123) and show this resource with different template
- all this without need to recreate duplicate product resource in /mobile/ folder

Unfortunately, if you attempt this as you've stated it, you will force yourself into a position to need duplicate resources as you'd need a way to display either template based on detection. This means it needs two resources for both templates as I'm pretty certain you can't (and wouldn't want to) change the template on a single resource for each user request of the resource. Having thought about this more, I feel my suggestion above is your most ideal approach. Another unforeseen caveat here is having two separate URLs for essentially the same page. If you have any interest in the SEO side of the site, that is going to cause you some major headaches.

If I have time tonight, I might play with this concept and see if I can create a working example as I will need something similar in the near future.

Have you considered using Foundation by Zurb? - fits with MODX like a glove and I found it had a relatively short learning curve.

http://foundation.zurb.com