WHAT’S THE CONTEXT? - Responsive Web Designcrt.blogs.realtor.org/files/2014/02/Responsive_Web_Design_in_Real... · What’s the Context? Responsive Web Design in Real Estate C

!

!

WHATS THE

CONTEXT? !

Responsive Web Design in Real Estate !!!!!!!!!!

CHAD CURRY, MANAGING DIRECTOR, CENTER FOR REALTOR TECHNOLOGY !GREG STINTON, LEAD WEB SOFTWARE DEVELOPER, CENTER FOR REALTOR TECHNOLOGY !JOSEPH SULLIVAN, USER EXPERIENCE DESIGNER, CENTER FOR REALTOR TECHNOLOGY !!!430 N. MICHIGAN AVENUE CHICAGO, IL 60611 800.847.6500 CRT.BLOGS.REALTOR.ORG

!!

!!!

Whats the Context? Responsive Web Design in Real Estate C. Curry, G. Stinton, J.Sullivan

AUDIENCE ! REALTORS interested in improving how their Web sites look and perform on tablets and devices, or considering developing a mobile native app Associations seeking to keep their members informed of the latest Web and mobile technologies, and looking to improve their own web presence Designers new to Responsive Web Design for real estate !ABSTRACT !The purpose of this white paper is to educate REALTORS on the utility of Responsive Web Design for real estate websites. It is also intended to help REALTORS communicate their needs more effectively to a web developer. The paper will also present a case study for a site built by CRT called REpurposedApps , which was built 1with Responsive Web Design principles. Finally, it will provide resources that use to evaluate the landscape of what is available to them in the arena of Responsive Web Design.

overview !Web traffic today is changing. We are seeing an increase in the amount of users who are using their mobile devices to browse the web. From StatCounter (Comparison in the United States..., 2009-2013), we find that mobile traffic in the US has grown from 1.9% in December 2009 to nearly 21% in December 2013. (See Figure 1 below) !According to the 2013 Member Profile produced by NARs Research Department, 86% of REALTORS use a smartphone with internet capabilities on a daily basis. (Lautz and Doyle, 2013, p.16) Tablet use is also skyrocketing as a part of this trend. A recent Pew Research survey indicated that the number of Americans who own a tablet has risen from 3% in 2010 to 42% as of January 2014. (E-Reading Rises as Device Ownership Jumps, 2014, p.2) Having a web presence today means that you need to consider your mobile presence. Does this mean you need to have an app? Absolutely not. What is proposed here is that when you consider your website,

Page ! of !1 14February 2014 The Center for REALTOR Technology

! http://repurposedapps.com1

http://repurposedapps.com


think about a technique called Responsive Web Design. !REALTORS need to consider who their audiences are and what it means to present content that is not optimized for mobile. From NARs 2013 Profile of Home Buyers and Sellers report, 89% of all buyers used a website as an information source. Mobile or tablet website or application use came in at 45%. Breaking it down demographically, 58% of 18-24 year old homebuyers were using a mobile site or app for information,as did 57% of 25-44 year olds. (Lautz et al., 2013, p.47) These two age groups are relying more frequently on their mobile devices for information and REALTORS should work to meet them at this intersection. Responsive Web Design will help with this. !As we move into the future, it is more likely that the first impression members give to a prospective clients will come from their website. If clients are driving around a neighborhood and notice a property with a member's name and website on it, they will most likely look up that member on their phone or tablet first. This first exposure to the agents website will help define the experience they expect to have with the agent. If your web presence is one that's hard to navigate and doesn't consider what matters to them first, they will feel like they weren't considered. When they come to your site, they should be able to do a few things very easily from a desktop or mobile device: ! Determine how to contact you See what other properties you have listed Search properties !All of these things can be accomplished using Responsive Web Design techniques. !The elements of responsive web design !Using web standard technologies to build a website today is one way to future proof your website. Responsive Web Design is built with these technologies. These standards are HTML,

