What is Responsive Design and Why Should You Use It?
Growing up in the 1990s/2000s, I used to watch TV shows where some of the characters had tiny computers they carried around with them. I always thought it was so cool that they could use these devices to talk face-to-face to each other yet be in completely different places! Little did I know that less than a decade later, smartphones–A.K.A. tiny computers that can do much more than just make FaceTime calls–would take the world by storm.
According to a Pew Research Center article from 2018, 77% of adult Americans own a smartphone. With over three-fourths of the adult population carrying a tiny computer with them everywhere they go, it is necessary to rethink the way we design our websites.
This is where responsive design comes into play. Responsive design means that a website’s viewing experience is optimized for different device types. For example, a site will display differently on a desktop computer than a smart phone. While the desktop will display the site horizontally, the phone will display it vertically.
Responsive design isn't a trend or a fad; it’s here to stay as devices and technology are constantly changing. Any site that doesn’t optimize their site for mobile will likely lose out on some potential customers to competitors who do employ mobile-friendly sites.
Now that you know how important it is to make sure your website is responsive, you might be wondering how to create one. Here are a few things to consider:
A Responsive Site is Not the Same as a Mobile Site
There are two options for optimizing your website for mobile. Option one is to create a mobile site, and option two is to create a responsive site. It’s easy to get the two confused, but they’re actually very different from one another. Here’s an explanation for both:
A mobile site is a separate entity from your actual website with a new design, new layout, and new functionality. They often live on a separate domain (e.g. m.website.com). Since they only have features that are deemed appropriate for mobile, the designs are very limited in their functionality and may not reflect the full extent of your content on the desktop version. This can lead to visitor frustration if they are looking for something they may have previously seen on your desktop site that is now unavailable to them. Mobile sites also require more work and a larger budget because you are essentially building two websites at once.
A responsive site is when your main website reorganizes/stacks the elements depending on screen width. Design options are plentiful and you can make specific changes based on different sized devices (computer, phone, tablets, etc). The branding and elements will mostly stay the same, but will be arranged in a way that looks great and is easy to digest on any device. Though it requires some additional coding work, building a responsive website is a faster and less expensive process, the outcome is much more professional, and provides an overall better user experience.
Design with a “Mobile-First” Mindset
Designing with a “mobile-first” mindset means keeping things simple and focused on the content. Take a look at Apple’s website for example. They use large images, fonts, and buttons and keep the copy minimal. There are no flashy effects or any other distractions. If you’re looking for information on the latest iPhone, you’ll find it quickly on Apple’s homepage. Most importantly, the experience is the same whether you look at the site on desktop or mobile; you don’t feel like you’re on a completely different site when you switch devices.
When designing “mobile-first” for your website, consider these four tips:
1. Determine the visual hierarchy.
Hierarchy is the way elements are displayed based on their importance. For example, the most important information should be at the top of the page and displayed prominently.
2. Use large touch targets.Touch targets are what users tap when exploring websites on mobile. Since fingers are less precise than cursors, touch targets should be large enough for users to tap with the full width of their finger, rather than just the fingertip. Apple recommends a minimum size of 44px for touch targets. It’s also important to make sure that any touch targets are far enough apart from one another to eliminate the potential for accidental clicks.
3. Don’t rely on hover effects.Mobile devices don’t have hover effects since you’re not using a mouse, so make sure anything that is meant to be a link appears clickable without the use of hover effects.
4. Test your site on your phone.
The best way to test if your site is truly responsive is to test all the pages on your mobile device. Make sure the text is easy to read, the links are easy to click, and the site is overall easy to navigate.
Send Your Developer a Mobile Design
When designing your new site in Photoshop, make sure to send your developer two versions of each page: desktop and mobile. Not only does this cut down on guesswork for the developer, but it also ensures that the page looks and functions exactly as you planned on each screen size.
Creating a separate mobile design document will also help you decide what translates well from desktop to mobile. You’ll be able to see what elements need to be hidden or scaled down, and it will help to determine the stacking order for mobile devices. Taking the extra step of creating a separate design will help improve the user experience of your site.
Use Media Queries
Media queries are lines of code used in your CSS stylesheets that allow you to adjust the styles for different screen widths. With media queries, you can have separate code just for your mobile designs. They will allow you to change font sizes, line-height, padding and positioning of your elements on mobile devices.
Media queries also allow you to hide elements on different device types. As an example, let’s say you have a large horizontal chart image on the desktop version of your website. You notice on your phone that this image becomes small and unreadable on mobile. You can create a mobile-friendly version of this image, and then use media queries to hide the desktop version and display the mobile version instead.
Media queries work based off of breakpoints. Breakpoints are the screen sizes at which the layout of the webpage changes. You don’t have to use device-specific breakpoints; in fact, it’s better that you don’t because there are so many different device sizes it would be impossible to accommodate them all perfectly. Instead, you can decide the breakpoints that make sense for your content. Some common breakpoints that aren’t device-specific include: 1199px, 991px, and 767px.
Create a Mobile Menu
The navigation on a mobile device is different than a desktop site. On desktop, the navigation has links across the top that use hover effects to open dropdown menus. Since the space is more condensed on a phone and hover effects don’t work, you have to create a separate mobile menu for your website.
The most common type of mobile menu is the hamburger menu. The hamburger menu gets its name because of its appearance: three lines that look like buns and a patty. This option works great because you can still include all of the links that are on the desktop version of your site, but it’s optimized for mobile users. People are also very familiar with how they look, so when they see the hamburger icon, they’ll immediately know that it’s a navigation menu.
Issues to Look For When Testing on Mobile
Just like you would run quality and assurance testing on your newly developed desktop website, you should also thoroughly test it on mobile. Google Chrome has a great developer tool built into the browser that allows you to see what your site looks like on different screen sizes. HubSpot offers different preview options as well for phones and tablets. To check your website on different types of phones, consider investing in a crosscheck platform to see how it will look on both iPhone and android. Lastly, make sure to review your site on an actual phone to make sure everything displays and functions properly.
Here are a few things to look for when checking your site on mobile:
Slow Load Times
Slow load times can be a deal-breaker, especially on mobile. If a page takes too long to load, visitors will leave your site and probably end up seeking out your competitors. There are two ways to prevent this:
- Reduce image sizes. Before uploading images to your website, always double check the file size. If the image is over 200kb, you will need to reduce. Smaller file sizes will drastically improve load speed.
It’s a good idea to double-check spacing on mobile. Oftentimes there is a white gap on the right side of the screen, adding a horizontal scrollbar. Make sure to reduce padding and margins to reduce scroll time for users, and verify that no text is touching the edges of the screen.
Check links, including the mobile navigation menu, and make sure they’re all working and easy to tap with your fingers.
Responsive Design is Here to Stay
As devices and technology continue to evolve, one thing is for sure: responsive design is here for the long haul. When you design your website, remember to design with a mobile-first mindset and implement the above tips to ensure your website is mobile-friendly.