Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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
Development
Perception
Learn to Learn
Master being a student
Development
Reality
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
E...
Google Search
Change in tools
.JPG
.GIF
.SWF
.SVG
FILES
HTTP
HTTPS
FTP
SFTP
SSH
PROTOCALS
Static
Dynamic
E-commerce
CMS Dr...
Change of resources
Stack Exchange - Q&A
MDN Docs - Reference
Dash App - Documentation
Articles - Medium, HackerNews
Guide...
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 Mullenweg
Wor...
4.5 Million4.5 Million
Users? 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
Platforms
Magento, Shopify
CMS Platforms
WordPress, Drupal
Enterprise
Salesforce
Apps
Android/iOSBuilders
Squar...
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 Edit...
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
MOBILE
DESKTOP
EDITOR
MOBILE
CONSOLE
MOBILE
EDITOR
Unlimited config
MOBILE M
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
Fast & Furious Responsive Design in Chrome  DevTools
Fast & Furious Responsive Design in Chrome  DevTools
Fast & Furious Responsive Design in Chrome  DevTools
Upcoming SlideShare
Loading in …5
×

Fast & Furious Responsive Design in Chrome DevTools

1,559 views

Published on

Discover how do design and develop responsive websites and web apps using just the Chrome browser and Chrome DevTools.

This presentation includes embedded video demos.

Presented at the Southern California Web Designers & Developers (SCWDD) Meetup on February 24, 2015 by Tony Jessup (@tonypjessup).

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Fast & Furious Responsive Design in Chrome DevTools

  1. 1. Responsive Design in Chrome FAST & FURIOUS
  2. 2. Design is…
  3. 3. Evolving
  4. 4. Improving
  5. 5. Moving fast
  6. 6. How can we?
  7. 7. Who Am I TONY JESSUP DESIGNER/DEVELOPER CREATIVE/TECHNICAL NEW YORK/LOS ANGELES FATHER/HUSBAND
  8. 8. Let’s talk about Once upon a designer Design industry changes Browsers apps Chrome DevTools Recap
  9. 9. Once Upon a Designer
  10. 10. Design
  11. 11. Development Perception
  12. 12. Learn to Learn Master being a student
  13. 13. Development Reality
  14. 14. Design Dev Both
  15. 15. Sometimes still…
  16. 16. You will slay the beast
  17. 17. Design industry changes
  18. 18. 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
  19. 19. 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
  20. 20. 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
  21. 21. Design is already being done in the browser
  22. 22. THE GRID Website Builder Platforms
  23. 23. Jan 25, 2015 “Naked WordPress (without plugins) is not competitive to Wix, Weebly, Squarespace, etc.” – Matt Mullenweg Wordpress Founder “With @Squarespace commercials on TV, YouTube, and every taxicab in NYC, has web design become a commodity?” – Jeffrey Zeldman Happy Cog, A List Apart Founder & Author Feb 6, 2015
  24. 24. 4.5 Million4.5 Million Users? 1 SuperBowl Ad
  25. 25. Version 7 SquareSpace
  26. 26. WIX It’s totally free!
  27. 27. Weebly 100’s of customizable templates
  28. 28. Wordpress Runs 23% of the Internet
  29. 29. E-commerce Platforms Magento, Shopify CMS Platforms WordPress, Drupal Enterprise Salesforce Apps Android/iOSBuilders Squarespace etc. Lots of ecosystems
  30. 30. Explore what’s out there
  31. 31. Browsers apps
  32. 32. Browsers are powerful
  33. 33. Chrome:// Demo
  34. 34. Daily we deal with lots of files
  35. 35. Check email… open Outlook Get doc… open Word See report… open Acrobat Create graphic… open Photoshop Edit code.. open Editor
  36. 36. Instead of opening… Open a new tab and use cloud +A
  37. 37. OfficePhoto Edit DevTools
  38. 38. Chrome probably has an app for that.
  39. 39. Chrome apps demo
  40. 40. Photoshop still better for some jobs
  41. 41. Is the cloud safe?
  42. 42. Browser Wars
  43. 43. 45% StatCounter - Worldwide browser desktop and tablet 2013 - 2015 22% 18% 10% 5% Browser Usage
  44. 44. Sadly… Browser Wars are NOT Over
  45. 45. We have services and tools to help 2009 2015
  46. 46. Chrome DevTools
  47. 47. Browser DevTools Apps Extensions
  48. 48. Chrome DevTools
  49. 49. DESKTOP EDITOR CSS
  50. 50. DESKTOP EDITORFILES MOBILE
  51. 51. DESKTOP EDITOR MOBILE CONSOLE MOBILE EDITOR Unlimited config MOBILE M
  52. 52. Instant updates demo
  53. 53. Chrome Workspaces Firefox Developer Edition
  54. 54. Text Editor Code completion
  55. 55. Emulation
  56. 56. Style editor Instant search Animation timing
  57. 57. Debug Code
  58. 58. Everything in a browser
  59. 59. Sketch
  60. 60. Site versions demo
  61. 61. Hotfix & Deploy
  62. 62. Lot’s of options… Apps -> Tasks -> CLI
  63. 63. Get comfy
  64. 64. Recap
  65. 65. Change is here. Explore don’t fear. Browser apps for fast work. Chrome DevTools workflow.
  66. 66. Thanks! Now go be fearless. Tony Jessup @tonypjessup

×