Webputty

Genial! http://www.webputty.net/ Firebug superado! Permite modificar tus css, te lo va guardando y lo ves en tiempo real! Y puedo usarlo con Internet Explorer!

Site: webputty.net

Como instalar el IE tester para testerar tu web en todas las versiones de IE

:: IE 10 Preview ::

Note that IE10 preview IS NOT installed with IETester. The user must install it itself.
Also note that IE10 Preview requires Windows 7 to install on the machine.

Starting with IETester version 0.4.10, IE10 preview can be integrated into IETester by following those install steps :

1. Install IETester version 0.4.10 or newer version.
2. Install IE10 preview (click on "Install the Preview" button from this page)
3. Open two explorer windows. On the first window, go to C:\Program Files\Internet Explorer Platform Preview\ folder, and on the second window, go to C:\Program Files\Core Services\IETester\ie10 :
   • Note: On x64 platforms, the folders are respectively C:\Program Files(x86)\Internet Explorer Platform Preview\ and C:\Program Files(x86)\Core Services\IETester\ie10

1. Copy the folder iepreview.exe.local from C:\Program Files\Internet Explorer Platform Preview\ to C:\Program Files\Core Services\IETester\ie10 (respectively C:\Program Files(x86)\Internet Explorer Platform Preview\ and C:\Program Files(x86)\Core Services\IETester\ie10 on x64 platforms):
   
2. In the C:\Program Files\Core Services\IETester\ie10 (C:\Program Files(x86)\Core Services\IETester\ie10 on x64 platforms) folder, rename the folder iepreview.exe.local to ietester.ie10.exe.local :
   
3. Done ! You don't even need to restart IETester, the IE10 button should become active after a few seconds.

Fuentes predeterminadas en Sistemas Operativos

Normal style	Bold style
Arial, Arial, Helvetica, sans-serif	Arial, Arial, Helvetica, sans-serif
Arial Black, Arial Black, Gadget, sans-serif	Arial Black, Arial Black, Gadget, sans-serif
Comic Sans MS, Comic Sans MS5, cursive	Comic Sans MS, Comic Sans MS5, cursive
Courier New, Courier New, monospace	Courier New, Courier New, monospace
Georgia1, Georgia, serif	Georgia1, Georgia, serif
Impact, Impact5, Charcoal6, sans-serif	Impact, Impact5, Charcoal6, sans-serif
Lucida Console, Monaco5, monospace	Lucida Console, Monaco5, monospace
Lucida Sans Unicode, Lucida Grande, sans-serif	Lucida Sans Unicode, Lucida Grande, sans-serif
Palatino Linotype, Book Antiqua3, Palatino, serif	Palatino Linotype, Book Antiqua3, Palatino, serif
Tahoma, Geneva, sans-serif	Tahoma, Geneva, sans-serif
Times New Roman, Times New Roman, Times, serif	Times New Roman, Times New Roman, Times, serif
Trebuchet MS1, Trebuchet MS, sans-serif	Trebuchet MS1, Trebuchet MS, sans-serif
Verdana, Verdana, Geneva, sans-serif	Verdana, Verdana, Geneva, sans-serif
Symbol, Symbol (Symbol2, Symbol2)	Symbol, Symbol (Symbol2, Symbol2)
Webdings, Webdings (Webdings2, Webdings2)	Webdings, Webdings (Webdings2, Webdings2)
Wingdings, Zapf Dingbats (Wingdings2, Zapf Dingbats2)	Wingdings, Zapf Dingbats (Wingdings2, Zapf Dingbats2)
MS Sans Serif4, Geneva, sans-serif	MS Sans Serif4, Geneva, sans-serif
MS Serif4, New York6, serif	MS Serif4, New York6, serif

¹ Georgia and Trebuchet MS are bundled with Windows 2000/XP and they are also included in the IE font pack (and bundled with other MS applications), so they are quite common in Windows 98 systems.
² Symbolic fonts are only displayed in Internet Explorer, in other browsers a font substitute is used instead (although the Symbol font does work in Opera and the Webdings works in Safari).
³ Book Antiqua is almost exactly the same font that Palatino Linotype, Palatino Linotype is included in Windows 2000/XP while Book Antiqua was bundled with Windows 98.
⁴ These fonts are not TrueType fonts but bitmap fonts, so they won't look well when using some font sizes (they are designed for 8, 10, 12, 14, 18 and 24 point sizes at 96 DPI).

⁵ These fonts work in Safari but only when using the normal font style, and not with bold or italic styles. Comic Sans MS works in bold but not in italic. Other Mac browsers seems to emulate properly the styles not provided by the font (thanks to Christian Fecteau for the tip).

⁶ These fonts are present in Mac OS X only if Classic is installed (thanks to Julian Gonggrijp for the corrections).

The decline of the homepage

Posted on April 18th, 2010 in Getting Found.

More and more customers are going straight to specific pages on your website, rather than the homepage.
In 2003, 39 percent of the page views for a large research website were for the homepage. By 2009, it was down to 19 percent. In one month in 2008, of the 70,000 page views a technology site received, 22,000 were for the homepage. For the same month in 2010, of the 120,000 page views the site received, only 2,500 were for the homepage.
Another technology website had roughly 10 percent of page views for the homepage in 2008, and by 2010 it was down to 5 percent. One of the largest websites in the world had 25 percent of visitors come to the homepage in 2005, but in 2010 only has 10 percent.
People don’t vaguely browse on the Web. When was the last time you arrived at Google and said to yourself: “I just don’t know what to search for. Someone give me a word.” As Web usage matures, it becomes more specific.
Years ago people might have thought about getting to the homepage and then figuring out where to go on the site. Now they will use search or external links to get closer to the place they really want to get to. So, for example, people are becoming less likely to simply type “Toyota” into a search and more likely to type “Toyota recall”.
Many marketers and communicators think their homepage is a giant billboard or megaphone. They become obsessed with its redesign and with placing lots of happy talk and smiling faces on it. That’s part of the reason customers are avoiding the homepage. They don’t see it as useful.
Have you ever bought a book from Amazon because of an ad you saw on its homepage? Have you ever bought a book from Amazon because of the “Customers Who Bought This Item Also Bought” feature? Both are marketing techniques. The first is megaphone old school print and TV marketing. The second is web marketing.
Marketers and communicators have got to let go of the idea that they control the message or the customer. Not on the Web you don’t. What customers love most about the Web is the fact that it puts them in control. That’s why the Web is so popular. Search is not a passive activity; it is an active, directed activity. Clicking on a link is like following a sign post. You have a destination in mind. And people are looking for the shortest way to get to that destination.
Your customers don’t want to get to your homepage. At best, the homepage is merely a series of signposts that will help them head in the right direction. Unfortunately, too many marketers and communicators are destroying whatever credibility their homepages have left with customers by filling them with useless graphics and meaningless words.
Too often marketing and communication behave like needy children. Or like the tailors telling the CEO Emperor about how beautiful his new clothes look. On the Web, content may be king but remember that the customer is dictator.

Fuente: giraffeforum.com

Is Home Page Design Relevant Anymore?

By Jared Spool

September 29th, 2005

This summer, I gave the keynote at the Seattle Web Design World conference. Afterwards, I received a question from Jim Fawcette, producer of the conference and the brains behind the Fawcette empire. Here’s what he asked:

