Have you created a unified experience for your customers, no matter what devices they use?

If you have customers who access your site from a mix of phones, desktops, and tablets, it may be time for you to give your website responsive web design treatment.

Firms that ignore the responsive website revolution are needlessly sacrificing search rankings, site visits, and customers. Are you confused by the concept of a responsive website? Do you want to get started on responsive web design? This ultimate guide will help you get up to speed on the basics of responsive web design.

Part 1: What Are Responsive Websites?
Part 2: How the Smartphone Changed Web Design
Part 3: Responsive Sites: Benefits and Risks
Part 4: Building a Better Responsive Site
Part 5: The Basics of Programming a Responsive Site
Part 6: The Future of Responsive Sites

Now that you’ve learned the basic theory and programming behind responsive website design, it’s time to improve your own site. Talk to your web designers today and join the responsive website revolution.

The Ultimate Guide to Responsive Websites - An infographic by the team at Bridgingpoints Website Design

Embed The Ultimate Guide to Responsive Websites on Your Site: Copy and Paste the Code Below

Part 1: What are Responsive Web Sites?

Companies are going responsive for 3 Major reasons:

  • More consumers are using mobile devices in addition to desktop devices.
  • Mobile devices come in a wide variety of sizes and shapes.
  • Google gives priority to mobile-friendly devices in its searches.

What is a Responsive Website?

A responsive website adjusts its appearance to fit the user’s screen size and resolution. In a good responsive site, users with smart phones, tablets, lap tops and desktops all share the same experience. A single site can reach multiple device types.

Responsive sites provide you with simplified updates and more unified branding. They provide your customers with a more pleasant and useful web experience.

One Site to Rule them All

For years, many companies maintained two versions of their websites: one for mobile devices and one for desktop computers. Changes in technology have made this web strategy obsolete.

Today, many customers access the same site from an array of devices: smartphones, tablets, and Desktops. Your customers may access your site at work on their desktops, on the train via phone, and at home by a tablet. If you have separate mobile and desktop versions of your site, users may become confused as they switch between devices. In addition, the old ‘mobile friendly’ sites don’t take advantage of the capabilities of newer mobile devices.

According to the Pew Research Center, a think tank that studies cultural issues, 40% of mobile users in Africa, Asia, South America, and the Middle East use their phones to access the internet. Among mobile users under 30, 90% access the internet through mobile devices. Even your desktop-based users share your site and your content with friends via social networks. In an age where social media marketing reigns supreme, your content must be easy to share.

According to the same Pew Research Center survey, 77% of global internet users use social networking sites on a daily basis. Even if your original customer used a desktop to access the site, the people in his network may be using a wide variety of devices. Good responsive web sites load quickly, even for mobile users. They help your customers share your pages and recommend your products and services to their friends.

A Wide Variety of Screen Sizes

According to the industry publication Social Media Today, in 2013 there were 232 different sizes of devices on the global market. In the intervening years, even more mobile devices have become available. Responsive web design lets you reach devices from a single page by using CSS frames.

In responsive design, the frames are set to automatically adjust to the size of the user’s screen. Without frames, your site may force users to scroll in odd directions or risk missing vital information. Responsive sites aren’t limited to the devices currently on the market. They’re designed to load seamlessly with any screen size and resolution. If you switch to a responsive site, you won’t have to constantly add new versions as mobile technology advances.

Google Goes Responsive

Google has recognized the benefits of responsive websites. According to The Guardian newspaper, the April 2015 search algorithm update gave priority to responsive websites. That means that companies will lose ground in the search rankings if they don’t upgrade to responsive websites.

You can test your company’s website using Google’s website testing tool. Unless you’ve made a special effort to change your site, it will probably fail the Google test. That means that you’re losing search rankings and customers due to your design.

Sources for Part 1:
www.pewglobal.org/2014/02/13/emerging-nations-embrace-internet-mobile-technology/
www.socialmediatoday.com/content/why-responsive-web-design-indispensable-your-business
www.theguardian.com/technology/2015/apr/20/google-mobilegeddon-will-shake-up-mobile-search-results

