Content Planning for and Launching a Responsive Site: An Editor’s Perspective

By Jennifer Ford

Launching a new website presents a host of concerns. First, what kind of site does your audience need? Is it a store? Is it a blog with regularly published news? The most important consideration is your intended audience and researching what they need and trying to create it.

As a web editor for a healthcare publisher, I was tasked with launching a new web-based clinical journal for healthcare providers. Because I have done my research I know that my intended audience is using tablets and mobile devices as much if not more than a desktop, and more than the general public. So, I knew from the start I wanted this new site to be responsive. One consideration you need to make when planning for a responsive site is keeping the site design simple because website elements shift and reform as the size of the screen decreases. You don’t want a lot of drop-down menus and you don’t want users to have to click more than a couple of times to get to where they want to go. Another thing to remember is that as the display of your site shrinks to fit the size of the screen that displays it, certain items may “disappear,” like images or ads.

Starting from scratch, I wrote a business plan for my publisher that detailed my reasoning and a structure for the new responsive site. Here I’ll share some of the resources I used to create the plan.

First, I went to fellow Web Editors contributor Gazalla Gaya’s site, “Web Content Blog.” In one very helpful post, Gazalla details some tips for planning a site launch using a content map. The resource she suggested for creating a content map is the slideshare presentation on web content strategy by  from Content Marketing Institute. To build a content map, identify the goals of the owner of the site and the goals of the readers, and prioritize your content based on this. My plan described my mission statement, my audience, the goals of my readers, the goals of our business. It was helpful to see the way reader and publisher goals overlapped or didn’t when I built the content goal map.

Website wireframe built with Google Drawings.

Website wireframe built with Google Drawings.

Then I used the content map to create a wireframe of the site that showed the menus and essential areas of the site. I presented it to our artists and e-media team and they were able to translate it into a responsive site design. It took a lot of guesswork out of what should go where on the site and helped make my reasoning clear to everyone involved. I also was able to plan for a lightweight site design with a limited number of menu items and site areas that would easily resize to various screen sizes and form factors. The web and design team created mockups of several different screen size displays and we made tweaks based on them. We launched the site in September and have already had great feedback from readers.

If you take just one thing away from this, it should be this: When planning a site launch, do research about your audience and be deliberate in creating a site plan that is tailored to their needs. And giving readers compelling content will give you the added bonus of appealing to the Google Hummingbird algorithm, which, to steal a page from a Website Magazine webinar on SEO, values content that “delights humans.”

Advertisements

Do It Well: Addressing the Mobile Market

By Cathy Hodson

In a recent webinar on Responsive, Adaptive and Progressive website design that I sat in on, Bill Cava, the “chief evangelist” of Ektron, said that the proliferation of mobile devices is disrupting many businesses. He gave the examples of the newspaper business, which has traditionally been a print business but is and has been transitioning toward delivery of online and mobile content; and cameras – why would anyone want a standalone camera any more when you can snap an arguably good photo with your phone? Professional photographers might disagree with that, but Cava went on to say that it is predicted that there will be one BILLION smartphones in the world by 2016. If our heads haven’t already exploded from information overload, that is.

The mobile invasion
If you haven’t begun looking at how to address the mobile device market with your website and communication plans, you need to. According to a recent Pew Research study on smartphones, 56 percent of American adults now own a smartphone of some kind, with Android and iPhone owners accounting for half of the cell phone user population. In another recent Pew study on tablet usage, the researchers found that tablet adoption has almost doubled over the past year. “For the first time, a third (34 percent) of American adults now own a tablet computer, including almost half (49 percent) of those in their later thirties and early forties and a majority (56 percent) of those in higher income households.”

There are still hold outs. Maybe you know some of them. According to Pew, one third (35 percent) have some other kind of cell phone that is not a smartphone, and the remaining nine percent of Americans do not own a cell phone at all. So some people do still have a life.

Pew goes on to say that “ownership is particularly high among younger adults, especially those in their twenties and thirties (although a majority of Americans in their mid-forties through mid-fifties are now smartphone adopters).” Eighteen percent of Americans age 65 and older now own a smartphone, compared with 13 percent in February 2012.

