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.”

How Would You Design a Content Management System?

Rendered Concept of a Digital Content Lifecycle.

By Cathy Hodson

What is a content management system (CMS)? According to Wikipedia, “A Content Management System (CMS) is a computer program that allows publishing, editing and modifying content as well as maintenance from a central interface. Such systems of content management provide procedures to manage workflow in a collaborative environment. These procedures can be manual steps or an automated cascade. CMSs have been available since the late 1990s.”

In other words, a CMS allows multiple content creators (frequently called “authors”), a managed workflow (approval process), and either automated or manual features.

I have experience with two content management systems: Ektron and SharePoint. They both have their advantages and disadvantages. I have also kicked the tires on other CMSs, and they too have the good, the bad and the ugly. Recently I asked the members of the Web Editors group, “If you could design/develop your own content management system, which features would be ‘must haves’?

Must Have Features
The responses were interesting. J.D. desired more project management features, “The CMS should know that nothing goes public until an assignment of copyright agreement has been executed.”

He also recommended staging features, workflow integration (“you should get a view of works in progress”) and annotation, in particular, fact checking and documenting the fact checking.

Barbara wanted “True WYSIWYG. Period.”

Ken wanted to “work on a system that has all the parts that were promised. Twice this week I’ve been told…’Oh, that’s scheduled for the next version.'”

Control
If you were designing your own content management system, which features would you want to include? For me, there are a few, and they have to do with control. Being able to control the style (rules and guidelines used for consistency across a website) within the CMS so authors not well versed in your company’s or your website’s style cannot stray from it. Another feature I’d like would be to have the HTML view of your content be color coded, such as in Dreamweaver. It makes it easier to pick things out when you’re looking for something rather than having everything in black type on a white background. In Dreamweaver, if there’s a problem in the code, the color coding stops where the problem is so you can find where the snarl is a little easier also. (If you’re colorblind, however, that may not be as effective.) It would also be nice to be able to use a global replace in the HTML view.

There are times when it seems that developers of content management systems don’t understand what a content editor or author does. They are not aware of the publishing process that a writer or editor goes through in order to add or maintain content on the website. This disconnect can be a major issue at times. For instance, when my company was going through its most recent redesign, we expressed our desire to the developers that, as all content funneled to me for approval, I needed to be able to see what had changed on each page. I needed a redlined version, in other words. Our company, at the time, had several thousands of web pages. There was no way I could possibly memorize each page and instantly recognized what an author had changed in an existing page when it came to me for approval. Because we have such a high volume of content, I didn’t have time to dig through everything on every page that was submitted to me to try and figure out what the author had changed. Had they deleted any paragraphs? Had they linked to something new? Was there an update to the photos? It would be helpful to see only what had changed so that I could review those changes and then send the page on its way to the website, or back to the author for more work. There was great puzzlement on the developers’ part, not understanding why this was so critical. We finally got across to them why it was so necessary, and were able to implement a customized tool that allowed me to see what an author had done to a page.

Gibberish code
About the time we were discussing this topic, I received an email newsletter, Fierce Content Management, and read the Editor’s Corner: “Content Management Systems drive me nuts!” by Ron Miller. I read with particular interest, “Last week for instance, I tried to drop in some code for the content marketing infographic we published. Typically, it’s like dropping in the code for embedding a YouTube video. You access the source code, paste the embed code, and presto, you have an infographic in your post. But lately our CMS has decided to spontaneously add gibberish to the infographic embed code making it virtually useless and forcing my co-worker, Emily Poe, to have the added work of dropping it in as an image instead.”

That hit home with me, as our CMS also will add gibberish when our authors copy and paste from a Microsoft Word file. Sensing a kindred spirit, I contacted Ron and asked him for his “must have” features. He sent the lists below:

Back End:

  • Make sure it supports multiple writers easily.
  • Make sure it’s easy to update the CMS. (WordPress is drop-dead easy).
  • Make sure you set up a good set of tags ahead of time.
  • Leave a place for the writer to include a one or two sentence excerpt and encourage writers to create this for you.
  • Make sure it’s easy to add alt text to your photos (very important for disabled community).
  • Make sure it’s easy to embed content like video and inforgraphics (easy access to HTML code)
  • Make sure it’s easy to add and edit photos. (visuals are really important in my view).
  • See if you can find a plug in for creating a weekly newsletter and linking it to a mailing list app like MailChimp.

Front End:

  • Accessible contact info.
  • Some sort of comment security like Disquus. Doesn’t prevent morons, but helps.
  • Prominent search box.
  • Resources like white papers and ebooks.
  • Include all your site’s social media info
  • Make it easy to subscribe
  • Make it drop-dead easy to share across all major social networks.
  • Easy to copy and paste text from outside sources and maintain style

