Sass Libraries

Breakpoint

Breakpoint is a Sass and Compass based tool for handling media queries

It has become the go-to media query solution for those working with Sass

Singularity

Singularity is a Sass and Compass based tool for working with fluid and responsive grids

It has quickly become one of the two most prominent grid frameworks when working with Sass

Unlike Twitter Bootstrap or Zurb Foundation, Singularity is a production ready tool that doesn't have pre-defined grids, but allows designers and developers to build their own

Toolkit

Toolkit is a Sass and Compass based set of mixins and functions to assist in progressive enhancement and responsive web design

The most used items from it include its Border Box, Clearfix, and Intrinsic Ratio mixins, the last being used for creating responsive embedded videos

Sassy Maps

Sassy Maps is a Sass and Compass based framework for working with maps in Sass

Memoization frameworks allows for increased performance of repeated function calls

Drupal Contributions

Aurora

Aurora is a Drupal base theme optimized for responsive web design, especially with Sass

The Drupal base theme used for sites built on Publisher

Borealis

Borealis is a Drupal module providing easy to implement responsive images based on industry best practices

A rewrite is planned to increase performance and decouple the JavaScript from Drupal

Magic

Magic is a Drupal module allowing for advanced theming optimizations, including some basic performance optimizations, across all themes

CSS/JavaScript removal and enhancements, development improvements

Other Projects

EQ.js

EQ.js is a JavaScript library used to provide element query like functionality

Allows for a single component to be built that will adapt to the layout it's put into

North

North is a set of standards and best practices for responsive web design and development, from process through front end code

Development Process, Content Strategy, Visual Design, Responsive Web Design, Performance, and HTML/CSS/JS all covered.

Style Prototypes

A Style Prototype is a design in browser tool that leverages all above projects to modernize the design process for modern web development projects

The web is not print; this is a tool for designing websites, not print

Projects In Use

DBtv

• Aurora
• Borealis
• Breakpoint
• Singularity
• Toolkit
• Style Prototypes

The project ended before getting too far into using Style Prototypes

USA

• Aurora
• Borealis
• Breakpoint
• Singularity
• Toolkit

Oxygen

• Aurora
• Borealis
• Magic
• Breakpoint
• Singularity
• Toolkit

Team wanted to use Style Prototypes, they were discussed with design agency but never delivered as it was a fixed bid and the agency seemingly cut corners

Lighthouse

• Breakpoint
• Singularity
• Style Prototypes

Style Prototype started, but the designer left the team before it could be completed

NBC

• Aurora
• Magic
• Breakpoint
• Singularity

Telemundo

• Aurora*
• Borealis*
• Breakpoint*
• Singularity*
• Toolkit*
• Sassy Maps*
• eq.js*
• Style Prototypes
• North

* - What we plan on using, as development hasn't started yet

The Intersection of Design and Development

Domain Modeling and Content Strategy

Domain Modeling is the act of creating a conceptual model of the various entities, their attributes, roles, relationships, and the constraints that govern the problem domain. It is created in order to represent the vocabulary and key concepts of the problem domain.

Domain Modeling is most often a software engineering technique used to get product owners and developers all talking the same language.

Content Strategy is the planning, development, and management of content. Creating an effective content strategy involves analysis, modeling, and an understanding of the system in which the content will be displayed

At its most essential, content strategy is a form of domain modeling. It requires an analytical mind to perform and describes and creates a model of the various types of content, their attributes, roles, relationships, and constraints.

User Experience Design and Information Architecture

User Experience Design is the art and science of guiding a user's behaviors and attitudes as they interact with computer systems. It includes working out a system's ease of use, efficiency, and perceived utility.

Information Architecture is the structural design of information, especially in software, to support usability and findability. It concerns what attributes of what types of content are displayed and used where and how on a site.

In order for a user experience design to be effective, it needs to be backed with a strong information architecture. In order for that information architecture to be effective, it needs to be backed by the content strategy produced by the modeling of the product's domain.

Development

As the developed content strategy (including the information architecture) is effectively the modeled domain of what is being built, both back and front end developers need to be part of those processes from the beginning. They can provide valuable insight into the whole process, especially when it comes constraints of the system being worked in.

As with content strategy, having developers involved in the user experience process can help to create better experiences. Knowing the limitations and possibilities of the technology being worked with allows for an enhanced user experience.

Information architecture, what pieces of what content are most important, directly correlates to source order of a page. A page's source order directly correlates to page's user experience as it limits how items can be laid out.

Front End Framework

Global Content Strategy

One of the challenges faced in implementations is the tight coupling of our content management system with the rendering of our front end presentation

The content strategies of each site should not need to vary as much as they do. Our developers, architects, and product owners need to be well versed in content strategy in order to make better decisions about implementations

One of the best ways we can accomplish this is by decoupling the content management from content display.

Drupal is a fantastic content management system, but if we are to provide any sort of normalized presentation framework (from native apps to web apps), we need a normalized view of our content

This means we need a normalization service to asynchronously read our various Drupal services and normalize the content into a versionable REST service that can be accessed by any app (and potentially combined and mixed into larger feeds). A single interface for all apps.

While I haven't written much code in it, it appears as if Go is the language to use as it appears to have first class language support for building REST services and working asnychronously. It's also got a vastly smaller memory footprint and it just as fast, if not faster than Java. See also 30 to 2 servers with Go

Web App Framework

In decoupling front end rendering from Drupal, we will need a web app framework to make building modern, standards based (North standards) websites quick and easy

We should standardize on a JavaScript MVC framework to allow for single-page apps and create a collection of components to be used with that framework. Those components can then be used to spin up a new project quickly by skinning and each component.

By removing the focus of builds from recreating the frontend each time and taking time to ensure every new build maintains our standards, builds can focus more intently on content strategy and information architecture, allowing for better overall websiteS

Reduced Implementation Cost

When developing websites, especially responsive web sites, most of the time and cost of the development is wrapped up in front end development. This also holds true for upgrading systems where the rendering is tied to the CMS

By removing the coupling, we will reduce the cost of upgrading to newer or potentially even changing CMS systems because all content will be passed through the content normalization system and all presentations, from web to native apps, will feed off of that system.