Structured Content Part 2: Why designers should care
Download as PPTX, PDF0 likes1,028 views
The document discusses the importance of structured content for designers, emphasizing the need for content modeling and design systems to ensure effective content delivery across various platforms. It highlights the benefits of creating reusable and scalable design elements while maintaining semantic markup for optimal organization. Additionally, it mentions the role of schema.org in promoting structured data online.
Structured Content Part 2: Why designers should care
- 1. Structured Content: Why Designers Should Care August 17, 2016 Dori Kelner, Managing Partner Sleight-of-Hand Studios
- 2. About me Survey data collection Data warehousing Technical project management Design strategist Foodie and oenophile 8/18/2016 | 2
- 4. Unstructured Content Trapped in the body field Styling and relationships are static and locked 8/18/2016 | 4
- 5. “Get your content ready to go anywhere because it’s going to go everywhere.” —Brad Frost 8/18/2016 | 5
- 6. Plan for Structure 1. Content modeling 2. Design systems 8/18/2016 | 6
- 7. Content Modeling Fielded content chunks Consistent semantic markup Visual hierarchy/importance Control data feeds 8/18/2016 | 7 PERSON Full Name First name Last name Image Summary Bio Role Affiliation Featured 1
- 8. Name Description Title Field Body Field Fields Type Widget Size Required Person Information about people who interact with the site Full name Bio First name Text Text 20 Yes Last name Text Text 20 Yes Headshot Image Image Yes Summary Text Text 120 Yes Role Term Reference - role Select list Yes Affiliation Entity Reference - workplace Select list Yes Featured Boolean Single on/off checkbox No 8/18/2016 | 8
- 9. 8/18/2016 | 9 RECIPE Title Subtitle Short summary Summary Person Image Video Ingredients Process Nutritional info Yield Cook time Prep time Category Rating Comments Content priority PROCESS Steps CATEGORY Title INGREDIENT Measure Quantity Name PERSON Full Name First name Last name Summary Bio Role Affiliation ROLE Title REVIEW Rating Comment STORE Name Address City State Ingredient AFFILIATIO N Title
- 10. schema.org 8/18/2016 | 10 “Schema.org is a collaborative, community activity with a mission to create, maintain, and promote schemas for structured data on the Internet, on web pages, in email messages, and beyond.”
- 11. The CMS Can your CMS do this? 8/18/2016 | 11
- 12. 8/18/2016 | 12 Content: Person Content List (entity reference): Affiliation Term reference: Role
- 13. 8/18/2016 | 13
- 14. Design Systems Pattern Library Atomic Design Consistency Cohesiveness Reusability 8/18/2016 | 14 Labe l Inpu t Butto n 2
- 15. 8/18/2016 | 15
- 16. 8/18/2016 | 16
- 17. 8/18/2016 | 17
- 18. Reusable Scalable Device agnostic Future proofing Content becomes data 8/18/2016 | 18 Do you know where your content is?
- 19. Separate Content from Presentation True device agnosticism 8/18/2016 | 19
- 20. 8/18/2016 | 20 Dori Kelner, MS Managing Partner Sleight-of-Hand Studios 703-758-7178 dmkelner@sohstudios.com Drupal groups: dmkelner Twitter: @dorikelner LinkedIn: https://www.linkedin.com/in/dorikelner
Editor's Notes
- #3: Data girl
- #4: You may not realize it, but structured content is everywhere I look for classification schemes in everything How to create a common vocabulary that everyone can relate to Recipes have become my go-to classic example of intelligent content at work because recipes are everywhere: blogs and websites, mobile apps like Epicurious, social networks like Pinterest, and in search-engine results.
- #5: Structured content definition Unstructured content is trapped in the body field The styling and relationships are static and locked Let’s fix this
- #6: Move your content into a structured format so that it can be shared and distributed to any platform – even ones that haven’t been invented yet
- #7: Content types Fields and metadata Data centric, not page centric Categorize content with fields and tabs we can sort, filter and prioritize it What types of content do you have – audio, video, articles, news, events Figure out what fields and metadata you need for each Make it easier for content creators to enter the information and for the web to reuse the information Writing content for the chunk, not the page – data centric not page centric
- #8: Make it easier for content creators to enter the information and for the web to reuse the information Writing content for the chunk, not the page – data centric not page centric For each concept, there is a content type. What are the attributes or properties of each concept? Unique fields in the database Semantic markup
- #9: What limits do we set on the attributes?
- #10: Define the content types Work with the content creators to make a common vocabulary
- #11: A shared vocabulary makes it easier for webmasters and developers to decide on a schema and get the maximum benefit for their efforts. You can give context to your data and make your Drupal site part of the semantic web. Helps Google understand your markup. Schema.org vocabulary can be used with many different encodings, including RDFa, Microdata and JSON-LD. These vocabularies cover entities, relationships between entities and actions, and can easily be extended through a well-documented extension model. Over 10 million sites use Schema.org to markup their web pages and email messages. Many applications from Google, Microsoft, Pinterest, Yandex and others already use these vocabularies to power rich, extensible experiences. Schema.org is sponsored by Google, Microsoft, Yahoo and Yandex. The vocabularies are developed by an open community process, using the public-schemaorg@w3.org mailing list and through GitHub.
- #15: The modern automobile factory is no longer the assembly line that Ford pioneered, but has been effectively reduced to an assembler of finished components. working “the old way:” crafting custom pieces of UI for every new feature we dreamed up. The CSS was unmanageable, and as much as we tried, things never felt like a true family of components—everything had a slightly different makeup, both visually and in the underlying code. A unified design system is essential to building better and faster; better because a cohesive experience is more easily understood by our users, and faster because it gives us a common language to work with.
- #19: Why is this important? The internet of things Because content is on every device – not just computers, but in our cars, our appliances And will be in places we have yet to consider We need to push content where everyone is Turn content into data that can be read by humans & machines Reusable chunks across devices, social – content in whatever context makes sense Change content in one place and it updates everywhere Social chunks Scalable over time Divorce interface from the content – the interface is a representation of the content – facelift Content becomes data – robots can make sense of it Your content can be made available through an API No more blobs
- #20: GIVE UP CONTROL!!! goal of achieving true device agnosticism any markup that is in the content should only be semantic HTML and not in any way make assumptions about delivery (no table driven layouts). Let the CSS in whatever delivery layout wrapper make those decisions at render time Semantic Aesthetic