Drupalcon Asia - "Drupal 8 Mobile in its DNA"
•Download as PPTX, PDF•
0 likes•609 views
Mobile usage is increasing, so Drupal 8 is designed with a mobile-first approach. It features responsive themes, images, and administration for optimal mobile experiences. Drupal 8 also improves front-end performance, supports HTML5, and includes a RESTful API for building mobile apps and services. Overall, Drupal 8 enhances the mobile experience for users and developers compared to previous versions.
Report
Share
Drupalcon Asia - "Drupal 8 Mobile in its DNA"
- 5. Google Mobile Search surpasses Desktop Search
- 6. Mobile Device Capabilities GPS Video & Image Gyroscope NFC Barcode ScannerDevice Connection TranslatorsMulti Touch Sensor & the list keeps growing…
- 8. Keynote from the Creator of Drupal
- 10. Drupal 8 is not just Mobile friendly – It is Mobile first Responsive Theme & Images HTML5 Web Services Mobile Administration Front End Performance
- 11. Drupal 8 is not just Mobile friendly – It is Mobile first
- 12. 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
- 14. Responsive Image – Use Cases Responsive Image Variable-sized Device-pixel Ratio Fluid Image Art Direction
- 15. Responsive Image – Fit the Screen X
- 16. Responsive Image – Reserve Bandwidth 1x 1.5x 2x 3x
- 17. Responsive Image – Art Direction
- 18. 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
- 19. srcset sizes <source> <picture> media Responsive Images – Tags & Attributes
- 20. 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”>
- 21. 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
- 22. Responsive Image Remedy out of the box Image Style Responsive Images Breakpoint Image Replace
- 23. Breakpoints mytheme.mobile: label: mobile mediaQuery: ‘ ’ weight: 0 multipliers: - 1x mytheme.narrow: label: narrow mediaQuery: ‘all and (min- width: 737px) and (max- width: 1023px)’ weight: 0 multipliers: - 1x mytheme.wide: label: wide mediaQuery: ‘all and (min-width: 1024px)’ weight: 0 multipliers: - 1x 376px 769px
- 24. Drupal 7 Equivalent Breakpoints Module : https://www.drupal.org/project/breakpoints Picture Module : https://www.drupal.org/project/picture
- 25. COMIC WORLD
- 26. 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! :(
- 27. New Ending Thanks to Drupal Community Introducing Mobile Friendly CMS DRUPAL 8
- 28. HAPPY BOSS, HAPPY GIRLFRIEND
- 29. Mobile Administration DRUPAL 7 DRUPAL 8
- 30. Mobile Administration Only Icons in Toolbar Vertically adjusted admin bar Finger friendly menu items Back to site button
- 31. Mobile Administration Only names visible for modules Horizontally adjusted fields/blocks Responsive admin tables
- 32. Ease for Content Editor WSYIWYG for mobile devices In-place editing Awesome experience
- 34. HTML5 is welcome in DRUPAL 8 <header> <footer> <nav> <main> <section> dateemail tel
- 35. Modernizr – Fallback to HTML5 • details & no-details • touchevents & no-touchevents • js & no-js
- 36. Front End Performance Desktop - 85% Mobile - 97%
- 37. Front End Improvements IMAGE OPTIMIZATION HTML5 & Modernizr NO REDIRECTS SELECTIVE JS
- 38. Why Mobile SEO? Search is #1 mobile browsing activities
- 39. Why Mobile SEO?
- 40. Best Practice One Code base CSS media queries www.example.com on all devices Google Loves RWD
- 41. If Content is King, D8 is perfect stagecoach SE RESPONSIVE SPEEDY
- 42. Web Services in Drupal Core - WSCCI First class Rest Server First class CMS
- 43. 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