There are websites that are snappy on the desktop, but loads forever on mobile. Images are the usual culprit when a mobile website is nothing more than a blank screen. Developers have to understand that people are accessing the same website on different platforms. This won’t be a problem if our mobile Internet speed is the same as the one on IP connections, but we’re not in Utopia yet. This means users and developers alike would have to deal with sub-broadband internet speed.

Photo courtesy of Flickr
Photo courtesy of Flickr

Several websites related to real estate often suffer this kind of issue. With all the images showcasing properties and plans, it is a nightmare how to make these websites accessible to mobile users. However, there are websites which are snappy on both desktop and mobile that have quite a number of images that easily translate to mobile. Images should be large enough to be clear in desktops and small enough so mobile internet can download it quickly.

There is actually no one solution for this kind of dilemma. However, coders are known to use SVG or icon fonts instead of thumbnails that eats up the bandwidth. There are actually some CSS tricks that can optimize websites even for Retina Displays. Limitation gives birth to creativity.

Inconsistencies

One reason why responsive web design was born is because of consistency. To create the same experience between desktop and mobile users, without spending money creating a website and a dedicated mobile app, developers get to move elements around without having to change the look of the website. However, certain designs defeat the purpose of RWD. Elements suddenly disappearing on mobile environment “disorient” the users, especially when they also access the website on larger screens. And don’t get me started on disappearing navigation panels!

Take for example the Cats Who Code. The website looks pleasing on desktop, complete with a search bar and an intelligently placed navigation on top. I tried accessing it on my iPhone and the navigation panel is nowhere to be seen! I had to scroll down all the way to the bottom to see the latest posts and snippets. Maybe cats shouldn’t code at all.

Navigation should be prominent on any website, whether desktop or mobile. Placing a menu button should suffice as long as it is consistent with the website’s architecture and design.

Now, it is common for real estate websites to have an extensive menu with several elements. Instead of putting everything on the menu in mobile environment, simplify it instead. Consumers accessing your website on a handheld device usually do not aim to browse your catalog or check floor plans. They want to contact you, or look for something specific. In this case, you can still express your brand by being consistent with your desktop design. Improve the search mechanism and simplify the results. You can also lessen the text elements on mobile smaller screens, opt for the “Read more…” button instead.

Forgetting Finger Size

There is a reason why flat design and metro style UI’s are popular with mobile apps, even with websites. They are in fact easier to navigate using only a thumb. However, despite these obvious reasons, there are still websites that retain their minute elements even on mobile. Try navigating through a website using a toothpick!

Everything starts with a good layout and design. I usually ask my clients how their customers access their website. If the business’ customers are mainly young people who access online content through their phones, it is necessary to use large blocks to organize the elements, especially the navigation panel.

Real estate websites need a lot of images to showcase the units and the properties. Galleries are usually used for organizing several photos together. However, putting the same gallery on smaller screen is unwieldy and very difficult to navigate through. You can use simplified version of your gallery in this case. Show an eye-catching primary photo of the property and hide the rest. When a customer taps the photo, you can then show the remaining photos which can be scrolled through.

Also, don’t cram tons of content on a page. It may look beautiful and informative on a large screen, but endlessly scrolling on a mobile phone is just ridiculous.

Ignoring HTML5 and CSS3

Surprisingly, I still meet developers who don’t have any idea how HTML5 and CSS3 works. They still believe that things that worked ten years ago are still working now. As a business owner who is looking into bringing your website on mobile, ask the developer if he can develop the website with new technology. They’re out there for a reason. And since RWD is still pretty new, the website should get all the help it needs.

Also, HTML5 and CSS3 is great to bringing flashy graphics without…Flash. Yes, that flashy without Flash! Years after its development, Flash is still making problems, especially on mobile devices with limited memory at its disposal. Ditch Flash and go for cutting-edge techniques. In this case, Google is my friend.

Elements used for design and aesthetic purposes in your real estate website should include very minimal images so you can add more for your properties. HTML5 and CSS3 is already a good option in creating graphics without putting an actual image on the web page. It may be tricky but it is certainly doable. Remember, it is faster to download text files than images.

With any industry, it’s good to always keep up with what’s happening in the internet world, even cutting-edge things that are still on their developing stage. Making mistakes while experimenting with new technologies and techniques will save anyone from disastrous results in the future. Same goes in developing RWD websites. Learning new techniques and technologies will make your work relevant for a long time, and you get to deliver top-notch output.