I greatly enjoyed your keynote but, if it wasn’t our own conference, I would have asked: Is home page design even relevant anymore?
That’s a bit overstated, but between search engines, newsletters and RSS feeds the vast majority of traffic to our Web sites never sees the home page.
Now, IT people are a special category, admittedly, but for us Google is becoming the user interface. Sadly, I think.
IT people are solution driven, so they search for a highly focused topic to solve an immediate problem, such as “Using Eclipse 3 to connect to Oracle 10gR2,” or “Differences between using ADO 2.0 with the .NET Framework 2.0 instead of 1.1″.

A growing number of sites are just like yours in that they see a lot of traffic that bypasses their site’s home page, going directly to content pages.
As a result, these landing pages (the first page on your site the user encounters) have to perform the same functions as your home page, for these users. That turns out to be a lot easier than many designers think, mostly because they usually don’t really understand the true functions of a home page.
In studying users visiting sites, we learned a long time ago that there are only two important functions for a home page:

1. The home page delivers the content to the user that they are seeking, (such as the top story on CNN,) OR
2. The home page provides strong scent to those pages that contain the content the user seeks.

Those are the only two things users care about on a home page. (Lots of designers try to make the home page serve other functions, such as tell the user about things the organization cares about but the user doesn’t — such as financial news about the business or what new products are on sale — but users blow right past this content and pay no attention to it. We’ve found it’s all a waste of valuable design resources.) When designers focus on just these two things on the home page, users tell us the site is substantially more usable.
What happens when a user comes to a non-home-page landing page through something like Google? Well, the same two things. Hopefully, the site’s search engine marketing and optimization efforts have made it so that the page the user lands on meets criteria #1 (it has the content the user seeks). After all, that’s what the user is hoping for.
However, in those instances where it doesn’t have the content the users seeks on the landing page, the page needs to contain strong scent to get them what they want. This is more challenging because it implies the designers need to know (a) what the users are really looking for and (b) how to get them to that content. The same requirements of a home page (strong scent, the right trigger words, careful layout) are now true for every page the user can land at.
Google (and the other aggregators) have just made things that much more challenging. Yippee!

This entry was posted on Thursday, September 29th, 2005 at 7:30 am and is filed under Design . You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site. 

Fuente: uie.com

10 Usability Tips Based on Research Studies

September 15th, 2010 by Cameron Chapman 

We hear plenty usability tips and techniques from an incalculable number of sources. Many of the ones we take seriously have sound logic, but it’s even more validating when we find actual data and reports to back up their theories and conjectures.
This article discusses usability findings of research results such as eye-tracking studies, reports, analytics, and usability surveys pertaining to website usability and improvements. You’ll discover that many of these usability tips will be common sense but are further supported with numbers; however, some might surprise you and change your outlook on your current design processes.

1. Forget the "Three-Click Rule"

The idea that users will get frustrated if they have to click more than three times to find a piece of content on your website has been around for ages. In 2001, Jeffrey Zeldman, a recognized authority in the web design industry, wrote that the three-click rule "can help you create sites with intuitive, logical hierarchical structures" in his book, Taking Your Talent to the Web.
Logically, it makes sense. Of course, users will be frustrated if they spend a lot of time clicking around to find what they need.
But why the arbitrary three-click limit? Is there any indication that web users will suddenly give up if it takes them three clicks to get to what the want?
In fact, most users won’t give up just because they’ve hit some magical number. The number of clicks they have to make isn’t related to user frustration.
A study conducted by Joshua Porter published on User Interface Engineering found out that users aren’t more likely to resign to failure after three clicks versus a higher number such as 12 clicks. "Hardly anybody gave up after three clicks," Porter said.
Source: User Interface Engineering
The focus, then, shouldn’t be on reducing the number of clicks to some magically arrived number, but rather on the ease of utility. If you can construct a user interface that’s easy and pleasurable to use, but takes like 15 clicks (e.g. 5 times more than the three-click rule) to achieve a particular task — don’t let the arbitrary three-click rule stop you.

Sources and Further Reading

• Testing the Three-Click Rule
• Breaking the Law: The 3 Click Rule
  

2. Enable Content Skimming By Using an F-Shaped Pattern

Dr. Jakob Nielsen, a pioneer in the field of usability, conducted an eye tracking study on the reading habits of web users comprising of over 230 participants. What the research study displayed was that participants exhibited an F-shaped pattern when scanning web content.
Source: Alertbox
A similar study, by search marketing firms Enquiro and Did-it in collaboration with eye-tracking research firm Eyetools, witnessed a similar pattern when they evaluated Google’s search engine results page with an eye tracking study that included 50 participants. Dubbed the "Google Golden Triangle" because the concentration of eye gazes tended to be top and left, the results are congruent with the F-shaped pattern seen in Nielsen’s independent research.
Source: Clickr Media
For designers and web copywriters, these results suggest that content you want to be seen should be placed towards the left, and also that the use of content that fits an F-shaped pattern (such as headings followed by paragraphs or bullet points) increases the likelihood that they will be encountered by a user who is skimming a web page.

Sources and Further Reading

• F-Shaped Pattern For Reading Web Content
• Google Golden Triangle – Eyetracking How People View Search Results

3. Don’t Make Users Wait: Speed Up Your Website

We’re always told that our users are impatient: they hate waiting. Well, that’s logical — who likes waiting on purpose? But is there any proof outside of anecdotal evidence that people actually don’t like waiting and that page performance affects website users?
Bing, Microsoft’s search engine, conducted an analysis to see if there are any correlations between page speed versus numerous performance indicators such as satisfaction, revenue generated per user, and clicking speed. The report showed that a less than 2-second increase of delays in page responsiveness reduced user satisfaction by -3.8%, lost revenue per user of -4.3% and a reduced clicks by -4.3%, among other findings. For a company as large as Microsoft, even a 4.3% drop in revenue can equate to multi-million-dollar losses in profit.
Source: O’Reilly Radar
So users, in fact, are impatient: They’re less satisfied and will reduce their number of clicks if they wait too long. And if you care about search engine ranking, then the incentive to improve page response times is even greater since Google now factors page speed in their search ranking.
What can you do to improve page performance? Use tools that will help you find performance bottlenecks, use CSS sprites to improve page speed, and utilize benchmarking tools like YSlow to quickly see where you can make quick front-end optimizations.

Sources and Further Reading

• Bing and Google Agree: Slow Pages Lose Users
• Selfish, mean, impatient customers: New Thinking

4. Make Your Content Easily Readable

Internet users don’t really read content online, at least according to a study by Dr. Nielsen on reading behaviors of people on his website. His analysis shows that people only read 28% of the text on a web page and decreased the more text there is on the page.
Source: Alertbox
To increase the likelihood of your readers getting the most out of your content, utilize techniques for making content easier to read. Highlight keywords, use headings, write short paragraphs, and utilize lists.

Sources and Further Reading

• How Little Do Users Read
• Block Reading: How We Read on the Web

5. Don’t Worry About "The Fold" and Vertical Scrolling

There has long been a myth that all of your important content should be above "the fold," a term borrowed from newspapers that refers to the area of a web page that can be seen without having to scroll down — first proposed by Jakob Nielsen.
So, are long pages bad? Should we cram everything at the top of our web layouts because people won’t ever read anything below this fold?
The answer is "No" according to a report by Clicktale, a web analytics company. Their results showed that the length of the page has no influence in the likelihood that a user will scroll down the page.
Source: Clicktale
A study reported by Joe Leech of CX Partners, a user centered design agency, indicated that less content above the fold even encourages users to explore the content below the fold.
Source: cxpartners
The main point to take away here is that you shouldn’t stuff all your important content at the top because you fear that users won’t be able to find them otherwise. Use visual hierarchy principles and the art of distinction to prioritize and infer the importance of various elements in your pages’ content.

