Responsive vs Adaptive Web Design: Better Together

Responsive web design (RWD), the ability for your web application to “respond” to the size of the view port (traditional screen size vs mobile screen size) is common place and practice today.  Responsive design leverages client sidefront end UI frameworks to hide, show, stack, shrink and grow elements on the screen in a way that is appropriate for the size of the device’s screen.  In essence, it is many user interfaces in a single code base.

Adaptive web design (AWD), a (seemingly) alternative approach to RWD is a server side capability to respond to the client with completely unique templates / markup for a given device type (amongst other facets.)  Adaptive design, while extremely powerful is somewhat less common in part because it relies on a server and is thus a less general technology. It’s also less prevalent in part because, for a large class of problems, RWD is “enough” to get the job done.  However, as complexity and sophistication of requirements mount, adaptive design starts to show clear advantages over a purely responsive approach.

Responsive design and adaptive design are often thought of as an either/or architectural choice.  There is clear overlap in the problems they address and each approach has clear strengths and weaknesses over one-another.  Let’s take a quick look at a side by side comparison:

Comparison

Technical Approach

Responsive Design: Leverages server agnostic front end frameworks (eg. Twitter Bootstrap) to render a appropriate content flow for the given screen size.

Adaptive Design: Leverages back-end server templates (e.g. Crafter CMS) to render distinct markup for the device and context requesting the application.

Strengths

Responsive Design:

  • Mainstream approach with many frameworks that can be applied to any backend technology.
  • Single code base

Adaptive Design:

  • Truly unique markup can be delivered based on any kind of context (not just screen size.)  This means it’s much easier to deliver contextual functionality to your users.  Example:  A retail store .com site that has a traditional marketing website at mystore.com but once it’s detected that a user is inside a physical store location, it gives them a personalized in-store assistance to enhance their shopping experience.
  • Performance.  With AWD you send only the data you need for the experience you are delivering.  On slower, mobile networks that can make a big difference.

Weaknesses

Responsive Design:

  • Single code base.  The more variations you want to support, the more code and complexity there is in that single code base.  This can get out of control.
  • Performance can be an issue:  RWD sends all of the code for all variations to every consumer whether or not they will see it in their flow or not.  If the amount of code is significant, this can lead to a performance hit on slower/mobile networks.
  • It’s difficult (although not impossible) to address different contexts beyond screen size with Responsive design.  RWD was really intended to different screen sizes (view ports.)  Stretching its role beyond that takes the technology out of its wheelhouse.

Adaptive Design:

  • You need a server backend to support AWD.
  • Instead of a single UI design and template code base, you potentially have many.  If you don’t manage and factor the code properly it will be more difficult to maintain.

Opportunities

Responsive Design:

  • Provides a usable experience on any screen size.

Adaptive Design:

  • Provides a usable experience on any screen size.
  • Provide faster experiences for your users.
  • Allows you to truly contextualize the experience.  Device type/class/screen size is really just the tip of the iceberg.  Once the server is involved any type of contextual data (location, previous use, time of day, etc) can be used to deliver unique and relevant experience/features to the user.  That can be huge.

Threats

Responsive Design:

  • If requirements go beyond screen size, RWD may not be the appropriate solution.
  • If the number of variations is too high performance and code complexity may be an issue.

Adaptive Design:

  • Managing unique templates is a heavier approach that requires server technology and the skills to go along with it.

Better Together

While RWD and AWD are most commonly looked at as competitive approaches, the simple fact is that they are not.  These two approaches are in fact mutually exclusive with another and can be combined to acquire the benefits of both.

Responsive design is front end technology.   Adaptive design is backend technology.  Combine them.

Consider leveraging Adaptive design to drive truly unique and contextual markup to the user for what they are doing, on the device of their choice at that moment.   Allow the front end to leverage Responsive frameworks to make sure those experiences flow nicely on a given device.  For performance and code maintainability, as your RWD code grows in complexity and size, consider breaking it down in to smaller code bases that can be individually delivered to a device by RWD (the server.)

A simple example of this is to have AWD templates for Small, Medium and Large screens.  Each with their own unique features and markup.  When it comes to the specifics like an iPhone vs a Galaxy smart phone (both considered small), RWD steps in to make the minor adjustments required to provide a perfect fit for the given device type. This makes the code more maintainable and more importantly it makes the user’s experience much more zippy.

 

