October 6, 2015 Website Design

Why New Business Development Needs Responsive Web Site Design

Not so long ago, people looking for information about a company or business would turn on their computer and start a search.  Today, that same search isn’t limited to a desktop computer. Your customers are leveraging a wide range of devices, and they expect to be able to get the information they want easily whether they’re on a tablet, computer or smartphone. The exponential growth of tablets and smartphones has radically changed the way we connect, communicate, research and make purchases. 64% of American adults and 68% of Canadians own a smartphone, with ownership increasing 35% in the US since 2011 and 25% in Canada in the last year alone. (1, 2) Mobile phones have moved from devices that provide calling convenience to essential business tools for keeping connected. It’s hard to imagine a time when we didn’t book lunch reservations, schedule meetings or look up information from our phones since we now depend on them for far more than just calling.

Consumers spend 15 hours a week doing research on their smartphones(3)

It’s safe to say, the internet has completely changed consumer behaviour. Today, we have online access whenever and wherever we are, which has changed the way we connect with people and businesses. People are no longer watching TV exclusively on their television sets at home, they are streaming shows while commuting.  They aren’t calling for restaurant and hotel reservations, they are booking online.  And, when it comes to research or quickly looking something up, consumers will use the device that’s the closest whether that’s a computer, tablet or smartphone. As a result, expectations for companies in the online world is also evolving. No longer is it good enough to have a single web site to which people come for information. Traditional web sites never scale down well and are difficult to navigate on smaller form factors like tablets or smartphones but people expect the same (or better) experience when they are accessing web sites from every device. Part of the rapid adoption can be credited (or blamed) on Millennials who have readily embraced the online world. In the workplace, they are driving expectations around device use and have started pushing the envelope of what’s expected from an online experience.

35% of US and 36% of Canadian workforce are Millennials(4)

In today’s connected world, most people will have a combination of smartphone, desktop, tablet and e-reader and will use any or all of those devices to connect to the people and places they need. This multi-faceted device environment adds complexity for businesses looking to create a meaningful brand experience and a consistent image regardless of how customers visit them.

Get Found

When people research a company, product or service, they most often start with a search engine.  Companies that rank higher in the search results will gain more interest from prospective customers than those who are further down on the page (or even pages). Put simply; the higher the search result, the more click-throughs a company will receive.  Surveys show dramatic drops in click-through-rates (CTR) from someone placed first at 19.3%, compared to someone in position three at 7.7%. (5) Fall off the first page and customers might not find you at all. The drop-off in CTRs on a mobile device is startling. Ranking in the first position has a CTR of 27.7%.  By the time someone reaches position three, the CTR drops to 3.9%. (5) And in today’s mobile environment, if your customers are searching, you need to be mobile-friendly.  That’s just one good reason to re-evaluate and refresh your website strategy sooner than later. Another good reason is that Google has laid down the gauntlet and is rewarding businesses who make mobile a priority. On April 21, Google changed its search algorithms to make it easier for mobile users to get relevant, high-quality search results. Mobile-friendly sites now rank higher in search results when users are conducting searches from their mobile devices. This change will make it harder for companies who don’t have a mobile-friendly site to be found when customers are searching from mobile devices.  While the change won’t impact desktop sites, it will have a dramatic impact on mobile. What counts as mobile-friendly?

  • Text has to be readable without tapping and zooming
  • Tap targets need to be spaced out appropriately
  • Pages must avoid content that can’t be viewed or played (such as video) on mobile devices, and
  • Pages must avoid horizontal scrolling

Mobile digital media time significantly higher at 51% compared to desktop at 42%(6)

A recent survey has found that at least 44% of Fortune 500 web sites aren’t mobile friendly.(7)  This could present an opportunity to boost a company’s rankings and be found by more customers who are already leveraging the mobile internet to search for information. With all these factors impacting mobile internet, it makes good sense to move towards a mobile-friendly strategy to make sure customers can find your business, regardless of how they are searching because we know they are searching! Here’s the truth about online buying habits:

  • 74% of people have used their mobile phone to make a purchase (3)
  • They visited a site 6 times before buying (3)
  • 69% were looking for local businesses (3)

