I remember it well. The year was 2009 and I was getting my first cell phone, an iPhone 3GS...the latest and greatest! Yes folks, my first mobile phone at age *early 30s* was a smart phone. For years I had been one of those troglodytes who proclaimed “I will NEVER have a cell phone,” but smartphones changed the game for me and quite a few others, as well.
Fast forward a few years to 2013 and those who know me will laugh as I now juggle an embarrassing number of mobile devices and computers.
“Why the heck should I care how many devices this woman has?” you might be asking yourself right now. Good point...it’s not about me.
The world has changed a lot since 2009. Even people who thought they would never have a cell phone now have two, three, four or more devices. It’s just the way technology has changed our lives. But beyond that, there’s so much variety now!
Just imagine trying to design websites that work well on all those tablets, smartphones, laptops and desktops. Screen sizes, usability, and functionality on all of these devices vary wildly. What happens when users view your website across all of these different size devices?
Honestly, sometimes it’s a real mess.
Solution: Responsive Design
In 2010, a guy named Ethan Marcotte came up with the term Responsive Design and since then the approach has gained popularity.
The idea behind responsive design is that no matter what device you are on, an iPad mini or a 27” widescreen display on your desktop, your will have the optimal viewing experience for that device. Pages are easy to read and navigate with minimal scrolling, resizing, panning. Images display at the optimal size, and a lot of other cool things.
Psssst….SpinWeb Is Responsive!
You may have noticed thatMojo Media Lab’s websiteis, you guessed it, responsive! (Check it out, go to the homepage and make your browser window small and see what happens.. but then come right back.)
We didn’t just go responsive because Mashable said 2013 would be “The Year of Responsive Web Design” (which they did). There were a few other great reasons. We wanted to be an example for our clients so they could see all of the advantages of the approach. Responsive means better marketing and ultimately more clients for us to help! Keep reading and you'll see why.
Let’s talk about why we love responsive web design and how it can help your website, and your business, get better results. I will give you a little warning when I break into technical speak (which I got by consulting our awesome developer and Wikipedia).
5 Reasons to Love Responsive Web Design
1. No More Pinching, Zooming, and Resizing
Have you ever had a really frustrating experience browsing a website on your phone? I have. It usually happens when I’m on a trip, in the passenger seat of my car, trying to find out if a store is open or to browse a menu at a new restaurant, or maybe to find an address or phone number. I generally need to get to a specific piece of information.
Pinching. Zooming. Images not loading. Small, unreadable text. Tiny links that my finger just can’t click!
It’s awful. It’s annoying. Sometimes I just give up and pray the Google gods can find the answer for me so I don’t have to go back to that website!
Responsive design eliminates these frustrations. How does it work?
Warning, technical speak ahead! Something called the fluid grid concept calls for page element sizing to be in relative units like percentages, rather than absolute units like pixels or points. Wow, so much easier!
2. Content is Prioritized and Smart.
Planning is one of the largest components ofdesigning a corporate website, but even more so with responsive design. A lot of time goes into figuring out what is the most important content on your site for small, medium, and large size devices. How will it display? How will the user interact with it? We dig into the analytics of your site to make decisions and prioritize content. The result is that a mobile user gets the important content for them, and the desktop user gets the full experience, and the tablet user.. you get the idea.
Geek-speak warning! Through the magic of media queries, the page will use different CSS style rules based on certain characteristics of whatever device is being used, like the width of the browser. Neat, right?!
3. It Looks Amazing.
Because of #1 and #2 things are easy to find, but images are also served up looking their best. Play around with the size of your browser and watch images resize and containers with content get shifted around, reprioritized and moved so that you can still see everything and interact with it. Nothing gets lost just because you make your browser window smaller, that is… nothing that is important.
Nerd alert! Flexible images are sized in relative units, so as to prevent them from displaying outside their containing element. Brilliant.
4. Functions Like a Dream.
My favorite thing about responsive web design is the way it enhancesfunctionality and usability. Yes, it’s beautiful and nice to look at. But more importantly, it can change a click to a swipe. For example, on a desktop you might have a clickable looking arrow or button on the homepage to get to the next slide on a slideshow. On a mobile device, that clickable arrow changes to a swipe function, because mobile users use touch actions instead of mouse actions.
Serious jargon ahead! Server-side components (RESS) in conjunction with client-side ones such as media queries can produce faster-loading sites over cellular networks and also deliver richer functionality/usability avoiding some of the pitfalls of device-side-only solutions. Whew, super smart!
5. Better Marketing, Better Results.
No tech-speak needed here, folks. Better usability, smarter content, fewer frustrations and road-blocks for the user… it all adds up togood marketingfor your business. Your website is aboutattracting and converting leadsinto customers, right? Those users are more likely to convert when they have a smooth, frictionless experience on your website… no matter what device they use.
Cool Stuff Behind the Scenes
Most users will not know the site is responsive, unless they resize their browser or check out a site from multiple devices. That’s good because you know it’s effective without being intrusive. It just works.
Advantage for developers (and you): You don’t have to develop a second set of code for multiple devices.
What we’re using to develop our sites:Bootstrap. It’s the front-end framework for web development. Sam assures me that it’s an amazing resource and the only thing anyone should be using. We continue to use Freedom for our Content Management System, which is what our clients use to update the content on their own websites.
Practicing what we preach, every site we build will now be responsive. Yes, it takes a ton more design and development time. Yes, this design approach forces you to spend a lot of upfront time prioritizing content, looking hard at the analytics, and planning strategically. But we know it’s worth it and we believe responsive design is a valuable piece of technology that will be around for a long time.
What do you think of responsive design? Do you think you’ll make the switch to responsive for your next corporate website redesign? If you do, give us a call or a comment below!