Responsive and Ready Why Drupal 8 Is Ideal for Building Mobile-first Experiences on Any Device or Screen

Preston So Development Manager, Acquia Labs

Welcome! → Preston So (@prestonso) has designed websites since

2001 and built them in Drupal since 2007. He is Development Manager of Acquia Labs at Acquia and co-founder of the Southern Colorado Drupal User Group (est. 2008). !  drupal.org/u/prestonso !  preston.so@acquia.com

What we’ll cover → Why Drupal 8 is now mobile-first → For editors: Responsive administration and toolbar → For themers: Responsive and mobile-friendly themes → For site builders: Breakpoint and Responsive Image → For developers: Native mobile apps with Web Services

Why Drupal 8 is now mobile-first

Why mobile-first? → “There is still no mobile-friendly CMS.”

—Brian Fling in 2011

Why mobile-first? → “If I were to start Drupal from scratch today, I’d build it

for mobile experiences first, and desktop experiences second.” —Dries Buytaert, DrupalCon Chicago 2011

Mobile-first for editors → “[A number of mobile companies] all believed that in less

than two years, most of their editors that report from the field will be using tablets instead of laptops.” —Dries Buytaert, “Mobile for Drupal 8”

Mobile-first for themers → Mobile-friendly core themes such as Bartik and Seven → Easy construction of mobile-friendly contributed and

custom themes → Mobile-friendly base themes

Mobile-first for site builders → There are many contributed modules for mobile

solutions, “but in order for a CMS to earn the moniker ‘mobile-friendly’, setting it all up needs to be easy.” —John Albin Wilkins, Drupal 8 Mobile Initiative lead

Mobile-first examples → Native apps (iOS and Android applications) → Web apps (HTML5 and JavaScript applications

optimized for mobile) → Mobile/desktop domain switching (device detection to

switch between the two) → Responsive design (responds to device’s viewport size)

Drupal 8 Mobile Initiative priorities → Web services for native mobile applications (WSCCI) → HTML5 support for HTML5 web applications (HTML5) → Mobile-friendly Drupal administration → Responsive Drupal 8 core themes → Front-end performance enhancements

Mobile-friendly administration → “If users can’t create content or administer a Drupal site

while on a mobile device, we have a serious problem.” —John Albin Wilkins

Responsive web design → “Responsive design is the hottest technique in

producing mobile-friendly websites because, relative to traditional mobile building techniques, it lowers the development cost for including mobile device support.” —John Albin Wilkins

For editors:Responsive administration and toolbar

In Drupal 7 … → Drupal 7’s administration menu wasn’t

intended for use on a mobile screen, leading to some ugly results:

In Drupal 8 … → All of Drupal’s core functionality is

accessible through a responsive administration layer.

→ Including installation …

In Drupal 8 … → … and setting up and configuring

modules for your site. → Seven, the default administration

theme shipped with Drupal 8, is now 100% responsive.

Content editing → Even in-place editing and WYSIWYG

have been optimized for small screens.

→ The content creation page is now a pleasant experience on your mobile device.

Responsive toolbar → “Drupal 8 also now sports a shiny new administrative

toolbar that automatically expands and orients itself horizontally on wide screens, and collapses down to icons and orients vertically for smaller screens.” —Angie Byron, Drupal 8 core maintainer

Responsive toolbar → Accessibility was a major focus in the

toolbar’s development, so screen readers can also interact with the toolbar to jump to various parts of the site.

→ If you’re interested in the backported module for Drupal 7, check out Navbar (drupal.org/project/navbar)

Contributed solutions → Ember is a contributed theme (part

of the Spark distribution) which provides a different design and user experience for those who may not like Seven.

Responsive preview (contributed) → Though not part of core, the Responsive Preview

module is an easy way within Drupal to preview what your site looks like in various devices and viewports, including iPhone, iPad, and Android devices.

→ Switching between portrait and landscape orientations is easy.

→ The module is available for Drupal 7 as well (drupal.org/project/responsive_preview).

For themers: Responsive themes

Responsive core themes → Core themes are responsive too. → Classy is a base theme (used by Bartik and Seven in

core) that provides many familiar classes that Drupal 7 themers are used to. You can slim down your markup or prevent conflicts with other classes by not using it.

→ Bartik is a default theme familiar to Drupal 7 themers that is newly responsive for Drupal 8.

Responsive core themes → All core responsive themes now automatically reflow

elements like menus and blocks to fit well on mobile devices.

→ If the viewport is too narrow, horizontal elements switch to a vertical orientation instead.

→ Built-in support for responsive images (more shortly).

Responsive tables → All tables used in Drupal 8 (there are a lot!) are now

responsive. Table columns can be declared with a high, medium, or low importance.

→ You can make use of this prioritization in the tables you build in Views as well, so you don’t have to worry about coding responsive tables.

Responsive base themes → If you’d prefer to use a base theme like those in Drupal

7, Omega now has an initial release for Drupal 8 (drupal.org/project/omega), and Zen for Drupal 8 is still in development (drupal.org/project/zen).

→ There are now many responsive themes available for Drupal 8 in the contributed theme ecosystem.

Responsive for Drupal 7 → You can use Responsive Bartik to have the responsive

awesomeness of Bartik in Drupal 8 on your Drupal 7 sites (drupal.org/project/responsive_bartik).

