Responsive Web Design & Content

Adapting Our Design

Perhaps it’s bad practice to distract my readers from this post, but here it goes:

Stop reading my post for a moment and look at the browser you’re reading this in. Resize your browser window. Make it narrow, wide, tall, short. Attack it from all directions.

What’s happening to my text and everything surrounding it? Look at the navigation bar and the images on the post.

That’s right – the page and its content are adapting, responding, to your reshaping of the window.

That is responsive web design: webpages which are aware of what device and screen size they are being viewed on and adapt appropriately to fit the screen. WordPress and its various blog layouts are responsive and

Our websites are doing their job of becoming smarter and adapting to mobile devices, which means we must be even smarter and adapt our content!

Webpage displaying on multiple devices

Adapting Our Content

The gist of my research on writing for a mobile audience is as follows: Keep it short and get to the point.

So, that’s what I’m going to do here. Check out this video that sums up some interesting statistics on web reading habits and tips on adapting your content to those findings:

Do you find you possess the same habits presented in the video? Are you skimming? Looking at headers and images rather than reading the content word-for-word left to right?

I’m going out on a limb here, but the answer is probably yes. We need to take these research findings seriously and make sure the design of our content caters to the viewing habits of our audience.

Gone are the days of long, lengthy paragraphs on the web. Today, it’s all about brevity – organized sections under concise headings, short paragraphs, bullets, images, etc

In the interest of brevity and practicing what I preach, I’ll end this post here. The nitty gritty summary of catering to a mobile learning audience:

  • Keep it short
  • Keep it organized
  • Lead with your most important information
  • Divide your content into sections with concise headings
  • Communicate via images

 

 

 

Advertisements

2 thoughts on “Responsive Web Design & Content

  1. msturtonstem says:

    I loved the directions you gave your audience! I actually followed along and adjusted my screen to be bigger and smaller and observed the changes. It was definitely powerful to see that in action and it made me want to keep reading about the topic of responsive web design.

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s