Patterns for Integrating 3rd Party Content in Your CMS

There are often times when you will want to integrate content in your site that does not ORIGINATE in your content management system.  In this article we’ll look at a few high level patterns for integration and discuss the pros and cons of each approach.

Approach 1: Sync to CMS, publish to site as full content

Approach 1 focuses the integration at the CMS level only.  Content is either pulled or pushed from the 3rd party system in to the CMS.  From there it can be further processed and is ultimately published to the website where it can be used like any other type of content including native involvement in search and targeting scenarios.

Pros

  • 3rd party content is converted to 1st class content which allows it to be used natively by the system with not rendering engine level integration.
  • Authors may augment the content coming from the 3rd party system to include additional content and metadata
  • This integration is typically very simple
  • There is no impact on the performance or complexity profile of your delivery environment

Cons

  • Syncs can be tricky.  Remember content originates in the 3rd party system but it’s possible that it may need to be further modified by the CMS.  
  • A mechanism and a process must be defined that allows content updates to flow from the 3rd party system in to the CMS.  Typically this involves a strong ID that identifies each object, a mapping of fields that can always be overridden in the CMS  and mechanism for communicating creates, updates and deletes.

Other Considerations

  • By passing through the CMS 3rd party content is not “immediately” available on the website.  Content must wait for the sync mechanism to operate. Further, there may be workflow required before content can be made live.

When to use this pattern

  • This pattern is often preferred
    • It is relatively simple
    • Allows augmentation of the content in the CMS
    • Requires no run-time integration
    • Has no impact on the performance and SLA of the run-time

When not to use this pattern

  • When any create, update or delete to the content in the 3rd party system must be IMMEDIATELY available on the live site.

Approach 2: Partial sync to CMS, full details retrieved at run-time

Approach 2 syncs a simple jacket for the content to the CMS but relies on runtime integration with the 3rd party system for the full details of the 3rd party content.  The jacket in the CMS carries only the metadata required for the 3rd party content to participate in search, targeting and other dynamic behavior on the site.   The “sync” that creates the jacket in the CMS may be done through a simple integration or can even be a manual process.

Pros

  • Less content is relied on from the CMS which means that for items that have been previously published, detailed data is always 100% in sync with the 3rd party system.
  • Search, targeting and other dynamic capabilities native to the delivery system may still be relied on for functionality within the site.

Cons

  • There is a runtime dependency on the third party system for the actual content.  If that site is down, the content is unavailable.
  • As discussed in approach 1, syncs can be tricky.  In the case of approach 2 we still have some sort of manual or automated sync to create a jacket in the CMS.
  • In this approach there are 2 points of integration 1 at the CMS and one at delivery.  When you add additional moving parts, you are adding operation complexity that must be maintained and supported.
  • Content can be out of sync between what the site has in it’s jacket (and this in the indexes) and what is in the 3rd party system.  You must consider all cases: create, update, and delete

Other Considerations

  • By creating a run-time dependency between the delivery system and the 3rd party system you dictate that the 3rd party system must (generally) have the same reliability and performance capabilities of the delivery system.

When to use this pattern

  • When detailed aspects of the 3rd party content must be IMMEDIATELY up to date.
  • When it is impractical to import all of the 3rd party content in to the CMS.  A typical use case for this approach is 3rd party hosted video.  The CMS may contain only basic metadata and thumbnails while the 3rd party system retains all of the various video encodings.

When not to use this pattern

  • If the website and the 3rd party system must be 100% in sync on ALL aspects of the content at all times
  • When approach 1 is viable.

Approach 3: Run-time integration only

Approach 3 focuses integration at the content delivery tier only.  Display and behavior related to the 3rd party content is all handled through integration.

Pros

  • Approach is the most simple from a “moving parts” perspective. There is no syncing involved
  • 3rd party content is immediately up to date when changes are made in the 3rd party system

Cons

  • There is a runtime dependency on the third party system for the actual content.  If that site is down, the content is unavailable.
  • All content display, and behavior such as query driven listings, content targeting, and search must be integrated.
  • It can be difficult to integrate functionality like search where CMS content and 3rd party content are placed together on the page in a seamless way.  This is because the implementation is very likely to require issuing at least two queries (one to the CMS and one to the 3rd party system.)