CSS and javascript. We will quickly outline the three technologies and talk about why they matter. !HTML, CSS & Javascript: The holy Trinity of WEb Development !Its important to understand these concepts so you can better understand what a developer or designer is talking about when building a site. To better highlight the functionality of each of these technologies, we will think of them as parts of a house. These corollaries will help illustrate the importance and necessity of each component in the context of Responsive Web Design. !HTML stands for HyperText Markup Language and is the basic language of the web. Think of HTML as the frame of the house. It's what holds your site up and allows you to add your text, headlines, images, input field, etc. !The latest versions of HTML have begun to provide more functionality for CSS and javascript to work with, but theyve also replaced some of the functionality as well. !CSS stands for Cascading Style Sheets. Think of CSS as all the elements you are concerned about during a staging. How does the wall color appear? Is it visually pleasing? Are the window treatments effective and attractive? Where should the couch be in relation to the fireplace? CSS gives you control over the color, size and type of text, color of your backgrounds and the placement of the content boxes. Javascript would be equivalent to things like the automatic garage door opener, home security system and any other automated element. It controls the interactive elements of your site. !The wonderful thing about these three technologies is that no one owns them. They are all freely available to anyone. As such, building your site with these technologies will future proof your site against the obsolescence of a proprietary plug-in technology. !!



what responsive web design is not !There is a lot of confusion about what Responsive Web Design is and what it isnt. Here is a list of what it is not: !It is not a chat client: The word 'responsive' is loaded and causes people to believe that it has to do with action they have to take. The truth is the word responsive in Responsive Web Design refers to how your site looks and performs on different devices. !It is not a way to be notified when someone views your website: CRT has had questions along these lines in the past. Thankfully this is not Responsive Web Design. Receiving constant alerts each time someone hits your site would only add to the onslaught of communications you already receive. !It is not an app built for a specific device: Responsive Web Design doesnt care what device you have. Its main goal is to get what is important to your target audience. !what responsive web design is !Responsive Web Design as a concept was first proposed by a designer/developer named Ethan Marcotte in May of 2010. It was influenced by another designer/developer named Luke Wroblewski who wrote about how moving forward, designs for web applications should be done with consideration for mobile devices. Luke called it Mobile First. 2!Wroblewski cited the rising number of mobile devices and use of these devices as core drivers for his pitch. He also touted the necessity for prioritizing web content. What matters most to

the person accessing a website? From his post in 2009: !when a team designs mobile first, the end result is an experience focused on the key tasks users want to accomplish without the extraneous detours and general interface debris that litter today's desktop-accessed Web sites. That's good user experience and good for business. (Wroblewski, 2009) !This post was extremely prescient at the time and is still extremely relevant. As mobile use grows, it only becomes more important. !Using Wroblewskis Mobile First call-to- action as a base, Marcotte demonstrated the concepts of Responsive Web Design in an article on web design and development on A List Apart. 3(Marcotte, 2010) !Marcotte created a demo site to show how his concepts would work. In short, Responsive Web Design comprises three things: ! Fluid grids Flexible images Media queries !Fluid grids & flexible images !These two items will be covered together because they have similar principles. Both items refer to the fact that, as a container narrows, the item within that container resizes to fit appropriately. The basic idea here is that all the parts of a website are contained in boxes. In a traditionally-built website, these boxes have fixed dimensions that stay the same no matter what device is being used. In Responsive Design, the idea is that these boxes will resize to work for specific orientations. !MEDIA queries !Media queries are new to HTML as of the latest version (what was referred to as HTML5, but


! http://lukew.com/ff/entry.asp?9332

! http://alistapart.com/articles/responsive-web-design3


now just HTML). As a member, the important factor will be knowing that a website will work on all devices at different orientations. !At a high level, media queries essentially ask a question of your device. An important question is What width would you like to view this website in? A browser answers this question simply by passing its dimensions to the site, and the site then gives the browser the appropriate code. A beautiful proof of concept can be found at Matt Kersleys site. Matt has built a way to view 4multiple versions of the same site at different widths. The link above is set to open repurposedapps.com in different device orientation windows. When scrolling to the right of the page, all versions of repurposedapps.com will be visible. This tool is valuable to see how a site looks on different devices, such as a smartphone or tablet. !Considerations !Prioritization of content !When building a site with Responsive Web Design principles you must consider the presentation of your content from left to right as an indicator of importance. In the natural flow of Responsive Web Design, content will flow from left to right to indicate importance in the mobile layout. !Think of your site as a call to action on mobile. What is it you want the end user to do? If you want them to call you, make sure your phone number is located near the top. If you want them to sign up for a newsletter, make sure an email capture field is present. The bottom line is making sure you are designing a site that propels users to take action. !

