How To Nail A Sexy Layout

July 15th, 2005

Part One, Skeletize, Visualize, and Nakedize

This is the first article of a series on “How To Nail A Sexy Layout”. The sexy layout I have chosen for this series is HumanRadiator.com, the web home of the “blisteringly driven, torridly imaginitive, and feverishly creative” Jim Gosz. For those who don’t know, I am a developer and Jim is a designer for the University of Notre Dame’s Webgroup. When Jim approached me to help him out and develop his new design I was pretty excited. He is a great web designer and I enjoy giving his creations life, be it at work or on the side.

Skeletize

The first step in my development process is always creating the skeleton. Below is an example of a basic template that I start with for each website that I develop (text file version here, note:there is a space in line 1 before DTD to break up the long link).

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/ DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head profile="http://gmpg.org/xfn/11">
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <title>Generic Title</title>
  6. <link rel="stylesheet" href="http://yourdomain.com/path/to/styles.css" type="text/css" />
  7. </head>
  8. <body>
  9. <div id="wrapper">
  10. <div id="header"></div>
  11. <div id="content">
  12. <div id="content-main"></div>
  13. <div id="content-side"></div>
  14. </div>
  15. <div id="footer"></div>
  16. </div>
  17. </body>
  18. </html>

My intent for this series is not to spark a debate on whether or not my naming conventions are the best or I use too many divs, etc, etc. My ambition is to provide a practical step-by-step method of breaking down a design and fabricating a standards-based website. I say this because I can see people getting distracted and focusing on nitpicking with the way I do things. I want this to be a resource for those new to standards-based layouts, not a philosophical debate.

Onward! The skeleton above provides enough style hooks to accommodate a large majority of websites (header, 2 columns, footer). Occasionally, as in the case of humanradiator.com, an extra hook is needed in order to achieve a certain affect, but I will get into that later. Not only are there plenty of hooks in the skeleton above, they are reasonably semantic. Once the skeleton is copied and pasted (honest that is what I do), I open up the design in Fireworks (or Photoshop if you prefer) and visualize.

Visualize

The goal of standards based development is to separate structure and presentation. The structure is the skeleton I showed above and merely lumps the website into logical sections of valid markup. The presentation (CSS) is then used to skin the skeleton based on the design. If you remember nothing else, remember markup for structure and css for presentation. If you can’t remember it, tattoo it on your forehead or write it in your underwear. Never use presentational markup such as font tags. They are a no no and I will hunt you down. The proper way to add decorative elements to a site is with background images. The background image is a standards-based developers best friend. Without them, we would all be wailing in the streets cursing all browser makers.

Because all presentational graphics are rendered through background images, visualization is indespensible. It saves mucho time to open up the design, sit back, and process how you will chop it up rather than just diving in. Let’s take a look at a few mini-screenshots of Jim’s site (at the time of this writing).

A Screenshot of Jim's Design

The important thing to remember is that we have already created our skeleton and we do not want to modify this unless deemed absolutely necessary. That being said, I consider visualizing to be the art of finagling in one’s head where background images will be needed without changing the markup. When I look at Jim’s site, this is what I visualize.

The body will need a repeating background image to create the striped effect. The reason it is applied to the body is because we need it applied to something that will completely fill the viewing area.

the striped effect

The above skeleton is going to need one more element/style hook in order to achive the gradient layered on the stripes (I’ll deem it necessary so you don’t have too). Our #wrapper div from the skeleton above will be used to center the site horizontally and will be fixed width. In order to make the gradient stretch horizontally across the top of the viewing area, we will need another element inside the body and wrapped around the wrapper. This element will have the gradient as a background image.

the striped gradient effect

The header will need a background image from the top of the page to just above the navigation and another for the logo. The reason I separate the logo from the header is the size of the header. It is a large graphic and will need a high compression rate to tame the file size. If the logo is compressed the same amount as the rest of the header, it will be of noticebly crappy quality. Because the logo is a major part in any brand, it needs to be crisp.

the header

The navigation will need a background image because a special font is used.

the navigation

The content area will need a repeating background image in order to have equal length columns. Arrow 1 will be #content-main and arrow 2 will be #content-side.

