Nearly two-thirds of Americans own a smartphone, according to a 2015 Pew Research Center report. With the rise of the smartphone, an ever-increasing number of people are turning to their mobile device to search online. Odds are, someone is looking for your product or service offering. Is your website ready for ever-increasing mobile traffic?
Why does it matter?
According to the Google Developers site, 94% of people with smartphones search for local information on their phones. If your site isn’t designed for mobile viewing, you’re likely to get fewer visitors to your site. And, the ones that do visit may become frustrated and leave your site.
Additionally, your site will also suffer in Google search engine results page (SERP) ranking. In April of 2015 Google expanded its use of mobile-friendliness as a ranking signal, which has a “significant impact in Google search results.” In its statement, Google said, “users will find it easier to get relevant, high quality search results optimized for their devices.”
Have you tested your site to see if it meets Google’s new standards? If not, use this Google link to test your site. Always evaluate the user experience on your site for yourself, including how your site functions on your personal mobile devices.
Mobile friendly vs responsive site design
Are you wondering what “mobile friendly” or “responsive design” means? These terms can be confusing and oftentimes are interchanged if the user doesn’t understand the difference. “Mobile friendly” and “responsive design” have different meanings and different features that distinguish the two platforms.
Mobile friendly design
Mobile friendly design can be defined as a single design that works across both desktop and mobile formats. The content or image sizes between the two platforms is not adjusted. Mobile friendly designs generally appear the same on a mobile device but may appear scaled down. However, this design approach doesn’t necessarily ensure a positive mobile user experience as we will later explain.
Responsive web design means that the layout changes based on the size and capabilities of the user’s device. It will adjust the size of images and text according to the screen size whether you are on a desktop or mobile device. It will adjust the display to a single column from a multi-column layout. You even have the ability to decide if certain content from the site is displayed on a mobile device.
Which is better?
Some developers might tell you that your ideal site platform depends on the overall features and functionalities of your website. However, it is important to remember that the sheer number of mobile devices in the marketplace will only increase. Smartphone users expect more functionality on your site.
Mobile Friendly vs. Responsive
The image on the left is mobile friendly but it is not responsive. It may show all the information from your website, but as you can see, it is difficult to read. Users will need to navigate your site by pinching the screen out and in. Small menus may be difficult to access and select with touch screens, as well. Because of this, visitors may become frustrated and leave the site.
The image on the right shows a responsive website. The layout is much cleaner, and the text display is larger and easier to read, thus enhancing the user experience on your site.
Tips for Responsive Website Design:
- Remember to make the entire site responsive, not just the home page.
- Avoid large, fixed-width photos and elements. You don’t want users to have to scroll horizontally.
- Avoid pop-ups. They tend to be frustrating and can negatively impact user experience.
- Avoid any code requiring a Flash player – many devices do not support Flash.
Be aware of other factors that impact user experience.
Focus on fast page loading times. Wireless connections are not as fast as the wifi you use in your office or home. Think about how many times you were waiting on a site to load on your phone – and how many times you quit out of frustration. For quicker page loading times, here are a few tips to keep in mind:
- Optimize your images by decreasing their file size without compromising the resolution.
- Avoid auto-play on videos and audio.
- Avoid animation if it is not essential.
Make your text easy to read. Screens are smaller, limiting the amount of content available in a single screen without scrolling. (This suggestion applies regardless if the user is reading your website on a desktop or mobile device; however, always consider how the mobile user will view your website.)
- Avoid long paragraphs of text. Break up your text and use short sentences.
- Your calls to action should be simple and to the point.
- Use headers so users can easily identify the information they seek.
- Use bullet points.
Increase the functionality of your website.
Include your phone number in text so that users can simply tap on the number to make a call directly from their phone.
Same goes for your email.
Are you ready for a new improved responsive site?
When you are ready to take the leap into responsive design there are some factors to consider when choosing a web developer. Below are some of tips from Google Developers:
- Ask to see your developer’s references and portfolio of mobile websites. You should specifically ask if the developer has experience with responsive web design (RWD) and ask to see their sites. Make sure you view them on your mobile device, not just on your desktop.
- Make sure your developer understands your mobile customer. Be specific not just about your needs but your customer’s needs. Do you need e-commerce? Do you need a lead capture system? How about social media links? Make sure they can develop a site with the functionality you need.
- Ask your developer to make a commitment to speed. Make sure the developer is aware of page loading times and if they are familiar with techniques to help increase faster loading times.
- Have your developer install web analytics. Google Analytics is a free tool available to anyone with a website. Make sure you are taking advantage of its features to review the performance of your site and evaluate its overall user experience.
Creative Blend Design is a digital marketing agency located in San Antonio, Texas. We create remarkable solutions for our clients’ print, web, and marketing needs. If you would like to learn more about responsive website design for your organization, please call us at (844) 223-8326 or use our contact form to send us a message.