Presentation for Southern California Web Designers & Developers (SCWDD) Meetup - given by Tony Jessup (@tonypjessup) February 24, 2015 - Q Inc. Marina del Ray, CA
Fast & Furious Responsive Design in Chrome Stop explaining comps and start showing working demos. Tired of translating your responsive designs from Photoshop into the browser over and over? Break the cycle and wow clients by updating design instantly in the browser while creating code you don’t throw away.
Tony Jessup, a web industry veteran, entrepreneur and designer, will explain the benefits and pitfalls of designing in the browser using Google Chrome’s Developer Tools. Bring a sketch to life by applying styles in real-time as the browser refreshes automatically! Learn how to save versions and leverage browser plugins to work quickly.
You don’t need to be a designer or developer to participate. Just come with an open mind and a willingness to be involved in the process and bring new techniques to your projects or organization.
By working in the browser itself, there’s no need to wait for pixel-perfect comps to see if your idea works. And when someone asks “How would we recreate this design in production?” It’s already done.
Tony Jessup currently works as UI Designer & Developer at Hollywood Software Inc.
A story about how I merged Design and Development.
Design was mostly about the Visual and Usability. Development could be a scary forest.
Development is a forest, and you can get lost, but others are on the same path.
Education eliminates fear guaranteed.
Development is really fun and exciting and amazing… and software is ‘eating the world’.
I had to consider which path and decided the future is in both for me.
Still learning new things can feels like a never-ending battle. You will learn somethings that will no longer be valid sooner than you think.
It’s ok. Now-a-days you can be very prepared.
We are used to change. Industries change and ours is no different - maybe a little faster than most.
From file types to website types we have seen a lot of change. This can cause confusion, look at 2014 google searches and see how these three popular terms converged, showing confusion answering the question “how do I build a website?”.
There are lots more resources today to learn, brush up and explore
Designers, Developers and Clients are all building these Builder Platforms sites in the browser. Which makes using Chrome DevTools for design/development even better!
These tweets got my attention.
The Builder Platforms have millions of users (4.5MM?) and obviously make millions of dollars.
Squarespace editor can be used in a browser or on a tablet.
The Wix editor.
The Weebly editor.
The Wordpress admin. Look at that Contact Form 7 plugin - 24MM Downloads! Now that is an ecosystem.
Builder Platforms (like Squarespace etc.) are just another ecosystem. There is plenty of work out there for designers and developers.
It’s time to explore and learn. If you are a designer or developer - go try a new CMS (Craft), Builder Platform (Squarespace), SDK (Adobe Creative SDK) or API (programmableweb.com).
Browsers (especially Chrome) can do a lot.
If you type in chrome://about into Chrome browser you get all kinds of resource links. Try it!
These days projects have lots of files we need to keep track of.
We open new applications for each file and create more folders and files on our computers.
Instead of opening another application and creating files in folders. Try opening a new browser TAB instead and using CLOUD services to store the files. Zip a backup if you are worried.
Start thinking about popular apps moving to the browser. Office in the cloud is actually better than Office (Word, Excel etc.) on the Mac. Pixlr app does a lot of basic Photoshop type manipulation and Sublime Text (although amazing) can be replaced by Chrome DevTools source tab + terminal and grunt/gulp devotees extensions for most development editor needs.
There are many many Chrome Apps that make it easy to launch from the Mac OSX doc shown here.
A example of a browser window and tabs only workflow. Showing editing docs, excel spreadsheets, stock photo downloading, photo editing, code editing all within tabs.
Photoshop is still great for photo retouching.
The cloud is safter than coffee spilling on your laptop you forgot to backup recently.
Browser Wars are browsers (Chrome, FireFox, Explorer etc.) fighting to be the default browser on your computer.
Currently Chrome is winning in browser usage as of February 24, 2015
Browser Wars are not over and probably won’t ever be because they are too important.
We have lots of tools to help like caniuse.com, css3please.com and modernizr.com to help with differences in browsers.
Chrome has 4 main parts - The Browser, DevTools, Apps and Extensions
Lets try designing using Chrome DevTools
There is a lot of flexibility in the way you can configure your design and development environment in Chrome.
Large device preview up top. Elements on left and Styles on right.
Larger monitor at home so lets try Large Device on top, Sources File system on left, Editor on right and a small device window preview on the right.
You can arrange browser screens to fit your preference.
Lets use Google’s Web Starter Kit (developers.google.com/web/starter-kit) to show an example of instant updates and all scrolling at once. A very powerful environment for design and development.
Chrome Workspaces makes a DevTools workflow possible. I tweeted at Firefox about it for their Developer Edition Browser
DevTools editor even has basic code completion. Great for referencing variables (Sass) quickly.
Chrome DevTools maps web files to local disk files
Not only device emulation (included User Agent Strings) but Network Emulation - so you can see how that heavy background really loads when people around the world are not on good network connection.
Chrome DevTools as so many more options. It’s worth exploring them all at developer.chrome.com/devtools
Easily debug code - even test out bugs that are html structure (moving a div up fixed the problem).
Everything you need to do basic web site and app development can be done in a Chrome. There I said it.
However, nothing will replace a simple sketch pad and a pencil.
Demo showing how you can design versions in the browser and easily email screenshots in Gmail.
This shows how you can find an issue on a live site, debug the issue, and update the code, commit the changes using Git and push the code to production - all using Chrome DevTools and the Terminal extension.
Beginners can use apps, Intermediate can use tasks/npm packages and Advanced users can just use Command Line Interface.
Get comfy with new tools and tech. It will be time well spent in the end.
Fast & Furious Responsive Design in Chrome DevTools
Jan 25, 2015
“Naked WordPress (without plugins) is not
competitive to Wix, Weebly, Squarespace, etc.”
– Matt Mullenweg
“With @Squarespace commercials on TV, YouTube,
and every taxicab in NYC, has web design become a
– Jeffrey Zeldman
Happy Cog, A List Apart Founder & Author
Feb 6, 2015