    
|
|
|
Responsive design not only challenge our tools and approaches to web design and development, but also forces us to review our ways of planning and managing content. New workflows require the right tools. Upon first thought, this opens an opportunity for completely new content management systems (CMS) and publishing platforms (and we’ll probably see plenty of them in the near future). But anyone who has ever migrated from one CMS to another knows very well that the process is not painless. So, can we adapt a familiar and popular CMS such as WordPress to help us create and manage adaptive content?
First, we’ll need to get things straight. What does adaptive content mean, and why do we need it in the age of responsive design? We’ll also discuss WordPress’ features and tools that can help us create a future-friendly publishing platform. We are aiming for a high target: having content that, once created, can be presented flexibly on different devices and in different viewing conditions. Let’s see how close we can get to it.
In her recent book Content Strategy for Mobile, UX and content strategy specialist Karen MacGrane gives a detailed and well-argued explanation of why we need a new approach to content management. We are going further than building responsive sites — we are creating content that can be published on different platforms and accessed on various devices. What if tomorrow a refrigerator becomes someone’s primary tool for consuming information? Is your website ready for such a use case?
Responsive design has arisen mostly out of the need to provide mobile users with an adequate experience. Honestly, though, “mobile” is only part of the picture. If we think of the future, we can easily expect other new platforms and devices on which our content will appear: watches, refrigerators, eye glasses, talking robots — anything one can imagine. Does this mean we need to create a “talking robot” version of our site? That would be madness. So, what’s the solution? The solution is adaptive content — content that, once created, can be reused in different situations and scenarios. Sounds great, doesn’t it? How do we achieve it?
Our content no longer consists of “pages.” It consists of objects, each of which should be considered a package of predefined elements. For each structural component — a chunk — the design system would account for how it should be displayed in all scenarios. Chunks may be presented in alternative media or formats for different use cases. For example, if we have a video in our content object, we could have descriptive text or a transcript for scenarios where the video cannot be viewed. Or the annotations for an object could vary according to the scenario — such as when shared in social media, or included in search results, or introduced on a site.
We have to take the next step towards separating content from presentation. Actually, this is an important principle of redesign and a cornerstone of web standards. But we have to go further and free ourselves of the WYSIWYG mentality. “What you see” is not “what your users see” anymore. That is a dangerous illusion. We should not be marking our text with italics or inserting images as HTML in the “content” field of a “page.” We should just include a reference to a content object and let our design system decide how to present the object.
The more work we offload to program tools (after all, we do want our content to be presented on various platforms automatically based on predefined scenarios, right?), the more information we should provide to those systems about the content. For example, in the past we could write in plain English that the author of a text was John Doe and mark his name in bold — now we can’t. We need a separate field in our CMS to enter the name and a set of rules for how to present it in different scenarios.
We need a single source of content and a scenario-based publishing system that can decide how to present the requested content to a user according to their environment (device, screen resolution, connection speed, etc.).
Can all of these aspects be achieved with WordPress? MacGrane blames WordPress and other blogging software for not supporting publishers as a tool for adaptive content. Specifically, we still have a WYSIWYG editor in WordPress, with a single text area to enter our “post.” Unfortunately, this is the situation facing a designer using the plain out-of-the-box version of WordPress. Fortunately, WordPress is a bit more than just “blogging software.” It has evolved into a development platform, a framework with which a developer can provide clients with a truly modern and future-proof experience.
Let’s see what tools we have as developers, and how to implement them to transform WordPress into an adaptive publishing platform for our clients.
WordPress started its movement towards being a full-fledged CMS with the introduction of custom post types and custom taxonomies. Another powerful feature to be used in combination with these are the so-called custom fields. This simple name refers to the GUI; in fact, these custom fields represent the set of meta data that can be associated with any object in WordPress. WordPress gives us the ability to create a highly customizable UI for meta data and a flexible API to store and access it.
Why is this helpful? With custom post types, we are not locked into the “page” concept anymore. We can create a post type for any object we need (such as news, events, partners — whatever we like), and we can define the object’s structure through this set of meta data. We can also create a separate UI to manage the meta data. All of this gives our content more structure. As soon as WordPress allowed us to create meta data of any type, we could use it to store alternatives for built-in content blocks such as titles and descriptions. (For example, we might see SEO plugins that allow for a unique SEO-targeted title and description for each content object.)
What are its limits? WordPress is criticized a lot for not consistently providing an API to store meta data. Specifically, we can have meta data for posts (and custom posts types) and users, but not for taxonomies (a plugin is needed for that). Creating a custom UI in the editing screen for a post is not as easy as it could be. Predefined functions and standards are missing (which is why different plugins do it differently, leaving us with a mess, rather than a system). But recent changes that help to unify and optimize the WordPress dashboard give us hope.
Another great feature of WordPress is that it allows several instances of the rich-text editor on one page. This can be implemented with the wp_editor function, which not only creates the corresponding textarea markup, but also assigns rich-editing functionality to it and to the media selection buttons.
Why is this helpful? With this function, we can break a single content field into several according to an object’s structure. In doing so, we add a structural component to our objects. Also, each editable area will have a unified and familiar GUI that will help editors easily insert the necessary markup into the appropriate fields, including shortcodes.
What are its limits? We should be storing data entered into such rich-editing areas as meta data, and that means more database calls, etc. So, this approach will require further attention to optimization of the site, such as caching. There is no built-in function to represent this data in templates, so we will need to create it.
With this approach, the familiar post-editing screen would be completely transformed:
The WordPress tools discussed above enable us to make our content more structured by defining objects and replacing a single blob of content with a set of fields that store the content’s various parts and meta data.
Now let’s see what tools we have to separate meaning and presentation. Actually, there are just two basic rules:
The first rule is easy to follow. With a simple filter, we can remove the visual editor for all users.
add_filter('user_can_richedit', '__return_false');
The second rule is much more difficult to follow. Certainly, we are not going to hunt for every HTML tag in our text — the ones that represent truly semantic elements are absolutely OK. But when we start inserting <div> into a content object, we get into trouble. As we know, a column in one scenario might be something completely different in another.
Another huge problem arises from the way WordPress inserts rich media — particularly images — into content fields. Currently, it prints plain HTML that hardcodes the link to the image, its size and wrapping markup. It’s the worst possible scenario for an adaptive approach. What if we needed another variant of an image for a particular use case? What if we have moved our media library to another domain? What if we have changed the design of an object and, thus, need the image in another size? What if we are implementing a responsive technique that requires us to specify several sources for one image? All of these use cases are absolutely impossible if we do not alter WordPress’ default behavior.
And yet WordPress has nearly everything to make a move to an adaptive approach possible:
uploads folder separately, so that the full path can be built dynamically.Putting it all together, we can represent the markup for media with a shortcode containing the ID of the item in the media library. A very basic example would look like this:
add_shortcode('frl_image', 'frl_image_screen');
function frl_image_screen($atts, $content = ''){
extract(shortcode_atts(array('id' => 0, 'link' => 'file', 'size' => 'medium'), $atts ));
$out = '';
$id = intval($id);
if($id == 0)
return ''; // no attachment
$out = "<figure class='image {$size}'>";
$args = array(
'class' => 'frl-image',
'title' => ''
);
$img = wp_get_attachment_image($id, $size, false, $args);
/* linked image */
if($link == 'none'){ //no link
$out .= $img;
} elseif($link == 'file') { //link to file
$url = wp_get_attachment_url($id);
$out .= "<a href='{$url}'>{$img}</a>";
} else { //custom url
$url = esc_attr($link);
$out .= "<a href='{$url}'>{$img}</a>";
}
if(!empty($content))
$out .= "<figcaption>{$content}</figcaption>";
$out .= "</figure>";
return $out;
}
Why is this helpful? It doesn’t force us to hardcode the markup for media (or other content elements). By storing the reference to the object, we defer the decision about the actual markup to the design system, rather than to the content’s author.
What are its limits? This approach is not supported by core WordPress, so we will have to alter WordPress’ default behavior to achieve this.
Currently, shortcodes almost singlehandedly separate structure from presentation in our content chunks. We have to use them responsibly by creating a meaningful shortcodes system so that our authors and content managers are able to learn and use it.
What about reusable content, i.e. content that targets different use cases? WordPress’ templating system supports child themes, allowing us to switch themes dynamically and assign a template to a content object based on hierarchy, which is a good foundation for content reuse. With one central content engine, we can create different design scenarios and switch between them depending on the user’s needs.
The “best” way to take advantage of all these opportunities is unfolding right before our eyes. For now, we have examples of responsive WordPress themes and mobile-only WordPress themes; and, generally speaking, nothing prevents us from having a WordPress theme for talking robots.
Would you like more detailed insight into the topic? Do you use any of these (or other) tools in projects to make content more adaptive? Let us know in the comments.
Featured image/thumbnail, adaptive image via Shutterstock.
| Get Certified Adobe Training for Web Design – 50% off! |
 |