Part 2: How the Smartphone Changed Web Design

smart phone

Since 2010, there have been a few major developments which changed the face of global web design:

  • Throughout the world, the majority of internet users access the internet from mobile devices at least some of the time.
  • The trend is particularly pronounced among the young.
  • Globally, many nations are skipping the ‘wired’ stage of computer use and going directly to mobile.
  • Companies have realized that to reach wide audiences, they must be mobile friendly.

Smart Phone Users Demand Services

The growth of the smart phone industry has changed the way that people use the web. This change is especially noticeable among the Millennial generation. Millennials are embracing smartphones on every continent. In North America and Europe, more than half of the population uses smart phones on a regular basis.

By 2018, half the people in China and India will be smartphone users. As the largest countries in the world embrace smartphones, users demand websites which work with their phones. A company that ignores these demands won’t be able to compete in the coming decades.

African Markets Depend on Mobile Internet Access

Smart phone adoption isn’t limited to North America, Europe and Asia. The devices are even catching on in Africa and South America.

Developing nations boast large numbers of smartphone and tablet users. A recent report by the Groupe Especiale Mobile Association (GSMA), an international body representing key players in the global mobile industry, measured mobile device use around the globe.

In sub-Saharan Africa, 42.2% of the population is expected to own a mobile phone by 2020. A significant number of these new users will be smartphone users.

According to a 2015 study conducted by the Pew Research Forum, 27% of Nigerians currently own a smartphone, and 34% of South Africans own a smartphone. Corporations must respond to this market reality or risk being left behind in a globalizing economy.

Responding to the Changes

Responsive Web design was developed in response to these changes in global mobile usage. Different sizes and brands of smartphone dominate different sectors of the global market. For instance, according to Business Insider, there are 1 billion Android users worldwide, compared to 470 million iOS users.

Android devices vary more in shape and size than Apple devices do, and dominate the market in emerging economies. Responsive websites are the key to reaching these growing markets.

In January 2015, only about 12% of websites had switched to responsive designs. However, the Google updates have triggered a mass move towards responsive sites. Sites concerned about mobile traffic and search rankings have been among the most eager to make the switch.

Sources for Part 2:
www.emarketer.com/Article/Worldwide-Smartphone-Usage-Grow-25-2014/1010920
www.pewinternet.org/2015/04/01/us-smartphone-use-in-2015/
www.gsmamobileeconomy.com/GSMA_ME_Report_2014_R2_WEB.pdf
www.pewglobal.org/2015/04/15/cell-phones-in-africa-communication-lifeline/
www.businessinsider.com/android-v-apple-ios-market-share-revenue-income-2014-6

82% Of Sites Use Responsive Web Design In 2015? Try 11.8%

Part 3: Responsive Sites: Benefits and Risks

The main benefits of a responsive site are:

  • A smooth user experience across all devices
  • A single update that reaches all platforms at once
  • A site optimized for the latest Google search algorithm

The risks of a Responsive Site have to do with implementation. Namely:

  • Not all web developers are able to program responsive sites.
  • The initial programming of a responsive site is difficult.
  • A poorly designed responsive site will drive users away.
  • Some business models may be more suited to proprietary apps than to responsive sites.

Improved User Experience Means Improved ROI

There are several clear benefits to responsive websites. User experience is better on a responsive website. If your website is optimized to fit users’ screens, they’ll spend longer on your site and return to it more often. In fact, Small Biz Trends magazine reports that if a site is slow to load on mobile, 61% of mobile users will leave before it has loaded and never return.

The improved user experience also increases the power of your social media marketing. The world is moving to a referral-based economy. According to a report from Nielsen, 92% of consumers worldwide trust recommendations from family and friends more than they trust any other kind of advertising.

Consumers make buying decisions based on the recommendations of their social networks. A responsive web site is easier to share, easier to recommend, and easier to navigate.

Responsive sites can get bogged down by too many large graphics or slow-to-load videos and widgets. Your customers won’t wait for a slow site to load. If your site performs poorly on mobile devices, you’ll have wasted your web development dollars.

