Automatic Mobile Strategy: Responsive Design
Bård Farstad, eZ's Chairman Product Innovation Board
Having a mobile strategy is essential these days.
Responsive Design also ticks a box for Accessibility.
There are many ways to tackle this from providing different HTML5 versions of your site for PC, tablet and mobile channels, to providing full featured native Apps or simply deciding to not have one and wait and see.
Responsive design, or adaptive design, is a very good way of having your website automatically adjusting to the visitors device. With responsive design you can still control what appears and how things appear for the different devices, but you do not need to have a separate channel or URL defined for the different devices.
We have introduced responsive designs in the templates that ship with eZ Publish and this enables you to quickly come up with an online solution that is not just up to date with the latest HTML5 and CSS3 standards, but one that automatically adapts to the visiting device. All with the same URL!
The screenshot below shows the out of the box templates for eZ Publish viewed in 3 different device resolutions. As you see the image sizes, navigation, number of columns etc. are automatically being adjusted.
iPad and Tablets:
iPhone and other mobile devices:
Combined Benefits: Single Audience View
There are several good things with having responsive designs. The obvious one is that you are instantly mobile and tablet enabled “just like that”.
Since all content is accessible via the same URL you can more easily see the combined traffic of your site and not per channel. You are still able to easily drill down into device specific analytics with tools like eZ odoscope: Smart Site Analytics.
Other benefits? The list is long. Here’s some:
- Time saved not having to produce separate versions.
- Test and trial purpose and popularity of your content by audience on mobile device before investing in bespoke mobile channel (if ever!)
- Lower number of vendors.
- Less complexity
- Lower bills for what might be a similar end result!
Accessiblity as a positive side effect:
A great side effect that I have not seen discussed in our industry chatter is that this technology can help concerned publishers with their commitments to accessibility for readers with visual impairment.
You see a visitor can now simply increase the font size in the browser and the content and design adapts to this new setting. The screenshot below is an example of increased font size in the same design. As you can see the design adapts perfectly.
Now, as the tablet penetrates the ageing population what better than to give them big text that stays loyal to your brand look and feel.
I’d be interested to read feedback on this issue.
As there is no doubt you have to go mobile you should start with using responsive designs. This will give your visitors a good experience in all channels and you can easily see what device gets most used. Invest later in those content experience channels for devices that generate decent traffic…but only if you think the extra effort will make a real added difference!
Test the eZ Publish 4.7 release if you want to see responsive design in action for yourself.