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