• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Your Browser Is The New Photoshop
 

Your Browser Is The New Photoshop

on

  • 1,250 views

Do you spend your days in Photoshop creating comp after comp, all the while wishing for a more efficient means with which to design? The streamlined application of your dreams is now here, and its ...

Do you spend your days in Photoshop creating comp after comp, all the while wishing for a more efficient means with which to design? The streamlined application of your dreams is now here, and its called a browser. The ever-extending capabilities of CSS now rival those of Photoshop, with designing in the browser quickly becoming the norm. Matt Puchlerz and Jon Buda will show you why web design and front-end development are inextricably linked, and how in-browser design using advanced CSS techniques foster that concept.

Statistics

Views

Total Views
1,250
Views on SlideShare
1,248
Embed Views
2

Actions

Likes
5
Downloads
15
Comments
0

1 Embed 2

http://www.slideshare.net 2

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Thank sponsors: <br /> - Fuel Collective: food, discounted apps <br /> - OfficePort: space to meet <br /> <br /> Jon - brief overview of the talk. <br /> <br /> <br /> => Matt
  • Matt <br /> - set scene with a real-life project <br /> - gathered requirements
  • Matt <br /> - we were both happy with this <br /> - direction to continue with
  • Matt <br /> - throw the content into the page skeleton
  • Matt <br /> - throw the content into the page skeleton
  • Matt <br /> - throw the content into the page skeleton
  • Matt <br /> - huge Photoshop file size <br /> - split up into 10 different PS files <br /> - lots of time required to change common elements <br /> - slight header differences led to inconsistent comps <br /> <br /> <br /> => Jon
  • Jon <br /> - clearly this approach has worked <br /> - used in most agencies (especially large compartmentalized ones) <br /> - so what&#x2019;s wrong?
  • Jon <br /> - what are copies of web pages? <br /> - Andy Clarke quote from An Event Apart Chicago
  • Jon
  • Jon
  • Jon <br /> <br /> <br /> <br /> => Matt
  • Matt
  • Matt
  • Matt
  • Matt <br /> <br /> <br /> <br /> => Jon
  • Matt <br /> <br /> <br /> <br /> => Jon
  • Matt <br /> <br /> <br /> <br /> => Jon
  • Matt <br /> <br /> <br /> <br /> => Jon
  • Matt <br /> <br /> <br /> <br /> => Jon
  • Matt <br /> <br /> <br /> <br /> => Jon
  • Jon <br /> -we&#x2019;ve discussed shortcomings of Photoshop
  • Jon <br /> - handles text styles <br /> - externally linked files <br /> - vectors make scaling up/down easy
  • Jon <br /> - handle text styles <br /> - externally linked files <br /> - vectors for resizing <br /> - master templates <br /> - object styles <br /> - simulate float: css <br /> <br /> => Matt
  • Matt <br /> - best suited tool for layout <br /> - not popular, but could it be?
  • Matt <br /> - becoming popular again <br /> - externally linked files <br /> - nice drawing tools <br /> - 1 master template <br /> - button states
  • Matt <br /> - process becomes more manageable with other apps <br /> - still not working with the end product <br /> <br /> <br /> => Jon
  • Jon <br /> - if none of these &#x201C;design&#x201D; tools are great for web design&#x2026; <br /> - what are tools are we proposing you use?
  • Jon
  • Jon
  • Jon
  • Jon <br /> - with CSS <br /> - many more options than apps offer
  • Jon <br /> - images, video, stylesheets, etc
  • Jon <br /> - ability to handle master templates <br /> - insert chunks of markup <br /> - note: may need a simple web framework or template renderer <br /> <br /> <br /> <br /> => Matt
  • Matt
  • Matt
  • Matt
  • Matt
  • Matt
  • Matt
  • Matt <br /> <br /> <br /> <br /> => Jon
  • Jon <br /> - extra details, &#x201C;polish&#x201D;
  • Jon <br /> <br /> => Matt <br /> - advanced CSS available to more & more browsers <br /> - in turn, means more & more users
  • Matt <br /> <br /> <br /> <br /> => Jon
  • Jon <br /> <br /> <br /> <br /> => Matt
  • Matt <br /> <br /> <br /> <br /> => Jon
  • Jon <br /> - useful for lightboxes / popups <br /> <br /> <br /> => Matt
  • Matt <br /> <br /> <br /> <br /> => Jon
  • Jon <br /> - animate nearly any numeric property <br /> <br /> <br /> => Matt
  • Matt <br /> <br /> <br /> <br /> => Jon
  • Jon <br /> - equivalent to &#x201C;Free Transform&#x201D; in Photoshop <br /> <br /> <br /> => Matt
  • Matt <br /> - available since Webkit 3.1, Chrome 3, FF 3.5, Opera 10, IE4 <br /> - Typekit, FontSquirrel <br /> <br /> <br /> => Jon
  • Jon <br /> - in addition to manually editing in text editor <br /> - there are plugins and built-in features available <br /> - edit in-browser <br /> - quickly test
  • Jon <br /> - simplified Firebug Lite for other browsers
  • Jon <br /> - all webkit browsers <br /> - Webkit nightly features an updated Inspector <br /> <br /> <br /> => Matt
  • Matt
  • Matt
  • Matt <br /> - impossible, due to font rendering, supported features <br /> - don&#x2019;t try to force cross-browser perfection <br /> - adopt the mindset of inevitable imperfection <br /> <br /> => Jon
  • Jon <br /> <br /> - enhanced experience for &#x201C;Grade A&#x201D; browsers <br /> -- FF, Safari, Chrome <br /> - older browsers, IE: just make sure it&#x2019;s still functional <br /> -- supply HEX alternatives to RGBA() colors <br /> -- workable background color instead of gradient() <br /> -- it&#x2019;s okay, consistent to what they&#x2019;re used to
  • Jon <br /> <br /> - IE6 = lowest common denominator <br /> - know your audience <br /> -- if IE6 is your audience, can&#x2019;t really drop it entirely <br /> - lazily support for IE6 by using the &#x201C;universal style sheet&#x201D; <br /> - one way to not worry about it but still support it
  • Jon <br /> <br /> - forgo IE rendering altogether <br /> - provide webkit experience to IE users <br /> - used on a previous project (shortcts) <br /> - required for IE <br /> <br /> => Matt
  • Matt
  • Matt <br /> - working on the end-product <br /> - no throwaways
  • Matt <br /> - Adobe Version Cue <br /> - Use Git or SVN <br /> -- merge changes from different committers <br /> <br /> <br /> => Jon
  • Jon <br /> <br /> - focus on developing semantic markup first <br /> - and developing the content itself (reference Shay?) <br /> - not distracted by the design
  • Jon <br /> - if you have the content to work with, you&#x2019;re &#x201C;designing&#x201D; and not just &#x201C;decorating&#x201D; <br /> <br /> <br /> => Matt
  • Matt <br /> - starting with a functional base of plain HTML <br /> - don&#x2019;t start by thinking about a &#x201C;Javascript image carousel&#x201D; <br /> - enhance the experience for &#x201C;Grade A&#x201D; browsers
  • Matt <br /> - already working with end product <br /> - &#x201C;drop in&#x201D; to production system <br /> <br /> <br /> => Jon
  • Jon
  • Jon
  • Jon <br /> - appears like a finished product, but is just a &#x201C;copy&#x201D; <br /> <br /> <br /> => Matt
  • Matt <br /> - client sees and judges interactive piece <br /> - designers/developers can envision the end product when looking at a comp, client cannot <br /> - less for them to have to envision
  • Matt
  • Matt <br /> - not ashamed to throwaway quick sketches
  • Matt
  • Matt <br /> - fits right in with agile development methodologies <br /> - no waiting for the big design phase <br /> - client&#x2019;s needs and goals will change&#x2014;inevitable imperfection <br /> <br /> <br /> => Jon
  • Jon <br /> - so we&#x2019;ve talked about&#x2026;. <br /> - comes down to knowing your responsibilities as a web designer
  • Jon
  • Jon
  • Jon <br /> <br /> <br /> <br /> => Matt
  • Matt
  • Matt
  • Matt
  • Matt
  • Matt / Jon
  • .

