Responsive design: adapting to all your needs.

Reasons why you want responsive design

Disclaimer: This blog post is intended for people who genuinely do not know what responsive design is (and why they should want it).

Responsive design has been a godsend to both developers and users. Why? Simply put, it’s one website that adapts to any device it is viewed on. Before responsive design we had what was called adaptive design. It meant developers had to take the guts of one website and transport them into a mini version of the website. This increased production time and generally was a menace to digital society. The tell tale sign a website was using adaptive design was the ‘m.’ coming before the website. Some sites still use this method for various reasons, fyi.

Responsive design is expected these days. If your site isn’t responsive it may look like it’s scrunched up into a small space on your mobile device.

Did you know 95% of Americans own a cell phone of some kind? Pew Research says 77% of those Americans own a smartphone. SimilarWeb reports that of 77 billion website visits, 55.79% of web traffic was via mobile. Desktop still has it’s wins though, we see a little longer time spent on website with desktop. Needless to say, almost everyone is browsing the web on Mobile, day to day.

Let’s Make Believe

Imagine this: You’re on your phone, away from the house. You’re you’re looking for a big ticket item (mattress, purse, laptop, whatever…). You Google what you’re looking for and find 3 local businesses in town in the search results. They all have what you need. You pull the first one up and it takes a while to load. 15 seconds goes by and it’s still loading, you hit the back button, because who has that kind of time? You go to the 2nd website, it’s loaded pretty fast, but the words look weird, odd font usage, and it’s a an abstract masterpiece — far from usable. You hit the back button again and go to the 3rd website. It loads fast, has a neat layout that is easy to use. You find what you’re looking for and check out online. Boom. Done, now on to Facebook stalking.

Loading Time

The first website has a major issue - loading time. ThinkWithGoogle.com says it takes an average of 22 seconds for a mobile site to load. Here’s the rub, they see after 3 seconds of loading, people tend to leave. 3 SECONDS. Are we surprised though? Brevity is king in our current times. We live in 145 characters per Tweet. We need everything now. And we all agree less is more, because we don’t have time for fluff.

It’s important to have lean code that does what it needs to without making the browser think too hard to process it. Combined with network speeds on your users end, a website might take longer to load. Your web developer not only needs to think of a good user experience on your website, but speed as well. Google has even announced recently site speed will be included in it’s next index change. So in other words search results will put more importance on sites that are mobile-first (speed being a key factor considered).

Unoptimized Website

The 2nd website had an issue with wonky text and broken composition. This could be due to an error on the web designer’s behalf. He/she may have coded the website to look great on one device, but overlooked the dimensions of another device. So it tries to hold on to the composition for another device.

It’s important to test your websites on as many devices as you can before launching. Using a framework like Twitter Bootstrap does a lot of the heavy lifting for cross-compatibility testing for you. Still, it’s on the developer/designer to test a product before launching.

Responsive Website

When we reached the 3rd website it loaded fast and had a good user experience. Everything was laid out nice and neat and you knew exactly where you needed to go, for what you wanted. The user has already reached two benchmarks in order to make that purchase: the page loaded fast and everything was laid out nice and neat.

Convert The Masses; Get That ROI

In reality, we all run organizations, businesses or projects for a reason. We want to make an impact on our target demographic so we can grow. It’s very much a mutually beneficial relationship. A website is how you introduce yourself and how you conduct business. Let that sink in. Before the internet business cards were used to tout your business. This was a choice between three things, the paper used, the font used and the design. Websites now are our business cards and many more decisions are involved in this than the business cards of old.

Making sure your website is responsive fights a lot of the battle for you. It’s a great place to start because it helps lessen the gap between getting your users to do what you want them to (subscribe to a newsletter, purchase something, join something, etc…).

Actual image of me using responsive design at home.

If you want to see an example of a responsive website you can see my website BrettThurston.com. Look at it on your mobile device and then look at it on your desktop. You can see it’s the same website, just reconfigured.

Another way to see if a website is responsive is to actually take your mouse, grab the side of the window pane and reduce it to a smaller size. See what it does. If it reconfigures itself on the fly, it’s a responsive website.

Demo of responsive web design.

TL;DR

A fast website that knows where it’s being viewed is vital to your business pursuits and, ultimately, your brand.

My website is a sample of responsive design. Also, Mr. Simon Collision has a great example too.

Congratulations! You made it to the end! Thanks for reading. Follow me at Facebook.com/BrettThurstonIdeas, Twitter.com/ThurstonIdeas or head to my site BrettThurston.com.