Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

On complex layouts, heavy use of Media Queries affect performances since the mobile browser still loads all elements that has been hidden.

For what I understand now, to load the right layout/content at the right moment (screen-size/device) we should use javascript.

I'm working on a template that should turn into a mobile version when the screen width is less than 1080px. To do this I was thinking to combine Modernizr.mq with a resize event listener.

Do you know a better approach?

My modernizr code so far: http://jsfiddle.net/c4BcR/

share|improve this question
    
The wicky.nillia.ms/enquire.js js will help you to achieve this. –  Vinod Dalvi Aug 25 '13 at 18:12
    
yes that is another solution, but what are the advantages over modernizr? –  Andrea Puiatti Aug 25 '13 at 18:37
    
This is not a right answer for your question but can give you a direction –  G. M. Aug 25 '13 at 18:38
    
I'm implementing enquire.js, the only thing that I don't understand atm is how to serve the actual template parts my theme is made of, through js –  Andrea Puiatti Aug 25 '13 at 19:41
add comment

1 Answer

up vote 1 down vote accepted

Remember that PHP (wordpress) run on server, javascript run on browser.

So, what you intend is:

  1. load an url of your site (a GET request is sended to server)
  2. Server respond with a minimal html containing enquire.js and your script with enquire.register stuff
  3. enquire.js recognize resolution and run a js function
  4. the function triggered by enquire.js run an ajax call (this is a second request to server)
  5. Server respond to the ajax call with the html from your template and using jquery.html() you put the html in the body of page. If want avoid loading jquery you can output json from server and use a pure js templating engine e.g. Pure to convert json to html in the body.

Is this optimized? Not for me.

  • For every page load you run 2 server requests instead of one
  • On the first request you need some scripts (enquire.js, your enquire.register script, jquery or templating script) that do nothing in the page, only scope is loading the content
  • even if jquery or templating script are fast, static html outputted from server is always shown faster

In short, you do a lot of work to optimize site for mobile devices, with chances to get the opposite result.

This workflow can be useful for small parts of site, not for entire content. At least, not for me.

For me, in that case, I'd

  1. for every template file create 3 versions, e.g. page.php | page-tablet.php | page-phone.php or header.php | header-tablet.php | header-phone.php and so on
  2. On init, use a server detection method, like Mobile Detect to sniff the current device, put it in a static variable class or in a constant
  3. Add a hook for template_include filter that append "-{$device}" to every template required. (e.g. if is required 'page.php' it returns 'page-tablet.php' if current device is a tablet)
  4. Using the same $device global accessible variable, register js scripts related to the device
  5. In the template file use get_header($device) instead of get_header() just like get_footer($device), get_sidebar($device). Also use get_template_part('part', $device) instead of get_template_part('part') and so on.

In this way you have

  • one request per page and not 2
  • every device load its own content
  • html output is demanded to server and not to client, and this is better for performance

For little parts you can use the enquire.js method and flavor everything with some media queries. E.g. for tablets you can use the same template of desktops and use enquire.js + ajax to add some content if resolution is over a certain breakpoint.

Working with wordpress, in my opinion, this is the best way to get mobile optimized version of a site.

share|improve this answer
    
Cool stuff, thank you Giuseppe! I really understand your point. Mobile detection is exactly what I'm using right now but the customer -NOW- want the mobile template to pop up when the screen is smaller than 1080px. Is it possible to combine enquire.js with your solution? –  Andrea Puiatti Aug 26 '13 at 0:29
    
In my scenario the layout and the content of the desktop version is too complex to hide it and retouch it with media queries. This is what I'm talking about: goo.gl/R54cre In this case I really need to load the mobile template when the screen width hits that size –  Andrea Puiatti Aug 26 '13 at 0:35
    
@AndreaPuiatti, only for mobile devices under 1080px or all devices under 1080px? Outhere there are a lot of desktops with < 1080px resolution (1024) and a lot of mobile with > 1080 resolution. Using resolution is not targeting device. A large screen phone, (with a mobile connection) will download desktop version with chances to wait a looong time. –  G. M. Aug 26 '13 at 0:42
    
@AndreaPuiatti If possible, a good choice can be create a splash page and when you click the 'Enter Now' button you will open the right version (> 1080px or < 1080px) using a query var enqueued in the button link url using enqueue.js –  G. M. Aug 26 '13 at 0:43
    
@AndreaPuiatti my solution + enqueue.js is possible, but if mobile detect sniff a mobile device enqueue.js run on mobile version... I don't know if is good for you –  G. M. Aug 26 '13 at 0:47
show 2 more comments

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.