Sources and Further Reading

• Unfolding the Fold
• The Myth of the Page Fold: Evidence from User Testing
• Blasting the of the Fold
• The Impact of Paging vs. Scrolling on Reading Online Text Passages

6. Place Important Content on the Left of a Web Page

People brought up in cultures where language is read and written from left to right have been trained early on in life to begin at the left of a page, whether in writing or reading a book. This can be the reason why many web users spend a majority of their attention on the left side of a web page — as much as 69% of the time, according to Dr. Nielsen’s eye-tracking study that involved over 20 users.
Source: Alertbox
The same results were reflected on websites whose language were read from right to left, such as Hebrew and Arabic sites, with the results inverted (higher attention on the right side versus the left).
There are two things to take away from this result. First, the language of your site matters when thinking about layout considerations; when designing websites you should consider cultural design considerations. Secondly, for sites that are traditionally read from left to right, placing important design components at the left is a good idea; vice versa for sites whose language is read from right to left.

Sources and Further Reading

• Horizontal Attention Leans Left

7. Whitespace of Text Affects Readability

Easy readability of text improves comprehension and reading speed as well as enhancing the likelihood that a user will continue reading instead of abandoning the web page. There are many factors that influence ease of readability, including font choices (serif versus sans-serif), font-size, line-height, background/foreground contrast, as well as spacing.
A study on readability tested reading performance of 20 participants by presenting them with the same text blocks having different margins surrounding the text as well as varying line-heights (the distance between lines of text). It showed that text with no margins was read faster, however, reading comprehension decreased. Faster reading speeds when the text had no margins can be explained by the text and paragraphs being closer together, resulting in less time needed to move the eyes from line to line and paragraph to paragraph.
Source: Software Usability Research Laboratory
As this particular study shows, the way we design our content can greatly impact the user’s experience. Be wary of the details: color, line-heights, tracking, and so forth and be mindful of sound typography principles for the web to ensure that you’re not discouraging your users from reading your content. Furthermore, study the effective use of negative space in web design.

Sources and Further Reading

• Reading Online Text: A Comparison of Four White Space Layouts

8. Small Details Make a Huge Difference

Too often, we look at the big picture when creating a web design and ignore the little things when we’re in a time crunch. We forego any thought put into the wording of something, or the design of a single button on a form if time and resources are limited. There are so many other things we need to think about that it’s often easy to let go of the small stuff.
But something as small as a form’s button can affect the success of a site, at least according to user interface design expert Jared Spool, who wrote about a case on how removing a button and adding a clear error message to avoid user errors in a checkout process increased revenue by $300 million in just a year. The first month witnessed a 45% additional sales attributed to the revision of the checkout process.
This attention to detail being important is echoed by Flow, a user-centered design firm. They found that by revising their error page so that it contained useful help text improved completed checkouts by 0.5% per month, which if extrapolated, could mean an additional quarter of a million pounds annually for the particular site.
The message they used? A polite two-sentence message instead of a cryptic 404 error: "We’re sorry, we’ve had a problem processing your order. Your card hasn’t been charged yet. Please click checkout to try again."

Pay attention to the details. Use A/B split testing to test your hypothesis and find out what is the most effective design that achieves better results. Set goals using analytics software to benchmark results of design tweaks in relation to site objectives.

Sources and Further Reading

• The $300 Million Button
• £250,000 From Better Error Messages
• The Thickness of Napkins
• Myth #10: If your design is good, small details don’t matter

9. Don’t Rely on Search as a Crutch to Bad Navigation

Users expect navigation to be easy to use and well organized. Even with an excellent site search engine, users will still turn to primary navigation first. According to a task test conducted by Gerry McGovern, over 70% of the participants began the task he gave them by clicking on a link on the page as opposed to using the search feature.
This result is similar to a test by UIE of 30 users that tracked e-commerce tasks. The research analysis concluded that "users often gravitated to the search engine when the links on the page didn’t satisfy them in some way." Thus, search is most often utilized only when the user has failed to discover what they were looking for in the current page.
The lesson to be gained here is clear: Don’t rely on site search to remedy poor content organization, findability issues, and bad information architecture. When users are unable to navigate to what they are looking for, attention should be diverted to layout, navigation, and content organization improvements, with improving search functionality as the secondary priority.

Sources and Further Reading

• Navigation is More Important Than Search
• Are There Users Who Always Search?
• Myth #16: Search will solve a website’s navigation problems

10. Your Home Page Isn’t As Important as You Think

Visitors to your website are less likely to land on your home page. Search engines are a big factor here, as they’ll link to whatever page is relevant on your site. Links from other websites are also likely to link to pages beyond your home page if that’s where the relevant information is.
According to an analysis by Gerry McGovern, page views sourcing from the home page of websites is decreasing dramatically. He witnessed a drop from 39% from 2003 to only 2% in 2010 of page views coming from the home page of a large research site. This trend was doubly confirmed on another site he studied, where page views sourcing from the home page halved in just two years (from 10% in 2008 to only 5% in 2010).
McGovern’s results indicate that traffic, more and more, is coming from external sources — search engines, social media sites such as Twitter, and content aggregator services such as AllTop — rather than from the front page of a website. Therefore, a higher focus on landing pages versus your home page can get you more bang for your buck in terms of conversion and user-retention opportunities.

Ver trabajo de diseñadores siempre es divertido

En esta exposición organizada por Dimad podemos ver trabajos de todo tipo. La estructura es por grupos o personas.

Entre los grupos podemos ver:

• Consumo, envase, etiquetas. Proyectos de packaging, etiquetas de productos...
• digital interactivo ubicuo. Páginas web, cds, interactivos...
• espectáculo ocio cultura. Carteles, obras de teatro, exposiciones...
• experimento autoencargo rechazado. Esta puede ser una de esas secciones divertidas donde los diseñadores han enviado sus proyectos más personales.
• identidad valores estrategia. Toda la expresión corporativa. Logotipos, stands, identidad.
• leer publicar informar. Revistas, folletos, libros, publicaciones.
• mínimo esencial eficaz. En este caso hace referencia al estilo del diseño. Se proponen a los diseñadores que manden proyectos con un estilo esencial.
• persuadir promocionar seducir. En este caso el estilo es el más sugerente.
• plegar cortar manipular. Proyectos donde existe algún tipo de manipulado en el papel o material.
• poético gestual narrativo
• responsable solidario denuncia. ONGs, campañas de sensibilización...
• territorios sistemas señales. La señalización suele ser una de esas disciplinas del diseño que tiene legiones de fans.

Evidentemente, siemple podemos ver los trabajos por los más votados.

Fuente: alzado.org

Aprender CSS de manera rapida

Verdaderamente aprender a diseñar con CSS no es complicado, pero al principio puede traer cierta complicación. En especial a la hora de recordar y comprender los distintas etiquetas que se pueden aplicar y los distintos valores que estas pueden aceptar. Navegando por Delicious encontré CSS Sandbox una aplicación que realmente es muy sencilla que me pareció extraordinariamente practica.

En CSS Sandbox tendremos un texto con cierto formato y abajo todas las opciones que le podemos aplicar y con solo darle un click el texto de arriba se modificara.

Este tipo de sitios son los que realmente me gustan, por que son fáciles de usar y muy prácticos

Por ejemplo en la imagen de arriba podemos ver que propiedades son validas para seleccionar la familia letras y para seleccionar un tamaño.

Jugando un poco con este sitio podemos asimilar la información de manera muy didáctica. Muy recomendable!

Web: CSS Sandbox

Buen Diseño Web

www.ciberdix.net

Visual Website Optimizer, herramienta para mejorar el desempeño de un sitio Web

Cuando se hace algún tipo de negocio en Internet, es importante tener en cuenta la optimización, y Visual Website Optimizer es una auténtica joya, especialmente para las personas que están buscando mejorar la experiencia de usuario. Básicamente se trata de una herramienta que permite cambiar diferentes aspectos de un sitio (texto, colores, formatos, etc.) con el fin de hacer pruebas y hacer también un seguimiento de los resultados de dichos cambios.

Por ejemplo, para quienes hacen ventas es una herramienta imprescindible, ya que puede recortar gastos importantes. Gracias a que los datos se muestran en tiempo real, es una herramienta muy importante. Incluso se pueden hacer tests del tipo A/B, que podría ser útil a personas que muestren anuncios, para de esta forma, mejorar el rendimiento y aumentar ganancias.
Entre algunas características que se pueden encontrar dentro de VWO está por ejemplo, la integración con Google Analytics, generación de reportes A/B con soporte para múltiples variables, gráficas y detalles precisos sobre los visitantes, editor WYSIWYG (editor visual al estilo WordPress) que permite la edición de cualquier sitio sin siquiera tocar el código.

Personalmente creo que esto es un diamante en bruto, ya que ofrece muchas opciones realmente útiles. Sin duda esta herramienta debe estar en el arsenal de cualquier webmaster que se preocupe por el desempeño de su(s) sitio(s). Por el momento se encuentra en fase Beta, que es gratuita para todas las personas, sin embargo, más adelante, cuando la fase Beta expire, probablemente se haga un servicio de pago. Hay que aprovechar mientras dure esta fase.
Enlace | Visual Website Optimizer

Fuente: incubaweb.com

La web semántica

La Web Semántica es una Web extendida, dotada de mayor significado en la que cualquier usuario en Internet podrá encontrar respuestas a sus preguntas de forma más rápida y sencilla gracias a una información mejor definida. Al dotar a la Web de más significado y, por lo tanto, de más semántica, se pueden obtener soluciones a problemas habituales en la búsqueda de información gracias a la utilización de una infraestructura común, mediante la cual, es posible compartir, procesar y transferir información de forma sencilla. Esta Web extendida y basada en el significado, se apoya en lenguajes universales que resuelven los problemas ocasionados por una Web carente de semántica en la que, en ocasiones, el acceso a la información se convierte en una tarea difícil y frustrante

Más: http://www.w3c.es/Divulgacion/Guiasbreves/WebSemantica

Listado de Herramientas 2.0

Wwwhatsnew (Juan Diego Polo): Recopilación de Wwwhatsnew.com

Audio y podcasting
Odeo: http://www.odeo.com
Evoca: http://www.evoca.com/
vimeo: http://www.vimeo.com
Caspost: http://www.castpost.com
Internet Archive: http://www.archive.org
ClickCaster: http://clickcaster.com
Garageband: http://www.garageband.com
PodServe: http://www.pod-serve.com/
GCast: http://www.gcast.com
CastingWords: http://castingwords.com/
Feed 2 Podcast: http://www.feed2podcast.com
liveplasma: http://www.liveplasma.com/
Fluctu8: http://www.fluctu8.com
folcast: http://www.folcast.com
PodOmatic: http://www.podomatic.com
Podtranscript: http://www.podtranscript.com
Más: http://www.masternewmedia.org/es/2007/03/11/podcasting_herramientas_para_grabar_y.htm

Blogs: creación
1BLOGS.ES : http://www.1blogs.es
La Coctelera : http://www.lacoctelera.com
Blogger : http://www.blogger.com
Blogsome : http://www.blogsome.com
Zoomblog : http://www.zoomblog.com
Blogalia : http://www.blogalia.com
Blogspirit : http://www.blogspirit.com
Movable Type : http://www.movabletype.org (instalación)
WordPress : http://www.wordpress.org (instalación)
B2evolution : http://b2evolution.net (instalación)
TypePad : http://www.typepad.com
Blog-fx: http://www.blog-fx.com



Blogs: utilidades
FEEDblitz: http://www.feedblitz.com
FeedBurner: http://feedburner.com

Calendarios
Google Calendar: http://calendar.google.com
kiko: http://www.kiko.com
30boxes: http://30boxes.com
CalendarHub: http://calendarhub.com/

Chat e IM
chatCREATOR: http://www.chatcreator.com
ajchat: http://www.ajchat.com
Gabbly: http://gabbly.com
chatsum: http://www.chatsum.com
3bubbles: http://www.3bubbles.com
Campfire: http://www.campfirenow.com
Conversate: http://www.conversate.org
Zohochat: http://zohochat.com
meebo: http://www.meebo.com
ebuddy.com: http://www.ebuddy.com/index.php
mabber: http://mabber.com

Correo electrónico
Gmail: http://gmail.google.com
Laszlo Mail: http://www.laszlomail.com
Zimbra: http://www.zimbra.com
goowy: http://www.goowy.com
PookMail.com: http://www.pookmail.com
MAILINATOR: http://mailinator.com/mailinator/index.jsp

Discos duros online
openomy: http://www.openomy.com
box.net: http://www.box.net
Streamload: http://www.streamload.com
inbox.com: http://www.inbox.com (más que disco duro)
omni drive: http://omnidrive.com.au
esnips: http://www.esnips.com/signin/index.jsp (más que disco duro)
Allmydata.com: http://www.allmydata.com
DropSend: http://www.dropsend.com
Mailbigfile.com: http://www.mailbigfile.com
in.solit.us: http://in.solit.us (nuevo)

Editores de fotos
PHIXR: http://www.phixr.com/
Preloadr: http://www.preloadr.com/
PXN8: http://pxn8.com/
Snipshot: http://snipshot.com/

Feeds: buscadores
Technorati: http://www.technorati.com
Feedster: http://www.feedster.com
Plazzo: http://www.plazoo.com
Blogz: http://www.sarthak.net/blogz/index.php
Blogwise: http://www.blogwise.com

Feeds: lectores
Bloglines: http://www.bloglines.com
alesti: http://www.alesti.org
BloxOr: http://www.bloxor.com
feedness: http://www.feedness.com
Pageflakes: http://www.pageflakes.com
newsgator: http://www.newsgator.com
FeedReader: http://www.feedreader.com (instalación en disco duro)
FeedDemon: http://www.newsgator.com (instalación en disco duro)

Alojamiento fotografías y gráficos:
Flickr: http://www.flickr.com
23hq: http://www.23hq.com
Zoto: http://www.zoto.com
Zooomr: http://beta.zooomr.com/home
Más en: http://utilidades.bitacoras.com/categorias/utilidades-para-fotos-o-imagenes

Páginas de inicio:
Netvibes: http://www.netvibes.com
Pageflakes: http://www.pageflakes.com
Protopage: http://www.protopage.com
Yourminis: http://www.yourminis.com


