Upload
ram-singh
View
439
Download
0
Embed Size (px)
Citation preview
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
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