Planning and Information Architecture
Building a responsive website means planning ahead to cater for a range of devices, screen resolutions and contexts. Responsive Design doesn't just resize webpages on the fly, it actually restructures the page layout, content and menu structure to prioritise features depending on the end device and the context in which it's used. This means planning ahead to consider what various users will most want from your website. For example, you might make contact and location details more prominent on mobile devices to cater for users on the go.
Responsive Design generally has little impact on integration with a back-end Content Management System. You have the benefit of relying on a single CMS to cater to all devices, but it is important to ensure that your CMS supports this approach and doesn’t interfere with the rendered HTML and CSS.
This is one phase where considerably more work is involved compared to designing a desktop-centric website or fixed-width designs which only cater to a handful of device classes.
While building a responsive website is certainly not as much work as painstakingly building new pages for every different screen size and shape, the developers do need to consider that any screen could be used to view the site. This means developing multiple versions of many page components, and selectively displaying them based on testing across the full range of possible screen sizes. As always, the aim is to offer visitors the optimal user experience.
A classic example of this optimisation is the main menu or navigation tools on a website. On the full desktop site, the main navigation tools might be a horizontal list of large, text links. On a small mobile device they might become a drop-down menu, perhaps hidden behind an icon in the top corner. On a tablet, one or the other approach may work, or perhaps a third approach which requires further collaboration with a designer. Depending on the complexity of the design it's possible the amount of development effort, testing and quality assurance can be much higher than that of a single, fixed-width layout.
Wireframing and Design
It’s not always necessary to design every possible screen layout for every possible device or resolution, but Responsive Design does require more consideration regarding how each screen is going to adapt and respond at different sizes and in different contexts. The aim is to put in the hard work here to eliminate ugly break points and offer a smooth and intuitive user experience at all times.
QA and Testing
It's naturally going to take longer to test your responsive website across many devices, rather than just ensuring it looks good on the desktop and treating other visitors as second-class citizens. At the same time, Quality Assurance and Testing for a responsive website is less demanding than undertaking the same task for separate desktop and mobile websites, or a suite of mobile apps.
Maintenance and Continual Improvement
Responsive Design lets you build a great user experience for your website visitors, but it's a mistake to turn your back on your site once it goes live. Ongoing maintenance ensures that your responsive website continues to deliver the best results, while continual improvement can include new sections and templates that need to follow the same process outlined above, including thorough QA and testing.
Building and maintaining an effective responsive website for your business involves more work upfront, but that work keeps paying for itself further down the track. Planning and testing for multiple devices, ensuring your backend CMS is up to the task and building a responsive front-end are all investments that will ensure your website serves your business well and delivers a solid Return on Investment.
Now we've crunched the numbers, next we can examine the elements of good responsive design and best practice to build the perfect site to cater to the needs of all your visitors regardless of their browsing device.