{
    "version" : "https://jsonfeed.org/version/1",
    "content" : "news",
    "type" : "single",
    "title" : "The Content Corner: Modular Design and Structured Content |Digital.gov",
    "description": "The Content Corner: Modular Design and Structured Content",
    "home_page_url" : "/preview/gsa/digitalgov.gov/bc-archive-content-3/","feed_url" : "/preview/gsa/digitalgov.gov/bc-archive-content-3/2015/08/24/the-content-corner-modular-design-and-structured-content/index.json","item" : [
    {"title" :"The Content Corner: Modular Design and Structured Content","summary" : "Several months ago I discussed the concept of a world without Web pages and the importance of structured content and thinking about content, not pages. This week, I’m taking that discussion further by discussing the importance of modularity in Web design and how that complements our efforts to create more structured and reusable data. Break","date" : "2015-08-24T14:07:31-04:00","date_modified" : "2025-01-27T19:42:55-05:00","authors" : {"tyrus-manuel" : "Tyrus Manuel"},"topics" : {
        
            "content-strategy" : "Content strategy",
            "design" : "Design",
            "mobile" : "Mobile"
            },"branch" : "bc-archive-content-3",
      "filename" :"2015-08-24-the-content-corner-modular-design-and-structured-content.md",
      
      "filepath" :"news/2015/08/2015-08-24-the-content-corner-modular-design-and-structured-content.md",
      "filepathURL" :"https://github.com/GSA/digitalgov.gov/blob/bc-archive-content-3/content/news/2015/08/2015-08-24-the-content-corner-modular-design-and-structured-content.md",
      "editpathURL" :"https://github.com/GSA/digitalgov.gov/edit/bc-archive-content-3/content/news/2015/08/2015-08-24-the-content-corner-modular-design-and-structured-content.md","slug" : "the-content-corner-modular-design-and-structured-content","url" : "/preview/gsa/digitalgov.gov/bc-archive-content-3/2015/08/24/the-content-corner-modular-design-and-structured-content/","content" :"\u003cp\u003eSeveral months ago I discussed the concept of a \u003ca href=\"/preview/gsa/digitalgov.gov/bc-archive-content-3/2015/03/16/the-content-corner-a-world-without-web-pages/\"\u003eworld without Web pages\u003c/a\u003e and the importance of structured content and thinking about content, not pages. This week, I’m taking that discussion further by discussing the importance of modularity in Web design and how that complements our efforts to create more structured and reusable data.\u003c/p\u003e\n\u003ch2 id=\"break-it-down\"\u003eBreak It Down\u003c/h2\u003e\n\u003cp\u003eOne of the critical aspects of our current efforts in structured data and adaptive content is the reductionary process. By taking a piece of content and breaking it down to what can be called a molecular level, we can make these individual pieces \u003ca href=\"https://digital.gov/2013/07/29/how-to-create-open-structured-content/\"\u003emore flexible and hence more re-usable\u003c/a\u003e.\u003c/p\u003e\n\u003cp\u003eThe end goal is to create once and publish everywhere (COPE) and anywhere by pulling this structured content as needed to deliver information to a user.\u003c/p\u003e\n\u003cp\u003eThis same concept is now becoming more and more popular throughout all phases of Web development, from data to content to design. The idea of modular Web design and the process of breaking down the elements of your design is gaining broader acceptance throughout the Web design community. This includes a review of all style and design concepts used within the site—not exactly like a \u003ca href=\"/preview/gsa/digitalgov.gov/bc-archive-content-3/2015/06/08/the-content-corner-creating-a-content-style-guide/\"\u003econtent style guide\u003c/a\u003e, but similar.\u003c/p\u003e\n\u003cp\u003eThe creation of a design style guide (or \u003ca href=\"https://www.futurelearn.com/pattern-library\"\u003epattern library\u003c/a\u003e) gathers all of the CSS styles, including colors and typography. However, in many instances it captures even more, such as in \u003ca href=\"https://about.futurelearn.com/blog/pattern-library/\"\u003eFuture Learn’s example\u003c/a\u003e. After failing in their initial efforts at building a style guide for their site, Future Learn’s design team embraced the concept of \u003ca href=\"http://bradfrost.com/blog/post/atomic-web-design/\"\u003eAtomic Design\u003c/a\u003e to better catalog all of the elements of their site.\u003c/p\u003e\n\u003ch2 id=\"better-designing-through-chemistry-hahahugoshortcode2590s2hbhb\"\u003eBetter Designing Through Chemistry \u003cdiv class=\"image\"\u003e\n  \u003cimg\n    src=\"https://s3.amazonaws.com/digitalgov/_legacy-img/2015/08/600-x-450-atomic-design-by-Brad-Frost-CC-BY-4-0.jpg\"\n    alt=\"Modular design graphic.\"/\u003e\u003c/div\u003e\n\n\u003c/h2\u003e\n\u003cp\u003e\u003ca href=\"http://bradfrost.com/\"\u003eBrad Frost\u003c/a\u003e has been credited with taking various concepts for modular or molecular design and forming them into a repeatable framework that others are able to easily leverage for their own sites and designs. His inspiration was chemistry and the concept of molecular bonds. He transferred the concept of molecular structures into an understandable method of deconstructing Web design into key components:\u003c/p\u003e\n\u003cli style=\"font-weight: 400\"\u003e\n  Atoms\n\u003c/li\u003e\n\u003cli style=\"font-weight: 400\"\u003e\n  Molecules\n\u003c/li\u003e\n\u003cli style=\"font-weight: 400\"\u003e\n  Organisms\n\u003c/li\u003e\n\u003cli style=\"font-weight: 400\"\u003e\n  Templates\n\u003c/li\u003e\n\u003cli style=\"font-weight: 400\"\u003e\n  Pages.\n\u003c/li\u003e\n\u003cp\u003e\u003cstrong\u003eAtoms\u003c/strong\u003e would make up the most basic pieces of your design such as colors and typography, items that can’t be broken down further, much like actual atoms.\u003c/p\u003e\n\u003cp\u003eThe analogy continues as atoms are bonded together to form \u003cstrong\u003eMolecules\u003c/strong\u003e, such as a particular color and font combining to create the heading molecules or a navigation element. These can also be more complex, such as a form field and a button combined to create a search box.\u003c/p\u003e\n\u003cp\u003eThe molecules then can be used to create \u003cstrong\u003eOrganisms\u003c/strong\u003e that make up more modular components of a site, such as the header that includes text and color atoms, and headings and logos and the search box.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eTemplates\u003c/strong\u003e break the analogy of chemistry, but were important to help show potential clients or other stakeholders something that looks more recognizable as a Web page.\u003c/p\u003e\n\u003cp\u003eAnd \u003cstrong\u003ePages\u003c/strong\u003e are the final product as representations of how all the pieces are combined to create a specific instance of the homepage or an article.\u003c/p\u003e\n\u003cp\u003eWhile I dislike the concrete term page to describe what the final result is, I understand its usage from a service provider-to-client interaction standpoint. Again, to me, pages is too limiting and restrictive a concept as I see modular design and adaptive content. To me, you simply have modules arranged in a wide variety of ways based on various criteria such as location, device, user data, etc. If it helps others understand to call that final result a “page,” so be it. In fact, Brad Frost actually shares some great perspectives on how we all need to move beyond the “page” as a concept in his upcoming book.\u003c/p\u003e\n\u003cp\u003eRegardless of what the final product is called, atomic design creates a greater appreciation for how individual elements are arranged and their interactions or dependencies. This appreciation also leads to a more reusable design that eliminates redundant elements and reduces unintended variations (such as headings that are just a few shades different in color). And, as with structured content, some of the same challenges arise when developing a modular design guide or pattern library. Some of the biggest challenges are related to semantics and \u003ca href=\"http://www.slideshare.net/AbbyCovert/lessons-from-an-ontology-nerd\"\u003eontology and arriving at a common language\u003c/a\u003e that will be used by all parties involved in the design.\u003c/p\u003e\n\u003ch2 id=\"speaking-the-same-language\"\u003eSpeaking the Same Language\u003c/h2\u003e\n\u003cp\u003eAs opposed to structured content, we don’t generally assign metadata to elements of a design library. Using the principles of atomic design, we can break apart the disparate elements and \u003ca href=\"http://demo.patternlab.io/\"\u003eassign them categories or their places within the atomic structure\u003c/a\u003e, such as an atom or an organism, but this does little to inform us about the actual function of a particular unit. We need to provide each element or module a descriptive name, the only real metadata that it will have.\u003c/p\u003e\n\u003cp\u003eAs opposed to working within a \u003ca href=\"/preview/gsa/digitalgov.gov/bc-archive-content-3/2014/05/05/government-open-and-structured-content-models-are-here/\"\u003econtent model\u003c/a\u003e for example, where the “title” field will more closely be derived from the content itself, room for significant variance exists when naming design elements, especially at the atomic or molecular level. Just as with \u003ca href=\"/preview/gsa/digitalgov.gov/bc-archive-content-3/2015/08/03/18fs-style-guide-for-open-source-project-documentation/\"\u003e18F’s efforts to develop a style guide\u003c/a\u003e for its GitHub efforts in order to foster better understanding and exchange, establishing an accepted ontology is key for any modular design effort.\u003c/p\u003e\n\u003cp\u003eEveryone on the team should be regularly discussing naming conventions for site elements (and actually everyone on the team should be sharing all kinds of information regularly, \u003ca href=\"/preview/gsa/digitalgov.gov/bc-archive-content-3/2013/11/04/sharing-information-across-and-within-organizations-shouldnt-be-challenging/\"\u003eit’s not as hard as it may seem\u003c/a\u003e. For example, do you all call the item on your homepage a rotator, slider, or carousel? Before developing a structure and inventory, you need to establish clear names for items that resonate with everyone and don’t change.\u003c/p\u003e\n\u003cp\u003eWhile any pattern library or style guide is always a living document, changing the names of key modules can have a serious impact on how reusable and extensible the design can be. Consider how frustrating it would be for developers to address frequent significant changes to an agency’s API that they are trying to use to provide additional content for their site. If I am programming a call to a “title” field, then that field needs to always be called that and it should always be something reasonably like a title.\u003c/p\u003e\n\u003cp\u003eBe aware of the impact assigning a name to an element will have. Be sure to regularly have discussions with the team about whether an item should have a functional name, a descriptive name and how it aligns with other elements and previously assigned names. This type of discussion should occur regularly and openly; some use chat systems such as \u003ca href=\"/preview/gsa/digitalgov.gov/bc-archive-content-3/2015/07/30/picking-up-the-slack-for-team-communication/\"\u003eSlack\u003c/a\u003e to help facilitate this ongoing dialogue. The key is that it takes place and solid agreement is arrived at in a natural and organic method in order to ensure future flexibility as much as possible. That is the overarching goal of modular design, after all.\u003c/p\u003e\n\u003ch2 id=\"modularityfuture-proof\"\u003eModularity=Future Proof\u003c/h2\u003e\n\u003cp\u003eFrom the work of \u003ca href=\"http://www.nasa.gov/orion\"\u003eNASA and their Orion craft\u003c/a\u003e that has been designed for maximum flexibility to \u003ca href=\"http://gsa.github.io/Open-And-Structured-Content-Models/\"\u003eour efforts to create structured, device-agnostic Web content\u003c/a\u003e, the benefits of modularity are becoming more and more important in a world where the future always seems to arrive ahead of schedule.\u003c/p\u003e\n\u003cp\u003eModular design allows for quick changes with minimal disruption. The header or logo needs to be changed? They are only one block of a larger framework and can easily be swapped in and out. It also allows for the fuller realization of our world without Web pages. We now have blocks of content that will display within specific design modules, depending on the user or platform or device. The content and appearance of the site can be altered to facilitate (one hopes) changes or requirements we can’t even envision yet. \u003ca href=\"http://www.w3.org/blog/2008/01/modularity/\"\u003eA quote from the inventor of the World Wide Web, Tim Berners-Lee\u003c/a\u003e (from 2008 no less), seems to sum it up nicely: “So we should always be looking to make a clean system with an interface ready to be used by a system which hasn’t yet been invented. Messy interfaces introduce complexity, which we may later regret.”\u003c/p\u003e\n\u003cp\u003eModular design, from front-end to back-end, helps reduce the messy interfaces and reacts faster to all those things that haven’t been invented yet.\u003c/p\u003e\n\u003cp\u003e\u003cem\u003eYou’ve just finished reading the latest article from our Monday column, \u003ca href=\"/preview/gsa/digitalgov.gov/bc-archive-content-3/topics/content-strategy/\"\u003eThe Content Corner\u003c/a\u003e. This column focuses on helping solve the main content issues facing federal digital professionals, including producing enough content and making that content engaging.\u003c/em\u003e\u003c/p\u003e\n"}
  ]
}