the content

The footer will need a background image.

the footer

Below is our updated skeleton with the new element added (text file version here, note:there is a space in line 1 before DTD to break up the long link).

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/ DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head profile="http://gmpg.org/xfn/11">
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <title>Generic Title</title>
  6. <link rel="stylesheet" href="http://yourdomain.com/path/to/styles.css" type="text/css" />
  7. </head>
  8. <body>
  9. <div id="outer">
  10. <div id="wrapper">
  11. <div id="header"></div>
  12. <div id="content">
  13. <div id="content-main"></div>
  14. <div id="content-side"></div>
  15. </div>
  16. <div id="footer"></div>
  17. </div>
  18. </div>
  19. </body>
  20. </html>

I deem the new element a necessary modification because designers without gradients are similar to developers without background images.

Nakedize

Once I have skeletized and visualized, I nakedize (this is not a real word and in no way involves my clothes). Nakedizing is the process of hiding all the layers of fake content (that are often present in mockups) so that only the design shell exists. After the design is nakedized, I add guides based on my visualization so that I have exact lines to crop with. Below is screenshot of Human Radiator nakedized with guides.

the naked guided version

So what did you learn in part one? Skeletize, visualize, and nakedize. The more you plan, the faster you will work. Be sure to stay tuned for part two of “How To Nail A Sexy Layout” in which I will briefly discuss cropping the images and then move on to the initial wave of styles (a.k.a. the fun part).

The How To Nail A Sexy Layout Series