→ For responsive tables, you can use the Responsive Tables module (drupal.org/project/responsive_tables).

For site builders: Breakpoint and Responsive Image

Core mobile-friendly modules → With Breakpoint, you can now define breakpoints within

your theme or module, which gives you a native way to introspect, use, and share your breakpoints.

→ With Responsive Image, you can define image sets that Drupal will use to automatically select the appropriate image to serve for a given device.

→ Let’s look at each of these in detail.

Breakpoints → The Breakpoint module keeps track of the height, width,

and resolution breakpoints where a responsive design needs to change in order to respond to different devices being used to view the site.

Breakpoints → A breakpoint separates the height or width of viewports

(screens, printers, and other media types) into steps. For instance, a width breakpoint of 40em creates two steps (up to 40em and above 40em).

→ Breakpoints can be used to define when layouts should shift from one form to another, when images should be resized, and other changes upon viewport changes.

Media queries and breakpoints → Media queries encode breakpoints, like “(min%width:+

40em)”. → In Drupal, breakpoints are media queries with additional

metadata, such as a name and multiplier information. → Breakpoints can be used to define when layouts should

shift from one form to another, when images should be resized, and other changes upon viewport changes.

Resolution multipliers → Resolution multipliers are a measure of the viewport’s

device resolution, defined to be the ratio between the physical pixel size of the device and the device-independent pixel size.

→ The Breakpoint module defines multipliers of 1, 1.5, and 2; when defining breakpoints, modules and themes can define which multipliers apply to each breakpoint.

Breakpoints and breakpoint groups → Breakpoints can be organized into groups. Modules and

themes should use groups to separate out breakpoints meant for different purposes, such as breakpoints for layouts versus breakpoints for image sizing.

→ Modules and themes can use Breakpoint to define breakpoints and their groups, as well as to assign resolution multipliers to breakpoints.

Getting started with breakpoints → Define a themename.breakpoints.yml or

modulename.breakpoints.yml file to get started. → Properties:

!  label: Human-readable name for the breakpoint !  mediaQuery: Media query itself !  weight: For ordering breakpoints in modules/themes !  multipliers: Supported pixel resolution multipliers

.breakpoints.yml bartik.narrow:+++label:+narrow+++mediaQuery:+‘all+and+>>+min%width:+560px)’+++weight:+1+++multipliers:+++++%+1x+

bartik.mobile:+++label:+mobile+++mediaQuery:+‘’+++weight:+0+++multipliers:+++++%+1x+

Resolution multipliers bartik.mobile:+++//+…+++multipliers:+++++%+1x+++//+Default+++++%+1.5x+//+Supports+Android+++++%+2x+++//+Supports+Mac+retina+display+

Defining responsive image styles → Responsive images use the <picture>+element. → You can define image styles to be used per breakpoint

by clicking “Add responsive image style” on /admin/config/media/responsive-image-style.

→ From this page you can choose the image styles that will be used for each breakpoint.

Responsive images in image fields → Once you’ve defined responsive image styles, you can

use them in the display settings for your Image fields. → You can do this from the “Manage display” page for a

given content type or taxonomy vocabulary (entity type) that the Image field is attached to.

More documentation and resources → Working with breakpoints in Drupal 8

!  drupal.org/node/1803874 → Responsive Images in Drupal 8

!  drupal.org/documentation/modules/responsive_image → Adding responsive images to your Drupal 8 site

!  advomatic.com/blog/adding-responsive-images-to-your-drupal-8-site

Drupal 7 equivalents → Breakpoints (Breakpoint for Drupal 7)

!  drupal.org/project/breakpoints → Picture (backport of Responsive Image for Drupal 7)

!  drupal.org/project/picture

For developers:Native mobile apps and Web Services in core

Front-end improvements → Modernizr (device detection) in core → Selective loading of JavaScript and CSS assets (define

an asset library and add it to #attached for render) → The default installation of Drupal 8 loads no JavaScript

for anonymous users → Progressive page loads with BigPipe

!  buytaert.net/making-drupal-8-fly

Web services and applications → The Web Services and Context Core Initiative (WSCCI)

helps native mobile application and single-page JavaScript application developers to provide JSON output for their application models.

→ Web Services in core allows for core content entities to be exposed as JSON or JSON+HAL. Views also natively supports the new “REST export” display type.

Native mobile and single-page apps → Drupal iOS SDK for iPhones and iPads

!  github.com/kylebrowning/drupal-ios-sdk → DrupalCloud for Android

!  github.com/INsReady/DrupalCloud → Titanium (JavaScript compiling to Java or Objective-C) → Ionic for Angular → React Native for React

More about decoupled Drupal → Decoupled Drupal: What It Means for Developers

!  acquia.com/resources/webinars/decoupled-drupal-what-means-developers

Upcoming webinars → Security through Standards: Compliance and

Confidence in the Cloud !  Al Nugent and Brian Castagna, Acquia !  Dec. 17, 1pm EST

→ Make Your Website Easily Accessible with Drupal 8 !  Mike Gifford, Drupal Accessibility Maintainer !  Jan. 7, 1pm EST

Upcoming webinars → Best Practices for Drupal Performance Tuning

!  Fabien Potencier, Sensiolabs; Wim Leers, Acquia !  Jan. 12, 11am EST

Thank You @prestonso drupal.org/u/prestonso preston.so@acquia.com