iBook - Responsive Design · 2013-03-28 · Before we delve into responsive design, it’s worth looking at just how much the mobile web permeates the lives of real estate marketers

Responsive DesignFOR REAL ESTATE

That drives SalesHow to choose a mobile theme

Placester&

Colin Ryan

Responsive DesignFOR REAL ESTATE

That drives SalesHow to choose a mobile theme

Placester&

Colin Ryan

Chapter 1

Back in 2010, the web was a much different place. 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.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

INTRODUCTION

Mobile has changed the game.

Today’s Web:

High Demands,

Higher Rewards

“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

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.

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.

www.placester.com/academy

http://www.ibooksauthortemplates.com


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.

4

“Consumers expect a great browsing experience wherever they are.”




•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 decide if responsive design is right for you

•How to select a responsive website theme or design

•How responsive design will shape the future of the web

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:



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

2012. That’s a 27 percent increase from 2011.

• Mobile Internet traffic will exceed desktop Internet traffic in 2014.

The Mobile Web By Numbers

6




• 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 24-35 now own a smartphone.

More than half of U.S. mobile

subscribers own a smartphone.

7


The mobile web by numbers



• 34 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 2009.

• The tablet market is now over half the size of the PC market.

Tablet ownership has increased

dramatically since 2009.

8





• 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.

Consumers love great mobile

experiences, and are less likely to do business with sites that can’t provide

them.

9





• 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

A website that performs well on

mobile devices will convert more leads

into sales.

10The mobile web by numbers




increasingly a top priority for your real estate

prospects.

Mobile Marketing

• 87 percent of marketers are planning to increase emphasis on mobile in 2013.

• 52 percent of marketers plan to create a mobile- or tablet-optimized website.

Most marketers plan on designing

or redesigning their sites for mobile in

the immediate future. Are you one

of them?





• 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.

While real estate professionals recognize the importance of

mobile, few are equipped to make the changes they

need to see results.





Chapter 2

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:

WHAT IS RESPONSIVE

DESIGN?

Responsive Design: A Definition

“Rather than tailoring disconnected designs to each of an ever-increasing 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.

14

Responsive design scales web content fluidly across multiple devices, creating an easy browsing experience.




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.

How Does Responsive Design Work?

15




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,

CSS media queries detect the screen

resolution and browser window size of the device

you’re using.

16What is responsive design?


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.

Though CSS performs advanced

functions, it’s not new. In fact, the

first version of CSS debuted in 1996.





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?

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.

TYPES OF MOBILE WEBSITES

1. Traditional / Mobile Friendly

2. Mobile Only3. Responsive

What Does Responsive Design Look Like?

18




Louisiana.gov, a traditional site, displayed on a 15” MacBook Pro running Firefox.

Traditional Website: Louisiana.gov

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.

20


Traditional / Mobile Friendly



ebay.com’s desktop site, displayed on a 15” MacBook Pro running Firefox.

Mobile-Only Website: eBay.com

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 sign-in 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

22


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.

Finally, redirecting to a separate URL (whether it’s m.site.com or, worse, something completely different) potentially poses technical headaches as

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.

23


Mobile Only / Mobile Optimized



TIME.com, a responsive site, displayed on a 15” MacBook Pro running Firefox.

Responsive Website: TIME.com

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.

Unlike traditional sites like Louisiana.com, a responsive site like

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 drop-down 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.

25


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 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.

RESPONSIVE DESIGN IS:

1. Flexible2. Powerful3. Universal4. Modern5. Popular

The Benefits of Responsive Design

26




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.

“Responsive design allows you to adapt your site to mobile

devices without removing features or functionality.”





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).

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.

RESPONSIVE DESIGN IS:

1. Flexible2. Powerful3. Universal4. Modern5. Popular

Is Responsive Design Right for Me?

28




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.

Use Google Analytics or another web

analytics tool to see how many of your

visitors are viewing your site on their smartphones or

tablets.





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.

30




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.

Use In-Page Analytics to see how

much of your site smartphone users can see, and how

much they’re missing.





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.

32




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

The more stuff you have on your site, the longer it will

take to shift to responsive design, which favors more

“white space.”





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.

A responsive redesign can be a great excuse for

creating an easier, more streamlined site experience for

your visitors.





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.

Selecting the Right Responsive ThemeChapter 3

CHOOSING A RESPONSIVE

DESIGN

Will the theme accommodate your custom design elements?

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.

WHAT TO LOOK FOR

❖ Customizability❖ Customer Feedback❖ Style and Tone❖ Content Type❖ Difficulty Level

36


Some General Questions



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?

Listen to your customers! They’ll show you the way when it comes to

choosing a new site theme.

37Choosing a responsive design




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.

Make sure your theme matches the tone and content of

your website.





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 video-heavy 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?

Whether it’s a blog or an image gallery, choose a theme that you can easily plug your site’s content

into.





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

Know your skill level and plan

accordingly with a theme you can alter and augment easily.





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.





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

MOBILE MEANS:

❖ Readability❖ Simple Navigation❖ Rich Media❖ Search Functionality❖ Visible Content❖ Lead Capture

42


Designing for Mobile



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

Use colors that will show up clearly in all environments.

43Choosing a responisive design




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

Make you site structure simple

and lightweight to keep distracted

visitors engaged.





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

Mobile doesn’t mean media-free: make sure you’re

still giving users the property images and videos they

want to see.





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

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.





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

Whenever possible, try to limit the size of your content to blocks that will fit

on one screen.





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.

Make it easy for visitors to come

back (and for you to contact them) with lead capture forms and user accounts.





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

49


Where Can I Find a Responsive Theme?



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:

Placester’s responsive themes are designed from the ground up for

real estate websites and professionals.





Main page for responsive real estate website theme.

Placester’s Responsive Themes: Preview

Other Responsive ThemesIf 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-and-drop customizability.

There are thousands of

responsive design themes and

templates out there. Do some research to

find the one that works best for you.





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.

53




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.

54


Choosing a responisive design



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

If you’re purchasing a theme from a

third-party site, make sure it’s

designed for the site platform you’re

using!





Chapter 4

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.

LOOKING AHEAD

Mobile will continue to reshape the web.

“It's inevitable that 2013 will be the year that responsive design takes off.”

-Pete Cashmore, CEO of Mashable

Today’s Web:

High Demands,

Higher Rewards

Want more information and opinions on responsive design? Here are a few great sources.

Books

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.

MORE INFORMATION

❖ Books on Responsive Design❖ Articles on Responsive Design

57


Further Reading



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).

58

For more guides and tips on everything from web design to content marketing to SEO for real estate, be sure to check out the Placester

Real Estate Marketing Academy.




Documents

iBook - Responsive Design · 2013-03-28 · Before we delve into responsive design, it’s worth looking at just how much the mobile web permeates the lives of real estate marketers