Marcadores sociales o colectivos (tus favoritos en internet):
Blinklist: http://es.blinklist.com/
Del.icio.us: http://del.icio.us/
Furl: http://www.furl.net/
Simpy: http://www.simpy.com/
Diigo: http://diigo.com/
Spurl: http://www.spurl.net/
Ma.gnolia: https://ma.gnolia.com/
Connotea: http://www.connotea.org/
Blogmarks: http://blogmarks.net
Más en 3spots



Navegadores
Mozilla Firefox: http://www.mozilla.com/firefox/
Flock: http://www.flock.com/

Notas
Notefish: http://www.notefish.com
Clipmarks: http://clipmarks.com
Más en: cincuenta formas de tomar notas y … alguna más

Pdf: conversión
Pdf online: http://www.pdfonline.com
Pdf Converter: http://www.freepdfconvert.com

Podcasting: directorios en castellano
Podcastellano: http://www.podcastellano.com/
podcast.com.ar: http://podcast.com.ar/
elpodio: http://www.elpodio.com/
podcast-es: http://www.podcast-es.org/index.php/Directorio
folcast: http://www.folcast.com/
podsonoro: http://podsonoro.com

Presentaciones
S5: http://meyerweb.com/eric/tools/s5/
Presentacular: http://labs.cavorite.com/presentacular/ (añadido del anterior). Un ejemplo en: http://labs.cavorite.com/presentacular/example/
HTML Slidy: http://www.w3.org/Talks/Tools/Slidy/
Thumbstacks: http://www.thumbstacks.com/
Zoho Show: http://zohoshow.com
Empressr: http://empressr.com/default.aspx (Ajax y Flash, nuevo)
TeamSlide: http://www.teamslide.com (de pago)

Tiras cómicas
StripGenerator: http://www.stripgenerator.com
Comics: http://www.mainada.net/comics/
Bubblesnaps: http://www.bubblesnaps.com (poner bocadillos a fotos)

TV
Democracy: http://www.getdemocracy.com/
PPLive: http://www.pplive.com
SopCast: http://www.sopcast.org
TVAnts: http://www.tvants.com

Vídeos
You Tube: http://www.youtube.com
Google Video: http://video.google.com
vidiLife: http://www.vidilife.com
vimeo: http://www.vimeo.com
current: http://www.current.tv
Clip Shack: http://www.clipshack.com
eyeSpot: http://www.eyespot.com
VideoSift: http://www.videosift.com

Videoconferencia
SightSpeed: http://www.sightspeed.com/es
Skype: http://www.skype.com/intl/es

Wikis
Webnote: http://www.aypwip.org/webnote/
Pbwiki: http://www.pbwiki.com/
Wikispaces: http://www.wikispaces.com
Wetpaint: http://www.wetpaint.com
Xwiki: http://www.xwiki.com/xwiki/bin/view/Main/WebHome
Wiki.mailxmail.com: http://wiki.mailxmail.com/
MoinMoinWiki: MoinMoinWiki
seedwiki: http://seedwiki.com/
Jotspot: http://www.jot.com/
EcoWiki: http://www.ecowiki.org/
Wikia: http://www.wikia.com/wiki/Wikia
Socialtext: http://www.socialtext.com/
Tiddlywiki: http://www.tiddlywiki.com
tiddlyspot: http://tiddlyspot.com/


Fuente: http://unileon.wikispaces.com/

Vectorizados

Es una web que resulta visualmente muy atractiva, a la vez que sencilla. Varias ilustraciones vectoriazadas de diferente calidad e interés. Destacan algunas muy buenas, aunque en general es mediocre. Me quedo con el diseño de la interface de la página.

Fuente: vectorizados.com

CSS Property Index

Fuente: blooberry.com

Y también: csscheatsheet.html

250+ Resources to Help You Become a CSS Expert

de Webdesigner Depot de Walter

A 58 personas les gusta esto.

CSS is the second-most-important thing you can master when it comes to web design, right after HTML.

And the capabilities of CSS can be staggering (especially with the new CSS3 standard already making appearances in some browsers).

If you can imagine it, it’s likely someone has already figured out how to do it with CSS.

Below are more than 250 resources for mastering CSS. While they’re not likely to make it any less staggering, they can help you master the techniques that will help set your designs apart from the crowd.

CSS3 Resources

30 Essential CSS3 Resources – A roundup of 30 great tutorials, tips, and other resources for what’s new in CSS3.

20 Useful Resources for Learning About CSS3 – A great collection of CSS3 tutorials.

CSS3 Unleashed—Tips, Tricks and Techniques – A huge roundup of CSS3 resources broken down by category.

20 Very Useful CSS3 Tutorials – Another rundown of good tutorials for learning the new capabilities of CSS3.

CSS3 Exciting Functions and Features: 30+ Useful Tutorials – More than thirty tutorials for learning to use some of CSS3’s more interesting new features.

References and Cheatsheets

CSS Property Index – An alphabetical listing of every CSS property.

Cascading Style Sheets Level 2 Revision 1 – This is the official specifications of CSS 2.1 from the World Wide Web Consortium.

CSS Shorthand Guide – A cheatsheet covering basic CSS shorthand formats.

CSS Cheat Sheets – Two cheat sheets from About.com—one basic and one for CSS layouts.

Listamatic – This site offers up examples of how to use CSS to create radically different list styles.

Beginner’s Guide from a Seasoned CSS Designer – This is a huge resource list for CSS beginners.

CSS: Getting Into Good Coding Habits – This article offers some best-practices for your CSS coding.

5 Tips for Organizing Your CSS – This article offers up five really useful methods for keeping your stylesheets better organized (and, therefore, easier to edit later).

My 5 CSS Tips – A collection of five simple tips for creating better CSS.

Playing Nice with the Other CSS Kids – A guide to writing maintainable CSS.

Squeaky Clean CSS – Another guide to creating maintainable, minimalist CSS.

Quirks Mode and Strict Mode – A guide to quirks mode and strict mode in modern browsers.

CSS Basics – A complete online guide to CSS coding in book form.

CSS Cheat Sheet (V2) – A single-page CSS reference that lists all of the CSS 2.1 selectors.

Will the Browser Apply the Rule(s)? – A chart showcasing which CSS hacks and rules are supported in which browsers.

CSS Properties to JavaScript Reference Conversion – A very useful chart for seeing the conversions of CSS Properties to JavaScript References.

CSS Cheatsheet – A two-page quick-reference guide for CSS2.

Core CSS: Part 1 – A 6-page reference guide for basic CSS elements from Refcardz.

CSS Shorthand Cheat Sheet (PDF) – A reference sheet for CSS shorthand format.

GoSquared CSS Help Sheet (PDF) – A quick-reference guide to CSS basics.

Using CSS (Cascading Style Sheets) – A basic guide to CSS, including the benefits of using CSS.

5 Ways to Instantly Write Better CSS – Some tips for writing good CSS that’s both efficient and effective.

Optimizing Your Website Structure for Print Using CSS – A guide to creating stylesheets for print.

PrintStylesheets – Another guide to creating print stylesheets.

CSS Typography: Contrast Techniques, Tutorials, and Best Practices – A great collection of CSS typography resources.

Powerful CSS Techniques for Effective Coding – A collection of CSS techniques, ideas, and solutions for better CSS coding.

Resetting Your CSS Styles with CSS Reset – A complete guide to resetting styles.

