How to create Content for Responsive Websites

Today more than 1 billion Internet users are mobile. If you own a website you can be pretty sure some of them will be reading your content. Is your website and content ready to give them a great experience?

Recent statistics show that close to 9% of internet users are using mobile devices, and over the last year this number almost doubled. Just imagine where we will be in a year or two and where the lack of a sound mobile strategy could lead a company to.

The arrival of mobile apps and websites introduces challenges for most IT departments - keeping up with security requirements and procedures, mastering the new development methodologies and standards, understanding new test requirements and mobile application life cycles can be quite demanding.

On the business and marketing side there are serious hurdles to overcome as well. I noted that Sarah B asked for advice on responsive content planning in a comment on my article "How to Approach Mobile and Responsive Web Design part 1". I guess others may also wonder how to create future proof mobile friendly content and avoid double maintenance of all content. Considering the content aspects of mobile apps and responsive websites opens up for quite a few vital questions. I don't have all the answers, but I'll do my best to ignite the discussion and share knowledge here on LinkedIn.

Creating mobile versions of large and complex websites is not a walk in the park, and I believe it requires careful planning on different levels. Some SMBs however are successfully using responsive WordPress themes to quickly setting up a mobile friendly website.

• Information Architecture: goals, guiding principles etc.
• Content structure: what content to include in the structure as the website adapts to various devices and view posts
• Page layouts: what content elements to include and in what order for various responsive stages
• Content elements: optimizing for mobile users

Information Architecture

Creating a solid and sustainable online presence requires goals, direction and guiding principles. This not only applies to mobile versions of websites of course. Unfortunately, Information architecture (IA) is an often overlooked area of website design and management. IA for websites is related but should not be confused with the IA methodologies used in enterprise architecture and system design.

Every website need to have clear and well-defined goals, whether it is to support a good cause, sell products or provide news and entertainment. Without this, development of an IA is as good as impossible and so is creating a great user experience.

Developing an IA for websites is equivalent to building a foundation, in this process it helps to set the quality standards first, - the principles for what is published on the site, when, where and by whom. This way the IA is enforcing consistency. I think Cameron Chapman did a great job in this article on SixRevisions: Information Architecture 101: Techniques and Best Practices. It offers useful advice on how to get started creating an IA. Ben Hurt also gives a good introduction to IA models in his article Web Site Information Architecture models, and it provides examples of typical use cases and IA patterns.

fig. 1 - IA patterns

Besides working with IA partterns it is worth considering establishing the following editorial processes.

Planning content: Last minute content works well for news websites. On other types of websites it often results in low quality and limited support of the overall goals. Being a step ahead gives proper time for research, peer reviews, checking references and ensuring the content is well aligned to the overall strategy.

Developing content: How content is developed depends on organization and team sizes and the approval processes. However, having simple guidelines in place helps communicating in a single voice (if needed) and provides consistency. Finally, more eyes and views on issues, solutions etc. gives more depth and often generates more value - so work with others, reach out, use trustworthy data and resources.

Marketing content: Have a clear plan on how to give new content a good start. This includes pushing it to social channels, adding internal references in existing relevant content, informing partners and main subscribers etc.

Maintaining content: Outdated content is bad content, also for mobile internet users. The need for refreshing is highly dependent on the type of content. However, having editorial calendars in place to keep content fresh and relevant, is recommended in most cases and a must for large complex websites.

Content structure

Is a mobile version of a website expected to contain exactly the same content? In most cases, this is not the case, and while traditional websites often could benefit from a serious spring-cleaning, it is even more important for mobile versions. Navigating a mobile website on a small phone is harder and there is a higher risk that user get lost. Therefore, it makes sense to get rid of everything that is not serving a specific and well know business target.

One way to tackle the complexity and find the golden content nuggets is to map your content to various goals.

I really like how James Deer introduce this technique in his article on SixRevisions "How to Create Content Maps for Planning Your Website’s Content". The article does not directly take mobile versions of websites into consideration, but applying it to different versions of the site will help filtering less important pages out.

fig. 2 - mapping content to goals

Eventually this will lead to providing different page structures to users depending on the device they use. It is important that users are not confused about the differences, and that important content is easily available. I added an extremely simplified illustration of this below.

fig. 3 - different page structures for groups of devices

Keep in mind that it is hard to plan everything right on a logical level without collecting user feedback and analyzing users behavior. Ongoing improvement is possible and often worth the investment.

Page layouts

Develop a clear plan for how content blocks are ordered on your pages for each of the view ports the website need to be optimized for. This helps always putting the most important content in front of the visitor even on the smallest devices. In responsive layouts it even makes sense leaving out content elements to give space and highlight whatever is important to the mobile internet user.

Responsive web design patterns represent various layout possibilities and how they adapt to changes in view ports. Some patterns describe entire pages while others focus on page elements like e.g. a set of columns. Use the patterns for identifying responsive layouts you can use for specific types of content. Here is a few examples:

Column Drop (typical 3 column website layout). Note that the main content area [1] is moved to the top location as the view port gets smaller.

fig. 4 - responsive pattern column drop

4 equal-width columns (typical 4 column front page or portfolio layout). In this pattern Content that becomes 2 equal columns for medium screens, then 4 equal columns when space allows

fig. 5 - responsive pattern 4 equal-width columns

Responsive design patterns are also great for developing a common language between business and IT (or said differently - between people responsible for content development and web page/template implementation).

Content elements

What is mobile friendly content? I don't believe there is a single answer to this question. With a well-implemented responsive layout, it is possible to reuse the entire content unchanged across all devices and view ports. This is great for keeping cost and maintenance at a minimum, but for mobile users, the experience is unlikely to be optimal in all cases.

fig. 6 example of endless scrolling problem with responsive layouts

We know from traditional website optimization that placing important content above the fold (the area visible without scrolling) is critical for good bounce rates [f1] and conversion rates [f2]. On small mobile devices, this area is tiny why large and badly structured content worst case means endless scrolling.

Let me share a few tips on creating mobile friendly content:

• Make writing shorter and more concise text a goal. Set the context, define the problem and deliver the solution/conclusion. Leave out the rest...
• Use a short excerpt to set expectations and generate interest for the rest of the page.
• Break up long pages into sub pages with easy navigation.
• Use fewer images and carefully compress and resize for optimal download speed
• Use more links in your content to help users find relevant resources - navigation using menus on mobile devices is generally not optimal.
• Measure what works using real user data and actions is key to you success online. This is especially true when moving into new areas. A/B testing has been used for improving conversion rates of e.g. sales pages for quite some time and also works well to optimize responsive layouts. Basically it is about sending different versions of a page to users and then collecting data on what version is most effective to achieve a certain goal.

[f1] "bounce rate" represents the percentage of visitors who enter the site and "bounce" (leave the site) rather than continue viewing other pages within the same site

[f2] "conversion rate" is the ratio of visitors who convert content views or website visits into desired actions like subscribing to mail lists, purchasing products

What does mobile friendly content mean to you? Did I miss any important tips here?

Missed my first article on LinkedIn?

In my recent and related article I covered some of the fundamental challenges web designers face when clients require mobile versions of their websites. Make sure you check this article our and don't be chary with your likes and comments. You may also benefit from following my web design blog www.tripwiremagazine.com