Other Considerations

  • By creating a run-time dependency between the delivery system and the 3rd party system you dictate that the 3rd party system must (generally) have the same reliability and performance capabilities of the delivery system.

When to use this pattern

  • When 3rd party content must be IMMEDIATELY available and up to date on the site the instant it is updated in the 3rd party system.
  • When there is no need to rely on native capabilities of your delivery platform for delivery of the content and dynamic behavior (like search.)

When not to use this pattern

  • When option 1 or 2 are viable and use of native capabilities of the content delivery platform useful / required.

 

Querying Content in Crafter CMS

Types of Content Queries

Crafter CMS supports 3 specific types of content queries:

  • Cross content Lucene/Solr queries. This enables you to query any/all content objects, by any group of properties.)
  • Filtered Structural Queries. This enables you to query against the repository structure e.g. “Get all articles by author XYZ”
  • Content Item specific query. This enables you to write queries inside of a given content item.

Type 1: Make a Lucene/Solr Query

The following code examples use the Crafter Search Service in Crafter Egnine to get content. You can find the interface for this service HERE.

def queryStatement = 'content-type:"/component/article" AND author:"Russ Danner"'

def query = searchService.createQuery()
query = query.setQuery(queryStatement)

def executedQuery = searchService.search(query)
def itemsFound = executedQuery.response.numFound
def items = executedQuery.response.documents

return items

Type 2: Make a Query for Content Based on Structure

The following code examples use the Site Item Service in Crafter Egnine to get content. You can find the interface for this service HERE.

def topNavItems = [:]
def siteDir = siteItemService.getSiteTree("/site/website", 2)

if(siteDir) {
    def dirs = siteDir.childItems
    dirs.each { dir ->
            def dirName = dir.getStoreName()
            def dirItem = siteItemService.getSiteItem("/site/website/${dirName}/index.xml")
            if (dirItem != null) {
                def dirDisplayName = dirItem.queryValue('internal-name')
                   topNavItems.put(dirName, dirDisplayName)
            }
   }
}

return topNavItems

Make a Query for Content Based on Structure with Filter

The following code examples use the Site Item Service in Crafter Engine to get content. In the example we build on the Site Item Service of getting objects under a specific tree in the repository by supplying a filter that will be applied to each object first to determine if it should be part of the result. Filters can make their determination based on the path or the content or even “outside” influence.

  • You can find the interface for this service HERE.
  • Note in the example below we define our own filter based on the ItemFilter interface found HERE.
  • However, you may use out of the box filters as well if they meet your needs. These are found HERE.
  • Finally be aware that for simple filename patterns, methods for this already exist in the Site Item Service and no filter is required (but they make for an simple to understand example.)
import org.craftercms.core.service.ItemFilter
import org.craftercms.core.service.Item
import java.util.List


def result = [:]
def navItems = [:]
def siteDir = siteItemService.getSiteTree("/site/website", 2, new StartsWithAItemFilter(), null)

if(siteDir) {
    def dirs = siteDir.childItems
    dirs.each { dir ->
            def dirName = dir.getStoreName()
            def dirItem = siteItemService.getSiteItem("/site/website/${dirName}/index.xml")
            if (dirItem != null) {
                def dirDisplayName = dirItem.queryValue('internal-name')
                   navItems.put(dirName, dirDisplayName)
            }
   }
}
result.navItems = navItems

return result


/**
 * Define a filter that returns only items that have a name that starts with "A" or "a"
 */
class StartsWithAItemFilter implements ItemFilter {

    public boolean runBeforeProcessing() {
        return true
    }

    public boolean runAfterProcessing() {
        return false
    }

    public boolean accepts(Item item, List acceptedItems, List rejectedItems, boolean runBeforeProcessing) {

      if (item.getName().toLowerCase().startsWith("a")) {
          return true
      }

      return false
    }
 }

Type 3: Make a Query Against Fields in a Content Object

The following code examples use the Site Item Service in Crafter Engine to get content. You can find the interface for this service HERE.

def result = [:]
def segment = "a segment value" // could come from profile, query param etc

