A responsive website responds to the device screen size on which it is viewed.
It is one website that can be comfortably viewed on small phones to large desktop screens and everything in between.
Examples of Responsive Websites
Many of the websites that you visit on a regular basis are responsive. For instance, the American Psychological Association website is responsive. As the screen gets larger, more content is available.
Also, the National Institute of Mental Health website is also responsive. You can see quite a difference in the content that is being offered at mobile device screen sizes like a phone or a tablet on the left compared to a laptop or desktop screen on the right. The laptop or desktop sized screen gets a different navigation bar as well as the “May in Mental Health Awareness” box with an image, description, and link.
And here’s another example of a responsive website, Psych Central. On the smaller screen sizes, the navigation menu collapses into a pull-down menu.
How Can You Tell if A Website is Responsive?
There are several ways to tell if a website is responsive.
One thing you can do is visit any website on a laptop or larger sized screen and resize your browser window. Does the layout shrink to fit the window size? Or do scroll bars appear?
Google also provides a webmaster tool for testing if a website is mobile-friendly. Take it for a spin. Does your favorite website pass the test?
Probably the best way for a human to test however, is to visit the website through multiple devices. By visiting the same website on a smaller-screen device and a larger-screen device, you can really get the feel for the changes in content, layout, interactivity. How does the website experience feel on your smartphone as opposed to on your laptop?
What if a Website is Not Responsive?
The websites of yesteryear where something that we call “fixed”. There was one size and that was it. When you view it on your desktop, everything is looking great. But, today, if you where to view a that same website on a tablet, or worse still, a phone, you will be forced to tap, pinch, scroll, and zoom in in order to read the site. You also might find odd alignments or layouts that just don’t make sense.
A non-responsive website may also load slowly. One of the great features of a responsive website is that it can be optimized for speed. Most devices with small screens also have less speed – 3g or 4g networks or not-so-good-in-the-middle-of-nowhere strength wifi. Or worse yet, public wifi. A responsive website loads only the necessary content and at appropriate sizes whereas a non-responsive website just loads everything.
Why You Need a Responsive Website
More and more people use phones and other devices like tablets to access the internet, meaning that having a responsive website is no longer optional, it’s a requirement for successful online marketing. All websites from now on ought to be responsive.
And the trend will continue. And if you want even more statistics about why responsive websites are important, you can check out this infographic.
Besides the fact that people are, undoubtedly, going to be visiting your website from their phone or small device, here are some further reasons a responsive website is necessary:
- You are delivering the best user experience possible for every website visitor.
- Google is going to start taking mobile responsiveness into consideration in mobile search engine results. “We’re boosting the ranking of mobile-friendly pages on mobile search results.” Translation: not having a responsive website hurts your mobile SEO.
- It’s a sign of professionalism and that you invest into your practice.
- You are up to date and with the times (and most likely, ahead of the competition).
How to Get a Responsive Website
If you currently have a website but it is not responsive, there are a few things that you can do.
- Build a new website. Sorry to break the bad news but your non-responsive website is a car wreck. Just like a car wreck, the cost of repairing your website may be equal to or more expensive than just buying a new one. A web developer can check out your situation and let you know if it’s totaled.
- Convert your website to a responsive website. Depending on a number of factors such as your current code and the complexity of the design, you may be able to hire a developer to convert your current website to a responsive website.
- If you’re using WordPress, you may be able to use a plugin. Lot’s of these plugins are misleading you when they say, “it makes your website responsive!” It doesn’t make your current website into a responsive website, it creates another website with your existing content and serves the second website for screens that are smaller. This is not the most elegant solution because the second website will not have the same look and feel as your actual website – which can lead to some confusion to website visitors that visit both your full-size website on a larger screen and your second, small-size website on a mobile device. However, it can make a mobile website solution that is more affordable than a rebuild or updates to code. The best option so far seems to be WP Touch.
If you do not have a website but are looking to get one built, be weary of any designer or developer that is suggesting designing or building a website that is not responsive. All (good) designers and developers build responsive websites (or some other solution for responding to screen sizes). A “fixed” design is a sure sign the designer is stuck in 1998 and, trust me, you do not want to go back there.
Responsive websites are not the future, they are now. This is where we are and if you aren’t, then you have some catching up to do. If you have a particularly elderly target audience, 60+, then maybe you don’t need to rush as much as those catering to a younger crowd, but still, eventually you will need to go responsive.
If you have a website, you can check your website analytics to find out what percentage of your visitors visit your page from a device. You can also use this percentage to guide your sense of urgency to evolve to responsive design.
What do you think? Are the websites you visit regularly responsive websites? Have you experienced trying to find specific information on a fixed website on your phone or tablet and had to pinch and zoom and scroll?
I would love to know what you think about this article or if you have any questions. I hope you found something in this list to inspire you to make some improvements. Let me know by contacting me or tweeting me anytime. I would love to hear from you.