Real-Time Multi-Device Theming
-
Upload
design-for-drupal-boston -
Category
Internet
-
view
71 -
download
0
description
Transcript of 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