// load a specific content object
def itemDom = siteItemService.getSiteItem("/site/components/sliders/default.xml")

// query specific values from the object
result.header = itemDom.queryValue("/component/targetedSlide//segment[contains(.,'" +  segment + "')]../label")
result.image = itemDom.queryValue("/component/targetedSlide//segment[contains(.,'" +  segment + "')]/../image")

return result

Building and Optimizing Multi-Channel Digital Experiences

Over the last few years, the internet has undergone a tremendous amount of fundamental change in its landscape, and we are now entering into a new reality with today’s Web. This change is driven by five major trends:

Social – The Web is much more social and much less anonymous than ever before. As an example, many sites and applications allow users to authenticate using shared / common identities provided by Facebook and Google.

Personal – While the internet is continuously expanding in terms of ubiquity, at the same time, it’s becoming much more local and much more personal in terms of user experience.

Mobile – the growth of mobile access to the internet is rapidly expanding. Access from tablets and phones has long since exceeded that from desktops and laptops.

Internet of Things (IoT) – The internet is no longer just websites and applications. Consumer devices of all kinds from beacons and thermostats to digital assistants are now connected.

Digital Natives – We now live in a time where our children have had access to to extremely powerful computing and connectivity their entire lives.  As they become decision makers we must realize that their experience and hence their expectations are vastly different than our own.

Each of these trends is a significant development in user experience in their own right. However, these trends feed and reinforce one another in a way that’s accelerating change and adoption across all trends.

The very way we communicate with and understand our customers is changing, and when foundational change like this occurs, those who recognize the change and move quickly to adapt have the most to benefit. Adapting to these important changes should be on your near-term road map.

Let’s take a look at each of these trends in more detail to get a deeper sense of reasoning and urgency for change.

Social

Social Media is ubiquitous now, with Facebook reporting over 1.8 billion active users, Snapchat at 100 million users and Twitter users estimated to exceed 315 million. With these numbers – combined with the fact that studies show that while only 14% of consumers trust traditional advertising, 78% trust peer recommendations. Social communication is personal, emotional, timely, relevant and propagated amongst peers – it’s easy to see why social is so important.

Personal

We all know that over the last twenty five years the Web has made the world a much smaller place by knitting our global communities together through an increasingly ubiquitous network. This trend continues today, but on a whole other level. The internet is increasingly being used to deliver the activity, news, reviews, sales and other relevant data and services that are occurring and are available to us right in our immediate vicinity. All this information is being delivered right to us in real time through our mobile devices. While the world may be getting smaller, our personalized experience is growing larger.

Mobile

There are 7.4 billion people in the world, of which, 6 billion of us own an internet-enabled mobile device of some kind. In-short, almost everyone in the world is connected with at least a basic mobile device. Additionally, 1 third of the world’s connected users have at least 1 or more smartphone or tablet capable of delivering extremely rich digital experiences.  Competitive organizations Uber, Lyft and many others are leveraging this connectivity to change the way business is done.

Internet of Things (IoT)

The Internet is no longer about websites and apps accessed by computers and mobile devices. Our cars, the stores we shop in, the devices in our homes and all kinds of devices throughout industry are constantly connected and communicating with other devices and systems via the internet.  We call this new reality the Internet of Things (IoT.) Even at this “early” stage in 2017, there are some 20 billion IoT devices connected. IoT is almost certainly the “next” mega-trend for the internet. Pages and apps are rivaled in volume by APIs. Human users now share the web with “Robots”.  The “Next mega-trend” is in fact already upon us. IoT opens a universe of new capabilities and user experiences as well as new challenges.

Digital Natives

Anyone who has a “tween” or teenager today knows that we’re already living a new evolution of the population. From birth, our children have grown up with an extreme level of connectivity and computing power. “Computing” is unbelievably fast, highly visual and tactile. Connectivity is ubiquitous. The applications they’ve grown up with are highly interactive, social and personalized. They don’t know anything different. A new kind of user is born. Businesses that don’t adapt quickly as this group comes of age as the next wave of consumers and employees will lose big to the companies that that do.

Meeting the Demands of the Era of Engagement

Each of these trends reinforces the others, and fuels further adoption and drives innovation. It is these technologies – and the behaviors and capabilities they foster – that have brought us to a new era, which Forrester calls the “era of engagement”. This is a new reality where the distinction between on-line and offline is becoming ever more blurred and the experience ever more immersive.