Your Browser Is The New Photoshop Your Browser Is The New Photoshop Presentation Transcript

  • Your Browser is the New Photoshop Matt Puchlerz & Jon Buda
  • The typical scenario:
  • The first comp.
  • A few more...
  • A few more...
  • What’s wrong with this approach?
  • “ We aren’t designing copies of web pages, we’re designing web pages. — Andy Clarke via Quotes on Design
  • Page interaction?
  • Scrolling?
  • Resizing the browser?
  • The font stack?
  • Liquid layouts?
  • Browser inconsistencies?
  • Fake interaction.
  • Fake interaction.
  • Fake interaction.
  • Fake interaction.
  • Fake interaction.
  • What about other applications?
  • Illustrator?
  • InDesign?
  • “ Working on a book in InDesign makes it even more obvious how ill-suited Photoshop is for web design. — Jason Santa Maria via Twitter
  • Fireworks?
  • We’re still designing copies.
  • What do you propose?
  • HTML
  • Browser HTML CSS
  • Like popular apps, designing in the browser offers:
  • Text & object styles.
  • Externally linked files.
  • “Master” templates.
  • Designing in the browser also offers:
  • Page interaction.
  • Scrolling.
  • Resizing the browser.
  • The font stack.
  • Liquid layouts.
  • Browser inconsistencies.
  • What about the “designy” stuff?
  • There’s a CSS for that.
  • border-radius:
  • gradient()
  • rgba()
  • box-shadow:
  • text-shadow:
  • transition:
  • mask:
  • transform: scale() rotate() translate() skew()
  • @font-face {}
  • Helpful Tools:
  • Firebug.
  • Web Inspector.
  • What about IE?
  • Do websites need to look exactly the same in every browser?
  • Rely on graceful degradation.
  • Universal IE6 stylesheet.
  • Chrome Frame!
  • How does this help me?
  • Increased efficiency.
  • Concurrent editing & versioning.
  • Develop better content hierarchy and order of importance.
  • Less time wasted on pure “decoration.”
  • Encourages progressive enhancement.
  • Easier transition from development to production.
  • How does this help my client?
  • Why would you sign-off on static mockups?
  • Pixel-perfection sets the wrong expectation.
  • Focusing on function rather than form.
  • Receive relevant feedback, sooner.
  • Sketch when needed.
  • “ And don’t forget, the next step isn’t a polished wireframe. It’s code you can click on! — Ryan Singer via Signal vs. Noise
  • Greater agility.
  • Know your responsibilities.
  • Your design will affect development.
  • Development will affect your design.
  • Work together from the beginning.
  • Be wary of too much specialization.
  • Provide the best experience possible.
  • Be a “webmaster.” A craftsman.
  • Use the correct tool for the job.
  • The browser is all you need.
  • Thanks! Any questions? Matt Puchlerz Jon Buda @mattpuchlerz @jonbuda http://matt.puchlerz.com http://jonbuda.com