Home-grown html wireframes can be quickly built to offer proof of concept in the eraly stages of working out an IA with a client, and helps get them thinking about their content strategy.
Kickstart your content stratgey with html wireframes
1. Interactive responsive wireframes:
Kickstart your content strategy!
Tom Pixton, Communications Specialist
Communication Production Services
Massachusetts Institute of Technology
tpixton@mit.edu
@tpixton
Massachusetts Institute of Technology
Communication Production Services
2. What we’ll cover
Three techniques to help you or your site
owners raise awareness of content strategy
using html wireframes.
Massachusetts Institute of Technology
Communication Production Services
3. But first, some background...
Massachusetts Institute of Technology
Communication Production Services
5. Changes since 2000
1. Larger screen size and resolutions
Massachusetts Institute of Technology
Communication Production Services
6. Changes since 2000
1. Larger screen size and resolutions
2. Faster network speed
Massachusetts Institute of Technology
Communication Production Services
7. Changes since 2000
1. Larger screen size and resolutions
2. Faster network speed
3. Accessible rich media (jquery, html5, css3)
Massachusetts Institute of Technology
Communication Production Services
8. Changes since 2000
1. Larger screen size and resolutions
2. Faster network speed
3. Accessible rich media (jquery, html5, css3)
4. Wider range of channels on which to reach our
audiences
Massachusetts Institute of Technology
Communication Production Services
9. Changes since 2000
1. Larger screen size and resolutions
2. Faster network speed
3. Accessible rich media (jquery, html5, css3)
4. Wider range of channels on which to reach our
audiences
5. Web fonts
Massachusetts Institute of Technology
Communication Production Services
10. Changes since 2000
1. Larger screen size and resolutions
2. Faster network speed
3. Accessible rich media (jquery, html5, css3)
4. Wider range of channels on which to reach our
audiences
5. Web fonts
6. Mobile web
Massachusetts Institute of Technology
Communication Production Services
11. 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.
Massachusetts Institute of Technology
Communication Production Services
13. “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
Massachusetts Institute of Technology
Communication Production Services
14. “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/
Massachusetts Institute of Technology
Communication Production Services
15. “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/
Massachusetts Institute of Technology
Communication Production Services
16. “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
Massachusetts Institute of Technology
Communication Production Services
18. 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...
Massachusetts Institute of Technology
Communication Production Services
25. Research: audience and user profiles
Visual design and identity
Massachusetts Institute of Technology
Schematics: information architecture
Communication Production Services
30. 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.
Massachusetts Institute of Technology
Communication Production Services
31. “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/
Massachusetts Institute of Technology
Communication Production Services
37. 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).
Massachusetts Institute of Technology
Communication Production Services
45. “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
Massachusetts Institute of Technology
Communication Production Services
46. 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.
Massachusetts Institute of Technology
Communication Production Services
50. 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.
Massachusetts Institute of Technology
Communication Production Services
52. 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
Massachusetts Institute of Technology
Communication Production Services
54. Tom Pixton, Communications Specialist
tpixton@mit.edu
@tpixton
Communication Production Services
Massachusetts Institute of Technology
Massachusetts Institute of Technology
Communication Production Services