Driving these trends are people – our friends, leads, customers, critics, and fans. This is our audience and the other half of the conversation. And it’s no surprise that in today’s reality – that is, in the age of engagement – they want to participate and expect us to engage them on their terms – on their schedule, in the context of their location, in their language, and optimized for their device.

Your audience has also become accustomed to a personal experience, and they expect a personalized, coherent and consistent customer experience regardless of whether they are in your brick and mortar store, on your Facebook page, or on your website. To effectively tackle this challenge of serving a mass audience with limited resources, enterprises require strategy and effective tools to help get the job done.

Does Traditional Web Content Management Get Us Where We Need to Go?

Traditional Web Content Management (WCM) solutions are focused on building websites, landing pages and blogs.  As we’ve seen, today’s challenges go well beyond these demands. Web Experience Management (WEM) provides us with the toolset to take on this otherwise daunting challenge. The capabilities of WEM allow you to create, manage, and deliver dynamic, targeted and consistent content across various online channels including your website, social media, marketing campaign sites, mobile applications, and more.

In short, it takes a lot more than a traditional Web CMS or Web Content Management (WCM) can provide to meet these needs.

Key Principles of Experience Management

Before we get too technical let’s take a step back and ask what kind of guiding principles can adopt that will help us meet the challenges of the “Era of Engagement.”

  1. Great experiences are designed, built and delivered by a multidisciplinary teams.
  2. New data and channels can spring up at any time.
  3. Time to market is king and the platform that enables the first mover is the king maker. Agile approaches and shorter delivery cycles are extremely important!
  4. Great experiences are relevant and relevancy drives value.
  5. Technical architecture matters and ultimately defines the limits of what is possible.
  6. Simplicity is paramount. True simplicity comes from the separation of concerns and good architecture rather than specific technologies, vendors and shrinkwrap.
  7. Today’s experiences exist anywhere and everywhere.
  8. Experience is a journey rather than an interaction. Customers and users expect each interaction to leverage previous interactions.
  9. “One size fits all” is a fallacy. Each organization has its own unique needs, existing skill sets, and back ends.
  10. Openness is key to innovation at scale.

Translating Principles to Technology

Based on the principles above we start to get a clearer picture of the kind of technical architecture we need:

  1. A platform that is content first.  Content must be cleanly separated from code and presentation so that it can be reused and consumed across multiple channels.
  2. Foundational support for dynamic personalized experiences. From the structure and retrievability of the content to the amount and types of data you can store about your users, to the complexity of the rules you can write; personalization is an architecture concern, not a feature.
  3. Strong support tool and process for both content creators and developers.
  4. An open architecture that favors innovation with scale, security, performance and performance.
  5. True independence between content creation / management and delivery.  Content authoring and content delivery, while closely related, they are really two very separate concerns.  At scale, publishing needs to be both push and pull. Truly decoupled architectures align best with today’s needs.

Choosing a WEM Platform