images !The largest issue that Responsive Web Design faces is how to handle images when presented on a mobile display. At the heart of the matter is that when a mobile device downloads the image from a site, it is pulling down the desktop-sized version of the image. Because of this, developers have been working on a solution to this problem. There are many libraries that can help with this challenge and these mostly use javascript. Chris Coyier, a web developer who runs the popular website CSS-Tricks and is widely regarded as an expert in this field, has a write-up that will help members and their developers consider the issue and what solution may work best for them. 5Along with another developer named Christopher Schmitt, Coyier put together a Google spreadsheet containing many responsive image 6options for consideration. Using these tools, members can work with a developer to determine which option works best for them. !should realtors have an app? !Members often ask about the necessity of building an app for their business. Some common app-related questions are as follows: ! Should I build an app? What platform should I build for? iOS or Android? What version of Android should I build for? !Having an app is often not necessary for todays REALTOR. However, if an app is something you want to create, it is important to consider how to best market it to people. The common mobile user is not going to peruse an app store for real estate agents in their area. Building an app leads to a larger cost for maintenance and


! http://mattkersley.com/responsive/?repurposedapps.com4

! http://css-tricks.com/which-responsive-images-solution- 5should-you-use/

! 6 https://docs.google.com/spreadsheet/ccc?key= 60Al0lI17fOl9DdDgxTFVoRzFpV3VCdHk2NTBmdVI2OXc#gid=0


reliance on a developer with a specific set of skills and language. !It is also important to consider which platform the app is being built for; iOS and Android are the two main platforms, but thats no guarantee that Windows Mobile wont take off or another platform could come to the fore. !As an example, if a member decided to build an Android app, they would have a lot to consider. According to OpenSignal, a mobile data coverage tracking company, there are currently about 11,868 different Android devices on the market. (Android Fragmentation Report July 2013, 2013) The other challenge is that there are many different flavors of Android as well. So, rather than worrying about whether an app will work on certain devices, a more effective approach is to create one website that is responsive and will work across all platforms on all devices. !Finally, when considering an app, you must think about cost: not only the initial cost of building the app, but also the costs of maintaining and enhancing an app. As bugs arise in the app, you would need to engage a developer or company to assist. Or, as systems update, new features become available and this adds to cost. If you've only built for one platform, you need to add cost to build for another. These costs can get into five figures pretty quickly. As mentioned, with Responsive Web Design, you're much closer to the idea of 'write once, run everywhere'. Plus the costs are nominal when compared to having one or two apps built. !CASE STUDY & EXAMPLES !REALTORS are on mobile phones and tablets a lot. CRT recognizes this and wants to offer an experience that works for whatever device

members use. REALTORS need to consider the audience for their site. Earlier in this paper we stated that, for a lot of clients, a website is the first impression a client has of a member. If a client is accessing a members site on a mobile phone and its not responsive, that might be the end of the conversation for them. Following the principles of Responsive Web Design will demonstrate consideration for the clients experience and keep the conversation moving forward. The Center for REALTOR Technology is not alone in this call for members to build a responsive web presence. One example of this shift comes from a piece from September 2011 by Joel Burslem of 1000Watt Consulting. In the 7post, Joel highlights the need for REALTORS to consider Responsive Design. Citing the rise of mobile use and the relative parity in functionality of native apps, he writes: !Were bullish on the mobile web for many reasons. App stores are cacophonous, while the browser remains ubiquitous. And new frameworks allow us to approximate the rich interactions we love in native apps. (Burslem, 2011) !The call for responsive sites in real estate continues. In January 2014, Dan Gaertner, VP at Homes.com, penned a piece on RISMedia about 8the need for more real estate agents to move to sites optimized for mobile: !consider that more than half of millennials, a group considered to be the new face of the housing market, use mobile search on a daily basis. This is a customer segment you dont want to lose and must appeal to. A website that is responsively designed should do the trick. (Gaertner, 2014) !In August 2011, CRT was charged with re-thinking the technology that was behind realtor.org. We did a lot of research and review 9


