Research has shown that over the last few years, businesses interact with their customers and potential customers more and more on mobile devices, such as phones and tablets. If you’ve already built a website, you’ve probably already invested thousands of dollars making your customer’s online experience with your company a pleasant. professional one. Imagine their disappointment when they come to your site, and the text is illegible, the buttons are too small, and they have to scroll left-to-right in order to see everything on the page. That type of experience is enough to turn away even loyal customers, who would rather do business with your competition than have a disappointing user experience. What can you do to ensure that your visitor’s experience isn’t a nightmare?
Unfortunately, adding to the problem is the fact that mobile phone manufacturers have created dozens of different sized mobile devices with different size screens. This makes the job of the developer that much harder. Developers need a way to create a web site that looks good no matter how large, small, tall, or wide the screen might be. And since they can’t predict what size the newest phone’s screen is going to be, they need a way to determine the screen size, and make the site work on the maximum number of possible devices.
The solution is to create – or convert – your site to use a responsive design, so when someone visits your site, whether it is on their phone or their laptop, they can easily navigate and find the information they’re looking for, and continue to do business with your company.
When mobile device users visit your company’s web site, they expect that their experience will be valuable and user-friendly, regardless of how they connect with your site. If you ignore the growing need to build a mobile-friendly website, you’re essentially closing off your business to a significant percentage of customers.
What is Responsive Design?
Simply put, responsive design is the coding of the design for your web site that responds to the screen upon which it is being seen. If you view your web site on a laptop or desktop computer, your monitor is longer than it is wider. This is commonly known as landscape or having a horizontal aspect ratio. Your tablet or phone, on the other hand, is usually held upright, making the screen taller than it is wider. This is known as having a vertical aspect ratio or portrait layout.
Smaller mobile devices, by virtue of their size, have a smaller viewable area, also known as smaller screen real estate. Responsive design would be used to hide unnecessary elements or transform elements so that the more important information is visible more clearly, while secondary information is moved aside or hidden behind clickable elements.
Depending on which device your visitor is using to view your web site, the pages that they see need to be optimized for that device, showing the information they’re looking for in a clean, readable format.
The Purpose of Responsive Design
The function of responsive design is to provide your web site viewers with the most comfortable and pleasant experience. Different elements on your site – such as your logo, a search bar, your navigation, and so on – will need to be adjusted in order to fit properly on the screen. On a smaller screen, the logo would need to be scaled down or perhaps a different version would need to be shown. Likewise, the navigation, which on a desktop machine may run across the top of your site, would have to be adjusted to fit on a vertically oriented screen, and might be hidden behind a menu button in order to maximize screen real estate.
Responsive design is used to display the elements of a web page so the user can view the information easily, and interact with the site in a way that is intuitive and easy to manipulate.
The Mechanics of Responsive Design
The basis of the technology for responsive design is Cascading Style Sheets. Developed for web designers in the mid-1990s, CSS allows designers and developers to use style directives to manipulate every element of an HTML page.
When mobile devices were first able to display web pages, designers and developers were faced with a problem displaying web pages that were designed for landscape viewing on vertically-oriented screens. They solved it by using CSS to determine the size and orientation of the screen displaying the page. Depending on the size and layout of the page, designers and developers could manipulate the web page being displayed to show the elements they wanted to show in the orientation that the person viewing the site was using.
Properly created responsive design sites will take into account various screen widths in order to determine which elements should be shown and how. For example, if your site has three information boxes on the home page sitting side by side, the responsive version of the site might stack them vertically. That way, users can simply scroll down and still see the same information. Scrolling down, on a phone, is considered a natural behavior, so mobile users wouldn’t consider an extra flick of the thumb as a nuisance.
One of the more important technical aspects of a site that uses responsive design is the ability for elements on the page to resize fluidly, depending on the size of the screen on which they are being shown. That means your developer needs to know how to code the elements of your page so that they can grow or shrink to match the environment in which they are being seen.
Building Your Site Using Responsive Design
When designing or redesigning your web site, it’s important to make certain that the person or company who is performing the work understands that responsive design is not optional. If they’re professionals, they will be able to provide this without charging too much extra, if any. Many web page template designs are built with responsive design in mind, so it might make sense to start from there.
If your designer insists on creating a design from scratch, make sure they provide you with mockups of what the site will look like on mobile devices, and that when your site is delivered it does in fact work on multiple mobile platforms. Similarly, your developer should understand the specification of creating the code for every page on the site so that they all work properly on different size mobile screens.
Having a mobile-friendly, responsive web site for your customers is non-negotiable. Your technical team should not dictate your company’s user experience. Have them build the site the way you want it to be, for your customers’ benefit.
The Positives of Responsive Design
As discussed earlier, having a web site that is responsive to the mobile devices your customers are using is a benefit, as it provides a positive user experience. It’s also important to stay competitive in your market by making sure your site is up to date on technology that has been around for quite some time.
Google will identify sites that provide a mobile-friendly, responsive version of the web sites that is displayed to visitors who visit the site on handheld devices. If in a search on a person’s mobile device your site and your competitor’s site are both shown in the results, that person will be more likely to click on the return result for the site that Google flagged as being mobile-friendly. In fact, Google will weigh the results of a mobile-friendly site, so a non-responsive site might not appear well in the search results.
You can use metrics from your site’s statistics to determine the percentage of your visitors that use mobile devices. If you have been considering creating a mobile app to supplement your business, having a high percentage of mobile visitors may help you make the decision whether or not to invest in creating the app.
If your rate of mobile visitors is high enough, you might consider redesigning your site to focus on mobile users, rather than desktop users. PayPal, an online payment system, recently redesigned their web site with a minimalist look and feel that works for both desktop users and for customers who don’t have their mobile app installed or readily available.
The Negatives of Responsive Design
Responsive design is not without its drawbacks. Because your designers and developers have a much smaller screen with which to work, they will present you with options about what you do and don’t want to be seen on a mobile device. While your first instinct would be to include everything, that might not be the most efficient or user-friendly decision. You will need to decide on each and every element in your web pages whether it improves or enhances your user’s experience on the mobile version of your site.
Having a version of the site that displays differently on desktop computers and mobile devices also means that you will need to make sure that both versions work correctly. That means the quality assurance for your web site is going to have to be twice what it was. Testing both versions means that it will take longer to roll out new features on your site, in order to make certain that everything is working as it is supposed to.
Having a web site that can adapt easily to your user’s viewing environment is an essential component of commerce in today’s competitive online market. Whether your visitors are simply coming for information, or they are looking to transact business with you, their experience on your site is going to determine whether or not they stay on your site or visit your competition. By implementing responsive design, you can control your user’s experience no matter what device they use. A responsive site created by professional designers and developers will help with your rankings by letting search engines know that your site is mobile-friendly. If you haven’t already done it, it’s time to audit your own site to make sure your customers have the best experience on your site that you can give them.
