Double Americano and Mobile First Drupal 8

As I sit in my rusty independent coffee shop looking for an angle for this topic, I can’t help but look around and size up the technology at work around me.

Directly across from me is a young, college aged woman using an iPhone while reading an old growth book, she has a closed laptop before her. Seated next to her, another young woman sporting a “Be The Best Sorority” T bangs away on her Dell laptop, taking short text breaks here and there on a bedazzled iPhone.

Across the cafe, near a window, sits a middle-aged Jimmy Buffet lookalike reading a laptop while listening to…best guess, “Margaritaville”. No phone at work there. Two other people in my immediate area are in the course of random tasks on their laptops with no other noticeable devices in use.

It appears that recent mobile vs desktop statistics don’t hold up in my microcosm, but the numbers from across the Intertubes are hard to deny.

According to intelligentpositioning.com, mobile traffic increased from 22.8% to 37% in 2013 alone.

MvsD

 

As 2013 began, mobile device traffic accounted for a 22.75% portion of total website visits. This share grew rapidly over 2013 resulting in nearly 40% of website visits. Based on the numbers, it is obvious that mobile devices are overtaking desktops as the most popular way to access the internet, and thanks to some smart planning by the Drupal community, we are ready for it.

Sometime back in 2011, the Drupal community started the Drupal 8 Mobile Initiative. According to Drupal.org, “the Drupal 8 Mobile Initiative is a concerted effort to make Drupal 8 a first-class mobile platform.”

To make Drupal the leading mobile CMS platform, the top issues it sought to address were to:

• Build a Drupal.org mobile guide for Drupal contributed solutions.
• Ensure ability to use Drupal’s administrative forms in mobile devices.
• Convert all of Drupal 8’s existing themes to be mobile responsive.
• Improve front-end performance with respect to mobile use, including support for responsive images.

Fast forward three years to the eve of its long awaited release, and Drupal 8 is set to become the most “mobile first” version of the CMS framework to date, with its new responsive features being among the most anticipated. What are the results of this mobile initiative? Let’s take a look.

Revving up the New Theme Engine
Drupal 8 includes a brand new ‘theming’ engine called Twig, which is PHP-based, flexible, fast and secure. Purportedly, it is much easier to create beautiful and more functional Drupal websites using Twig, as its templates are written in a simpler syntax than the previously used PHPtemplate and is more secure.

Mobile First Themes and Admin
All the built-in themes that come with Drupal 8 are now responsive, as is the admin theme. Large tables now fit into any screen size without a hitch, and the new admin toolbar works like a charm on mobile devices. Drupal 7 could be used to build responsive websites, but the actual Admin user experience on smaller devices was lacking to say the least. Vertical and horizontal scrolling and bunching of content made adding and editing content a less than enjoyable experience.

Drupal 8 Admin in Desktop Layout
In its desktop size, the Admin bar now makes better use of the two navigation rows. The top row has shortcuts and user info, while the bottom row is purely dedicated to admin sections. A blue pencil icon on the far right toggles between the horizontal and vertical toolbar layouts.

admin

Drupal 8 Admin in Mobile Layout
Below, the toolbar is shown responding to mobile formatting. This is a great improvement for anyone who spends a lot of time administering a site on the go. It re-adjusts automatically depending on the size of the device that clients use. Whether it is viewed on a smart phone, tablet or desktop, the toolbar adjusts according to the device.

mobileadmin

How do you take a responsive picture?
Perhaps one of the biggest touchpoints in responsive design has been how to handle images for mobile devices. Properly addressing responsive involves dealing with page-loading performance. Drupal 8 is tackling this with responsive ‘Pictures’. This allows admin authors to add a single large image (whether it’s a banner, block image, gallery photo or a content picture) and Drupal 8 will automatically provide an appropriate sized of picture (generated by the image library) for the device. This eliminates the temptation to ‘hide’ images, which doesn’t keep them from downloading.

Web Services are Now Built-into Drupal
When it comes to connecting your Drupal site to an app, web services are crucial. It is now possible to use your Drupal 8 implementation as a data source, and output content as JSON or XML, and even post data back to it from the front end. Hypertext Application Language (HAL) is ably implemented in D8, and makes exploitation of web service capabilities a painless possibility.

These are just a few of the promising improvements brought to the table by the Drupal 8 Mobile Initiative. We are looking forward to developing these and many more services in the coming years.