! http://1000watt.net/2011/09/responsive-web-design-is-the-future- 7of-real-estate-online/

! http://rismedia.com/2014-01-23/adapting-to-consumer-trends-with- 8responsive-design-websites/

! http://www.realtor.org9


of what information and materials were available. At that time, there were not many organizations that were using these principles. !In April 2012, a revamped version of realtor.org launched using Responsive Web Design principles. The largest factor for moving in this direction was that we anticipated the increase of mobile use on our sites in the very near future. We were right. In 2010, 3% of visitors to realtor.org were using mobile devices. As of today, we are seeing around 20% of our visitors using mobile devices. As CRT continues to work on sites at NAR, we will employ these principles on all web properties. Our most recent responsive project, REpurposedApps was completed in 2013. !REPURPOSED APPS !REpurposedApps is a website created for REALTOR members and real estate industry professionals. The site exists as a community marketplace for REALTOR members to discover mobile applications frequently used by their fellow members. All apps featured on the site have been submitted by members. Those apps have been submitted along with descriptions of how they can be used in the practice of real estate. !At its core, REpurposedApps deals with mobility for real estate practitioners. The REpurposedApps slogan is Your mobile real estate community. It is for this reason that we at the Center for REALTOR Technology decided that the responsive design of the site needed to be useful for members on any device they might use in their office or out in the field. Since its launch in spring 2013, 33.7% of site visitors are using either a tablet or smartphone. This mobile user base is extremely significant and will likely increase in the future. !There are a variety of mobile devices available to REALTOR members and their screen sizes vary greatly. The responsive design of REpurposedApps changes in layout if the user is viewing the site on a smartphone; desktop and

tablet users have a nearly identical experience. The site content is able to be presented in its entirety for desktop users and users of most tablets. Since smaller tablets cannot easily display all of the content, the display of the content changes in some significant ways to fit the smaller screen size. !For smartphone and small tablet users, the apps themselves are presented first because that content is most important to our users. This was because REpurposedApps was designed with mobile first. All of the site functionality is available to users, but the presentation changes from desktop to tablet to smartphone. Specifically, when a user is on a smartphone, we present our navigation and site links off-canvas (the navigation and site links are available on a secondary pane that slides in and out of view at the users request). Additionally, we hide the search bar until a user interacts with it. We employ a common mobile graphic - rows - to represent that an action can be taken by the user. Custom javascript and CSS are employed to accomplish the off-canvas navigation and search bar. !Another unique element of the mobile first approach is the graphics that are used on REpurposedApps. We employ web fonts for many of the common graphical elements. The menu, search, login, iOS and Android icons are all delivered via graphical web fonts. We use these for a variety of reasons, but primarily to avoid loading extra images and resources for mobile users. Even properly-sized images on a mobile website can cause major performance issues. !Considering the members experience and their priorities drove the development of this site, as it should yours. !RESOURCES !REAL ESTATE READY WORDPRESS THEMES !Wordpress is a very popular Content Management System (CMS) often used by



REALTORS. Because of this, we will provide some examples of Responsive Web Design real estate themes that are already out there and available for REALTORS. These themes are not recommendations from CRT but examples of what you can use. Typically, these themes cost anywhere from $45 to $100+ per theme. This does not include installation. This is something a designer or developer would need to do. !You can find images of these themes in the Appendix to this paper. !Html frameworks !There are several frameworks that are a good starting point for anyone who does not have a Wordpress site, but needs a responsive theme. These solutions are called frameworks because they will take some work from a developer to integrate to make them site ready. !foundation by zurb The Foundation Framework 10 is a good starter framework that has some helpful plugins and templates. They have a template 11 called Realty built as a starter for real estate. !bootstrap !The Bootstrap Framework 12 was created by Twitter. Like Foundation, it has several template services that will help a developer speed up development time.

