Now more than ever, people are accessing the internet through their mobile devices and tablets. Long gone are the days of desktop-only users! According to StatCounter, a web traffic analysis website, a whopping 59.25% of global online traffic came from mobile users alone, followed by 38.53% desktop users, and just 2.22% tablet users.
This displays the importance of where we must start our design, and where we should be focusing our efforts in making an effective and dynamic real estate website that drives leads. Designing mobile first, and then expanding to a desktop friendly site, is the most user-centric and accommodating to most target audiences.
What is mobile first design?
A philosophy which aims to create better user experiences by starting the design process with prioritizing the smallest screens first. This strategy is often referred to as the concept of progressive advancement. Once a mobile design is in place, designing for larger screens becomes easier and we have the core elements of the design established. Starting a design with mobile also enforces aspects such as bandwidth, screen size, and multitasking capabilities. As you progress onto larger devices, it’s easier to expand the functionality with supplemental elements and features. Remember: it’s always easier to add than to take away!
We’ve put together a few design principles to get us started in our mobile first design stage.
Users should be at the forefront of your design
The design of your real estate website must help users solve a problem or complete a task quickly and effectively. Users should easily be able to view floor plans, virtual tours, check availability, call or contact your community, and ultimately, apply and sign a lease. Keep in mind user flow – convenience is key to generating more leads!
Look at your competitors’ mobile websites and check out what they do and don’t offer. How can you improve your user’s experience compared to your competitors? Maybe it’s adding a floor plan filter to make it easier for prospects to find exactly what they’re looking for. Or maybe you notice that a competitor doesn’t have virtual tours on the website. As crazy as it may sound, over 80% of renters apply and secure a lease without ever visiting the property, thanks to online marketing. Adding virtual tours to your website can increase website engagement and provide a convenient option for people who prefer to tour virtually as opposed to in-person.
Keep it simple
Improve content clarity on your mobile site while helping the user focus on what content is most important. This can be done by reducing links in your navigation menu, reducing the number of pages, and keeping borders wide and lines clean.
Use white space to your advantage to make the layout less cluttered and more readable, which will also improve your SEO and increase organic traffic.
Prioritize the content you want displayed on the website: Ex: Floor plans, Location, Gallery, Amenities, Blog, etc.
Prioritize the hierarchy of that content. Understand what the user flow is and how to display the most important content. For example, we recommend prioritizing floor plans because data confirms that people spend the most time looking at floor plans on the website, and it’s usually the first stop after visiting the homepage.
Incorporate bold and consistent CTAs
A call-to-action needs to be easily located by users throughout your website. Not doing so can lead to a loss of leads and decreased conversions.
Adhere to mobile friendly practices
Choose fonts that are web safe and keep font styles to a minimum.
Select contrasting colors and make text legible according to Web Content Accessibility Guidelines (WCAG).
In Conclusion
Now that you know what a mobile-first design is and its importance moving forward, we hope you will incorporate this new knowledge into your real estate website to generate more leads. By remembering to put users at the forefront of your website design, improving content clarity, and incorporating consistent CTAs, maximizing your lead generation should be a walk in the park.
For more tips and information about digital and real estate marketing, take a look at the rest of our blogs, right here on our website! You can also subscribe to our email newsletter, or follow us on Instagram, Facebook, and Twitter!
If you’re a property manager looking to get a real estate website up and running quickly, you may be asking yourself whether an apartment website template is the way to go. But while the industry’s leading template providers seem like an attractive solution for some apartment brands, they often present more difficulties than they solve, turning short-term expediency into long-term headaches.
People use real estate website templates because they expect them to be the easy solution. In fact, many of these template providers are also Property Management Software providers, which is appealing to property managers because it has the potential to save time and effort when integrating their PMS and their website. It’s also affordable for most budgets because it’s a one-size-fits-all approach. By relying on a template instead of a fully custom site, property managers save money for their properties. Sounds pretty sweet, right?
Unfortunately, this picture perfect scenario often fails to materialize. Where leading template providers offered to save time and effort, they often deliver further challenges and sub-par results down the road, requiring further intervention from property managers to address these challenges. Here are some of the common issues we and our clients have noticed when working with the leading real estate website template providers.
Strict Templates Make You Blend In With The Crowd
Most apartment website templates are easy to spot a mile away. That’s because most templates are built for quantity, not quality. In other words, template providers want their templates to be applicable to a wide variety of housing brands, which tends to strip away a significant amount of visual character and functionality that might clash with a subset of brands.
The result is a look and feel that is very generic, with limited flexibility to showcase your specific branding elements and key differentiators. This is especially disadvantageous if your community is part of a competitive housing market and/or offers a lot of unique amenities and features that could earn you more attention, if only you were able to show them off more easily. Instead, with hundreds of other property sites out there using the same real estate website templates, by the time your prospects find your site, there’s a good chance they’ve already run into multiple lookalike apartment websites during their housing search. That means their first impression of your community is that it’s just like all the rest. Not exactly conversion-inspiring.
You might think this is an issue with all templated apartment websites, but not all templates are made equal. In fact, many templates offer more customization options so you can showcase your brand colors, patterns, voice, and key differentiators more prominently while still keeping costs low. Some real estate website experts also combine a templated approach with the assistance of professional web designers and developers to help you fully adapt a template to suit your needs, which could suit some brands better than the bare bones approach that most templates provide. Full disclosure: Threshold is one such real estate website provider, but we’re not the only option out there delivering this hybrid approach to real estate website design. Even if you work with another real estate marketing agency, we highly recommend this hybrid approach to launching a templated apartment website.
Not All Integrations Are Made Equal
While some leading template providers offer integrations with their own property management software and basic Google Analytics without too much trouble, integrating with other software can present surprising amounts of difficulty. This can be a problem when it comes to implementing a diverse ad mix, tracking digital marketing results, and identifying optimization opportunities.
For example, while some website template providers list dozens of available integrations with leading property management software, Internet Listing Services, analytics providers, collections and billing, marketing platforms, resident screening providers, and more, the truth is that many of these integrations are complicated and fickle, requiring a savvy web developer to decode and troubleshoot. And if you’re considering a templated website, it’s probably because you wanted to keep things simple and easy rather than needing the assistance of an expert in web development for apartments.
Plus, many desired integrations are missing, including leading third-party chatbots and CRM software. This means that the average templated website may be a poor choice for teams wanting a cutting-edge web experience with the modern touch that consumers have come to expect.
“Set It And Forget It” Leads To Poor UX
Typically speaking, property managers who opt for templated apartment websites are looking to simplify their life and avoid a lot of messing around with the website backend. For these folks, the ideal that they envision might be to get the real estate website design project out of the way so that they can focus on other things and not have to worry about the website again. Sounds nice, right?
Unfortunately, this “set it and forget it” approach often leads to poor UX when it comes to apartment websites. Templates may offer a quick way to get a basic website up and running, but this short-term advantage can pale in comparison to the long-term reality of real estate website maintenance. Amenity photos, external links, and specials info soon become outdated. Integrations break, leaving ugly and confusing elements on the your website—or worse, incoming leads fall through the cracks instead of being converted into new leases. In many ways, this isn’t a unique failing of templates, it’s just a reality of website management that property managers should be aware of while forming expectations and launching a website.
In the end, “set it and forget it” never lasts as long as you hoped, because before long, you’re forced to make site updates to ensure that your website continues to provide a quality user experience that inspires confidence in your prospects and delivers all the information and functionality they need to actually convert. So the goal you aim for in your apartment website should never be to “set it and forget it.” Someone will always need to be responsible periodically for ensuring the website is continuously optimized, or at least in proper working order. With this in mind, it may be well worth your effort to opt for a more hands-on approach from the very beginning, rather than locking yourself into a template that limits your capabilities and presents challenges for the web developer(s) you work with.
Designing with accessibility at the forefront has never been more important, but it can be daunting to determine whether or not your website is in compliance with regulations. In 2020 alone, over 3500 digital accessibility lawsuits were filed, including federal and state ADA lawsuits, and an estimated 56 million people in the U.S. are currently living with a disability. As we look to expand our services in the real estate and housing market, it’s paramount that we keep accessibility top of mind in our work. The goal is to improve our practices to make our designs as accessible as possible for the widest audience, and to make usability as high a priority as visual appeal.
What Does Web Accessibility Look Like?
To be frank, the word “compliance” doesn’t exactly bring to mind a font of creative flights of fancy. It usually summons images of black Arial text neatly organized on a white background, which is fine for doing your taxes but less than ideal for promoting your sparkling new multifamily property. In truth, adhering to Web Content Accessibility Guidelines (WCAG, from here on out) is pretty easy to incorporate alongside our existing design practices. WCAG ratings are ranked from A to AAA, in a sort of “good, better, best” system. If A is the rank for a solidly usable website, then AAA is the gold standard of accessibility.
Similarly to how we build successful brands that thrive in the wild, the process of establishing an accessible web presence requires some collaboration between designers, copywriters, and developers. By keeping a few helpful guidelines in mind, each team’s work contributes to a fully accessible real estate website that anyone can (and will want to) use, regardless of their level of ability.
A Helpful Guide for Accessible Design
Contrast
When establishing a color palette, high contrast is critical for usability. When considering moderate to severe visual impairment, the ideal contrast ratio is between 1 to 3 and 1 to 4.5, depending on the size and the boldness of the text. The larger and thicker the characters, the lower the ratio can be while maintaining legibility to the eye, or to a screen reader. Any important copy should be designed with the highest contrast possible to ensure greater visibility for users.
Chrome extensions such as Spectrum can help you determine how user-friendly your website is by showing you alternate versions of your website based on various visual abilities.
Alternate Indicators
On the topic of visual acuity, consider using alternate methods of establishing a hierarchy of content apart from color changes. If a piece of text changes color when a user hovers, the addition of a line under the text serves as an additional cue that the copy can be clicked or is interactive in some way. Other visual indicators can be icons, boxes, or typeface changes (such as semibold to bold or black) to indicate to the user that they’re on the right track.
Charts and graphs can also present a challenge. Apart from using distinct colors to designate a data set, one solution is to incorporate texture or patterns into the design to further differentiate the information presented to the user. Trello has a plugin that can convert graphs using color blindness–friendly patterns to help aid legibility for all users, while maintaining the overall look and feel of the design.
Alt Text & ARIA Labels
Used to describe an image when it is unavailable to the user, alt text and ARIA labels should provide as much detail as possible. Describe what’s happening in the image instead of opting for the file name or a bland categorization of the subject like “man” or “house.” For folks who use screen readersto navigate websites, this attention to image descriptions provides a much clearer idea of what is in the design and what the website is trying to convey. This can be a key factor in whether or not they pursue your property further, depending on how well you describe the photo of the premises or the neighborhood using these tags and labels.
Content and Type Hierarchy
When writing copy for a website, simpler is better. Important messages should be short and to the point, while conveying all of the essential information a user needs to know right off the bat. WCAG recommends limiting a line of text to 80 characters or fewer, and to avoid writing overly complicated or lengthy sentences. Designers and copywriters should work in tandem to draft copy that looks beautiful in the design, excites the user with its content, and can be read by as many people as possible, regardless of the tools they use to view the website.
UI and Navigation
Users of varying abilities frequently use keyboard navigation to explore websites, and care should be taken to establish a logical flow of information. Good design is obvious, and a user shouldn’t have to spend time deciphering how to move through a website to find what they need. Clean focus states, clear and easy-to-remedy error states, and concise links makes a site more accessible to all, and provides a better user experience across the board.
Designing for Everyone
Accessibility should always be as high a priority as creating a beautiful design. A visually stunning website that can only be accessed by half of our users is ultimately a design failure, and our goal should be to be as inclusive as possible in our work. As we continue to go above and beyond for our clients and our audience, normalizing accessibility practices deepens our understanding of who we serve, and provides a more inclusive space where all are welcome.
Written by Weylan Lee, Senior Graphic Designer at Threshold
User experience and user interface (UX/UI) design are both in high demand, especially for digital spaces like apartment websites and mobile apps. With this high demand comes many tools that cater towards UX/UI design. At Threshold, we use Adobe XD, which is a design tool that allows us to create and prototype interactive experiences like websites, digital products, and mobile apps. With this tool, our teams are able to design, animate, prototype, and collaborate more efficiently, experiencing our designs just like an end user (i.e. our clients’ residents and prospects) would. This has significant advantages both for us internally as well as for our clients and their end users.
How Adobe XD Improves the Real Estate Marketing Client Experience
First and foremost, Adobe XD allows us to present our compelling and amazing website designs more comprehensively and engagingly for our clients. With XD, instead of designing static pages and leaving it to the imagination how they will animate or link to one another, we are able to incorporate engaging user experiences and interactive functionality that enhance our client’s brand and optimize for conversions from the very beginning. Our clients are able to view and experience their website designs just like a viewer would on a live website. They can scroll down a web page, click on links and buttons, interact with CTAs, as well as interact with things like galleries, floor plans, location maps, and much more. Plus, with the ability to leave comments and replies right on website designs, using Adobe XD allows our clients to make more informed decisions and provide accurate feedback, streamlining our collaboration with our clients.
How Adobe XD Improves Collaboration for Creative Real Estate Marketers
For our internal teams, using Adobe XD has allowed us to design more immersive and impactful website experiences and made our internal collaboration more efficient – which also benefits our clients! Our designers are able to experience and interact with their website designs in real-time as they are designing. This allows us to create more impactful, engaging user experiences and ensure that a website not only looks amazing and functions properly, but also provides a great experience. Adobe XD also allows for the creation of brand-specific design libraries, which our designers use to ensure that a client’s branding (fonts, colors, buttons, and more) is applied consistently throughout each page of an entire website. Even better, the collaboration tools within Adobe XD allows our designers and developers to share website assets and details more efficiently, reducing project timelines and ensuring a smoother transition between design and development.
Why You Should Work With a Real Estate Marketing Agency That Uses Adobe XD
To sum it up, by using Adobe XD, our teams are able to create impactful user experiences that our clients (and their current and future residents) will enjoy. The improved and efficient collaboration between our internal teams and our clients and project teams means that we are able to reduce project timelines and ensure we are creating the highest quality websites for our clients. Our project teams are able to spend more time on creating amazing and impactful website designs with great experiences. At the end of the day, that all leads to increased conversions and customer loyalty among our clients’ prospects and current residents.
Written by Chelsea Friel, Graphic Designer
Written by Weylan Lee, Senior Graphic Designer at Threshold