Responsive Design in Affino

We’re getting ready to move Affino to being fully responsive. This will be the major initiative over the coming months now that we have the auto-scaling cloud infrastructure in place.

Big Bang

There will be a switchover from the current way Affino page designs are created to a new responsive approach, like moving from analogue to digital.

We won’t have dual Design Centres in Affino at any point, it’s a one-off transition to the new Responsive Designs when you update to Affino 7.5.

Legacy Design Freeze

Once you update to Affino 7.5 all the legacy designs will be frozen. All the existing Skins will keep on working, but you will need to create new responsive designs moving ahead.

This way your existing site designs won’t be affected by upgrading. You will though want to make sure your designs are finalised before upgrading since it will no doubt take some effort to create your responsive designs.

Transition

We will have the means to transition the existing design components you’re working on so that most are simply transitioned, e.g. Design Styles, Design Menus, Main Menus, Form Styles.

Others such as Design Objects can be transitioned through a one-off manual transition which will create a new single-column Design Object that you would then arrange on the grid as required.

Fundamentally though Affino will still use the same elements we have in place, just in a much more wysiwyg fashion with easier design interfaces.

Adaptable Methodology

It’s very clear that we’ll need to be adaptable in our methodology whilst we roll out the new responsive design centre, once we come to the practical rollout issues on the design side.

We’re working to have the best methodology up-front though, so input and feedback is essential at this point. The better quality of input we get now, the more likely you are to get what you want when the new responsive design centre is rolled out.

New Design Interface

We envisage a new design interface which will be WYSIWYG. You will have a grid-based structure, with gutters, and can drag in the design elements which will automatically snap to a column. You can then drag them to span multiple columns / gutters.

As soon as you’ve selected the initial settings, the Design Elements will immediately display wywiwyg. You can then edit them in a similar way to how Live Design works on the display side.

There will be options to select the view width, to match the available breakpoints, so that you can preview the design at any point as it would look on any device. You will also be able to show / hide the grid at any time.

Relative Fonts / EMs

We like this approach best of all since it deals with the issue of text Zooming:

blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/

Font sizes in EMs, layout and positioning in PXs / Percentages.

We’re aware that we will need to work with percentages and other approaches depending on the Design Element / scenario, nothing is one-size-fits-all.

Q: What are your thoughts, do you have a preferred alternate approach?

Q: Can you see any issues with this?

Framework

Golden Grid System (GGS)

We’ll be developing our own framework within Affino to deliver on all this, but we do like many of the principles of this one, Golden Grid System (GGS) as a reference point:

goldengridsystem.com

In practice we’re looking to have this all wysiwyg in a new page designer, so all the media queries are handled automatically by Affino, although we’ll leave it open so that if you want to extend them you can.

Q: We also like their principle of 16 cols for full screen, 8 cols for tablets and 4 cols for mobile. What are your thoughts on this?

Q: Would you want more control over breakpoints, or have other column numbers as a principle?

It makes sense to set breakpoints on the page design level.

Q: Would this be by assigning Breakpoint Profiles to the Skins (page design) or as a global principle, i.e. these are the breakpoints we’ll be using across all our designs?

SASS / SCSS

Q: Does anyone have any views on SASS / SCSS?

sass-lang.com

Single Skin

To make things simpler, given the inherent trickiness of moving to Responsive Designs, at the outset there will just be a single responsive skin per channel. We might then review this again in the future.

We will however feed the correct image sizes etc. if the pages are being browsed from a mobile.

Design Elements

We will only be transitioning a subset of these across to the new Design Centre. We want to make sure we’ve got the right ones, it’s going to be essential that you let us know which ones you expect to use moving ahead.

Some, like the remaining legacy Flash ones won’t be transitioned.

Q: What Design Elements do you envisage using for your designs moving ahead, please take a look at the reference page here:

www.comrz.com/affino-design-elements

We’re also developing new responsive friendly Design Elements, and are introducing new tablet friendly navigation elements like a channel navigator. You can see it in action on the USA Today site:

www.usatoday.com

Other Principles

• CSS Only - no Tables
• No inline styling (although there might be exceptions)
• Code Compression
• JavaScript optimised and crunched as far as possible
• HTML 5 media players
• Design Styles and Form Styles optimised for Responsive Designs
• Responsive image elements
• Responsive video elements
• Flexible layout
• Interaction elements can change between layouts
• Web font support
• Vertical and horizontal screen orientation
• Correct image resolutions should be served for mobile devices (avoid heavy resizing in client end)

Input / Feedbask

We’re kicking off the development process so tis is the last chance for you to give us input and feedback on the ideas above.

The sooner you send through your thoughts the better.