How many times have you zoomed and pinched your phone screen just to navigate through a website on your phone? Although many websites have taken the Mobile-first approach, I still manage to lay my hands on those annoying few left out there. According to statistics, one out of five people in the world own a smartphone and the number keeps increasing by the day. So, if yours is one of those mobile incompetent websites, it is high time to get responsive and start building your website on Drupal 8 for an effective mobile-first experience.
Also known as “Progressive enhancement”, the Mobile-First strategy is an approach that advocates that designing and developing should be strategized keeping smaller screens in mind first. As mobile phones are the most frequently used and preferred devices these days, this strategy emphasizes on the need for responsive design where mobile users get an uninterrupted, consistent and a flawless online experience. Drupal 8 has extensively concentrated on getting Mobile ready and responsive ready seamlessly and conveniently.
How is Drupal 8 complying with the Mobile-First strategy?
With Drupal 8, a responsive design is not an option anymore. It is an upgrade and the responsive elements come out-of-the-box with Drupal 8 core. Not only for users, Drupal 8 is also responsive and provides a mobile-first approach to content managers and editors.
Responsive Design for Admins
For an Admin, adding and editing content through a mobile device is now even easier and user-friendly. Administration can now be done with ease while you’re on the move! Installation and configuring modules can now be carried out easily on a mobile phone. The admin toolbar automatically expands and collapses and orients itself depending on the screen size. WYSIWYG editor also responds to your screen size making content creation and editing a breeze.
Amazingly Responsive Themes too!
Now all themes that come built-in with Drupal 8 core are responsive. You can design fully responsive website that will fit beautifully into all screen sizes. All elements like menus and blocks also resize themselves to look great on a mobile device. Built-in themes such as Bartik and Seven are 100% responsive and easy to implement. You will also find many sleek and suitable contributed themes that you can easily use with Drupal 8.
Responsive and Images Breakpoints
The Breakpoints and Responsive Images modules come included with Drupal 8 Core although not enabled by default. Breakpoints are width and height trackers that define at what point the element should resize itself depending on the viewport or the size of the device viewing it. Using Breakpoints, you can define the sizes of the image as per the viewing device. Responsive images module use breakpoints to identify what style and sizes to display at what point. So with Drupal 8, your images in your website will resize itself automatically depending on what device is viewing it.
Now all tables are responsive and mobile friendly with Drupal 8. You can set priorities (High, Medium and Low) to table columns depending on the importance of the column. Columns with Low priority are displayed only if they can fit into the screen size. Whereas a desktop version will be able to see all the columns.