Real-Time Multi-Device Theming

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

Saturday, August 2, 2014

About the Speakers

Mac BleserFront-End Developer

@macbleser

Dave SawyerSolutions Architect

@cmsdave

cmsdave

Theming and Testing

Repetitive cycles!

Code Change

Browser Refresh

Repeat

● 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

We no longer design websites…

...we design multi-device web experiences

Modern Web Development Practices:What We Need

Modern Web Development Practices:What We Need

1.Multi-device workflow

Modern Web Development Practices:What We Need

1.Multi-device workflow2.Synchronized browser testing to allow

real-time 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

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

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

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

Google Web Fundamentals

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

Google Web Starter Kit

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

Google Web Starter Kit

Inspired by:

Google Web Starter Kit

.com/google/web-starter-kit

Inspired by:

Underlying Technologies

Underlying Technologies

Recommended Articles● Git for Designers:

http://bit.ly/git4designers-tutsplus● Intro to Git for Web Designers:● http://bit.ly/intro-git-designers

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

Underlying Technologies

Underlying Technologies

http://gulpjs.com

Underlying Technologies

http://www.browsersync.io

Real-time Theming

● Synchronized browser and device testing

● Real-time multi-device previews

● Live Browser Reloading

Code Injection vs Page Refresh

Inject changes live in your browser and on real devices

vs

Cross-device Synchronization

● Synchronize clicks, scrolls, forms and live-reload across multiple devices as you edit your project.

● BrowserSync

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.

Live Demo!

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!

PageSpeed Insights

● Web Starter Kit: Integration with PageSpeed Insights

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

Trivia Time!

Trivia Time!

In what year was the Netscape Navigator browser first released?

Trivia Time!

December 1994

Thank You!

Questions?

@cmsdave@macbleser