The Drupal 8 Mobile Initiative

by John Albin Wilkins

Just a few months ago, Brian Fling, a pioneer in the mobile industry, said

There is still no mobile-friendly CMS.

I took that as a challenge to help 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.

The number 8 formed by circular borders around two parallel mobile devices.

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.

By my count, there are currently five different ways to provide mobile solutions:

  1. Native apps (code compiled to run natively on iPhones, Androids, etc.)
  2. Web apps (HTML5 and JavaScript-based apps running on mobile browsers)
  3. Mobile/desktop domain switching (parallel websites: one for desktop and one for mobile, with device detection to switch between the two.)
  4. Responsive design (a single HTML source that uses CSS3 media queries to respond to different device capabilities)
  5. 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.)

And Drupal (whether in core or contrib) should support all of them.

Now that’s a pretty broad spectrum of things to cover and we can’t include them all 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. The Drupal 8 Mobile Initiative will be closely following their progress, but if you are interested in integrating native apps or HTML5 Web apps with Drupal, the bulk of that work will be done in the WSCCI and HTML5 initiatives, so go help out now!

That just leaves the last three items for the Drupal 8 Mobile Initiative to focus on at first. Let’s break down what each of them means.

Mobile-friendly administration

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.

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

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, I’m sure we can leverage Drupal 7’s image styles to solve this issue.

My role

I’m very pleased that the founder of Drupal, Dries Buytaert, has asked me to lead the Drupal 8 Mobile Initiative. As initiative leader, my primary work won’t be to code the majority of Drupal 8’s mobile solutions (I’ll help, but I’m counting on all of you to do that). Instead, I’ll be focused on looking at Drupal 8’s mobile experience in a holistic manner. I’ll ensure that the myriad of issues in Drupal 8 will have a consistent approach to mobile and that we don’t let major pieces slip through the cracks.

The best way to accomplish that is to research and listen to the larger mobile development community. Since this cross-pollination is also essential for Drupal’s continued relevance and vitality, I’ll be tracking and engaging (and encouraging others to engage) with the larger web and mobile development community as it develops mobile solutions.

Since many of the existing Drupal 8 initiatives touch on mobile, I’ll also be coordinating closely with the other D8 initiative leaders on those issues that have a mobile aspect (in particular the Services, HTML5 and Design initiatives).

To help me in my role, my employer, Palantir, has donated part of my work week so I can focus on the Drupal 8 Mobile Initiative every week. Thanks, Tif and George!

Your role

But the most important part of this initiative, the single biggest factor in its success, is going to be your role. Of course, we need PHP and JavaScript coders for a better mobile Drupal. But we will also need people knowledgeable in usability, in accessibility, in HTML and CSS, in documentation and more. And, we need lots of testers! We will aim for best development practices that should work for any device, but it would be nice to get a wide variety of devices to test our Drupal 8 work.

So, let’s go!

Join in on discussions in the Mobile group on groups.drupal.org. And help out with the Mobile issues on drupal.org.

Comments

While I agree that having some core functionality for mobile would be nice. I feel like the pace that Drupal is moving is seriously hindering it. Drupal 7 has been out for the better part of a year but, I would say most development shops are still using D6.
This is because the community contributed modules that make Drupal so powerful are still not ready for 7. Why not first focus on D7?

When I first started using Drupal 6 years ago, a new major release came out every 6 months, believe it or not. Drupal 7 was in the works for 3 years. I'm hoping Drupal 8 will be a little shorter release cycle, but it may not be.

In the meantime, it is critical that the contrib modules and themes for Drupal 7 develop the mobile solutions we need today. I’ve been tracking the progress of several D7 contrib modules (and helping to write a few myself) that make building mobile solutions easier. For example, the Palantir.net website we are on right now uses Panels to achieve field-level responsive designs; we should have a blog post about that in the next month, I hope.

As for your comment that contributed modules “are not ready for 7”, you are correct that not all of the modules you need for a particular project are ready. But there are many, many that are ready, even if they are only marked "beta". You may also find that some modules that you used in D6 have been deprecated, either because they were incorporated into core or the changes in D7 make a different module a better solution to the underlying problem. The biggest barrier for me moving to D7 was the CCK upgrade path, but that now works quite well; I've upgraded several sites using the CCK contrib module's ability to migrate CCK fields to D7 core fields. If you still find modules you need that haven't been ported to D7, help out! Maybe the module needs code or maybe it just needs documentation about the newer, better solution. :-)

Congratulations John! I'm sure you'll do a splendid job leading this initiative.
I hope to be able to participate a bit where I can, as a mobile-friendly Drupal 8 is certainly the way to go

Awesome news! You must be delighted. We have been doing a lot of work with Responsive Design, SASS, Compass etc. Some aspects of our work will be contributed and should be of interest to you. Can we open a dialogue?

I assume you will be making Drupal 7-compatible contributed projects for your work. As I said in an earlier comment about, I love seeing new mobile-related solutions in the D7 contrib space. The Drupal 7 contrib work will directly affect the Drupal 8 Mobile Initiative work.

It's not relevant to drupal, but I would argue that for web developers there is one more relevant step in the spectrum from website to native app, and that is the HTML / JS based apps that run locally in a wrapper on the client. PhoneGap is the project that pioneered this approach. PhoneGap is basically a web browser with deep hooks into the native OS so that it can offer your HTML and JS code that you bundle with it access to the camera, microphone, gyroscope, filesystem etc.. It may not have anything to do with drupal directly, but it is a part of the competitive landscape. With this approach, someone with only web development skills could deploy a "native" app that could act as a client for a drupal webservice for instance.

PhoneGap and Appcelerator Titanium are two hybrid approaches that allow you to take HTML5 web apps and bake them into a native app wrapper. You can read about how the recent Drupalcon's Native apps were written using that approach: http://palantir.net/blog/mobilizing-drupalcon-chicago

I didn’t list those technologies as separate building styles since they are combo of two I listed. But I also didn't explicitly mention them either, so I’m glad you brought them up! :-)

This mobile initiative is really great news. And I think it is also a very challenging one since mobile can means so many different things to many people. So defining priorities and solutions for Drupal to be stronger in the mobile space will be definitely one of the big tasks.

I would be happy to share my lessons learned while working on Mobile Tools, so looking forward to hear more about the initiative.

Good luck with this mission!

Nice post and congrats on the initiative. I'm really excited about this. My head has been completely in the "one web" space lately seeing of a responsive approach can really become the de facto web design technique. Many challenges, but so many exciting rewards!