Basically I will Introduce the theory analyze, Preparation then integrate and finally... Quality assured your own work! The theory is to First step... Analyze... 1) You got yourself a design, what are you going to do with it?? a) check the font used. b) Take note of the sizes, c) Conceptualize the grids, header, navigations, etc... d) Check for repeated backgrounds. e) Check what could be an Image or a font, f) Check for UI if the design requires complicated interface that you might require JavaScript or flash or Etc. *** starring at the design for a bit and analyzing it won't eat that much time Rather spent precious time tryng to debug your lay-out... Preparation 2) Ops!! WE DON'T JUST SLICE it right away! a) Prepare your workspace! a.1) Create folders EA: ->images ->flash ->js ->styles ->etc. b) Prepare frameworks b.1) CSS frameworks * If you don't have your own frame works, you might as well copy from the web, Or use YUI for reset-font-grids.css (although I don't recommend YUI that much) b.2) HTML Frameworks * This is the part where you create a HTML document and lay-out your grids... b.3) if needed your JavaScript frameworks. * Theirs plenty out there, jquery, mootools, prototype, and Yes YUI... Integrate! 3) Ok! Here's what you been dying to! But wait!! a) Slice your design, Base on the data you've analyze... b) Integrate from heads down... Meaning start your way from the top down to the bottom, c) Be carefull, while doing so! Check for Browser compatibility... *it’s easier this way so you can easily track the problems... Finally! QA yourself 4) Here's the pain of it all! a) Check your output design on all browsers by "Prt Scr" it and overlaying it on your design comp. * This might be over doing it, but some clients are very particular about the design they paid! * This will also be a good habit, standardizing yourself. * You will also learn how different Browser acts on CSS, and try to create a common denominator b) Validate your CSS... * We want it pass W3C standard Right!?? c) Validate your HTML * Still W3C Standard! Yes Last Sorry! 5) Hypothesis! * In every new design, you'll learn new tricks, new bugs, new stuff etc. With this you'll learn more and grow more! And don't let a simple bug hurts you! They bite so just bite back! Lolz!! Cheers! **** of course you don't have to take it seriously, this are just "guide lines" not RULES!!! PS... also check this out! http://acomment.net/creating-css-layouts-the-best-tutorials-on-converting-psd-to-xhtml/76 http://csshowto.com/layout/psd-to-csshtml-in-easy-steps-part-1/
Nice post but why use generic frameworks? I don't see much point in that, I seldom see two sites that are alike and the time it takes to write a few div's and general styles takes almost no time.
I recomend use your own FRAMEWORKS, its more like a "start up kit"... and I suggest it for a more Cleaner coding Convention, I agree that seldom well see identical structure for websites. But if you've been codding long enough, you'll see the similarity of the coding, cheers!
My approach differs slightly, since the first thing I do is throw the PSD in the trash and ask "What content is going on the page?". If the PSD has enough content I simply look at the bits and go "What are these content areas?". THEN I code the CONTENT using minimalist semantic markup with ZERO concern for the final appearance and every concern put towards what the various elements are, THEN I add some standard divisions between content areas with semantic classnames or ID's on them... and perhaps a few standard div or span sandbags to allow for image replacement techniques or sliding doors. Once I have the HTML written I bend that markup to my will with the CSS creating my layout. Then and ONLY then do I go into the goofy paint program to make the graphics to hang on the layout - by which time that original PSD (if any) is usually completely made of /FAIL/ since I'd have to remaster everything anyways. IMHO starting out from a picture is working in reverse, and I tell my clients exactly that. The whole approach of churning out complete accessability /FAIL/ in some goof-assed paint program is back-assward - and whoever started this trend seriously needs a brick upside the head since it's one of the leading causes of piss-poor coding habits, fat bloated poorly sliced sites that break cross-browser and a half dozen other things that end up flooding forums like this with "But it works in IE", "But it works in FF" or "It's brokin in _____" PSD to (x)HTML? /FAIL/ at the entire process by starting at the end.
My approach is much like deathshadows, unless I'm working for someone who needs to see the finished product first. In any case, I never slice my design. It's always HTML first, then graphics and CSS, and finally any specialized backend coding if required. Before the HTML, though, I do have a rough sketch handy to be able to tell what the hell I'm doing.
Um.... My method is more on preparation rather than the actual coding, sorry for the miss understanding. but if you guys are referring with the step 3 (where I sliced). well I already prepared my html during step 2 Before I slice the PSD. and Yes I do use my own frameworks, But mostly for reset, font, clear fix etc. etc. and let us not say that we don't have concern for the final appearance, appearance is very essential for front end, and usability is still a concern. I do agree with poor coding habits though, saw a lot of those lately, as I always developed my self to be a better coder... I can't call myself an expert, But glad to hear some peoples thoughts at this one. sometimes our methods would make a difference... Input appreciated! Cheers!
good post.. but probably a tiny grid framework is far better.. i usually use 960GS.. here is a review and basic tutorial 960 Grid System - CSS Framework Review
I think you missed what I was saying. That you even HAVE a step one is not 'preparation' it's wasted time. That you even have a PSD before code is laid down in your step two is IMHO putting the cart before the horse. Having a 'designer' make a PSD and calling it a 'template' - Pure unadulterated horse manure. Creating a website by starting in a paint program like photoshop before you have Semantic HTML with a CSS layout is just plain made of /FAIL/. As such you shouldn't be 'slicing' images, but creating images to hang on the CSS layout. Basically, if the process of site design started out in photoshop, the gimp or some other goof assed art program, /FAIL/, as that is partly responsable (along with goof assed WYSIWYGS and overreliance on bloated tools) for much of what is wrong with the internet today. Careful what you ask for Oh, and BlueP, thanks for the thread necromancy, I'd forgotten about this one.
No problem. Still, I'll extend on my previous comment about m_wc's comment: A grid framework is the wrong way to build a site. Normally you write the structure of the code in HTML, then apply styles to it with CSS. if you don't do that, you're uneducated (or worse, educated at a college/university) and using tables for a layout. And if you are already doing that, why bother using CSS to make your page look like its using tables when its not, that takes longer to load than tables and results in as bad/worse code filled with unnecessary classes. Or you could just do it the quicker, easier way and code the structure with HTML with no regard to the design and apply CSS and graphics later and end up with less headaches trying to get things to work in all browsers. Of course, you are entitled to your opinion it's just that - in this case - your opinion is wrong.