When business owners speak to us about website design, they often ask us which elements they should focus on the most. Although there are many website design elements that businesses should know about and pay attention to regularly, one stands out above all the rest: mobile responsive websites.
Mobile responsive design has evolved from being optional to being a necessity when it comes to web development. If the software you’re using to build your site or your developer has not fully tested the new design for wide desktops (4k), laptops, iPads, and mobile, you need to take a second look at things.
In this overview, we’ll dive into the nitty gritty of mastering mobile responsive design and its vital role in optimizing for search engines.
Understanding Mobile Web Design
The Evolution of Mobile Web Design
Over the years, mobile web design has seen some pretty big changes. From simple, scaled-down versions of a website on separate subdomains (m.domain.com, for example) all the way through to the current mobile-first approach. While we love the phrase “everything old is new again,” this is not the case with web design. People demand a seamless website for design and mobile users as so many use both devices for a single transaction.
Initially, websites were designed to focus on desktop users. When I built my first website in 1995, we were still using dial-up modems. Speed was critical, but the web was new, so a little slowdown was acceptable – but nearly everyone relied on a text-based experience. Our cell phones didn’t use the web, so there was no issue.
By 1997, Nokia released the Nokia 9000 Communicator, which was the start of mobile web browsing, but we were still using Palm Pilots and Blackberries in 20003, so while the web was there, it wasn’t yet crucial for design. Once 2005 rolled around the Palm Top and Windows Mobile operating system were released, but phones were still clunky. In 2007, the iPhone hit the market, and well, the world changed!
While many designers had embraced fluid design and mobile responsiveness, many still used separate apps and separate subdomains for the mobile version of the sites. Those days have gone. Developers needed to shift their approach to a mobile-first design, ensuring that websites are not just accessible but that they are optimized for smaller screens and touch interaction.
Mobile First Design Principles
The core foundation of the mobile-first design approach is to prioritizing the mobile user experience above all else in the development process. Rather than designing for desktop monitors, developers need to consider the mobile user as the primary audience and design the website accordingly.
For many old-school designers, the change to mobile design was tough. In the past, we would always just make a site “fit” on mobile, but now we needed to build a site starting with the constraints of mobile screens, slower speeds, and clickable elements. Mobile design isn’t just about making things smaller, it’s about rethinking the entire user experience. Everything from the font size to the size of buttons to the words on those buttons, it all needed to not just work, but it needed to match the overall design.
User First Approach to Mobile Design
As much as we are an SEO Company that always has Google and search engines on the brain, the user is the entity that we need to make happy first. When we’re dealing with mobile users, there are many factors that need to be taken into consideration. Usually, they’re on the move, they have shorter attention spans, and many use their thumb to scroll and click around a site. So, the design not only has to be intuitive, but it must be enjoyable for the user also.
Large-scale user testing is not something that most companies can do, so designers are left to read through “best practices” type documents. Google does a really good job of outlining what a user expects to see on a site, and online stores like Amazon which have invested millions in choosing the right color yellow for a button, provide the foundation from which most designers built.
Key Components of Mobile Responsive Design
Responsive Web Design for Various Screen Sizes
The importance of creating a responsive web design that can adapt to different screen sizes is a critical component in webdesign these days. One of the big challenges web designers run into is that not only do we have to contend with the different screen sizes on computers and laptops, but when it comes to phones, every model and every brand has a different size. As a result, the design must be flexible to fill the space when needed.
In responsive web design, we use a combination of flexible grids and layouts, use different-sized images for different devices, and then multiple layers of CSS tie the entire design in one neat bow. At the end of the day, the website must be fluid and flexible to work correctly on an iPhone 11 (414px x 896px) or a Samsung S20 (360px x 800px). It doesn’t seem that 50 pixels is a big deal, but when we factor in the font size, it’s the difference between a line wrapping or an image getting cut off.
The fluid design approach not only enhances user satisfaction but it is also the approach recommended by search engines. Since Google completed its mobile-first indexing rollout, websites that are mobile-responsive will usually receive higher rankings as a result.
Navigation Design for Mobile Websites
We all know that without navigation, users can’t find what they want. On a mobile phone, it’s critical they find what they need within a few seconds, or they’ll usually bounce out of the website. One of the most commonly found techniques or features on a mobile site is what we refer to as the “hamburger menu.” Those three lines at the top of a page, a collapsible menu, is the go-to location for all users if they don’t find what they need on the page they landed on.
Other things to consider for mobile devices are rotating banners, swipe gestures, and the content itself. While banners and text on images generally work well on desktop devices, they’re often too small for mobile phones. Instead of using a “hero image,” which might be horizontal on a desktop, consider using a square image on mobile phones. Yes, that means redesigning your image, but it’s worth it.
Typography Considerations in Mobile Design
The Typography and fonts chosen on a website directly impact if someone will spend the time to read a site. The Comic-Sans font always gets a bad rap in design forums, but I personally like it when used sparingly. I would not recommend using the font as your standard font for all content, much like I wouldn’t recommend using a script font on smaller text.
Mobile devices come in all different sizes and resolutions, so it’s critical that you choose a font that not only can be easily read but is compatible on devices too. While you can use places like Font Awesome and download custom fonts for your website, we nearly always recommend using a font that comes preinstalled on devices or possibly a Google Font that users might be used to.
There’s nothing wrong with custom fonts, as long as they’re legible, but we would recommend that the font is available for download from your site without having to rely on a 3rd party. A well-considered typography strategy not only enhances the overall user experience but directly affects the aesthetics and design of the site on mobile devices. At a minimum, we recommend a font be no smaller than 16px, and even 18px is more than welcome, especially on content-heavy article sites.
Optimizing Images for Mobile Devices
When we talk about optimizing images, we’re usually talking about reducing the overall size of an image so that it is fast-loading. However, when we’re talking about images for mobile devices, we’re also talking about the visual size of the images too. Large, high-resolution images that are not scaled down appropriately will affect the page load speed on mobile devices.
First, you need to have a set of images for desktop and a different set for mobile. Most page builders and CMS systems like WordPress do this automatically for you. They’ll create several different sizes, and it’s up to you to choose the right one for the display. While a medium 300px x 300px image will look good at that resolution, if you stretch it to 400px x 400px, it will look fuzzy. Just select a size larger or upload a custom size.
To reduce the actual filesize of your images, some hosts offer this service for you directly, but if not, you can use services such as my favorite, https://www.shortpixel.com. There are many others to choose from. Kimberly loves https://tinyjpg.com, but there are others that you can find online. Just search for “online image optimization,” and you’ll find a swath of different tools.
Along with optimizing the image, you also need to consider the optimization of the web design. Implementing responsive images using “img srcset” allows you to define multiple size images rather than a single image if you used just “img src”. Don’t forget to add the loading=”lazy” attribute to help speed up the page display. Instead of loading all the images on the page, using the above attribute means the image is only loaded when the user scrolls to that part of the page.
SEO Strategies for Mobile-Responsive Websites
Mobile SEO Best Practices
In practical terms, when you think about Mobile SEO there’s not much different from regular SEO. With Google’s Mobile-First Indexing approach to things, if the content is not available to be viewed or read on a mobile device and it’s only available on a desktop, then it just won’t be used in your SEO strategy.
Speed is one of the bigger items to pay attention to when it comes to mobile devices and getting good scores at Google. Don’t forget how the website will display in the search engines. The title attribute and the meta descriptions are usually shorter on mobile devices than on desktop.
The number one thing that I hate on websites is popups. Everyone uses them, and they do work for many companies; I just personally can’t stand them. If you use a popup, please pay special attention to how much of the screen is covered by the popup. Google has a Mobile Insterstitial Popup Penalty that can be implemented if you obstruct too much of the screen for the user.
Confirm your website is mobile-friendly using a free tool that Google offers – https://search.google.com/test/mobile-friendly. Some features inside the Google Search Console can highlight areas for improvement.
Shorter content is easier to digest on mobile phones. So, while this article is in a longer paragraph format, if your audience is more of a mobile audience, then the text should be in shorter bursts.
Local SEO and Mobile Users
The use of phones to find businesses is staggering. More than 46% of all searches on Google have what is called Local Intent – meaning they want to find something close to them. Whether they’re searching for a bank, a coffee shop or a golf course, the phone is constantly being used more as a browser than as a phone itself!
The Google 3-pack shows in 93% of all searches with local intent, and those that search locally have a 35% increase of an in-store visit. It’s critical that your site not only show your products and services to the user but also make it easy for them to find your location.
Add your phone number and address to the website’s footer where relevant. If you’re selling a service that requires an appointment, make it easy for the user to click a button and make a phone call.
While Voice Search was all the rage a few years ago, the only time I use it is when I’m about to drive somewhere, and I need directions. Incorporating conversational keywords and creating questions and answers for common voice queries are things you can add to your site for more local exposure.
Create the Best Responsive Design for Your Business
Responsive website design has been a game-changer since it was first introduced, and every year, it continues to evolve. Thanks to Google’s encouragement back in 2016 for web designers to make mobile design a priority or have our SEO rankings suffer, each year brings a new set of capabilities and improvements.
Creating a responsive design requires a special touch, and that’s where Big Red SEO shines. Kimberly & Conor have over a decade of experience creating and redesigning websites that are responsive. Not only will we ensure that a design has all of the elements you want, but we’ll also fully optimize the design to help generate as many customers for your business as possible.
For answers to any other questions you may have about responsive website design or to learn just how easy it is to begin working with our team, all you need to do is fill out the contact form on our website or drop us a call at (402) 522-6468.
