layouts with php and jquery - which is the best way?

[Joss]

There are so many ways to do this my head hurts.

So, what would YOU do?

The Brief

I am putting together a blog for a friend (who needs to stay anonymous).

Don't worry about the blog bit as such!

The mobile version will have almost no header, just enough for a menu link and search button, it will only show the most recent article, full screen as an image, headline, summary and it will have a fixed footer with previous, next and read button.

Rather app-like and all easy stuff.

Tablet versions will vary a lot, showing more and more until we get to the desktop which will have several articles displayed and other rubbish.

Now, how would YOU structure the templates?

I will probably use ajax to get the next and previous for the mobile, but more normal pagination for the desktop. 

The design of the mobile will be very much more minimalistic than the desktop, so I will have different layouts, different image sizes, reduced bandwidth and so on.

So, for my home template file I need to use jquery to work out the window width, I then need to call in different structure depending on the result (different header, footer and how the content is structured) and I need to call in different results from ProcessWire (the mobile will need just one, while the desktop might need several, and so on).

Might be a good excuse to try out response.js

The most important thing here is getting it all in the right order - making sure the jquery is firing at the right time, making sure the right information is being popped into the right holes and so on.

I imagine I could end up with a situation where I call in a structure from a page using ajax, but it doesn't get populated with data because it happened in the wrong order!

Lots of different ways to do this, so which would be your favourite?

Joss

[Pete]

Can I ask why you want to handle page transitions differently on mobile (AJAX as opposed to simply going to another page the "normal" way)?

I would likely use a framework myself - either Foundation or UIkit and go from there as the various breakpoints are alread built in. Then, if I wanted to serve different images depending on size I think someone here has a module for that, although I can't find it just now.

[Joss]

Oh, this is partly fun at this stage and I am intentionally going overboard.

But it would be relevant in some circumstances. In this case, I might make it swipeable. 

I am intentionally avoiding Foundation because I really want to see the actual processes from the educational point of view and keep them as minimal as possible. For instance, I am using Pocketgrid for the layout and am keeping that very, very small, with any luck.

[OrganizedFellow]

I am putting together a blog for a friend (who needs to stay anonymous).

But can't Ryan create his own blog and jingles?!

[gebeer]

There is this fairly new module for mobile detection.

It might come in handy for your situation because you can output just the code you need for the mobile clients. Doing this with response.js is putting additional load to the mobile client which might have an impact on overall performance. Plus you need to load response.js.

Might be worth taking a look at doing this server side.

[Joss]

Thanks, Gebeer

I think I am more comfortable with media queries and detecting window width and height than with using user agent strings. But its an interesting module.

response.js is only 9kb, so I can live with that - it is the art-gallery sized images that might possibly mess up this site

[gebeer]

Doing it server side has the advantage that only the code you need for mobile clients will be served which can save quite some kB.

If I understand response.js right, first the whole DOM needs to be loaded before response.js can swap things around or deactivate them.

If you do things server side, on mobile devices you don't output elements you need for the desktop and vice versa.

There is a module for minimizing images.

Or you can use image compression tools. A good overview here.

I have used ImageOptim on the Mac and Trimage on Linux. Both work well and can help saving bandwidth. Don't know about Windows tools. But some of them use the same libraries, I think.

[dragan]

Take a look at http://foundation.zurb.com/docs/components/interchange.html

Interchange can now pull in HTML partials so you can load different sections of your page for particular media queries. This is great for loading up a mobile-friendly component on small devices, and a more robust or heavier load component on desktops.

[Joss]

Hi Dragan

I have used interchange a couple of times, but for some reason I found a real lag with it.

For very simple stuff I sometimes just use a bit of JQuery:

<script type="text/javascript">
  
$(document).ready(function() {

var $window = $(window);
      function checkWidth() {
          var viewportWidth = $window.width();

          if(viewportWidth >= 1290) {

          } else if((viewportWidth >= 800) && (viewportWidth < 1290)) {

          } else if((viewportWidth > 760) && (viewportWidth < 799)) {

          } else if(viewportWidth < 760){

          
          }
      }
    checkWidth();
    // Bind event listener
    $(window).resize(checkWidth);
});
</script>

This is plenty if you are loading different background images or something for different layouts:

          $(".halfright").css("background", "url(<?=$backimageexlarge ?>) top left / cover no-repeat");
          $(".right").css("background","");

Also, I don't always use the rest of Foundation 5.

At the moment I have been putting together a little default profile just for myself with some choice modules added, Pocketgrid, modernizr, jquery 2, response.js and some basic equal heights thingy.

As I am slowly getting my head round response.js I am warming to it, especially as you can do things like create your own tests using both width and heights making breakpoints by area. I haven't actually tried that yet, but the point is you can add tests for landscape on mobile, if you are really being over clever!

I have added some custom tests so that it is working in em rather than px, for my purposes on this template. With that and Pocketgrid working in percentages, my site is getting positively squishy!