Communication Production ServicesMassachuse!s Institute of Technology

Interactive responsive wireframes:

Kickstart your content strategy!

Tom Pixton, Communications Specialist

Communication Production ServicesMassachusetts Institute of Technology

tpixton@mit.edu

@tpixton

Communication Production ServicesMassachuse!s Institute of Technology

What we’ll cover

Three techniques to help you or your site

owners raise awareness of content strategy

using html wireframes.

Communication Production ServicesMassachuse!s Institute of Technology

But first, some background...

Communication Production ServicesMassachuse!s Institute of Technology

Changes since 2000

Communication Production ServicesMassachuse!s Institute of Technology

Changes since 2000

1. Larger screen size and resolutions

Communication Production ServicesMassachuse!s Institute of Technology

Changes since 2000

1. Larger screen size and resolutions2. Faster network speed

Communication Production ServicesMassachuse!s Institute of Technology

Changes since 2000

1. Larger screen size and resolutions2. Faster network speed3. Accessible rich media (jquery, html5, css3)

Communication Production ServicesMassachuse!s Institute of Technology

Changes since 2000

1. Larger screen size and resolutions2. Faster network speed3. Accessible rich media (jquery, html5, css3)4. Wider range of channels on which to reach our

audiences

Communication Production ServicesMassachuse!s Institute of Technology

Changes since 2000

1. Larger screen size and resolutions2. Faster network speed3. Accessible rich media (jquery, html5, css3)4. Wider range of channels on which to reach our

audiences5. Web fonts

Communication Production ServicesMassachuse!s Institute of Technology

Changes since 2000

1. Larger screen size and resolutions2. Faster network speed3. Accessible rich media (jquery, html5, css3)4. Wider range of channels on which to reach our

audiences5. Web fonts6. Mobile web

Communication Production ServicesMassachuse!s Institute of Technology

What has not changed since 2000?

The challenge of advocating for the content.

A site’s content is its best asset. But it is usually the one asset that has the least allocated resources.

Communication Production ServicesMassachuse!s Institute of Technology

Content:

WritingImagesBlog postsRSS feedsSocial media channelsVideo

Content strategy:Pulling it all together...

Communication Production ServicesMassachuse!s Institute of Technology

“It’s an open secret in our daily work how often the challenges posed by content elude our collective talents and acumen.”Jeffery MacIntyre, “Content-tious Strategy”

http://alistapart.com/article/contenttiousstrategy

Communication Production ServicesMassachuse!s Institute of Technology

“But one step in the web development process is often skipped over or forgotten altogether: content planning.”

Kristin Wemmer,“Starting Out Organized: Website Content Planning The Right Way”

www.smashingmagazine.com/2010/03/17/starting-out-organized-website-content-planning-the-right-way/

Communication Production ServicesMassachuse!s Institute of Technology

“You design first, then plug in the content later, instead of designing from the content out.”

Jonathan Colman, “Why Our Content Sucks”

http://www.jonathoncolman.org/2013/02/24/why-our-content-sucks/

Communication Production ServicesMassachuse!s Institute of Technology

“Our content dialogue needs to engage the broader, nonspecialist community of content producers and consumers alike.”Jeffery MacIntyre, “Content-tious Strategy”

http://alistapart.com/article/contenttiousstrategy

Communication Production ServicesMassachuse!s Institute of Technology

Kristina Halversonhttp://contentstrategy.com/

Communication Production ServicesMassachuse!s Institute of Technology

So why is it often a challenge to advocate for the content?

1. Content needs to be appropriate for your intended audience.

2. Being concise and precise is still a craft.3. You may be overwhelmed addressing the needs

of your stakeholders.4. In a redesign, time and resources are scarce.5. You may not have been provided with adequate

resources to engage with the development of your content by the pros advising you...

Communication Production ServicesMassachuse!s Institute of Technology

Communication Production ServicesMassachuse!s Institute of Technology

$

$

$

$

�

Communication Production ServicesMassachuse!s Institute of Technology

Communication Production ServicesMassachuse!s Institute of Technology

