We are right in the middle of rolling out Responsive Design in Affino and this post outlines many of the key decisions we have made, and why.
When researching approaches to implementing Responsive Design in Affino, we have been looking at existing tools such as Adobe Reflow and Webflow.
They have taken two opposite lines of approach. Adobe Reflow allows you to manipulate everything to the nth degree but makes the process very manual. It displays a grid, but it’s purely for visual guide purposes, nothing snaps to it.
Webflow has a much more restricted approach, as do all fixed grid systems, in that you have 4 fixed breakpoints and things essentially can be set to be stacked or side-by side. There is a very rigid approach to the grid implementation but it does make assembling purely designed pages a fast and efficient process.
Affino has different challenges, firstly Affino is an application suite which allows layout and styling, as opposed to a purely static framework. It has content and media libraries as well as dozens of functioning applications that can be styled but have to work in certain ways to be effective.
Affino also works with millions of pages, these aren’t designed individually, instead we have re-usable page designs (Skins) which work across many different functional and content pages.
In practice we’re going to be keeping all the key productive features of Affino 7, whilst making them Responsive and lightweight. We’re also going to be providing much improved interfaces for designing and laying out pages in Affino.
Key Principles for Affino Responsive Design:
1) Nested Design Objects
Affino will still have Design Objects and Design Elements as the basis for designing your pages. It means you will create your page elements individually and then re-use them throughout your page designs, e.g. button bars, header, footer, navigation panels etc. These are then assembled to create your page designs.
It means a bit more work for the first page design, but a great deal less for all subsequent ones.
2) Breakpoint Profiles
Breakpoints define where one page layout, e.g. PC changes to another, e.g. Tablet. These things change over time, for examples mobile phones are getting bigger, whilst tablets are increasing
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.
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.
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.
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 new Messaging 2 suite in Affino is not simply an incremental update, it is a complete re-imagining of how messaging should work for businesses online.
It has meant a fundamental re-think of how bulk and targeted messages work, and breakthrough improvements for notifications and auto-responders.
Sales and Marketing Automation
Messaging is at the heart of sales and marketing automation. Typically though it is necessary to integrate with many different systems to achieve even the basics of an effective messaging campaign.
Although Affino’s Messaging doesn’t do everything that tools such as Mail Chimp, Mandrill, Hub Spot, Eloqua, KISSmetrics and Scout do, it does a big part of it, and a whole load more.
It also does it at no additional cost, with easy-to-use tools, and with no code integration required.
Message Campaigns vs Mailing Lists
The first big change with Affino’s new messaging comes with the splitting off of the mailing list from the messages being sent. Affino now has Mailing Lists and Message Campaigns in place of Newsletters. Mailing Lists manage the actual subscribers, whilst Messages are sent out based on your Message Campaigns.
This means you can target your mailing lists in much more creative ways by running multiple messaging campaigns against individual mailing lists.
It also means you can do much more to target your subscribers effectively, whilst maintaining a unified unsubscribe and bounced subscriber list across multiple campaigns.
Premium, Personal and SMS Message Campaigns
You can now run three distinct types of messaging campaigns. Premium messages act the same as the previous Newsletter messages. These are tailored messages which can have high design values and where the message content can be highly targeted, automated and personalised.
It is now also possible to send out bulk SMS messaged and Personal messages. Personal messages are instant messages which appear to be sent individually, but are in fact sent in bulk.
We have also made it much easier to send out individual messages and to test / preview those messages. You can now simply enter in the message content, and Title where they are being sent by email. You can then preview them, send test messages or simply dispatch your message
Affino 7.1 is now out, and it’s a major release in every way. Whilst there are many aspects to this Affino release, the two key threads are improved scaling and greater engagement. Affino 7.1 has been significantly re-architected to scale with new search and analytics engines. With the release of Affino 7.1 we will also be migrating sites to our new super-scaling cloud.
We’ve rolled out big updates to many core Affino services including Messaging, Search, Analysis, Customer Ladder and Relationships. We’ve also introduced great features such as Store Credits for incentivising customers, and Design Panels for creating great popups.
The combined improvements in the Customer Ladder (engagement), Messaging and Analysis add up to a breakthrough for sales and marketing automation. The new Messaging Campaigns for bulk premium, personal and SMS messages, come with advanced targeting, filtering and triggering options and great analytics.
Site Search has been completely re-engineered around Solr which gives Affino greatly improved performance on searches, and allows for much smarter searching. Core management elements such as relating content have also seen big updates focused on making editorial teams much more productive.
Altogether there are nearly 400 great new updates in this release, many of which will be transformative when fully rolled out on existing Affino sites.
We have also fixed most of the identified low-level issues which arose from the Affino 7 launch, and which are inevitable with the introduction of such a significant new platform.
The Affino 7.1 release is a signifiant update, and unlike most Affino releases, this one takes some time to run as we’re completely restructuring all the analytics data and refreshing the search indices. Given how intense this update is on the infrastructure, and that your site will be moved to the new hosting cloud, it is essential that you co-ordinate your update with your account manager.
Also in this release is a significant change to how most images are presented as you can now set the margins around the main images using Design Styles / CSS. It is essential to review your pages to ensure that the images are presented as expected, and note that you can now optimise the layout.
For the first time, Affino runs great on mobiles and tablets. It’s been a long-term project we’ve been working on for the past two years, and it will be a year or so until everything is likely to be perfect across all mobile platforms.
For anyone working in mobile, it’s a minefield, and lots of decisions have to be made along the way. I’ve posted previously about how under-developed mobile browsers are, but that has largely changed in the past year. For the most part they’re now great, in particular Safari on iOS and Chrome on Android.
With Affino 7 out initial target devices are the latest generation IOS (iPhone / iPad) and Android (mobile / tablet) devices. Mobile browsers will continue to improve in their capabilities and standards support.
When we brought out the alpha version of our mobile tech last year we did all kinds of optimisations to work around limitations with iOS 4 / Android Browser. Apple and Google have since then updated their platforms a couple of times (4 in the case of Google) and the browsers are far better than before. A side effect of the updates though was that all of the work-arounds we did for earlier mobile browser versions were broken when those browsers were fixed.
It has lead us to a principle for our mobile platform development which is that we won’t code for mobile browser bugs, instead we will do our best to work around the issues, and if that is not possible then the expectation is that the mobile browsers will be fixed soon enough.
We’ve tested Affino 7 on a lot of mobile devices. Many different Android phones and tablets (most of the leading ones and all Nexus devices), half-a-dozen iOS variants from old iPhones to the latest iPods / iPads and iPhones. We have also tested Affino on Windows Phone 7 and the Kindle HD. Both WP7 and the Kindle have some minor issues, but these issues are platform specific and the expectation is that they will be solved by Microsoft / Amazon respectively.
In practice 90% of users and above should have a great experience using Affino on their mobiles, and now that we’ve completed the initial phase of mobile optimisation, we will be accelerating to roll out mobile optimisations throughout all Affino’s interfaces both on the Control and Display sides.
Our priority for Affino 7 has been to make the most productive platform available for running your business online. The integrated nature of Affino means you only have to manage your community, content, products, design, , promotions and analytics in one place. This is by far the most effective approach for managing an online business. What we have done with Affino 7 is to improve in every way how how you manage your online business.
Affino 7 has a New Control Centre, with the pages delivered by a New Page Generation Engine, and it runs on a New Cloud Architecture, all with the intent to deliver the best Social Commerce platform on the market today.
New Look Affino
We’ve brought together great productivity ideas from the Affino user community and the Comrz team. It has meant re-styling, re-factoring and re-architecting Affino from the ground up to be more productive and easier to learn. Affino 7 also has a great new minimalist look, and now works great on tablets and mobile devices. With Affino 7 we’ve set a new baseline which means that every new element we roll out in Affino will be that much better.
Affino has a brand new Control Centre and Live Edit tools. It is now optimised whether you’re using it on a desktop, laptop, tablet or mobile device, so you can use it anywhere any time. We’ve really raised the bar for every management interface in Affino. You fill find almost every task easier to do, with great new short-cuts, lookups, help items, searches, lists, entry forms, and navigation elements.
Affino has been brought right up to the leading edge with it’s platform support. It now runs on the latest technology which means it is faster, more reliable and more scalable than ever before. It also means that the Comrz team will be able to accelerate the development of the Affino platform in the weeks and months ahead.
There’s a great new Design Centre. The Design Objects are now completely managed within native browsers with no Flash requirement. All the Design Control screens have seen significant updates and Affino now has better than ever custom CSS support. We’ve also introduced some much needed enhancements such as padding on Design Cells and full Font styling, along with a breakthrough ability for you to be able to secure each and every Design Element
The Affino 7 Control Centre will build on familiar metaphors. Behind the scenes it’s all change though with every single screen having been updated.
You will be more productive at doing almost any management task, whatever the context.
Expect a great new look. It’s a natural evolution for Affino, and is better suited to the mix of desktop and mobile environments Affino is used in. It will also be faster.
No Screen Left Behind
We have been on a year-long process of updating every Control screen to be more effective at delivering what is needed. We will complete that process in Affino 7, with dozens of interfaces becoming much more useful.
One of the biggest compromises we made with the Affino Control Centre was using frames to display the navigation elements. This was essential at the time to allow for dynamic drill-down navigation, but it meant that the URLs were no longer representative of what you were doing.
Frames are deprecated, they’re on the way out. Although they’re still supported by browsers they are no longer the best way to do things. HTML 5 offers us better alternatives. This will mean though that you will need a modern browser to manage Affino sites. IE7 doesn’t cut it any more.
You will be able to directly link through to any management screen using simple URLs. No more clicking around required.
Also when you share a URL, it will be exactly the screen you’re referring to. Something which will be particularly useful for support.
There is a massive benefit for Affino development with this approach in that we can now run a great deal more automated tests on the Control Centre, which should ensure higher quality levels all round.
We’re working through every control screen again to ensure that the highest level of security is in place for each one. Since nothing is more important.
Since Flash simply doesn’t work on mobile devices any more (and never really did) we’ve been busy removing it for the past year and a half. Affino 7 sees the removal of all but two Flash control elements (Dashboards and the Media Editor) which will be converted to HTML 5 in the following release.
Affino 6.0.16 is the final significant Affino 6 release. It’s the culmination of a greatly improved Affino user experience where almost every interface has been enhanced during the course of the last couple of years. We’ve focused on smoothing out the remaining rough edges in Affino 6 and it’s now a whole level easier than it’s ever been.
This release sees the introduction of Cookie Policies to meet the EU Privacy Directive. These are smart and geo-targeted so that only users from the relevant countries are presented with the policy dialogue. Additionally continued browsing is registered as implied consent so as to minimise any disruption to the user.
Affino ecommerce makes yet another big step forward. In this release we’ve significantly improved shopping baskets which are now editable, can be taken over and handed back to customers, or created from scratch and assigned to customers. The baskets also have greatly improved audit tracking and styling. There are also dozens of significant updates throughout the shopping experience which mean that buying is now more engaging than ever in Affino.
There are some major usability improvements in this release, in particular the new Guest Browsing Mode which allows you to instantly switch to the customer’s point of view when managing the site. It is now much easier to navigate through the Control Centre with better browser tab naming and highlighted drill-down links throughout the Control Centre.
As with all Affino releases, we have upgraded the integrations with a number of 3rd parties to reflect their changed APIs. We also integrate with Broadbean for the first time for incoming job briefs. The integration updates with Facebook, LinkedIn, PayPal, Metacafe and Google Merchant Centre are critical if you integrate with any of them.
The improvements we have also made to: the checkout, publishing workflows, recruitment, funding platform, geo blocking / targeting, and user export make this an essential update if you’re using any of those elements.
This is also going to be the best tested, most polished Affino release to-date, as we further evolve our quality assurance processes and build up our core project management team. We’ve added a whole new layer of QA in this release so that you can have the best possible
Affino 6.0.15 Release - Ecommerce, Usability and Recruitment
This release is the culmination of seven months work on the new Optimised Affino Checkout. During the course of the last six months we have rolled out dozens of incremental improvements (and fixes) to the checkout process to drive higher conversion rates. The checkout experience has been taken to the next level with a complete revamp for simple, fast checkouts. We’ve also rolled out a new ecommerce engine, greatly simplified the ecommerce setup and made many nuanced enhancements to the whole ecommerce experience.
We continue our focus on Usability with in-context Help and Feature guides in each Control Centre. We have also greatly improved the process for setting up and running multiple Affino sites on a single Affino instance. Hundreds more elements have been made more intuitive than they were previously, and a lot of rough edges have been smoothed in this release.
Recruitment also sees a great leap forward with dozens of essential enhancements, including a great new Job Search Design Element, recommended jobs, refined CV handling and much more.
Affino’s style has also subtly improved in this release. Many elements now look better than before, in particular Affino Design Elements, but also the font sizes and proportions, many notifications, most ecommerce and recruitment elements, member search, the funding platform and events.
This is a Major update which sees amends to everything from registering, logging in, adding to the basket, checking out, member’s profiles, all Design Elements and much more. It is essential that you set aside time to review your site after the update. Ensure that you liaise with your Account Manager prior to the update and update during Comrz support hours to ensure a rapid response to any issues.
Note: you are strongly advised to become familiar with the new checkout on Public Staging prior to updating to this release. It is a complete reworking of how it works and it’s essential that you are prepared for the changes.
It is essential that you run through the complete update process starting with the Affino Updater, followed by the System Update, Re-Initialise Site, Design Element Update, Skin Update and finally Clear Guest Cache; all of which are available on
Over the past year there have been almost 100,000 posts on the various Affino forums, which makes them by far the most active part of Comrz’s support and of the Comrz website. There are lots of other ways users can find the answers to their questions faster and more effectively.
Below are the key ways you can answer your questions in the fastest way:
The Application Bar (which sits at the base of every one of your web pages when you’re logged in as an Editor) is the most useful tool you have in your arsenal. A good 10% of questions we get involve things that can be found right on the page. The Content, Design and Text tools allow you to go right to the appropriate settings and profile screens for most elements on your live page.
The Live Design mode does the same for aspects of your page design. It means that you’re rarely more than one click away from the settings or creating new content within the part of your website you’re in. Get familiar with the Application Bar, click on the various links, see how you can instantly copy your article to create a new one, or tweak and regenerate your Skin (page design).
Control Centre Super Navigator
The Control Centre Super Navigator (the navigation menu on the left-hand side) can immediately take you to whatever management interface (and answer 20% of your questions), content or media item, or your personal favourites at a click. If you’re not certain where to find how to export content, simply type ’export’ on the Control tab and you’ll see all the different types of export you can do from Affino.
Likewise, if you want to find a specific article, or media items, or section then simply go to the Content tab and type out the name, then hit the Search icon. You’ll get a list of all the items with matching titles. Between these two options you can quickly track down pretty much anything. The My tab is also incredibly useful as it will show you your content stream and allow you to instantly go back to any of your recent content.
You can always turn on the in-line help when editing in the Control Centre. This will provide (usually pretty useful) information on what a specific field is for. It can be especially useful for aspects such as import and export