Kickstart your content stratgey with html wireframes

Interactive responsive wireframes:
Kickstart your content strategy!
Tom Pixton, Communications Specialist
Communication Production Services
Massachusetts Institute of Technology

tpixton@mit.edu
@tpixton



What we’ll cover
Three techniques to help you or your site
owners raise awareness of content strategy
using html wireframes.



But ﬁrst, some background...



Changes since 2000



Changes since 2000
1. Larger screen size and resolutions



Changes since 2000
2. Faster network speed



Changes since 2000
3. Accessible rich media (jquery, html5, css3)



Changes since 2000
4. Wider range of channels on which to reach our
audiences



Changes since 2000
audiences
5. Web fonts



Changes since 2000
audiences
5. Web fonts
6. Mobile web



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.



Content:
Writing
Images
Blog posts
RSS feeds
Social media channels
Video
Content strategy:
Pulling it all together...



“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



“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-websitecontent-planning-the-right-way/



“You design ﬁrst, 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/



“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



Kristina Halverson
http://contentstrategy.com/


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



$

$
$

$


Research: audience and user proﬁles

Visual design and identity

Schematics: information architecture


http://balsamiq.com


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.



“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-websitecontent-planning-the-right-way/



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


http://www.axure.com


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



Steve Krug
http://www.sensible.com/dmmt.html


Andy Budd
http://clearleft.com


“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



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.



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.



Resources
Kristina Halverson
Content Strategy for the Web
http://contentstrategy.com/

Ethan Marcotte
Responsive Web Design
http://www.abookapart.com/products/
responsive-web-design

Steve Krug
Don’t Make Me Think
http://www.sensible.com/dmmt.html



Resources
http://balsamiq.com/

http://www.axure.com/

http://www.smashingmagazine.com/

http://alistapart.com/



Tom Pixton, Communications Specialist
tpixton@mit.edu
@tpixton



Kickstart your content stratgey with html wireframes

Recommended

Recommended

More Related Content

Recently uploaded

Recently uploaded (20)

Featured

Featured (20)

Kickstart your content stratgey with html wireframes