What is Digg?136 Comments
- inactive, on 10/12/2007, -6/+81Definantly? Seriously man?
http://www.digg.com/offbeat_news/D_E_F_I_N_I_T_E_L_Y - Zipbob, on 10/12/2007, -3/+68Finally something to stop people just throwing out photoshopped (bite me) table-based layouts
Simple and worth a look if you're learning how to use such techniques - GawtMilk, on 10/12/2007, -2/+65Dugg for avoiding the obnoxious "®" fad.
- Lorddias, on 10/12/2007, -5/+37Damn I thought this meant how to use a knife efficiently in Counter Strike Source.
- joaob, on 10/12/2007, -1/+19I use Photoshop to create a mock-up of the layout. I'll extract the needed images or recreate them. Everything else is 100% hand coded.
Relying 100% on Photoshop for layouts is retarded. - tinapaal, on 10/12/2007, -6/+22very good indeed. Since I am a noob in CSS, I defintively see the value in this tutorial.
Dugg. - PsychoticDude85, on 10/12/2007, -4/+19Not that good, suffers somewhat from divitus (especially in cases like that clear div, and using a div for the footer), using id names like "left" or "right" is something one should avoid (since you might one day want another style which places the column somewhere else and then the id has less than no meaning).
Perhaps something a newbie might be interested in, but I wouldn't recommend it much since they wouldn't realise that some of the things going on are mistakes. - delvach, on 10/12/2007, -1/+16Sounds like too much fiber.
- yonis, on 10/12/2007, -3/+18Photoshop tip of the day: Using the rulers for measuring pixels is absolutely ridiculous. Have Photoshop do it for you.
Open up the Info palette (Window > Info) and select what you want to measure using the marquee. Any marquee will work, rectangular is best. If your measurement units are set to pixels (Preferences > Units & Rulers, or double-click a ruler), you'll see the pixel measurement of the selection in the lower-right box.
The info palette is useful for other things as well, such as measuring the opacity of any given area of an image – though you have to turn it on, by going to the upper left triangle button and selecting "Palette Options..." - noahhoward, on 10/12/2007, -1/+15Why not contact the author and see if you can get him to change it. If those of us who actually do this professionally find and correct those mistakes then we can break the cycle of lost and wrong noobs.
- inactive, on 10/12/2007, -1/+15You sir, are not allowed to use tabs... ever... again.
- nicepants, on 10/12/2007, -4/+16I guess the "superfast load times" don't apply to the site offering the tutorial...
- joshuafuller, on 10/12/2007, -0/+11Coral Cache Link:
http://www.csslicingguide.com.nyud.net:8090/
Helps a little bit as the server is getting slower. - Lone07, on 10/12/2007, -10/+20Definantly a guide starting point for those switching from table based to more CSS orienated designs. Good to see also using 'em' for fonts rather then fixed pixel size.
My only grudge is the lack of use of CSS shorthand techniques but I guess that might be more suited for a second article?
For example:
#container {
width: 800px;
margin: 0 auto 0 auto;
}
---- Becomes
#container {
width: 800px;
margin: 0 auto;
} - hifiDesign, on 10/12/2007, -4/+14OK, I guess, but that PSD comp is way too basic for this to be "real world". I recommend anyone who already knows a little bit about HTML and CSS just get a copy of CSS Mastery instead. Badass book.
http://www.amazon.com/CSS-Mastery-Advanced-Standards-Solutions/dp/1590596145 - inactive, on 10/12/2007, -2/+11Then stop using design view, use code view be a man.
- medj, on 10/12/2007, -2/+11I wonder why he used a new ID #logo for the logo.
Instead, since the logo was within the #header ID, i would have just did something like:
#header img {
// logo properties
}
It eliminates the reason to use another ID - inactive, on 10/12/2007, -0/+8It doesn't matter what design is thrown in front of you. Once you grasp document flow, box model, and div stack order... you can do anything you want. Doesn't matter how complex the design is.
- AvengeX, on 10/12/2007, -0/+8Caching is there for a reason :)
Coral Cache Link:
http://www.csslicingguide.com.nyud.net:8090/ - Snowcone, on 10/12/2007, -0/+7He wanted it to be specific to the logo element and not all images within the header. In this example it would not have mattered, but lets say your header had more than 1 image... I think you see where I'm going.
- troydoogle7, on 10/12/2007, -0/+7dugg... because of the bite me....
more posts should include bite me..
I will photoshop up some screengrabs using my coreldraw program (bite me too!) - Verdanic, on 10/12/2007, -0/+5Right. Windows does not have an equivalent, how silly would that be.
- Cmain, on 10/12/2007, -0/+5The general idea of making your layout in Photoshop is to get how you want it to look before you begin to code it. Generally I will create my layouts in Photoshop, cut out any images I need, and then code the frame by hand.
- AvengeX, on 10/12/2007, -0/+5It's not a Dreamweaver based guide, it's really for anyone who owns a raw text editor. I believe Macs have one of those, and the guys at Apple seem to promote using Photoshop on a Mac quite a bit.. so what's the problem?
- chris9902, on 10/12/2007, -2/+7there isn't really a wrong way to do it. Most of these sort of mistakes can be fixed with common sense. Most CSS sites do a good job with best practices but it's really what works for you. As long as you don't use abstract naming (I'm looking at you Visual Studio) then you should be OK. And comment your damn code. comment, comment, comment.
- snowwrestler, on 10/12/2007, -0/+5The one thing I don't get is why he designed a site that is 800 pixels wide. If you're designing a site to fit 800x600 resolution, then the actual design needs to be about 760 because of window borders and scroll bars. And if you're designing a site to fit 1024, why not take it up to 960 or so? (again--don't forget borders and scroll bars)
- AvengeX, on 10/12/2007, -1/+6Yup, it's probably the best way as well. Tutorials for it are everywhere - www.good-tutorials.com, www.pixel2life.com etc.
- chris9902, on 10/12/2007, -1/+6Fireworks is better imo. Adobe seem intent on killing Fireworks since the Marcomedia buyout. Even CS3 doesn't use the new Adoboe interface and that makes me think the only reason it's about is because of pressure from people online. Photoshop is good for design work but for layouts Fireworks is much quicker. You can then take it over to Photoshop to design you're site. Plus since CS3 Photoshop and Fireworks support each other layers so moving back and forth is quite simple now.
- MushuMax, on 10/12/2007, -2/+7While this guide is okay... The proper way to code a site is to write out the html (or xhtml) first. Make the code semantic, then begin applying the styles to the code. Make adjustments when needed, but the code is written first. The code should be semantic and valid. All that this ends up doing is building a site that's just as filled with nested divs and "class-itis", that's just as bad as table-layouts.
- bradpurchase, on 06/12/2008, -1/+5Very nice. Dugg.
- TenebrousX, on 10/12/2007, -0/+4Like joaob said, using Photoshop to create a webpage is as retarded as using Word or Publisher. All WYSIWYG programs I've encountered make terribly bloated, uncompliant code
- xDieStarDiex, on 10/12/2007, -0/+4Very good, in depth, tutorial. I've had a hard time finding a well written tutorial on slicing and coding photoshop layouts. My search ended here.
- AvengeX, on 10/12/2007, -2/+6This man has a point. But, there isn't much more to it than swapping your pixels to percentages and then testing in different resolutions - perhaps not that worthy of an article, but if people want it, they'll get it..
- coreyb, on 10/12/2007, -0/+4www...
Here's your ketchup. :P - codenexus, on 10/12/2007, -3/+7Re. Tables;
In all my years of designing websites I've not yet heard a definitive reason for using CSS layouts only. In quite a few cases its just a bit of snobbery and no practicality. Sure I could spent the rest of my life will be spent trying to get a basic layout working across all browsers properly in CSS when it could be a simple table layout.
However, don't get me wrong, I know there are some serious shortcomings when using tables. At the end of the day however if you have limited time and need to get something made from scratch that is pretty solid up quickly you have to seriously consider tables.
I have had people say "Oh well you must be just a useless designer...". Sure could be but I point out their sites may not layout in all browsers as expected. Usually I go check and sure enough... *sigh*.
So my advice. Learn CSS layout techniques but also know tables to fall back on. If you bow to peer pressure and go pure CSS it can be bad, ugly bad and such a time waster!
There that should stir things up. :-) - littleorfnannie, on 10/12/2007, -2/+5Is photoshop a good way to layout something before taking it to the web? I've mainly done publication design (so I know InDesign like the back of my hand) and I'm trying to learn web design right now.
- foomojive, on 10/12/2007, -0/+3this is not so much of a what if. it doesn't take much to add another image to the header. for instance a user's avatar image would usually be an IMG tag. although I wouldn't use an IMG tag for the logo, I'd use an H1 with image replacement.
- duckfighter, on 10/12/2007, -2/+5Its a o.k. tutorial, i use the same method, works pretty well. If you use photoshop, one should look into slices, which can save all wanted pieces to individual files. No need to copy, new, paste and save.
- TenebrousX, on 10/12/2007, -1/+4I read that a few days ago. Disappointingly, the ideas are not "advanced" like the title suggests.
- jared9985, on 10/12/2007, -0/+3No problem. Just had to point that out. I rarely design for 800x600 these days. So about 75% of the designs I do are 960px in width.
Read http://www.cameronmoll.com/archives/001220.html . For doing 1024x width 960px works well =)
cheers - Bamborzled, on 10/12/2007, -0/+3"learn web 2.0"
Would people please stop abusing terminology? What exactly is "Web 2.0"? Why is image slicing "Web 1.0"? - noahhoward, on 10/12/2007, -4/+7Your three step guide... while a very good bit of advice, has nothing to do with this artice.
Oh, change step three to "Buy Textmate and CyberDuck". - diznang, on 10/12/2007, -0/+3Weird how the URL for this link redirects to "csslicingguide.com", as in "CSS Licing Guide".
- Cmain, on 10/12/2007, -0/+3I suggest a book called "Bulletproof Web Design" to anyone looking to get into writing the cleanest code they can. It really has some of the greatest CSS tips I've seen.
- ifonly, on 10/12/2007, -0/+2I'm sorry but the code produced is not professional at all, in fact its messy ... DIV anyone?
- smackhero, on 10/12/2007, -0/+2no, that's not hard, but that's also not a good design technique. defining your columns using percentages will inevitably make the layout look like crap on really high or really low resolutions. usually you want things like side columns to be fixed width, and have your main content column stretch to fill the screen (but have a minimum width also). that is more difficult to do in CSS than tables.
- AvengeX, on 10/12/2007, -0/+2Ouch. I walked right into that one.. although www technically isn't a word, and I was talking about domain names, not the www bit. But still, thanks for the ketchup. Salt, anyone?
- AvengeX, on 10/12/2007, -0/+2Accomodating for typing errors. Nobody normally types 3 letters in one go. Find me an example of a word that does and I'll eat my hat!
- jer2eydevil88, on 10/12/2007, -0/+2I am new to this whole using em instead of just defining pixels, maybe someone here can enlighten me as to why this is better?
As for anyone else who wants to play with em instead of using pixels but hasn't a clue where to start,
http://riddle.pl/emcalc/
there you go. - jared9985, on 10/12/2007, -0/+2My thoughts exactly!
It was a decent tutorial up until I read the image was 800px wide! This a no-no!
If you are designing for 800px you usually stick to about 740px width to avoid getting horizontal scrollbars viewing at 800x600.
If you are designing for 1024x you would use 960px width.
I guess most really web developers/designers know this anyways :
At least I sure hope so. -
Show 51 - 100 of 130 discussions
Check out the new & improved 
© Digg Inc. 2009
— Content created and posted by Digg users is