Easy to Update, Difficult to Create

Your marketing staff will love working with responsive sites because they’re easy to update. A single blog post, news item, or change in design is instantly available to all users, regardless of device. With a responsive site, your mobile users and your desktop users are always on the same page.

However, the ease of updating comes at the expense of easy programing. Good responsive websites are harder to program than traditional sites. You’ll need a skilled web designer who has experience working with these sites. If your IT department has not created responsive sites in the past, you may want to contract out the initial design work.

You’ll also need a clear vision for your site. Like any website, a responsive site can get very complicated very quickly. If you try to add too many features, you may detract from your sites usability. Study other websites and try to find a model that will work well for your company.

Are Your Mobile and Desktop Customers the Same?

One of the greatest strengths of a responsive website is also its greatest drawback. A responsive site gives the same experience to mobile and desktop users. But what if your mobile users and your desktop users are different groups of people? What if people use your site differently when they’re on a mobile device than when they’re using a desktop or laptop computer?

According to Millward Brown, an internationally recognized market research firm, mobile users experience a greater impact from advertisements than traditional computer users. The firm also found that mobile users respond best to social media marketing, and enjoy branded apps. Mobile users also tend to visit sites with more urgency. Rather than surfing aimlessly, they’re often looking for specific information and operating under time constraints.

If you don’t have a good understanding of your mobile users and their needs, don’t create a new responsive website. Take the time to understand your customers first.

Some companies, like Facebook and LinkedIn, have realized that responsive websites aren’t right for their business models. Instead, they’ve created native apps for mobile platforms.

Before you design a responsive website, ask yourself the following questions:

  • Do users visit your site multiple times a day, or just occasionally?
  • Do users visit your site for a specific purpose?
  • When users visit your site, do they navigate between pages, or mostly check a certain page?
  • Does your site have a clear marketing goal?
  • Do your users frequently share information from your site via their social networks?
  • Do you already have a robust presence on sites with their own apps, like Twitter, Facebook, and LinkedIn?

Your answers to these questions may help your decide whether a responsive website is the best way to reach your mobile customers.

Sources for Part 3
www.smallbiztrends.com/2015/04/small-business-responsive-website.html
www.nielsen.com/us/en/insights/news/2012/consumer-trust-in-online-social-and-mobile-advertising-grows.html
www.millwardbrown.com/docs/default-source/insight-documents/knowledge
www.points/millwardbrown_knowledgepoint_mobiledevices.pdf

Part 4: Building a Better Responsive Site

Before you design your own responsive website, you should research other sites. When you investigate a responsive website, it helps to view the same site on multiple devices. Web designer Matt Kersey provides an excellent too on his website which allows users to input a URL and see how it appears on multiple sites.

Notice that it’s not enough that a site looks consistent from device to device. A good responsive site must also be an objectively good website. The AWWWards have recognized excellence in responsive web design. However, there’s no such thing as a perfect site. By investigating award-winning sites, you can decide which features will and will not work on your own responsive site.

mobile site image

Notice that this site puts all its menu options neatly across the top, and then displays a memorable logo. This site displays well on an iPhone or a bigger screen, but is not appropriate to a small screen. However, most mobile users will find it easy to navigate without scrolling, and the simple design loads quickly.

responsive web example

While this page loads quickly on all devices, there is some lag on the subpages. However, the designers have kept the loading screen interesting. This reduces the odds that visitors will get impatient and leave the site. Notice that the animation works well on all screen sizes, from the smallest to the largest.

responsive web example2

This site actually displays less content on mobile screens than it does on desktop screens. However, the site displays the most important content, an image of its product, where users can see it. The menu option is clear and easy to find, and the overall feel is that of a fashion magazine. This is a good look for a site that sells sunglasses.

responsive web example3

responsive web 4

While this site is responsive, in that it detects and responds to mobile devices, it doesn’t provide the same seamless experience as the other sites. Notice that the branding and atmosphere varies greatly between the screens.

