INTRODUCTION. Mobile has changed. the game. Today s Web: High Demands, Higher Rewards. Chapter 1

Transcription

1

2

3 Chapter 1 INTRODUCTION With more and more consumers specifically searching for local businesses on their mobile devices, it is imperative that small businesses invest in a mobile presence. -David Brown, CEO of Web.com Mobile has changed Today s Web: High Demands, Higher Rewards the game. Back in 2010, the web was a much different place. The majority of people surfed the web from their lap- or desktops; those who did access the Internet from a smartphone or feature phone were limited by their 3G networks; social media and user-targeted ads were the future of digital marketing; geolocation and local search were still in their infancy; and less than 20 percent of the top 500,000 websites were mobile friendly.

4 3 In 2010, less than 20 percent of the top 500,000 websites were mobile friendly. Today, mobile is essential to a successful marketing strategy. Three years later, all of this has changed thanks to advances in device technology and the ensuing explosion of the mobile web. Today, it s not enough to have a website for your real estate business. Whether it s on Amazon or your listings pages, consumers expect a great browsing experience wherever they are. That means lots of videos and images, rich search functionality, and, increasingly, a user-friendly experience across all of their devices: desktop, laptop, tablet, smartphone, and everything in between. Until recently, this was a daunting task due to the wide variety of screen sizes and resolutions in the ever-growing mobile device market. Consequently, many real estate websites that looked and performed beautifully on a desktop monitor offered a lousy experience to smartphone users.

5 4 Consumers expect a great browsing experience wherever they are. Luckily, developers have come up with solutions to help companies provide a consistent and high-quality web browsing experience across all platforms. The most recent and promising of these is a set of practices known as Responsive Design.

6 5 Read on to learn what Responsive Design is, why it s valuable, and how you can take advantage of it in your mobile strategy. This ebook will show you: How mobile and responsive design are changing the game for marketers What responsive design is How responsive design compares to other mobile website options How to select a responsive website theme or design How responsive design will shape the future of the web How to decide if responsive design is right for you

7 6 The Mobile Web By Numbers Before we delve into responsive design, it s worth looking at just how much the mobile web permeates the lives of real estate marketers and customers alike. Mobile Web Traffic Mobile traffic made up 16 percent of overall web traffic in That s a 27 percent increase from Mobile Internet traffic will exceed desktop Internet traffic in 2014.

8 7 The mobile web by numbers More than half of U.S. mobile subscribers own a smartphone. More than 40 percent of Zillow s weekend traffic comes from a mobile device. That number is even higher for Realtor.com, with 45 percent. The takeaway: mobile web use (and the need for mobile-friendly sites) is increasing, both at large and in the real estate industry. Smartphones Smartphones now account for over 50 percent of U.S. mobile subscribers. 66 percent of Americans ages now own a smartphone.

9 8 The mobile web by numbers Tablet ownership has increased dramatically since percent of mobile shoppers and 27 percent of mobile web users make $100,000 or more a year. The takeaway: more people are using smartphones, many of them young, high-earning individuals in the market for their first home. Tablets 29 percent of U.S. adults own a tablet or ereader, up from 2% in The tablet market is now over half the size of the PC market.

10 9 The mobile web by numbers Consumers love great mobile experiences, and are less likely to do business with sites that can t provide them. Global tablet shipments will overtake notebook shipments in 2013, growing by over 38 percent from 2012 levels to 210 million units. The takeaway: tablets are on their way to replacing laptops in the world of portable-but-powerful computing devices. Mobile Websites 67 percent of people say they re more likely to buy from a mobile-friendly site.

11 10 The mobile web by numbers A website that performs well on mobile devices will convert more leads into sales. 50 percent of people say that even if they like a business, they ll use its site less often if it doesn t work well on their smartphone. 98 percent of people believe mobile is either essential or helpful in the home search process. Mobile users are three times more likely than desktop users to contact a real estate professional following their mobile search. The takeaway: the great mobile website experience responsive design provides is