HTML boilerplate !HTML5 Boilerplate 13 was one of the initial frameworks to incorporate Responsive Web Design principles. Its very popular and has great documentation. Many major technology companies have sites that are built with this framework. !summary !Easily connecting with clients is essential to gaining their business. Making sure information is easily accessible for the end user will help build and maintain a robust client base. !!!!!!!!!!!!!!!!!

!!!!!!!!!!!



appendix !OPEN FLOOR PLAN !Open Floor Plan is a theme created by Agent Evolution. It costs $49.95 and requires the popular Genesis Framework (an additional $59.95). !DESKTOP VERSION:

TABLET VERSION: MOBILE VERSION: !!!!!!!!!!!!!!!!



appendix !realhomes !Real Homes is another theme sold on Theme Forest for $55. This theme has support for IDX plugins, a property details management and map integration with markers. !DESKTOP VERSION:

TABLET VERSION: MOBILE VERSION: !!!!!!!!!!!!!!!!!



appendix !estatement !Sold on Theme Forest, Estatement costs $55 and has a lot of customization options. Colors, layouts and propery detail layouts are simply customized from the administration end. !DESKTOP VERSION:

TABLET VERSION: MOBILE VERSION: !!!!!!!!!!!!!!!!!Page ! of !10 14

February 2014 The Center for REALTOR Technology


appendix !homeland !Homeland is sold through a service called Theme Forest for $45 dollars. The developers have included a number of plugins to make it easier to get started, including an IDX plugin, a mortgage calculator and 4 different property page layouts. !DESKTOP VERSION:

TABLET VERSION: MOBILE VERSION: !!!!!!!!!!!!!!!!!!



bibliography !Android Fragmentation Report July 2013 [WWW Document], 2013. URL http://opensignal.com/reports/fragmentation-2013/ !Burslem, J., 2011. Responsive web design is the future of real estate online [WWW Document]. 1000watt. URL http://1000watt.net/2011/09/responsive-web-design-is-the-future-of-real-estate-online/ !Cisco Visual Networking Index: Global Mobile Data Traffic Forecast Update, 20122017 [WWW Document], 2013. . Cisco. URL http://www.cisco.com/en/US/solutions/collateral/ns341/ns525/ns537/ns705/ns827/white_paper_c11-520862.html !Comparison in the United States on Dec 2009 [WWW Document], 2009. . StatCounter. URL http://gs.statcounter.com/#desktop+mobile-comparison-US-monthly-200912-200912-bar !Comparison in the United States on Dec 2010 [WWW Document], 2010. . StatCounter. URL http://gs.statcounter.com/#desktop+mobile-comparison-US-monthly-201012-201012-bar !Comparison in the United States on Dec 2011 [WWW Document], 2011. . StatCounter. URL http://gs.statcounter.com/#desktop+mobile-comparison-US-monthly-201112-201112-bar !Comparison in the United States on Dec 2012 [WWW Document], 2012. . StatCounter. URL http://gs.statcounter.com/#desktop+mobile-comparison-US-monthly-201212-201212-bar !Comparison in the United States on Dec 2013 [WWW Document], 2013. . StatCounter. URL http://gs.statcounter.com/#desktop+mobile-comparison-US-monthly-201312-201312-bar !Coyier, C., 2012. Which responsive images solution should you use? [WWW Document]. URL http://css-tricks.com/which-responsive-images-solution-should-you-use/ !Coyier, C., Schmitt, C., 2012. Responsive Images Chart [WWW Document]. URL https://docs.google.com/spreadsheet/ccc?key=0Al0lI17fOl9DdDgxTFVoRzFpV3VCdHk2NTBmdVI2OXc#gid=0 !Digital House Hunt [WWW Document], 2013. . realtor.org. URL http://www.realtor.org/reports/digital-house-hunt !E-Reading Rises as Device Ownership Jumps, 2014. . Pew Research Center. !Estatement Wordpress Theme [WWW Document], n.d. URL http://estatement.bonsaished.com !Gaertner, D., 2014. Adapting to Consumer Trends with Responsive Design Websites [WWW Document]. URL http://rismedia.com/2014-01-23/adapting-to-consumer-trends-with-responsive-design-websites/ !!!!