When it comes to mobile research, people want answers quickly, and they’re often looking for information at the last minute. If you can’t be found easily, you will lose out.

Connecting with Mobile

The time is right to refocus your online presence towards a mobile-first strategy.  A mobile-first strategy starts the web development process at the smallest device (smartphone) and builds the site up and out from that point of view to accommodate larger and larger form factors.

Average time spent online: 75 hours a month(8)

After you’ve prioritized content for mobile users, the content can be expanded for tablet with more and more information being made visible as the form factor gets larger. It is important scale from the smallest device to the largest device when it comes to content because it is easier to add than remove content while retaining the experience and functionality.  The approach marks a radical change in the way most businesses have developed web sites in the past and will require a re-thinking of what’s important, how your customers are using your site, and even the visual image you portray. On mobile devices, the screen size (real estate) is smaller and you need to be able to easily navigate around with your fingers (which means buttons need to be bigger and easier to use). Did you know that today’s smartphones have such high resolution screens that using low resolution images online is a thing of the past? Today, you need rich imagery because that’s what mobile users expect.

Respond with Responsive

So how do you ensure a rich user experience, adapt to different operating systems, screen sizes and the new search criteria?  The answer is Responsive. Responsive Web Design adapts online content to the device or medium that it is being viewed on, while maintaining the same experience, regardless of the device type or size. It is “responsive” because the web server tailors the way it responds based on the device making the request.  A desktop will receive a completely different web page than a smartphone, but all the content is exactly the same because it is drawn from the same place. At an architectural level, content remains centralized and the server delivers information optimized for the smaller devices, while ensuring download speeds are maintained. When it comes to mobile searching, load time needs to be fast. In the past, mobile web sites were designed for specific device sizes so companies would create multiple different sites to ensure an optimal customer experience.  Having many different sites increases maintenance requirements, not to mention development costs. If the company wanted to make a change, they had multiple sites to update, and the problem was compounded for multi-language sites. Often some of the sites would become out of date because they weren’t refreshed as often resulting in a disconnect for the customer who would have a different experience on different devices. Since there is only one set of content Responsive sites are easier and less costly to maintain or refresh.

4% Canadian internet users use mobile devices exclusively to go online and no longer use a laptop or desktop(9)

5 good reasons to go Responsive:

  1. Develop Demand & Generate Leads. Stop sending quality sales leads and your customers to your competition. If your site is difficult to find or navigate, potential customers will go elsewhere.
  2. Be Found.  Search engines are a top sales tool for lead generation so your site needs to be optimized to rank highly and be found easily.
  3. Excellent User Experience.  Regardless of the platform or device, you want your customers and new business prospects to have a good experience when they interact with you so they keep coming back.
  4. Keep it Simple.  A single site is much easier to update which makes content refreshes or updates simpler and faster.
  5. Make your Brand Memorable. Customers want to do business with people who are cutting-edge and offer the latest features, services and experiences.  Make your brand interaction exceptional and memorable.

Why Responsive?

Another good reason to consider migrating your web site to a Responsive Web Design site is that Google recommends it.  If you are like most businesses who needs their products or services to be found online, optimizing your site for online search is critical.

48% of mobile research starts on search engines(3)

Here’s why Google likes Responsive Web Design (10):

  • It’s easier for users to share and link to your content with a single URL.
  • Helps Google’s algorithms accurately index your page.
  • Requires less engineering time to maintain multiple pages for the same content.
  • Reduces the possibility of the common mistakes that affect mobile sites.
  • Requires no redirection to get a device-optimized view (which can be error-prone and degrade user experiences).
  • Reduces load time.
  • Google bots only have to crawl your page once, speeding indexing and helping to keep more content fresh.

Just Build an App?

