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. 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. Are you seeking for some cheap web site hosting plans for your newly designed web sites and also want to get free domain registration with your hosting packages?
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. 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.
Because all presentational graphics are rendered through background images, visualization is indespensible. The footer will need a background image. Nakedize. In Search of the Holy Grail. I’m sorry. Really. I didn’t name it. I don’t mean to overstate its importance or trivialize the other and rather weightier Holy Grails. Article Continues Below But the name’s out there, and we all know what it means. Three columns. Many articles have been written about the grail, and several good templates exist. A recent project has brought my personal grail quest to an end. Have a fluid center with fixed width sidebars,allow the center column to appear first in the source,allow any column to be the tallest,require only a single extra div of markup, andrequire very simple CSS, with minimal hacks patches. On the shoulders of giants#section1 The technique presented here is inspired by Alex Robinson’s brilliant One True Layout. Another lead came from Eric Meyer’s adaptation that uses positioning to mix multiple unit types.
Enough talk—let’s see some code#section2 The required HTML is intuitive and elegant. That’s it. The stylesheet is almost as simple. Take a look and marvel at the elegance. 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. I have a default stylesheet that I start with for every project. 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? 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. 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 Note for IE5/Win: This fix fails in IE5/Win, alas.