Not another ‘what is responsive design?’ post!

By now – 2015 – you’ve likely heard of the methodology of responsive web design. Notice I said “methodology” and not “trend.”

If, for some reason, you are unfamiliar with this process; responsive web design (“RWD” herein) is an approach to designing websites and applications aimed at crafting them to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones). (source)

RWD was first demonstrated in 2004 by Cameron Adams and was later coined as “responsive web design” by Ethan Marcotte in his 2010 A List Apart article. Since then, RWD has become a part of the narrative for many webshops and agencies; insomuch that 2013 was declared “The Year of Responsive Design”  by Mashable.

The more you know … cue the music and shooting star.

As you can see, RWD is not a trend. It’s a way-of-thinking wholly about the user’s web experience and the methodology behind the content strategy of your website. In its infancy, like any new shiny toy, RWD had basic concepts and processes for making a site ‘responsive’.

With the introduction of CSS3 (Cascading Style Sheets – a language that separates the design markup from the content markup, HTML) and media queries, the concept of a “mobile-first” approach emerged. Without giving you another few paragraphs of what that all means, I’ll simply say that CSS (and often times JavaScript or jQuery) allowed us to target specific viewports and screen resolutions for the myriad of devices in your user’s hands.

The “mobile-first” concept is, in this developer’s opinion, the best route for developing your site. This forces all parties in the process, including our clients, to take a deep breath, take a step back, grab a carafe of coffee and really strategize or get your “strategery” in place for your website. What a user needs (or wants) to see in a mobile view may be vastly different than what they should (or need) to see on a desktop experience. The hierarchy, calls-to-action, and the content(!) all need to be thought out and planned before you even put pen-to-paper and start putting wireframes together. We’ll get into more of the challenges or things-to-think-about in a little bit.

What have I gotten myself into?

If you’re starting to get a pain in your chest and your head is spinning, it is time to take a deep breath. Find your pressure points and say “woosa.”

Sure, it’s a lot to take in. We have to do a lot of thinking and planning and re-thinking before you even see a design. It’s an investment in your business; just like deciding to buy the new Widget that will make your production twice as fast for a fraction of the price. You now have a “sunk cost” in the previous model of said Widget.

This is what is important to remember throughout this process – you’re investing in your business’ virtual store front; whether or not you are selling anything online. It’s more than just your company’s online presence and eBrochure.

‘Just’ make it responsive!

Just” has to be one of my personal, least favorite words in the English language. Did NASA just put a man on the moon? Do doctors just open your chest up for an important, life-saving procedure? Did Luke just blow up the Death Star?! “woosa … woosa.”

I’m in no way saying RWD is akin to open-heart surgery, however, my point is that we are not just designing a website. We are creating a strategic, methodically planned, user-friendly experience for your clients. In other words, “I fight for the users!”  (Yes, I’m also a movie geek in addition to web geek).

“Can’t you just make my current site responsive?” Let me give you a little analogy presented by Bryce Propheter about retrofitting your current site.

You just bought an iPad 2. Like Apple so often does, the new iPad 3 comes out the following week. The iPad 3 now comes with retina display. You go to your local Apple Genius and ask them to add this feature to your iPad 2. Apple Genius looks at you with a blank stare. He gives you two options. Option 1 is to buy a new iPad 3 and go about your day. Option 2 is to completely disassemble your iPad, add a new processor, a new screen, and all the various other upgrades needed to make your iPad 2 an iPad 3. Will it work? Probably. Will it be the best iPad you can own and perform like an iPad 3? Maybe.

Time for another “woosa” break?

You might be thinking, “but I just redesigned my website X months (or years) ago!” You may even be thinking, “This is too much of a hassle. I’ll just leave my site alone for now.” Both are valid thoughts to be thinking right about now. I’ll refer you back to the above statements about this being an investment.

Need more of an incentive?

If I haven’t already burdened you with enough to consider, allow me to place another proverbial straw on your camel’s back. Google. Have you heard of them? It’s little company I heard about a while back. I think we should invest in them soon; they’re going places.

In November of 2014, Google officially launched the “mobile-friendly” label to the search engine results page (SERP).

Google SERP for mobile-friendly sites
Source: Search Engine Land

In an effort to help mobile searchers know which sites they may click on are mobile-friendly versus which ones are not, Google has added a text label under the URL in the snippet that reads “Mobile-friendly” as the first part of the search results snippet. Google said it can be a “frustrating experience for our mobile searchers” to end up on a web page that is not mobile-friendly, thus they are adding the label to their mobile search results to communicate this to the searcher. ~ Search Engine Land

OK. OK. Let’s commit.

You’re ready to dive in. You are now empowered to make these decisions and collaborate with us on your new, responsive, user-friendly website. Did I leave anything out? Well … yes. There are challenges in RWD; that goes without saying. But, I did say I would touch on some of those challenges.

We’ve covered most of them already, but in addition those mentioned, we’re also faced with different screen sizes and resolutions, different devices, touch-screens, site speed, and retina displays. We have the iPhone family (4-6 Plus), Android devices (too many to list), tablets, “phablets,” lions, and tigers, and bears. Oh, my!

Still committed? Good! Because those challenges are what we, as technology solutioneers and creative strategists, are here to help you with and overcome. Understanding these challenges is part of the strategy, the design and development process, and the overall game plan for creating a solution for you – but more importantly – your clients.

This article originally appeared on the Astadia Blog.