How To Nail A Sexy Layout // Archives // Addicted To New 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. <title>Generic Title</title> 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. Onward! Visualize The goal of standards based development is to separate structure and presentation. The navigation will need a background image because a special font is used.
Friday Challenge January 23, 2004 Whether it’s a deceptively simple problem or a case of being too close to the code to see the easy answer, I’ve been struggling with this one problem on and off for months now: Is it possible to use floats to position a fixed-width sidebar on the right of a page, with a liquid content area, if the content comes before the sidebar in the markup? Floating, and not absolute positioning is necessary for the sake of a clearing footer. <div id="content"> ... Corresponding CSS: Simple, right? But why should the sidebar need to go before the content in the code order? Note that floats are reliant on code order, and do work best with defined widths, but with the proper CSS you should be able to get a simple two-column layout working. I can’t. Again — 1) no changing the order of the code (although adding new divs would be fine), and 2) no using absolute positioning unless you can somehow make it work with the footer. Update: Well that was quick.
Drop-Down Menus, Horizontal Style by Nick Rigby Anyone who has created drop-down menus will be familiar with the large quantities of scripting such menus typically require. But, using structured HTML and simple CSS, it is possible to create visually appealing drop-downs that are easy to edit and update, and that work across a multitude of browsers, including Internet Explorer. Better still, for code-wary designers, no JavaScript is required! (Actually, a tiny bit of JavaScript is needed, but it’s not what you think.) Article Continues Below Here’s a sneak preview of the menu in action. Creating the menu#section1 The first and most important part of creating our menu is the menu structure itself. That’s it: some simple HTML that is both accessible and easy to edit. Visually appealing? If you have previewed the menu above, you’ll see a pretty boring list of items. The first step is to remove the indents and bullets from the unordered list and define the width of our menu items. Next, we need to position our list items. Now the fun bit.
HTNASL Part II: Crop and Style // Archives // Addicted To New 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. Cropping Based on our nakedized version of the design (shown below), cropping is a cinch. What I tend to do (like it or not) is flatten the image and crop away based on the guides. Default Stylesheet Since cropping isn’t really that interesting,I’ll move on to the first wave of styles. You might be thinking what the crap was @media screen, projection and be-nice-to-Mac-IE5 . Linking the Styles My prefered method of linking stylesheets is to <link type="text/css" rel="stylesheet" href="/path/to/style.css" /> to a style sheet which then imports the main stylesheet (ie: @import url("mature.css"); ). A Few Explanations Conclusion So what all have we covered so far?
Clearing a float container without source markup (This clearing technique was developed by Tony Aslett, of csscreator.com. The earliest known mention of the basic :after idea is found here.) Notice as of March 4th, 2008: The article you are reading is getting a bit old and much new information on the subject of clearing has appeared since it was written. You may find this newer article very interesting. Clearing Floats The Old Fashioned Way When a float is contained within a container box that has a visible border or background, that float does not automatically force the container's bottom edge down as the float is made taller. This float-enclosing behavior in IE can also be 'toggled' off again just by hovering of links within the container, if that hovering alters either the link background or one of several other CSS properties. The W3C suggests placing a "cleared" element last in the container box, which is then recognized by the container height, forcing the container to enclose the float above that cleared element too. <div><!
A List Apart: Articles: Starting a Business: Advice from the Trenches If you’re like thousands of other designers, programmers and other creative professionals out there, at one point in time you’ve considered starting your own business. Unlike most, you’ve gone against common sense and decided to open shop for yourself. And not just freelance full-time, mind you, but file for the company name, get some stationery, and wade through the legal mumbo-jumbo. This article offers real-world advice from the trenches of a small start-up, and is applicable to designers, web developers, copywriters, usability experts and all manner of service providers. Write a Business Plan#section1 The most important thing you can do to prepare for starting and operating your own business. Beyond the mental exercises, a good business plan will give you a much better chance of getting a small business loan from a bank than walking in and saying, “I like Photoshop and maybe a can do some websites or something. Take a few weeks and develop a strong and thought-out plan. Good:
Top 7 Freshest Designs of 2006 » Wisdump Be Sociable, Share! 2006 was the year of Web 2.0 design and pretty much that type of design got old real quick. Below I have listed the Top 7 Freshest Designs in my mind that I have come across this year and although these kind of lists can easily be argued, I try to provide you with enough reasoning behind my decisions. Cuban Council Why choose a site that wasn’t even designed in 2006 as a fresh design for 2006? In a year where we saw a return of the one-page layout, I still find that Cuban Council’s timeless design outdoes all-newcomers in not only providing a rewarding experience, but also a helpful one. Everything you need to know about them is on one page and it doesn’t seem too long or overbearing on the user. Never one to shy away from experimentation, Inman gives us what we most want from a blog…the content. Here’s to 2007 and a whole new batch of fresh designs.
Testing Content/writing for the web | A list apart Nobody needs to convince you that it’s important to test your website’s design and interaction with the people who will use it, right? But if that’s all you do, you’re missing out on feedback about the most important part of your site: the content. Issue № 320 Whether the purpose of your site is to convince people to do something, to buy something, or simply to inform, testing only whether they can find information or complete transactions is a missed opportunity: Is the content appropriate for the audience? A tale of two audiences#section1 Consider a health information site with two sets of fact sheets: A simplified version for the lay audience and a technical version for physicians. You’re doing it wrong#section2 Have you ever asked a user the following questions about your content? How did you like that information? It’s tempting to ask these questions, but they won’t help you assess whether your content is appropriate for your audience. The reading process#section3 Estimate it#section4
Piefecta - A superb 3-col tableless layout Important new information as of July 2008: IE bugs discussed in this obsolete document have been found to be associated with hasLayout. Knowledge of this MS concept is essential if you want to make IE behave well with advanced CSS using floats. Also see this basic method for specific ways to combat the IE bugs on your pages. This column is first in the source, being a right float within a left-floated wrapper. The second col is floated left in that same wrapper, and following the wrapper is the left floated right col. (confusing, ain't it?) The headings and italicized paragraphs are "widthless" and have 1px red borders to show any width problems in the columns. Some Of The Features Any col may be longest without problems, thanks to the fact that all the cols are floated and "within" a single container. A number of bug fixes have been used to make this design work well in different browsers, particularly IE/Win. Piefecta's Dirty Little Secret Update July 4th, 2008 Special Announcement!