One of today’s major requirements for websites is responsiveness. This means that the layout and content of a website need to automatically resize to fit a given device, whether that is a mobile phone, tablet or desktop computer.
But what does this requirement mean for a supplier of website building tools? Is it enough to just add a number of “responsive design templates”? What about all fixed-width content elements and widgets in a user’s website? How will they behave in content areas with a flexible width?
When we decided to “go responsive,” it meant a complete refactoring of our core website editor engine and more:
1. We needed to eliminate or rewrite all those pieces of code in our core editor engine with fixed pixel sizes. And we were no longer allowed to hand over any pixels or width parameters to any included content element or widget.
2. All widgets now had to run in “100%” - regardless of whether 100% meant 180 pixels or 1,000 pixels. We had to discuss and rewrite nearly every single widget to make it look good at any size. Of course, this is not very complicated with an image – but complex widgets like shops or guest books proved to be a challenge! Some widgets now provide their output in different formats (small, medium, large) and get automatically replaced depending on the current size of their content area.
3. We had to agree on a number of “viewports” that we wanted to support – i.e., different layouts for different browser sizes. We defined five of them in total: mobile phone portrait and landscape, tablet portrait and landscape, and desktop. Our template designers started to develop new layouts, each including those five different formats. Every single format can have a different navigation and layout. Sidebars can flip below the main content; horizontal navigations might disappear and a touch button could be displayed instead.
In a nutshell, “going responsive” meant a large amount of intensive development time, conceptual work and quality assurance. Not to mention that, of course, all non-responsive websites and existing user accounts needed to function as they did before. We did a great job at ensuring that our responsive websites look and work as one would expect from CM4all Sites without interfering with existing websites. We can now deliver a future-proof technology that meets current and future market requirements.