drupalcon asia - "drupal 8 mobile in its dna"
TRANSCRIPT
![Page 1: Drupalcon Asia - "Drupal 8 Mobile in its DNA"](https://reader034.vdocuments.net/reader034/viewer/2022042513/5885f1ff1a28ab864f8b5fdd/html5/thumbnails/1.jpg)
![Page 2: Drupalcon Asia - "Drupal 8 Mobile in its DNA"](https://reader034.vdocuments.net/reader034/viewer/2022042513/5885f1ff1a28ab864f8b5fdd/html5/thumbnails/2.jpg)
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
- ph. +91-7829618036
![Page 3: Drupalcon Asia - "Drupal 8 Mobile in its DNA"](https://reader034.vdocuments.net/reader034/viewer/2022042513/5885f1ff1a28ab864f8b5fdd/html5/thumbnails/3.jpg)
![Page 4: Drupalcon Asia - "Drupal 8 Mobile in its DNA"](https://reader034.vdocuments.net/reader034/viewer/2022042513/5885f1ff1a28ab864f8b5fdd/html5/thumbnails/4.jpg)
Why Mobile First?
![Page 5: Drupalcon Asia - "Drupal 8 Mobile in its DNA"](https://reader034.vdocuments.net/reader034/viewer/2022042513/5885f1ff1a28ab864f8b5fdd/html5/thumbnails/5.jpg)
Google Mobile Search surpasses Desktop Search
![Page 6: Drupalcon Asia - "Drupal 8 Mobile in its DNA"](https://reader034.vdocuments.net/reader034/viewer/2022042513/5885f1ff1a28ab864f8b5fdd/html5/thumbnails/6.jpg)
Mobile Device Capabilities
GPS Video & Image Gyroscope
NFC Barcode ScannerDevice Connection
TranslatorsMulti Touch Sensor & the list keeps growing…
![Page 7: Drupalcon Asia - "Drupal 8 Mobile in its DNA"](https://reader034.vdocuments.net/reader034/viewer/2022042513/5885f1ff1a28ab864f8b5fdd/html5/thumbnails/7.jpg)
Mobile Constraints
![Page 8: Drupalcon Asia - "Drupal 8 Mobile in its DNA"](https://reader034.vdocuments.net/reader034/viewer/2022042513/5885f1ff1a28ab864f8b5fdd/html5/thumbnails/8.jpg)
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".
![Page 9: Drupalcon Asia - "Drupal 8 Mobile in its DNA"](https://reader034.vdocuments.net/reader034/viewer/2022042513/5885f1ff1a28ab864f8b5fdd/html5/thumbnails/9.jpg)
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.”
![Page 10: Drupalcon Asia - "Drupal 8 Mobile in its DNA"](https://reader034.vdocuments.net/reader034/viewer/2022042513/5885f1ff1a28ab864f8b5fdd/html5/thumbnails/10.jpg)
Drupal 8 is not just Mobile friendly – It is Mobile first
Responsive Theme
& Images
HTML5
Web Services
MobileAdministration
Front EndPerformance
![Page 11: Drupalcon Asia - "Drupal 8 Mobile in its DNA"](https://reader034.vdocuments.net/reader034/viewer/2022042513/5885f1ff1a28ab864f8b5fdd/html5/thumbnails/11.jpg)
Drupal 8 is not just Mobile friendly – It is Mobile first
![Page 12: Drupalcon Asia - "Drupal 8 Mobile in its DNA"](https://reader034.vdocuments.net/reader034/viewer/2022042513/5885f1ff1a28ab864f8b5fdd/html5/thumbnails/12.jpg)
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
![Page 13: Drupalcon Asia - "Drupal 8 Mobile in its DNA"](https://reader034.vdocuments.net/reader034/viewer/2022042513/5885f1ff1a28ab864f8b5fdd/html5/thumbnails/13.jpg)
Why Responsive Image?
ImagesScriptsStylesheetsFlashHTMLOther
![Page 14: Drupalcon Asia - "Drupal 8 Mobile in its DNA"](https://reader034.vdocuments.net/reader034/viewer/2022042513/5885f1ff1a28ab864f8b5fdd/html5/thumbnails/14.jpg)
Responsive Image – Use Cases
Responsive Image
Variable-sized
Device-pixel Ratio
Fluid Image
Art Direction
![Page 15: Drupalcon Asia - "Drupal 8 Mobile in its DNA"](https://reader034.vdocuments.net/reader034/viewer/2022042513/5885f1ff1a28ab864f8b5fdd/html5/thumbnails/15.jpg)
Responsive Image – Fit the Screen
X
![Page 16: Drupalcon Asia - "Drupal 8 Mobile in its DNA"](https://reader034.vdocuments.net/reader034/viewer/2022042513/5885f1ff1a28ab864f8b5fdd/html5/thumbnails/16.jpg)
Responsive Image – Reserve Bandwidth
1x 1.5x 2x 3x
![Page 17: Drupalcon Asia - "Drupal 8 Mobile in its DNA"](https://reader034.vdocuments.net/reader034/viewer/2022042513/5885f1ff1a28ab864f8b5fdd/html5/thumbnails/17.jpg)
Responsive Image – Art Direction
![Page 18: Drupalcon Asia - "Drupal 8 Mobile in its DNA"](https://reader034.vdocuments.net/reader034/viewer/2022042513/5885f1ff1a28ab864f8b5fdd/html5/thumbnails/18.jpg)
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
![Page 19: Drupalcon Asia - "Drupal 8 Mobile in its DNA"](https://reader034.vdocuments.net/reader034/viewer/2022042513/5885f1ff1a28ab864f8b5fdd/html5/thumbnails/19.jpg)
srcset sizes
<source>
<picture>
media
Responsive Images – Tags & Attributes
![Page 20: Drupalcon Asia - "Drupal 8 Mobile in its DNA"](https://reader034.vdocuments.net/reader034/viewer/2022042513/5885f1ff1a28ab864f8b5fdd/html5/thumbnails/20.jpg)
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”>
![Page 21: Drupalcon Asia - "Drupal 8 Mobile in its DNA"](https://reader034.vdocuments.net/reader034/viewer/2022042513/5885f1ff1a28ab864f8b5fdd/html5/thumbnails/21.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
![Page 22: Drupalcon Asia - "Drupal 8 Mobile in its DNA"](https://reader034.vdocuments.net/reader034/viewer/2022042513/5885f1ff1a28ab864f8b5fdd/html5/thumbnails/22.jpg)
Responsive Image Remedy out of the box
Image Style
Responsive Images
Breakpoint
Image Replace
![Page 23: Drupalcon Asia - "Drupal 8 Mobile in its DNA"](https://reader034.vdocuments.net/reader034/viewer/2022042513/5885f1ff1a28ab864f8b5fdd/html5/thumbnails/23.jpg)
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
![Page 24: Drupalcon Asia - "Drupal 8 Mobile in its DNA"](https://reader034.vdocuments.net/reader034/viewer/2022042513/5885f1ff1a28ab864f8b5fdd/html5/thumbnails/24.jpg)
Drupal 7 Equivalent
Breakpoints Module : https://www.drupal.org/project/breakpoints
Picture Module : https://www.drupal.org/project/picture
![Page 25: Drupalcon Asia - "Drupal 8 Mobile in its DNA"](https://reader034.vdocuments.net/reader034/viewer/2022042513/5885f1ff1a28ab864f8b5fdd/html5/thumbnails/25.jpg)
COMIC WORLD
![Page 26: Drupalcon Asia - "Drupal 8 Mobile in its DNA"](https://reader034.vdocuments.net/reader034/viewer/2022042513/5885f1ff1a28ab864f8b5fdd/html5/thumbnails/26.jpg)
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! :(
![Page 27: Drupalcon Asia - "Drupal 8 Mobile in its DNA"](https://reader034.vdocuments.net/reader034/viewer/2022042513/5885f1ff1a28ab864f8b5fdd/html5/thumbnails/27.jpg)
New EndingThanks to Drupal CommunityIntroducing Mobile Friendly CMS
DRUPAL 8
![Page 28: Drupalcon Asia - "Drupal 8 Mobile in its DNA"](https://reader034.vdocuments.net/reader034/viewer/2022042513/5885f1ff1a28ab864f8b5fdd/html5/thumbnails/28.jpg)
HAPPY BOSS, HAPPY GIRLFRIEND
![Page 29: Drupalcon Asia - "Drupal 8 Mobile in its DNA"](https://reader034.vdocuments.net/reader034/viewer/2022042513/5885f1ff1a28ab864f8b5fdd/html5/thumbnails/29.jpg)
Mobile Administration
DRUPAL 7 DRUPAL 8
![Page 30: Drupalcon Asia - "Drupal 8 Mobile in its DNA"](https://reader034.vdocuments.net/reader034/viewer/2022042513/5885f1ff1a28ab864f8b5fdd/html5/thumbnails/30.jpg)
Mobile Administration
Only Icons in ToolbarVertically adjusted
admin barFinger friendly menu
itemsBack to site button
![Page 31: Drupalcon Asia - "Drupal 8 Mobile in its DNA"](https://reader034.vdocuments.net/reader034/viewer/2022042513/5885f1ff1a28ab864f8b5fdd/html5/thumbnails/31.jpg)
Mobile AdministrationOnly names visible
for modulesHorizontally
adjusted fields/blocks
Responsive admin tables
![Page 32: Drupalcon Asia - "Drupal 8 Mobile in its DNA"](https://reader034.vdocuments.net/reader034/viewer/2022042513/5885f1ff1a28ab864f8b5fdd/html5/thumbnails/32.jpg)
Ease for Content EditorWSYIWYG for mobile
devicesIn-place editingAwesome experience
![Page 33: Drupalcon Asia - "Drupal 8 Mobile in its DNA"](https://reader034.vdocuments.net/reader034/viewer/2022042513/5885f1ff1a28ab864f8b5fdd/html5/thumbnails/33.jpg)
Responsive Tables
.priority-low.priority-medium
![Page 34: Drupalcon Asia - "Drupal 8 Mobile in its DNA"](https://reader034.vdocuments.net/reader034/viewer/2022042513/5885f1ff1a28ab864f8b5fdd/html5/thumbnails/34.jpg)
HTML5 is welcome in DRUPAL 8
<header>
<footer>
<nav> <main>
<section>
dateemail
tel
![Page 35: Drupalcon Asia - "Drupal 8 Mobile in its DNA"](https://reader034.vdocuments.net/reader034/viewer/2022042513/5885f1ff1a28ab864f8b5fdd/html5/thumbnails/35.jpg)
Modernizr – Fallback to HTML5
• details & no-details• touchevents & no-touchevents• js & no-js
![Page 36: Drupalcon Asia - "Drupal 8 Mobile in its DNA"](https://reader034.vdocuments.net/reader034/viewer/2022042513/5885f1ff1a28ab864f8b5fdd/html5/thumbnails/36.jpg)
Front End Performance
Desktop - 85% Mobile - 97%
![Page 37: Drupalcon Asia - "Drupal 8 Mobile in its DNA"](https://reader034.vdocuments.net/reader034/viewer/2022042513/5885f1ff1a28ab864f8b5fdd/html5/thumbnails/37.jpg)
Front End Improvements
IMAGEOPTIMIZATION
HTML5&
Modernizr
NO REDIRECTS
SELECTIVE JS
![Page 38: Drupalcon Asia - "Drupal 8 Mobile in its DNA"](https://reader034.vdocuments.net/reader034/viewer/2022042513/5885f1ff1a28ab864f8b5fdd/html5/thumbnails/38.jpg)
Why Mobile SEO?
Search is #1 mobile browsing activities
![Page 39: Drupalcon Asia - "Drupal 8 Mobile in its DNA"](https://reader034.vdocuments.net/reader034/viewer/2022042513/5885f1ff1a28ab864f8b5fdd/html5/thumbnails/39.jpg)
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.
![Page 40: Drupalcon Asia - "Drupal 8 Mobile in its DNA"](https://reader034.vdocuments.net/reader034/viewer/2022042513/5885f1ff1a28ab864f8b5fdd/html5/thumbnails/40.jpg)
Best Practice
One Code base CSS media queries
www.example.com on all devices
Google Loves RWD
![Page 41: Drupalcon Asia - "Drupal 8 Mobile in its DNA"](https://reader034.vdocuments.net/reader034/viewer/2022042513/5885f1ff1a28ab864f8b5fdd/html5/thumbnails/41.jpg)
If Content is King, D8 is perfect stagecoach
SERESPONSIVE
SPEEDY
![Page 42: Drupalcon Asia - "Drupal 8 Mobile in its DNA"](https://reader034.vdocuments.net/reader034/viewer/2022042513/5885f1ff1a28ab864f8b5fdd/html5/thumbnails/42.jpg)
Web Services in Drupal Core - WSCCI
First classRest Server
First classCMS
![Page 43: Drupalcon Asia - "Drupal 8 Mobile in its DNA"](https://reader034.vdocuments.net/reader034/viewer/2022042513/5885f1ff1a28ab864f8b5fdd/html5/thumbnails/43.jpg)
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
![Page 44: Drupalcon Asia - "Drupal 8 Mobile in its DNA"](https://reader034.vdocuments.net/reader034/viewer/2022042513/5885f1ff1a28ab864f8b5fdd/html5/thumbnails/44.jpg)
Q & A
![Page 45: Drupalcon Asia - "Drupal 8 Mobile in its DNA"](https://reader034.vdocuments.net/reader034/viewer/2022042513/5885f1ff1a28ab864f8b5fdd/html5/thumbnails/45.jpg)
Thanks