Kickstart your content stratgey with html wireframes

Communication Production ServicesMassachuse!s Institute of Technology

Interactive responsive wireframes:

Kickstart your content strategy!

Tom Pixton, Communications Specialist

Communication Production ServicesMassachusetts Institute of Technology

[email protected]

@tpixton

mailto:[email protected]



What we’ll cover

Three techniques to help you or your site

owners raise awareness of content strategy

using html wireframes.


But first, some background...


Changes since 2000


Changes since 2000

1. Larger screen size and resolutions


Changes since 2000

1. Larger screen size and resolutions2. Faster network speed


Changes since 2000

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


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


Changes since 2000


audiences5. Web fonts


Changes since 2000


audiences5. Web fonts6. 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:

WritingImagesBlog postsRSS feedsSocial media channelsVideo

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

http://alistapart.com/author/jeffmacintyre



“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/

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







“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/






“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 Halversonhttp://contentstrategy.com/

http://contentstrategy.com/reviews.html





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 profiles Schematics: information architecture

Visual design and identity


http://balsamiq.com

http://balsamiq.com

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-website-content-planning-the-right-way/








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

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 Krughttp://www.sensible.com/dmmt.html

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





Andy Buddhttp://clearleft.com

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.


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






















Resources

http://www.smashingmagazine.com/

http://alistapart.com/

http://balsamiq.com/

http://www.axure.com/

http://www.smashingmagazine.com

http://www.smashingmagazine.com

http://alistapart.com

http://alistapart.com

http://balsamiq.com

http://balsamiq.com




Tom Pixton, Communications Specialist

[email protected]

@tpixton

Communication Production ServicesMassachusetts Institute of Technology



Kickstart your content stratgey with html wireframes

Education

Transcript of Kickstart your content stratgey with html wireframes