Who Am I?- Ram Singh (rsingh27 as Drupaler)

Where do I stay?- Bangalore

Where do I work?- TATA CONSULTANCY SERVICES

How much experience?

- 3 Years How you can reach me?

- https://twitter.com/ramsingh271190

- ramsingh271190@gmail.com

- ph. +91-7829618036

Why Mobile First?

Google Mobile Search surpasses Desktop Search

Mobile Device Capabilities

GPS Video & Image Gyroscope

NFC Barcode ScannerDevice Connection

TranslatorsMulti Touch Sensor & the list keeps growing…

Mobile Constraints

Keynote from the Creator of Drupal

"If I were to start

Drupal from scratch

today, I'd build it for

mobile experiences

first, and desktop

experience second".

Responsive Web Design

“RWD is the hottest

technique in producing

Mobile-friendly websites because,

relative toTraditional mobile

building techniques, it

lowers the

development cost for

including mobile

devices support.”

Drupal 8 is not just Mobile friendly – It is Mobile first

Responsive Theme

& Images

HTML5

Web Services

MobileAdministration

Front EndPerformance

Drupal 8 is not just Mobile friendly – It is Mobile first

Responsive Themes

Mobile friendly base themes – Classy

Mobile friendly core themes - Bartik

All core themes now automatically reflow elements like menu and blocks to fit small devices.

Responsive image feature

Why Responsive Image?

ImagesScriptsStylesheetsFlashHTMLOther

Responsive Image – Use Cases

Responsive Image

Variable-sized

Device-pixel Ratio

Fluid Image

Art Direction

Responsive Image – Fit the Screen

X

Responsive Image – Reserve Bandwidth

1x 1.5x 2x 3x

Responsive Image – Art Direction

What BROWSER knows?FACTORS Browser knows? Developer knows?

Viewport Size YES NO

Screen Density YES NO

Image Dimension NO YES

Rendered Size NO YES

Which Image? NO YES

srcset sizes

<source>

<picture>

media

Responsive Images – Tags & Attributes

srcset=“ImageM1x.jpg 736w, ImageM2x.jpg 1100w" sizes=“100vw”

<source>

<source srcset=“ImageT1x.jpg 1024w, ImageT2x.jpg 1500w" sizes=“50vw” media=“all and (min-width: 737px) and (max-width: 1024px)” >

<source srcset=“ImageD1x.jpg” sizes=“30vw” media=“all and (min-width: 1025px)” >

<picture>

</picture><img srcset = “ImageD1x.jpg”>

What BROWSER knows?FACTORS Browser knows? Developer knows?

Viewport Size YES NO

Screen Density YES NO

Image Dimension YES (via srcset)

YES

Rendered Size YES(via sizes)

YES

Which Image? YES(via picture)

YES

Responsive Image Remedy out of the box

Image Style

Responsive Images

Breakpoint

Image Replace

Breakpoints

mytheme.mobile: label: mobile mediaQuery: ‘ ’ weight: 0 multipliers: - 1x

mytheme.narrow: label: narrowmediaQuery: ‘all and (min-width: 737px) and (max-width: 1023px)’weight: 0 multipliers: - 1x

mytheme.wide: label: widemediaQuery: ‘all and (min-width: 1024px)’weight: 0 multipliers: - 1x

376px 769px

Drupal 7 Equivalent

Breakpoints Module : https://www.drupal.org/project/breakpoints

Picture Module : https://www.drupal.org/project/picture

COMIC WORLD

Hi baby! Let’s go for a movie?!

Wow!You are

so good!

Hello Chandra, Can you please

redirect ‘node/16’ to the

homepage?

Baby I got some urgent work.Will go some other time

Get lost! :(

New EndingThanks to Drupal CommunityIntroducing Mobile Friendly CMS

DRUPAL 8

HAPPY BOSS, HAPPY GIRLFRIEND

Mobile Administration

DRUPAL 7 DRUPAL 8

Mobile Administration

Only Icons in ToolbarVertically adjusted

admin barFinger friendly menu

itemsBack to site button

Mobile AdministrationOnly names visible

for modulesHorizontally

adjusted fields/blocks

Responsive admin tables

Ease for Content EditorWSYIWYG for mobile

devicesIn-place editingAwesome experience

Responsive Tables

.priority-low.priority-medium

HTML5 is welcome in DRUPAL 8

<header>

<footer>

<nav> <main>

<section>

dateemail

tel

Modernizr – Fallback to HTML5

• details & no-details• touchevents & no-touchevents• js & no-js

Front End Performance

Desktop - 85% Mobile - 97%

Front End Improvements

IMAGEOPTIMIZATION

HTML5&

Modernizr

NO REDIRECTS

SELECTIVE JS

Why Mobile SEO?

Search is #1 mobile browsing activities

Why Mobile SEO?

Starting April 21, 2015, Google

Search will be expanding its use of

mobile-friendliness as a ranking

signal. This change will affect

mobile searches in all languages

worldwide and will have a

significant impact in Google Search

results. Users will find it easier to

get relevant, high quality search

results optimized for their devices.

Best Practice

One Code base CSS media queries

www.example.com on all devices

Google Loves RWD

If Content is King, D8 is perfect stagecoach

SERESPONSIVE

SPEEDY

Web Services in Drupal Core - WSCCI

First classRest Server

First classCMS

Drupal 8 Core REST API Core Modules – RESTful Web

Services, Serialization, HAL, HTTP Basic Authentication

Contributed Module – REST UI

Core Entities exposed as JSON or JSON+HAL

New display of View – REST EXPORT

Q & A

Thanks