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.
Design and Build Email Newsletters Without Losing Your Mind (and Soul) - Smashing Magazine Advertisement “We really love this new website you’ve built! Now we’d like to send out an email to all of our customers, friends and anyone, and it should look exactly like the website except with a spinning mailbox at the bottom, and have my photo, and my cat’s photo…” Ever had that conversation with a client? You’ve built plenty of websites in your time and could knock off a blog template in your sleep, but HTML email? Seriously? HTML email has the reputation (often well deserved) of being a horrible design medium. The mere mention of it sends some designers into physical shock (try it if you ever get stuck in a tedious conversation about XHTML vs. This article gives you the information you need to plan, design and build an HTML newsletter that renders well and is actually useful to recipients. If you’d like to get started right now, here are the cheat notes to get you on the right track. Respect your reader. 1. The email inbox is a noisy busy place for a newsletter to land. 2. 3. 4.
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><!
Local Storage And How To Use It On Websites - Smashing Magazine Advertisement Storing information locally on a user’s computer is a powerful strategy for a developer who is creating something for the Web. In this article, we’ll look at how easy it is to store information on a computer to read later and explain what you can use that for. Adding State To The Web: The “Why” Of Local Storage The main problem with HTTP as the main transport layer of the Web is that it is stateless. This means that when you use an application and then close it, its state will be reset the next time you open it. This is why, as a developer, you need to store the state of your interface somewhere. This is where local storage comes in. C Is For Cookie. The classic way to do this is by using a cookie. To work around the issue of local storage — with cookies being a rather dated solution to the problem — the WHATWG and W3C came up with a few local storage specs, which were originally a part of HTML5 but then put aside because HTML5 was already big enough. That’s it! Large view
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.
Presentazione e contenuti Nozioni di base su struttura e presentazione dei documenti per il web, come introduzione ad una progettazione rispettosa degli standard promossi dal World Wide Web Consortium (W3C). Sommario Prefazione Con questo articolo voglio rivolgermi a tutti coloro che hanno sentito parlare almeno qualche volta di standard web , accessibilità , (X)HTML , CSS , separazione tra struttura e presentazione o, in breve, di nuova filosofia di progettazione web , ma non sono ancora riusciti ad intrecciare i vari concetti e a farsi così un'idea chiara in proposito. La mia intenzione è quindi fornire una panoramica generale su questi argomenti e cercare di avvicinare ad essi i progettisti che ancora nutrono scetticismo o paura nei loro confronti oppure semplicemente li ignorano. Introduzione Un documento web progettato in maniera intelligente richiede di essere suddiviso in più sotto-parti. Separazione tra informazioni e loro rappresentazione le informazioni e la rappresentazione visuale delle stesse. Pertanto:
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!
Progettare la struttura dei siti: ampiezza o profondità? | Usabile.it home » Articoli » Progettare la struttura dei siti: ampiezza o profondità? anteprima stampa | stampa [di Maurizio Boscarol] La struttura ipertestuale di un sito è la forma che assumono i suoi collegamenti gerarchici a partire dalla home page. La struttura organizza il contenuto in più livelli, e può avere varie forme, varie ampiezze e profondità. Solitamente ad una certa struttura corrispondono dei menu che la rappresentano. È dunque meglio avere menu di poche voci, ciascuna delle quali porta ad altre pagine con altri menu di poche voci, e così via, in molti passaggi (siti poco ampi, ma profondi), o è meglio avere molte voci nei menu fin da subito con un minor numero di passaggi (siti larghi e piatti)? Un esempio di struttura ampia e poco profonda: 11 pagine al primo livello, ognuna delle quali ha 5 pagine figlio. Privilegiare siti piatti Le prime ricerche sulla struttura dei menu negli ipertesti risalgono agli anni 80, ben prima dell’avvento del web, e ottengono un risultato chiaro: