The document discusses the benefits of designing websites directly in the browser using HTML and CSS rather than designing first in Photoshop. It argues that designing in the browser results in more accurate and web-native designs that are buildable because the design is being built as it is designed. It provides tips for getting started with designing in the browser such as using frameworks for layouts, embracing progressive enhancement, and anticipating how the design will be implemented with content management systems like Drupal.
hiI'm Mason Wendell and i run Canary Promotion + Designand I've been designing websites for a long timeand for a long time i've been designing websites in photoshop, and not in the browser. working in programs like photoshop has been the only way to go unless you wanted sites that looked like this:
recent developments like the release and adoption of new browsers like chrome, safari, and firefox,and their inclusion of web standards like css2 and css3 have made it a much more viable option to DESIGN websites using markup, css, and the browser itself as your primary design tools.
Some things get lost in translation
leads to extra work in CSS potentially sloppy
how can you demonstrate fast & exciting VS slow and classy
you might be used to the differences in type, but most people aren’t I’m having these conversations with a client now. But I’m having them early. The worst time to have these discussions is at the end of the project. No one wants to reset the project at that stage Decide with your client how much effort you will put into MAKING OLD BROWSERS LOOK LIKE NEW BROWSERS
you inherit the browser’s strengths and the LIMITATIONS as well. This is a GOOD thing.
This doesn’t mean you don’t push limits. It means you know which limits you’re pushing.
What to do if this headline wraps? How does that affect leading and margin settings? Have you designed for all possible list types? Tables? Widgets? Form elements? How about fluid layouts?
Design for interactions with the user. CSS and JS can help you design and prototype simple and complex interactions Design for typographic details, like baseline grids, letter spacing, fancy ampersands, correct quotes and dashes
Most of the old photoshop-only stuff can be achieved in CSS3
I found I was presenting fewer and fewer templates to clients, and shifting some of my creative thinking to the CSS stage, as deadlines creeped up.
by removing the need for clients to guess at how a site will be used you gain their comfort and confidence