None of the CMSs will be perfect. They all have their quirks, and web editors must find work-arounds and solutions we can live with. But it sure would be nice if we could design our own, or at least catch the ear of the developers and have them truly understand what our needs are. Anyone?

Next time: Editor vs. Programmer

Finding Free Images Through Image Search

by Alan Eggleston

Images (photos) can add impact to an article. They can add emotion. And they can add understanding. An article on a website or blog without an image may inform, may entertain, may even motivate, but it certainly won’t convey in the same way as one with an image. At least, a well thought-out image. For all those reasons, every editor should consider balancing the web page with text and an image.

Images add value to articles.

Photo: JoshArdle Photography by Creative Commons license.

Yet, one very good reason many websites and blogs don’t include images on their pages is cost. A good image can cost hundreds to thousands of dollars, well beyond the budgets of many small businesses and certainly beyond those of most bloggers. But using images doesn’t have to be expensive. I’ll show you how to find useful, meaningful images without the cost.

Some Images are Free

There are free image sites. Google the string “free images” and you’ll find them. Some are free to access the catalog but there is still a licensing fee to use any of the images. Some are free to access the catalog and use the images, but the quality isn’t always the greatest. Some you don’t find out whether the image is free until you locate the image and check the photographer’s licensing agreement.

Well, there’s a much better way to find free images.

I find my images by doing an image search on one of the major search engines. They all work a little differently, but all involve filtering the image search for creative commons license use when I do the keyword search. The easiest, by far, is with Bing. Google is second easiest. And Yahoo is the third, with the side benefit that it’s allied with Flickr.

Finding Free Images with Bing

To find an image to use for free using Bing:

  • Go to the Bing home page and click on the “IMAGES” main navigation tab.
  • In the search window, enter a keyword or keyword string for the image you want (example: “chains” or “chain link fence”). Hit the enter button or click the search icon.
  • Now in the gray top filtering bar, click “License” and in the drop-down list of choices click:

for commercial sites or blogs

    • “Free to share and use commercially” or
    • “Free to modify, share, and use commercially”

for non-commercial (personal) sites or blogs

    • “Free to share and use” or
    • “Free to modify, share, and use”

Bing cautions in their online help page, and it’s always wise to follow:

“When you find an image that you want, go to the originating website for the image and determine the actual license for the image. Next, go to the Creative Commons website and make sure you read and understand the license and its provisions, restrictions, and attribution requirements.”

Finding Free Images with Google

To find an image to use for free using Google:

  • Go to the Google home page and click on “Images” in the main navigation.
  • In the search window enter a keyword or keyword string for the image you want. Click the enter button or the search icon.
  • On the results page, click on the gear icon at the far right above the image display. In the drop-down list that appears, click on “Advanced search.”
  • At the bottom of the Advanced Image Search page, under “usage rights” (defaulted at “not filtered by license”) choose:

for commercial sites or blogs

    • “free to use or share, even commercially” or
    • “free to use, share or modify, even commercially”

for non-commercial (personal) sites or blogs

    • “free to use or share” or
    • “free to use share or modify”

Again, once you select an image, go to the image on its original website and verify the license language to make sure it is indeed free and that you understand what is required and allowed.

Updated: Google Chrome offers a plug-in for finding duplicate images, which may make it easier to find an image’s original owner and original licensing. Read about it here.

Finding Free Images with Yahoo

To find an image to use for free using Yahoo:

  • Go to the Yahoo Image Search page.
  • In the search window, enter your keyword or keyword string. Click the enter key or the search button.
  • When the image results page comes up, click on the double arrows “>>” in the upper left under the tabbed main navigation.
  • Now look at the new left hand navigation and click on the last item: “Labeled for Reuse.” That will filter the images for those that allow you to reuse them. Unfortunately, that’s as focused as the filtering goes.
  • When you find an image you like, go to the original image on the original website and see what the licensing requirements are.

Finding Free Images with Flickr

A photo storage service allied with Yahoo is Flickr. Each user gets a terabyte of storage for their photos and they can determine as they store their photos how they want to license them. You can search the site for photos and the ability to use them. Here is how:

  • Go to the Flickr home page (or access it through the Yahoo home page).
  • In the search window at the top right, enter your keyword search word or search string and hit the enter key or click the search icon.
  • On the image results page, beneath the search window at the top right, click on “Advanced Search.”
  • At the bottom of the Advanced Search page, click the box for “Only search within Creative Commons-licensed content” and if they apply, click also either or both:
    • Find content to use commercially
    • Find content to modify, adapt, or build upon
  • Click the “Search” button

Always verify that the image you want is free for use as filtered by going to the original image and reading the licensing restrictions and requirements.

Attribution

