ShoutMeLoud – Shouters Who Inspire

Superlinks
≡ Menu

Responsive Design & Responsive Content – Creating The Perfect Alignment

Responsive Design & Responsive Content – Creating The Perfect Alignment

Responsive web design (RWD) – is it only for the devices? Well, a successful responsive web design derives from a carefully planned approach related to content. Content is the cornerstone of the web. It is the primary reason why people browse the internet. But unfortunately some of the websites do not put enough effort into getting their content strategy developed and actioned. It is not easy to produce a design without understanding the content and its structure that puts your site under the limelight that it deserves.

Rensponsive Content

Before RWD, web designer stuck to fixed layouts and containers that was a flexible grid system. Gradually the concept of adding tables and boxes came into the picture making it completely inflexible web pages. However, today, with the emphasis on producing something that has no fixed width and function on multiple devices, RWD is eventually heading towards contradicting its own goal. Designers need to refrain their mind and stop focusing on fixed width and start aiming at fluid elements. The static wireframe and pixel-perfect mock-ups for design is counter-productive to creating a good Responsive Design. Therefore, what do you need to know when developing content for a mobile-friendly website? Take a look at some of the critical elements:

How to develop responsive content for your responsive website?

Consider in terms of supporting actions:

Consider in terms of supporting actions

It is fair to ask yourself as what information users usually seek and what they hope to do on the site?

  • Are you offering the products and services they desire? Well, offer them a prominent product search box or a link to a list of services
  • Is the location given? Make sure that the address and a map is included
  • Have you given email and text alerts for special offers? Make the users sign up for email and text alerts for appointment or reservation. Links and widgets can connect people to serve these services.

And yes, of course, you can add images and attractive colours even on the smallest version of your site design as long as they load quickly, appear legible on screen and do not interfere with the user’s action. Visual design is made of typography, colour, shapes and imagery. These when used consistently throughout a design, the elements create a natural cohesive feel.

Step up to tablets:

Step up to tablets

Once your efficient and attractive site meets the requirement of Smartphone users, start deciding which content can be swap or added for the tablet users. The best part is you probably need not have to change the layout and the content to accommodate users of smaller tablets. However, for the larger tablets such as full-screen iPad you might need to use larger images and add content accordingly. In addition, consider adding video content that uses HTML5 because Adobe Flash video does not work on the majority of the mobile operating systems.

Recently, designers have started experimenting with a new mock-up that implicates content hierarchy rather than design layout. Here, numerical values are given to the elements of content that connect to where items will appear in stacked column layout. As a result, designs become less reserved and the content gets presented in the best way possible.

Think about the computer-users:

Think about the computer-users

When it comes to laptop and computer- users, providing richer content is no difficult task. Integrate brief history of your business, the value and advantages of your products and services and more photos and videos. Also, it is wise enough to tuck behind an ‘About us’ menu item rather than displayed on the home page.

Scale up to analytics and updates:

Analytics

It is completely an assumption as how visitors will use your site and what actually they do. Using web analytical tool such as Google Analytics on your site can help you to get a close attention to how mobile traffic differs from computer traffic and adapt the content you include. For instance, if you notice that most of the visitors are more interested in using your search box to find a certain kind of content on your site, you can think of adding corresponding items for that to the main menu. This in turn, minimizes the need for touchscreen typing.

You will find the mobile web traffic has increased considerably. Also by staying more focused on the users actions it will be easy for you to accurately track how your website help to build business.

Consolidated management:

Consolidated management

In order to achieve adaptive content, stop entering your content in many places. Rather than designing an email calendar, web calendar or printed calendar one at a time it is always better to put the idea into one system that automatically distribute it where it is supposed to go.

Smart relationship:

Smart relationship

You need smarter content that knows who it belongs to. If your content is smart enough, individual entries will automatically link back to a description and photo of the products and service they are searching for. This will further help the customers with the context necessary to understand what they are actually purchasing.

Structured texts and images:

Structured texts and images

Condensed content is the result of long sentence made short by the use of ellipses. Such an activity make the readers wonder what actually they are reading or why they should even bother. A short and meaningful sentence always ensures that the content is readable on both the web application and mobile. Similarly, if you force a large image to fit into a smaller screen, it will slow down the site and severely distort the image.

The content you create need to be flexible and adaptive to the ever changing web, only then can the customer receive better experience. Responsive design alone cannot solve everything; the content must be responsive as well.

This is a guest submission by William from Big Eye Deers. If you would like to submit a web-design related guest article, check our submission guidelines.

  • Author Bio

  • Latest Post

Article by William Johnson

William has written 9 articles.

If you like This post, you can follow ShoutMeLoud on Twitter. Subscribe to ShoutMeLoud feed via RSS or EMAIL to receive instant updates.


{ 0 comments… add one }

Leave a Comment