Gordon, M.E., Mon, P. on, 01, A., 2013, n.d. Size Matters for Connected Devices. Phablets Dont. [WWW Document]. URL http://blog.flurry.com/bid/95652/Size-Matters-for-Connected-Devices-Phablets-Don-t !Grigsby, J., 2014. Defining Responsiveness [WWW Document]. Cloud Four Blog. URL http://blog.cloudfour.com/defining-responsiveness/ !Homeland WordPress Theme [WWW Document], n.d. URL http://wp.themecss.com/Homeland/ !Kadlec, T., 2013. Implementing responsive design: building sites for an anywhere, everywhere web. New Riders, Berkeley, CA. !Kersley, M., n.d. Responsi [WWW Document]. URL http://mattkersley.com/responsive/?repurposedapps.com !Lautz, J., Doyle, T., 2013. 2013 Member Profile. NAR Research Department. !Lautz, J., Doyle, T., Dunn, M., 2013. 2013 Profile of Home Buyers and Sellers. NAR Research Department. !Marcotte, E., 2010. Responsive Web Design [WWW Document]. A List Apart. URL http://alistapart.com/article/responsive-web-design !Marcotte, E., 2011. Responsive Web Design. A Book Apart. !Mon, S.K. on, 13, J., 2014, n.d. Mobile Use Grows 115% in 2013, Propelled by Messaging Apps [WWW Document]. URL http://blog.flurry.com/bid/103601/Mobile-Use-Grows-115-in-2013-Propelled-by-Messaging-Apps !Open Floor Plan Wordpress Theme - [WWW Document], n.d. Agent Evolution Themes. URL http://themes.agentevolution.com/shop/open-floor-plan/ !Ponchot, J., 2011. Responsive & Adaptive Web Design [WWW Document]. Lullabot. URL http://www.lullabot.com/blog/article/responsive-adaptive-web-design !Real Homes Wordpress Theme [WWW Document], 2013. URL http://alt-realhomes.inspirythemes.com/ !Responsive web design, 2013. . Wikipedia, the free encyclopedia. !Study Digital House Hunt 2013 01 [WWW Document], n.d. Scribd. URL http://www.scribd.com/doc/119294431/Study-Digital-House-Hunt-2013-01 !What Do Home Buyers Value Most When Looking for a Home Online? [WWW Document], n.d. realtor.org. URL http://www.realtor.org/articles/what-do-home-buyers-value-most-when-looking-for-a-home-online !!!



WP Pro Real Estate 6 Wordpress Theme [WWW Document], n.d. WP Pro Real Estate 6. URL http://wp.contempographicdesign.com/wp_real_estate_6/ !Wroblewski, L., 2009. Mobile First [WWW Document]. URL http://www.lukew.com/ff/entry.asp?933= !Wroblewski, L., 2011a. Mobile First. A Book Apart. !Wroblewski, L., 2011b. Multi-Device Web Design: An Evolution [WWW Document]. URL http://www.lukew.com/ff/entry.asp?1436 !Wroblewski, L., 2013a. One Design to Rule Them All Presentation. !Wroblewski, L., 2013b. Multi-Device Web Design Presentation. !You Need Responsive Design [WWW Document], n.d. Realtor Magazine. URL http://realtormag.realtor.org/daily-news/2014/01/27/you-need-responsive-design !Young, J., 2013. The 8 biggest responsive web design problems (and how to avoid them) [WWW Document]. URL http://www.creativebloq.com/responsive-web-design/problems-8122790


Documents

WHAT’S THE CONTEXT? - Responsive Web Designcrt.blogs.realtor.org/files/2014/02/Responsive_Web_Design_in_Real... · What’s the Context? Responsive Web Design in Real Estate C