Often one of the restrictions listed with a creative commons license is the requirement that you attribute ownership of the image. It probably makes good sense whether or not they ask for attribution to give it, since you are using their work. I usually go one step further by linking the photographer’s name with their website. Often their work is on Flicker, allowing them to showcase their other works.

  • Here is what my photo attribution usually looks like:

Photo: Rusty Clark, creative commons license

(See it here.)

So don’t let cost be an excuse for not adding visual impact to your articles. You can afford “free!” – with a little image search and time.

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.

Redesign: Staging and Mapping Your Way to Success

By Cathy Hodson

You have a huge company website, and you have a matter of weeks to move content from your current site to your new site. How do you get a handle on how to move your content and figure out all the logistics involved? If your website has more than a hundred or so pages, or even thousands of pages, with all the associated documents and images, how do you get organized enough to know where your content is currently and how to get it to where it will be going on the new site?

By staging and mapping your content.

Staging your content
Staging is really prioritizing. What do you absolutely have to have on your new site when it launches? This is your first stage of content to be moved, before the launch, and the highest priority.

The second stage is the next level of content that – yes, it would be nice to have it on the site when you launch, but if it’s not, it will be the first content to go up after the launch.

The third stage is the final stage of content to be moved. Usually this consists of back issues of publications or content that could be considered “filling in” – background information, links to other resources, more of what you already have up, the finer details that fill in and embellish on what is already there.

What is mission-critical content? Mission critical defined: your business will suffer and your staff will have to scramble (in a bad way) to help your customers or members if this content is not on your website when you launch.

The actual timeline for all three stages depends on how quickly you need to have everything out of your current/old website. Usually all three stages should take about nine months to one year. To have all your content moved within six months of launch is a good benchmark.

Mapping your content
Once you have your content prioritized, you need to map it. Where does it reside on your site now? Where will it be moving to – most redesigned sites have also reorganized. So the content that might be listed under “Professional Development” on your current site might be split up among 2 or 3 different sections on your new site – Education, Continuing Education, Meetings. Somehow you have to note this for  someone who might not have detailed knowledge of your site (such as a temporary worker or consultant)  – where they would find the original content and where they need to put it on the new site.

The first website redesign I was a part of, the consultant that was building the website gave me a spreadsheet to use to map this process. It had columns for the new site location, the current site location, the status of the content (“testing,” “intro done”), a place for information about the content (such as “content needed” or “6 files, public side”), comments (“under construction” “is this the same as federal section on public side?”), and any changes (“name of section changed from X to Y”), and even a showing of which page(s) on the site link to each page or document listed. You can and should adjust the structure of your mapping document to whatever makes sense to you and your team. Is it better to list your content by the structure of the new site, or the structure from your current site? Up to you. Ask the people who will be moving the content which would make more sense to them? Or make an executive decision and decide for yourself which makes more sense.

Links
Something else that is helpful for content movers, especially if they are not part of your company’s staff, is to print out the pages on the current site, and mark up the page with notations for each of the links found on that page. Does this link go to a page on the same website (internal) or does it point to another company’s website (external site)? The internal site’s links may change, and that should  be noted – either on the page you printed or in the mapping document. If the page being linked to is from another department or division, and perhaps they have prioritized that page to be added at a different stage than when your page is going up, that should also be noted so the link can be added when the other department’s page goes up.

If it is an external site link – does it still work or does it need to be updated? If it no longer exists (or can’t be found), do you have instructions in place on what the content mover should do? Remove the link entirely, replace it with something else, or just leave it as is?

Once the plans for the staging and mapping have been completed, it gives you and your team parameters and guidelines for moving the content.

Content management systems
If you are keeping the same content management system, there may not be as much to do with mapping, prioritizing or moving content. It may be a matter of simply moving files across your system, adapting your content to a new page layout, or reclassifying the content. If you haven’t been using a content management system, but will be using one with the new website, you may pretty much have to reconstruct your pages – reformatting, linking to where new pages are, updating headline and other codes. You will have to do the same if you are changing content management systems.

Other considerations
Perhaps your URLs will change also. This is something that can be noted in the mapping document. A change of URL can be problematic – internally, for the sites that link to you, and for any links you publish on stationery or in publications – either those you print yourself or publications you submit materials to for articles or ads. Business cards may need to be updated, as well as signatures in email.

Any specialized domain names that point to deeper areas of your site may have to be repointed to the new location. For instance, our foundation has its own domain name, but it forwards to a deeper page within our association’s website. That location changed when we redesigned in 2011, and the DNS (domain name service) had to be updated to forward to the new location.

A successful redesign depends implicitly on how organized your team is, how much forethought and planning goes into the moving and launching processes, and nailing down the details. If you have never been part of a redesign before, choose your consultant carefully. You should hire a company that can walk you through the process and support you from both a development and an editorial standpoint. This is paramount to the success of the redesign. A redesign for a large website can take anywhere from one to three or four years, depending on how big your website is, what has to be done – a major overhaul of systems and the website, a simple reorganization and facelift, or anything in between.

