Posted on24 May 2013 12:38 PM GMT

Responsive Design in Affino

ChannelControldesigndesign centredesign elementsFlashMediaComrzActionDisplaySupportSettingsStructureMethodologyAffinoMenusTablesSkinImageLayout+-
Responsive Design Image

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.

Markus
Posted by Markus
Popular Comments RSS Feed Content Subscriptions
Tweet Facebook LinkedIn Tumblr Pinterest Google+
Add New Comment
You must be logged in to comment.

Blog Navigation

Markus Markus
Comrz Ltd

The Future of Music Online 2017
"I need to add Hunter As a Horse to my picks of 201"...
01-Feb-2017
2016 Best of Year Entertainment
"I've only just caught up with Humans S2 on C"...
21-Dec-2016
12 Things To Be Aware of When Christmas Shopping Online
"There's a few more things to be aware of here - "...
18-Dec-2016
2016 Best of Year Entertainment
"And here is Ilya Naishuller's video that started "...
18-Dec-2016
2016 Best of Year Entertainment
"Here is the amazing False Alarm video VIEWER DISCR"...
18-Dec-2016
Waiting

Driving business at some of the world's most forward thinking companies

Rovio
IDG
Procurement Leaders
Ocean Media Group
Gill
Drewry
Mash Media
PPA
AOP - Association of Publishers
Briefing Media
IMRG
FG Insight
Investigo
TTG

Our Chosen Charity

Humanity Direct

And delivering industry leading awards

2016 British Media Awards - Technology Provide of the Year - Silver
2014 PPA Connect Awards - Procurement Leaders awarded Event Brand of the Year
2014 PPA Digital Publishing Awards - Procurement Leaders awarded Business Media Digital Brand of the Year (Again!)
2014 PPA Awards - Procurement Leaders awarded Business Media Brand of the Year (Again!)
2014 AOP Digital Publishing Awards - Procurement Leaders awarded Best Business to Business Website
2013 PPA Awards - Procurement Leaders awarded Independent Publisher Digital Product of the Year
2013 PPA Awards - Procurement Leaders awarded Business Media Brand of the Year
2013 PPA Digital Publishing Awards - Procurement Leaders awarded Business Media Digital Brand of the Year
Twitter
Facebook
Let Us Call You Back
Contact Us
Request A Demo