Many companies have developed apps as a way to connect with their mobile customers directly with a rich user experience.  For some companies, this is an ideal way to give repeat customers the best experience accessing their products or services. But it’s important to remember that an app is not a web site, and all companies need a mobile-friendly website in today’s business environment. Responsive Web Design creates an experience that is close to what is delivered by native apps. While native apps are widely viewed to have the best user interfaces, Responsive Web Design sites can deliver a comparable user experience without downloading anything new and worrying about device or operating system compatibility. Unlike a Responsive Web Design site, native apps have to be developed for each operating system and to be compatible with a myriad of different hardware manufacturers.  This could increase the cost of your mobile customer strategy and would mean that you have to update multiple different apps each time an operating system is updated.

Apple is the top smartphone manufacturer with 43% of mobile subscribers(11) 52% of smartphones run on Android(11)

A few other factors to consider:

  1. App space is crowded. If you’re are looking for net new customers, you will have to stand out. Apple’s iStore hosts 14 million apps and Google Play has now overtaken Apple’s App Store in terms of the number of apps it hosts. (12)
  2. Every operating system needs its own app. There are many different operating systems including Apple iOS, Google Android, BlackBerry OS and Microsoft’s Windows Phone OS.  And many version in each as updates and upgrades are created.
  3. App usage has slowed. Almost every age group is downloading fewer apps with 18 to 24 averaging 24 apps on their phone and those who are 35 to 44 year old averaging 19 (which was down from 30 apps a year ago). (13)
  4. Research starts with search engines. Only 26% people start on branded apps when they are looking for information. (3)
  5. Laptops and desktops aren’t dead. You want to reach and connect with all users regardless of the device they select and want them to have a rich experience on any and all devices.
  6. Apps are not web sites. An app is a tool that could supplement (not replace) a strong mobile web site.

Tips for Moving to Responsive Design

Moving from a traditional web site (or web sites) to a Responsive site requires planning.  Companies need to take a look at their customers and how their sites are being used to start prioritizing and rationalizing the information they are presenting to make sure their customers are getting what they want and need, how, when and where they need it. Some areas a company will need to look at (or make changes to) during the migration to a Responsive site include:

NAVIGATION Navigation is a critical element of the mobile-first strategy. Large drop down menus don’t work well on mobile devices. Consider scalable menus that hide choices for mobile platforms and offer more options on larger devices.Consider how to leverage common mobile navigation gestures like swipe and tap.
CONTENT Give thought to what’s the most important. Smaller screen sizes and the need for fast load times means re-thinking the most important parts of the site and scaling back the amount of information being pushed out.
FORMS All forms need to be adapted to a mobile platform so smartphone users can easily enter information. It can be challenging to fill in traditional forms on a smartphone so if you businesses uses forms, look for ways to optimize them for mobile using drop downs and  other ‘finger-friendly’ controls.
IMAGES Image-rich content with strong visuals is a best practice in today’s web design.  Dense, text heavy pages don’t work well in a mobile format. It you are refreshing the site, re-evaluate photography to take advantage of an image rich environment.
VIDEO If you’re running an Adobe Flash site, the importance of migrating to a mobile-friendly format is critical.  This web site format is not compatible with today’s smartphones. For companies with a rich video library, ensuring they can scale and play on mobile platforms will become important and may require some adaptation.
BROWSERS Many larger corporations still use older versions of browsers. When planning your site, make sure you’ve considered how far back in browser version history you need to go to make sure you are reaching all your customers. Ensuring compatibility with older browsers presents technical challenges you’ll want to consider up front.

 

A Framework for Responsive

