Sara Mote and I founded MOTE agency in 2014. We specialize in ecommerce, providing refined design, cutting-edge engineering, and the highest order of service to an ever-changing marketplace. In my career as a web developer I’ve fostered an appetite for innovation and a focus on crafting websites for brands that want to cultivate enduring relationships with their audiences. Here are some insights gleaned from my 26 years of experience.
If you’re designing a new website, you’re probably doing so on a desktop computer. But when users view your site, more than half of them are likely coming from a mobile device. (If you have a Shopify store, you can see the exact breakdown of mobile versus desktop traffic analytics from your Shopify Admin.)
Browsing on mobile is a different experience from browsing on desktop, but you want users to have a consistent experience with your brand across devices. Responsive web design is how you achieve that. Here’s how the principles of responsive web design can be used to optimize your online store.
What is responsive web design?
Responsive web design is website design that adapts to the user’s device. With responsive web design, users see a version of your site optimized for their mobile phone, desktop computer, or tablet. That involves designing for automatic image resizing and text scaling, as well as placing key features (like the navigation menu or shopping cart) within thumb’s reach. The point of responsive web design is to create a seamless, friction-free experience for site visitors, no matter how they’re interacting with your site.
Mobile-friendly vs. responsive web design
The difference between mobile-friendly web design and responsive web design is mobile-friendly design simply means a mobile version of the site exists. With responsive design, the goal is to ensure the website looks good on every browser size. This includes mobile devices but also tablets and the different browser sizes possible on a desktop.
In the past, web designers built separate desktop sites and mobile sites. But sometimes the two versions looked entirely different, which can cause cognitive strain for the user. Responsive design, on the other hand, creates cross-channel harmonization and makes it easy to switch between the desktop and mobile versions of your site.
Why is responsive web design important?
There are more ways than ever for users to find your website. When they do, you want them to see a version of your site that functions well and looks good. Responsive design is especially important for ecommerce since 70% of transactions happen on mobile phones. For some merchants, this number is even higher.
For example, if a large percentage of your traffic comes from Instagram, your customers might primarily view your site via the Instagram browser experience that opens up when someone taps on your link in bio. If that experience for your site is confusing, visitors could easily back-button into Instagram without engaging further with your business. But if you optimize for the ways your audience will most likely interact with your site, you support many of the key aspects of building a successful business, including improving your website’s bounce rate, establishing cohesive branding, and building a quality user experience (UX).
Elements of responsive web design
Here are the core elements of responsive web design to consider:
Typography and baseline grid
Responsive design starts with typography. That’s because the font size for the body of your website copy will determine the baseline grid of your website. A baseline grid is a strong part of a brand identity, but it’s much less tangible than certain other branding elements. Using a body font size like 16 pixels (or 12-point font) that can work for both desktop and mobile can maintain that baseline grid.
Your heading font sizes, on the other hand, should adapt from desktop to mobile: A 100-pixel header might work for desktop, but would be much too large for mobile. As you make typography decisions, keep in mind how your selections might look to scale on different devices.
Flexible images
Flexible or responsive images change size to adapt to different screen sizes while keeping the same image ratio. Picking image ratios that work across different channels can save you time when preparing assets for different channels. For example, a 4 by 5 image ratio works well for product images because the same image will scale clearly for desktop, mobile, and Instagram.
Media queries
CSS media queries are the pieces of code that help your design adapt from one size to another. Today, most websites are mobile-first, which means the code is written for mobile and adapted for desktop or tablet using media queries. A media query like “min-width: 750px” will indicate that if the user’s screen is at least 750 pixels wide, they will see a different version of the site.
Example of responsive web design
For jewelry brand Caitlyn Minimalist, core branding elements remain consistent across website versions. However, there are a few differences that make the site’s mobile version more functional for users on their phones, while simultaneously creating an immersive storytelling experience on desktop.
Let’s compare and contrast how a few core elements of its website appear on mobile versus desktop.
Homepage
On its homepage, the body font size and baseline grid stay the same but the brand promise “Redefine your everyday” scales down quite a bit when you’re on mobile. Instead of two photos, the mobile version features one. This effectively simplifies the experience on smaller screens, without compromising branding.
Navigation menu
Caitlyn Minimalist’s desktop site features a mega menu (accessed from the top of the page) that shows off all its collections at a glance, along with a featured image and short description of the Initials collection. By contrast, the mobile site’s menu is simplified into a single column on the left-hand side. That makes the small screen experience more focused and less overwhelming for shoppers.
Product page
The mobile version of Caitlyn Minimalist’s product page features an image carousel with horizontal scrolling, which phone users are familiar with navigating. (For example, Instagram posts with more than one photo use the carousel feature.) This allows mobile users to see the same range of images as desktop users, despite the more limited space.
How to make a responsive website
You don’t need to invest in a bunch of fancy tools to make your responsive web design work. Here’s how to get started with responsive web design:
1. Start with pen and paper
Your website should tell a story, and pen and paper is a great way to map out your story using different elements like text, buttons, and images. You can get started with a surprising amount of responsive web design work with pen and paper. For example, pen and paper can help you reason through user experience decisions on something like your product pages. That lets you figure out how to do things like present your product images on mobile versus desktop, without having to work with code to achieve those concepts.
2. Use a responsive website template
The easiest way to incorporate responsive design into your website is to start from a template that already has it built-in, like one of Shopify’s responsive themes. Using a predesigned responsive theme ensures users will be able to use your site from any device, without you having to worry about any coding.
After you use pen and paper to map out your story, you can go into the Shopify theme editor and choose the elements you need to tell your story. The theme editor offers a lot of options, so referencing your pen-and-paper design can help you avoid feeling overwhelmed.
When using the theme editor, it helps to take a mobile-first approach. Shopify makes that easy by letting you view the mobile previews of your web pages before switching to the desktop previews.
3. Hire a web designer
If you want a fully custom website, you can work with a responsive web designer to bring your vision to life. Your designer can show you mockups of how your site will look on different devices, and work closely with you to bring your vision to life while prioritizing responsive web design principles.
Responsive web design FAQ
What are the three basic things required for responsive web design?
The basic elements of responsive web design are:
- Typography, which dictates your website’s baseline grid.
- Image ratios, which influence how image resolution and legibility will scale across devices.
- Media queries, which are pieces of code that allow web pages to adapt to varying screen widths.
What is an example of responsive design?
The Caitlyn Minimalist store is a great example of responsive design because the mobile and desktop versions of the site have the same core brand elements (like body font size), while slight differences (like placement of the navigation menu) prioritize ease depending on the device.
How can I create a responsive web design?
The easiest way to create a responsive web design is to select a responsive Shopify theme. In the Shopify theme editor, you can customize as needed (no coding expertise required) and preview how your site will look on different devices.
