Add-on Responsive Design

[Anthony Parsons]

I would like some feedback for an add-on I'm going to get built, allowing true responsive designs. When I say true responsive designs, I mean covering both mobile responsive and responsive. There is a difference, believe it or not.

Responsive - Uses styling to add, remove and modify page components, however; all components are loaded, seen or unseen. This focuses on desktop downwards, towards mobile.

Mobile Responsive - Flips responsive upside down, building from the mobile style upwards, adding layers. That means you have only the bare needed basics in the mobile version, adding features and functions as resolution is increased. Unfortunately, this requires variables for use to show or hide template aspects from loading, based on what the real-time browser width is. Hence the need for an add-on to accomplish this.

Whilst I will likely contract this out to Nathan (Naatan), I would love feedback on anything specific users can think of.

Right now, responsive is only half available without variables to enable / disable template aspects / templates entirely.

The Concept Is Simple

A basic add-on that allows the admin to input a handful of screen resolution sizes. For each size, a variable is then available for use in your templates, controlled via normal xen:if statements.

The size you enter is the max-width. Default is normally 480px / 767px that covers both mobile and tablet. Normally 480 and below is complete mobile styling, and 481 > 767 would drop the sidebars. Everything above that should display normally.

Basically, 5 blank options where you can assign a max-width of your choosing, thus obtain that variable for use.

Does it really need anything else?

 

[3c]

if I understand this correct, you're basically talking about an addon that will create a media queries CSS file that XF will run everything thru?

5 blanks option should cover it all. I have a responsive setup that only uses 3 and so far I haven't found anything that it doesn't layout well, at least down to android level. Also, mine doesn't drop anything it just moves it down to the bottom. I'm still trying to figure out how to make XF work with the one I have....haven't gotten my head wrapped around that yet..

so would this work basically regardless of style (to a point)?

 

[Andy.N]

Anthony
100% support you in this quest. Maybe we can pull resources from those interested in this to get it done quicker?

 

[Anthony Parsons]

if I understand this correct, you're basically talking about an addon that will create a media queries CSS file that XF will run everything thru?

No. This has nothing to do with the CSS side of responsive design. Or maybe, Yes, if you're referring to an XF equivalent of CSS media queries that can be used in templates.

Responsive design can be done one of three ways:

1. Basic - All done via CSS media queries. Hide and show content via CSS. This is the slowest method for the mobile platform, as everything is still loaded. Just hidden. You can introduce CSS classes and such within media queries, though you cannot remove template content.
2. Medium - Done via a combination of both content delivery (template) and CSS media queries. This is more advanced to perform than basic, though allows the designer to deliver the fastest mobile version by stripping out content from the templates, not just hiding it.
3. Advanced - Medium method is taken to server side processing and custom designed, designed to deliver specific files that load content based on browser width. Media queries are not really required, though feasible nonetheless, as page containers are changed at the server based on browser width.

Whilst you could argue that XF compiling templates is server side, the term I believe is more reserved for custom solutions that deliver specific PHP files, or such, based on browser width. Where this solution delivers XF files regardless, it is the templates we change.

Right now, you have no variable to use in a template to remove or add content based on browser width. CSS does not remove content, it hides content. That means the content is still loaded in the page. Hence, the basic approach.

On mobile devices you want to reduce the page size, thus you need variables to use in the XF templates that are being measured against the constant browser width as it changes, portrait, landscape (phone / tablet) and scaling. As the width is moved, the figure for the variable thus changes. When you hit the max-width value scaling downwards, suddenly things may disappear or be moved completely within the template, without having to load anything that you do not absolutely need from a mobile device.

We need something though to grab the browser width value and convert that into a variable. So if we had $variableOne defined with a max-width of 480 px, you could use that in <xen:if> statements on whether its true, false, AND, OR, ==, to add or remove template content / templates entirely. That immediately cuts CSS, thus making styling easier and page loading at the mobile device incrementally faster.

The problem is, is that not every designer will want fluid responsive design. Some will want to simply remove / move components when the browser hits a certain width. Some may want the true fluid movement of all columns. Whilst the main body column needs to be fluid with a max & min-width, designers may not want to sacrifice other areas of their design. This allows true flexibility in template delivery for responsive designs going forward.

I imagine this is all of a few hours work to build... it is simple I guess in terms of coding. Though the outcome for ability in design would make this priceless.

so would this work basically regardless of style (to a point)?

Yes. This would not make any style responsive. This would simply give the ability for template variables to be available for use in styles, allowing you to add or remove content based on browser width, without hiding it via CSS.

This allows CSS to be used more efficiently / in more custom ways, to deliver remarkable scalable options, especially for navigation. It also removes a lot of the hassles in trying to override existing ids and classes, which usually create a headache when not built from the ground up on a per style basis.

 

[Andy.N]

Some of the contents are simply not easy to make it to fit a mobile screen, such as table with multiple columns. I imagine the only way to solve this is to display fewer columns

 

[3c]

"XF equivalent of CSS media queries" is close enough and sounds great!!

 

[Anthony Parsons]

IMHO... this is something I would hope would become part of XF. Instead of this proposed 2.x mobile solution, XF would be insane to go that direction nowadays due to the ever changing landscape of small screen devices. That is why responsive design is pretty much the new norm... no more custom solutions. Instead, one style that covers all major resolutions well (Phone, Tablet & Desktop).

 

[Anthony Parsons]

Talking with more knowledgable people than myself about this, it sounds easy enough... though possibly a lot more difficult to perform. It could be done... though the complexity is a whole other kettle of fish.