Understand the Drupal 8 Mobile Initiative

Understand the Drupal 8 Mobile Initiative

In the Chicago Keynote , Dries said: "If I were to start Drupal from scratch today, I'd build it for mobile experiences first, and desktop experience second". After the Chicago DurpalCon Dries appointed JohnAlbin as the Mobile Initiative lead. Lead by him here we are today 2 years from then with all mobile features Dries would have dreamt of and more! Read John's introductory blog at: http://palantir.net/blog/drupal-8-mobile-initiative

This blog walks you through the different areas of the mobile initiative that are part of Drupal 8 starting with the Drupal 7 mobile guide!

Drupal 7 mobile guide

The very first step by JohnAlbin as part of the mobile initiative was to write a set of handbook pages that can serve as a Drupal 7 mobile guide. The guide walks you through concepts and approaches to mobile Apps and mobile websites. The guide also provides detailed implementation and integration approaches with Drupal 7. Refer the documentation pages at: http://drupal.org/documentation/mobile

Credits: JohnAlbin, jefflinwood, tyler.frankenstein, dcmouyard, mjohnq3, rupl and team who edited the documentation.

Drupal 8 ships with all Responsive Themes

Responsive design is an approach to building websites that responds and adjusts optimally to the browsers or devices from which they are accessed.Today with the growing number of users accessing websites from non-traditional devices and mobiles, the need for a website that works across these platforms is a felt need.

All of the themes (Bartik, Seven & Stark) that Drupal 8 ships with are responsive. Right out of the box, you can have one Drupal site that now responds to all these devices. All Drupal 8 themes are designed with the mobile first approach.

1. Committed Bartik Theme on August 3, 2012
2. Committed Stark Theme on March 23, 2012
3. Issues Committed in Seven theme in the last 2 years

Below screenshots show how the Seven theme in various devices.

Credits: Thanks JohnAlbin, mjohnq3, rupl, Manuel Garcia, effulgentsia, sun, jessebeach and moshe, alanburke, jrbeeman

Drupal 8 has breakpoints built into it!

Breakpoints are widths for which the design of a website changes. The design changes could include changes in layouts, optimized fonts, change in image size or resolution and even functionality.

The Breakpoints module standardizes the use of breakpoints and enables modules and themes to expose or use each others breakpoints. Refer documentation page at: http://drupal.org/node/1803874

Committed to Drupal 8 on October 15, 2012

A typical example (auto created yml file for Bartik theme)

breakpoints:
- theme.bartik.mobile
- theme.bartik.narrow
- theme.bartik.wide
id: bartik
label: Bartik

Credits:

attiks,

Jelle_S

Picture element & Responsive images in Drupal 8

In Drupal 8 Picture module implement picture element that is still to be released by HTML5. The feature is built so that Drupal can be in sync with the latest at the time of Drupal 8 release. The module integrates picture with image fields. The module also provides for responsive image feature to go in hand with the default responsive themes. The responsive image feature allows a user to configure images to be loaded based on the size of the device from which it is accessed.

Committed to Drupal 8 on November 4, 2012

Decision on Picture element will wait until Code Freeze. Refer [#1883526]:Decide on the picture polyfill to use
Checkout attiks's drupal 8 demo site for picture implementation at: http://picturefill8.h011.attiks.com/node/2?utm_medium=atix&utm_source=Zkm

Credits: attiks, Jelle_S

Responsive Admin Interface

Admin toolbar (menu) is responsive! The menu toggles between horizontal & vertical mode based on the device and orientation in which it is viewed.

Also the mobile initiative has ensured all Drupal admin pages are optimized for the mobile!! There is still a some pending tasks around both the toolbar & the admin page, want to help checkout the initiative page for updates on tasks at: http://drupal.org/node/1941432

Credits for toolbar: jessebeach

Improve CSS standards

Restructuring the Drupal 8 CSS is the next big step that John has initiated. Through January there has been many discussions on the CSS Architecture before the Official CSS policy was annouced at the Drupal Documentation pages.

So what does this mean:

1. All new CSS formatting guidelines
2. CSS Architecture to make the CSS code more reusable, predictable, Maintainable & Scailable, based on SMACSS
3. Reorganised CSS File structure with logical structuring that supports efficient aggregation & easy updates by themers.

Work along with John, implementing them at: http://drupal.org/node/1921610.

Credits: JohnAlbin, ry5n, carwin, Lewis Nyman, and many, many other front-end developers

JS enhancements and front end performance

Modernizr is in core and brings with it support for HTML5 and Responsive Design in Drupal 8. Committed to core on November 27, 2012

The highlight of the javascript issues in Drupal 8 was the fix https://drupal.org/node/1737148 to Explicitly declare all JS dependencies, don't use drupal_add_js. This issue is a big frontend enhancement, it ensure js is loaded on where necessary.

Before code clean up face the main target is to rewrite the current js to make it optimized.