kickstart your content stratgey with html wireframes
DESCRIPTION
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.TRANSCRIPT
![Page 1: Kickstart your content stratgey with html wireframes](https://reader038.vdocuments.mx/reader038/viewer/2022102716/54c750e74a79593b108b45c6/html5/thumbnails/1.jpg)
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
![Page 2: Kickstart your content stratgey with html wireframes](https://reader038.vdocuments.mx/reader038/viewer/2022102716/54c750e74a79593b108b45c6/html5/thumbnails/2.jpg)
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.
![Page 3: Kickstart your content stratgey with html wireframes](https://reader038.vdocuments.mx/reader038/viewer/2022102716/54c750e74a79593b108b45c6/html5/thumbnails/3.jpg)
Communication Production ServicesMassachuse!s Institute of Technology
But first, some background...
![Page 4: Kickstart your content stratgey with html wireframes](https://reader038.vdocuments.mx/reader038/viewer/2022102716/54c750e74a79593b108b45c6/html5/thumbnails/4.jpg)
Communication Production ServicesMassachuse!s Institute of Technology
Changes since 2000
![Page 5: Kickstart your content stratgey with html wireframes](https://reader038.vdocuments.mx/reader038/viewer/2022102716/54c750e74a79593b108b45c6/html5/thumbnails/5.jpg)
Communication Production ServicesMassachuse!s Institute of Technology
Changes since 2000
1. Larger screen size and resolutions
![Page 6: Kickstart your content stratgey with html wireframes](https://reader038.vdocuments.mx/reader038/viewer/2022102716/54c750e74a79593b108b45c6/html5/thumbnails/6.jpg)
Communication Production ServicesMassachuse!s Institute of Technology
Changes since 2000
1. Larger screen size and resolutions2. Faster network speed
![Page 7: Kickstart your content stratgey with html wireframes](https://reader038.vdocuments.mx/reader038/viewer/2022102716/54c750e74a79593b108b45c6/html5/thumbnails/7.jpg)
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)
![Page 8: Kickstart your content stratgey with html wireframes](https://reader038.vdocuments.mx/reader038/viewer/2022102716/54c750e74a79593b108b45c6/html5/thumbnails/8.jpg)
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
![Page 9: Kickstart your content stratgey with html wireframes](https://reader038.vdocuments.mx/reader038/viewer/2022102716/54c750e74a79593b108b45c6/html5/thumbnails/9.jpg)
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
![Page 10: Kickstart your content stratgey with html wireframes](https://reader038.vdocuments.mx/reader038/viewer/2022102716/54c750e74a79593b108b45c6/html5/thumbnails/10.jpg)
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
![Page 11: Kickstart your content stratgey with html wireframes](https://reader038.vdocuments.mx/reader038/viewer/2022102716/54c750e74a79593b108b45c6/html5/thumbnails/11.jpg)
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.
![Page 12: Kickstart your content stratgey with html wireframes](https://reader038.vdocuments.mx/reader038/viewer/2022102716/54c750e74a79593b108b45c6/html5/thumbnails/12.jpg)
Communication Production ServicesMassachuse!s Institute of Technology
Content:
WritingImagesBlog postsRSS feedsSocial media channelsVideo
Content strategy:Pulling it all together...
![Page 13: Kickstart your content stratgey with html wireframes](https://reader038.vdocuments.mx/reader038/viewer/2022102716/54c750e74a79593b108b45c6/html5/thumbnails/13.jpg)
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
![Page 14: Kickstart your content stratgey with html wireframes](https://reader038.vdocuments.mx/reader038/viewer/2022102716/54c750e74a79593b108b45c6/html5/thumbnails/14.jpg)
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/
![Page 15: Kickstart your content stratgey with html wireframes](https://reader038.vdocuments.mx/reader038/viewer/2022102716/54c750e74a79593b108b45c6/html5/thumbnails/15.jpg)
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/
![Page 16: Kickstart your content stratgey with html wireframes](https://reader038.vdocuments.mx/reader038/viewer/2022102716/54c750e74a79593b108b45c6/html5/thumbnails/16.jpg)
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
![Page 17: Kickstart your content stratgey with html wireframes](https://reader038.vdocuments.mx/reader038/viewer/2022102716/54c750e74a79593b108b45c6/html5/thumbnails/17.jpg)
Communication Production ServicesMassachuse!s Institute of Technology
Kristina Halversonhttp://contentstrategy.com/
![Page 18: Kickstart your content stratgey with html wireframes](https://reader038.vdocuments.mx/reader038/viewer/2022102716/54c750e74a79593b108b45c6/html5/thumbnails/18.jpg)
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...
![Page 19: Kickstart your content stratgey with html wireframes](https://reader038.vdocuments.mx/reader038/viewer/2022102716/54c750e74a79593b108b45c6/html5/thumbnails/19.jpg)
Communication Production ServicesMassachuse!s Institute of Technology
![Page 20: Kickstart your content stratgey with html wireframes](https://reader038.vdocuments.mx/reader038/viewer/2022102716/54c750e74a79593b108b45c6/html5/thumbnails/20.jpg)
Communication Production ServicesMassachuse!s Institute of Technology
$
$
$
$
�
![Page 21: Kickstart your content stratgey with html wireframes](https://reader038.vdocuments.mx/reader038/viewer/2022102716/54c750e74a79593b108b45c6/html5/thumbnails/21.jpg)
Communication Production ServicesMassachuse!s Institute of Technology
![Page 22: Kickstart your content stratgey with html wireframes](https://reader038.vdocuments.mx/reader038/viewer/2022102716/54c750e74a79593b108b45c6/html5/thumbnails/22.jpg)
Communication Production ServicesMassachuse!s Institute of Technology
��
� �
�
![Page 23: Kickstart your content stratgey with html wireframes](https://reader038.vdocuments.mx/reader038/viewer/2022102716/54c750e74a79593b108b45c6/html5/thumbnails/23.jpg)
Communication Production ServicesMassachuse!s Institute of Technology
![Page 24: Kickstart your content stratgey with html wireframes](https://reader038.vdocuments.mx/reader038/viewer/2022102716/54c750e74a79593b108b45c6/html5/thumbnails/24.jpg)
Communication Production ServicesMassachuse!s Institute of Technology
��
� ��
�
![Page 25: Kickstart your content stratgey with html wireframes](https://reader038.vdocuments.mx/reader038/viewer/2022102716/54c750e74a79593b108b45c6/html5/thumbnails/25.jpg)
Communication Production ServicesMassachuse!s Institute of Technology
Research: audience and user profiles Schematics: information architecture
Visual design and identity
![Page 26: Kickstart your content stratgey with html wireframes](https://reader038.vdocuments.mx/reader038/viewer/2022102716/54c750e74a79593b108b45c6/html5/thumbnails/26.jpg)
Communication Production ServicesMassachuse!s Institute of Technology
![Page 27: Kickstart your content stratgey with html wireframes](https://reader038.vdocuments.mx/reader038/viewer/2022102716/54c750e74a79593b108b45c6/html5/thumbnails/27.jpg)
Communication Production ServicesMassachuse!s Institute of Technology
![Page 28: Kickstart your content stratgey with html wireframes](https://reader038.vdocuments.mx/reader038/viewer/2022102716/54c750e74a79593b108b45c6/html5/thumbnails/28.jpg)
Communication Production ServicesMassachuse!s Institute of Technology
http://balsamiq.com
![Page 29: Kickstart your content stratgey with html wireframes](https://reader038.vdocuments.mx/reader038/viewer/2022102716/54c750e74a79593b108b45c6/html5/thumbnails/29.jpg)
Communication Production ServicesMassachuse!s Institute of Technology
![Page 30: Kickstart your content stratgey with html wireframes](https://reader038.vdocuments.mx/reader038/viewer/2022102716/54c750e74a79593b108b45c6/html5/thumbnails/30.jpg)
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.
![Page 31: Kickstart your content stratgey with html wireframes](https://reader038.vdocuments.mx/reader038/viewer/2022102716/54c750e74a79593b108b45c6/html5/thumbnails/31.jpg)
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/
![Page 32: Kickstart your content stratgey with html wireframes](https://reader038.vdocuments.mx/reader038/viewer/2022102716/54c750e74a79593b108b45c6/html5/thumbnails/32.jpg)
Communication Production ServicesMassachuse!s Institute of Technology
Ethan Marcottehttp://www.abookapart.com/products/responsive-web-design
![Page 33: Kickstart your content stratgey with html wireframes](https://reader038.vdocuments.mx/reader038/viewer/2022102716/54c750e74a79593b108b45c6/html5/thumbnails/33.jpg)
Communication Production ServicesMassachuse!s Institute of Technology
![Page 34: Kickstart your content stratgey with html wireframes](https://reader038.vdocuments.mx/reader038/viewer/2022102716/54c750e74a79593b108b45c6/html5/thumbnails/34.jpg)
Communication Production ServicesMassachuse!s Institute of Technology
![Page 35: Kickstart your content stratgey with html wireframes](https://reader038.vdocuments.mx/reader038/viewer/2022102716/54c750e74a79593b108b45c6/html5/thumbnails/35.jpg)
Communication Production ServicesMassachuse!s Institute of Technology
http://www.axure.com
![Page 36: Kickstart your content stratgey with html wireframes](https://reader038.vdocuments.mx/reader038/viewer/2022102716/54c750e74a79593b108b45c6/html5/thumbnails/36.jpg)
Communication Production ServicesMassachuse!s Institute of Technology
![Page 37: Kickstart your content stratgey with html wireframes](https://reader038.vdocuments.mx/reader038/viewer/2022102716/54c750e74a79593b108b45c6/html5/thumbnails/37.jpg)
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).
![Page 38: Kickstart your content stratgey with html wireframes](https://reader038.vdocuments.mx/reader038/viewer/2022102716/54c750e74a79593b108b45c6/html5/thumbnails/38.jpg)
Communication Production ServicesMassachuse!s Institute of Technology
Steve Krughttp://www.sensible.com/dmmt.html
![Page 39: Kickstart your content stratgey with html wireframes](https://reader038.vdocuments.mx/reader038/viewer/2022102716/54c750e74a79593b108b45c6/html5/thumbnails/39.jpg)
Communication Production ServicesMassachuse!s Institute of Technology
![Page 40: Kickstart your content stratgey with html wireframes](https://reader038.vdocuments.mx/reader038/viewer/2022102716/54c750e74a79593b108b45c6/html5/thumbnails/40.jpg)
Communication Production ServicesMassachuse!s Institute of Technology
![Page 41: Kickstart your content stratgey with html wireframes](https://reader038.vdocuments.mx/reader038/viewer/2022102716/54c750e74a79593b108b45c6/html5/thumbnails/41.jpg)
Communication Production ServicesMassachuse!s Institute of Technology
Andy Buddhttp://clearleft.com
![Page 42: Kickstart your content stratgey with html wireframes](https://reader038.vdocuments.mx/reader038/viewer/2022102716/54c750e74a79593b108b45c6/html5/thumbnails/42.jpg)
Communication Production ServicesMassachuse!s Institute of Technology
![Page 43: Kickstart your content stratgey with html wireframes](https://reader038.vdocuments.mx/reader038/viewer/2022102716/54c750e74a79593b108b45c6/html5/thumbnails/43.jpg)
Communication Production ServicesMassachuse!s Institute of Technology
![Page 44: Kickstart your content stratgey with html wireframes](https://reader038.vdocuments.mx/reader038/viewer/2022102716/54c750e74a79593b108b45c6/html5/thumbnails/44.jpg)
Communication Production ServicesMassachuse!s Institute of Technology
![Page 45: Kickstart your content stratgey with html wireframes](https://reader038.vdocuments.mx/reader038/viewer/2022102716/54c750e74a79593b108b45c6/html5/thumbnails/45.jpg)
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
![Page 46: Kickstart your content stratgey with html wireframes](https://reader038.vdocuments.mx/reader038/viewer/2022102716/54c750e74a79593b108b45c6/html5/thumbnails/46.jpg)
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.
![Page 47: Kickstart your content stratgey with html wireframes](https://reader038.vdocuments.mx/reader038/viewer/2022102716/54c750e74a79593b108b45c6/html5/thumbnails/47.jpg)
Communication Production ServicesMassachuse!s Institute of Technology
![Page 48: Kickstart your content stratgey with html wireframes](https://reader038.vdocuments.mx/reader038/viewer/2022102716/54c750e74a79593b108b45c6/html5/thumbnails/48.jpg)
Communication Production ServicesMassachuse!s Institute of Technology
![Page 49: Kickstart your content stratgey with html wireframes](https://reader038.vdocuments.mx/reader038/viewer/2022102716/54c750e74a79593b108b45c6/html5/thumbnails/49.jpg)
Communication Production ServicesMassachuse!s Institute of Technology
![Page 50: Kickstart your content stratgey with html wireframes](https://reader038.vdocuments.mx/reader038/viewer/2022102716/54c750e74a79593b108b45c6/html5/thumbnails/50.jpg)
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.
![Page 51: Kickstart your content stratgey with html wireframes](https://reader038.vdocuments.mx/reader038/viewer/2022102716/54c750e74a79593b108b45c6/html5/thumbnails/51.jpg)
Communication Production ServicesMassachuse!s Institute of Technology
![Page 52: Kickstart your content stratgey with html wireframes](https://reader038.vdocuments.mx/reader038/viewer/2022102716/54c750e74a79593b108b45c6/html5/thumbnails/52.jpg)
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
![Page 53: Kickstart your content stratgey with html wireframes](https://reader038.vdocuments.mx/reader038/viewer/2022102716/54c750e74a79593b108b45c6/html5/thumbnails/53.jpg)
Communication Production ServicesMassachuse!s Institute of Technology
Resources
http://www.smashingmagazine.com/
http://alistapart.com/
http://balsamiq.com/
http://www.axure.com/
![Page 54: Kickstart your content stratgey with html wireframes](https://reader038.vdocuments.mx/reader038/viewer/2022102716/54c750e74a79593b108b45c6/html5/thumbnails/54.jpg)
Communication Production ServicesMassachuse!s Institute of Technology
Tom Pixton, Communications Specialist
@tpixton
Communication Production ServicesMassachusetts Institute of Technology