Real-Time Multi-Device Theming

38
Real-Time Multi-Device Theming Say Goodbye to the Refresh Button Saturday, August 2, 2014

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, 2014

Transcript of Real-Time Multi-Device Theming

Page 1: Real-Time Multi-Device Theming

Real-Time Multi-Device ThemingSay Goodbye to the Refresh Button

Saturday, August 2, 2014

Page 2: Real-Time Multi-Device Theming

About the Speakers

Mac BleserFront-End Developer

@macbleser

Dave SawyerSolutions Architect

@cmsdave

cmsdave

Page 3: Real-Time Multi-Device Theming

Theming and Testing

Repetitive cycles!

Page 4: Real-Time Multi-Device Theming

Code Change

Browser Refresh

Repeat

Page 5: Real-Time Multi-Device Theming
Page 6: Real-Time Multi-Device Theming

● 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
Page 8: Real-Time Multi-Device Theming

We no longer design websites…

Page 9: Real-Time Multi-Device Theming

...we design multi-device web experiences

Page 10: Real-Time Multi-Device Theming

Modern Web Development Practices:What We Need

Page 11: Real-Time Multi-Device Theming

Modern Web Development Practices:What We Need

1.Multi-device workflow

Page 12: Real-Time Multi-Device Theming

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

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

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

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

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

Google Web Fundamentals

https://developers.google.com/web/fundamentals/

Page 18: Real-Time Multi-Device Theming

Google Web Starter Kit

https://developers.google.com/web/starter-kit/

Page 19: Real-Time Multi-Device Theming

Google Web Starter Kit

Inspired by:

Page 20: Real-Time Multi-Device Theming

Google Web Starter Kit

.com/google/web-starter-kit

Inspired by:

Page 21: Real-Time Multi-Device Theming

Underlying Technologies

Page 22: Real-Time Multi-Device Theming

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

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

Underlying Technologies

Page 25: Real-Time Multi-Device Theming

Underlying Technologies

http://gulpjs.com

Page 26: Real-Time Multi-Device Theming

Underlying Technologies

http://www.browsersync.io

Page 27: Real-Time Multi-Device Theming

Real-time Theming

● Synchronized browser and device testing

● Real-time multi-device previews

● Live Browser Reloading

Page 28: Real-Time Multi-Device Theming

Code Injection vs Page Refresh

Inject changes live in your browser and on real devices

vs

Page 29: Real-Time Multi-Device Theming

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

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

Live Demo!

Page 32: Real-Time Multi-Device Theming

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

PageSpeed Insights

● Web Starter Kit: Integration with PageSpeed Insights

Page 34: Real-Time Multi-Device Theming

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

Trivia Time!

Page 36: Real-Time Multi-Device Theming

Trivia Time!

In what year was the Netscape Navigator browser first released?

Page 37: Real-Time Multi-Device Theming

Trivia Time!

December 1994

Page 38: Real-Time Multi-Device Theming

Thank You!

Questions?

@cmsdave@macbleser