Responsive prototype

[elondaits]

I'll develop a new branch of Imaginary with a draft of a responsive theme (i.e. one that adapts the content to different screen sizes / ratios, specially for the smaller screens of tablets, cell phones and other mobile devices). My intention is to make a small number of adaptations to the layout to make it fit in a small screen and then make a thorough roadmap of all the work that would be necessary for a final release.

The motivation is:

• Better use experience for users using the site from mobile devices.
• Google evaluates sizes for mobile usability (type size, size of clickable items, etc.) and uses its score to prioritize mobile-friendly sites when searches are made from such a device.

Other goals:

• Maintain the look and feel of the current Imaginary theme except when modifications are needed for usability reasons
• Compile SASS code with a current version of the SASS compiler instead of the built in (see https://github.com/IMAGINARY/imaginary-web/issues/13#issuecomment-114227482)
• Lose dependency on the Sasson theme if possible.

[elondaits]

The effort will be tracked in this Trello board due to the big number of issues involved:

https://trello.com/b/K1nTbrlk

[elondaits]

I decided not to lose the dependency on sasson because it's used for many many things (adding extra classes to nodes, pages, etc., adding the normalize and formalize stylesheets, and other modifications to basic behavior which would be hard to test at the moment).

The native sasson SASS compilation was ditched in favor of using the current SASS program and Gulp.

[elondaits]

My prototype is showing very nice and relatively fast progress.

I've created a responsive-style header that makes all header elements (menus, search box, login box, etc.) drop down. I've also changed the main layout classes (like the main page wrapper and the basic two column layout) to make them responsive. I've also adjusted some other styles (titles, the pager, some images, etc.)

At this point remaining work is mostly section-by-section adjustments because the site is not built with many global CSS styles but rather with section-specific ones. In general terms:

• All sections require small simple adjustments to margins and font sizes. These are no problem at all.
• Pages that detail exhibits normally have two column layouts where a description and image are on the left and the title and metadata are on the right. In responsive mode one goes below the other, so the title of the exhibit and its type appear below the description and images. This can be fixed in a couple of ways: none too hard but not trivial either.
• The gallery viewer is a mess in responsive mode. It'll require a full restyling.
• The home page requires lots of changes to its styles. None too hard... but some elements should be rethought... the top slideshow is too small and very large in bytes so it should be removed / removed for mobile. The big buttons are too big and take too much vertical space, etc.
• The editing forms (back end) will require some work, mostly because of the vertical tabs that separate the items in sections which don't work at all in responsive.

In conclusion: A responsive version still needs some hours of work but it can be completed in a short time frame if prioritized.

[andreasdanielmatt]

great, if you need feedback/testing or also some design support (by our designers), just let us know. As regards to priority: just continue as you do now (leaving it at "priority" whenever there is nothing more important).

[elondaits]

Deployed with https://github.com/IMAGINARY/imaginary-web/commit/87f189037badee94f91d2b5a0dd4ad209d642f71