If there were a technology that was strongly endorsed by Google and other search engines, that could effectively eliminate the need for separate mobile sites, and that could help standardize how content is delivered on the Internet, then you’d probably want to know a lot about it right? As content marketers, you’d think this would be pretty important for our clients and employers.
Well, the world of the web is about to undergo some major technological changes, and at the forefront for content marketers is responsive web design (RWD). You may have shrugged this off as a buzzword to be ignored, but you’re going to keep hearing it — RWD is here to stay. So get on board, or get left behind.
Don’t worry! As a content marketer, you don’t need to learn (or re-learn) all the ins and outs of web design and development when it comes to working on a responsive web. But you should be aware of what RWD means and how it applies to your content marketing responsibilities. Giovanni Calabro has written a wonderful article about deciding whether RWD is right for your content marketing strategy, so this article will focus on providing you with a fundamental understanding of the technical concepts involved, so you can make informed content decisions when it comes to the responsive design considerations that you will likely soon be faced with.
What is responsive web design?
At its simplest, a responsive website adapts to the screen size of the visitor. It doesn’t matter if the site visitor is using a Mac, a PC, a tiny mobile device, or a massive wide-screen; Windows, OSX, or Linux — responsive websites are device agnostic. This is an incredibly simplistic characterization, but it’s really all you need as a foundation for learning how RWD will affect you as a content marketer.
Cascading style sheets — or CSS — are the driving force behind responsive web design. If you’ve ever worked with content for a mobile site, you may have observed that the sites use JavaScript or other technologies to redirect mobile users to a mobile-specific version. Responsive websites do away with multiple versions of a site and allow the same content to simply be reformatted automatically, based upon the screen size of the site visitor.
But responsive web design can go far beyond adapting to screen sizes. For example, the site can display a sans serif font when on a browser screen but when printed it will display a serif font. So don’t get too narrow in your understanding of RWD. In the context of content marketing, the primary principle is that responsive design can create a whole host of opportunities for a site to adapt to the visitor’s viewing device.
If you’re going to talk to the techies down in the IT group about RWD, you may have to use a different term: media queries. This is the technical term for the technology and standards used to make responsive web design work on the internet. For your purposes, media queries are part of CSS standards.
Examples of responsive websites
To illustrate the concepts involved in RWD, take a look at these website examples that have been built in this manner:
HINT: You don’t have to view a site in a mobile browser to see responsive web technology in action. Just change the screen width of your browser — the thinner the window size, the bigger the change you should see.
Starbucks
Make your browser window as skinny as you want and you’ll notice how the page automatically adapts to your screen size. Images change size and the layout morphs and moves to keep the main headline the primary point of focus. Also notice how the menu collapses, giving more room for content.
The Sweet Hat Club
On the lighter side of humor but heavy on the graphics, The Sweet Hat Club makes use of RWD as well. Notice that when you reduce the width of your browser window, the images move around and adjust their size to remain in the same proportion. Even the menus adapt, keeping the main content the primary element to which visitors are exposed.
There are tens of thousands of responsive websites you can view, but these are just two examples to show you the technology in action.
Why the responsive web matters to content marketers
This is the new way of the web. You won’t have to manage multiple versions of your site in most cases. Responsive web design means you can write your content and publish once. No more keeping up with a mobile version of a site.
You may also start to hear the concepts of responsive web being thrown around, and you’ll be in a much stronger position within your respective organization if you understand how and why the technology works. Nobody wants to be the person in the room that doesn’t know what’s going on. Don’t be that guy/gal.
While this may not matter to you now, it’s important to know that responsive web is currently a global standard adopted by W3C (the keeper of web standards) and Google (the keeper of our jobs). So don’t discount how critical understanding and applying RWD is going to become as we move forward.
What to expect
The emergence of the responsive web means you, as a content marketer, are going to need to learn some important new standards. Mostly this has to do with meta-content — the extra information that gets published with an article, like author name, original source, and date of publication, to name a few. While content is going to be more important than ever, those who know the details behind the technology will thrive.
Expect more sites to look like a content management system (CMS), such as WordPress or Drupal. These systems will automatically standardize how content will be published, ensuring that everything works right every time. So if you’re not familiar with a CMS, go grab a free blog on WordPress.com or Tumblr and start learning now.
Not to be a fear-monger, but RWD will make content management easier, requiring fewer staff to produce mobile and standard format content. If your clients have needed separate mobile content in the past, RWD is going to effectively eliminate the need for additional content generation. So you may find that organizations eliminate some positions, although this will likely be in the IT group, where the mobile site developers sit.
Problems with RWD
The current elephant in the room for RWD is how to handle images. Remember that a responsive web takes the same content that should display on a wide screen and reformats it to work on a tiny screen like an iPhone. So your content should always include high-resolution images in order for your graphics to look good on big screens as well as smaller screens.
This is relevant to content marketers because we are regularly called upon to supply images with our content. Just make sure you know the maximum size of images that you will display on your site and make this size your minimum.
The techie folks are still working on ways to deliver large images to small devices without using up all that unnecessary bandwidth, but that won’t matter to content marketers as much — we should still provide the maximum image size the site will display. If you want to keep track of solutions being proposed to this issue, W3.org has a group working on different approaches: check out the Responsive Images Community Group.
Responsive vs. adaptive design
If you’re around technical discussions about RWD too long, you might start hearing the term “adaptive” design thrown around. In some circles, adaptive design is just a synonym for responsive design. But there are some web developers who use adaptive to refer to design considerations that go beyond HTML and CSS. RWD needs nothing but the basics to function, while adaptive design might use technologies like JavaScript to create special typography effects, for example. In such a case, if the user’s browser doesn’t support JavaScript, then the site gracefully downgrades without sacrificing the experience.
So don’t get too worried if the adaptive term is used instead of responsive — most of the concepts are identical. The site may just have some additional bells and whistles if it’s adaptive rather than responsive.
Resources for continued learning
For those who want to take RWD concepts to another level, I highly recommend that you start by looking at some of these sites and resources.
W3.org: The source for the actual standards behind responsive web. The official technical term for responsive web technology is media queries and W3.org maintains the standards on their site: Media Queries.
Google: The search engine that drives most of our content marketing budgets HIGHLY recommends RWD and actively encourages the framework: Building Smartphone-Optimized Websites.
Template Monster: Since RWD is a framework and templates are a great way to take advantage of RWD, this group put together a fantastic, interactive infographic to teach basic responsive web design concepts: Responsive Web Design Interactive Infographic.
What is Responsive and Adaptive Web Design?: A short article explaining RWD and progressive enhancements.
Want more content marketing inspiration? Download our ultimate eBook with 100 content marketing examples.
コメント