So what’s this dramatic “end of the web as we know it” all about, anyway?
Well, just think about the enormous amount of different mobiles and tablets that are gonna end up in stockings and under trees this holiday season. They’ll bring mobile web traffic from a whole range of devices with
varying screen sizes.
Then what’s gonna happen? Some of them will zoom, pan, and swipe your website, trying to find what they came for. Others will simply leave. The point is this: no matter what they might do, the best way of serving all of them is with a site that responds to their screen size.
Creating a separate mobile site used to be the most common approach but has become impractical (exactly which screen size is the site targetting?) Having multiple sites also causes confusion for visitors and search engines (where exactly am I?) Then there’s the additional work of maintaining content accross sites.
Luckily,
Responsive Web Design has come to the rescue. The techniques, introduced by Ethan Marcotte as we
blogged about, have been around for a while. But the recent explosion of screen sizes steadily increased its popularity during 2012 and has already been labeled the hottest web design trend for 2013.
The Case for Responsive Web Design
Hundreds of devices with different screen sizes browse the web. How do you accommodate for that? Until recently, companies—depending on budget—would opt for any combination of the following approaches:
— Do nothing, and let the user pan, zoom, and suffer
— Make a separate mobile version of the website
— Make a mobile app for the most common devices
So what’s wrong with that? Well, more than we can cover here, but let us give you an overview.
Doing nothing was an option when mobile traffic was relatively insignificant… but now that’s changing fast. Ignoring small screens will result in an unfavorable brand experience and eventually losing out to competitors who take action to serve their customers right.
So if that’s not an option, what about a mobile version of the website? Having two (or more) versions means duplicating and maintaining content across separate site addresses (URLs). This creates additional work for the site owner and has a negative impact on SEO. Also, the slightest disparity confuses visitors: open a certain link on your mobile and… BOOM, error! And there are hundreds of mobile devices out there, all with different screen sizes. Which ONE are you making the site for?
Let’s just briefly talk about the mobile app approach because people will end up on your website no matter what. Therefore, a mobile app can be used in addition to—never instead of—a responsive site. Other reasons include costs, number of devices targeted, and again, duplicate content.
So there it is, serving the exact same (responsive) content from the same URL to everybody, regardless of which device they’re using, is the only viable solution.
Sounds all cool, right? So why is the CoffeeCup site not responsive yet? Well, it’s a bit weird for us, actually. We had to make a choice between solving this for ourselves or for our sweet customers first. So we chose to work on… snap, we’ll get back to that later.
How Responsive Web Design Works
We’ve told you to get ready for RWD, and why it’s necessary. Now it’s time to explain how exactly it works. It’s two parts, really: You take a flexible foundation (everything is fluid, even images) and combine it with CSS3 media queries.
The
flexible foundation means that the design is built not on fixed sizes, but relative ones. This means you don’t define sizes in pixels; instead, you define them in relative units, such as percentages.
Now why would you want to do this? Well, if you set your website to 1080 pixels wide, it will look great on a desktop computer. But on a small phone screen text will be unreadable or only a small part of the width of the website will fit on the screen at once! Things get smashed up or resize in weird ways and visitors have to constantly pan and zoom to navigate the site. You can’t just take a wide design in which 6 elements sit side-by-side and tell it to fill 98% of a mobile phone’s screen. That’s where the next ingredient comes in.
Media queries are a highly supported feature of CSS3 in which your code asks the device displaying it what the size of its screen is. Styles defined for the corresponding browser width are then used instead of the default ones. The defined width where one style sheet switches to another is called a “breakpoint,” and you'll see them in your CSS file marked with the
@media selector. Let’s take a closer look.
Your responsive site might have three sets of styles: One set for screens that have a width larger than 900 pixels, one for screens with a width of 480-900 pixels, and one for screens 480 pixels wide and smaller. When your site is loaded, it asks the device for the width of its screen and then uses the appropriate styles. The combination of a flexible layout with a more focused style sheet is precisely what we call responsive web design.
It’s less complicated than it seems, but we know making your site responsive can be intimidating. That’s why we’ve already released website and form themes that do the work for you, and there’s more coming soon.
Responsive web design benefits both you and your visitors.
After reading everything else we’ve told you about responsive web design, you might be wondering: “So it makes my design look perfect. So what?”
It’s all about the message and content. The fact is, both desktop and mobile users visit your website because they are looking for something. What they’re looking for needs to be readable on the device they’re using. A squashed down, difficult to read and navigate site makes it harder to access the content and they might try their luck somewhere else (there are great stats in this which we will share with you soon).
Also, the content needs to be exactly the same if they, or people they shared the link with, browse your site from a different device. RWD solves this problem by delivering the exact same content but in a format that is ideal for their screen. They get the same text, pictures, videos, links, and everything else. No need to punish them for using a small screen!
Presenting the same content on smaller screen has some challenges, both from a technical and content perspective. We already summarized the technical challenges, but the content challenges boil down to solving questions like: What is the essential message I want to convey? What content do I need to support it? What is the best order in which to present the content?
You bring that content, we’ll help you overcome the technical challenges. And there’s a reward for you for taking the time to do all this. First, you only have to build and maintain one site instead of one for desktop computers and one for mobile devices. Secondly, both visitors and search engines appreciate well-structured unique content.
But the big fat added bonus here is that all your traffic, content, and inbound and internal links are tied to a single URL. Google and other search engines pick up on this and apply all these little positives to the same URL, resulting in much better search results. That’s called SEO, folks! And it’s just one more reason to go responsive.
The State of the Industry
Making responsive sites, forms, galleries, and emails might sound like hard work. But the payoff is completely worth it when you think about the better experience your visitors will have and the increase in your search result ranking. But how to pull it of?
The truth of the matter is, right now you need to rely heavily on hand-coding. The web is full of responsive testers, resizers, books, themes, frameworks, and blog posts. But there’s nothing out there that actually does it all for you.
Our web form software and photo albums are the exception. They’re currently the only tools that allow you to customize a responsive website component without coding. A framework, for example, will give you a code base to start with, but it will require some serious coding to mold it into a website. Themes make it a little easier, but they are also a bit less flexible.
So we’re hard at work building the tools to do just that. You can already create responsive websites using our editor themes, and responsive forms like this one using Web Form Builder:
For anyone who uses visual site builders, or codes by hand, or uses a content management system, our tools and guides will be right up your alley. Not only will we make it a breeze (like always) but we’ll make it fun, too (really!)
It’s going to take a bit more time for us to really crank out some quality stuff, though. Try not to get impatient! Just keep your eyes open for an incredible solution coming from us soon. Yep, sneak preview will be included—don't miss our new years eve announcement!
