Building a website that works well on nearly every device is critical in our multi-screen world. Responsive design provides a viable solution and has become a “must have” for new websites. But while the concept is simple, the planning and execution can be more complex.
While most clients looking to redesign or build a new website understand the need for responsive design, they don’t always understand how the process and how long it can take to build a custom site as well. Custom responsive design requires more planning, design time, development and testing—but ultimately provides a better and more unique user experience. When building a custom responsive website, designers and developers work together to ensure that there is a positive user experience across all devices.
Here are some things to know about the process before you build a custom responsive website.
Understand how the web design process has changed
Responsive web design has been quite a learning process in the web design community. And every agency is still trying to figure out the best way to approach it. Before responsive, websites were much simpler. Now, technology has evolved—there’s more functionality, capabilities, integrations and design elements, not to mention the ever-expanding content management needs and the long list of devices and browsers to support. Because of this, responsive web design can be challenging to understand how all of these items are affected across all devices.
Set the right expectations going in
Responsive design has been a game changer for web design, but there are limitations to what responsive can and should do. What might be possible on desktop might not be possible or practical on mobile. And while the goal is to make the user experience as seamless as possible from device to device, you simply can’t expect to perfectly replicate the desktop experience on a mobile device (nor should you want to).
There’s going to be subtleties, variations and differing content priorities—and that’s okay. For example, filters for a portfolio are helpful on desktop, but are not really helpful on mobile devices. The needs and interests of a mobile user vs. a desktop user should be taken into account during the design process.
Plan to focus on content hierarchy
When planning a responsive website, it’s important to determine what content is essential for mobile and what isn’t. Think mobile first. What’s your audience going to your website for on their mobile device vs. their desktop computer? For example, your phone number might be essential front and center on mobile, but not necessarily on desktop. It’s important to think through each device—mobile, tablet and desktop—in terms of content hierarchy when planning the website.
Content hierarchy is also important to discuss before the design phase begins. Once you have a site map that shows the site architecture of your website, you need to decide the content that’s most important for each page. A mobile device is narrow so it forces content to be presented in a single column. Because of this, you’ll want the most important content first, not necessarily an image or graph that might appear first on the desktop version.
Content first is critical
Content is essential to have first before design can begin. For websites with custom design, we design specifically for the content that should be on the page. This is more time for the client upfront, but the result is a more efficient process and effective, beautiful design for your website.
Expect more design and development time
The main difference with responsive web design is that designers have to account for least 3 major breakpoints—desktop, tablet and mobile. So instead of one design for the desktop version of the website like in the past, responsive design requires considerably more design time. Along with more design time, the different breakpoints require more time for developers to code so that the website adjusts depending on the device it’s on—as well as also checking the three breakpoints across different browsers and devices.
Be ready for lots of testing
Your website should look amazing, but it should also function properly when it’s launched. Your custom websites should be tested on all the major devices (i.e. iPad, iPhone, Android, etc.) and browsers (i.e. Chrome, Firefox, Safari, Internet Explorer, etc.). This step is critical since every device and browser will render the website differently. While we test along the way, we usually have 2-3 weeks of dedicated testing time to ensure everything is ready for launch.
/ / /
While building a custom responsive website can be challenging, they’re absolutely needed in today’s multi-screen world and worth the effort. They’re an important investment for your company’s online marketing presence. A responsive website will help your company meet the growing demands of mobile visitors and provide a good user experience for all of your prospects and customers.