background preloader

In Search of the Holy Grail by Matthew Levine

In Search of the Holy Grail by Matthew Levine
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.

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.

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? 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. So when your email does arrive, make sure it doesn’t waste their time. 2. 3. 4. 5. 6. 7. 8. 9. 10. (al)

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. Maybe even get a real office with a water cooler. 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. Funding#section3 Good:

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 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. They add to the load of every document accessed on the domain.They allow up to only 4 KB of data storage.Because cookies have been used to spy on people’s surfing behavior, security-conscious people and companies turn them off or request to be asked every time whether a cookie should be set. Using Local Storage In HTML5-Capable Browsers localStorage.setItem('favoriteflavor','vanilla'); (al)

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? Can they read and understand what you’ve written? 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.

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. Spero inoltre che questo articolo possa rivelarsi utile per coloro che sono appena approdati all'apprendimento dei linguaggi standard per il Web. Introduzione Separazione tra informazioni e loro rappresentazione Processo di sviluppo

Progettare la struttura dei siti: ampiezza o profondità? | 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. È 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. In questo secondo esempio vediamo la rappresentazione ad albero di una struttura profonda e stretta, con 3 pagine al primo livello, ognuna delle quali ha due pagine figlio, ognuna delle quali ha ancora due pagine figlio, ognuna delle quali ha altre due pagine figlio. Privilegiare siti piatti L’influenza del tipo di compito Oltre l’efficienza Alcune conclusioni