{
    "version" : "https://jsonfeed.org/version/1",
    "content" : "news",
    "type" : "single",
    "title" : "The Content Corner: Create Better Mobile Content |Digital.gov",
    "description": "The Content Corner: Create Better Mobile Content",
    "home_page_url" : "/preview/gsa/digitalgov.gov/cm-topics-button-component/","feed_url" : "/preview/gsa/digitalgov.gov/cm-topics-button-component/2015/07/13/the-content-corner-create-better-mobile-content/index.json","item" : [
    {"title" :"The Content Corner: Create Better Mobile Content","summary" : "All content needs to be developed with a mobile-first strategy, from headline choice to paragraph length. Although we are all now living in a post-mobilegeddon world, many of us are still implementing a mobile strategy. This strategy should consider several factors, including viewport size, cellular versus WiFi considerations, and load times. It should also include a","date" : "2015-07-13T11:00:23-04:00","date_modified" : "2024-04-02T09:45:13-04:00","authors" : {"tyrus-manuel" : "Tyrus Manuel"},"topics" : {
        
            "content-strategy" : "Content Strategy",
            "data-visualization" : "Data Visualization",
            "mobile" : "Mobile"
            },"branch" : "cm-topics-button-component",
      "filename" :"2015-07-13-the-content-corner-create-better-mobile-content.md",
      
      "filepath" :"news/2015/07/2015-07-13-the-content-corner-create-better-mobile-content.md",
      "filepathURL" :"https://github.com/GSA/digitalgov.gov/blob/cm-topics-button-component/content/news/2015/07/2015-07-13-the-content-corner-create-better-mobile-content.md",
      "editpathURL" :"https://github.com/GSA/digitalgov.gov/edit/cm-topics-button-component/content/news/2015/07/2015-07-13-the-content-corner-create-better-mobile-content.md","slug" : "the-content-corner-create-better-mobile-content","url" : "/preview/gsa/digitalgov.gov/cm-topics-button-component/2015/07/13/the-content-corner-create-better-mobile-content/","content" :"\u003cdiv class=\"image\"\u003e\n  \u003cimg\n    src=\"https://s3.amazonaws.com/digitalgov/_legacy-img/2015/07/600-x-436-Mobile-phone-Nik_Merkulov-iStock-Thinkstock-466186589.jpg\"\n    alt=\"Mobile devices with question marks on the screens\"/\u003e\u003c/div\u003e\n\n\n\u003cp\u003eAll content needs to be developed with a \u003ca href=\"/preview/gsa/digitalgov.gov/cm-topics-button-component/2013/09/30/mobile-first/\"\u003emobile-first\u003c/a\u003e strategy, from \u003ca href=\"/preview/gsa/digitalgov.gov/cm-topics-button-component/2015/06/22/the-content-corner-writing-better-headlines/\"\u003eheadline choice\u003c/a\u003e to paragraph length.\u003c/p\u003e\n\u003cp\u003eAlthough we are all now living in a post-\u003ca href=\"/preview/gsa/digitalgov.gov/cm-topics-button-component/2015/04/15/mobilegeddon-government-edition/\"\u003emobilegeddon\u003c/a\u003e world, many of us are still implementing a mobile strategy. This strategy should consider several factors, including viewport size, cellular versus WiFi considerations, and load times.\u003c/p\u003e\n\u003cp\u003eIt should also include a review of existing content and a rethinking of new content, down to what I will call the “cellular” level (no pun intended). Mobile is a different platform and content needs to do more than simply fit on the screen: it must be optimized for the user’s experience.\u003c/p\u003e\n\u003cp\u003eRecently, I developed a stand-alone mobile micro-site to support a working group meeting we were hosting in DC. This process made me consider a number of elements that are not generally important for desktop viewing. I worked with the assumption that the person was using their mobile phone while traveling to the meeting. This helped me focus on delivering the most important content to a user depending on their location, such as food or directions to the meeting location (from city, metro stop, building and room).\u003c/p\u003e\n\u003cp\u003eIt was more than taking the information that we normally would have added to our normal desktop site and optimizing it for a person walking in an unfamiliar location and looking to our content for help. Derek Featherstone gave a great presentation on \u003ca href=\"http://aneventapart.com/news/post/content-in-context-is-king-by-derek-featherstone-an-event-apart-video\"\u003ethe importance of context and content\u003c/a\u003e during a recent \u003ca href=\"http://aneventapart.com/\"\u003eAn Event Apart\u003c/a\u003e. There needs to be a priority that simple fitting the same content on a smaller screen doesn’t address.\u003c/p\u003e\n\u003cp\u003eHere are six mobile friendly tips to consider when creating your content.\u003c/p\u003e\n\u003ch1 id=\"responsive-design-is-not-enough-hahahugoshortcode2459s4hbhb\"\u003eResponsive Design Is Not Enough \u003cdiv class=\"image\"\u003e\n  \u003cimg\n    src=\"https://s3.amazonaws.com/digitalgov/_legacy-img/2015/06/600-x-405-Responsive-Web-Design-Elements-macromediam-iStock-Thinkstock-535895521.jpg\"\n    alt=\"Illustration: Responsive Web Design Elements are shown on various screen sizes: television, desktop computer, laptop, tablet, smart phone, smart watch, and ring\"/\u003e\u003c/div\u003e\n\n\u003c/h1\u003e\n\u003cp\u003eTo paraphrase Mr. Spock, responsive design is the beginning of your mobile strategy, not the end. In many ways, responsive design as most of us think about it only ensures that your website and its content \u003cstrong\u003eresponds\u003c/strong\u003e to fit on whatever device is being used. Most of the emphasis of responsive design in practice is on the \u003cstrong\u003edesign\u003c/strong\u003e, not on the content.\u003c/p\u003e\n\u003cp\u003eI would argue in fact that a more important definition of responsive (that is often forgotten) is in terms of how fast your site responds. How quickly does it deliver the content the user has requested? Some of the responsiveness involves the site’s backend, code, scripts, and CSS.\u003c/p\u003e\n\u003cp\u003eBut it also involves your content’s structure and how quickly a user can see what you have to offer on their mobile device. You should not rely completely on responsive design, nor should you rely on content practices that worked for the desktop.\u003c/p\u003e\n\u003cp\u003eUsers consume Web content much differently on a mobile device than they do on a desktop. The old accepted patterns of “above the fold” and the “F-shaped pattern” popularized by \u003ca href=\"http://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/\"\u003eJakob Nielsen\u003c/a\u003e no longer apply. According to research by Briggsby, users now focus on the \u003ca href=\"https://www.briggsby.com/how-do-users-interact-with-serps-on-mobile-devices/\"\u003ecenter of their device screen\u003c/a\u003e. This makes fitting as much critical information into this “sweet spot” key to user engagement.\u003c/p\u003e\n\u003ch1 id=\"headlines-are-even-more-critical\"\u003eHeadlines Are Even More Critical\u003c/h1\u003e\n\u003cp\u003eI’ve discussed \u003ca href=\"/preview/gsa/digitalgov.gov/cm-topics-button-component/2015/06/22/the-content-corner-writing-better-headlines/\"\u003eways to improve your headlines\u003c/a\u003e recently, and many of the tips discussed are just as relevant when considering your mobile content. Using succinct headlines helps reduce wrapping on smaller screens and helps to ensure that the headline will fit within the new mobile “sweet spot” as mentioned above. Lengthy headlines can break in ways that drop them below what could be called the new fold or force a user to scroll to even read your headline. Optimally we would want the headline to easily fit on the initial screen without any additional scrolling needed.\u003c/p\u003e\n\u003ch1 id=\"provide-a-brief-summary\"\u003eProvide a Brief Summary\u003c/h1\u003e\n\u003cp\u003eIf possible, an introduction should also be viewable within the same screen as the headline. This may not be possible every time, but this introduction should be written with a smaller screen size in mind. It should be scannable as to help the user quickly decide whether the article is pertinent.\u003c/p\u003e\n\u003cp\u003eAnd just as with headlines, it should be honest and not clickbait. I call it an introduction, but you can also think of it as a summary that sets up the reader and prepares them for what’s to come and what they should get out of the content once they’re finished. It’s standard writing best practice, but be aware of the smaller screen size and the importance this places on every word.\u003c/p\u003e\n\u003ch1 id=\"write-efficiently\"\u003eWrite Efficiently\u003c/h1\u003e\n\u003cp\u003eThe headline, introduction and in fact every word throughout your content should be important whether you are thinking of mobile or not. This helps you create the most \u003ca href=\"/preview/gsa/digitalgov.gov/cm-topics-button-component/2015/05/11/the-content-corner-ranking-six-common-content-types/\"\u003eefficient content\u003c/a\u003e possible, as I have discussed several times before.\u003c/p\u003e\n\u003cp\u003eTo be honest, I at times may not fully practice what I preach because I also believe in the importance of the \u003ca href=\"/preview/gsa/digitalgov.gov/cm-topics-button-component/2015/04/20/the-content-corner-finding-your-voice/\"\u003edistinctive voice\u003c/a\u003e in content. However, we should all strive for a balance between humanizing our content and being verbose to the point that users don’t read what we write (criticisms of my verbosity are welcome in the comments section below).\u003c/p\u003e\n\u003cp\u003eBe sure to review any content you are creating in a small viewport to at least mimic how it would appear on someone’s smallest device possible (not a watch, yet?).\u003c/p\u003e\n\u003ch1 id=\"images-are-a-double-edged-sword\"\u003eImages Are a Double-edged Sword\u003c/h1\u003e\n\u003cp\u003eThere are ongoing conversations about the pros and cons of images. This includes the wonderful possibilities of what are hopefully not permanently being called “\u003ca href=\"http://contentmarketinginstitute.com/2015/06/gifographics-better-infographics/\"\u003egifographics\u003c/a\u003e” or animated infographics. Of course, we also must account for the challenges of \u003ca href=\"/preview/gsa/digitalgov.gov/cm-topics-button-component/resources/improving-the-accessibility-of-social-media-in-government/\"\u003emaking graphics accessible\u003c/a\u003e to all our site visitors. Images can convey a lot of information quickly and can be very efficient. But many infographics still scale poorly on mobile and can be both bandwidth and screen hogs. At a minimum, understand the tradeoffs associated with graphics and mobile alongside their efficiency and \u003ca href=\"/preview/gsa/digitalgov.gov/cm-topics-button-component/2015/05/11/the-content-corner-ranking-six-common-content-types/\"\u003edesirability among users\u003c/a\u003e.\u003c/p\u003e\n\u003ch1 id=\"use-paragraphs-wisely\"\u003eUse Paragraphs Wisely\u003c/h1\u003e\n\u003cp\u003eA great infographic (nice segue eh?) produced by Buffer and Sum All provides \u003ca href=\"http://blog.sumall.com/journal/internet-zoo-ideal-length-everything-online.html\"\u003eguidelines for how long pretty much everything online should be\u003c/a\u003e. Their guideline for paragraphs is 40-55 characters, and I view that as a maximum. Paragraphs should be used for impact and as a clear way to break up your content and the points you are trying to convey. U.S. News points out that \u003ca href=\"http://money.usnews.com/money/blogs/outside-voices-careers/2014/11/19/8-tips-for-writing-an-email-people-will-actually-read\"\u003ereading long paragraphs requires greater concentration\u003c/a\u003e than most people are capable of when using a mobile device.\u003c/p\u003e\n\u003cp\u003eI like Neil Patel’s description of paragraphs as “\u003ca href=\"http://contentmarketinginstitute.com/2015/04/content-engages-mobile-readers/\"\u003espeed bumps\u003c/a\u003e” that you can use to control the flow of how users consume your content.\u003c/p\u003e\n\u003cp\u003eShort bursts have greater impact.\u003c/p\u003e\n\u003cp\u003eMost of what I’ve covered in this post should sound pretty familiar. Having a mobile first mindset when it comes to generating content helps you stay focused on the efficiency of each word you write. As opposed to envisioning the large canvas that a desktop browser represents, picturing a smaller smartphone screen helps drive home the importance of each word. Remember that creating great mobile content equals great content.\u003cem\u003eYou’ve just finished reading the latest article from our Monday column, \u003ca href=\"/preview/gsa/digitalgov.gov/cm-topics-button-component/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"}
  ]
}