Structural Naming Convention in CSS – An article about naming elements based on what they are instead of where they are or how they look.

Improving Code Readability With CSS Styleguides – An article covering five techniques you can use to make your code more maintainable and manageable.

70 Expert Ideas for Better CSS Coding – A collection of expert tips for improving your code.

CSS Float Theory: Things You Should Know – A guide to understanding floats in CSS.

Complete CSS Guide – A huge resource covering virtually every part of CSS.

Typographic Contrast and Flow – An article outlining the basics of creating good type with sufficient typographic contrast in CSS.

How to Size Text in CSS – A thorough guide to CSS text sizing.

Creating Sexy Stylesheets – A great guide to creating cleaner, better-structured, and easier-to-maintain stylesheets.

CSS Cheat Sheet – A very complete web-based CSS cheat sheet.

13 Training Principles of CSS Everyone Should Know – A list of basic CSS conventions you should be aware of.

Examples and Tips for Great HTML/CSS Formatting – A great collection of tips for creating better-structured CSS.

Resource Guide – This is the CSS resource guide from CSS Zen Garden.

CSS Vault Resources – A large collection of resources for all sorts of CSS techniques, tutorials, and more.

CSS Beauty – A site offering up CSS news, resources, and a gallery.

CSS Cheat Sheet: Inheritance, Cascade, Specificity – A printable quick-reference guide to which properties inherit (and those that don’t), how the cascade works, and the basics of specificity.

CSS Quick Reference Guide – A page offering up all the basic CSS measurements, properties, values, selectors and media types.

Using CSS Shortcuts – A reference guide to some basic CSS shorthand.

Web Developer’s Handbook – This is a massive collection of CSS and other resources, including showcases, tools, and more.

Designing on a Dime: 100 Freebie CSS Resources – A large collection of CSS resources, including articles, tutorials, layouts, and more.

15 CSS Properties You Probably Never Use (but perhaps should) – This article covers fifteen often-overlooked CSS properties that many designers might not even know exist.

10 Principles of the CSS Masters – A collection of great principles and guidelines from some of the masters of CSS.

CSS Specificity: Things You Should Know – A guide to CSS specificity, one of the most difficult CSS concepts to grasp.

Solving 5 Commons CSS headaches – A guide to dealing with CSS issues like IE6’s double-margin bug and ineffective styles.

Tutorials and Techniques

CSS from the Ground Up – This is a very basic tutorial for getting started with CSS that walks you through creating your first basic web page with CSS. It assumes that the person going through the tutorial has little or no knowledge of how to code a website and is a great resource for beginners.

53 CSS Techniques You Couldn’t Live Without – This is a huge collection of CSS techniques for everything from menus to forms to print stylesheets.

CSS Drop Shadows – A tutorial on how to create drop shadows on images using CSS.

A CSS Crossfader Demo – This shows how to make a really cool crossfading effect using Script.aculo.us, JavaScript and CSS.

Selectutorial—CSS Selectors – A basic guide to CSS selectors and how they work.

CSS Navigation Techniques – A collection of 37 different navigation designs using CSS.

Attach Icons to Anything with CSS – Shows how to use CSS selectors to add an icon to any bit of HTML.

CSS Techniques I Use All the Time – A collection of CSS techniques Christian Montoya finds extremely valuable.

CSS Techniques Roundup – 20 CSS Tips and Tricks – A collection of CSS techniques including rounded corners and CSS popups.

CSS Tips and Tricks – A collection of useful, basic CSS techniques.

Master Stylesheet: The Most Useful CSS Technique – A master stylesheet used for clearing and resetting browser defaults.

Sample CSS Page Layouts – A collection of step-by-step layout tutorials.

Showing Hyperlink Cues with CSS – A quick tutorial for adding link-type icons using CSS that’s compatible with IE7, Safari, and Firefox.

Ten CSS Tricks You May Not Know – Covers tips like CSS font shorthand, image replacement, and vertical alignment with CSS.

Ten More CSS Tricks You May Not Know – This article covers things like block vs. inline elements, setting a minimum page width, and invisible text.

Turning a List into a Navigation Bar – A great tutorial on creating a nav bar from a styled list.

Turning Lists Into Trees – How to create a multi-level unordered list in the form of a document or page tree.

Unordered List Rollover Gallery – How to create an image gallery using an unordered list and rollover technique.

Web Page Reconstruction with CSS – How to rebuild a webpage with a CSS layout.

Advanced CSS Layouts: Step by Step – A step-by-step tutorial for creating an advanced 3-column layout.

Creating a CSS Layout from Scratch – A complete guide to building a CSS-based site from the ground up.

Forms Markup and CSS – A guide to form styling with CSS.

CSS Tutorial – A complete tutorial from W3Schools.

Stylesheets – Another very complete CSS tutorial collection.

Fancy Paragraphs with CSS – A tutorial to create specialized paragraph formats.

Even More Rounded Corners with CSS – A technique for creating rounded corners that supports PNG and alpha transparency.

Single Image Multi Replacement – A technique that uses a single image to replace more than one heading.

Link Thumbnail – A tutorial for creating a link preview popup using JavaScript and CSS.

Uberlink CSS List Menus – A tutorial for creating a nav bar that behaves like an image swapping menu but only uses two images and highlights the current page.

Iconize Textlinks with CSS – A technique for adding file-type and other icons to your links.

How to Add Variables to Your CSS Files – A guide to applying variables to CSS using PHP and Apache’s URL rewrite.

15+ Techniques and Tools for Cross Browser CSS Coding – This article covers more than 15 tips for creating cross-browser compatible CSS code.

CSS Slicing Guide – A complete tutorial for slicing your design files to create standards-compliant CSS and XHTML sites.

CSS Centering—Fun for All! – A guide to CSS centering in layouts, including centering liquid layouts.

Absolute Positioning Inside Relative Positioning – A guide to positioning child elements absolutely within a relatively-positioned parent element.

Learn CSS Positioning in Ten Steps – A handy tutorial to teach you the basics of the often-confusing CSS positioning.

Faux Absolute Positioning – A guide to a positioning approach that combines the best attributes of both float and absolute positioning.

Vertical Align for Navigation Lists with Multiple Lines – A guide to aligning lists that use the floated box approach.

Top 10 CSS Buttons Tutorial List – A collection of ten of the best tutorials for creating CSS buttons.

Snook’s Resizable Underlines – A tutorial for creating resizable underlines that stretch to fit the width of an entire column (without justifying text).

Resizable Image Example – Create resizable images that increase and decrease in size based on the surrounding text size.

Mountaintop Corners – Creating rounded corners with CSS.

CSS Rounded Corners Roundup – A collection of rounded corner techniques and tutorials.

Fun with CSS Shapes – A screencast showing how to create shapes just using CSS (no images).

Unobtrusive Sidenotes – A technique for creating unobtrusive sidenotes within a webpage.

CSS Tricks for Custom Bullets – A guide to creating custom styles for bullets with CSS.

CSS Swag: Multi-Column Lists – A guide to creating semantically-logical, ordered list that wraps through multiple vertical columns.

Improving Link Display for Print – Shows how to include link URLs in printouts of your pages after the link anchor text.

Advanced CSS Menu Trick – A really cool advanced menu with a blur effect built with CSS.

CSS Menus – A tutorial on creating menus from nested lists with CSS2 and no JavaScript.

CSS Tabs Menu with Dropdowns – A tutorial for creating a tabbed dropdown menu with CSS.

