"Content Strategy" and how it relates to a modern front-end web development workflow. Topics covered included content strategy, responsive web design, atomic design, pattern libraries, semantic HTML5 code, Sass, and UX. A focus was put on building and designing sites based on the client’s most important content goals. Content should drive design, not the other way around.

1. Content First.
Janice Gervais calkin24@msu.edu
Trevor Barnes tdb@msu.edu

2. “The best people are the ones
that understand content.
They’re a pain in the butt to
manage, but you put up with it
because they are so good.”
- Steve Jobs
Content First. Trevor Barnes tdb@msu.edu
Janice Gervais calkin24@msu.edu

3. Carousels

9. - Erik Runyan, University of Norte Dame

11. http://bradfrostweb.com/

12. “Carousels on home
pages exist to keep
people from beating
the sh** out of each
other at meetings”
- Brad Frost

13. ...content is more or less
worthless unless it does
one or both of the
following:
● Supports a key
business objective
● Fulfills your users’
needs
- Kristina Halvorson
CONTENT STRATEGY for the Web

14. “High-quality web content that's useful,
usable, and enjoyable is one of the greatest
competitive advantages you can create for
yourself online.”
- Kristina Halvorson
CONTENT STRATEGY for the Web

15. we want
YOU
to be a
Content
Strategist

16. What is content?

17. What is a content strategist?
● Audit existing content.

18. What is a content strategist?
● Audit existing content.
○ - qualitative/quantitative

19. What is a content strategist?
● Audit existing content.
○ - qualitative/quantitative
● Align team on objectives.

20. What is a content strategist?
● Audit existing content.
○ - qualitative/quantitative
● Align team on objectives.
● Establish Governance.

21. What is a content strategist?
● Audit existing content.
○ - qualitative/quantitative
● Align team on objectives.
● Establish Governance.
● Other things I don’t quite understand...

23. Case Study: justincalkins.net

24. Requirements:
Site should be
“super sweet”
...goals?

39. 90% of American adults have a cell phone
58% of American adults have a smartphone
and that number is growing exponentially...
- PEW Research Internet Project, January 2014

40. ponder
● Do you think mobile was an
afterthought for Starbucks?
- Brazillian Sloth

41. ponder
● Do you think mobile was an
afterthought for Starbucks?
● How do you think this page would
have been laid out if they started
with mobile first and worked up to
the desktop?
- Brazillian Sloth

42. ponder
● Do you think mobile was an
afterthought for Starbucks?
● How do you think this page would
have been laid out if they started
with mobile first and worked up to
the desktop?
● If they had, do you think they would
have made any changes based on
their business goals?
- Brazillian Sloth

43. What about a separate mobile-only
site to meet business goals?

44. “Mobile”
isn’t a
screen
size
12,000 Mobile Devices - Open Signal

48. Rendering of a rumored 12.9-inch iPad next to a 13-inch MacBook Air - MacRumors.com

49. “I think someone has
just attached one of
their apple stickers to
a baking tray.”
- witty Mac user on MacRumors.com

50. “There Is No Mobile
Internet!”
- Marek Wolski

51. Implementing
a modern
workflow,
without
scaring
anyone...

52. - David Walsh http://davidwalsh.name/design-responsively

53. Where
is the
fold?

55. #DTDT

56. content strategy
● Stats are you friend

57. content strategy
● Stats are you friend
● Establish the 3 things the site has to do

58. content strategy
● Stats are you friend
● Establish the 3 things the site has to do
● Commitment to governance

59. content strategy
● Stats are you friend
● Establish the 3 things the site has to do
● Commitment to governance
● Make a (realistic and sustainable) plan and stick
with it

60. content strategy
● Stats are you friend
● Establish the 3 things the site has to do
● Commitment to governance
● Make a (realistic and sustainable) plan and stick
with it
● Client sign-off

62. ux/wireframes
● Establishes hierarchy/UX

63. ux/wireframes
● Establishes hierarchy/UX
● Can be done on scratch paper, Photoshop, or
right in the browser...

64. ux/wireframes
● Establishes hierarchy/UX
● Can be done on scratch paper, Photoshop, or
right in the browser...
● Involve the client so they better understand the
process

66. design
“The Mac Family”

67. ...design
Why not just design in Photoshop?
● Designs in Photoshop are fixed width, the web isn’t.
- Aaron Lumsden
TIPS FOR DESIGNING IN THE BROWSER

68. ...design
Why not just design in Photoshop?
● Designs in Photoshop are fixed width, the web isn’t.
● UX can’t be demonstrated.
- Aaron Lumsden
TIPS FOR DESIGNING IN THE BROWSER

69. ...design
Why not just design in Photoshop?
● Designs in Photoshop are fixed width, the web isn’t.
● UX can’t be demonstrated.
● Work gets repeated.
- Aaron Lumsden
TIPS FOR DESIGNING IN THE BROWSER

70. ...design
Why not just design in Photoshop?
● Designs in Photoshop are fixed width, the web isn’t.
● UX can’t be demonstrated.
● Work gets repeated.
● Can be time consuming.
- Aaron Lumsden
TIPS FOR DESIGNING IN THE BROWSER

71. ...design
Why not just design in Photoshop?
● Designs in Photoshop are fixed width, the web isn’t.
● UX can’t be demonstrated.
● Work gets repeated.
● Can be time consuming.
● Not an exact representation of how final design
will look. - Aaron Lumsden
TIPS FOR DESIGNING IN THE BROWSER

72. ...design

73. ...design
Low fidelity Mockup

74. ...design
- css-tricks.com
Designing in the Browser
“Tiny Bootstraps, for
Every Client.”
- Dave Rupert

75. ...design
- css-tricks.com
Designing in the Browser

76. ...design
- microsoft.com
Designing in the Browser

77. ...design
Designing in the Browser

78. ...design
- styletil.es
Style Tiles

79. ...design
“We’re not designing
pages, we’re
designing systems of
components.”
- Stephen Hay

80. ...design
- Brad Frost
Atomic Design

81. ...design
- Brad Frost
Atomic Design

82. ...design
- Brad Frost
Atomic Design

83. ...design
- Brad Frost
Atomic Design

84. ...design
- Brad Frost
Atomic Design

85. ...design
- Brad Frost
Atomic Design

86. “Design
without content
is decoration”
- Jeffrey Zeldman

87. ...develop

88. ...develop

89. ...develop

90. ...develop

92. publish
● code. iterate. assess. repeat.

93. publish
● code. iterate. assess. repeat.
● collaboration is key

94. publish
● code. iterate. assess. repeat.
● collaboration is key
● when main goals are met; publish, assess, add
additional features not vital to goals in the next
phase

95. publish
● code. iterate. assess. repeat.
● collaboration is key
● when main goals are met; publish, assess, add
additional features not vital to goals in the next
phase
○ similar to agile

97. assess/evaluate...
● continuing content strategy

98. assess/evaluate...
● continuing content strategy
● analytics

99. assess/evaluate...
● continuing content strategy
● analytics
● a web site is a living breathing document

100. assess/evaluate...
● continuing content strategy
● analytics
● a web site is a living breathing document
● wash. rinse. repeat.

101. Good content
transcends
platform.
“It’s not that this was
designed and written for
mobile. It’s just good
content.”
- David Balcom, American Cancer Society

102. Janice Gervais
calkin24@msu.edu
Trevor Barnes
tdb@msu.edu