Responsive layout

  • I am working on a theme which needs to show posts/pages in small blocks in a multi-column layout, so the most important ones appear at the top, hence on a three column layout we have
    1 2 3
    4 5 6
    7 8 9
    i.e. NOT newspaper-like columns; but on smaller devices, e.g. an iPhone, we have
    1
    2
    3
    4
    …

    The blocks are of variable length (and even if they weren’t, they will be expandable in situ so would become so), so floated div’s won’t do the job (row 2 would start at the bottom of the longest in row 1 and be pushed down when any column in row 1 were expanded vertically).

    Also, I don’t know how many columns I’ll need server side. Yes, I could look at the browser signature, but I’d rather do it on the basis of available space.

    My initial thought involves doing it in Javascript, so I generate div’s for each post, initially inside one content column, and then shuffle them into additional content columns (probably longer floated div’s) as necessary in the browser. But this will mean a period when the display looks a bit odd, until it has all loaded. Maybe starting off with three and shuffling to one might be better because typically you won’t see beyond the first on a small screen.

    I suppose if I knew server-side how many columns I needed *and* could shuffle, or buffer content, of the posts in the loop, I could solve it server side, but that seems fraught with problems.

    Does anyone have any other ideas about how I could generate generic (i.e. not knowing how many columns there are in advance) HTML which I could adjust with CSS according to the device characteristics?

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hi Frankie,

    If your posts are going to vary that much in length, to the point where you don’t want to do this in CSS because of spacing between rows, I’d personally reconsider your layout. If you succeed in a 3 column approach with posts of varying heights, you’ll very quickly lose a neat order of 1 to 9 from left to right.

    For example, if post 3 is much longer than 1 or 2, to the point where a CSS layout would cause too much white space, that extra space will instead push down post 6. So, from left to right you end up with something that resembles 1, 2, 3, 4, 5, the rest of 3, 7, 8, 6… etc.

    Apologies, it’s a little hard to illustrate in text form!

    However, if you are set on doing it the way you describe, I’d do this in jQuery.

    First of all, I’d check the screen size with the Javascript “screen” object. This would then allow me to do a simple “if” statement around my column sorting code, so that I’m only creating a 3 column layout if the screen size is above a certain value.

    https://www.w3schools.com/jsref/obj_screen.asp

    I’d prefer that to browser detection, because then it’s adaptable regardless of the device. You could even have a slightly more advanced set of “if” and “else” statements for 1, 2 or 3 column layouts depending on the screen size.

    For your content, just output it as normal in divs one above the other. If your jQuery is only doing something when the screen size is above a certain value, no jQuery will be needed on small devices and they’ll stay this way in a 1 column vertical layout.

    If the screen size is above a certain value, your jQuery can then create 2 or 3 column divs depending on the screen size, loop through the content / article divs and move them into the columns as required.

    Doing an “if” statement with relatively simple jQuery like this should be quick enough that, aside from particularly slow connections, you’re not going to have a “period when the display looks a bit odd”. Mobile connections are likely to be the slowest, and you won’t need to load any jQuery anyway as smaller devices will just use the HTML layout without any jQuery modification.

    I’ve been quite general in terms of what to do, without explaining how to do it – the jQuery syntax should be quite straightforward. If it’s not something you’re familiar with, I hope my idea of how to go about it is enough for you to investigate how exactly to write the jQuery you’ll need.

    Given your point about floating divs not being suitable as the divs will be of varying lengths, your idea of doing something like this in Javascript seems logical. But some people might not consider it truly “responsive” as it only alters the layout on page load, and won’t change on a browser resize / orientation change. You could add some additional jQuery event listeners for window resizing / orientation changes, though that’s up to you.

    Pete.

    Thread Starter frankieandshadow

    (@frankieandshadow)

    Yes, thanks, that corresponds to my thinking exactly (when I said Javascript, it was jQuery I had in mind and I’m well used to that).

    The main problem I foresee though is that the three column display only resolves itself when the page has completely loaded, so the desktop version looks odd for quite a while, especially on slower connections. But then I guess there’s quite a few images, so it would anyway.

    jQuery like that is going to be relatively light-weight in terms of page loads. If your page is taking a long time to load, it’s likely to be another culprit slowing things down.

    If you’re more worried about users with slower connections, it’s not something you can affect. More to the point, that’s likely how they’ll view most of the web if that’s their connection speed. Unless you’re doing something really wrong, which is dragging out your page load (which a bit of simple jQuery like that shouldn’t do), you shouldn’t stand out to a slow connection user.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Responsive layout’ is closed to new replies.