My friend Jim spent months sitting at his computer trying to finish a site for a personal project he was working on. As soon as he got to a point where he THOUGHT he was finished with his super cool website, he gathered all of his friends together to show everyone his finished site that he had been talking about for months. So we pulled the site up on our phones because that's what people do nowadays. When I saw the website my first thought was, ‘This looks like SH*T’. Which was surprising because Jim is actually a really good designer. So I pulled out my laptop and checked out what it looked like on a desktop device, and it looked amazing. 

‍

Jim created a site for desktop, he did not design a Responsive Web Experience that will work for all devices. Don’t be like Jim. 

‍

Websites are no longer being accessed from desktop computers. There are phones, tablets, gaming counsels, and many other devices people can use to visit your site. And it has been like this for a while, which is why I was so surprised that Jim did know just how much web design has evolved.

‍

So to help Jim and others like him, I wrote this blog post to share what responsive web design is, why it is important, and some best practices for creating websites that will work on any device. 

‍

What is Responsive Web Design?

Responsive web design is an approach to creating websites that show up perfectly on all devices, not just on desktop screens like Jim's example. The primary goal of responsive web design is to ensure that your website's layout and content adjust fluidly to fit the available space without sacrificing user experience or functionality. This brings us to our first vocab term, LIQUID LAYOUTS. A good example of this fluidity is LIQUID Layouts.  

‍

Before responsive design became popular, developers had to create a separate version of the website for desktop and another one for mobile users. This approach was not only time-consuming but also led to inconsistencies in content and design. To update a paragraph, you would have to update it twice, once on the desktop version and again on the mobile version. With new and powerful mobile devices being released year after year, Someone, not sure who that guy or gal is, saved us all and made a better way to transition from a desktop version to a mobile version seamlessly.

‍

Why is Responsive Web Design Important?

‍

Enhanced User Experience: can you remember the last time you had a bad experience using something that was meant to be helpful? If you are anything like me, if I have a bad experience with something, I don’t use it anymore. So responsive web design makes sure that no matter what devices you are using, you will have an enjoyable time accessing that website. This is a plus because the owner of the site gets higher user satisfaction and increased engagement.

‍

Improved SEO: I love the saying, “If you build it they will come”. I like that saying so much that's the was my strategy for my site. Build it, and press publish and thousands of people will come to my site and tell me how good my work is. It’s not like that in real life. You have to Optimize your site for search engines like Google, to show them that you have relevant content for the people that are looking for it. A responsive web experience that works on Desktop and mobile devices is one of the ranking factors that search engines use to see if your site is “GOOD ENOUGH” to be shared with the world. Learn more about the impact of Mobile-first indexing on SEO.

‍

Cost-Efficiency: Managing and Maintaining two sites is tedious and time-consuming. Creating one site that is responsive and works on all devices will save you time building it, and save you time in the long run maintaining it.

Wider Audience Reach: As more people use smartphones and tablets to access the internet, having a responsive website ensures that you reach a broader audience.

‍

Future-Proofing: When it comes to tech, it feels like new gadgets are being released every day, most of which have web searching functionality. So it is a good idea to futureproof your site and create a site that can transition seamlessly between all of the standard breakpoints. 

‍

Best Practices for Responsive Web Design

Mobile-First Approach: This is a “HOT TAKE”, The Mobile-First Approach isn’t always necessary. I know a lot of you will disagree, and that's why I disabled the comments. For those of you who don’t know, the Mobile-First Approach is when you start designing for mobile devices and progressively enhance the experience for larger screens. This approach ensures that your site performs well on smaller screens, which are more constrained in terms of space and bandwidth.

‍

Flexible Grid Layouts: I tend to use Web Relative Units like percentages, VH, VW, and ems for layout elements instead of fixed pixel values. For those of you who don’t know about the relative units, don’t worry, I will be releasing a glossary of web terms later that covers all of the web terms. So subscribe so you get notified of that update and all of the other cool things I have planned. But, in short, the relative units allow content to adapt smoothly to different screen sizes.

‍

Media Queries: If you use any modern web builder this is done automatically, but if you ever want to code a site from scratch you can add media queries in your CSS to apply different styles based on screen width. The change to the different screen sizes at a specified width is called breakpoints. At these breakpoints, your design will change to accommodate that new screen size or device.

‍

Optimize Images: We as a society are very impatient. When we want something we often want it now. So if someone visits your site and the content and images don’t load in a respectable amount of time… which is instantly, people will leave. You can optimize your images to have smaller images for mobile devices to reduce page load times. You can also use this as an opportunity to create custom graphics or crop your images to fit the new dimension. 

‍

Testing Across Devices: You should test your site regularly and try to use various devices and browsers to identify and fix any issues that may pop up. If you are limited in the amount of devices you have, you don’t have to go out and buy 20 different devices to make sure your site works. You can use the latest tools and frameworks for responsive web design to help check the common sizes. 

‍

Content Prioritization: One of the reasons why I do not like the Mobile-first approach is that I almost always end up with less content on the mobile version of the site compared to the desktop. For me, I like to design the bigger picture and remove content as needed for the smaller sizes. That is how I prioritize the content when I design websites.

 

When not to use Responsive Web design

Responsive web design is very important to make sure all users can see a well-designed version of your site no matter what device they are on. But, there are situations when it may not be the best choice. 

‍

I wrote this very long blog post to tell you to make your site responsive, and now I am telling you that it’s not important. Well, only in a few situations. One of the situations is if your design is meant to only be on mobile, and you absolutely do not want the people to experience it on desktop. If this is the case, to ensure people don’t go to your site on a desktop you may want to consider just making it an app. One of the differences between Responsive Design and Mobile Apps is that you can only access the mobile app on a mobile device. 

‍

For more on what not to do, check out my article on the “common Responsive Design Mistakes to avoid”. 

‍

Conclusion

Responsive web design is no longer optional; it's a necessity in today's digital landscape. Creating websites that adapt seamlessly to all devices provides a great user experience, improves SEO rankings, and ultimately helps your website reach more people. By following best practices you can ensure that your website remains accessible and user-friendly for everyone, regardless of the device they use.

As always, if you have any questions feel free to reach out!

‍