12 11 The mobile web by numbers Most marketers plan on designing or redesigning their sites for mobile in the immediate future. Are you one of them? increasingly a top priority for your real estate prospects. Mobile Marketing 87 percent of marketers are planning to increase emphasis on mobile in percent of marketers plan to create a mobile- or tabletoptimized website.

13 12 The mobile web by numbers While real estate professionals recognize the importance of mobile, few are equipped to make the changes they need to see results. 59 percent of marketers consider themselves novice or inexperienced when it comes to measuring mobile. The takeaway: while the vast majority of marketers recognize the importance of the mobile web, most are also struggling to develop a strategy for it. To boil it all down: the market is increasingly demanding mobile solutions from the real estate industry, yet many real estate professionals aren t sure how to implement mobile in their strategy. This is where responsive design comes in.

14 Chapter 2 Responsive Design: A Definition WHAT IS RESPONSIVE DESIGN? The term responsive design has been around since 2010, when it was coined by web designer Ethan Marcotte on his blog, A List Apart. In that post, Marcotte discussed developments in responsive architecture, and suggested that the cutting edge of web design was no different:

15 14 Responsive design scales web content fluidly across multiple devices, creating an easy browsing experience. Rather than tailoring disconnected designs to each of an everincreasing number of web devices, we can treat them as facets of the same experience. We can design for an optimal viewing experience, but embed standards-based technologies into our designs to make them not only more flexible, but more adaptive to the media that renders them. In short, we need to practice responsive web design. Simply put, Responsive Design is a web design approach that aims to scale web content fluidly across multiple devices with different screen sizes, creating an easy reading and navigation experience with a minimum of resizing or scrolling.

16 15 How Does Responsive Design Work? If you have any experience with web design, or an anecdotal knowledge of the mobile device market, you ll know that Marcotte s idea is no easy task. If we were to attempt something like responsive design according to older methods--that is, wading through the HTML of dozens of web pages and creating dozens of variations to suit dozens of devices--we d never get anything else done. Plus, by the time we d finished, there would still be new devices to design for. Thankfully, there s an easier way: Cascading Style Sheets, or CSS.

17 16 What is responsive design? CSS media queries detect the screen resolution and browser window size of the device you re using. CSS is a design language used to describe the presentation semantics (i.e., the formatting and look) of an HTML web page. Essentially, CSS refers to an external file that contains information on how a web page s different elements (buttons, sidebars and menus, blocks of text and images, etc.) should be displayed. HTML defines the content of a website; CSS, the presentation and layout. CSS saves developers lots of time and energy by allowing them to create a limited number of CSS style profiles,

18 17 What is responsive design? Though CSS performs advanced functions, it s not new. In fact, the first version of CSS debuted in which can then be easily applied to all the pages of a website in one fell swoop. CSS also includes media queries, which allow a web page to determine the physical characteristics and screen resolution of the device you re using to view it. The page can then apply the appropriate CSS profile, custom fitting the layout to your needs.

19 18 What Does Responsive Design Look Like? Responsive is just one of several mobile terms designers throw around these days: mobile friendly, mobile optimized, mobile website, mobile app, etc. So what sets a responsive site apart from these other options? TYPES OF MOBILE WEBSITES 1. Traditional / Mobile Friendly 2. Mobile Only 3. Responsive To answer that question, we chose a variety of sites with different mobile setups and viewed them with three device and browser combinations: Desktop (Apple MacBook Pro / Firefox), Tablet (Apple ipad 2 / Safari), and Smartphone (Samsung Galaxy SIII / Chrome). Note that we ve decided to crop the bottom of the Galaxy SIII and ipad portrait screenshots to keep the images as large as possible.

20 Traditional Website: Louisiana.gov Louisiana.gov, a traditional site, displayed on a 15 MacBook Pro running Firefox.