Most people choose a CMS based on long check list of features and a demo of the authoring tools.  While checklists and demos are very important they don’t get at something much more fundamental, and in the case of the challenges we face, important and that’s architecture.  Architecture matters.   While many CMSs pass the checklist-demo gauntlet, nearly every CMS solution, regardless of what they claim, is an evolution on WCM and is ill-equipped for the Era of Engagement and beyond.  The proof is in the architecture.  Since so many CMS solutions out there claim to handle WEM but fail to deliver architecturally let’s dig in to some of the issues:

  • Most CMS platforms “couple” authoring and delivery.  While this is ok for some use cases it has a number of limitations:
    • Authoring and delivery often require unique security integrations.
    • If authoring and delivery are coupled in the same database, work-in-progress content is at risk to a security breach.
    • Coupled systems demand that authoring and delivery components share the same Service Level Agreements (SLAs) and scale out.  This significantly complicates the architecture and increases the total cost of ownership.
    • Most coupled architectures have no native PUSH support for content deployment which means they only support PULL style publishing (content rendered as HTML and JSON) and do not easily publish to disconnected / external systems via APIs.
  • Almost every CMS out there uses RDBMS database and JCR backed content.  This approach leads to a significant number of problems and constraints:
    • Scaling relies on clustering and replication and is difficult and clunky.
    • While clustering and replication schemes within a data center are approachable, globally distributing the topology via clustering and replication is whole other level of hurt.
    • Because code and content is stored in a database (in some cases just code) it’s extremely hard to innovate quickly because it’s very difficult to move code and/or content between environments and through the development process.
  • Many CMS’s are built on poor technology choices that ultimately slow the rate of development, deployment and kill innovation:
    • PHP a great example of technology that’s widely used in the CMS space.  The issue with PHP is that when it comes to heavy lifting or integration it breaks down.  Most PHP platforms like Drupal or WordPress require Java backed capabilities like Solr as soon as the going gets tough.  Making the right technology choices avoids work-arounds and leads to more simple, more cost effective and more maintainable infrastructures.
    • Older technologies like JSPs, Sling along with proprietary development and theme frameworks have huge learning curves or require hard-to-hire skills due to their niche application.
    • Approaches like war files and even OSGI are heavy deployment technologies slow time to market dramatically.  Scripting offers a much better approach for most functionality.
  • Most CMS’s have the wrong approach to user data. Storing user data in a traditional database doesn’t work at scale with today’s international regulations.
    • Many countries have on soil data requirements.
    • Many applications need to be able to access user data — but only see what they need to see.
    • Real personalization often requires a tremendous amount of data which in some cases must be analyzed in real time.  Traditional RDBMS doesn’t fit the bill.
  • Most CMS’s treat personalization, contextualization and localization as a feature rather.  They are not features. They must be part of the very fabric of the platform in order to succeed at scale.  Only the most basic use cases can supported unless these are treated like architecture rather than bolted on features.

Crafter CMS to the Rescue

Crafter CMS, a modern open source, Java based Experience Management platform is architecturally different than all of these other solutions — which means it can deliver different results.   Crafter is a complete and comprehensive WEM application built on top of leading open source technologies like Spring, Solr and Git – that provides multi-channel digital experience management through a rich user interface and a high-performance content delivery system, while providing content creative and development teams with the real tools they need to craft amazing personalized digital experiences for their customers.

Crafter CMS consists of thee major applications – Crafter Studio and Crafter Engine and Crafter Profile.

Crafter Studio provides all the content management services and integrates with repositories like Git, Alfresco and other CMIS based platforms to enable authoring, management, and publishing of all content. Crafter Studio provides a comprehensive set of user-friendly yet powerful features for managing and optimizing of experiences.  

Crafter Engine provides high-performance content delivery services that can power any type of Web or mobile application. It consumes content published through Crafter Studio and provides developers with the foundation for quickly building high-performance, flexible Web and mobile applications. Crafter Engine provides out-of-the-box integration with numerous data sources and application services. A key feature of Crafter Engine is its ease of integration. Modern WEM applications must integrate with one or more enterprise systems or third party services. Crafter Engine can easily be integrated with other applications such as CRM and sales force automation, marketing and email campaign management, and other enterprise systems required for optimizing the Web experience for your audience.

The management and delivery of content is decoupled and separate, allowing each system to be optimized for its purpose, audience and scalability requirements. Multi-channel publishing is naturally supported, and mobile devices and applications are enabled by means of both native device support (iOS and Android) and HTML5 support.

Crafter Profile provides a secure and scalable platform for storing, querying and analyzing user data at each interaction in your customer journey.  As it stands, data privacy concerns and international regulations are extremely complex and getting more complex with each passing day.  Crafter Profile leverages MongoDB and can store user data of any type and volume can be stored, the data is globally distributable to meet on-soil PII requirements. Further, Crafter Profile offers “Big Data” processing and analysis to the delivery tier to drive true personalization.

Content First

Crafter CMS completely separates content, code and presentation.  Content is captured and stored as XML and other static assets (images, videos, PDFs, etc) in the repository.  By leveraging a file based, XML approach, content is easily moved between environments and systems for work processes (e.g. translation) and is easily published to/for any kind of content consumer.

Extreme Scalability