By Dedee DeLongpre Johnston
Director of Sustainability
Wake Forest University
We recently hosted a panel event on campus that probed the realms of morality, justice, capitalism and sustainability. Titled Good for Me – Good for Us? Self Interest, Community Values, and a Sustainable Future, the event challenged participants to consider the coexistence of community values and self-interested behaviors. Prior to the event we asked students to contemplate the perceived clash between the “moral” behaviors we teach in our American families, churches, and schools and the “selfish” behaviors inherent in our current economic system.
Julian Agyeman, Professor and Chair of Urban Environmental Policy and Planning, Tufts University; Sabine O’Hara, Dean of the College of Agriculture, Urban Sustainability & Environmental Sciences, University of the District of Columbia, and Larry Rasmussen, Professor Emeritus of social ethics, Union Theological Seminary served as respondents on the panel.
Our panel of experts articulated their visions for a sustainable future, noting that process, and a particular consideration of whose voice is included in the process, are central to our collective way forward. A focus on the moral dimensions of sustainability was a refreshing departure from the usual facts-and-figures sustainability lectures we have hosted in the past. Our students appreciated the attention paid to the fundamental motivations for our – and their – behaviors.
We worked with student groups for weeks before the event to discuss and debate our organizing questions. Several key themes emerged from these debates and discussions that are worthy of consideration by those of us working to empower students to lead the sustainability revolution.
One: members of this generation realize that unlimited growth, particularly unlimited economic growth based on a fixed set of inputs, is unsustainable. As one young woman put it, however, “it’s the devil we know and trying to imagine jumping off into something different is terrifying.”
Two: members of this generation want to care and want to make a difference, but are spread so thin and are so overcommitted, that they don’t act on their passions.
Three: members of this generation recognize that we need radical change, but they are paralyzed by a commitment – to their families, communities, and selves – to be practical.
During these conversations I was reminded of something David Orr said at a conference a few years back: The revolution is failing because it fails to be radical enough.
At his recent acceptance of the NAACP’s prestigious Spingarn Medal, life-long civil rights advocate Harry Belafonte said "What is missing I think from the equation in our struggle today is that we must unleash radical thought... America has never been moved to perfect our desire for greater democracy without radical thinking and radical voices being at the helm of any such a quest."
For the students we engaged in conversation about this event, the discussion continually circled back to the struggle they feel between understanding that the revolution needs to be radical and the pressure they feel to be practical.
Interestingly, a different group of students expressed the exact same sentiment just days before our event, upon their return from an alternative spring break trip in Alabama where they explored the history of civil rights. They acknowledged that there is “so much work still to be done,” and yet that they feel a need to be practical in the work they do and the life goals they pursue.
If this generation feels paralyzed by practicality, how can we empower them to think, and act, for change? In the follow-up conversations after our panel, we found that students valued the transdisciplinary solutions articulated by the presenters. The mix of economics, history, social equity, and ethics gave them a new insight into the importance of multiple perspectives and it added a pragmatic dimension to their otherwise narrowly conceived understandings of sustainability, based on discipline-specific teaching.
I think that the academe is slowly awakening to this insight as well. We still have our silos, and our reward systems that perpetuate those silos, but sustainability research and teaching is chipping away at the divides. Practicality does not equal stagnation.
Perhaps there are some very practical ways forward for students who are trained to think, and act, across boundaries. The keys to a sustainable future are certainly process-oriented and not just knowledge-based. Perhaps the revolution doesn’t have to fail if it fails to be radical enough. Though a practical revolution is a bit oxymoronic, if it’s a way to get this generation activated in the development of a vision for a sustainable future, maybe it’s a route we have to consider.
As someone who works with students every day, I reject the often-stated conclusion that this generation is apathetic. We should not mistake their lack of action for apathy. We should accept that they’re passionate – and overwhelmed. They’re overscheduled – and need to be taught that their habits are unsustainable. It is our job, as educators, to empower them to clear their own plates and to set their own priorities, so that they can fully engage their passions.
]]>W3C announced today two closely related workshops, part of the W3C headlights 2013 exercise on Digital Publishing:
As part of a larger transparency initiative at UMBC and in the University System of Maryland, the Student Government Association sponsored the Student Fee Advisory Board this semester as part of their dedication to fee increase transparency.
During his term as the student representative to the Board of Regents last academic year, Collin Wojciechowski advocated for a policy to implement this Student Fee Advisory Board.
Wojciechowski, a senior political science major, wrote in a BreakingGround blog post, “... my goal was to make students an active part of the conversation by making sure they understood their bill each semester and had a say in what was on it.”
As Student Regent, Wojciechowski worked during his term to amend the Board of Regents’ policy on student fees to ensure universities have a body like the Fee Advisory Board. Wojciechowski’s work culminated in the passage of an amendment to the Regents’ policy in June 2012.
Check out the rest of the article here and learn more about the Student Fee Review Board!
]]>