The Drupal 8 Mobile Initiative
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?
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.
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
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.
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.
The Drupal 8 Mobile Initiative Lead – John Wilkins
The Drupal 8 Mobile Initiative Blog
Follow us on:
- RT @drewallenmusic: Seen @ArticMonkeysBR & @bobdylan play @BournemouthIC now I am supporting @JamesBlunt - epic!!! http://t.co/uryO0o6UUz — 2 years 6 months ago
- RT @dorsetpolice: It's almost time! #boscombepolicebox http://t.co/K5cUrDeKLd — 2 years 11 months ago
- RT @WestBeachBmouth: Retweet this & be in to win a table for 2 at our legendary lobster and burger night next Thursday from 6pm... http://t… — 3 years 6 days ago
- Very pleased with the new site for #CaraDillon and best of luck @CaraDillonSings with the new album — 3 years 6 days ago
- @WildGreenBean Both! — 3 years 1 month ago