How to serve the proper templates, js and css according to device?

So recently a kind soul gave me some code to re-direct to a mobile subdomain like m.site.com, but I have been trying to wrap my head around this task a little more deeply. Maybe I am having a conceptual problem here.

I want to use a mobile template for multiple pages across multiple standard templates. I want to "force" the mobile html template but still get the same page contents. If I could avoid taking the js and css, I would, as I said I can use media queries in the standard css to try to approximate this.

I can use media queries, which seems to me to be a good stop-gap measure, but its not a perfect solution. Why can't I just determine the device and provide only the relevant css, js and even html template?

The code is here:

<script type="text/javascript">
<!--
if (screen.width <= 720) {
document.location = "http://wap.mobilesite.com";
}
//-->
</script>

Ok, so that sends the query from www.website.com/requestedID to wap.website...so then just the right re-write rules and it would work by grabbing the right page contents through the page id?

Is it like multiple templates per resource or what? I am in serious bafflement even after long consideration.

I'm not really understanding what you want, you asked for code to redirect to a mobile site so that mobile site should be only loading the mobile templates ?

How exactly is the mobile site built ?, is it in the same instance of MODX or is it on a sub domain separate from the main site ?

Yes I am unsure as well. I have made a context for a virtual subdomain, but the goal is to have all pages available in mobile versions(?) Barring copying many resources and connecting them to different templates, I am unsure how this works.

Are mobile sites supposed to include all pages of a typical website? Or are they commonly just small portions of a complete site?

I am making progress on this and I know there are some solutions, but it just seems like its just a patchwork of tools without much sense to it...maybe its just me.

EDIT - I've just seen your posts about having to build a WAP site so hope the below isn't teaching you to suck eggs but I'm a little unsure if you mean actual WAP (very basic site, more like an RSS feed, from 10 years ago) or a mobile-friendly site. Anyway, the Mobile Detection extra mentioned below may still be of use.

Hello Nuan88

Mobile sites would tend to be the same content as the non-mobile site but often styled slightly differently so everything is legible at the smaller sizes. There's not much need to create a 'mobile' version of a site anymore by using responsive styling. Take a look at this Google guide as a start https://developers.google.com/web/fundamentals/getting-started/your-first-multi-screen-site/responsive?hl=en

However, there may be some occasions where you need to give mobile tags a different classname or not show certain elements or use a mobile-only script/file. For that, there is an extra for ModX called Mobile Detection that allows you to use the same templates across all devices and specify mobile/standard sections of markup. http://modx.com/extras/package/mobiledetection

You just wrap the <mobile></mobile> tag around content that should only show when a mobile device is detected and <standard></standard> tags for non-mobile specific code.

For example, if you want to serve specific JS files you can do:

or to show different content:


I'd definitely advise looking into building responsively rather than directing to a different site, mostly because it'll save you a heap of time duplicating and then having to update all the resources twice.

Let me know if you have any more questions. [ed. note: cottoncreative last edited this post 11 years, 2 months ago.]

Hi cottoncreative:

Thanks in advance for the message, its helpful but I need time to read it more carefully.

In a way you answered my question, that yes it becomes a lot of duplication to do it this way. I think that was my actual question haha. Its almost like a situation where there are so many ways to do something so its just a random collection of directions, and hence a little weird.

Yes the wap is a weird one, its a China situation, typical that its an ancient form. The requirement is simply hosted at wap.whatever.org and looks decent in mobile devices. However I don't think here the technologies are in the least required, if it looks good in mobile and is wap, its in (or so I am told).

So its like there are multiple issues here, subdomains and also templates appropriate for the device.

Some of your code is very enlightening, thanks for that. I can see more clearly how you *can* give just the right files to the right devices.

So, responsive templating is the answer, I see it now :-D

Glad it was of some use... I think

I'd second that opinion. Creating an additional set of templates/logic for mobile devices is something you should try and avoid. Where do you stop, for example? There are so many shapes/sizes of "mobile" screen, and what about tables?

I recommend you familiarise yourself with a responsive framework such as Zurb Foundation or Twitter Bootstrap. Once you get started with one of these, you'll realise that creating a site with one set of templates which render well on all devices is pretty easy. MODx really doesn't care how your HTML templates are structured, you will have a single context and a single set of templates if the frameworks fit your needs.

Yes the advice was helpful for sure! iusemodx gave me grief before but he/she was on a bit of a rant and I didn't get the point.

I also didn't know about code like <mobile> and <standard>, that was very eye opening to me. i always thought the html was standard and we can use display:hidden to hide content. So knowing I can put only the html needed into each part is quite cool, as I know hidden content is still loaded which is wasteful.

The wap site is another issue, its done now in a basic form, its not something I plan on developing more. It was required for whatever bizarre reason, so I did it. Its done and I don't think I will continue developing it.

I have dealt with responsive sites several times so I understand how they work in a basic way. However my main site is older and its in tables! So that will be a challenge. Not looking forward to that...