Some may remember a time when application design meant putting characters on a dumb terminal screen in a somewhat organized fashion, but with only a little regard to the viewing experience. As soon as the Internet provided a gateway for customers to connect with your business, site design became a competitive factor. Add to the mix the increasingly complex variety of devices that customers use and developers find that they need to take their game to the next level.
Companies have tried a variety of approaches, including doing nothing and leaving the phone and tablet user dealing with poorly rendered screens. Another approach is to have a different URL for each device, but that puts the burden on your customer. Yet another is to create a mobile version of your application, but this means a lot of work and perhaps a less optimal view for some users. Couldn’t it be better?
A better user experience can be had with Responsive Web Design (RWD), an approach to site design that focuses on a great viewing and interaction experience on whatever device the user chooses. Users will have the same experience on every device, a site that is easy to read and easy to navigate.
When viewing a movie, we’ve all seen the boilerplate that the ‘picture has been adjusted to fit your TV screen,’ or something similar. The first RWD approach was seen in 2001 when Audi.com created a layout that adapted itself to the browser viewport width. Companies began describing the requirements as ‘flexible’ or ‘fluid’ but it took some time to figure out how to render that with software. No one wanted to have to create a website for each device.
Ethan Marcotte coined the term ‘RWD’ in 2010 to describe how layouts could be created to meet the requirement. The key word was ‘responsive;’ the website responds to the user’s choice of devices. The importance of this design philosophy was heightened when Google began to change its ‘search’ rules to favor sites that were ‘mobile-friendly.’ The challenge was that we had already developed sites optimized for web on PCs. In many cases, lots of cute, but unnecessary techniques were applied that simply don’t make sense on smaller form-factors. (Remember the ‘dancing baby?’)
To implement RWD, you need to adapt the screen layout to the device by using flexible grids and images as well as CSS3 media queries. Flexible/fluid grids use size relatively, as with percentages, rather than fixed units like pixels. Flexible images also need to use relative units so the full display is visible. Media queries help you use different CSS style rules based on the device characteristics.
It may take a little longer for the initial implementation but in the end, the result is powerful. When you need to make changes, you only have to make them to one code base, not replicate them for any new device. As devices change, your code will adapt. Long-term, the cost is much lower. That’s an added benefit to the more obvious one of satisfied customers.
But how do you start? A great approach is to start with CM WebClient, where a lot of the details are managed for you. Responsive design is a lot easier with a solution that provides the fundamentals for you, and doesn’t require a great deal of investment in education.
Did you like this article about “BE MORE ‘RESPONSIVE’ TO YOUR CUSTOMERS” – email us future blog topics to info@cmfirstgroup.com