Performance and scalability are an architecture concern.  If you have the wrong architecture you’re forced to use work-arounds like CDNs or build replication based science projects at the data layer.  Crafter avoids these by getting the architecture correct from the start.  Crafter Engine is a high performance Spring MVC based application that can render dynamic, personalized content in any format within milliseconds. Crafter Engine a shared nothing component that does not rely on external databases.  By leveraging local in-memory databases, fast disk and local Solr, Crafter Engine provides the proper foundation to build a cloud scalable, elastic globally distributed infrastructure.

Personalization in the Core

Crafter CMS treats personalization as a part of the architecture rather than a bolt-on feature. Crafter Engine and Crafter Profile combine to deliver a platform for high-performance personalization at scale with complete scriptability, security and regulatory compliance.

Truly Decoupled

Crafter CMS is a decoupled CMS that separates authoring and publishing capabilities into their own subsystems in order to achieve the many benefits discussed above. Crafter CMS makes it easy for authors to create, manage, and deliver content in any format from RESTful APIs/JSON to HTML5, and even virtual and augmented reality via AFRAME. So for modern digital experiences that must be delivered across many channels, Crafter CMS provides a decoupled architecture combined with Content as a Service capabilities.

Built for Innovation

To be truly innovative you have to be great at both building and delivering.  What good is a platform that performs well but is hard to update or a system that’s easy to develop for but is hard to deploy new features on?  Crafter CMS is built on today’s leading open source technologies like Java, Spring, Groovy, Freemarker, Solr and Git.  This means your developers don’t need to learn a vendor specific stack to get started.  The right technologies make all the difference.  Crafter CMS combines the integration power of Java with the speed of scripting (via Groovy for controllers and Freemarker for templates.) Further code related assets like templates, CSS, Javascript etc in are stored and deployed from Git.  This means your developers work locally with desktop tools if they want, and can leverage their standard DevOps process and tools to move features and functionality forward to production.

Conclusion

There have been major revolutions in technology like the industrial revolution, the amazing growth of the web 1.0 and many others throughout history that have changed the way we work and live — but there has been no changes like the kind of change we see unfolding now.  The key difference is: the the number things changing at once,  the pace at which the changes are occurring and the fact that all of the changes feed and reenforce one another’s momentum.

To deal with this new challenge and the pace at which it is advancing you will need to think differently and arm yourself with new ways of working, new architectures, new technologies and new tools.  Old guard and rebranded WCM solutions are no match for the future we face. With the growth of social, mobile, the Internet of Things and the coming of age of digital natives we must evolve, innovate and be able to adapt much more quickly in order to survive. Proper architecture and solution design will play a much bigger role in driving success than simple features. Crafter CMS is open source WEM project and platform that was built from the ground up and has an architecture designed for today and tomorrow’s digital experience needs.

Web CMS Architectures: Coupled, Decoupled, or Headless?

Generally speaking there are two main types of Web/Experience Content Management System (CMS) architectures: coupled and decoupled.  Historically the term “coupled” has referred to the relationship between the authoring tools and content delivery of your live site.  With the introduction of headless CMS platforms the landscape has become a bit more complicated.  Are headless CMS’s the new decoupled CMS?  Let’s explore.

Headless CMS

Headless CMS technology provides content to the presentation tier (or content consumer) as a service, typically via a RESTful interface in JSON or XML format. This is known as Content as a Service (CaaS.)

 

The main advantage of a headless CMS (CaaS) architecture is that content is written and published once but  can be requested and presented uniquely by any number of different channels / content consumers.

Coupled vs decoupled

The classic example of a coupled CMS architecture is a blog engine. In a coupled system, the underlying store for your content serves both authoring and delivery.  Your authoring capabilities are part of the live delivery system but are available only to those who have permissions.  In a coupled system, the process of making content live is typically a matter of setting a flag in the database.

A decoupled system by contrast is one that puts authoring and delivery in separate applications, and potentially, on separate infrastructure. In a decoupled system, the process of making content live is done through a publishing mechanism where content is pushed from the authoring platform (and underlying content repository) to a content delivery infrastructure.

So which approach is the right architecture? The reality is, there is no single right or wrong answer.  The answer depends on context: alignment with your requirements, your business process and your business goals.  The topic of coupled vs. decoupled is not a new one.  It’s a debate that has been going on for a long time and will continue to go on so long as there continues to be Web CMS platforms, “fan boys” and a perception that one size fits all.  The more appropriate way to approach the question is to analyze the strengths and weaknesses of each approach and then to consider these in the context your own specific use cases.  We’ll see that in different scenarios we come to different conclusions on which architecture to use.