Advanced CSS Menu – A tutorial for creating a really great CSS menu from WebDesignerWall.

Animated Horizontal Tabs – A tutorial for creating horizontal menu tabs that animate on rollover.

CSS Graphic Menu with Rollovers – A great tutorial for creating a CSS menu with a rollover effect.

CSS Sprite Navigation Tutorial – A tutorial for creating a menu using CSS sprites.

Hybrid CSS Dropdowns – A tutorial on how to create CSS dropdowns that degrade gracefully and are well-structured, among other things.

CSS Menus v2 – Create a dynamic menu using CSS and jQuery that’s cross-browser compatible.

Beginner’s Guide to CSS – A complete guide for those new to CSS.

Getting Started with CSS: A Practical Exercise – A very basic guide to getting started with CSS.

4 Uber Cool CSS Techniques for Links – A collection of great link-styling techniques.

8 Premium One Line CSS Tips – A collection of single-line CSS solutions, including vertical centering, preventing line breaks in links, and removing active link borders.

How To: CSS Large Background – A tutorial for working with large backgrounds with CSS.

The Highly Extensible CSS Interface – A complete tutorial for creating highly customizable and adaptable CSS websites.

Using CSS to Do Anything: 50+ Creative Examples and Tutorials – A collection of more than 50 tutorials for creating unique CSS layouts.

Quick and Easy CSS Development with Firebug – A guide to using Firebug to improve your web designs.

10 Examples of Beautiful CSS Typography and How They Did It… – Offers up great examples of CSS typography along with tutorials on how to create each.

16 Usable CSS Graph and Bar Chart Tutorials and Techniques – A collection of tutorials for creating CSS-based charts and graphs for data visualization.

Better Pull Quotes: Don’t Repeat Markup – A guide to creating pull quotes that don’t include any unnecessary, repeated markup.

CSS Gradient Text Effect – A tutorial for creating text gradients for your headings.

CSS Pull Quotes – Another tutorial for creating pull quotes with CSS.

Creating CSS Layouts: The Best Tutorials on Converting PSD to XHTML – A collection of tutorials for creating CSS from Photoshop designs.

20 Ultimate CSS Tutorials That Will Help You Master CSS – A great collection of twenty easy-to-understand tutorials for creating tricky CSS effects.

19 CSS Menu Tutorials to Spice Up Your Web Designs – Offers some great options for menus, with instructions for each.

43 PSD to XHTML, CSS Tutorials Creating Web Layouts and Navigation – A huge list of tutorials for turning your Photoshop designs into valid CSS/XHTML files.

CSS Image Maps – A tutorial for creating image maps with CSS and XHTML.

Fluid Grids – A guide to creating fluid grid-based layouts.

How to Debug CSS – A tutorial of debugging techniques for CSS.

9 Top Essential Skills That Every Web Designer Should Learn – A collection of must-know CSS techniques, including the basics of creating CSS layouts and how to style forms.

10 Challenging But Awesome CSS Techniques – A guide to some advanced CSS techniques that are well-worth learning.

50+ Nice Clean CSS Tab-Based Navigation Scripts – A great collection of tabbed navigation using CSS.

30 Exceptional CSS Techniques and Examples – A great collection of really cool CSS effects, including a hoverbox image gallery, a sticky footer, and a CSS-only accordion effect, among others.

101 CSS Techniques of All Time Part 1 – Part 2 – Another huge collection of great CSS techniques with tutorials for each.

Dead Centre – A brief tutorial on how to position something in the center of a browser window (both vertically and horizontally).

Liquid Layouts the Easy Way – A complete tutorial on creating liquid CSS layouts.

Colored Boxes—One Method of Building Full CSS Layouts – A great step-by-step tutorial covering one method of creating a CSS layout from the ground up.

Templates and Frameworks

The 1 Kb CSS Grid – This is probably the simplest and most compact grid system out there, but includes a tool to customize the grid prior to downloading.

Layouts.IronMyers.com – A collection of layouts available in various widths (including fluid).

CSS Zen Garden – CSS Zen Garden is an HTML and CSS framework made to showcase the variety of designs that can be created using CSS. In addition to the framework, there are tons of templates and themes available.

The Layout Reservoir – A few simple CSS layouts.

Perfect Multi-Column CSS Liquid Layouts – A collection of liquid layouts that are iPhone compatible.

960 Grid System – A CSS grid system based on a 960-pixel wide basic layout.

A Detailed Look at the 960 CSS Framework – A comprehensive sites to building websites with the 960 Grid System.

Fluid 960 Grid System – Templates for creating fluid layouts based on the 960 Grid System with either 12 or 16 columns. It also includes templates for fixed layouts.

Blueprint CSS – A CSS framework for creating grid-based designs.

BlueprintCSS 101 – A basic guide to using the Blueprint framework.

CSS Boilerplate – A simple, semantic CSS framework.

YAML – Yet Another Multicolumn Layout. A standards-based XHTML/CSS framework.

Ruthsarian Layouts – This site offers up a series of CSS-based layouts that are royalty-free and copyright-free.

Layout Gala – This site offers up forty different CSS-styled HTML templates for creating a variety of different website layouts.

Dynamic Drive CSS Layouts – Another site offering some basic CSS templates for two- and three-column, liquid and fixed layouts.

Free CSS Templates – A site offering more than 200 CSS templates released under the Creative Commons Attribution 2.5 license.

Nice and Free CSS Templates – A dozen templates to get you started with CSS-based designs, including a dynamic centered box, four dynamic columns, and fixed box total centered designs.

Open Designs – A collection of thousands of free CSS and XHTML templates from around the world.

CSS Tinderbox Frameworks – CSS Tinderbox offers a ton of great CSS frameworks, including some WordPress frameworks, fixed and flexible templates, and even full open source themes.

The Only CSS Layout You Need (?) – This site offers a template for ten different CSS layouts all based on the same HTML.

Little Boxes – A collection of CSS files for a variety of layouts.

Three Column Layouts – A collection of 3-column layouts from all over the web.

Faux Column CSS Layouts – A collection of 42 fixed-width CSS layouts with faux columns.

Layout Packs – A set of fluid-width CSS layout frameworks (it’s the third download on the page).

Prototyping with the Grid 960 CSS Framework – A guide to creating website mockups using the Grid 960.

Prototyping a Magazine-Style Home Page Template with the Blueprint CSS Framework – A very valuable guide for creating magazine and grid-type layouts with Blueprint.

CSSEasy.com – A collection of basic CSS layouts, including both fixed and fluid options.

Tripoli – A generic CSS standard that resets and rebuilds browser standards for stable, cross-browser site rendering.

BlueTrip CSS Framework – A CSS framework that claims to combine the best aspects of Blueprint, Tripoli, Hartija, 960 Grid System, and Elements.

Elastic CSS Framework – A framework for simplifying the creation of elastic, fixed, or fluid layouts.

SenCSs – A framework that focuses on creating sensible styling for repetitive parts of your CSS.

Content with Style – A more advanced CSS framework that includes pre-written and tested components.

Typogridphy – A grid framework based on the 960 Grid System for creating typographically-pleasing grid layouts.

The Golden Grid – Another grid-based CSS layout framework based on a 6/12 grid system and a 970 pixel main width.

Elements CSS Framework – A lightweight, easy to use CSS framework.

Galleries and Showcases