��

� �

�

Communication Production ServicesMassachuse!s Institute of Technology

Communication Production ServicesMassachuse!s Institute of Technology

��

� ��

�

Communication Production ServicesMassachuse!s Institute of Technology

Research: audience and user profiles Schematics: information architecture

Visual design and identity

Communication Production ServicesMassachuse!s Institute of Technology

Communication Production ServicesMassachuse!s Institute of Technology

Communication Production ServicesMassachuse!s Institute of Technology

http://balsamiq.com

Communication Production ServicesMassachuse!s Institute of Technology

Communication Production ServicesMassachuse!s Institute of Technology

Giving you the opportunity to interact with your content structure early in the process in its native habitat (a web browser) raises your awareness of it.

Communication Production ServicesMassachuse!s Institute of Technology

“HTML wireframes are a smart way to demonstrate your plans to collaborators. It’s a great visual tool and very expressive.”Kristin Wemmer,“Starting Out Organized: Website Content Planning The Right Way”

www.smashingmagazine.com/2010/03/17/starting-out-organized-website-content-planning-the-right-way/

Communication Production ServicesMassachuse!s Institute of Technology

Ethan Marcottehttp://www.abookapart.com/products/responsive-web-design

Communication Production ServicesMassachuse!s Institute of Technology

Communication Production ServicesMassachuse!s Institute of Technology

Communication Production ServicesMassachuse!s Institute of Technology

http://www.axure.com

Communication Production ServicesMassachuse!s Institute of Technology

Communication Production ServicesMassachuse!s Institute of Technology

Giving you the opportunity to interact with your content early in the process on mobile devices facilitates your engagement with it (and gets you excited about it).

Communication Production ServicesMassachuse!s Institute of Technology

Steve Krughttp://www.sensible.com/dmmt.html

Communication Production ServicesMassachuse!s Institute of Technology

Communication Production ServicesMassachuse!s Institute of Technology

Communication Production ServicesMassachuse!s Institute of Technology

Andy Buddhttp://clearleft.com

Communication Production ServicesMassachuse!s Institute of Technology

Communication Production ServicesMassachuse!s Institute of Technology

Communication Production ServicesMassachuse!s Institute of Technology

Communication Production ServicesMassachuse!s Institute of Technology

“Guerilla usability testing ... helped us validate (and invalidate) critical assumptions at cheap cost and with rapid speed.”

“... guerilla usability testing opened our stakeholders’ eyes so that they challenged their own, innate assumptions about “the user.”

http://www.thoughtworks.com

Communication Production ServicesMassachuse!s Institute of Technology

Including you more fully in testing of your site contributes to your understanding of how your users interact with your content and raises awareness of content strategy.

Communication Production ServicesMassachuse!s Institute of Technology

Communication Production ServicesMassachuse!s Institute of Technology

Communication Production ServicesMassachuse!s Institute of Technology

Communication Production ServicesMassachuse!s Institute of Technology

Creating opportunities for you and your audiences to interact with your content in html wireframes:

1. raises your awareness of it;

2. provides further engagement on mobile devices;

3. contributes to a better understanding of content and content strategy through user testing.

A validated html wireframe also provides designers and developers with a concise model of the site and helps to align expectations with resources.

Communication Production ServicesMassachuse!s Institute of Technology

Communication Production ServicesMassachuse!s Institute of Technology

ResourcesKristina HalversonContent Strategy for the Webhttp://contentstrategy.com/

Ethan MarcotteResponsive Web Designhttp://www.abookapart.com/products/responsive-web-design

Steve KrugDon’t Make Me Thinkhttp://www.sensible.com/dmmt.html

Communication Production ServicesMassachuse!s Institute of Technology

Resources

http://www.smashingmagazine.com/

http://alistapart.com/

http://balsamiq.com/

http://www.axure.com/

Communication Production ServicesMassachuse!s Institute of Technology

Tom Pixton, Communications Specialist

tpixton@mit.edu

@tpixton

Communication Production ServicesMassachusetts Institute of Technology