Wondering about the phrase "responsive design" that keeps popping up at self storage trade shows? StorageAhead's UI/UX graphic designer, Megan Garden, explains what it means when your website's design is responsive. Megan will walk storage owners and operators through the best way to achieve a consistently great web experience for potential renters, whether they're viewing your site from their phone, oversized MacBook screen or tablet.
Hey guys! I’m going to go ahead and get started here. Thanks for joining us today, my name is Megan Garden and I’m the marketing director here at StorageAhead. My background is in UI/UX design, which is just a fancy way of saying web designer. I’m excited to be able to talk to you today about responsive web design, and whether or not it’s right for your customers.
We’re going to have a question and answer time at the end of the session here, so feel free to shoot questions over anytime and we’ll get to them at the end, and we will just go from there! So let’s go ahead and get started.
Okay, so today we’re going to look at what is responsive web design, why it’s important to talk about responsive web design, we’ll touch on the responsive design methods, and lastly we’ll figure out if it’s right for your customers. So let’s go ahead and get started. What is responsive design? I actually Googled it, and my fourth result was “What The Heck Is Responsive Web Design?” So, if you’re asking this, you’re not the only person wondering. It’s a hot topic right now and it’s something that a lot of us are curious about. So this article, actually, which was built responsively, had a quote in it that I feel like kind of covered responsive design pretty well and it said “Responsive websites respond to their environment.” So you can make this topic as challenging or as difficult as you would like. Really what it comes down to is, responsive design is your website changing based on how the viewer is seeing it. Let’s put this into a storage analogy to start things off.
Let’s say one of your renters has a 10x20. They have all of their belongings fit nicely into the unit, they’ve maybe moved everything out of their house and everything that’s meaningful to them is here in this 10x20. If something comes up, for example, maybe it’s infested with rodents – which would never be the case at your facility – but, in the event that it was, you have a couple of options here. You either lose the renter, or you figure out what to do with them. In this case, maybe your only available unit is a 10x15. You take that renter’s stuff, make the best of it, you figure out what’s most important, maybe you have to do some rearranging and reorganizing, you go through the boxes, you figure out what can combine with something in another box – or maybe you realize it’s time to get rid of some of your old college sweaters and shoes that you’ve been holding onto. Maybe moving to a 10x15 you decide to kick out a few boxes. They’re not lost forever; maybe you do something different with them. But that’s how you could handle that adjustment. Now if we take this one step further, and say let’s put all of your 10x15 belongings into a 5x5. It seems crazy, right? You’re thinking; there’s no way! The whole house fit into a 10x20, how am I supposed to fit it all into a 5x5? Well, it’s possible, and that’s where responsive design comes in.
When we’re talking about a storage unit, we can say, maybe you go back through that same process, you look at what have, you figure out what you really need, and maybe what you don’t need as much. The cool thing about it is, when you get down to that 5x5, you’re really down to the things that mean the most to you, the things that are most important. As we parallel that to responsive design, the 10x20 is a lot like a desktop. Desktop web design is like the ultimate experience. It’s the best possible scenario, you have the maximum screen space, you can show them as much information as you would like. You have looked at everything that you know is important to the user, and you’ve put that information here in modules or whatever format it is. You know that they have lots of space; you know that you have lots of freedom to do whatever you want with their content. Then they throw us for a loop when they rent in that 10x15 and all of a sudden, they’re on a tablet. That information looks a little different. In some cases, maybe you don’t have to adapt it as much, but you do have to adapt it in some ways. Maybe you get rid of a couple of things, reorganize a couple of things. The ultimate loop comes with the phone, which is similar to your 5x5 storage unit. That information is really down to the key things that are really important. Thinking about the user and thinking about how they need to experience your product. Between these three, it’s kind of a little ebb and flow in figuring out what matters the most. All of this rambling is a short way of saying what I started out with here; that responsive websites respond to their environment.
What does this look like on an actual website? You have your desktop version on the left. This is a nice website where this particular facility has figured out all of the information they want displayed. They have their phone number real big, pictures – they’ve gone through and figured out what it is that will convince the renter that this facility is the one for them. What they haven’t done is considered their design on a mobile device. As you see here, it’s not responsive on the mobile device, it’s simply shrunk down. We’ve all worked with devices like this – it’s kind of a pain in the butt, you have to pinch and zoom in to figure out what anything is, you find yourself scrolling all around to see what you’re looking at, and really, it’s just a poor experience. We can go into a little more detail, but on the counter of that, this is an example of a website that is responsive. This is our website, StorageFront.com, and we have created the desktop version which gives us the ability to search, to look at facilities nearby, we’ve figured out what kind of a look and feel we want, and we’ve tailored that for a mobile device. We have determined that our most important box, or the most important piece, is the search feature, so that’s what we’ve highlighted in the mobile version and we’ve still brought some of the elements of the desktop version into the mobile version. So that’s a good way to tell whether or not a site is responsive as you flip between those two, you can see that the experience is completely different.
So why does it matter? Who cares about responsive design? There’s only a portion of my users that are mobile users – is it really important? Those are all really good questions and I’d like to throw some numbers at you to kind of sway your opinion one way or another. Mobile usage is rising and in the storage industry alone, it is rising as well. I would guess that mobile usage for storage visitors may be lower than other industries; it’s kind of relative to the industry. But in our industry, I can tell you that at StorageAhead about 28% of our visitors come from mobile devices. This is based on last month’s data alone and is really a relevant number for us. I would guess that it’s going to continue to grow, because in 2014, desktop usage is expected to be surpassed by mobile usage. This number has been floating around for a while, but it’s important to remember that 2014 is next year! It’s no longer something coming, something to keep an eye out for – it’s here, now is the time. Not only are we using our devices a lot, we’re using them all of the time during the day. About 91% of people have their mobile devices within reach 24/7. It is always mobile o’clock. That’s not only having the device with them at all times, but they’re checking them an average of 150 times per day. The frequency of being on mobile devices is crazy, let alone the amount of people that have them and are using them. So, to say that your mobile users aren’t important is kind of a bold statement. These numbers all show that you have a lot of people coming to your site that are looking for you and that are looking for answers. If you’re not considering their experience, then you’re really doing yourself a disservice.
Some of the aspects of responsive design have been around for a while, but the key term and really the way it has shaped the industry started when Ethan Marcotte wrote in his article A List Apart in 2010 – he brought together all of these technologies that are around and said it succinctly that “we need to be using responsive design technologies through a flexible grid of media queries” – and I’m just going to brush on those, because we’ll talk about them later. But really, he’s kind of the key figure that kicked this off. Like I said, responsive technology has been around, but it’s evolving and getting more and more accurate and efficient so that you have the ability to make your users enjoy their experience and accomplish the things that you think are important. In addition to those two options he talked about are mobile websites, which is probably the oldest of the options. There are three ways you can accomplish responsive design: mobile websites, fluid grid and media queries. Some of these have a bunch of other terms that go along with them, and we’ll touch on those as we go through. I would say you have to remember that these options are not exclusive – you don’t necessarily have a mobile website, a fluid grid or media queries – you can have a mix and match of the three. In my opinion, the best mix and match of those is a combination of a fluid grid and media queries, and we’ll talk about why.
As we break down mobile websites, what happens is, you have an absolute duplicate website made solely for your phones. You may design your StorageFront.com, and you may design your StorageFrontMobile.com, but they are completely separate sites and that is a problem because you have two separate domains with the same set of data, which can definitely harm you from an SEO standpoint, as well as making if really hard to manage all of that information. As you’re updating it in one place, you also need to update the other, which is definitely a challenge to execute and maintain. Another problem with that is, if you have someone who has found their facility online that they like, and they send it over to their wife, who gets it in her email, and views it through her mobile device, her link is actually being redirected to an m. whatever the link was, and the problem is, that content may not be the same. It’s possible that you’ll be three or four pages deep into your desktop version, and when you hit it from a mobile device, it may drop you back at the home page – which is really critical because it leads to a pretty poor user experience. It’s frustrating, people don’t have time to deal with it – if they’re hitting it from a mobile device, they’re likely multitasking, and they’re likely going to move onto the next thing. There's a really good chance you’re going to lose that person’s business. That’s an overview of what mobile websites are. On a more positive note, there are a couple of other options! Fluid design, adaptive design, flexible grid (all interchangeable), means everything is changing as you’re moving the page. I’m sure you’ve seen pages like this, but I’ll show you some examples. This is happening because all of the styling in the code for that page is percentage based. What’s happening is, rather than saying “I want my website to take up 960 pixels,” instead, you’re saying “I want it to take up about 80% of my screen.” Depending on what your screen is, you’re still keeping those ratios and adjusting, but aren’t limited by hard numbers, whether that be a measurement of a font or a measurement of an image or a measurement of the entire screen size. Responsive design is moving and reflowing as you resize it. The challenge with this is that a lot of responsibility falls with the designer having to consider what the screen looks like in an infinite number of possibilities. As you’re moving, you may see a word move to the next line, or two words, or a line break – which is a hard challenge to consider, because you want to make sure that users are seeing the content in the best possible way, and you don’t always have control over that if you don’t know what possible screen size they’re viewing. Let me show you an example that I think will help you visualize this. This is an example of a fluid grid system. As you move through the page, you can see the text is wrapping to the next line, the boxes are getting smaller, and everything is kind of ebbing and flowing. This is a solid example of true, fluid design. You can see where, depending on where you were, you don’t know if they’ve shrunk their window down real small, if they’ve opened it up real big, or really what they’re seeing, so that’s a lot of things for you to consider. This is especially important in your case, where you may have a view of all of your units. How do you display those units so that they look nice, no matter what, if they’re always changing? It’s hard to have control over that.
The third method that we talked about is media queries. Media queries give you a little freedom beyond fluid design and are better than mobile websites for this reason: it’s considering your content at specific widths. You can do this in a couple of ways. You can do it by detecting the device or detecting the screen width. It’s successful because it’s tailored with lots of CSS. What that means is that you’re giving the browser play-by-play instructions for what to do when the screen is this size. I’m going to show you an example first before I ramble too much about it. This is an example counter to the fluid design of a media query, which is determining “At 1378 pixels, I want it to look like this, but once it hits 1218 pixels, I want it to take this form. Once it hits 978, I want it to adjust again. Once it hits 748, and so on, all the way down to mobile devices.” The cool thing about this is, rather than having an infinite number, you do have these set visions that you’re looking at, these set widths that you can consider. You may not catch everything with this, that’s why it’s good to have a combination of using media queries and fluid design at the same time so that you can accommodate those little changes within the widths that you’ve set. But again, that goes back to the scissors and tape analogy – it just kind of depends on the situation. A benefit of media queries is that it really opens up the options. Something that you can do with media queries that you can’t do with fluid design is that you can choose to show and hide information. That goes back to the storage units if you’re thinking about taking some boxes out or adding some boxes in. You can handle that differently at different widths, which you can’t do with the fluid design. Fluid is simply moving, flowing and readjusting. That’s something you can do with the mobile website, and some people approach mobile websites because they believe that the user’s experience should be completely different and they have different motives and tactics behind visiting your site from a mobile website, but I think that’s a whole other story altogether.
As we step back and look at the three methods – again, it is hard to compare them because they’re not necessarily three different options – they’re just tools that you can use together. When we look at the mobile website, there is a really good chance you’re going to have duplicate content, excessive maintenance, a poor user experience – and as a result, your bounce rates may be bad. All of these things weigh into your SEO. Of the three options, I would say that mobile is the most controversial option, and probably the least fitting option for your facility. As you look at the other two options across the board, both fluid design and media queries do use that one clean set of code. Your maintenance is easier, your SEO is better, and it’s really just a better user experience, which brings me to my next point.
You can debate whether or not it affects your SEO, but really the thing to think about is how it is affecting your user experience as well, because all of these things are important to your business. As you’re thinking about responsive design, and whether or not it’s good for your customers, consider these points: the SEO implications are small – yes, it’s possible that they’re affecting it negatively or positively, but at this point it is small and the affect will probably grow. More importantly, the user experience implications are huge. If people are hitting your site and not seeing something they expected to see, if it’s really hard to navigate, if they can’t read it – all of these things are going to impact your user experience and you’re going to lose people.
At the end of the day, it’s about converting visitors to rentals. SEO and user experience both weigh into that, but really you need to do whatever is best for getting rentals and growing your business. I would challenge you to find the best possible scenario for each of these devices. I would discourage a combination of the three and would encourage a combination of fluid design and media queries. I think between those two, the options are endless and your business can really be successful.
Is responsive design right for your customers? As I ramble through this, I hope you can catch on that my opinion is “absolutely!” Mobile isn’t coming, it’s here. You saw the numbers. 2014 it may be even higher. 2015, 16, 17 and so on will be even higher as well. It’s your business and your customers, so it is up to you to look at your situation and figure out what kind of content you’re dealing with, what kind of situation you’re dealing with, and which responsive design method is best for a solid user experience. You’re going to find that solid user experience if you’re giving your customers quality, digestible content. Which I think will ultimately lead to conversions and will lead to a really high success rate, both in your business and your marketing strategies.
I believe that’s all I have for you today. We’re going to open things up for questions and I’d like to put in a little plug here for our next webinar. Matt Friederich will be talking about aggregators on September 12th at 11:00a, so be sure to check back with us then and check back with us for the rest of the webinar series as well. At this point, hopefully I didn’t confuse anyone, but I’ll jump into questions and answers. If anyone has anything, go ahead and throw that out.
Q: Am I correct in thinking that StorageAhead mobile sites are already using the media query method?
A: That is correct. As you hit your website from your device, you’ll see that it is responding to your mobile device. It doesn’t look the same on your desktop as it does in your mobile browser. You can see here that we’re doing the same thing with your WebWorks and WebReady products. You have your facility pages, but when you’re hitting it from your mobile device, we’re cleaning that up, refining it, and figuring out what things are best for the user based on that screen width. So yes, you are definitely correct in that.
Q: How do I know if my website has responsive design?
A: That’s a really good question. Going back to what I said there, some of that you can see just based on looks, but there are also some technologies you can use to help you out. If you are hitting your website from a mobile device, and you’re getting m. such and such, you’re definitely on some sort of responsive design. If you’re hitting it from your mobile device and it looks different from what you’re seeing on your desktop, you definitely have mobile responsive design. Something I would send you to if you’re curious what it looks like on devices outside of your own is a website called iPhoneTester.com and you can get on there and test out what your website looks like.
Q: My web design company wants to charge for responsive design. Should I do it?
A: This is a good question. I would say that most good web companies do this by default, because it is a best practice. As we just talked about, it’s just what time it is in the industry, it’s time to consider it and time to be doing it. In the event that they’re not doing it by default and they’re giving you additional charges for that, I would challenge you to ask a lot of questions to figure out what it is that they’re doing for your responsive design. There are all kinds of things that they could be doing that could be qualifying as responsive design, but whether or not it’s improving your business or worth your money is really relative to the situation. I would find out the numbers of how many of your visitors are mobile and weigh that into your decision. If only one in one hundred of your visitors are mobile, I would question whether or not it is worth your money to invest in coming up with a responsive design if you’re only going to help one customer. Maybe you can improve your site in another way and gain customers vs. just gaining that one customer. That’s something to think about. If you have hundreds of people that are visiting your site from a mobile device, every day, power to you! You must have an awesome site, and I would say yes, it’s probably worth your money as long as you have a clear understanding of what’s going on to go ahead and consider those charges for a responsive design.
I think we have time for one or two more here.
Q: How can I learn more about responsive design?
A: Great attitude to have and I think it’s definitely the approach you should have to responsive design, because while I cover a lot of this information, it’s going to continue to keep changing and updating.
You’re going to want to stay on top of things. There are lots of good articles and resources out there. I would suggest Googling it, you could read Ethan’s book on What Is Responsive Web Design, it’s short, sweet and to the point and is written in a really easy to understand manner. On top of that, we try to keep you up-to-date through our social media and blogging as well, so keep an eye out on our StorageAhead blog. I know we’ll have a responsive design article coming out soon. In addition to that, feel free to email us anytime. The email address is on the screen firstname.lastname@example.org and we’d be happy to answer any of your questions.
Looks like that’s about all of the questions we have rolling in for now, so I think that will bring us to the end of our webinar. Thank you for all of your time, and like I said, keep an eye out on our blog, and feel free to contact us anytime if you have any questions. We’ll look forward to joining us at the next webinar! Thanks for your time.