Strategy for the Mobile Initiative

This strategy document uses the Minimal Viable Product strategy, which you can read more about on Wikipedia.

Contents of this document:

1. General overview Big picture of the mobile landscape
2. Objectives The top-level goals of this initiative
3. Program tasks Where the actual work is listed

General Overview

The Drupal 8 Mobile initiative’s goal aims to make Drupal the leading mobile CMS platform. Certainly, there are some fantastic contributed modules that already make Drupal a great starting point for mobile solutions; modules like Mobile Tools, Domain Access, Responsive Images, as well as a whole slew of new ones that have been released in the past few months. But in order for a CMS to earn the moniker "mobile-friendly", setting it all up needs to be easy.

Right now, Web development experts are building mobile apps and websites while looking for integration with existing CMSs. And they are having to build a lot of the tools themselves because there are very few mature tools. The Web development industry as a whole is still trying to figure out the best way to build mobile sites and Drupal needs to engage and become a leader as that work continues.

There are currently at least five different ways to provide mobile solutions:

• Native apps (code compiled to run natively on iPhones, Androids, etc.)
• Web apps (HTML5 and JavaScript-based apps running on mobile browsers)
• Mobile/desktop domain switching (parallel websites: one for desktop and one for mobile, with device detection to switch between the two.)
• Responsive design (a single HTML source that uses CSS3 media queries and JavaScript to respond to different device capabilities)
• RESS: Responsive Design + Server-side Components (a hybrid approach that uses Responsive Design techniques combined with a light amount of device detection to alter the markup before being sent to the user.)

Drupal, whether in core or contrib, should support all of them.

Now that’s a pretty broad spectrum of things to cover and they can’t all be included in core. But, to reach that “mobile-friendly CMS” status, what are the top issues Drupal 8 core should provide?

1. Web services for native app integration
2. HTML5 elements necessary for HTML5 Web apps
3. Ability to use Drupal’s administrative forms in mobile devices
4. All of Drupal 8’s core themes should be responsive
5. Front-end performance improvements

Fortunately, the first two points are already covered by the Web Services and Context Core Initiative and the HTML5 Initiative.

That just leaves the last three items for the Drupal 8 Mobile Initiative to focus on.

Objectives

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. Websites that only support large screens will become an anachronism, so converting all of core’s current themes to have mobile-first responsive designs is essential for Drupal to remain relevant. (Incidentally, the Drupal 8 Design Initiative, which is focusing on building new themes for Drupal 8, will also ensure its themes are responsive.)

Mobile-friendly forms

If users can’t create content or administer a Drupal site while on a mobile device, we have a serious problem. Those are the first tasks attempted by users on new Drupal websites. Much as the “ugly themes in Drupal 6” made a bad first impression of Drupal to Web designers, not providing mobile administrative solutions will leave a sour taste in the mouths of mobile developers evaluating CMS solutions. To complete this task, we’ll have to look at the complete stack for administrative tasks, including form definitions, form submit handlers, the Toolbar, the Overlay, and the Seven theme.

The target is 100% mobile-friendly administration via responsive design, but we recognize that certain pages, e.g., the permissions page, may require a dedicated mobile presentation.

Front-end performance

Lastly, performance has always been a priority for websites, but with mobile it becomes critical. Some studies show up to 97% of a page’s render time takes place in the front-end. There are a laundry list of best practices for front-end performance that will help mobile and desktop users. And I’ve seen several members of the Drupal community speak about these issues multiple times this past year.

However, when dealing with responsive design, the single biggest performance concern is image handling. The first demo of responsive design had over-large images being sent to mobile devices. While no single best solution has yet been found, we intend to leverage Drupal 7’s image styles to solve this issue.

Program tasks

Program tasks are defined in the following way:

• Must have (essential to success)
• Should have (significant impact to success)
• Could have (should be done, but are not essential)
• Won’t have (future functionality)

1. Must have / Critical

   Responsive Web design

   • Seven converted: http://drupal.org/node/1088792
   • Stark converted: http://drupal.org/node/1322794
   • Bartik converted: http://drupal.org/node/1192044

   Mobile-friendly administration

   • For all content editing and workflow related pages (adding users, taxonomy terms, menu items, new content, moderating content, etc.)
   • Review of the Toolbar
   • Review of the Overlay

   Front-end performance

   • Responsive images: As the layout is resized, the browser will serve the proper image size (“real” size, not height/width attributes) See Responsive image discussion for current status.
   • Optimized images
   • Sprites used wherever appropriate
   • Optimized css: Evaluate the CSS/JS aggregation process and adjust where improvements can be made. Offer more flexible JS loading options so Drupal can stay current as new tools arise.

   One of the first issues that needs tackling is determining a dependencies list so the critical tasks can be done as quickly as possible. For example, all mobile-friendly admin tasks are dependent on Seven being responsive.

2. Should have / Major

   • A “Mobile Guide” for how to make websites mobile-friendly using contributed projects. http://drupal.org/documentation/mobile

   Front end performance

   • Documentation of the use cases that css aggregation serves.
   • Documentation for how to optimize for other use cases.

   Mobile-friendly administration

   • Configuration pages converted (creating a new content type; adding fields to a user profile, etc.)

3. Could have / Normal & Minor

   TBD

4. Won’t have

   • Any impact on Drupal.org; See http://drupal.org/node/951114