Tablets Skew A Little Older
Tablets, on the other hand, also according to Pew Internet Research, skew a little older than the smartphone market. “Unlike smartphones, which are most popular with younger adults ages 18-34, we see the highest rates of tablet ownership among adults in their late thirties and early forties. In fact, almost half (49 percent) of adults ages 35-44 now own a tablet computer, significantly more than any other age group. Adults ages 65 and older, on the other hand, are less likely to own a tablet (18 percent) than younger age groups.”

How much mobiletraffic?
For my company, a nursing association, mobile traffic now accounts for 20 percent of the traffic that comes to our website. We implemented responsive design across our website in May, and we are looking forward to seeing how this helps our traffic numbers, particularly during our Annual Meeting in August.

Mobile design is a challenge for everyone involved in delivering content. Responsive design is one solution – one website catering to many devices. There are other solutions out there, and it is up to each company to decide what is best for their needs. If your company has not begun to consider addressing the mobile market, I suggest you get moving. The Information Superhighway continues to move at the speed of light. Don’t get left behind.

Responsive Design: Optimizing Web Content to Device Screens

Remember mainframe computers? Desktop computers? How quickly times change. Now people are accessing the Internet via PCs, laptops, tablets, smartphones, and coming up rather quickly now – glasses and watches. Who knows what is on the horizon? In other words, more challenges to presenting our content in a meaningful way will continue to be developed. We are in another tumultuous time for keeping pace with a rapidly evolving environment, and how we respond to this challenging environment can be very tricky.

A new report from Pew Research Center, “Teens and Technology 2013” states that “Smartphone adoption among teens has increased substantially and mobile access to the internet is pervasive. One in four teens are ‘cell-mostly’ internet users, who say they mostly go online using their phone.” Adults aren’t quite there yet, only 15 percent of adults are ‘cell mostly.’

Even with the proliferation of cell phones, and the multitude of other devices with which you can access a website, it’s a wonder most servers haven’t exploded in trying to please each device’s screen (or the screen’s owner). We in the web business tend to be eager-to-please people. We want you to have the best experience you can have on our website, no matter which device you use to view our website, and even if it keeps us awake at night trying to figure out just how to do that.

So how do you serve up your content to adapt to those very different sizes of screens? If you have ever tried to go to a “full” website (PC version) on your smartphone, you know how tiny the text can look, and you have to scroll left and right, or pinch or expand the page to be able to read or click on something. Mobile versions of websites can be equally annoying because they are laid out differently, can lack certain features that are available on traditional websites, and may not feature the full content of the website. Usually they have an escape route that will take you back to the full website, but then you are back to scrolling, pinching and expanding.

You have probably heard of HTML 5. It is also known as “responsive web design” or “responsive design.” It is a website design that enables a server to respond to the particular device you are using to view the website and serve up your content in the most optimal fashion. If you want to try out an example of a website built with HTML 5, check out www.boston.com, home of the Boston Globe newspaper. Depending on which device you access the site with will determine what you see. It responds to the device, the size of your browser (you can minimize or maximize your window) and even the orientation. If you are exploring what to do with advertising locations on your web pages in such an environment, you can see that there also.

Flexible construction, coding and design make for content that can be presented to all types of devices. This makes more sense than creating various websites (and duplicating efforts) for various devices. It is not without its challenges, though.

  • If you still use tables to present and contain data, their rigid structure can be prohibitive to “flexible” page construction. Deconstructing the data and presenting it in a text format can be cumbersome and not as easily digestible, especially in this age of readers who scan pages. Presenting it in a Word document or PDF via a link on the page requires someone to click on a link to get information that is normally presented within the body of the content.
  • Wide images can also challenge a smaller screen’s width. Some solutions include creating smaller images for smaller screens, or to hide the image when a smaller screen accesses it.
  • Advertising, with its premium locations “above the fold” (or viewable in the first screen) can sometimes be sacrificed to a floating position at the bottom of a phone screen, or shoved to the bottom of a tablet’s page – not really an ideal location for someone paying to be seen.

How web content is displayed will continue to evolve. For more reading about Responsive Design, check out the following stories. Feel free to list your favorite resources in the comments.