21 20 Traditional / Mobile Friendly First, let s look at a traditional website, designed with the desktop in mind: Louisiana.gov (see gallery on previous page). While the middle section of the page is slightly narrower on the ipad and Galaxy, everything else is pretty much identical. There are several obvious drawbacks to this. Text is difficult to read, links nearly impossible to click without zooming in. Plus, by maintaining all the sidebars and widgets on a smaller screen, the page feels cluttered and confusing. Granted, this is a pretty extreme example. Others have taken steps to make their desktop sites more mobile friendly without overhauling them completely: simplifying their navigation and layout, including lower-quality graphics for faster loading, removing Flash elements many phones can t display, etc. For the most part, however, the mobile friendly site s layout remains the same regardless of the device, browser or orientation you re using to view it.

22 Mobile-Only Website: ebay.com ebay.com s desktop site, displayed on a 15 MacBook Pro running Firefox.

23 22 Mobile Only / Mobile Optimized Next, let s look at a site designed exclusively for mobile devices: ebay.com (see gallery on previous page). A mobile-optimized or mobile-only website takes mobile web design to its extreme, redirecting the user to a separate version of the site built expressly for smaller screens. Notice the mobile site on the Galaxy is quite different from the main site on the MacBook or the ipad. For starters, there s no side navigation. Everything is displayed comfortably in one column, and only the most popular product categories are displayed. While there s still a search bar, the signin and sign-up links at the top and bottom of the desktop version have been replaced with a single headshot icon at the top right. This is all typical of mobile sites, which usually offer users less functionality and fewer navigation options in favor of a quick, simple experience. Since a tablet s screen size approaches that of a laptop, most sites will serve up

24 23 Mobile Only / Mobile Optimized their desktop flavor for ipad users, as ebay does here. While a mobile site provides a vastly improved experience on a small screen, it also creates inconsistency for visitors. Someone who s visited the desktop site may be confused and disappointed by the lack of options and visuals when they access the mobile site from their smartphone. well as SEO challenges. That is, if your redirects aren t structured properly, search engines and analytics services may not realize that two URLs serve the same content on different devices. Consequently, search relevance and analytics reporting can easily get splintered. Finally, redirecting to a separate URL (whether it s m.site.com or, worse, something completely different) potentially poses technical headaches as

25 Responsive Website: TIME.com TIME.com, a responsive site, displayed on a 15 MacBook Pro running Firefox.

26 25 Responsive Design Finally, let s look at a responsive design website: TIME.com (see gallery on previous page). Notice that there are subtle changes to the layout of this site depending on which device you re using to view it. Text wraps and grows/shrinks according to screen size; photos and links get rearranged; sidebars and buttons appear and disappear; horizontal navigation menus and search bars collapse to a click-to-expand format; etc. TIME.com never feels overly zoomed out or squished: no matter what screen you re viewing it on, it feels just right. Like ebay s mobile site, navigation is collapsed and reorganized into a dropdown menu. However, all the options and functionality of the desktop site are still here. Finally, unlike ebay s mobile site, the responsive site is not a separate entity: it s the same site, with minor adjustments. Unlike traditional sites like Louisiana.com, a responsive site like

27 26 The Benefits of Responsive Design As the previous examples show, responsive design for real estate is valuable for several reasons: 1. It s flexible, adjusting to your visitors to provide the best, most readable version of your real estate RESPONSIVE DESIGN IS: 1. Flexible 2. Powerful 3. Universal 4. Modern 5. Popular website for the devices they re using. 2. It s powerful, allowing you to adapt your site to mobile devices without removing features or functionality. 3. It s universal, removing the hassle of building a separate mobile app or website and the risk of confusing both visitors and search engines.

28 27 What is responsive design? Responsive design allows you to adapt your site to mobile devices without removing features or functionality. 4. It s modern, ensuring your real estate website will keep pace with technological changes in the years to come. (Modern web design techniques also add a modest SEO benefit, as Google and other search engines tend to reward sites that use up-to-date programming like HTML5.) 5. It s popular, having been adopted by a variety of major portals, retailers, corporations, etc., including The Boston Globe, Disney, Microsoft, Starbucks, The University of Notre Dame, and many others.