Although many web sites may look dramatically different, much of the underlying code is similar. To reduce the time required to design and build a new web site, designers and developers often make use of frameworks (which is essentially files and folders of standardized code) as the basis for the development of a new site. There are two different types of frameworks front end (which is the design/visual site) and back end (connecting into the databases, templates, session management and files). For the discussion of a Responsive site, we will focus our attention on the front-end frameworks. This is the designer’s layer where content is coded so it can ultimately be viewed in a browser. Why do you need a framework?  Simply put, you don’t need to reinvent the wheel.  We’ve been talking about speeding updates to your web site and ensuring mobile device accessibility so it makes sense to talk a little about the technologies that can help facilitate your design and speed the web site creation, and that’s firmly rooted in frameworks. You might have already heard designers and developers talk about cascading style sheets (CSS) frameworks.  They have been around for years but Responsive Web Design has made many traditional CSS frameworks obsolete, replaced by new, next generation CSS frameworks and boilerplates. When it comes to frameworks, there are two common tools: grid-based frameworks and complete frameworks.  Grid-based frameworks provide style sheets with column systems to facilitate the distribution of different elements according to the established design. Complete frameworks offer more configurable features. Popular Responsive Web Design complete frameworks include Twitter Bootstrap, HTML Kickstart, Yaml, Zurb and Skeleton. When it comes to selecting the right framework, a Responsive Web Design expert can help you weigh the options and choose the right technology to best suit your specific needs or requirements.

Get Started Now

In a competitive business environment, you need to respond before your competitors if you are going to steal market share … and in the mobile arena, there’s an opportunity to get ahead of the curve. Since moving from a traditional to a mobile-friendly web design could mean some dramatic changes, it’s important to have a plan and work with someone who really understand this space. Partnering with a company experienced in Responsive Web Design can help you navigate migration and prioritize the requirements for your site. A strong web design firm will have a defined process to guide you. Here are a few tips for picking a design partner:

  1. Has a process: Responsive sites are about more than pretty pictures that look good on the screen. You need to have a partner who can effectively map the user experience and show the progression of site content from mobile to tablet to laptop to desktop in a cohesive manner that supports your brand identity.
  2. Experienced implementers: You are trusting your brand and identity to a company who will present you to the online world. If one bad experience can lose a customer, you need to make sure your partner knows how to roll out your web site so all users across all platforms have a good experience that keeps them coming back, and that takes business expertise, knowledge of the design world, and technical know-how to create a seamless experience across all devices.
  3. Business savvy: Since you are trying to make sure you are reaching your customers in the best possible way, having a partner who understands business (and your business) will enable them to help you make the best choices for technology, content, imagery and navigation. Understanding your business means they can help identify factors you might not have considered and anticipate requirements.
  4. Speaks to your audience: Beyond knowing your business, a strong development partner will understand what resonates with your audience. It’s about speaking to customers in the way they want to be spoken to, in a language they understand and relate to.
  5. Technical skills: Responsive Web Design has significant technical requirements that should be transparent to the user, but ensuring that smooth, consistent experience whether searching from a smartphone or desktop computer takes knowledge, and experience beyond the beauty of the designs they present.
  6. Impressive portfolio: Been there and done that. You want a partner who has created Responsive Web Design sites for a range of customers in different industries. Give their work a test drive and see how it works on all kinds of devices. You want to make sure the company you choose has a strong cross-section of customers and demonstrates the technical abilities you need.

The explosion of mobile device use and the expansion in the number of devices a single customer will use to connect with you make this an optimal time to kick your mobile strategy to the next level.  There is a business opportunity to gain share, and a need to start protecting the customer base you have worked hard to secure. There’s no better time to get Responsive.

The Bottom Lone: The Future is Responsive

Responsive website design is no longer a buzzword or a trend. It’s a must-have for any reputable business with more and more people using mobile devices to access websites. If you’re still skeptical, take a look at your Google Analytics to see how much of your traffic is from mobile devices. You might be surprised.

Ready to go responsive? Let’s chat. 

 

  Sources:

  1. PEW
  2. Catalyst
  3. Google Insights
  4. Canadian Business
  5. Standard Marketing
  6. Smart Insights
  7. USA Today
  8. IT World Canada
  9. The Globe and Mail
  10. Google Developers
  11. Nielsen
  12. ZD Net
  13. The Star
Tags: ,