The site really needs an iPad or larger for the full effect, and on the smaller screens the log in is difficult. While this site is not as poorly designed as some mobile sites, it has some clear flaws which should have been addressed.

Sources for Part 4
www.mattkersley.com/responsive/
www.awwwards.com/websites/responsive-design/
www.laufbild-werkstatt.de
www.colonelsanders.com/
www.tenslife.com/
www.natural-fnb.com/

Part 5: The Basics of Programming a Responsive Site

To get started with responsive programming, you need to be familiar with Cascading Style Sheets (CSS). With the CSS 3 update, you can create fluid grids. In a fluid grid, the sizes of the frames are defined relative to each other instead of in absolute terms. This allows your site to display its parts in the same ratios on every screen.

The web has many free tutorials to help you learn the basics of programming responsive sites and the limitations of responsive programming.

The online magazine Tech Republic has published a quick tutorial to show you how CSS code differs between responsive and non-responsive web sites. Be sure to pay attention to the discussion in the comments for more tips and suggestions on making your site mobile friendly.

The W3Schools developers’ site has a tutorial which teaches users to program responsive sites using HTML, by modifying existing CSS programs, and by using Bootstrap. After working through this tutorial you’ll have a good sense of how different languages handle responsive websites.

Google publishes a guide for web developers who are getting started with responsive sites and offers an online course in programming responsive sites through Udacity.

The guide walks users through creating and testing a responsive website. Between the guide and the free online course, you can learn how to turn your site into a responsive site. If your site was built using a tool like Joomla, Google also provides suggestions on how to improve your site.

Sources for Part 5
www.techrepublic.com/blog/web-designer/how-to-get-started-with-responsive-web-design/
www.w3schools.com/html/html_responsive.asp
www.developers.google.com/web/fundamentals/layouts/rwd-fundamentals/index?hl=en
www.developers.google.com/webmasters/mobile-sites/website-software/joomla?hl=en

Part 6: The Future of Responsive Websites

Now that responsive web design has become the default style for new websites, what does the future hold for responsive websites? In the future, responsive sites will be:

  • Optimized for Audio to reach users of wearable devices.
  • Designed for swiping and scrolling instead of simply clicking.
  • Created with layouts that vary by time, location, and the user’s past preferences.

The Problem of Wearable Technology

Smart watches are finally moving from the realm of fads to the realm of essential tools. However, current responsive web design can’t handle such small screens. How will wrist-sized computers navigate the web? Noted web-designer Benjie Moss has examined the trends carefully. He predicts that audio will increase in importance as wearable devices become more popular.

Many sites are already compatible with text-to-speech applications. Currently, these applications are used mainly by people with visual impairments. If wearable technology becomes the norm, they may be used universally. As you contemplate the future of your website, think of ways to make it appealing for the ears as well as the eyes.

Point and Click is Out. Scroll and Swipe is In.

Many designers have commented on how static website design bores internet users and prevents them from spending more time on your page. In the future, web designers will make more use of scrolling and swiping to entice mobile users. If the web does move towards a more mobile-friendly template, it may encourage desktop users to adopt touch-screens.

Microsoft’s Windows 8 update was designed to take advantage of this trend, and to create a unified operating system for mobile and desktop users. However, as writers in ZDNet explained, trying to combine the experiences resulted in problems for people who browse with a keyboard and mouse.

While creating websites that work well on mobile and desktop platforms is challenging, expect programmers to experiment with new ways of balancing the needs of keyboard users with those of table users.

Moving from Responsive to Personalized

In the future, websites will move beyond choosing user experience based on their device, and change based on a user’s schedule, location, and past preferences. The German-based technology publication Smashing Magazine explains that the technology already exists to implement these ultra-responsive sites. The question is simply when companies and advertisers will make the switch.

Sources for Part 6
www.webdesignerdepot.com/2015/03/the-future-of-responsive-web-design/
www.webdesignerdepot.com/2015/03/the-future-of-responsive-web-design/
www.zdnet.com/article/heres-whats-wrong-with-windows-8/
www.smashingmagazine.com/2014/07/08/breakpoints-and-the-future-websites/