29 28 Is Responsive Design Right for Me? While a responsive design for your real estate website carries a lot of benefits, it s no small undertaking. To properly take advantage of it, you ll most likely have to redesign your site from the ground up (to say nothing of the complex CSS work your designer will have to do). RESPONSIVE DESIGN IS: 1. Flexible 2. Powerful 3. Universal 4. Modern 5. Popular That being the case, here are a few questions you should ask to determine if responsive design would have a significant impact on your mobile marketing strategy.

30 29 What is responsive design? Use Google Analytics or another web analytics tool to see how many of your visitors are viewing your site on their smartphones or tablets. How much of my traffic comes from mobile sources? This is the most important question when it comes to responsive design. After all, the more people accessing your real estate website from a smartphone or tablet, the bigger the impact responsive design will have on your conversion rate. To investigate this, log into Google Analytics and head to your site s Dashboard.

31 30 Select Advanced Segments and check the boxes for Mobile and Tablets. This will show you what percentage of your visitors are viewing your site via smartphones and tablets, respectively.

32 31 What is responsive design? Use In-Page Analytics to see how much of your site smartphone users can see, and how much they re missing. You can also use Google Analytics to get insight into your visitors browser window sizes. To do this, head to the Content tab and select In-Page Analytics to load your site s main page within Google Analytics. Next, select the Browser Window button and click Show Percentiles. This will provide a summary overlay of the most popular browser window sizes.

33 32 This will show you how much of your site visitors can see, and what s getting cut off. To get more specific with your mobile data, you can also apply the Mobile traffic segment the same way you did from your dashboard.

34 33 What is responsive design? The more stuff you have on your site, the longer it will take to shift to responsive design, which favors more white space. What s the nature of my site content? The less clutter a room has, the easier it is to clean and rearrange. The same can be said of responsive design for real estate websites. That is, the more content and navigation options your site has, the more decisions you ll have to make with your responsive design and the more difficult it will be to implement. What will you rearrange? Where do you have room to move that sidebar? What will you hide? What navigation options are most important? Will you crop that image, or

35 34 What is responsive design? A responsive redesign can be a great excuse for creating an easier, more streamlined site experience for your visitors. scale it down? All of these questions demand their own rules, and some of them are likely to clash with others. That said, a responsive redesign can also be a great opportunity to overhaul your site s architecture. Your visitors want power and options, but they also want simplicity. Since responsive design works best with a streamlined site, this is your chance to do some serious thinking about what your visitors need, and what s getting in the way.

36 Chapter 3 Selecting the Right Responsive Theme CHOOSING A RESPONSIVE DESIGN Now that you ve weighed your options and decided responsive design is right for you, it s time to build. Designing your new site from scratch is costly and time consuming. Luckily, there are tons of existing themes out there on a variety of platforms (including our favorite, WordPress) that you can use as a foundation for your new site. Before you forge ahead with one, here are a few considerations.

37 36 Some General Questions Will the theme accommodate your custom design elements? WHAT TO LOOK FOR Customizability Customer Feedback Style and Tone Content Type Difficulty Level Branding is hugely important for any real estate professional. You ll want to choose a site theme that will allow you to promote your brand via a custom banner, logo, color scheme, or style profile. A good responsive theme will have a header that adjusts to the size of the device, allowing you to tweak your branding elements while keeping them prominently displayed.

38 37 Choosing a responsive design Listen to your customers! They ll show you the way when it comes to choosing a new site theme. What feedback have you received on your current design? Before redesigning your site, it s important to determine what your visitors want. A slick new theme won t do you much good if it doesn t meet your clients needs and desires. Consider polling your current customers, formally or informally. Which aspects and features do they like? Which could they do without? What would they like to see in the future? Will your new theme allow you to implement this feedback?

