{"id":28189,"date":"2016-10-12T21:01:05","date_gmt":"2016-10-12T13:01:05","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=28189"},"modified":"2022-09-18T19:31:23","modified_gmt":"2022-09-18T11:31:23","slug":"planning-content-responsive-design","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/planning-content-responsive-design\/","title":{"rendered":"How to Plan Content Arrangement For Responsive Design"},"content":{"rendered":"

In a recent post<\/a>, I discussed how visual content<\/strong> relates to layout design<\/strong>. However, this subject is very detailed and splinters off into many sub-topics, one of which is visual organization for responsive layouts<\/strong>.<\/p>\n

In this post, I\u2019d like to delve deeper into responsive content to look at some best practices for rearranging content for smaller screens<\/strong>. In UI & UX design, there is no single right answer for every project, but there are trends that work well<\/strong>, and from these trends, you can build your own ideas.<\/p>\n

Rearrange Grids To Lists<\/h2>\n

Every website uses some type of grid whether it\u2019s visible or not<\/strong>. Content in a solid grid often groups horizontally on wider monitors, but this doesn\u2019t make sense on smaller devices. The best remedy is to break down these grids on smaller screens and convert the items into lists<\/strong>.<\/p>\n

\n\t\t\t\t\tRead Also:<\/strong>\u00a0\n\t\t\t\t\tWhat You Need to Know About Visual Content Direction<\/a>\n\t\t\t\t<\/p>\n

Example 1: Wellington City Council<\/h3>\n

Take a look at the website of the Wellington City Council<\/a> which uses a number of grid-styled sections<\/strong> on the home page.<\/p>\n

\"Wellington<\/a><\/figure>\n

There\u2019s a small slideshow of square links that reduces<\/strong> as the browser window resizes. The footer section also becomes smaller<\/strong>, and eventually converts into a vertical list of links<\/strong>.<\/p>\n

On very small phones with 320px width, you need to design for the device size. In the case of an iPhone, the device is taller than wider, so it makes sense to arrange content that way.<\/p>\n

Example 2: Mooyah Burgers<\/h3>\n

Take a look at the home page for Mooyah<\/a>, and try resizing the layout. There\u2019s a small slideshow area that contains three items on a desktop screen, but this shrinks down<\/strong> to show only one item on mobile (adding more hidden slides to the widget).<\/p>\n

\"Mooyah<\/a><\/figure>\n

The two promotional boxes advertising the Mooyah app & menu stay fixed side-by-side until the screen gets small enough<\/strong> to rearrange them vertically.<\/p>\n

The \u201cConnect with us!\u201d section also rearranges content so that each social post gets as much room as possible<\/strong>. Generally speaking, widescreen monitors are the widest, and smartphone screens are the tallest.<\/p>\n

Example 3: Theme Market<\/h3>\n

When designing a layout with a grid, you should consider both wide & tall layout styles<\/strong> before writing a single line of code. This way, you\u2019ll be prepared to build breakpoints that make sense<\/strong>.<\/p>\n

A page with a full grid layout should reduce the size of boxes<\/strong> before breaking them onto a new line. For example, Theme Market<\/strong> has a fixed max width<\/strong> of 1240, and the grid contains four blocks per row<\/strong>.<\/p>\n

\"Theme<\/figure>\n

As the screen gets smaller these blocks reduce in width<\/strong>, but eventually break down<\/strong> to leave three boxes per row<\/strong>. At the smallest size, you get one box per row, and it has plenty of room<\/strong> for text & imagery to shine.<\/p>\n

There\u2019s always a balance of keeping as much info in view as possible<\/strong> combined with the need to make text readable<\/strong>. The more you build grid layouts, the easier it\u2019ll be to find this balance of content arrangement<\/strong>.<\/p>\n

Hide or Remove Columns<\/h2>\n

Wider monitors<\/strong> and more browser support<\/strong> allow developers to build incredibly complex layouts. I often see blogs with three or even four columns<\/strong> that take up a good portion of the screen.<\/p>\n

However smaller devices need a content flow that makes sense vertically<\/strong>. I\u2019ve found two options for handling excessive sidebars<\/strong>:<\/p>\n

    \n
  1. Drop them beneath the main content<\/li>\n
  2. Hide them altogether<\/li>\n<\/ol>\n

    Example 1: Stop Press<\/h3>\n

    Take a look at the Stop Press<\/a> website. It has four vertical columns<\/strong> on my desktop monitor.<\/p>\n

    The left column is a vertical nav menu, the next column is the main content column with recent articles. Then we have two different sidebar columns overflowing with extra \u201caside\u201d content.<\/p>\n

    \"Stop<\/a><\/figure>\n

    As the browser window resizes, these columns slowly reduce in size<\/strong>. The first to go is the left navigation which gets hidden behind a hamburger menu icon.<\/p>\n

    The next breakpoint hides the middle column along with the top social sharing buttons. Then finally, on the smallest screens, the far right sidebar completely disappears , leaving just the primary center column<\/strong> of content.<\/p>\n

    None of the sidebar content appears beneath the main content. It\u2019s completely hidden from view<\/strong>, and this is a perfectly acceptable choice to reduce page load<\/strong> and to keep the scrollbar height at a decent size.<\/p>\n

    On the other hand, many blogs do move the sidebar beneath the main content<\/strong> like on Concept Art Empire<\/a> which features related posts in the sidebar that eventually drop below the content<\/strong>.<\/p>\n

    Example 2: Wishpond Blog<\/h3>\n

    The Wishpond Blog<\/a> also completely removes the sidebar<\/strong> from the screen on smaller viewports. This sidebar area typically contains advertising, signup forms, and related post links. None of this content is vital but it can add value to visitors.<\/p>\n

    \"Wishpond<\/a><\/figure>\n

    I like to follow a hybrid approach<\/strong> where I move the sidebar beneath the content but also hide a few items in the sidebar past a certain breakpoint.<\/p>\n

    For example, if I have three ad blocks in the full layout, I may hide two of those ad spaces on mobile. This makes the sidebar content accessible<\/strong> but doesn\u2019t clutter up the page<\/strong> with excessive content.<\/p>\n

    Example 3: Madame Gautier<\/h3>\n

    I also like how Madame Gautier<\/strong> uses their \u201cLatest news\u201d sidebar on the home page. It eventually drops below the content<\/strong>, and takes up a full view position<\/strong> on the page.<\/p>\n

    \"Madame<\/figure>\n

    Almost every website will have at least one sidebar in the design. Whether this is a site-wide sidebar or just something that appears on a page template, the side-by-side design style<\/strong> is popular because it fits more content<\/strong> on the screen.<\/p>\n

    It\u2019s your choice how to handle the content<\/strong>. You can drop the sidebar lower, hide it altogether, or use a hybrid of these two techniques. But you should make your choice based on the relevance of the sidebar<\/strong>, and its necessity<\/strong> to the page.<\/p>\n

    Adjust & Squeeze Margins<\/h2>\n

    There will always be a point where content cannot be squeezed<\/strong> any further, and one section needs to drop below the other<\/strong>.<\/p>\n

    By adjusting margins<\/strong> before lowering content on the page, you give readers a wider breadth of content to choose.<\/p>\n

    Example 1: One World<\/h3>\n

    The footer on One World<\/a> is a great example. It has sitewide footer links floated <\/strong>right with an email signup form<\/strong> on the left.<\/p>\n

    \"One<\/a><\/figure>\n

    As the layout resizes, the margins and paddings between these elements shrink. The link columns get closer together<\/strong>, and the signup form gets a little smaller<\/strong>, too.<\/p>\n

    Past a certain point, it just makes sense to drop the links beneath the signup form<\/strong>, and give the footer plenty of room to breathe<\/strong>.<\/p>\n

    Yes, it does make the page longer, and yes, it takes more effort to scroll down that far, but at these smaller breakpoints, you can assume users are on vertically oriented devices<\/strong>.<\/p>\n

    Example 2: Golden Isles<\/h3>\n

    Another example I love is the Golden Isles<\/a> home page with its unique navigation style<\/strong>. When you resize the browser window the nav links squeeze together<\/strong>. Eventually, they break from a single line<\/strong> into two rows, then down into columns at the very smallest size.<\/p>\n

    \"Golden<\/a><\/figure>\n

    Other items on the page follow the same pattern<\/strong>. This example demonstrates the power of resizing margins<\/strong> before completely rearranging the layout.<\/p>\n

    Vertical Flow On Smaller Screens<\/h2>\n

    Page content should flow naturally<\/strong>, and vertical alignment<\/strong> makes sense on mobile. This means you need to consider in-page content blocks to update the content style accordingly<\/strong>. This includes paragraphs, headers, blockquotes, unordered lists, and also custom content boxes.<\/p>\n

    Example 1: BodyBuilding.com Single Post<\/h3>\n

    Take for example this BodyBuilding post<\/a> which uses small boxes<\/strong> to show off different glute workouts.<\/p>\n

    These boxes include thumbnails on the right side<\/strong> to demonstrate the exercise. On smaller screens, these thumbnails break down onto a new line<\/strong>, and eventually stack on top of each other<\/strong>.<\/p>\n

    \"BodyBuilding<\/a><\/figure>\n

    Your responsive CSS should consider this tiny minutia for every page of the website.<\/p>\n

    Example 2: Vanity Fair<\/h3>\n

    For a bigger example, check out the Vanity Fair<\/a> home page which completely rearranges the featured story slider<\/strong>. On a fullscreen desktop, the stories list headlines with one featured image showing to the side. As the browser resizes smaller, this top stories section becomes a sliding carousel<\/strong>.<\/p>\n

    \"Vanity<\/a><\/figure>\n

    The interface itself completely changes<\/strong> by adding dot navigation, arrows, and featured images for each story in the list. Their fullscreen list of articles is more \u201cvertical\u201d, but this layout is trickier to operate on a mobile screen, so changing it into a sliding carousel is a better option.<\/p>\n

    Think more about the user\u2019s flow<\/strong> rather than your content flow. Content doesn\u2019t always need to be forced into a vertical layout<\/strong> on small screen. Just think about how to organize content in a way that supports a vertical browsing experience<\/strong>.<\/p>\n

    Closing Thoughts<\/h2>\n

    Responsive design is essential these days, and every web designer and developer should understand how it works. Visitors expect all websites to be mobile-friendly<\/strong>. Whenever I stumble onto a non-responsive website, I cringe at the sight of that horizontal scrollbar.<\/p>\n

    Follow the tips in this post for planning design strategies to rearrange content<\/strong> for the best possible user experience on all devices.<\/p>","protected":false},"excerpt":{"rendered":"

    In a recent post, I discussed how visual content relates to layout design. However, this subject is very detailed and splinters off into many sub-topics, one of which is visual organization for responsive layouts. In this post, I\u2019d like to delve deeper into responsive content to look at some best practices for rearranging content for…<\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[352],"tags":[4646,2066],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"\nHow to Plan Content Arrangement For Responsive Design - Hongkiat<\/title>\n<meta name=\"description\" content=\"In a recent post, I discussed how visual content relates to layout design. However, this subject is very detailed and splinters off into many sub-topics,\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/planning-content-responsive-design\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Plan Content Arrangement For Responsive Design\" \/>\n<meta property=\"og:description\" content=\"In a recent post, I discussed how visual content relates to layout design. However, this subject is very detailed and splinters off into many sub-topics,\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/planning-content-responsive-design\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2016-10-12T13:01:05+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-09-18T11:31:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/planning-content-responsive-design\/01-wellington-nz-city-council-responsive-website-screenshot.jpg\" \/>\n<meta name=\"author\" content=\"Jake Rocheleau\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jake Rocheleau\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/planning-content-responsive-design\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/planning-content-responsive-design\\\/\"},\"author\":{\"name\":\"Jake Rocheleau\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\"},\"headline\":\"How to Plan Content Arrangement For Responsive Design\",\"datePublished\":\"2016-10-12T13:01:05+00:00\",\"dateModified\":\"2022-09-18T11:31:23+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/planning-content-responsive-design\\\/\"},\"wordCount\":1511,\"commentCount\":2,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/planning-content-responsive-design\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/planning-content-responsive-design\\\/01-wellington-nz-city-council-responsive-website-screenshot.jpg\",\"keywords\":[\"Mobile Website Design & Dev\",\"Responsive Web Design\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/planning-content-responsive-design\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/planning-content-responsive-design\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/planning-content-responsive-design\\\/\",\"name\":\"How to Plan Content Arrangement For Responsive Design - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/planning-content-responsive-design\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/planning-content-responsive-design\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/planning-content-responsive-design\\\/01-wellington-nz-city-council-responsive-website-screenshot.jpg\",\"datePublished\":\"2016-10-12T13:01:05+00:00\",\"dateModified\":\"2022-09-18T11:31:23+00:00\",\"description\":\"In a recent post, I discussed how visual content relates to layout design. However, this subject is very detailed and splinters off into many sub-topics,\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/planning-content-responsive-design\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/planning-content-responsive-design\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/planning-content-responsive-design\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/planning-content-responsive-design\\\/01-wellington-nz-city-council-responsive-website-screenshot.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/planning-content-responsive-design\\\/01-wellington-nz-city-council-responsive-website-screenshot.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/planning-content-responsive-design\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Plan Content Arrangement For Responsive Design\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\",\"name\":\"Jake Rocheleau\",\"description\":\"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers\",\"sameAs\":[\"https:\\\/\\\/www.hongkiat.com\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/jake\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Plan Content Arrangement For Responsive Design - Hongkiat","description":"In a recent post, I discussed how visual content relates to layout design. However, this subject is very detailed and splinters off into many sub-topics,","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/planning-content-responsive-design\/","og_locale":"en_US","og_type":"article","og_title":"How to Plan Content Arrangement For Responsive Design","og_description":"In a recent post, I discussed how visual content relates to layout design. However, this subject is very detailed and splinters off into many sub-topics,","og_url":"https:\/\/www.hongkiat.com\/blog\/planning-content-responsive-design\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2016-10-12T13:01:05+00:00","article_modified_time":"2022-09-18T11:31:23+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/planning-content-responsive-design\/01-wellington-nz-city-council-responsive-website-screenshot.jpg","type":"","width":"","height":""}],"author":"Jake Rocheleau","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Jake Rocheleau","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/planning-content-responsive-design\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/planning-content-responsive-design\/"},"author":{"name":"Jake Rocheleau","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a"},"headline":"How to Plan Content Arrangement For Responsive Design","datePublished":"2016-10-12T13:01:05+00:00","dateModified":"2022-09-18T11:31:23+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/planning-content-responsive-design\/"},"wordCount":1511,"commentCount":2,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/planning-content-responsive-design\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/planning-content-responsive-design\/01-wellington-nz-city-council-responsive-website-screenshot.jpg","keywords":["Mobile Website Design & Dev","Responsive Web Design"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/planning-content-responsive-design\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/planning-content-responsive-design\/","url":"https:\/\/www.hongkiat.com\/blog\/planning-content-responsive-design\/","name":"How to Plan Content Arrangement For Responsive Design - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/planning-content-responsive-design\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/planning-content-responsive-design\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/planning-content-responsive-design\/01-wellington-nz-city-council-responsive-website-screenshot.jpg","datePublished":"2016-10-12T13:01:05+00:00","dateModified":"2022-09-18T11:31:23+00:00","description":"In a recent post, I discussed how visual content relates to layout design. However, this subject is very detailed and splinters off into many sub-topics,","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/planning-content-responsive-design\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/planning-content-responsive-design\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/planning-content-responsive-design\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/planning-content-responsive-design\/01-wellington-nz-city-council-responsive-website-screenshot.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/planning-content-responsive-design\/01-wellington-nz-city-council-responsive-website-screenshot.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/planning-content-responsive-design\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Plan Content Arrangement For Responsive Design"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a","name":"Jake Rocheleau","description":"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers","sameAs":["https:\/\/www.hongkiat.com"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/jake\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-7kF","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/28189","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=28189"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/28189\/revisions"}],"predecessor-version":[{"id":62264,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/28189\/revisions\/62264"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=28189"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=28189"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=28189"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=28189"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}