Responsive design allows us to show the most important parts of the website based on the size of the device that is being used.
Think about the last ten times you found information online. Were you at a desktop, on a phone, or on a tablet? About one third of all Americans have a smartphone (and that number is growing rapidly), and around ten percent of all web browsing is now done via a mobile device (a number that is also increasing rapidly). So the chances are that your answer to my question above is at least once.
But most of us that use our phones to browse the internet use it constantly. Our phones, unfortunately, become a part of us. We can’t put them down. It’s our go-to method for accessing information. We look up store hours, restaurant menus, business locations, and much more every day. And when we go to a website on our phones, it’s always nice when we see what we’re looking for right away.
What makes a good website on mobile?
In your head, name a business in your neighborhood that you don’t own. Any kind of business. Now, for that business, what’s the most important thing you’d want to know if you were visiting their website from your phone? Now visit their website from your phone. Is it front and center? Probably not.
Now think about your own business. Think objectively about the most important thing your user / customer would want. Got it? Now check your website from a mobile phone. How long does it take you to find that information? Hopefully, not very long.
However, unless you’ve already created and executed a plan for a mobile audience, your website is probably trying to serve the desktop experience to the phone. In practical terms, this means that everything is likely to be really, really small on the phone, and it’s more difficult to find things we’re looking for. And it may be tough to find things on the phone that are easy on a desktop. But it’s not just smaller. There are a number of user experiences on a desktop that we take for granted, and just don’t have on a phone.
Things we take for granted on desktops
Desktops and mobile devices create different user behavior. We have taken many of these user behaviors for granted over the years. Let’s take a look at some things we need to consider now, that we didn’t always have to before.
On desktops, we often get a reaction from parts of a website, like links and navigation, as we hover over them with our mouse. On a mobile phone, we don’t get this. We have to tap an area on our mobile phone to get the same effect.
This means that if a link color isn’t easily visible without hover, it’ll be difficult to notice at all on a phone. Or even more important, our navigation. If we have very important links that are only visible in a dropdown, a mobile user would not see those links until they click the main navigation link, which may or may not be a clear tell of what is below it. It should be, but on a desktop we sometimes assume people will quickly hover over different menu items to see what’s nested there. This is a very cumbersome process on a phone.
Our links should be clear. We should use a significantly different color for links in text, or utilize an underline on the text, or both, so that both desktop and mobile users can identify content links immediately.
And we should consider our navigation architecture early on in the process. Sub-pages of our website should be obviously related to their parents, and links to those subpages should be available on the interior pages themselves, not just in the navigation dropdowns. In fact, a more unified experience would be to not have dropdowns at all. But if we do have them, they should only be an added bonus for desktop users, not a requirement for site navigation.
When we visit most websites from our phones, we see a zoomed out version of what’s on the desktop. The phone tries to fit the entire website in the mobile browser. But the mobile browser is tiny – it fits in your pocket. In order to see what’s on the site, we double tap the content, or stretch the screen with our fingers.
Wouldn’t it be nice for the website to be readable as soon as it loads on our phones? Obviously it would require shifting some things around – and fortunately I’m going to give you the good news in just a minute.
Size Matters Part 2
With desktop websites, we don’t just assume that the user has a large enough screen to view the website, we also assume they have a pretty good internet connection. In the past, design trends have caused us to have complex, image heavy design features that don’t take long to load on high speed, but it’s not so good on 3G (or less).
On mobile, most of us want the website to load as fast as possible. After all, we’re usually on the go. Therefore, when building websites with mobile in mind, we should ask ourselves, “Is this absolutely necessary to the user experience?” for every feature that we think is pretty. Because if it doesn’t play a key role in the purpose of the site, then it’s probably not needed.
So does this mean we need a separate website for mobile?
I know you might be thinking, “This guy is just trying to get me to sign on for yet another website for mobile phones that’s going to cost me a fortune.” Fortunately, I’m not! As fast as mobile technology has brought people online from a variety of websites, the web design and development community has rapidly adapted and innovated as well.
It’s understandable that the experience hasn’t always been as elegant on our mobile phones as from a desktop. This is a relatively new phenomenon, and the web has always been focused on PCs, not the incredible number of connected devices we have today. The web development world simply moves fast, and it’s important we adapt quickly.
To give you a heads up of some of our upcoming challenges, they won’t stop at phones. Now TVs, refrigerators, cars, literally everything, is starting to connect to the web. And people are going to visit the same websites that we’ve previously built for desktops, and now are adapting for mobile phones; but they’ll have their own challenges. For instance, internet users on smart TVs may navigate with a remote control, or a pointer.
These current and future challenges mean that building separate websites specifically for mobile is shortsighted, and not enough.
Introducing Responsive Design
Mobile websites typically represent building a completely different website from the original, geared specifically for mobile devices. They are often expensive to make, and sometimes they even have to be managed independently from the standard site. This is not ideal.
But in the past couple of years, the industry has moved toward Responsive Design. This is a pretty fancy phrase that basically means your website responds to the environment it’s displayed in, in order to work nicely. It won’t be exactly the same everywhere – in fact – that’s the point. Instead, the website automatically detects the size of the screen it’s being displayed on, and adjusts how it looks accordingly. That screen could be tiny, like an iPhone, or it could be huge, like a 60″ flatscreen or a projector.
Responsively designed websites allow items on the page to be moved around a bit, the navigation to be simpler to use, the text to be easier to read, and unnecessary items to be removed from the mobile view. We have a good deal of flexibility in responsive design that allows us to show the most important parts of the website based on the size of the device that is being used. For small screens, we can really narrow down the focus. For large screens, we can show off all the bells and whistles.
A couple of great examples of responsively designed sites are The Boston Globe, Smashing Magazine and CSS Tricks. Load these on your desktop, and then resize your screen to various sizes, and watch how the website adapts to the different layouts. Nice, right?
And the best part? It’s the same website. No mobile site, no separate development. It’s all integrated together. This makes it easier to maintain down the road, and it allows us to offer a website that looks great from desktops, to iPads, to Kindle Fires, to Android and iPhones. The website adapts to its environment, no matter what.
What are the disadvantages of Responsive Design?
The tough part of responsive design is that it requires a lot of extra testing and tweaking to make sure it looks nice on each device. And it also takes some getting used to by all of us in that we can’t expect the website to look exactly the same wherever we see it from. But all in all, it’s a far more affordable and superior method for offering mobile compatibility for our websites. And it’s also gotten widespread adoption by many leaders in the web development community. It’s a technology that you can trust will be around for a long time.
Responsive design is the present, and the future. Not all the details of how to do it best are worked out yet, but it’s getting there. Technology is always changing and evolving, and that’s a good thing. All you have to know is that we are on top of it, and we’re going to work hard to provide the best experience for our customers possible.
The future is an exciting one, and it will not have the boundaries that we’ve assumed for almost all of our previous website development. So it’s time for us to adapt. To everything.