39 38 Choosing a responsive design Make sure your theme matches the tone and content of your website. What kind of site is this? It s important to choose a theme that fits how you plan to use your site. Is this your general corporate site, or a separate blog you re using to drive traffic to it? What tone are you trying to achieve? Formal and reliable? Cheeky and fun? Provocative and impressive? Whatever direction you decide to go in, make sure the theme is appropriate. Otherwise, you ll end up with a site that looks unprofessional or sterile, no matter what device your visitors are viewing it on.

40 39 Choosing a responsive design Whether it s a blog or an image gallery, choose a theme that you can easily plug your site s content into. What kinds of content will be featured? Some themes are suited to web pages that are primarily heavy on text. Others are better for image- and videoheavy sites. Still others fall somewhere in between. Before you settle on a theme for its looks, think about how you ll plug yourself into it. What kinds of content are primarily featured? Are property listings and photos your focus, or do articles and guides take center stage? Is this theme optimized for that?

41 40 Choosing a responsive design Know your skill level and plan accordingly with a theme you can alter and augment easily. How technologically advanced is the theme? When it comes to site themes, looks can be deceiving. A theme that looks straightforward on the outside may have a lot going on under the hood--and plugging your site content into that framework could pose extra challenges, both for you and for your designer. These challenges don t end once you launch your site, either. A small change down the road could have a major impact on your site s functionality. Consequently, you should

42 41 Choosing a responsive design consider your comfort level and experience with respect to coding and design. Will tweaking this theme to suit your needs present a major challenge? If so, you might want to opt for something simpler.

43 42 Designing for Mobile MOBILE MEANS: Readability Simple Navigation Rich Media Search Functionality Visible Content Lead Capture Remember: the purpose of a responsive design real estate website is to provide a great browsing experience for smartphone and tablet users. When building a responsive design website that s meant to be viewed on a mobile device, here are a few extra tips to consider. Colors Don t limit your thoughts to the dimensions of a screen: where a visitor is using their device is just as important as the hardware itself. With that in mind, be sure to use a high-contrast color scheme that will be crisp and legible

44 43 Choosing a responisive design Use colors that will show up clearly in all environments. indoors and out, under street lamps and direct sunlight, etc. When it comes to textures or shading, remember that some screens have higher resolutions than others. A pattern that looks great on the iphone 5 may not be as beautiful on the iphone 3, and so on. Site Structure No matter how great your site looks and performs, smartphone screens are simply too small, keyboards too tricky, and load times too long to do the kind of in-depth browsing we re used to on a laptop or desktop. To

45 44 Choosing a responisive design Make you site structure simple and lightweight to keep distracted visitors engaged. maximize the impact of your site, you ll have to keep its structure simple. That means streamlining navigation options and reducing the overall number of clicks to get around the site. With smaller screens, it also means determining which elements to show, and which to hide. This is especially true of sidebars and widgets. Media Just because your users are on mobile devices doesn't mean they don't want a media-rich experience. Make sure the images and videos in your responsive real estate

46 45 Choosing a responisive design Mobile doesn t mean media-free: make sure you re still giving users the property images and videos they want to see. website scale to meet the largest possible proportions a device supports and adjust according to screen orientation. Your media should also respond to swipe actions and be easy for users to interact with. Large, high-quality photos and videos will draw distracted users in and provide an easy way to jump into property details. Search It s crucial that your site provides a great search experience. A smartphone user has less screen space to work with than someone using a tablet, so make sure the

47 46 Choosing a responisive design Searching listings is difficult enough as it is. Make sure your search bar is easy to use and automates as much as possible for users. search bar is featured prominently at the top of your page, and that all forms, drop-down menus, and buttons in your design are easy to work with. Search forms should also be aware of the user s location and pre-populate search forms. After all, 50% of mobile searches are also local, and visitors are more likely to move forward with a search if you give them a starting point. Above and Below Again, real estate is limited on a smartphone screen, so you should think twice about putting a huge image or