Plan, prioritize and map. Iron out the details and make sure everyone understands what needs to be accomplished, when it needs to be accomplished by, and what the ramifications and consequences are if deadlines and project milestones are not met.

Website Redesign: Keep it Simple

How you reach the final design of a website is such an important part of the creation or redesign process, it cannot be overstated. So much rides on how your website looks, acts and feels to the visitor. The design or aesthetics is tightly tied into the functionality and structure of your site, and the three must really be tackled together and work together seamlessly.

The companies with the best websites have put a lot of thought into what they want to get out of their site. Sitting down to really think about what the company wants to accomplish (business reasons for the website), and having a plan for the site will be invaluable. What has been a challenge with the current site? Is the new design flexible enough to add new features without having to overhaul the entire site as the company moves forward? What do you really need from your website and how can you best attain that?

Let’s take a look at three key elements of a website design that can help any company attain its goals: structure, functionality, and aesthetics.

Structure
There is the classification of your content (taxonomy), and then the physical structuring of your content. Which sections can you group together in the menu? Are there clearly delineated categories and subcategories? Which should be publicly available and which should be restricted (member) content? The content of your menus and the placement of your navigation is extremely important, and needs to be discussed at an early stage. The whole development of your website hinges on how your site will be set up.

Do you want your navigation to be across the top of the page, which would then free up the left side of your content area – either for sub-navigation or more content? Or should your navigation stick to the left or right sides and either expand below each category via more choices or in a dropdown or flyout menu? There is even footer navigation, which is generally used as a global (entire site) navigation. Which of these is right for your site’s content?

Some structural considerations:

  • Navigation placement
  • Log in placement – is it easy to find where your audience needs to log in?
  • Logo and branding – is your website identifiable with your company? Is the logo presented with enough emphasis or is it unclear who the site belongs to? (Hint: size matters.)
  • Search – is it easy to find where the search field is? Does the website’s search engine return the expected results?
  • Social media presence – do you use social media icons to link to your respective accounts, or would you have your social media feeds represented right on the homepage?
  • Real estate. Homepage real estate is at a premium – which content is a must have versus a nice to have?
  • Advertisement placement – are there advantageous places to put advertising on the homepage or internal pages without compromising your content areas yet still please the advertiser?

Functionality
While it is easy to get caught up in new colors, fonts and a pleasing design, it is imperative that web editors keep an eye out so that a website’s design or redesign is not prohibitive to the functionality. Can your audience find what it needs to? Is the navigation intuitive? If you have to explain your navigation, back to the drawing board! If you click on something, do you get what you expect or is it unclear on where you need to go? Are the labels for the navigation buttons clear or vague?

Keep it simple. This is the best advice anyone will ever give you for website design or redesign. Just as you would not put up obstacles in front of your company’s business so that people could not reach the actual building and services inside, so too you must provide clear and easy access to your website’s information and content. On the other hand, your company’s expertise must be available, but not overpowering to what the customer is looking for. What questions does your audience come to your website to find answers for? These answers should be readily discoverable.

How do you know if your audience can find what it needs? Having your audience help you test your website pre-launch can be invaluable. After all, they are the people who will be using your site. Can they find what they are expecting to find? Here are two great articles on that topic:

Aesthetics
Are the colors, fonts and overall design pleasing aesthetically to you and your audience? Stay away from blinking icons or annoying colors that are hard to read against the background colors. Is there enough contrast between body text and the background – consider the color blind or visually challenged. Does the color scheme enhance the navigation (are the navigation buttons all the same color? Does content that should be grouped together “hang” together visually?)?

Look at the design critically – what stands out in a good way? What stands out like a sore thumb? Leave enough time in your design process to refine features. Does text slam up against your images or graphics? Or is there some “white space” between images and text? Is the design easy to look at or do people squint or grimace when they see it? Is your content cluttering your pages or is it neatly organized and easy to digest?

The Best Site for All
Keeping these three elements at the forefront of your website design or redesign process will help you make your site the best it can be. Finding the right balance and making these elements work together cohesively will only serve you and your customers better. Keep it simple!

How Do You Better Serve Colour Blind Readers?

Page graphic from Luke McGrath "Using colour on your website" article.

Luke McGrath article, “Using colour on your website.”

How do your readers see colour on your website?

According to Web Editors Group member Luke McGrath, “…somewhere around 5% of your male customers will struggle with your website if you don’t use colour correctly” because they deal with some amount of colour blindness. Then McGrath goes on to tell you how to supplement your use of colour to better serve that audience.

Learn about colour and making it work for all of your readers in “Using colour on your website,” a valuable read for all webeditors.