- Drupal 8 is designed with a mobile-first approach to make content editing and site administration easy on mobile devices through a responsive interface. - It includes responsive core themes, breakpoints for detecting screen sizes, and responsive image handling to serve optimized images for different devices. - Developers benefit from modernized front-end features, native mobile app integration via web services, and tools for building decoupled responsive applications.

1. Responsive and Ready
Why Drupal 8 Is Ideal for Building Mobile-first
Experiences on Any Device or Screen
Preston So
Development Manager, Acquia Labs

2. 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

3. 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

4. Why Drupal 8 is now
mobile-first

5. Why mobile-first?
→ “There is still no mobile-friendly CMS.”
—Brian Fling in 2011

6. 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

7. 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”

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

9. 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

10. 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)

11. 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

12. 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

13. 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

14. For editors:
Responsive administration
and toolbar

15. In Drupal 7 …
→ Drupal 7’s administration menu wasn’t
intended for use on a mobile screen,
leading to some ugly results:

17. In Drupal 8 …
→ All of Drupal’s core functionality is
accessible through a responsive
administration layer.
→ Including installation …

18. 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.

19. 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.

20. 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

22. 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)

23. 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.

25. 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).

28. For themers:
Responsive themes

29. 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.

30. 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).

32. 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.

34. 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.

35. 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).

36. For site builders:
Breakpoint and
Responsive Image

37. 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.

38. 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.

39. 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.

40. 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.

41. 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.

42. 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.

43. 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

44. .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+

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

46. 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.

48. 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.

49. 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

50. Drupal 7 equivalents
→ Breakpoints (Breakpoint for Drupal 7)
! drupal.org/project/breakpoints
→ Picture (backport of Responsive Image for Drupal 7)
! drupal.org/project/picture

51. For developers:
Native mobile apps and
Web Services in core

52. 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

53. 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.

55. 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

56. More about decoupled Drupal
→ Decoupled Drupal: What It Means for Developers
! acquia.com/resources/webinars/decoupled-drupal-
what-means-developers

57. 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

58. Upcoming webinars
→ Best Practices for Drupal Performance Tuning
! Fabien Potencier, Sensiolabs; Wim Leers, Acquia
! Jan. 12, 11am EST

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