Coupled architecture

Let’s take a look at the strengths and weaknesses for a coupled CMS architecture.

Strengths

  • Easy to setup and deploy a single instance.
  • Authoring and delivery are on the same infrastructure which can make it easier to build cohesive authoring tools.
  • Relatively easy administration of production system for single sites

Weaknesses

  • SLAs (Service Level Agreements) are coupled — meaning that authoring has to be just as available as the live site.
  • Coupled infrastructures are generally more complex to scale, as they typically depend heavily on database scalability.
  • Content is typically captured in a database schema meant for delivery on the site.  This can make integration and migration difficult.
  • Software complexity is higher because the code base contains both authoring and delivery concerns.  All but the most trivial CMS projects involve some development, and thus becomes an development issue.
  • Pushing content in and out of the CMS to and from third parties takes place in the same system that runs your live site.  Integration is not native to the architecture and it may impact the system’s performance.

Decoupled architecture

Let’s take a look at the strengths and weaknesses of a decoupled CMS architecture.

Strengths

  • Easier to scale for high traffic websites, and to handle multi-site management.
  • SLAs are decoupled.  Authoring can be down for upgrades without impacting delivery. The reverse is also true.
  • Scale only the components that you need.  If you are not adding more authors then there is no need to scale out authoring.  This affects the complexity of the solution and also license costs where they are involved.
  • Code complexity is isolated within each of the two components (authoring and delivery).  Each piece can be as simple or complex as is needed without impacting the other.
  • Integration is a built in concept, as content is natively published to a the remote delivery system, it is generally straightforward to push to other systems as well. Also note, integration takes place on the authoring tier safely away from the live site protecting stability and performance.
  • Content migration and sharing with other systems is generally much more innate to the architecture.
  • Multi-channel support by nature, as publishing to mobile apps, social channels, and other digital channels is a natural extension of the native publishing capability.
  • Content sharing and syndication are more naturally supported.
  • When complexity is isolated and scaling is simple, it’s easier to develop and deploy rich features to your users.
  • Integrating with devOps is much easier.  When you need to integrate your development tools, process/automation and source code repository you are inherently entering in to a discussion about security and systems administration — all of which are significantly more approachable if authoring and delivery systems are separated.

Weaknesses

  • Setup has more components and can be more complex.
  • Publishing introduces additional points of failure.
  • Sub-division of components can go too far driving up complexity and driving down the cohesion of the user experience.

Is a headless CMS a decoupled CMS?

While a headless CMS architectures do “decouple” content and presentation, they do not dictate anything about the publishing capabilities of the CMS.  And while decoupling content and presentation is certainly one of the most important things you can do architecturally, as we can see above, it’s not the only major architecture decision you need to consider. Therefore, it is important to maintain the traditional use of the word decoupled CMS as it relates to separation of authoring and delivery capabilities.

A headless CMS can either be coupled or decoupled.

Further, any CMS worth its salt today, (decoupled or not) must be support headless/CaaS based content delivery.

Making a choice between coupled and decoupled CMS

It’s clear that each approach has its own strengths and weaknesses.  A coupled approach may work really well in one scenario while a decoupled approach may be much more appropriate in another.

Our analysis reveals that a coupled architecture can work well for web apps, mobile apps, and other content-backed digital experiences that need to be set up and put on line in short order and that do not need to be able to scale quickly or to publish content beyond the website itself.  On the other hand, we see that a decoupled architecture is ideal for websites / content back ends that require high levels of availability and performance, need a lot of tailored functionality, must be integrated with third party business systems and must publish to one or more digital channels beyond the website itself.

Crafter CMS

Crafter CMS is a decoupled CMS that separates authoring and publishing capabilities into their own subsystems in order to achieve the many benefits discussed above.  Crafter CMS makes it easy for authors to create, manage and deliver content in any format from RESTful APIs/JSON, to HTML5, and even virtual and augmented reality via AFRAME. So for modern digital experiences that must be delivered across many channels, Crafter CMS provides a decoupled architecture combined with Content as a Service capabilities.