Bridging the Gap: How to Test Your Real Estate Website for Mobile Responsiveness

A mobile-responsive website should ...

Before you go plunging into the wilds of testing your website for mobile responsiveness, let’s back up for a moment and consider what components make a really good mobile website. While a desktop computer offers a larger screen and more opportunities to play around with design, a mobile device has a much smaller screen, and complicated widgets and designs won’t always work the same.

Here are some of the big things that you’ll want to check when you’re looking at whether or not your real estate website is appropriately mobile-responsive.

Be easy to navigate

The simpler and cleaner the navigation on your website, the better. You don’t want users to pop open a menu that’s so long they’ll be scrolling down until they’ve forgotten what their options were up at the top!

Think about where you  might be able to group or consolidate different pages on your website in an intuitive, organic way so that users feel like they know where they are and how to get back to something that looked intriguing a few pages ago.

Have a clean typeface

The deceptive thing about typefaces is that one can look amazing in the example text—which is usually only a sentence or two long—but an entire page’s worth of that typeface becomes borderline or totally unreadable. And what works really well on a desktop might not translate to a mobile device, and vice versa!

A good web design should include typeface options that are easily legible and work across all device types and sizes.

Take advantage of color contrast

Desktop computers are usually located in offices with fluorescent lighting, while you might be trying to read a website on a phone while walking around outside in bright sunlight. Colors that are too “close” to each other start to blur together, and eventually you have to start doing that unfortunate dance with your hand to try to dim the screen.

Save users that pain by choosing a color scheme that pops beautifully on all screens, no matter what kind of light they’re up against.

Know that different browsers behave differently on different devices

Google isn’t Firefox, which isn’t Safari, and none of them are going to behave exactly the same as another browser on different devices. 

You no doubt have your own preferences for both device and browser, and your clients will have theirs; ideally, your website vendor will do this kind of exhaustive criss-cross testing for you to ensure that all combinations work the way they should.

Be fast

Look: Nobody is on their smartphone waiting for a page to load for longer than a handful of seconds. Most people are looking something up on a phone (and not a laptop or a desktop) because they’re in at least some kind of hurry and need to know right now!

Mobile speed is a search ranking factor, but it’s also important because more than half of users will abandon a website that takes longer than three seconds to load. Just .01 of a second speed improvement can have a measurable conversion impact, according to research from Deloitte.

Consider alignment

It bears repeating: A page that’s aligned perfectly on a desktop is not going to look the same on mobile screens, so you’ll want to make sure that the images and text are all aligned so that they make sense—captions are aligned under the appropriate photos, nothing is floating off the screen anywhere, and all of the alignment looks like it was, well, designed that way.

Finesse interactive components

If you’re a real estate agent with a website, then it probably has some kind of IDX component, in which case you’ll want to spend at least a little bit of extra time testing how the home search works on mobile devices. 

There are others that are also worth testing (home valuation calculators for sellers, for example), but if your IDX doesn’t deliver the same experience on a mobile device as on a desktop, that’s a really big problem!

Handle pop-ups with grace

Is there a pop-up on your website inviting buyers and sellers to book a call with you, ask for a free comparative market analysis, or sign up for an email newsletter? No shame in advertising your business, of course … but make sure that it fits neatly within a smaller screen so that your mobile users are still easily able to minimize that pop-up.

Test your website for mobile-responsiveness

There are a number of companies that can do this for you online for free (most of them will offer some kind of upsell), but you can also use Google’s free tools to give yourself a solid primer in exactly how mobile-responsive your website is, which is what we’ll be covering below. (That said, both Firefox and Safari also have mobile-responsive modes available on desktop devices, where you can test different screen sizes and interfaces.)

Method 1: The Google mobile-friendly test

Google’s mobile-friendly test will allow you to plug in a website and generate an overall “grade” plus a list of possible errors to fix. If you put your website into this tool and see a few “problem” areas, don’t panic! This is pretty normal and doesn’t necessarily mean there’s anything broken or wrong with your website; the overall assessment is what’s most important to consider.

1. Visit https://search.google.com/test/mobile-friendly.

2. Enter your website URL.

3. Click “Test URL” and view the results.

If Google’s assessment says that your website is not mobile-friendly or needs some work, it will rank the issues from most critical to least.

Method 2: Google Chrome’s on-page Inspect tool

You can also use Google Chrome to look at your website from a mobile perspective; one really cool thing about this method is that you can click through the website using a mobile perspective, so it’s easy to test multiple pages in one sitting.

1. Open Google Chrome (download it and install it if you don’t have it) and type in your website URL.

2. Right-click (or Command-click on a Mac) anywhere on the page to pop open this menu, then click “Inspect.”

3. Find the toggle between mobile and desktop and click it so that you can see the page in a mobile view. Note how above the pageview, Google Chrome shows the page as “responsive” and also gives you the option to adjust the screen pixel sizes.

4. From here, you can click different elements or links on the mobile page to open up the menu, navigate around your site like a new user would, and see how a mobile user might experience your site.

Remember, if you aren’t sure whether your website or site design are mobile-responsive, those are excellent questions to ask your website provider—especially if you’re not using a real estate-specific platform, which is a lot more likely to troubleshoot issues like IDX display on the fritz and pop-ups working properly.

When your website is mobile responsive, your visitors will be happy, your traffic numbers will shine, and you’ll end up converting more leads almost as a happy accident. Make sure you’re putting forth a real estate website that looks professional and polished, no matter what browser or device your client is using!