real-time multi-device theming
DESCRIPTION
Real-Time Multi-Device Theming: Say Goodbye to the Refresh Button Presented by Dave Sawyer and Mac Bleser at Design4Drupal on Saturday, August 2, 2014TRANSCRIPT
![Page 1: Real-Time Multi-Device Theming](https://reader035.vdocuments.mx/reader035/viewer/2022062709/559118e51a28ab74758b4599/html5/thumbnails/1.jpg)
Real-Time Multi-Device ThemingSay Goodbye to the Refresh Button
Saturday, August 2, 2014
![Page 2: Real-Time Multi-Device Theming](https://reader035.vdocuments.mx/reader035/viewer/2022062709/559118e51a28ab74758b4599/html5/thumbnails/2.jpg)
About the Speakers
Mac BleserFront-End Developer
@macbleser
Dave SawyerSolutions Architect
@cmsdave
cmsdave
![Page 3: Real-Time Multi-Device Theming](https://reader035.vdocuments.mx/reader035/viewer/2022062709/559118e51a28ab74758b4599/html5/thumbnails/3.jpg)
Theming and Testing
Repetitive cycles!
![Page 4: Real-Time Multi-Device Theming](https://reader035.vdocuments.mx/reader035/viewer/2022062709/559118e51a28ab74758b4599/html5/thumbnails/4.jpg)
Code Change
Browser Refresh
Repeat
![Page 5: Real-Time Multi-Device Theming](https://reader035.vdocuments.mx/reader035/viewer/2022062709/559118e51a28ab74758b4599/html5/thumbnails/5.jpg)
![Page 6: Real-Time Multi-Device Theming](https://reader035.vdocuments.mx/reader035/viewer/2022062709/559118e51a28ab74758b4599/html5/thumbnails/6.jpg)
● The number of devices and form factors continues to grow
● Responsive design implementations grow in complexity
● Old workflow is no longer sufficient
● Budget and scheduling realities
![Page 7: Real-Time Multi-Device Theming](https://reader035.vdocuments.mx/reader035/viewer/2022062709/559118e51a28ab74758b4599/html5/thumbnails/7.jpg)
![Page 8: Real-Time Multi-Device Theming](https://reader035.vdocuments.mx/reader035/viewer/2022062709/559118e51a28ab74758b4599/html5/thumbnails/8.jpg)
We no longer design websites…
![Page 9: Real-Time Multi-Device Theming](https://reader035.vdocuments.mx/reader035/viewer/2022062709/559118e51a28ab74758b4599/html5/thumbnails/9.jpg)
...we design multi-device web experiences
![Page 10: Real-Time Multi-Device Theming](https://reader035.vdocuments.mx/reader035/viewer/2022062709/559118e51a28ab74758b4599/html5/thumbnails/10.jpg)
Modern Web Development Practices:What We Need
![Page 11: Real-Time Multi-Device Theming](https://reader035.vdocuments.mx/reader035/viewer/2022062709/559118e51a28ab74758b4599/html5/thumbnails/11.jpg)
Modern Web Development Practices:What We Need
1.Multi-device workflow
![Page 12: Real-Time Multi-Device Theming](https://reader035.vdocuments.mx/reader035/viewer/2022062709/559118e51a28ab74758b4599/html5/thumbnails/12.jpg)
Modern Web Development Practices:What We Need
1.Multi-device workflow2.Synchronized browser testing to allow
real-time theming
![Page 13: Real-Time Multi-Device Theming](https://reader035.vdocuments.mx/reader035/viewer/2022062709/559118e51a28ab74758b4599/html5/thumbnails/13.jpg)
Modern Web Development Practices:What We Need
1.Multi-device workflow2.Synchronized browser testing to allow
real-time theming3.Performance as part of the
development process – not an afterthought
![Page 14: Real-Time Multi-Device Theming](https://reader035.vdocuments.mx/reader035/viewer/2022062709/559118e51a28ab74758b4599/html5/thumbnails/14.jpg)
Modern Web Development Practices:What We Need
1.Multi-device workflow2.Synchronized browser testing to allow
real-time theming3.Performance as part of the
development process – not an afterthought
4.Boilerplates: A starting point based on best practices
![Page 15: Real-Time Multi-Device Theming](https://reader035.vdocuments.mx/reader035/viewer/2022062709/559118e51a28ab74758b4599/html5/thumbnails/15.jpg)
Modern Web Development Practices:What We Need
1.Multi-device workflow2.Synchronized browser testing to allow
real-time theming3.Performance as part of the
development process – not an afterthought
4.Boilerplates: A starting point based on best practices
5.Automation: Task-runners
![Page 16: Real-Time Multi-Device Theming](https://reader035.vdocuments.mx/reader035/viewer/2022062709/559118e51a28ab74758b4599/html5/thumbnails/16.jpg)
Modern Web Development Practices:What We Need
1.Multi-device workflow2.Synchronized browser testing to allow
real-time theming3.Performance as part of the
development process – not an afterthought
4.Boilerplates: A starting point based on best practices
5.Automation: Task-runners6.Local web server for testing
![Page 17: Real-Time Multi-Device Theming](https://reader035.vdocuments.mx/reader035/viewer/2022062709/559118e51a28ab74758b4599/html5/thumbnails/17.jpg)
Google Web Fundamentals
https://developers.google.com/web/fundamentals/
![Page 18: Real-Time Multi-Device Theming](https://reader035.vdocuments.mx/reader035/viewer/2022062709/559118e51a28ab74758b4599/html5/thumbnails/18.jpg)
Google Web Starter Kit
https://developers.google.com/web/starter-kit/
![Page 19: Real-Time Multi-Device Theming](https://reader035.vdocuments.mx/reader035/viewer/2022062709/559118e51a28ab74758b4599/html5/thumbnails/19.jpg)
Google Web Starter Kit
Inspired by:
![Page 20: Real-Time Multi-Device Theming](https://reader035.vdocuments.mx/reader035/viewer/2022062709/559118e51a28ab74758b4599/html5/thumbnails/20.jpg)
Google Web Starter Kit
.com/google/web-starter-kit
Inspired by:
![Page 21: Real-Time Multi-Device Theming](https://reader035.vdocuments.mx/reader035/viewer/2022062709/559118e51a28ab74758b4599/html5/thumbnails/21.jpg)
Underlying Technologies
![Page 22: Real-Time Multi-Device Theming](https://reader035.vdocuments.mx/reader035/viewer/2022062709/559118e51a28ab74758b4599/html5/thumbnails/22.jpg)
Underlying Technologies
Recommended Articles● Git for Designers:
http://bit.ly/git4designers-tutsplus● Intro to Git for Web Designers:● http://bit.ly/intro-git-designers
![Page 23: Real-Time Multi-Device Theming](https://reader035.vdocuments.mx/reader035/viewer/2022062709/559118e51a28ab74758b4599/html5/thumbnails/23.jpg)
Underlying Technologies
● Node.js: many of the tools in Google Web Starter Kit are built on top of Node.js
● Node Package Manager (NPM) for installing tools
![Page 24: Real-Time Multi-Device Theming](https://reader035.vdocuments.mx/reader035/viewer/2022062709/559118e51a28ab74758b4599/html5/thumbnails/24.jpg)
Underlying Technologies
![Page 25: Real-Time Multi-Device Theming](https://reader035.vdocuments.mx/reader035/viewer/2022062709/559118e51a28ab74758b4599/html5/thumbnails/25.jpg)
Underlying Technologies
http://gulpjs.com
![Page 26: Real-Time Multi-Device Theming](https://reader035.vdocuments.mx/reader035/viewer/2022062709/559118e51a28ab74758b4599/html5/thumbnails/26.jpg)
Underlying Technologies
http://www.browsersync.io
![Page 27: Real-Time Multi-Device Theming](https://reader035.vdocuments.mx/reader035/viewer/2022062709/559118e51a28ab74758b4599/html5/thumbnails/27.jpg)
Real-time Theming
● Synchronized browser and device testing
● Real-time multi-device previews
● Live Browser Reloading
![Page 28: Real-Time Multi-Device Theming](https://reader035.vdocuments.mx/reader035/viewer/2022062709/559118e51a28ab74758b4599/html5/thumbnails/28.jpg)
Code Injection vs Page Refresh
Inject changes live in your browser and on real devices
vs
![Page 29: Real-Time Multi-Device Theming](https://reader035.vdocuments.mx/reader035/viewer/2022062709/559118e51a28ab74758b4599/html5/thumbnails/29.jpg)
Cross-device Synchronization
● Synchronize clicks, scrolls, forms and live-reload across multiple devices as you edit your project.
● BrowserSync
![Page 30: Real-Time Multi-Device Theming](https://reader035.vdocuments.mx/reader035/viewer/2022062709/559118e51a28ab74758b4599/html5/thumbnails/30.jpg)
Live Browser Reloading
● Reload the browser in real-time anytime an edit is made without the need for an extension.
● Allows you to make quick glances to get immediate feedback on your changes.
![Page 31: Real-Time Multi-Device Theming](https://reader035.vdocuments.mx/reader035/viewer/2022062709/559118e51a28ab74758b4599/html5/thumbnails/31.jpg)
Live Demo!
![Page 32: Real-Time Multi-Device Theming](https://reader035.vdocuments.mx/reader035/viewer/2022062709/559118e51a28ab74758b4599/html5/thumbnails/32.jpg)
Performance optimization
● Minify and concatenate JavaScript, CSS, HTML and Images to help keep your pages lean.
● Minification● Optimization of Images● Aggregation● Reduction of HTTP requests!
![Page 33: Real-Time Multi-Device Theming](https://reader035.vdocuments.mx/reader035/viewer/2022062709/559118e51a28ab74758b4599/html5/thumbnails/33.jpg)
PageSpeed Insights
● Web Starter Kit: Integration with PageSpeed Insights
![Page 34: Real-Time Multi-Device Theming](https://reader035.vdocuments.mx/reader035/viewer/2022062709/559118e51a28ab74758b4599/html5/thumbnails/34.jpg)
Built in HTTP Server
● Local web server built in to Web Starter Kit
● A built in server for previewing your site means you can test your pages without messing with other tools.
● Best practice: Run Drupal locally!● Other local server options: Mamp,
Bitnami, Acquia Dev Desktop, etc
![Page 35: Real-Time Multi-Device Theming](https://reader035.vdocuments.mx/reader035/viewer/2022062709/559118e51a28ab74758b4599/html5/thumbnails/35.jpg)
Trivia Time!
![Page 36: Real-Time Multi-Device Theming](https://reader035.vdocuments.mx/reader035/viewer/2022062709/559118e51a28ab74758b4599/html5/thumbnails/36.jpg)
Trivia Time!
In what year was the Netscape Navigator browser first released?
![Page 37: Real-Time Multi-Device Theming](https://reader035.vdocuments.mx/reader035/viewer/2022062709/559118e51a28ab74758b4599/html5/thumbnails/37.jpg)
Trivia Time!
December 1994
![Page 38: Real-Time Multi-Device Theming](https://reader035.vdocuments.mx/reader035/viewer/2022062709/559118e51a28ab74758b4599/html5/thumbnails/38.jpg)
Thank You!
Questions?
@cmsdave@macbleser