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.
Thank sponsors:
- Fuel Collective: food, discounted apps
- OfficePort: space to meet
Jon - brief overview of the talk.
=> Matt
Matt
- set scene with a real-life project
- gathered requirements
Matt
- we were both happy with this
- direction to continue with
Matt
- throw the content into the page skeleton
Matt
- throw the content into the page skeleton
Matt
- throw the content into the page skeleton
Matt
- 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
Jon
- clearly this approach has worked
- used in most agencies (especially large compartmentalized ones)
- so what’s wrong?
Jon
- what are copies of web pages?
- Andy Clarke quote from An Event Apart Chicago
Jon
Jon
Jon
=> Matt
Matt
Matt
Matt
Matt
=> Jon
Matt
=> Jon
Matt
=> Jon
Matt
=> Jon
Matt
=> Jon
Matt
=> Jon
Jon
-we’ve discussed shortcomings of Photoshop
Jon
- handles text styles
- externally linked files
- vectors make scaling up/down easy
Jon
- handle text styles
- externally linked files
- vectors for resizing
- master templates
- object styles
- simulate float: css
=> Matt
Matt
- best suited tool for layout
- not popular, but could it be?
Matt
- becoming popular again
- externally linked files
- nice drawing tools
- 1 master template
- button states
Matt
- process becomes more manageable with other apps
- still not working with the end product
=> Jon
Jon
- if none of these “design” tools are great for web design…
- what are tools are we proposing you use?
Jon
Jon
Jon
Jon
- with CSS
- many more options than apps offer
Jon
- images, video, stylesheets, etc
Jon
- ability to handle master templates
- insert chunks of markup
- note: may need a simple web framework or template renderer
=> Matt
Matt
Matt
Matt
Matt
Matt
Matt
Matt
=> Jon
Jon
- extra details, “polish”
Jon
=> Matt
- advanced CSS available to more & more browsers
- in turn, means more & more users
Matt
=> Jon
Jon
=> Matt
Matt
=> Jon
Jon
- useful for lightboxes / popups
=> Matt
Matt
=> Jon
Jon
- animate nearly any numeric property
=> Matt
Matt
=> Jon
Jon
- equivalent to “Free Transform” in Photoshop
=> Matt
Matt
- available since Webkit 3.1, Chrome 3, FF 3.5, Opera 10, IE4
- Typekit, FontSquirrel
=> Jon
Jon
- in addition to manually editing in text editor
- there are plugins and built-in features available
- edit in-browser
- quickly test
Jon
- simplified Firebug Lite for other browsers
Jon
- all webkit browsers
- Webkit nightly features an updated Inspector
=> Matt
Matt
Matt
Matt
- impossible, due to font rendering, supported features
- don’t try to force cross-browser perfection
- adopt the mindset of inevitable imperfection
=> Jon
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
Jon
- 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
Jon
- forgo IE rendering altogether
- provide webkit experience to IE users
- used on a previous project (shortcts)
- required for IE
=> Matt
Matt
Matt
- working on the end-product
- no throwaways
Matt
- Adobe Version Cue
- Use Git or SVN
-- merge changes from different committers
=> Jon
Jon
- focus on developing semantic markup first
- and developing the content itself (reference Shay?)
- not distracted by the design
Jon
- if you have the content to work with, you’re “designing” and not just “decorating”
=> Matt
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
Matt
- already working with end product
- “drop in” to production system
=> Jon
Jon
Jon
Jon
- appears like a finished product, but is just a “copy”
=> Matt
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
Matt
Matt
- not ashamed to throwaway quick sketches
Matt
Matt
- fits right in with agile development methodologies
- no waiting for the big design phase
- client’s needs and goals will change—inevitable imperfection
=> Jon
Jon
- so we’ve talked about….
- comes down to knowing your responsibilities as a web designer