Why is it that coders don't ever convert a PSD using the right spacing?
- Thread starter contract
- Start date
I could never not design exactly what the site would look like in the browser first in a PSD.
Perhaps some can, but I like to know personally and also show the client so there's no unnecessary revisions once the site's in HTML/CSS.
Sure, it takes more time, but it very well may even out (or close to) if you consider revision requests that are had when you simply show a wire-frame.
And yeah, it's possible to be pixel perfect based on a PSD. Just have to have a competent coder, and it certainly helps knowing the html/css process when designing the PSD too. Makes it all the more easier.
Perhaps some can, but I like to know personally and also show the client so there's no unnecessary revisions once the site's in HTML/CSS.
Sure, it takes more time, but it very well may even out (or close to) if you consider revision requests that are had when you simply show a wire-frame.
And yeah, it's possible to be pixel perfect based on a PSD. Just have to have a competent coder, and it certainly helps knowing the html/css process when designing the PSD too. Makes it all the more easier.
I like both sides, but I just can't do them on the same day. I need a 3-6 hour break to switch brain power. When I'm on Monster (energy drink), that's when shit get crazy... 
Not really, because there's nothing to actually slice anymore. Colours, gradients, rounded corners, every button, drop shadows... pretty much ALL graphical treatments except complex textures and actual photographs are created using CSS now.
Photoshop is a terrible tool for laying out and manipulating text and the text looks nothing like it's going to look like in a browser (especially fucking Chrome!). You'd be better off using Illustrator as a wire framing tool (which I do from time to time if the job calls for wire framing). At least it has character and paragraph styles that can be applied and changed on the fly. All the other stuff you mention is done now in CSS much faster than I can do it in Photoshop. I find that Photoshop mockups take forever to do (I fucking hate them). If I want to change any of the things you've just listed, it's a simple matter of changing a few numbers in my CSS and viola, it's done. Design revisions take a few seconds to do and the client only needs to visit my demo link to see them in action.
Use a tool like LiveReload or similar and all your HTML/CSS changes show up in real time as you make and save them in your text editor (Sublime Text for example). Put your text editor on one screen and your website in a browser on another and you're good to go.
Depends on your skillset. I'm a fairly capable designer (probably because I design around content, not content around design) but I design in the browser. The content first approach is something far too few designers at -any- level take.
I use LESS (.js) so every new line of code shows automatically within the browser, and on any device viewing the page without a refresh (any platform, any device). This way I can have Sublime open on one screen and Chrome on the other and 'design' with every line of code.
It's faster and more efficient. It's not appropriate for every project, but it's how I design everything I make.
If you understand basic css3 it's nothing to make small tweaks in the stylesheet. You can affect a whole class of elements, or all elements within an element. So say you have a body wrapper div with a bunch of dynamically populated elements within you can do something like:
Same shit for links, you want to affect the images within a link, maybe take the blue border away:
Or you want to style links so they're white and have no line under:
Or only links in your nav div
Easy shit and you can style dozens/hundreds of elements that aren't even drawn until runtime
Rounded corners and box shadow:
To do box shadow inset:
Code:
#bodyDiv div:hover { //change appearance code }
or #bodyDiv img{ //width:80%; } to make sure the images within that div resize to the div's size.
Simply chain shit together as well:
#pfs div:hover, #youngAnimalGame div:hover{ //hover effect on divs within elements
cursor:pointer; //make a hand cursor
background:#2a2828;
color:white;
border:solid 0px #FFF056;
}
Code:
a img { border:none; } now all images in links have no border
Code:
a { border:none;color:white;text-decoration:none;}
Code:
#nav a { margin-left:1em;border:none; //etc }Rounded corners and box shadow:
Code:
border-radius: 9px;
box-shadow: 0px 3px 15px 5px black;
-moz-box-shadow: 0px 3px 15px 5px black;
-webkit-box-shadow: 0px 3px 15px 5px black;To do box shadow inset:
Code:
box-shadow: inset -.5px 1px 2px 3px gray;
+1 for xhtmlchop
They do solid work and are cheap. Their interface is also really good.
They alsorevise, redo, and recode anything, no questions asked. Just tell them you want stuff fixed, it will get fixed.
They have also done a couple of complex responsive designs for me and they do really good work at the too.
They do solid work and are cheap. Their interface is also really good.
They alsorevise, redo, and recode anything, no questions asked. Just tell them you want stuff fixed, it will get fixed.
They have also done a couple of complex responsive designs for me and they do really good work at the too.
Companies that argue against using Photoshop for designs tend to have very simple designs that are pretty bland. 37Signals being a great example. But their product is a project management app, you kind of want it to be bland...
About 90% of the time, I can take a PSD, write up the full html structure, start with a blank CSS file, and using Firebug or Chrome dev tools, completely style the page without clicking refresh once. You just add/edit your styles in the browser and copy it to your css file once it's correct.
Technically you could start with a blank html file too, but that's a little too tedious and even a caveman could do html so it's not worth it in my opinion. Sometimes I forget an element and add it in Firebug on the fly though.
