Responsive Web Design, Demystified
SEO. Social Media Marketing. Audience Engagement. Now what?
It’s time to add “responsive web design” to the list of business buzzwords. And it gets thrown around so often you might think it’s magic. Just click the “responsive design” checkbox, and all will be well!
But that’s not the case, or at least, not the whole case.
What is Responsive Web Design, Anyway?
At it’s core, responsive web design is simply creating a website that looks great across different screen sizes. The page elements are rearranged based on a visitors screen size so a user can still navigate and use the site, whether they’re on a mobile phone, a tablet, a laptop or a massive desktop monitor.
But it’s not quite that simple…just because your site is usable on various screen sizes doesn’t mean you’ve created a great user experience for visitors. There’s no “one size fits all” solution to a great experience across all devices.
So, how do you create an effective responsive design?
The Three Things You Need to Know About Responsive Web Design:
1. It’s Not Magic
Many websites and themes claim that they’re “responsive,” and they likely are, but again, “responsive” does not equal “great experience”. There’s no magic button for that. Elements collapse and rearrange, so yes, technically that is “responsive”, but to create a true responsive experience, lots of thought has to go in to the design of each screen size. Just because the website looks okay on a phone doesn’t mean that it’s going to function well for users–you can’t leave the user’s experience up to chance. Simply shrinking your site down to mobile likely isn’t the best experience for a mobile device.
2. Pick Your Screen Sizes
Given that you do want people to have the best experience, you need to know what screen sizes you’re customizing your design for. You likely can’t design for every screen size, so we suggested picking the top 3 most prominent for your audience. For most people, these breakpoints will be:
- Smartphone – 480px wide
- Tablet – 768px wide
- Desktop – 1024px wide
To get an idea of what screen sizes and devices you should choose, take a look at your analytics and see what types of devices your audience is already using to view your site.
For each type of screen, you need to pick design priorities based on what you know about your customers and how they’re likely to be navigating. For example, you might hide a slider on phone screens, because it takes up too much space. Or change the look of the navigation menu for tablet users to make it easy to move through each page of your site.
3. Responsive Design is about Adapting the Design, Not Changing It
A responsive website isn’t the same as a mobile website or mobile app. It’s not going to fundamentally change the way the viewer will use the website. If your mobile users are after a very specific experience–for example, they just want to book an appointment on the go–then it might make more sense to create a mobile specific website. Responsive design is about adapting the experience, not changing it entirely.
Want to know more about when you should design a mobile website or app? Check out our post: “Do You Really Need a Native App?”
Is it Worth it for My Business?
Yes–absolutely. As a population we’re becoming more and more tech obsessed, with one million smartphones sold daily and 50% of data now being consumed on mobile devices it’s important that users can use your site on a mobile device.
Your website is one of your most important business assets, and there’s every chance that the first time someone sees it, they’ll be on a phone or tablet. Even desktops now have a huge variance. Your viewer could be on an 11” MacBook Air or a 27” monitor, and if your site isn’t designed to be responsive it’s going to look bad on at least one of those screens.
Every interaction a person has with your website can move them that much closer to being a customer or that much further away from being a customer. Make sure they get a great brand experience no matter how they’re viewing it.