100 Responses to “How To Nail A Sexy Layout”

  1. Hey John! I am very excited about this series. Know that I will be closely watching it to gain as much new knowledge as possible. Wow, what a turn of the tables, huh? Remember someone you know recommending that you read a book called “Designing with Web Standards”?? Ha… Well, my friend, I will learn as much as I can from a very good friend, and VERY good web designer. Thank you!

  2. Good article, it make me feel better to know someone else does it the way I do it. :)

  3. avatar Glen September 13th, 2005 3:49 am

    Seems kinda obvious, I look forward to seeing the meat on this skeleton

  4. [...] John Nunemaker at AddictedToNew.com has posted a series of articles entitled How To Nail a Sexy Layout (part1, part2). [...]

  5. @Glen - It seems obvious to you because you have probably done it before. This first article of the series is geared more towards beginners who do not know where to start. Trust me though, meat is coming soon.

  6. avatar Jane September 13th, 2005 10:50 am

    Glen nailed it. Obvoius stuff for kids in the 3rd grade.

    I hate it when people use overrated titles for their posts to gain as much visitors as they can. Sexy layout?

  7. @Jane - See comment #4. If it is obvious to you then this article is not for you. Also, note my statement about three or four paragraphs into the article:

    My ambition is to provide a practical step-by-step method of breaking down a design and fabricating a standards-based website. I say this because I can see people getting distracted and focusing on nitpicking with the way I do things. I want this to be a resource for those new to standards-based layouts, not a philosophical debate.

    From now on, if anyone thinks the article is too obvious, let me know by use of my contact form. Save the comments for those who actually have questions.

    P.S. Jane, it was really hard for me not to take a poke at you by saying something like, “In what grade do you learn how to spell obvious?” But that just wouldn’t be nice, so I won’t.

  8. avatar Peter September 13th, 2005 11:29 am

    Geeze Jane, lay off!

    I just stumbled on here from the /popular subset on del.icio.us and thought it was very well done for what it is. I don’t see you do anything constructive besides deriding his work with pointless criticism.

  9. avatar Aaron September 13th, 2005 3:07 pm

    Agreed. Good job John, I really did find the article informative and well written, naysayers aside it’s always appreciated when someone gives back to the web :).

  10. [...] How To Nail A Sexy Layout - Part One, Skeletize, Visualize, and Nakedize - Steps to building a sexy, standards based layout. [...]

  11. So, I’m a beginner, looking at this site for a class, and I do find it useful. However, I think that your pedantry is, perhaps, a bit overdone. You state maxims such as “Never use presentational markup such as font tags.” without giving any sort of justification for them. They’re handy to know, but without knowing why you feel so strongly about it, they end up not being as important to the reader as you obviously feel they should be.

  12. @Cale - First off I will answer your question. I apologize if I was not clear. Directly above the font tag statement I said:

    If you remember nothing else, remember markup for structure and css for presentation.

    Font tags are an example of presentational markup. Presentational markup is anything that changes the appearance of the website using only XHTML or HTML. Font tags are the best example of presentational markup. Hope this helps.

    Second, I am curious what class you are looking at this for. You can comment or contact me to let me know. Let me know of anything else I wasn’t clear on too. Thanks.

  13. Everytime a web site uses a font tag, a baby kitten dies.

  14. Well, look at it this way. Clearly markup can be used not only to create structure but also to affect presentation–if this were not the case you wouldn’t have to make the point at all.

    The question, then, is what makes CSS such an obviously superiour choice for presentation effects, while markup is to be relegated to nothing but creating ’structure’? If presetational markup is anything that changes the appearance of the website using only xhtml or html, is it the case that markup uses something other than, or in addition to, xhtml or html?

  15. Ah, I totally misread a bit of your comment. Markup is just html or xhtml.

    The question, however, still stands: why is presentational markup bad?

  16. @Cale - Read Designing With Web Standards if you need to learn the theory behind web standards. The HTNASL series is geared towards those who understand the theories of web standards, but aren’t sure how to implement them.

  17. Thank you for the informative piece. A very helpful article for those of us who are new to standards compliant development.

    I don’t really see why some find it necessary to agressively deride your helpful and very free effort though…

    I look forward to the rest of the article.

  18. Great name for your article! Drew me right in. And great article. I’m a beginner trying, trying, trying to learn this web design thang. I know I’m not alone in saying that I’m excited in seeing future articles from you. Please don’t abandon us if you get frustrated by all the comments of the “professionals” out there. Keep up the good job!

  19. great! it felt like this tutorial was written esp for me! cant wait for the rest of the juice.

  20. Jane is entitled to her opinion. Please avoid using foul language and slamming people on this website. It will not be tolerated. I will remove each comment with this type of nature. If you want to be negative, that is fine, however, please offer constructive criticism. Also, any comment that someone seems to have provided a fake name will be removed. Thanks and keep it clean.

  21. avatar Ceri Richard September 14th, 2005 12:09 pm

    Excellent! I’m really looking forward to reading more in the series. What I think sets this apart from other tutorials (especially books for some reason) is that the design you’re using to illustrate your points is so good looking (sexy even!).

    Thank you John, I’ll be back for more.

  22. Is it just me or do the links to the text file versions 404 for anyone else?

  23. Paul, I apologize. I was fooling around with my rewrite rules and broke the text file version links. They are fixed now.

  24. [...] September 14th, 2005 in Links How To Nail A Sexy Layout, a reasonable approach for making good-looking web sites. [...]

  25. avatar Dave (DEAIII) September 14th, 2005 7:19 pm

    John,
    Looking forward to the III’d installment of HTNASL. After looking at Human Radiator, I would be ashamed to show my 1999 attempt at a website :)

    Thanks,
    Dave (DEAIII)

  26. avatar bplus September 14th, 2005 8:26 pm

    Cale -

    to make a long story short, a great reason to use CSS instead of font tags is so that when your client decides he wants all links to be purple and twice as big as normal text, you can just change one file containing the style, instead of changing all the font tags.

    it’s a matter of centralization to make changes as simple as possible when changes are necessary - there are other reasons as well but for me that is the main one.

  27. avatar bplus September 14th, 2005 8:26 pm

    by the way - the best part of the article is how it features Mr. Bogut. :)

    Go Bucks!

  28. [...] How To Nail A Sexy Layout // Archives // Addicted To New [...]

  29. avatar John Holley September 18th, 2005 12:06 am

    John,

    Thank you for the tutorial. I’m a student at the Blue Mountains college of TAFE in Australia studying Information Technology (web design). I find your series to date to be pitched at my current level of understanding. Your articles are clear, informative and interesting. I look forward to working through your tutorials as I feel I will learn a great deal. Thank you for taking the time to provide such a valuable resource for students at my level of understanding.

    Best regards,

    John

  30. avatar John Holley September 18th, 2005 12:22 am

    Postscript

    Why when you required an extra element did you wrap the new div “outer” around “wrapper”?

  31. avatar John Holley September 18th, 2005 1:14 am

    Post Postscript

    Got it.

  32. I appreciate the article it is a great resource for developers who “know it all” but secretly are afraid (or lazy or whatever) of using CSS designed sites and still are relying on table based layouts. Kudos to you and Jim.

    Jim S.
    http://tentonweb.com/

  33. avatar David Bax September 28th, 2005 12:02 pm

    Hey John

    I am currently taken a post graduate course in Web Design at Georgian College in Barrie Ontario Canada. I came across this article through one of my teacher’s links on her site. I have designed sites up to this point using the old school methods of tables, font tags, etc. I am ready to make the switch to standards based web design because it make allot more sense than the way I have been doing it in the past. I just started reading Designing with Web Standards by: Jeffrey Zeldman and it has opened my eyes to the new way. Using that book and reading your article has helped me to get my head into making the leap to web standards and I just wanted to thank you for that and tell you to keep up the great work.

    David Bax

  34. avatar Scott McDonald September 29th, 2005 1:53 pm

    I know I’m late to the comment party here, but I wanted to echo those who said this is a perfect level of detail for those of us learning how to design from the outset using structural markup and CSS. Most of what is out there on the web now is oriented toward experts — egotistical harangues on the prescriptive use of CSS, mostly — so these “intermediate” level tutorials, I’ll call it, are really practical and appreciated.

    Don’t be put off by the criticism and keep these coming. Thanks.

  35. I appreciate all the kind words. It’s good to know that the series is hitting home with its target audience. “HTNASL Part III: Let There Be Backgrounds” should be released sometime next week so stay tuned!

  36. [...] How to nail a sexy layout provides a practical step-by-step method of breaking down a design and fabricating a standards-based website. [...]

  37. avatar Otto October 7th, 2005 3:46 am

    Hey, could you perhaps actually make a site that looks good before trying to teach others how to do it? I speak specifically of this nasty trend of using fixed width columns with annoying empty sidebars on blogs and the like nowadays. This webpage takes up less than a third of my screen.

    Not everybody has 4:3 monitors in low resolutions, you know. Not everybody runs the same fonts. This site is a travesty for anybody who a) has a big screen, or b) uses different font sizes due to vision impairment.

    CSS+XHTML has this thing that allows you to specify percentages and relative sizes instead of absolute pixels. Making a layout that works well for everybody is not all that difficult, really. Just stop using absolute values. Try it.

  38. avatar Clive October 7th, 2005 3:55 am

    I love watching all the commentary following a great example of the web the way it was originally built for. Community chatter and mentorship.

    Keep up the lively atmosphere folks! and I want to see the conclusion to this great example of CSS, I’ve been trying to learn CSS for too long and it’s just weird man too weird. But I keep tryin’!!

  39. It may seem like a simple lesson to some but you’d be surprised how much commercial resistance there is to this sort of basic common sense design. Keep up the good work buddy.

    http://www.hubbers.com/

  40. @Otto - Sounds like the size of your monitor is overcompensating for something else.

    No, in all seriousness though, the only fonts on my site that do not resize are my navigation. Maybe they should, maybe they shouldn’t. I suppose it depends on your target audience. My target audience is web developers and my mom :). I haven’t had anyone complain yet (although it could be because they can’t see my contact link) other than you. I made a choice.

    Thanks for making yourself look like a jerk so I don’t have to. Next time try constructive criticism. I don’t respond well to sarcasm.

  41. [...] Sexy Layouts October 7th, 2005 How to nail a sexy layout - Nice little article. Los, los, los! [...]

  42. avatar Ben October 7th, 2005 9:50 am

    Hey! Bravo on a long convoluted writeup on the most basic of css layouts. How many years has this been rehashed? six? seven? Make something new and leave the web design to the real pros.

  43. avatar theD October 7th, 2005 11:11 am

    Otto - Why don’t you just disable his style sheets? Then you can read really long lines of text and resize them to your liking. Newspapers use columns for a reason. Some designers use narrow columns for the same reason amongst numerous others.

    Otto - You come off like you are some brainiac know all of all things worth knowing. However, if you would have just disabled CSS for his site you could have viewed it in what sounds like YOUR preferred style. I think this would have been easier than attacking a designer trying to provide knowledge and skills to his audience, plus I don’t remember the article being about fluid and flexible design.

    Let me guess Otto, you have a mullet and drive a Camaro?

    To all the others that attack and can’t leave constructive criticism, WHERE THE HELL IS YOUR CONTRIBUTION!!!

  44. avatar MasterEvilAce October 7th, 2005 11:25 am

    Umm… theD, I have to say that your one comment doesn’t help at all. The one about having a mullet and driving a Camaro. I see that you’re trying to come back at him, and not only that, you piss off other people than just him. I drive a Camaro and I do not have a mullet. I hate the stereotype that all Camaro owners are rednecks, because it’s really not true. This is something we’re trying to get out of people’s heads, and comments like that really don’t help.

    So please, if you have to insult him, go ahead, but please leave out as many casualties that you can.

  45. avatar Tony2Nice October 7th, 2005 11:38 am

    lol @ camaro talk

    Great article John! Lots of good info from a ground-up perspective. Wish I woulda found this about about a month ago. :-/

    Good stuff.

  46. [...] How To Nail A Sexy Layout // Archives // Addicted To New Tags [...]

  47. Hey nice write up :)

    This layout current with the trend for sites today, and I enjoy using it myself. This article is perfect for what I do with my personal stuff. I’ll stay posted for future writing!

  48. avatar Otto October 7th, 2005 12:51 pm

    “No, in all seriousness though, the only fonts on my site that do not resize are my navigation.”

    What’s the point of having a resizing font in a fixed width column? Seeing two or three words per line isn’t the nicest thing in the world either, you know…

    My point is that before you go on about how to make a proper design, you should try and figure out what that actually means. Making something look good is easy. Making something look good and actually *work* for everybody is not quite so easy. Visually impaired users would have a hell of a time trying to use your page. Most people don’t think about that sort of thing, they just think if it looks good on their screen then it looks good everywhere. This is not the case.

    And I’m sorry, but when half your article about using CSS+XHTML is talking about using absolute pixel positioning, then any sarcasm you get is well earned. You’ve missed much of the point of CSS, in fact. All you’ve done is to replace old-school tables with new-school divs, instead of actually separating the content from the presentation, like CSS is supposed to be used for.

    I could go on, but you’ll probably not pay any attention to it anyway, since you have probably me buttonholed in some incorrect category and therefore won’t actually read anything past my first paragraph. I just wanted to say that this sort of bad article is actually hurting the web as a whole because of the incorrect and just outright bad design practices you’re teaching. Sorry, but shame on you, sir.

  49. avatar agentgray October 7th, 2005 1:09 pm

    Otto, and your work is where?

  50. avatar David October 7th, 2005 1:45 pm

    Otto -
    Where is your site? Can you show us some examples of your exemplary design skills?

    I, like many, find this design style pleasant and easy to follow. From a design standpoint, it is rock solid.

    As an aside, you pigeonholed yourself my friend. Just as surely as the new neighbor who always screams at his kids.

  51. avatar Cam October 7th, 2005 6:48 pm

    John Nunemaker said:
    “@Otto - Sounds like the size of your monitor is overcompensating for something else.”
    Followed by:
    “Thanks for making yourself look like a jerk so I don’t have to. Next time try constructive criticism. I don’t respond well to sarcasm.”

    Awesome.

  52. Hey John,

    Thanks so much for this post! I’ve been trying to get out of tables, but it’s hard to find a suitable tutorial. I’ll try out your lessons as soon as I can. Thanks again! Appreciate it loads :)

  53. avatar Otto October 8th, 2005 12:23 am

    agentgray, David: I’m not a “web developer”. I’m a web user. If you’re not going to listen to your users, then what good are you?

  54. avatar Jason W October 8th, 2005 2:31 pm

    if you’ve got to jack up the front size due to a vision impairment, I doubt you’d be running at a high resolution to start with. Seems a bit contradictory to do otherwise. And how big of a monitor or resolution are you running? I’ve got 18″, 19″ and 21″ monitors all running at 1280×1024 and this site and the text looks fine, but I also don’t have a vision impairment (nothing that can’t be corrected by contacts anyway), but if I did, I can guarantee you I wouldn’t be running 1290×1024…

  55. [...] How to nail a sexy layout Arf! More tutorials Yum! Pretty javascript specific not sure if I’ll use it. Open Source specific page. [...]

  56. avatar Joe Ngo October 10th, 2005 7:19 pm

    When trying to print-preview this article, the Katrina image is being displayed. Can this be removed in the print layout?

  57. Phew, I’m going to steer clear of the fixed-width arguments above (although I have to admit I too prefer percentages to pixels) and pose a question, partially as devil’s advocate:

    I totally agree with your statement that the “goal of standards based development is to separate structure and presentation”, but if we want to follow that advice to the letter, wouldn’t we be better using XML? It goes further than HTML in excluding any presentation markup and is more flexible across other applications. We have XML and XSLT for web work so shouldn’t we be moving away from HTML and CSS? Interested to hear any thoughts…

    Good tutorial, by the way.

  58. @Vodstock - Yes, XML is the ultimate goal for markup and in a perfect world we would kick HTML to the curb. XML often needs to be transformed to be useful to the average user. The problem right now is a lack of client side transformation support. Unless you transform the XML on the server side, you can run into problems with older browsers.

    In disagreement though, CSS is here to stay. XSL and CSS are more like brothers that will one day work together when XSL support is better in browsers (for more on XSL vs. CSS read the faqs here).

  59. Thanks for the quick reply, John, and for the informative link. I see what you mean about CSS and XSL working together. I have to say that although I love the flexibility of XML, I find working with HTML and CSS so much easier for day-to-day work. Good to know it’s not going to disappear anytime soon.

    Love the dynamic comment preview, by the way!

  60. [...] How to Nail a Sexy Layout [...]

  61. Skeletize, Visualize, and Nakedize

    Those were the fine words used by John of Addicted to New. John is a developer and released this great tutorial roughly 3 months ago. He took his readers through the development process of a project with one of his…

  62. [...] How to Nail a Sexy Layout humanradiator.com Screenshot Step-by-step guide on how to code a sexy, CSS and XHTML compliant, and tableless layout. [...]

  63. [...] How To Nail A Sexy Layout // Archives // Addicted To New [...]

  64. Very good tutorial. Bookmarked. And title… very original, I bet 10% of your visitors are horny teenagers :)

  65. Noch ein Tutorium

    Ja, hier ist noch ein interessantes Tutorium, was man vielleicht auch mit dem PHP/HTML-Workshop von Paul Harth koppeln kann.
    Hier geht es um Layout und natürlich CSS:

    How To Nail A Sexy Layout Part One, Skeletize, Visualize, and Nakedize
    How To N…

  66. [...] Si hay algo con múltiples opciones es cómo hacer, con CSS, un layout de 3 columnas… Bob Easton ha recopilado un montón. Y hablando de layouts, siempre es interesante ver cómo piensan los buenos diseñadores, y en esa línea van How To Nail A Sexy Layout y su segunda parte, Crop and Style, de John Nunemaker. Cerramos la etapa con otro de maquetado: The Funniest Grid You Ever Saw (sobre el maquetado de The Onion, nada más y nada menos). [...]

  67. avatar Maureen January 30th, 2006 11:51 am

    Instead of trying to implement the page to look good for everybody with accessibility and/or screen resolution/operating system issues, provide links to different pages that provide the larger/smaller/plain text with use of css stylesheets for each. I got the idea from the EEOC website. They used cookies on theirs, but I have implemented it, (with their written permission: nice folks), with links at the top of the page, at the very beginning so that text-readers will grab it first.

    I find it stunting and boring for the visual design to try to include everyone, whether on plain-text readers or beefed-up systems, on just one page. Provide alternative pages providing the same substance if not layout.

    Personally, I love your tutorials and just provided the comment due to some critics in the comments.
    I’ll be applying some ideas here soon. Thanks.

  68. hi chk ur footer its still on 05′ cheers…nice site…

  69. [...] Well, without a doubt, sex sells. One of the hottest tagged articles making the rounds of tagging directories is How To Nail a Sexy Layout by Addicted To New. The article is actually pretty good. It dissects the process of developing a new, hot and sexy layout for their client. What I don’t like is the continual emphasis on fixed width, non-elastic layouts which waste screen real estate, but aside from this “modern thinking gone awry”, the points made are excellent for navigation, critical content placement, modularizing the layout, and understanding fonts and headings. Definitely worth a read. [...]

  70. [...] How To Nail A Sexy Layout Skeletize, Visualize, and Nakedize [...]

  71. [...] I’m not going to lie, I used to do it too until I read the article How To Nail A Sexy Layout. [...]

  72. avatar BellaLuna May 25th, 2006 3:22 pm

    Am I insane, or is that Ed Kowalczyk?

  73. [...] So far this is the best article I have seen on creating CSS driven web sites from the ground up. It is a series of three. He hinted at a fourth but I haven’t seen it yet. [...]

  74. [...] How To Nail A Sexy Layout // Archives // Addicted To New [...]

  75. avatar amao July 7th, 2006 11:31 pm

    收藏 bookmark it

  76. [...] 20th July 2006 [...]

  77. Nice basic tutorial, bravo..Nice site too..

  78. [...] I saw this page and thought this was tremendously helpful. It gives a detailed, simplistic step by step breakdown on how to make a standards compliant XHTML and CSS website. It’s genius. [...]

  79. [...] Step-by-step guide on how to code a sexy, CSS and XHTML compliant, and tableless layout.read more | digg story [...]

  80. See … if i had only seen this kind of site back in the time when i understood html and basic webdesign… it woulda been great. Thanx to john a lot of people will now be able to make a cool site instead of using the templates out-of-the-box ( like i have resorted to) …
    … anyone wanna help a has-been make something good out of his site???

    -vidar-

  81. Marvelous. Thanks, will spread this among my friends!

  82. Marvelous. Thanks, will spread this among my friends!

  83. Marvelous. Thanks, will spread this among my friends!

  84. [...] In the same way, we can use CSS to control the layout of the pages in our websites with a central CSS Stylesheet file. You can read plenty of good tutorials here and here… The idea is that you apply values to a css attribute, for example ‘leftmargin’. This could have a set width, height, color, background image etc., or anything else that CSS allows you. Then, on your HTML webpage you break up the layout with Divisions, or Divs, that are assigned an attribute in the CSS Stylesheet. So if I had that div would inherit the values assigned to ‘leftmargin’ in the CSS Stylesheet. This is only intended as a sprinkle of information on this topic. Check out here for more information on how to jump aboard the CSS boat. [...]

  85. Pipka ftop…

    You ftop…

  86. Popular italy…

    Cheap italy…

  87. Pipka topnado…

    Site topnado…

  88. Site top…

    My top…

  89. Information yoper…

    About yoper…

  90. [...] How to nail a sexy layout - The steps in creating an xhtml layout from scratch [...]

  91. [...] How to Nail a Sexy Layout [...]

  92. [...] How to Nail a Sexy Layout [...]

  93. [...] read more | digg story [...]

  94. great article. short and sweet. thank you.

  95. [...] In Part One of How To Nail A Sexy Layout, I discussed my method of skeletize, visualize and nakedize. This second article in the sexy series will discuss cropping the images followed by the first wave of styles for the stylesheet. [...]

  96. palace of chance casino free casino cash codes…

    smasher acoustically resume …

  97. [...] How to Nail a Sexy Layout [...]

  98. nice if simple article, thought i supposed it was posted a bit ago.

  99. [...] read more | digg story [...]

Leave a Reply

About This Site

Addicted to New is the personal website of John Nunemaker (Noo-neh-maker), a Web Developer enamored of Ruby on Rails and a wide-eyed fan of all things new and cool.