Building an effective web experience is hard work, that's no secret. We started our series talking about goal setting and intelligent content, then moved on to personalization and content targeting. Now we need to get down to the nitty gritty basics. And that starts with support for mobile devices.
Responsive design is the process of designing a web page so that it automatically resizes and adjusts the web page based on the device minimizing the need for scrolling, panning or manually resizing the screen.
Your design must respond to the user's viewport if you want to deliver even a baseline acceptable experience. - [Source]
Responsive design is a great approach to creating a web experience that works on any device - desktop, smartphone, tablet or another device. Developers implement code that defines how the web page should resize based on the size of the screen viewing it.
Using CSS and HTML, you can resize, hide, shrink and grow the web page and its content. Responsive design is not a device specific approach to adjusting the user experience (that is adaptive design). It's a screen size approach that enables many different devices to view your content without the need to manage multiple designs.
Key Steps and Best Practices
Creating a user experience that works across devices is not as simple as just implementing responsive design code, there are key considerations you must do before you move ahead with this approach:
- Prioritize your content carefully. With responsive design the visitor can easily adjust the view of your website, so think about the content that is most important and where it resides on a web page. Then look at where it appears when the web page is resized and decide if that view is effective and supports your visitor's expectations.
- Usability is extremely important for any web experience, whether it's on a desktop, a tablet or a smartphone. You need to test how your website looks on a number of different screen sizes to ensure it is still user friendly.
- Responsive design can affect the performance of your website, especially when viewed on smaller devices. All the code to adjust the size of the webpage is sent to the device using it, regardless of device. Having all this extra code can impact the performance of smaller devices, or devices on how bandwidth, so test this aspect carefully.
Some useful links:
Want to understand how Ingeniux supports responsive design? Check out our paper: Mobile Customer Experience: Strategies for Delivering Mobile Experiences with Ingeniux CMS.
Subscribe to the Ingeniux blog for the latest in web experience management.