Understand the Drupal 8 Mobile Initiative
In the Chicago Keynote , Dries said: "If I were to start Drupal from scratch today, I'd build it for mobile experiences first, and desktop experience second". After the Chicago DurpalCon Dries appointed JohnAlbin as the Mobile Initiative lead. Lead by him here we are today 2 years from then with all mobile features Dries would have dreamt of and more! Read John's introductory blog at: http://palantir.net/blog/drupal-8-mobile-initiative
This blog walks you through the different areas of the mobile initiative that are part of Drupal 8 starting with the Drupal 7 mobile guide!
Drupal 7 mobile guide
The very first step by JohnAlbin as part of the mobile initiative was to write a set of handbook pages that can serve as a Drupal 7 mobile guide. The guide walks you through concepts and approaches to mobile Apps and mobile websites. The guide also provides detailed implementation and integration approaches with Drupal 7. Refer the documentation pages at: http://drupal.org/documentation/mobile
Drupal 8 ships with all Responsive Themes
Responsive design is an approach to building websites that responds and adjusts optimally to the browsers or devices from which they are accessed.Today with the growing number of users accessing websites from non-traditional devices and mobiles, the need for a website that works across these platforms is a felt need.
All of the themes (Bartik, Seven & Stark) that Drupal 8 ships with are responsive. Right out of the box, you can have one Drupal site that now responds to all these devices. All Drupal 8 themes are designed with the mobile first approach.
Below screenshots show how the Seven theme in various devices.
Drupal 8 has breakpoints built into it!
Breakpoints are widths for which the design of a website changes. The design changes could include changes in layouts, optimized fonts, change in image size or resolution and even functionality.
The Breakpoints module standardizes the use of breakpoints and enables modules and themes to expose or use each others breakpoints. Refer documentation page at: http://drupal.org/node/1803874
A typical example (auto created yml file for Bartik theme)
Picture element & Responsive images in Drupal 8
In Drupal 8 Picture module implement picture element that is still to be released by HTML5. The feature is built so that Drupal can be in sync with the latest at the time of Drupal 8 release. The module integrates picture with image fields. The module also provides for responsive image feature to go in hand with the default responsive themes. The responsive image feature allows a user to configure images to be loaded based on the size of the device from which it is accessed.
Decision on Picture element will wait until Code Freeze. Refer [#1883526]:Decide on the picture polyfill to use
Checkout attiks's drupal 8 demo site for picture implementation at: http://picturefill8.h011.attiks.com/node/2?utm_medium=atix&utm_source=Zkm
Responsive Admin Interface
Admin toolbar (menu) is responsive! The menu toggles between horizontal & vertical mode based on the device and orientation in which it is viewed.
Also the mobile initiative has ensured all Drupal admin pages are optimized for the mobile!! There is still a some pending tasks around both the toolbar & the admin page, want to help checkout the initiative page for updates on tasks at: http://drupal.org/node/1941432
Credits for toolbar: jessebeach
Improve CSS standards
Restructuring the Drupal 8 CSS is the next big step that John has initiated. Through January there has been many discussions on the CSS Architecture before the Official CSS policy was annouced at the Drupal Documentation pages.
So what does this mean:
1. All new CSS formatting guidelines
2. CSS Architecture to make the CSS code more reusable, predictable, Maintainable & Scailable, based on SMACSS
3. Reorganised CSS File structure with logical structuring that supports efficient aggregation & easy updates by themers.
Work along with John, implementing them at: http://drupal.org/node/1921610.
JS enhancements and front end performance
Modernizr is in core and brings with it support for HTML5 and Responsive Design in Drupal 8. Committed to core on November 27, 2012
Before code clean up face the main target is to rewrite the current js to make it optimized.
Want to get started with the mobile initiative checkout our initiative page for an update on what's up: http://drupal.org/node/1941432
The success of this initiative are all the contributors:
JohnAlbin, ry5n, carwin, Lewis Nyman, nod_, rupl, Jacine, sdboyer, attiks, Jelle_S, mjohnq3, Manuel Garcia, effulgentsia, sun, jessebeach , moshe, alanburke, jrbeeman, jefflinwood, tyler.frankenstein, dcmouyard, echoz, rteijeiro, vijay.cgs, David_Rothstein, Kevin O'Leary, Chris Weber, John Ferris, YesCT, Gábor Hojtsy, Bojhan & all of you in the mobile issue queues.