CSS Stars – A gallery offering up a few dozen CSS-based designs for your perusal.

Didloo Showcase – Another gallery featuring more than sixty CSS-based designs.

CSS Based – An enormous CSS gallery with thousands of designs.

CSS Drive – A categorized CSS gallery.

CSS Gallery 2.0 – Another CSS gallery categorized by site type with a couple thousand designs included.

CSS Remix – A huge collection of CSS designs.

CSS Mania – A CSS gallery that’s been around for five years.

CSSelite.com – A categorized gallery of CSS designs.

CSS Creme – A huge gallery of sites sortable by color, category or designer that also includes tutorials and news.

csswebsite – A gallery that lets you filter by category, date, or color.

CSS Tea – A CSS design gallery sorted by industry.

26+ CSS Galleries to Follow on Twitter – A great guide to CSS galleries worth following on Twitter.

40 Beautiful Dark CSS Website Designs – A gallery post offering up some great dark designs built with CSS.

Best of CSS Design 2008 – Another gallery post showcasing the best CSS designs of 2008.

Best CSS Gallery – A huge CSS gallery with more than 1,500 design examples.

CSS Vault Gallery – The CSS design gallery from CSS Vault. It includes designs dating back as far as 2003.

CSS Beauty Gallery – A CSS gallery with entries listed chronologically. The include designs from 2004 to the present.

StyleCrunch – A gallery of standards-compliant sites.

The CSS Gallery List – A listing of most of the major CSS design galleries out there.

CSSLeak – A CSS gallery with more than 1,400 entries.

Tools

Firebug – A Firefox plugin that lets you view and edit CSS and other code right within Firefox.

Aardvark – A Firefox extension that lets you see each HTML element and class or id.

CSS Validator – A Firefox plugin that validates your CSS based on the W3C CSS Validator.

CSSViewer 1.0.3 – A Firefox extension that lets you view CSS properties on any web page.

GridFox – A Firefox extension for assisting in grid layout design by overlaying a grid on any website.

CodeBurner – A plugin for Firefox or Firebug that makes HTML and CSS reference material available in your browser.

Em Calculator – Converts pixel sizes to em sizes.

IzzyMenu – A free CSS menu creator that supports the creation of DHTML drop down sub-menus.

CSS Buttons – A downloadable button creator.

Spanky Corners – A rounded corner box generator.

Spiffy Box – Another generator for creating boxes with rounded corners.

CleanCSS – A CSS formatter and optimizer.

CSS Browser Selector – A useful tool for empowering CSS selectors based on the visitor’s browser.

CSS Compressor – A CSS file compressor.

CSS Layout Generator – A simple, online CSS generator that creates a basic layout framework.

CSSTidy – An open-source, downloadable CSS parser and optimizer.

The CSS Color Extractor – This tool will extract all the colors from a chunk of CSS code and display those colors for you.

CSS Rounded Box Generator – An online tool to create rounded corners with CSS.

CSS Source Ordered Variable Border 1-3 Columned Page Maker – A page layout generator that creates an Ordered Variable Border template.

CSS SuperScrub – A tool that decreases the complexity and size of your CSS files.

Sky CSS Tool – A really powerful online tool for styling CSS selectors.

CSS Tab Designer – A downloadable tool for styling CSS tabs visually.

Simple CSS – A downloadable, free CSS authoring tool.

Stylesheet Generator – A multi-step stylesheet creator.

CSS Validation Service – The CSS validation tool from W3C.

Styleneat – A free online CSS organizer that works with direct CSS input, file uploads or stylesheet URLs.

CSS Menu Generator – A online generator that creates custom, cross-browser compatible CSS menus.

Webmaster Toolkit’s CSS Menu Generator – An online tool that creates the CSS and HTML files for your menus.

CSS Drive CSS Compressor – A CSS compression tool that has a basic and an advanced mode, depending on your needs.

Tabifier – Adds indents to your code files.

CSSFly – A browser-based CSS and XHTML editor that works in real-time.

CleverCSS – A markup language that’s based on Python for building cleaner and better-structured CSS.

List-O-Matic – A tool for creating list-based navigation menus with CSS.

Markup Maker – Creates a valid XHTML/HTML framework document with the page IDs you enter.

CSSMate – An online CSS editor.

CSS Type Set – A CSS typography generator.

QrONE CSS Designer – An online CSS editor/generator.

Typetester – A tool that lets you compare CSS-styled type side by side (up to three styles at a time).

Typechart – A browsable collection of CSS-styled type that you can view as it would appear on a Mac or PC, with downloadable CSS code included.

Blueprint CSS Grid Generator – A tool for creating layouts based on the Blueprint framework.

Construct 0.5 – A visual tool for creating layouts based on the Blueprint framework.

PXtoEM.com – A pixel to EM size converter tool.

CSS Editors Reviewed – A collection of reviews of some of the more popular CSS editors.

YAML Builder – A visual tool for creating YAML layouts.

Gridinator – A CSS grid layout builder.

Grid System Generator – A grid layout builder that works with 960.gs, Golden Grid, 1Kb Grid, and a simple grid system.

List of CSS Tools – A huge list of CSS tools for everything from fonts to optimizers.

psd2css Online – A free tool that converts Photoshop designs to CSS files automatically.

50 Extremely Useful and Powerful CSS Tools – A list of some great CSS tools, along with a bit about each.

CSS Analyser – Checks your CSS against the W3C validation service while also checking the color contrast.

CSS-Specific Blogs and News Sites

CSS Tinderbox – CSS Tinderbox offers up tons of great CSS tips, resources, and free stuff (see the free frameworks they offer above).

CSS-Tricks – A blog devoted to CSS from Chris Coyier.

CSS3.Info – A blog covering updates and developments related to the CSS3 standard.

CSS Globe – A blog bringing daily posts about CSS, including tutorials, resources, and downloads.

Ultimate CSS – While it hasn’t been updated in a few months, this blog still offers some great archived posts.

CSS Help Pile – A growing collection of CSS tutorials and resources.

Don’t Meet Your Heroes – This site compiles the best CSS and web standards news from around the web in one place.

CSS How To – A blog devoted to teaching CSS, filled with useful tutorials and hints.

CSS Mania Blog – This blog focuses heavily on the finer points of CSS design.

CSS Vault – The CSS Vault blog covers tons of useful tips and tutorials.

Miscellaneous Downloadable Elements

CSS Candy Menu – A CSS drop-down menu available in a number of candy colors.

25 Code Snippets for Web Designers Part 1 – Part 2 – Part 3 – Three collections of great code snippets, many of which are CSS-based.

More Free CSS Navigation Menu Designs – Two collections of menus you can download.

CSS Mini Tabs (the Un-tab, tab) – Two different versions of a mini-tab navigation bar.

ADxMenu – A horizontal menu with dropdowns.

CSS Dock Menu – A downloadable CSS menu based on the Mac dock.

14 Free Vertical CSS Menus – A collection of free vertical menus.

Dynamic Drive CSS Library – A huge collection of CSS code you can download.

CSSPlay – A collection of CSS elements and layouts you can download, some of which are available for free commercial use.

CSS Tricks Downloads – A big collection of site elements you can download for free, with demos.

Compiled exclusively for WDD by Cameron Chapman.

Which tools do you use the most and which ones have we missed? Feel free to share your input in the comments area.

If you find an exclusive RSS freebie on this feed or on the live WDD website, please use the following code to download it: A1Jb8d