The Drupal 8 Mobile Initiative

Paul Barnes's picture

Drupal 8 is set to become the most capable version of the website CMS framework to date, with it’s new responsive features being among the most anticipated. What can we expect to see with regards responsive design?

Drupal 8 - Mobile Initiative

With an eventual release date earmarked for mid to late 2013, Drupal 8 will be warmly welcomed into the community. As well as a raft of developer upgrades (which wont be discussed in this post), there are some fundamental core changes, chief among which will be a responsive solution for front-end and admin, out the box.

Let’s first take a look at the new Admin bar. The ‘Seven 8.0’ is Drupal 8’s default theme and whilst a step-up in presentation is obvious from the outset, users of Drupal 7 will still find this a very familiar toolbar.
 

Drupal 8 - Admin Bars

It now has clearer, better-designed buttons with added icons to help spare the user’s cognitive load and aid in orientation. The new icons are also a big help at mobile size where things can become a lot simpler.

Improved Drupal 8 Admin for Responsive Websites

Whilst Drupal 7 could always be integrated to a responsive website, the actual Admin user experience on smaller mobile devices was not the best it could be. A lot of vertical and horizontal scrolling and bunching of content meant adding or editing content wasn’t the most pleasant of tasks.

Drupal 8 Desktop View

Drupal 8 - Admin Toolbar Desktop

On a desktop monitor, the Admin bar has room to stretch and now makes better use of the two strips. The top strip has shortcuts and user info whilst the bottom strip is now a contrasting white colour, purely dedicated to Admin sections. A blue pencil icon on the far right toggles between the horizontal and vertical toolbar layouts.

Drupal 8 Mobile View

Here, the toolbar is shown responding to mobile. It re-adjusts automatically depending on the size of the device you are viewing so whether it’s smart phone, tablet or desktop, the toolbar simply adjusts appropriately without you needing to think. Users familiar with Drupal 7 will note how much clearer the layout for mobile is now.

Drupal 8 - Admin Mobile

 

Responsive Images

Whilst properly addressing responsive serves up a laundry list of issues in general, one of the immediate problems most designers and developers will grapple with is how to deal with page-loading performance. As the size-range of devices becomes ever more extreme, we’re also demanding that we’re not dealt a half-baked experience on mobile - where connections are typically slower than desktops. At the same time, mobile devices are also ramping up in quality, like the iPhone retina screens, so now there is also a demand for 4 times the image.

Drupal 8 is also tackling this with responsive ‘Pictures’. This allows admin authors to add one large image (whether it’s a banner slide, a block image, gallery photo or a general picture on a page) and Drupal 8 will automatically serve up an appropriate size of picture for the device. E.g. full size for 1200px sites and over, and physically smaller versions for smartphones. This eliminates the temptation to ‘hide’ certain heavy pictures at smart phone size, which would normally penalise a smart phone user’s overall experience.

This will avoid a large image designed for say, 1200px wide desktop (like a banner) being served up and scaled down, on the fly, for a smartphone and hence unnecessarily hogging bandwidth and page-speed.

 

Related Links:

The Drupal 8 Mobile Initiative Lead – John Wilkins
http://palantir.net/blog/drupal-8-mobile-initiative

The Drupal 8 Mobile Initiative Blog
http://www.unimitysolutions.com/blog/understand-drupal-8-mobile-initiative

About the author:

is the Senior Drupal Designer at D., responsible for customised website building & theming.You can find him on  and Twitter and Linkedin.

If you’d like to talk to Paul, get in touch via the Contact Us page or give him a ring on UK: 0844 544 9553 or INTL: +44 (1) 202 390822

Tags: 

Free Updates

Stay informed on our latest news!

Subscribe to Free Updates feed

Tags

Archive

Latest tweets