Fast & Furious Responsive Design in Chrome DevTools

Responsive

Design in

Chrome

FAST & FURIOUS

Design is…

Evolving

Improving

Moving fast

How can we?

Who Am I

TONY JESSUP

DESIGNER/DEVELOPER

CREATIVE/TECHNICAL

NEW YORK/LOS ANGELES

FATHER/HUSBAND

Let’s talk about

Once upon a designer

Design industry changes

Browsers apps

Chrome DevTools

Recap

Once Upon a Designer

Design

DevelopmentPerception

Learn to LearnMaster being a student

DevelopmentReality

Design

Dev

Both

Sometimes still…

You will slay the beast

Design industry changes

Change in applications

Photoshop

Illustrator

BBEdit

Explorer

Photoshop

Illustrator

Fireworks

BBEdit

TextMate

Dreamweaver

Explorer

Safari

Firefox

Photoshop

Illustrator

Fireworks

BBEdit

TextMate

Dreamweaver

Coda

Explorer

Safari

Firefox

Chrome

Photoshop

Illustrator

Fireworks

Sketch

BBEdit

TextMate

Dreamweaver

Coda

Sublime Text

Explorer

Safari

Firefox

APPLICATIONS

Chrome DevTools

Google Search

Change in tools

.JPG

.GIF

.SWF

.SVG

FILES

HTTP

HTTPS

FTP

SFTP

SSH

PROTOCALS

Static

Dynamic

E-commerce

CMS Driven

Platform

WEBSITES

Libraries

RubyGems

Github Repos

Frameworks

Node/NPM

TOOLSLANGUAGES

CSS

HTML

Sass

Javascript

2014

Change of resources

Stack Exchange - Q&A

MDN Docs - Reference

Dash App - Documentation

Articles - Medium, HackerNews

Guides - coolestguidesontheplanet.com

IRC - webchat.freenode.net #irchelp

Books - ABookApart, O’Reilly

Mags -.net, arts, hacker monthly

Sites - Codrops, CSS-Tricks,

Lists - Scotch.io, eWebDesign

Lynda

Treehouse

Pluralsight

Frontend Masters

Mijingo

Dash

Design is already being

done in the browser

THE GRID

Website Builder Platforms

Jan 25, 2015

“Naked WordPress (without plugins) is not

competitive to Wix, Weebly, Squarespace, etc.”

– Matt MullenwegWordpress Founder

“With @Squarespace commercials on TV, YouTube,

and every taxicab in NYC, has web design become a

commodity?”

– Jeffrey ZeldmanHappy Cog, A List Apart Founder & Author

Feb 6, 2015

4.5 Million4.5 MillionUsers? 1 SuperBowl Ad

Version 7

SquareSpace

WIX

It’s totally free!

Weebly

100’s of customizable templates

Wordpress

Runs 23% of the Internet

E-commerce

PlatformsMagento, Shopify

CMS PlatformsWordPress, Drupal

EnterpriseSalesforce

AppsAndroid/iOSBuilders

Squarespace etc.

Lots of ecosystems

Explore what’s

out there

Browsers apps

Browsers are powerful

Chrome:// Demo

Daily we deal with lots of files

Check email… open Outlook

Get doc… open Word

See report… open Acrobat

Create graphic… open Photoshop

Edit code.. open Editor

Instead of opening…

Open a new tab and use cloud

+A

OfficePhoto Edit DevTools

Chrome probably has an

app for that.

Chrome apps demo

Photoshop still better for

some jobs

Is the cloud safe?

Browser Wars

45%

StatCounter - Worldwide browser desktop and tablet 2013 - 2015

22% 18% 10% 5%

Browser Usage

Sadly… Browser Wars are NOT

Over

We have services and

tools to help

2009 2015

Chrome DevTools

Browser DevTools

Apps Extensions

Chrome DevTools

DESKTOP

EDITOR CSS

DESKTOP

EDITORFILES

MO

BIL

E

DESKTOP

EDITOR

MO

BIL

ECONSOLE

MOBILE

EDITOR

Unlimited config

MOBILE MOBILE

Instant updates demo

Chrome Workspaces

Firefox Developer Edition

Text Editor

Code

completion

Emulation

Style editor

Instant search

Animation timing

Debug Code

Everything in a browser

Sketch

Site versions demo

Hotfix & Deploy

Lot’s of options…

Apps -> Tasks -> CLI

Get comfy

Recap

Change is here.

Explore don’t fear.

Browser apps for fast work.

Chrome DevTools workflow.

Thanks!

Now go be fearless.

Tony Jessup @tonypjessup