48 47 Choosing a responisive design Whenever possible, try to limit the size of your content to blocks that will fit on one screen. block of text at the very top of your site. Try to arrange your content in smaller chunks and maximize what s visible to mobile users above the fold --i.e., without having to scroll down. Lead Capture A responsive website is designed to tailor the browsing experience to the user, but that doesn't mean removing functionality. A great responsive website captures just as many leads on mobile as it does on a desktop. After all, many users are doing their primary searching on mobile

49 48 Choosing a responisive design Make it easy for visitors to come back (and for you to contact them) with lead capture forms and user accounts. devices. A responsive design should support registration so that users can save searches and favorite properties and, of course, pick up later where they left off.

50 49 Where Can I Find a Responsive Theme? Now that you ve decided that responsive design is right for your real estate website, it s time to start looking for one. Here are a few great sources for both free and paid designs. RESPONSIVE THEMES Placester Theme Preview WordPress Theme Library Third Party Sources

51 50 Choosing a responsive design Placester s responsive themes are designed from the ground up for real estate websites and professionals. Placester s Responsive Themes Placester s current real estate website themes are thoroughly mobile friendly, and we re not just saying that: we ve worked hard to earn that distinction, offering clean, simple designs with the search functionality and great visuals that your customers are looking for. That said, we re hard at work on several beautiful, fully responsive designs for your real estate website, which we ll be rolling out over the next few months. Here s a preview of our offerings:

52 Main page for responsive real estate website theme. Placester s Responsive Themes: Preview

53 52 Choosing a responsive design There are thousands of responsive design themes and templates out there. Do some research to find the one that works best for you. Other Responsive Themes If you can t wait for Placester s themes, there are tons of developers out there creating great responsive design themes for WordPress and every other major website platform. Many of these themes are free. Paid options, which range from around $30 to as much as $200, offer more premium design elements, developer options, and features like front-end editing interfaces and drag-anddrop customizability.

54 53 You can start by checking out WordPress s own Theme Library. While WordPress hasn t yet added a search filter tag for responsive themes, most developers will clearly stipulate whether a theme is responsive in their product descriptions.

55 54 Alternatively, you can find high-quality themes for cheap at external sites, whether it s at the developer s company website or a third-party theme database like Theme Forest.

56 55 Choosing a responsive design If you re purchasing a theme from a third-party site, make sure it s designed for the site platform you re using! Finally, you can consult news and resource sites like WP Candy and Premium WordPress for the latest reviews and lists of top responsive design themes.

57 Chapter 4 LOOKING AHEAD It's inevitable that 2013 will be the year that responsive design takes off. -Pete Cashmore, CEO of Mashable Mobile will continue Today s Web: High Demands, Higher Rewards to reshape the web. There s no denying it: responsive design is here to stay, particularly in the real estate industry. As consumers become more and more mobile, so will their real estate searches. A responsive design real estate website ensures that your site will satisfy customers needs, leading to more traffic, higher-quality leads, and increased sales. So don t wait: start building your new responsive real estate website today.

58 57 Further Reading Want more information and opinions on responsive design? Here are a few great sources. Books MORE INFORMATION Books on Responsive Design Articles on Responsive Design Gustafson, Aaron. Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement. Kadlec, Tim. Implementing Responsive Design: Building Sites for an Anywhere, Everywhere Web. Marcotte, Ethan. Responsive Web Design. Wroblewski, Luke. Mobile First.

59 58 Articles Cashmore, Pete. Why 2013 Is the Year of Responsive Web Design (December 11, 2012). Butler, Christopher. What We've Learned About Responsive Design (October, 2012). Ponchot, Jared. Responsive & Adaptive Web Design (September 7, 2011). Thomas, Drew. Why Responsive Web Design Has to Win Out (February 14, 2013).

60 59 Thank You! Thanks for checking out our Responsive Design for Real Estate ebook! For more insight into the world of real estate marketing, be sure to visit our Real Estate Marketing Academy. Looking to set up a new real estate website with built-in IDX/MLS search, premium themes, and indexable property pages? Head to Placester.com and get started with a 15-day free trial.