As the number and variety of different devices and screen sizes people use to access websites continues to increase, utilizing Responsive Design is becoming more important than ever. A responsive website ensures that it is accessible and usable for all users, whether they are using a desktop computer, a smartphone, a tablet, or any other device.
However, while the topic of responsive design is on everyone’s mind, we’ve found that not everyone understands how it works. As we work with clients who are looking to redesign their websites, we often hear questions about responsive design that demonstrate that there are still plenty of misconceptions out there. We want to clear up some of those misunderstandings and help people know what a responsive site is and what it isn’t. Let’s look at some common myths about responsive design:
Myth #1: A responsive site is a separate mobile website
Not true. While some companies create separate versions of their website to be viewed on mobile devices (such as mobile.nytimes.com), this is not the same thing as a responsive website. A site that utilizes responsive design displays the same content for every user, automatically scaling it to the user’s screen width. These adjustments can include stacking content vertically, resizing images, rearranging page components, collapsing menus, and any other methods that ensure that a website provides the best experience for its users no matter what size screen they are using.
Myth #2: Separate content needs to be created for mobile users
Wrong. A responsive website uses the exact same content and templates for users who use desktop computers or mobile devices. When utilizing responsive design, website owners can Create Once, Publish Everywhere (COPE) instead of creating different versions of content for desktop and mobile users.
There are times when it might make sense to include mobile-specific content elements (see below for more about images on responsive websites), but in order to make sure you’re following best practices for responsive design, you’ll want to use content that scales to fit all screen sizes.
Myth #3: A separate site needs to be created for different devices
No. Responsive design is platform-agnostic, not platform-specific. A responsive site does not target the devices themselves, but rather their capabilities. For example, when a user accesses a responsive website, it will determine whether the device and browser they are using supports technology such as CSS 3, HTML 5, or JavaScript, and adjust their experience accordingly. The capabilities of the device determines what the users see, rather than the device’s manufacturer, model, or operating system.
Myth #4: A responsive site automatically adapts desktop content for viewing on mobile devices
Not exactly. A responsive website does display the same content on desktop computers and mobile devices, but this content needs to follow best practices for responsive design. Any content that does not follow these best practices will not automatically adapt. Making a website responsive is not as simple as pushing a button and automatically reformatting content; elements like fixed-width tables and images, or any elements that extend beyond a device’s viewport will break the page’s layout and keep the site from being able to adapt to smaller screen sizes. Making sure that you are following these best practices when creating content will ensure that your site is always accessible on every device and screen size.
Myth #5: When you COPE, you don’t have to worry about image size
False. While a responsive website will automatically resize images to fit smaller screens, it is still a good idea to make sure the images you use are not too large. Large image files can decrease site performance, especially on mobile devices, which often use slower connections, so it’s a good idea to utilize image compression techniques. Luckily, many Content Management Systems (CMSs) offer automatic image optimization to ensure the best site performance.
One thing to keep in mind is that some images, such as pictures with a lot of detail or images that contain text, may not be fully visible when scaled down to a smaller screen size. In these cases, it can be a good idea to swap out the image with a smaller version or a similar icon when it is viewed on smaller screens. While a responsive site does allow you to create content that is automatically formatted for all screen sizes, you still want to be sure you are creating content that will provide the best experience for every user.
What Responsive Design Is
As you can see, people still have plenty of misconceptions about what responsive design is and how it can be used to format websites for different screens. The true goal of responsive design is not just ensuring that a website provides the best experience for both desktop and mobile users, but also making sure that it will adapt to any new devices and technologies. The device-agnostic approach of responsive design is a way of future-proofing your website, making it available to everyone who uses it now and for years to come.
Do you have any questions about how to implement responsive design on your website? Do you want to know more about responsive design techniques and best practices? Please contact us to speak with a Solutions Engineer, and we can help you make sure your site provides the best possible experience for every user. Any other questions? Please leave a comment below!
