{"id":3165,"date":"2012-06-21T07:56:01","date_gmt":"2012-06-21T11:56:01","guid":{"rendered":"https:\/\/meetcontent.com\/?p=3165"},"modified":"2017-04-20T00:33:28","modified_gmt":"2017-04-20T04:33:28","slug":"higher-ed-responsive-web-design-trail-blazers-say-content-first","status":"publish","type":"post","link":"https:\/\/meetcontent.com\/blog\/higher-ed-responsive-web-design-trail-blazers-say-content-first\/","title":{"rendered":"Higher Ed Responsive Web Design Trail Blazers say ‘Content-First’"},"content":{"rendered":"
\"Responsive
Gettin' responsive with it.<\/figcaption><\/figure>\n

Over the past couple of years, the advent of responsive web design has changed the way we think about websites. We no longer need to feel compelled to plan around countless devices. Rather, we can plan for a single web experience that works in unpredictable contexts.<\/p>\n

More often than not, that comes down to the content. Responsive web design, within the larger school of thought around creating adaptive content, gives content folks a lot to think about in that regard. How is content structured? How is content written? What is our content hierarchy? How does content reflow on the page? In short, a responsive web design is an exercise in decision-making around content.<\/p>\n

As we know, many higher education institutions have been quick to implement responsive web designs, embracing the benefits and accepting the challenges inherent therein. We reached out to some of the staffers behind recent responsive redesigns and asked them about how content planning factored into their projects. <\/p>\n

The answers varied, but there was a common theme: if you\u2019re not thinking about your content when planning a responsive web design, you can\u2019t succeed.<\/p>\n

(On June 19, we delivered a Meet Content webinar on content planning for responsive web designs. Check out the slides and Storify from the session<\/a>.)<\/p>\n

Wright State University<\/h2>\n

Mark Anderson, Senior Web Administrator: <\/em><\/p>\n

As we were originally planning the build of our new site last summer we developed a set of design principles. One of these core principles was to make sure that all new websites we produced were “device agnostic”. Responsive design was our main method of achieving this goal. Since we have had this early goal it has helped our whole team to think about how content will be altered for different display sizes. <\/p>\n

\"Wright<\/a>
Wireframes used by Wright State University for responsive web design content planning. Click image to view full size. (Graphic courtesy of the Wright State Web Team)<\/figcaption><\/figure>\n

Many content layout decisions have been driven by our early development of templates that have been designed and themed. We try to make conscious decisions about which content should exist in the body vs. sidebars, with an understanding that on the smallest layouts the sidebar content will be lower on the page than on a larger screened device. As part of our Drupal builds we are making some content that is being produced through queries (Drupal views, etc.), so sometimes responsive decisions happen during development alongside content planning. <\/p>\n

There are many things we want to do to make content more consistent across all devices that we will be working to implement this summer, such as responsive images. In some cases we are hiding content completely on smaller devices due to a lack of a good way to scale it currently.<\/p>\n

I would say one of the largest shortcomings we have with responsive design is that we do not work with it daily until well into the build out phase of the content and theming. Since we all work on large-screened devices all day it is very easy to neglect the other layouts. Something like Adobe Shadow<\/a> could help with this to a large extent but we have not worked with it yet.<\/p>\n

Jessica Sparks, Web Designer:<\/em><\/p>\n

I think we all had a pivotal moment (especially me as the “content sheriff”), when we created side-by-side wirefames of the desktop, tablet, and mobile together. I have attached an example so you can see how we arrived at one of our core design principles: LESS.<\/p>\n

\n
As we learned and “lived” responsive design, we begin to make more and more decisions regarding content. <\/div>\n<\/div>\n

Until I saw mountains of copy from the desktop site literately flowed into an unending scroll of the wireframe of the mobile version, I hadn’t really wrapped my mind around how different the content really was in its presentation. What appeared to be a “small” paragraph on desktop seemed to go on forever on mobile.<\/p>\n

This made us all take a step back and really begin to take stock in our content and how responsive design would translate to all three platforms. Mark is absolutely correct in that this has truly been a work in progress, so <\/p>\n

I would say until you layout wireframes in a side-by-side way you really can’t comprehend how different the content will look and feel. In our case, my developer (Raj Singh) and I, realized in five minutes of looking at our wireframes that the order of content had to change (navigation high, side bar content lowest on the page, and body content in the middle, images\/banners removed). <\/p>\n

Read more about the new site, which launched in winter 2011.<\/a><\/em><\/p>\n

Regent College<\/h2>\n

Sarah Clayton, Director of Marketing and Communications<\/em><\/p>\n

Our key to content success was content strategy planning. Based on objectives for the Regent College website, our webagency, Domain7, developed individualized content plans for each section\/page, that included purpose of page, key messaging and content hierarchy. From there, the designers were somewhat free to interpret those elements into a responsive design. Because of the planning, aside from the homepage, we didn’t have\/require a lot of nit-picking and re-arranging in the design process.<\/p>\n

Read more about the new site, which launched in April 2012<\/a><\/em><\/p>\n

Lynn University<\/h2>\n

Anthony Bosio, Director of Web Strategy and Operations<\/em><\/p>\n

We had a short window of 90 days to create our responsive site in order to launch in sync with the debut of a new admission print collateral. We wanted the site and the publications to have a similar look and feel. Because of this, we really did not address content differences or optimizations specifically for mobile. We took our existing site and used CSS to make the design responsive. It is the same architecture with the same content we had before. There are no content visibility differences, except for a prominent multi-tab window on our home page which only loads one tab\u2019s content by default\u2014leaving out the tabbed interface\u2014and then is enhanced to the full tabbed UI by Javascript for tablet and desktop size screens. <\/p>\n

\n
We are vigilant (if not always victorious) about keeping the content on the site focused on the needs of our target users defined by personas we created. No more, no less.<\/div>\n<\/div>\n

Though I sometimes wish we had more time to consider screen size implications to content, I am less concerned as time goes on for two reasons. First, we are vigilant (if not always victorious) about keeping the content on the site focused on the needs of our target users defined by personas we created. No more, no less. Second, as mobile web use continues to rise, reducing content or functionality for mobile users will become increasingly painful for them because small screen does not necessarily indicate mobile context.<\/p>\n

For hierarchy of the page, we considered the unstyled HTML or even a single-level bullet point list and make decisions about the best order for the content in that form and rely on CSS to present the content as needed for various screen widths. This practice pre-dates responsive design in our shop because content order was always an important consideration for accessibility.<\/p>\n

View the new site, which launched in August 2011<\/a><\/em> <\/p>\n

Sewanee: The University of the South<\/h2>\n

John Rogerson, Director of Web and Digital Media Communications<\/em><\/p>\n

At one level, our current “responsive” iteration is focused on providing content first, navigation second. We build out “mobile first” (for want of a better term).<\/p>\n

I’d argue the biggest factor that allows us to be responsive is that we use a CMS (ExpressionEngine) that doesn’t determine the markup you use and lends itself extremely well to “content modeling.\u201d I’m presenting at HighEdWeb Arkansas again this July on utilizing an NPR-type COPE strategy (without deliberately planning to do so) that will go into this in more depth.<\/p>\n

View the new site, which launched in Fall 2010<\/a><\/p>\n

University of Notre Dame<\/h2>\n

Erik Runyon, Manager of Interactive Development, Web<\/em> <\/p>\n

ND.edu does not use a CMS or database. Each page contains its own content in a flat-file format. Additional items such as the flyout wings on the homepage feature and the drop-down “nav” sections are all also individual files. This allows us to decide at run-time which content to include based on the device. <\/p>\n

We decided early on that we would not include all of the content that is available on the desktop\/tablet version of the homepage on the mobile version. It would have resulted in a page that was way to long and heavy for mobiles. Instead, that content is available through top-level navigation. On subpages, the content is primarily identical for all devices, as we didn’t want to make assumptions about the intent of the user based on device.<\/p>\n

Read more about the new site, which launched in April 2012<\/a><\/em><\/p>\n

University of California-San Diego<\/h2>\n

Brett Pollak, Director, Campus Web Office<\/em><\/p>\n

In a phone interview, Pollak called UCSD\u2019s recent site relaunch \u201cmore of a design refresh than a major content overhaul.<\/p>\n

\u201cWe knew that we wanted to utilize responsive design based on the analytics we were seeing\u2014about a half percent per month increase in mobile devices accessing campus homepage. Mobile was just over 10% of our web traffic, an amount that had doubled in a year.\u201d Their m-dot site<\/a> featured content primarily for users on campus, such as maps and dining information.<\/p>\n

Pollak says his team executed the refresh in close collaboration with the campus web steering committee, which he describes as \u201cthe core group that advises us on whether what we\u2019re proposing makes sense.\u201d The committee includes members from student affairs, academic affairs, business affairs and other units on campus. <\/p>\n

\u201cThe committee weighed in on how things would shape up in terms of break points,\u201d says Pollak. <\/p>\n

\n
They understood that this was a new thing in terms of the fact that this hadn\u2019t really been done much in higher ed, so a lot of it was trial and error<\/div>\n<\/div>\n

Pollak and his team showed the committee how renowned sites had tackled certain parts of the process beforehand and then showed how he and his team did it, citing emerging best practices and iterating through that process. <\/p>\n

\u201cThey understood that this was a new thing in terms of the fact that this hadn\u2019t really been done much in higher ed, so a lot of it was trial and error,\u201d says Pollak.<\/p>\n

UCSD is continuing to iterate in two-week cycle windows in response to feedback and as best practices for responsive web design continue to emerge. For instance, while at first the link to their m-dot site was only exposed at the smallest breakpoint, which ended up being confusing, users can now toggle back and forth between the two at will.<\/p>\n

Prior to this project, Pollak acknowledges there had been some \u201canalysis paralysis,\u201d but since then they have had the freedom to not be stymied by the fact that it\u2019s not perfect\u2014an allowance he admits is rare in higher ed.<\/p>\n

\u201cIt\u2019s definitely an evolutionary thing, and we\u2019re trying to be as agile as possible with it,\u201d says Pollak. <\/p>\n

View the new site, which launched in late January 2012.
\n<\/a><\/em><\/p>\n

[ See more from Pollak in the comments of this College Web Editor post<\/a>. ]<\/p>\n

Your Turn<\/h2>\n

Are you implementing (or gearing up to implement) a responsive web design? What content considerations are you taking into account, and what is guiding your decisions around them?<\/p>\n

Want to find more colleges and universities that have implemented responsive web design? Check out Runyon\u2019s list<\/a>, or this list kept by University of Iowa librarian Eric Rumsey.<\/em><\/p>\n

Photo by chasingdaisy \/ Flickr Creative Commons<\/a><\/em><\/p>\n","protected":false},"excerpt":{"rendered":"

Over the past couple of years, the advent of responsive web design has changed the way we think about websites. We no longer need to feel compelled to plan around countless devices. Rather, we can plan for a single web experience that works in unpredictable contexts. More often than not, that comes down to the […]<\/p>\n","protected":false},"author":2,"featured_media":3171,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"categories":[127],"tags":[],"yoast_head":"\nHigher Ed Responsive Web Design Trail Blazers say 'Content-First' | Meet Content<\/title>\n<meta name=\"description\" content=\"In many ways, a responsive web design is an exercise in decision-making about content. We asked some higher ed institutions how they did it.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/meetcontent.com\/blog\/higher-ed-responsive-web-design-trail-blazers-say-content-first\/\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Georgy Cohen\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/meetcontent.com\/blog\/higher-ed-responsive-web-design-trail-blazers-say-content-first\/\",\"url\":\"https:\/\/meetcontent.com\/blog\/higher-ed-responsive-web-design-trail-blazers-say-content-first\/\",\"name\":\"Higher Ed Responsive Web Design Trail Blazers say 'Content-First' | Meet Content\",\"isPartOf\":{\"@id\":\"https:\/\/meetcontent.com\/#website\"},\"datePublished\":\"2012-06-21T11:56:01+00:00\",\"dateModified\":\"2017-04-20T04:33:28+00:00\",\"author\":{\"@id\":\"https:\/\/meetcontent.com\/#\/schema\/person\/c46e3050ea513291a46336298ee82c91\"},\"description\":\"In many ways, a responsive web design is an exercise in decision-making about content. We asked some higher ed institutions how they did it.\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/meetcontent.com\/blog\/higher-ed-responsive-web-design-trail-blazers-say-content-first\/\"]}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/meetcontent.com\/#website\",\"url\":\"https:\/\/meetcontent.com\/\",\"name\":\"Meet Content\",\"description\":\"Empowering higher education to create and sustain web content that works\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/meetcontent.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/meetcontent.com\/#\/schema\/person\/c46e3050ea513291a46336298ee82c91\",\"name\":\"Georgy Cohen\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/meetcontent.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/ed49bc8dd530713ec3ccdf6523f474b5?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/ed49bc8dd530713ec3ccdf6523f474b5?s=96&d=mm&r=g\",\"caption\":\"Georgy Cohen\"},\"description\":\"Georgy Cohen is associate creative director, content strategy, at OHO Interactive in Cambridge, Mass.. Prior to OHO, she worked with a range of higher ed institutions, including stints at Tufts University and Suffolk University and as an independent consultant, on content strategy and digital communication initiatives.\",\"sameAs\":[\"http:\/\/www.georgycohen.com\"],\"url\":\"https:\/\/meetcontent.com\/blog\/author\/georgy\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Higher Ed Responsive Web Design Trail Blazers say 'Content-First' | Meet Content","description":"In many ways, a responsive web design is an exercise in decision-making about content. We asked some higher ed institutions how they did it.","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:\/\/meetcontent.com\/blog\/higher-ed-responsive-web-design-trail-blazers-say-content-first\/","twitter_misc":{"Written by":"Georgy Cohen","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/meetcontent.com\/blog\/higher-ed-responsive-web-design-trail-blazers-say-content-first\/","url":"https:\/\/meetcontent.com\/blog\/higher-ed-responsive-web-design-trail-blazers-say-content-first\/","name":"Higher Ed Responsive Web Design Trail Blazers say 'Content-First' | Meet Content","isPartOf":{"@id":"https:\/\/meetcontent.com\/#website"},"datePublished":"2012-06-21T11:56:01+00:00","dateModified":"2017-04-20T04:33:28+00:00","author":{"@id":"https:\/\/meetcontent.com\/#\/schema\/person\/c46e3050ea513291a46336298ee82c91"},"description":"In many ways, a responsive web design is an exercise in decision-making about content. We asked some higher ed institutions how they did it.","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/meetcontent.com\/blog\/higher-ed-responsive-web-design-trail-blazers-say-content-first\/"]}]},{"@type":"WebSite","@id":"https:\/\/meetcontent.com\/#website","url":"https:\/\/meetcontent.com\/","name":"Meet Content","description":"Empowering higher education to create and sustain web content that works","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/meetcontent.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/meetcontent.com\/#\/schema\/person\/c46e3050ea513291a46336298ee82c91","name":"Georgy Cohen","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/meetcontent.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/ed49bc8dd530713ec3ccdf6523f474b5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/ed49bc8dd530713ec3ccdf6523f474b5?s=96&d=mm&r=g","caption":"Georgy Cohen"},"description":"Georgy Cohen is associate creative director, content strategy, at OHO Interactive in Cambridge, Mass.. Prior to OHO, she worked with a range of higher ed institutions, including stints at Tufts University and Suffolk University and as an independent consultant, on content strategy and digital communication initiatives.","sameAs":["http:\/\/www.georgycohen.com"],"url":"https:\/\/meetcontent.com\/blog\/author\/georgy\/"}]}},"_links":{"self":[{"href":"https:\/\/meetcontent.com\/wp-json\/wp\/v2\/posts\/3165"}],"collection":[{"href":"https:\/\/meetcontent.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/meetcontent.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/meetcontent.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/meetcontent.com\/wp-json\/wp\/v2\/comments?post=3165"}],"version-history":[{"count":0,"href":"https:\/\/meetcontent.com\/wp-json\/wp\/v2\/posts\/3165\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/meetcontent.com\/wp-json\/wp\/v2\/media\/3171"}],"wp:attachment":[{"href":"https:\/\/meetcontent.com\/wp-json\/wp\/v2\/media?parent=3165"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetcontent.com\/wp-json\/wp\/v2\/categories?post=3165"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetcontent.com\/wp-json\/wp\/v2\/tags?post=3165"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}