Responsive Views and Panels


Author Message
Alf

Posted: 5/8/2013
Quote message 

Hi all,

I hope someone can help me with this. I love the responsive themes Artisteer outputs. But for all my Drupal sites I use views and panels and that leaves me with an unresponsive site, except for images and the main navigation menu.

Responsiveness is always lost in Panels and Views.

For instance:
If I create a view page display with a grid containing images, title and teasers of nodes, the grid is not scaling on mobile devices. The images are, but the rest isn't.

And:

When i create a homepage panel display, or when I create a node_view variant for a content type with the title, body and comment form, responsiveness is lost there as well. The body text of the node is actually lost on mobile screens as it doesn't fit in the screen and the screen doesn't scroll horizontally.

So a few questions I haven't been able to answer myself by trial and error:
- Do I need to use fixed width or fluid panel layouts? It seems only fixed width retains some of Artisteer's responsiveness

- I'm using the Fences module, so I can easily provide CSS id's and classes to any panel panes and regions. Would responsiveness be restored that way? I already apply artisteer classes to the body field and others that I add to my node_view variant in Panels. It gives me the styling but not the responsiveness created in Artisteer. But maybe I'm doing it wrong?

- There are Drupal modules such as responsive panel layouts and views responsive grid but it seems a bit of overkill to me. It would be much more elegant if views and panels can leverage the responsiveness that comes with Artisteer themes simply by applying the right CSS classes.

- Should I use a theme sheet width of 960px or can I use 1000px widths?

Does anyone have any input for me? Does anyone have experience with getting views and panels to be responsive?

Will update any of my findings in this post, as it seems to be the only one about this subject in this forum (which surprises me, but ok....)
 
Alf

Posted: 5/29/2013
Quote message 

Eureka moment has arrived. I've been troubleshooting this for the longest time now and I think I found the problem.

First of all:
- 'Builders' panels are not responsive. Use http://drupal.org/project/layout (patches required) or use non-builders panels
- Check if your pages are responsive when you are logged in! In my case, all responsiveness was lost regardless of what I did, for anonymous sessions. The reason is this bug: https://drupal.org/node/802432. Issue is for D6 but applies to D7 too. Basically, for anonymous users, query (update, UI) will not load unless there is a module that uses it and anonymous users have permissions granted for it. Drupal reasons that code should not be loaded if its not needed. Hence, jquery won't be running even though the artisteer (or other responsive themes) require it. That was my golden 'aha' moment.

When it comes to views, I have had good experiences with http://drupal.org/project/masonry to create fluid grids, such as what pinterest uses. There are more responsive views styles, but for the above mentioned effect the masonry module (and its sub modules) was the only one properly functioning. I still have to play around with view styles that make tables and grids responsive but first I need to fix the anonymous issue, for which I'm contacting Artisteer support. It may appear that extra views plugins are not needed when using the proper responsive panel pages and loading jquery.

Will keep this thread updated.