Notes on a web journey

posted on: 31 May 2011

Meaningful typography

filed under:webdesign @ 12:32:43

A modular scale is a sequence of numbers that relate to one another in a meaningful way. Learn how to apply modular scales to bring resonance to your designs.

More Meaningful Typography


posted on: 20 April 2010


filed under:webdesign @ 10:26:04

A through explanation of what is OpenType.

Beginners Guide to OpenType


posted on: 16 April 2010


filed under:webdesign @ 19:08:33

Using contrast effectively not only differentiates our site's design from others, it's the essential ingredient that can make our content accessible to every viewer, including the colorblind. By understanding contrast, we can create websites that unabashedly revel in color.

Contrast is King


posted on: 13 April 2010

Designing for the Web

filed under:webdesign @ 08:37:08

Mark Boulton's book available to read online for free:

Designing for the Web, Published by Five Simple Steps.A Practical Guide to Designing for the Web aims to teach you techniques for designing your website using the principles of graphic design. Featuring five sections, each covering a core aspect of graphic design: Getting Started, Research, Typography, Colour, and Layout. Learn solid graphic design theory that you can simply apply to your designs, making the difference from a good design to a great one. If you're a designer, developer, or content producer, reading A Practical Guide to Designing for the Web will enrich your website design and plug the holes in your design knowledge.

Designing for the Web



posted on: 17 September 2009

Dive Into HTML5

filed under:webdesign @ 10:37:04

Dive Into HTML5 seeks to elaborate on a hand-picked Selection of features from the HTML5 specification and other fine Standards. I shall publish Drafts periodically, as time permits. Please send feedback.

Dive Into HTML5 by Mark Pilgrim


posted on: 20 July 2009

Resource Description Framework

filed under:webdesign @ 10:27:44

The web is designed to be consumed by humans, and much of the rich, useful information our websites contain, is inaccessible to machines. People can cope with all sorts of variations in layout, spelling, capitalization, color, position, and so on, and still absorb the intended meaning from the page. Machines, on the other hand, need some help.


posted on: 24 April 2009


filed under:webdesign @ 10:12:34

welovetypography web site

WLT is an image, video and text “bookmarking” site that is wholly dedicated to type-related content. Think of it as a type-centric and visional delicious, if you like.



posted on: 13 April 2009

Logo identity

filed under:webdesign @ 13:24:51


It can be the easiest thing to create a logo for a client but when it comes to assessing what style of identity can best represent yourself or your business, this is a different matter altogether. It is tempting to use your own brand as a showcase of all your best techniques and ideas but this must be balanced with modesty and professionalism to gain the correct tone for your business image.

100 brands of interest 2


posted on: 09 April 2009

Improved typography in web design

filed under:webdesign @ 20:12:21

Typographic scale

Many people, designers included, think that typography consists of only selecting a typeface, choosing a font size and whether it should be regular or bold. For most people it ends there. But there is much more to achieving good typography and it's in the details that designers often neglect.

8 Simple Ways to Improve Typography In Your Designs


posted on: 28 March 2009

The elegance of imperfection

filed under:webdesign @ 14:02:32

Perfect imperfection

The pursuit of website perfection is always a denial of the perfection that exists within ourselves in the physical world.

The elegance of imperfection


posted on: 18 March 2009

Photoshop cheat sheets

filed under:webdesign @ 10:48:05

Keyboard shortcuts cheat sheets for Photoshop (8 different versions):

Photoshop keyboard shortcuts


posted on: 16 March 2009

Microformats for business

filed under:webdesign @ 08:36:05

On Clagnut an article that explains how microformats help computers understand web pages:

Microformats for business owners


posted on: 06 March 2009

Fluid grids

filed under:webdesign @ 09:22:07

An article on A List Apart :

Fluid grids


posted on: 18 February 2009

Grid system forum

filed under:webdesign @ 10:41:23

If you have any questions on grids, need help with a grid you're constructing, want to get some feedback on some work or just want to learn about the history of grid systems, sign up for the forum.

The Grid System Forum


posted on: 02 February 2009

HTML 5 resources

filed under:webdesign @ 19:57:07

A list of resources on HTML 5 by Cameron Moll :

12 resources for getting a jump on HTML 5


posted on: 05 January 2009

Golden Section and grid systems

filed under:webdesign @ 08:55:41

A good article on grids by Mark Boulton :

Feeling your way around grids


posted on: 31 December 2008

Modular layout

filed under:webdesign @ 09:15:44

For all of the advantages the web has with distribution of content, I've always lamented the handiness of the WYSIWYG design tools from the print publishing world. When I set out to redesign my personal website, I wanted to have some of the same abilities that those tools have, laying out pages how I saw fit, and that meant a flexible system for dealing with imagery. Building on some of the CSS that Eric Meyer employed a few years back on the A List Apart design, I created a set of classes to use together to achieve the variety I was after. Employing multiple classes isn't a new technique, but most examples aren't coming at this from strictly editorial and visual perspectives; I wanted to have options to vary my layouts depending on content.

Making Modular Layout Systems

Jason Santa Maria's beautiful personal web site explained.


posted on: 11 December 2008

Grid design

filed under:webdesign @ 10:42:52

Made popular by the International Typographic Style movement and pioneered by legends like Josef Müller-Brockmann and Wim Crouwel, the grid is the foundation of any solid design. The Grid System is an ever-growing resource where graphic designers can learn about grid systems, the golden ratio and baseline grids.

The grid system


posted on: 28 November 2008

Coding nicely

filed under:webdesign @ 12:40:02

Via an article on Particle Tree:


posted on: 25 November 2008


filed under:webdesign @ 10:30:36

The Web has search engines - many of them. However, they are typically concerned only with the text content of a Web page. What about a search engine for a Web page's structure?

Metadata Analysis and Mining Application


posted on: 17 November 2008

Site activity and color

filed under:webdesign @ 10:50:15

An article on Evolt:

Optimizing by Color


posted on: 15 November 2008

Character encoding

filed under:webdesign @ 14:21:44

A post on 456 Berea St. :

Character encoding


posted on: 05 November 2008

Save For Web color shift

filed under:webdesign @ 09:17:33

Fellow designers: somewhere between PSD and JPG, Photoshop is draining our colors of their life, like some horrible, RGB-stealing vampire. There's a lot of confusion on the web over why this is, and a lot of solutions being offered.

The mysterious Save For Web color shift


posted on: 30 October 2008

Standardizing font embedding

filed under:webdesign @ 20:04:03

The first W3C Recommendation for CSS level 2 (1998) included a feature called “Web Fonts” to deal with the situation where a style sheet referred to a font that wasn't present on the user's machine. One thing it allowed was a link to a remote font file so that it could be downloaded. Only Microsoft decided to implement it.

For and against standardizing font embedding


posted on: 11 October 2008

Calculating color contrast

filed under:webdesign @ 13:32:23

An interesting article on color contrast:

Calculating color contrast for legible text


posted on: 10 October 2008

Web development

filed under:webdesign @ 08:30:02

On A List Apart:

On Digital Web Magazine :

Concept Design Tools


posted on: 01 October 2008

Web typography CSS

filed under:webdesign @ 18:49:02

TYPECHART lets you flip through, preview and compare web typography while retrieving the CSS :



posted on: 29 September 2008

MySQL and Regular Expressions

filed under:webdesign @ 18:37:02

Tips on using NOW() in MySQL and negative matching with Regular Expressions:


posted on: 26 September 2008

Web standards and tests

filed under:webdesign @ 13:46:42

Two interesting articles on A List Apart about web standards:


posted on: 22 September 2008

Buttons, PHP and characters

filed under:webdesign @ 19:14:03

A few links :


posted on: 06 September 2008

Debugging HTTP

filed under:webdesign @ 09:42:03

On Chris Shiflett's blog:

Inspecting and Hacking HTTP

Interesting use of telnet and lots of links to different HTTP debugging (and not only) tools.


posted on: 31 August 2008

Web Design by Designers

filed under:webdesign @ 09:59:21

On Digital Web Magazine:


posted on: 26 August 2008

Designing posters

filed under:webdesign @ 19:12:33


35 Photoshop Tutorials for Designing Your Own Posters


posted on: 19 August 2008

Ornament type

filed under:webdesign @ 10:06:05

i love typography's Sunday Type post is, as usual, a treasure chest:

Sunday Type: ornament type


posted on: 15 August 2008

Tiled backgrounds designer

filed under:webdesign @ 09:28:21

A nice tool:

Tiled backgrounds designer


posted on: 29 July 2008

Wallpapers,fonts and icons

filed under:webdesign @ 13:07:41

On Lifehacker:

Top 10 Free Wallpaper, Fonts and Icon Sources


posted on: 23 July 2008

PNG fix

filed under:webdesign @ 08:48:06

A PNG transparency fix for IE6:

Unit PNG Fix


posted on: 21 July 2008

Beautiful fonts

filed under:webdesign @ 19:35:05


40+ Extremely Beautiful FONTS from deviantART


posted on: 30 June 2008

An accessibility checklist

filed under:webdesign @ 19:04:46

An accessibility checklist by Aaron Cannon:
Accessibility checklist via


posted on: 23 May 2008

Logo design basics

filed under:webdesign @ 13:41:22

Logos come in all kinds of shapes and sizes however they typically are one of 5 different classifications. Designing a logo is about much more than an exercise in aesthetic. A logo must be a positive depiction of the product or service it represents. When designing a logo, knowing which type of mark would be the most appropriate for the application will help you achieve a stronger solution.



posted on: 28 April 2008

Type and design on the web

filed under:webdesign @ 10:06:33

There are some basic approaches, guidelines and goals to consider when working with type on the Web. Overall, the medium of Web typography involves readability, accessibility, usability, and brandability. On the Web, these aspects function together to accomplish design's goals of communication and user interaction.

5 Principles And Ideas Of Setting Type On The Web

Design is broken up into a number of basic principles that apply to all design from type creation to painting to page layout, both on the web and in print. However, especially on the web, these rules tend to be forgotten and we just go with what feels “right”. This isn't because designers are feeling too loose to abandon these rules, but rather, most people working on the web don't even know they exist - if they do, they don't understand how to use them.

The Elements of Design Applied to the Web


posted on: 23 April 2008

A spiral ornament symbol in illustrator

filed under:webdesign @ 13:21:20

On Veerle's blog:

Today I want to show you how you can create a spiral ornament in Illustrator and reuse this ornament throughout your artwork multiple times resized, rotated, mirrored, whateverÖ by turning it into a Symbol. I've talked about Symbols before and I showed you how to use the Symbol Sprayer Tool. This time I'll focus a bit more on the creation of the ornament itself. Like always I'll talk you through the entire process step by step. By explaining every little detail of each step, this tutorial should be a good exercise for the beginners among you.

A spiral ornament symbol in illustrator


posted on: 16 April 2008

Designing with type characters

filed under:webdesign @ 09:44:51

Another post on Authentic Boredom :

Techniques for designing with type characters

A very beautiful way of using characters.


posted on: 01 April 2008

Mobile phone design

filed under:webdesign @ 21:18:32

The first step was to create a mobile style sheet. For this I duplicated the CSS file I've already built for large screens, and started stripping out the style that doesn't work so well on a smaller screen. The layout was simplified into a more linear single column, and some elements were re-done to provide a larger target area for a maximum Fitts factor, and background images were dropped wherever possible to cut down on bandwidth demands.


Interesting post on Mezzoblue. Lots to read and to learn, still going through the comments.


posted on: 29 March 2008 make over

filed under:webdesign @ 14:06:02

I finally completed the new layout and published it. I made some radical changes in colors and site structure. Everything is reachable from the home page. While before it was possible to read the latest five posts, now only one post is fully readable, the previous four posts are included only as title , category and tags. There is an archive page for all posts, while before the archives were part of the home page. The photos and studies pages are gone (but external links to photos or studies are not broken), now there is a flickr badge for the photos and all the links to the studies also on the home page. The links page is just not there anymore, that was something needed before Delicious came along...

The change in structure has simplified the use of the site, giving access to all the posts, pictures and studies from one place. I also decided on a major color change. During the testing of the new layout I found,as I knew I would, some things that needed to be fixed and others that could be made nicer. I moved the comments link from the bottom of the post to the top and substituted the text with an icon (still courtesy of, for example.

I had some problems with the flickr badge because it comes with a Javascript call incapsulated between <table> and <tr> tags which does not validate since a row (<tr>) is supposed to have cells (<td>) inside. The Javascript does that but it's unreadable by the validator. Apparently, though, if the Javascript call is just inside <div> tags it produces a series of images (<img>) wrapped in anchors (<a>) that link to the photo on flickr, no <td>s. It's then possible to apply CSS to the div and img. It's not the best solution but it validates.

All in all I'm pretty happy with the result, I felt that a change in appearance was long overdue and that, after using the site as it was for more then two years, the structure could be improved.


posted on: 05 March 2008

Design is in the details

filed under:webdesign @ 15:24:25

An article on A List Apart:

Stop worrying about how good a designer you are, and start worrying about the myriad tiny details that can elevate your work from passable to near-perfect.

Design is in the Details


posted on: 25 February 2008

More browser version targeting

filed under:webdesign @ 09:20:03

Version targeting shakes our browser-agnostic faith. Its default behavior runs counter to our expectations, and seems wrong. Yet to offer true DOM support without bringing JScript-authored sites to their knees, version targeting must work the way Microsoft proposes, argues Jeffrey Zeldman.

Version Targeting: Threat or Menace?


posted on: 18 February 2008

Patterns in Interaction Design

filed under:webdesign @ 18:36:18

This site contains a lot of best practices in Interaction Design. Over the years I have collected examples and insight on their applicability that I share with you here on this site. So there is really no original design to be found here, sorry. It has all been done before...See it as a reference or basic toolkit you can use when designing user experiences. It is no substitute for creative design, it simply seeks to describe what we know and have learned about solutions you will find abundantly on the web and even beyond.


posted on: 07 February 2008

Better taxonomies

filed under:webdesign @ 17:34:02

Large websites and intranets can benefit from improved methods of search and navigation. These include site maps, A-Z indexes, sophisticated search engines, and generally improved navigational design - and playing a potential role in all of these methods is well-planned taxonomy.

On Digital Web Magazine: Better Living Through Taxonomies


posted on: 05 February 2008

Easy to read

filed under:webdesign @ 09:37:41

On Information Architects Japan:

The 100% Easy-2-Read Standard

Good article, I often end up having to adjust the font size. I would have thought almost anyone knew about sizing text at this point in time but many times readability is still a problem.


posted on: 25 January 2008

Browser version targeting

filed under:webdesign @ 19:32:06

On A List Apart:

Beyond DOCTYPE: Web Standards, Forward Compatibility, and IE8

From Switches to Targets: A Standardista's Journey


posted on: 13 January 2008

Eye-Tracking studies

filed under:webdesign @ 13:20:06

On VirtualHosting :

23 Actionable Lessons from Eye-Tracking Studies


posted on: 30 December 2007

Background stripes

filed under:webdesign @ 09:44:51

Stripemania is a simple and free web 2.0 tool to create seamless diagonal stripes for your designs. You are able to choose the size of the stripes and the spacing between those. You can even add color gradient effect for all of your stripes.



posted on: 23 December 2007

Typographic contrast and vector polishing

filed under:webdesign @ 09:55:02

Two articles on WebDesignerWall:

Typographic Contrast and Flow

Vector Polishing Techniques


posted on: 17 December 2007

Web tools

filed under:webdesign @ 19:27:23

Design is a suite of web-design and development assistive tools which can be utilised on any web-page. Encompassing utilities for grid layout, measurement and alignment, Design is a uniquely powerful JavaScript bookmarklet.


Free web tools including webmaster tools:

Web tools


posted on: 17 December 2007


filed under:webdesign @ 09:27:11

Via Veerle's blog:

Design By Grid on designing grid based websites


posted on: 12 December 2007

Typesetting tables and PNGs on IE6

filed under:webdesign @ 19:06:36

Two articles on 24ways:

Typesetting Tables by Mark Boulton

Transparent PNGs in Internet Explorer 6 by Drew McLellan


posted on: 06 December 2007

HTTP and HTTPS RewriteRule

filed under:webdesign @ 19:19:21

On askApache :

Smart HTTP and HTTPS RewriteRule Redirects


posted on: 09 November 2007

Interface design and typographic design

filed under:webdesign @ 10:45:08

Published in 1954, Fitts's Law is an effective method of modeling the relationship of a very specific, yet common situation in interface design. That situation involves a human-powered appendage at rest (whether it's physical like your finger or virtual like a mouse cursor) and a target area that's located somewhere else.

Visualizing Fitts's Law

Good typographic design tells a story. It works at a micro level such as typesetting, and typeface selection etc. But it also works at a macro level. Macro level typography is about layout, rhythm and whitespace. But it's also about content and the story the designer is trying to tell through the type.

Content AND Presentation


posted on: 29 October 2007

Web Design Survey 2007

filed under:webdesign @ 15:09:05

Web Design Survey 2007 on A List Apart:

Findings From the Web Design Survey


posted on: 27 September 2007

Colour contrast

filed under:webdesign @ 10:02:32

On 456 Berea St.

10 colour contrast checking tools


posted on: 03 September 2007

Web standards checklist

filed under:webdesign @ 12:05:31

The term web standards can mean different things to different people. For some, it is table-free sites, for others it is using valid code. However, web standards are much broader than that. A site built to web standards should adhere to standards (HTML, XHTML, XML, CSS, XSLT, DOM, MathML, SVG etc) and pursue best practices (valid code, accessible code, semantically correct code, user-friendly URLs etc). In other words, a site built to web standards should ideally be lean, clean, CSS-based, accessible, usable and search engine friendly.

Web standards checklist


posted on: 03 September 2007

From print to web

filed under:webdesign @ 09:49:09

On Subtraction :

This Way to the Web


posted on: 17 August 2007

Typographic inspiration and instruction

filed under:webdesign @ 08:49:02

Some resources to make it easier to find typographic inspiration and instruction:

40 sources


posted on: 26 July 2007

Logo design tutorials

filed under:webdesign @ 18:50:07

This is E Logo Design's list of best logo design tutorials on the internet:

Top 50 Logo Design Tutorials


posted on: 14 July 2007

Icon design

filed under:webdesign @ 18:56:31

On the beautiful mezzoblue web site an article on icon design:

Icon Design: Anti-Aliasing


posted on: 05 July 2007

Design patterns

filed under:webdesign @ 19:23:06

A nice article on web design on Vitamin:

Web design-isms


posted on: 03 July 2007

Typography and Web Advertising

filed under:webdesign @ 09:26:03

Web pages are more akin to print editorial pages than print advertising pages in their complexity and sequentiality. Web ads, however, can be compared to television commercials: web ads are brief, five-second spots, compared to the thirty-second spots that appear, for example, on the network news.

Typography and Web Advertising


posted on: 23 June 2007

Incremental leading

filed under:webdesign @ 18:57:03

By Mark Boulton:

Incremental leading


posted on: 20 June 2007


filed under:webdesign @ 10:32:05

In March we've selected over 35 prominent designers and design companies, contacted them and asked to answer five design-related questions, sharing their knowledge and experience with fellows developers.

35 designers x 5 questions


posted on: 11 June 2007

Lining up elements on grid lines

filed under:webdesign @ 18:47:02

In print, grids are fairly static, and it's fairly straightforward to make decisions on how to use them based primarily on aesthetic concerns. As a result, most traditional grid practitioners will line up elements right on the grid lines...In digital media, though, we must, as always, make some compromises for the added factor of the way elements behave. Which is to say that, unlike the printed page, the components of a design - photos, illustrations, shapes, flourishes and type - can transform, change state, move, transform etc.

Nudge Your Elements


posted on: 01 June 2007

Backgrounds and PNGs

filed under:webdesign @ 10:57:21

On Digital Web Magazine:


posted on: 10 May 2007

Dynamic data

filed under:webdesign @ 09:01:22

On Vitamin :

The Standards Way to Do Dynamic Data


posted on: 03 May 2007

Beautiful web design

filed under:webdesign @ 09:19:08

On Sitepoint :

The Principles of Beautiful Web Design


posted on: 28 April 2007

Focus on content

filed under:webdesign @ 09:21:06

On Digital Web Magazine :

Coding for Content


posted on: 27 April 2007

Convey meaning

filed under:webdesign @ 18:18:06

If youíre a designer, you work to communicate and convey meaning. So itís important that you understand the mechanisms by which things and ideas acquire meaning; more than any other factor, your grasp of these fundamentals determines your ability to communicate effectively. Without fundamentals, you will flounder when faced with complex design challenges or constraints.

Contrast and Meaning


posted on: 24 April 2007

Software security

filed under:webdesign @ 19:04:26 excellent cross-platform, language-agnostic checksheet of common software security risks...a brief summary of each of the 19 sins, along with a count of the number of vulnerabilities I found in the Common Vulnerabilities and Exposures database for each one.

Sins of Software Security


posted on: 18 April 2007

Baseline grid

filed under:webdesign @ 19:02:36

Over the last year or so, there's been a lot of talk about grid systems and using column grids for website layouts.

Setting Type on the Web to a Baseline Grid


posted on: 14 April 2007

Web technologies

filed under:webdesign @ 19:16:21

HTML 4.01 may be a good, stable ground for developers to stand on, but it could be better. Lots of things have changed in the way the web is used and perceived in the last eight years, but particularly from a developer perspective, we've gained an understanding of what HTML 4.01 failed at, and where it could be improved. The next generation of these technologies is arriving, and they are worth keeping an eye on. These technologies will affect everyone in the business.

HTML5, XHTML2, and the Future of the Web


posted on: 05 April 2007

XMLHttpRequest with importNode

filed under:webdesign @ 19:20:08

On A List Apart:

While building a browser slideshow object for a demonstration on dynamically pulling image information from a web server, I ran into difficulty with the DOM-compliant approach I had envisioned. A two-day journey into the world of XML DOM support for web browsers lay between me and a satisfactory solution. My plan was to pass an XMLHttpRequest (XHR) with the name of an image to the server, which would return, from a combination of a database and the image itself, a title for the image, a description, and all meta data stored for the image. This data would be sent in XHTML format so that the client could simply import the XML response and append it to some container elements, thus speeding up the slideshow application.

Cross-Browser Scripting with importNode()


posted on: 01 April 2007

Design and the Golden Section

filed under:webdesign @ 11:15:04

Design is, in essence, communication but the vehicle for communication is the design. One of the key components in the vehicle of communication is composition, and in design schooling it is something that is taught as something you should feel rather than create logically.

Design and the Divine Proportion


posted on: 26 March 2007

Uncommon knowledge 3

filed under:webdesign @ 13:32:08

Third post of the Uncommon knowledge series by AceJet170 :
and a comment post on it:
uncommon knowlege


posted on: 24 March 2007

Grid systems

filed under:webdesign @ 09:56:09

More on grid layout:

Five simple steps to designing grid systems


posted on: 23 March 2007

Grid based layout

filed under:webdesign @ 10:49:23

Khoi Vinh has put online his presentation at SXSW on techniques to create a grid-based layout:

Oh Yeeaahh!


posted on: 22 March 2007

A redesign explained

filed under:webdesign @ 19:19:08

On Digital Web Magazine :

Redesigning the ExpressionEngine Site

ExpressionEngine website screenshot


posted on: 21 March 2007

Primary keys: ID vs GUID

filed under:webdesign @ 19:18:37

On Coding Horror :

Primary Keys: IDs versus GUIDs

The GUID stays unique globally while the ID is unique only within a single table.


posted on: 20 March 2007

Uncommon knowledge

filed under:webdesign @ 19:13:08

..every know and then I get the urge to impart knowledge that I've accumulated on others, usually younger designers. OK, sometimes it's reminisciences about PMT cameras and Rotring pens, but sometimes, very occasionally, it's something that might actually prove useful. Usually, it's stuff that I wish I'd known when I was at their stage of life/career.

Uncommon knowledge

I, for one, find the first two ( 001 , 002 ) “tips” interesting and hope to read many more..


posted on: 18 March 2007

Icon Design

filed under:webdesign @ 11:10:03

On icon design:



posted on: 17 March 2007

Web 2.0 logos

filed under:webdesign @ 19:47:41

A collection of Web 2.0 logos: screenshot

The complete Web 2.0 directory


posted on: 17 March 2007

Web building tips

filed under:webdesign @ 10:02:45

A collection of tips about HTML, CSS, JavaScript, and other Web development and design issues:

Web Building Tips


posted on: 15 March 2007

MySQL insert and update

filed under:webdesign @ 09:16:41

On Array Studio Workshop:

MySQL insert a new row or update old one


posted on: 13 March 2007

Design and Art

filed under:webdesign @ 13:05:23

A post by Mark Boulton about design and art:

One Principle to Design By


posted on: 13 March 2007

Font management

filed under:webdesign @ 12:59:03

On Digital Web Magazine :

Better Font Management


posted on: 11 March 2007

Semantics and structure

filed under:webdesign @ 11:05:09

On nefariousdesigns:

Semantics and Structure


posted on: 11 March 2007

Design principles

filed under:webdesign @ 11:03:27

On Bokardo:

Five Principles to Design By


posted on: 10 March 2007


filed under:webdesign @ 20:00:21

On Sitepoint:

The Joy of Regular Expressions [4]

links to part [3], part [2] and part [1]


posted on: 03 March 2007

The distribution of complexity

filed under:webdesign @ 18:49:48

The flaw with the simplicity/complexity controversy is that it gives the impression that designers are making a binary choice - but simplicity and complexity are not polar opposites. In fact, making something simpler is often a case of relocating complexity, rather than eliminating it from the user-technology relationship.

Simplicity: The Distribution of Complexity


posted on: 27 February 2007

Web standards and quality

filed under:webdesign @ 18:47:31

Two related articles on web standards by Andy Rutledge:

In spite of the widespread acceptance of Web standards by a specific segment of the design and development community, hosts of professionals - those out there right now creating the Web - are working in direct opposition to these standards. A significant reason for why this is happening and how those not working with Web standards justify their activity boils down, I believe, to something regrettably simple: nomenclature.

Web Standards: it's about quality, not compliance

As I referenced in my last article, the benefits and characteristics of Web standards are not being effectively communicated to many who need to hear and learn about them. The result is that some understandably leap to inaccurate conclusions while gross mischaracterizations are allowed to fester among members of the design and development community.

Web Misunderstandards


posted on: 26 February 2007

Turning scanners into readers

filed under:webdesign @ 19:28:01

For the purposes of web design, think of your writing as a series of visual cues designed to turn scanners into readers. As a dedicated scanner myself, I can attest to the effectiveness of these methods - some of them I even found myself using whilst searching for information for this article.

Does Your Copy Hold Up To A Quick Glance?


posted on: 12 February 2007

Five Simple Steps

filed under:webdesign @ 19:20:07

A post of the Five Simple Steps series by Mark Boulton:

Colour combinations

The book: Five Simple Steps: Designing for the Web


posted on: 09 February 2007

Verse quotations

filed under:webdesign @ 09:07:01


Indent or center verse quotations


posted on: 09 February 2007

Accessibility mistakes

filed under:webdesign @ 09:04:51

On 456 Berea St.:

7 accessibility mistakes


posted on: 08 February 2007

Web and graphics design

filed under:webdesign @ 19:30:05

Via NoisyDecentGraphics:


posted on: 31 January 2007

Htaccess tricks

filed under:webdesign @ 09:50:22

On perishablepress:

htaccess tricks


posted on: 30 January 2007

Web style

filed under:webdesign @ 18:53:02

A sum up of the current state-of-the-art in graphic design for web pages on webdesignfromscratch:

current web style


posted on: 30 January 2007

Inspired Design

filed under:webdesign @ 09:29:12

This series of articles is about merging ideas and inspiration in different and unexpected ways. Inspired by the pop artists of the 50ís and 60ís, I will take an inspirational item and transform it for the web, starting with what inspired me, working through the various design stages, and creating the final result.

Creating Inspired Design Part 1: I Am The Walrus


posted on: 26 January 2007

Design helps the comprehension

filed under:webdesign @ 19:38:03

A post on Noisy Decent Graphics:

Two brilliant pieces of graphic design


posted on: 24 January 2007

Prototyping and mockups

filed under:webdesign @ 09:19:07

Paper prototyping and Photoshop CSS mockups:


posted on: 18 January 2007

Heuristic evaluation

filed under:webdesign @ 08:47:09

Heuristic evaluation is a technique that involves analysing the usability of a website against a set of general usability precepts. One or more “experts” will analyse the target site, often following a series of pre-defined scenarios. Whenever they encounter an issue that breaks one of the precepts or “heuristics”, they will note the issue and sometimes the severity.

Heuristics for Modern Web Application Development

Ten Usability Heuristics

First Principles of Interaction Design


posted on: 14 January 2007


filed under:webdesign @ 19:32:03

An article on whitespace by Mark Boulton on A List Apart:



posted on: 11 January 2007

HTML cheat sheet

filed under:webdesign @ 09:13:27

One more cheat sheet from ILoveJackDaniels:

HTML cheat sheet


posted on: 04 January 2007

Typography and web design

filed under:webdesign @ 19:45:01

Three article typography related on iA:

The 100% Easy-2-Read Standard

Web Design is 95% Typography (1)

Web Design is 95% Typography (2)


posted on: 29 December 2006


filed under:webdesign @ 10:52:03

Floating issues are often easy to solve..but only after finding out how:

float flummox

Reminders of floating techniques are always good..


posted on: 22 December 2006

Type foundries

filed under:webdesign @ 08:57:21

On Ideasonideas:

Five foundries


posted on: 13 December 2006

Packaging and web design

filed under:webdesign @ 19:57:01

An interesting article on Digital Web:

Though hundreds of years of packaging design history and best practices may have influenced your offline shopping behaviors and decisions, the lessons learned in this enduring discipline didn't have much of an influence on early web designs.

Packaging Design for Web-based Products


posted on: 24 November 2006

One sentence

filed under:webdesign @ 20:16:21

On Authentic Boredom:

summarize a project in one sentence

Interesting comments.


posted on: 10 November 2006


filed under:webdesign @ 19:01:22

On Digital Web Magazine:

Color: an investigation


posted on: 27 October 2006

Graphing requests

filed under:webdesign @ 20:22:08

Simon Willison has found out that a Firefox extension has the capability to create a graph that shows “every component of the page - JavaScript, CSS, images - and when each component started and finished loading”:

graphing requests with Tamper Data


posted on: 25 October 2006

To be a web designer

filed under:webdesign @ 08:24:51

Andy Budd on freelance web design:
7 habits of a highly successful freelance web designer

Eric Meyer on becoming a web designer:
stand up for your rights


posted on: 19 October 2006

Pictures and design

filed under:webdesign @ 14:23:01

Via Ace Jet 170:


posted on: 10 October 2006

Accessibility,validation and the button tag

filed under:webdesign @ 09:35:21

Interesting articles on web accessibility, validation and the button tag:


posted on: 29 September 2006

Type and standards

filed under:webdesign @ 09:05:23

Two articles on Think Vitamin:

Looking at type

Choosing the best fonts for your site is about more than making it look pretty: different typefaces send out different signals.

Why standards still matter

The last couple of years may have seen an increase in the level of interest and action around web standards. But it still isn't filtering down to the mainstream.


posted on: 23 September 2006

Understanding HTML, XML and XHTML

filed under:webdesign @ 18:35:02

The relationships among HTML, XML and XHTML are an area of considerable confusion on the web. We often see questions on the webkit-dev mailing list where people wonder why their seemingly XHTML documents result in HTML output. Or we're asked why an XML construct like <b /> doesn't actually close the bold tag. This article will attempt to clear up some of that confusion.

Understanding HTML, XML and XHTML


posted on: 13 September 2006

Releasing core fonts

filed under:webdesign @ 19:31:02

I believe that the Net should be a place open to all. Those that can afford to buy have no problem but those that don't should still have a chance. Lately Andrei Herasimchuk as asked for some fonts to be freely available. I agree, so I thought I'll make my case and join my voice to theirs (as asked by Andrei):

So, Mr. John Wornock, thanks for all you've done and we'd appreciate if you'd release some of those fonts.


posted on: 07 September 2006

Helvetica, Arial and Typecasting

filed under:webdesign @ 09:06:31

Anachronistic typography in movies:
and the follow-up: Son of Typecasting

Helvetica vs. Arial:


posted on: 02 September 2006

HTTP authentication

filed under:webdesign @ 10:38:03

I've added a printer friendly button on the studies pages. Some very simple PHP and the bit of mod_rewrite in the .htaccess file to keep the URLs clean. I also found out a way to force IE to forget the credentials used in an Apache based HTTP authentication, making log out possible (see article for details):

<script type="text/javascript">
var agt=navigator.userAgent.toLowerCase();
if (agt.indexOf("msie") != -1) {

Adding also a redirect it's possible to have a log out button that actally acts like a proper one, except that it still prompts for a user and password window that needs to be canceled.
Tested only on Firefox and IE6 running on Windows XP.

Some more about HTTP authentication and .htaccess:


posted on: 23 August 2006


filed under:webdesign @ 20:19:31

I implemented the tags at the end of each post. The script for the tag cloud is also ready but I want first to go backward through the posts to add tags before displaying it on this page..however it's possible to watch it grow.

I don't think that categories and tags are overkill. Categories help me to keep things more organized, only tags would be too insubstantial (if substance has anything to do with a feeling). I will not use the same words for tags and categories.


posted on: 14 August 2006

Design reminders and icon analysis

filed under:webdesign @ 13:30:41

Two very interesting articles on Boxes and Arrows:


posted on: 09 August 2006


filed under:webdesign @ 13:36:42


I periodically re-think my categories and tagging system. I'm still not sure if I should add additional tags at the end of my posts to specify better the topic. The category that gives me most second thoughts is the one I named “interesting”, under which I tend to aggregate all posts that have something to do with art, culture, science and society. I don't think that adding another four categories would be the best solution and those are posts about things I find interesting. So, maybe, a mix of a category and some additional more specific tags in the post could be it.


posted on: 08 August 2006

Kerning, design school and printing

filed under:webdesign @ 11:13:22

Three interesting posts on Noisy Decent Graphics:


posted on: 26 July 2006

Better typography

filed under:webdesign @ 11:10:23

Five simple steps to better typography
five good articles by Mark Boulton

Photoshop type tips
a good tip on how to choose fonts


posted on: 24 July 2006

Always do it for real

filed under:webdesign @ 19:21:01

On Noisy Decent Graphics:
always do it for real

Nice advice on including some reality into the virtual world of web design.


posted on: 22 July 2006

Improving an XML feed

filed under:webdesign @ 11:50:05

On Xefteri:

improving an XML feed display through CSS and XSLT

Not a bad idea, even if I think most people gets the RSS feeds through aggregators or Live Bookmarks on Firefox.


posted on: 19 July 2006

Label placement in forms

filed under:webdesign @ 10:37:09

On UXmatters: label placement in forms

Excessive distances between some labels and their input fields forced users unnecessarily to take more time to interact visually with the form.

based on Luke Wroblewski's article


posted on: 19 July 2006

New layout: softer colors

filed under:webdesign @ 10:03:05

Designing the new layout of my site, I also decided to soften the colors a bit. I'm still using just Blue, Red and a touch of Grey, plus the White background and the Black of text. This were the colors used in the previous version:

Old color palette

And this are the new ones:

New color palette

Basically, I softened the blue (from #0000ff to #3366ff) and substituted the black(#000) with a grey-black(#333).


posted on: 17 July 2006

Regular expressions tools

filed under:webdesign @ 10:06:28

Regular expressions:

  • Regulazy
    a visual Regex creation tool for beginners
  • Regulator
    an advanced, free regular expressions testing and learning tool


posted on: 13 July 2006

New layout: sidebar

filed under:webdesign @ 10:32:22

Second post about the new layout.

The sidebar used to contain links to news and most visited (by me) web design sites, links to the categories of my posts, monthly and year archives, a search posts form and the “metadata” (rss, xhtml and css validation, email contact, web hosting).

Since I have a whole page dedicated to external links, I decided to keep in the sidebar only those internal to my web site. I moved the “metadata” into the footer and the fragments links into the sidebar together with the Delicious and Technorati search forms. I think the navigation is clearer now and the sidebar more efficiently organized.


posted on: 10 July 2006

Logo Misapplication

filed under:webdesign @ 13:40:02

Andy Rutledge: logo misapplication

I believe that the logo is the most abused, misapplied, misconceived, wrongfully distracting element of design and business today. I encounter too many people in business who believe that their logo should define them. The reality is that they should define their logo. For some reason it seems that this business fundamental is lost on most business owners.


posted on: 10 July 2006

CSS Love Child

filed under:webdesign @ 13:34:32

The Man in Blue: CSS Love Child

A little bit of Perl scripting that lets you take the HTML from one page and add the styles of another.

Comments closed due to spam.


posted on: 09 July 2006

New layout: first post bigger

filed under:webdesign @ 12:52:09

This is the first post about the new layout.

At the beginning I wanted to have the latest post bigger and the previous four in a column below, with two more columns beside it, one for the categories and fragments, the other for the archives:

A screenshot of the first tentative layout

I like it, it's compact and easy to grasp. No fancy positioning and not too much clutter but..the problem, for me, is that there is only an excerpt of the previous posts, to read them it's necessary to click and go to the respective permanent link. I think it's better to read at least the first five posts without having to go to another page. So, I decided against it and went for the layout as it is now. The size of the text is bigger on the latest post and for posts seen singularly (permanent link), a bit smaller on the previous ones when seen on the home page. The column on the right holds all the site navigation, except for the four main pages, which I left in the masthead.


posted on: 06 July 2006

Sevencolors new layout

filed under:webdesign @ 20:07:33

Sevencolors new layout:

  1. first post bigger
  2. icons thanks to Mark James of famfamfam
  3. new sidebar
  4. softer color palette
  5. bigger text

These are some of the most important changes in sevencolors layout. I will post about each change after I'm finished checking that everything is all right..


posted on: 06 July 2006

Quotation marks

filed under:webdesign @ 11:02:34

Using proper quotation marks:

  • On a Mac, use Option+] and Shift+Option+] for the left (open) and right (closed) single quotes. For Windows, use ALT 0145 and ALT 0146 for the left and right single quotes (hold down the ALT key and type the numbers on the numeric keypad)
  • On a Mac, use Option+[ and Shift+Option+[ for the left and right double quotes. For Windows, use ALT 0147 and ALT 0148 for the left and right double quotation marks (curly quotes)
  • In HTML code the characters as &#0145; for and &#0146; for and &#0147; for and &#0148; for (ampersand, pound sign, number, semi-colon)
  • The Unicode numeric entities of &#8216; for and &#8217; for and &#8220; for and &#8221; for (ampersand, pound sign, number, semi-colon)

When using the ALT keystrokes in Windows, use the numeric keypad not the row of numbers above the alphabet and be sure Num Lock is turned ON.

There are some important differences between Windows and non-Windows display of characters:
on the use of some MS Windows characters in HTML


posted on: 03 July 2006

Current issues with Microformats

filed under:webdesign @ 10:35:27

On Friendly Bit: current issues with Microformats


posted on: 29 June 2006

Cross browser text size

filed under:webdesign @ 19:09:19

On cross browser text size:

Personally I set the font size in the body at 80% and use percentage values for everything else (p 100%, h2 100%, h3 90%), no ems.


posted on: 29 June 2006

The future of graphic design

filed under:webdesign @ 10:17:04

Three posts on graphic design by Noisy Decent Graphics:


posted on: 29 June 2006

Misunderstanding web standards

filed under:webdesign @ 10:09:23

An interesting list: 9 ways to misunderstand web standards


posted on: 28 June 2006

Web browser standards support

filed under:webdesign @ 19:44:51

On webdevout: Web browser standards support


posted on: 28 June 2006

Tiny realignment

filed under:webdesign @ 10:34:02

I noticed that I had forgotten to add an anchor to the comments for linking purposes. Not that I get that many comments to link to..I just did it as a matter of functionality. I also tightened up the paragraphs a bit adding a margin:8px 0 to the CSS. One of those..


posted on: 26 June 2006

Navigational metaphor and tooltips

filed under:webdesign @ 11:16:08

On Interconnected: making senses

On Clagnut: line breaks in tooltips


posted on: 24 June 2006

Microformats and browsers

filed under:webdesign @ 18:57:24

Microformats and browsers:


posted on: 24 June 2006

Google ranking factors

filed under:webdesign @ 10:36:23

A list of Google ranking factors


posted on: 23 June 2006

Transparent custom corners and borders

filed under:webdesign @ 18:59:08

On 456 Berea St :transparent custom corners and borders


posted on: 22 June 2006

50 ways to become a better designer

filed under:webdesign @ 10:58:06

On Computer Arts:
50 ways to become a better designer


posted on: 21 June 2006

URLs structure changed

filed under:webdesign @ 14:19:08

Following yesterday's post I changed my URLs structure. Now they read:

I have written the code to keep backward compatibility: posts bookmarked with the previous structure will not be broken.


posted on: 20 June 2006

URL structure

filed under:webdesign @ 18:47:29

Graphic Push has an interesting article about URL structure

My URLs read like this:

which, thinking about it, only says that is a post and its number. I have noticed the spreading habit of using the title of the post and I think it makes sense. I use the post part because I have different categories. Maybe I will substitute the number with the post title..


posted on: 20 June 2006

High resolution and CSS units

filed under:webdesign @ 18:43:49

On 456 Berea St :high resolution screen

Which, in turn, got me to find out about CSS units


posted on: 20 June 2006

Behavioral Separation

filed under:webdesign @ 16:03:45

On A List Apart: behavioral separation

I just posted about it but I think is good to insist.

The other article on A List Apart is about styling forms but I think that the solution proposed is too complicated. I like to keep it simpler. Also, display:inline-block does not validate.


posted on: 18 June 2006

Four tier web development

filed under:webdesign @ 13:08:58

On Friendly Bit: 4 tier web development

I think of the 4 tiers as content, structure, presentation and behaviour. Almost the same. The content (or data) and the structure go together since, usually, there is (for example) a title that should be placed into a <h1> tag, chapters into <h2> etc. When it all looks readable without presentation then I add the design, using CSS. I don't like to add tags to accomodate design, I try to use only the tags necessary to the structure. The last layer (behaviour) should be unobtrusive, which basically means that is not mixed up with the structure but sits in an external file. I removed all inline Javascript calls after reading
separating behaviour and structure in 2004. The point of all this is just to build a site easy to update and apply changes to.


posted on: 17 June 2006

Design details

filed under:webdesign @ 18:50:27

Garrett Dimon

"will be using a newly created flickr account to store and document the reviews (of web sites design details) in sets"

A very interesting idea.


posted on: 17 June 2006

Beginners guide to CSS and standards

filed under:webdesign @ 18:38:46

On Friendly Bit:
beginners guide to CSS and standards


posted on: 12 June 2006

Style attributes, SEO, forms

filed under:webdesign @ 10:10:28

A few articles from 456 Berea St. :


posted on: 07 June 2006

Internationalization primer

filed under:webdesign @ 10:15:28

On Digital Web: internationalization primer


posted on: 30 May 2006

Breadcrumbs in web navigation

filed under:webdesign @ 09:24:36

On Angela Colter's web site:
breadcrumbs in web navigation


posted on: 26 May 2006

Internationalization and localization

filed under:webdesign @ 10:58:28

On A List Apart:
internationalization and localization


posted on: 02 May 2006

Colour contrast check

filed under:webdesign @ 11:01:22

A tool that allows to specify a foreground and a background colour and determine if they provide enough of a contrast:

colour contrast check


posted on: 27 April 2006

Future web and language tags

filed under:webdesign @ 09:37:28

On Digital Web Magazine: Build for the Future

On 456 Berea St:


posted on: 26 April 2006

Colors On The Web

filed under:webdesign @ 15:16:22

ColorsOnTheWeb is a site dedicated to the use of colors on the web. It has a couple of useful tools to generate matching colors to any one color submitted and random color combinations.


posted on: 23 April 2006

Color schemes

filed under:webdesign @ 18:49:37



posted on: 21 April 2006

Accessible not boring

filed under:webdesign @ 14:07:42 "will prove that accessible, usable websites built with universality and standards in mind need not be boring. We will show you stunning works of art crafted by some of todayís most progressive accessible web developers and designers. Join us in honoring them and the sites they meticulously and lovingly build"


posted on: 20 April 2006

Web design articles

filed under:webdesign @ 18:26:33

On DigitalWeb: Principles and Elements of Design

On Vitamin: How C.R.A.P is Your Site Design?


posted on: 18 April 2006

Cheat sheets and CSS techniques

filed under:webdesign @ 09:01:33

On Pete Freitag's web site:


posted on: 17 April 2006

Visual thinking

filed under:webdesign @ 21:11:45

Jason Santa Maria: visual thinking


posted on: 15 April 2006

Alt text

filed under:webdesign @ 18:55:23

On 456 Berea Street: alt text is an alternative, not a tooltip


posted on: 09 April 2006

Back online

filed under:webdesign @ 12:10:33

I changed a few things as a result of the Naked CSS Day. I took away the legend for the external links symbol, it was close to the date of the post and without CSS it looked messy and unclear.


posted on: 05 April 2006

CSS naked day

filed under:webdesign @ 10:32:44

Nice idea: CSS naked day


posted on: 31 March 2006

Logo design

filed under:webdesign @ 19:18:02

On Authentic Boredom a nice logo design article by Cameron Moll.


posted on: 23 March 2006

Nifty Corners,Yahoo site explorer and WCAG 2.0

filed under:webdesign @ 13:50:18

Via Web-graphics: nifty corners by Alessandro Fulciniti

Yahoo's site explorer "allows you to explore all the web pages indexed by Yahoo! Search"

An essential guide to understanding and using
Web Content Accessibility Guidelines 2.0


posted on: 21 March 2006

Realignments and redesign

filed under:webdesign @ 09:28:18

I have been following Simplebits's realignment because that's what I also do. I didn't know it had a name and it was actually something people wrote about. I tend to tweak the layout even if just a few pixels at the time, trying to find the best balance in the position between every "piece" of my site. I'm now trying to modify my logo to give it a less stark appearance, I'd like it a bit softer. So far no joy..The most important thing for me, though, is the clarity of presentation. I get often "lost" looking for posts and articles on many web sites. For example, And All That Malarkey is a site I visit often and every time it takes a lot of scrolling up and down, reading all over the page trying to locate the interesting bits and what's new. A List Apart, it doesn't stay inside my window, it goes out laterally and I have to scroll sideways to read topics and part of the main menu. Many web logs have a recent comments section, confusing for me that surf quite a lot and hand coded all my site, never mind for some occasional user..My point is, content is first, then comes an easy presentation so that anybody visiting the web site for the first time doesn't have to scroll all over the place and read tons of stuff just to understand what is where. I like Simplebits because is fairly straightforward, even if why a notebook? Why not just notes then? Maybe it seems not so clear to me just because English in not my first language. Web-graphics is another easy-to-use web site. Anyway, for me, efficiency is the key word, simple and interesting are the goals.


posted on: 13 March 2006

Font Freedom, Logos of Web 2.0 and Picture Cloud

filed under:webdesign @ 14:01:23

On Be A Design Group: five steps to font freedom

On FontShop: The Logos of Web 2.0

Picture Cloud free 360 degrees images.


posted on: 07 March 2006

Replacing trackback and Lightbox gone wild

filed under:webdesign @ 19:16:44

On Particletree:

Very nice. I downloaded the files and I'm going to study them to see how it's done.


posted on: 07 March 2006

Netdiver Best of the Year 2005

filed under:webdesign @ 09:05:48

Netdiver best of 2005


posted on: 06 March 2006

CSS photo gallery and removing dotted links

filed under:webdesign @ 13:52:38

On Sonspring:


posted on: 03 March 2006

CSS layouts and web authoring statistics

filed under:webdesign @ 19:20:13

Forty layouts based on the same markup, each with valid CSS and HTML, without hacks nor workaround and a good cross-browser compatibility: layout gala

Google code: web authoring statistics


posted on: 25 February 2006

The Style Layer

filed under:webdesign @ 14:10:32

On UX Magazine:
The Layers of Design: the style layer


posted on: 23 February 2006

Color Theory for Digital Displays

filed under:webdesign @ 10:04:03

Color Theory for Digital Displays:


posted on: 21 February 2006

Character encodings

filed under:webdesign @ 14:18:23

W3C character encodings in the Internationalization activity section:


posted on: 20 February 2006

MySQL Fulltext indexing

filed under:webdesign @ 10:29:43

MySQL Fulltext indexing: Dissecting MySQL Fulltext Indexing and
Implementation and Application of Term Weights.

Since the posts search on this site works using MySQL Fulltext indexing I found myself trying to delve a bit deeper into it. I cannot say that everything is as clear as it could/should be, for me anyway..


posted on: 16 February 2006

Usability testing and SEO

filed under:webdesign @ 13:13:52

On Digital Web Magazine: Practical Usability Testing

On Evolt: SEO For The Big Three


posted on: 13 February 2006

Variable fixed width and front-end architects

filed under:webdesign @ 13:28:43

On Clagnut: Variable fixed width

Garret Dimon: Front-End Architects


posted on: 10 February 2006

Unitless line-heights

filed under:webdesign @ 19:51:00

On Meyerweb: unitless line-heights.


posted on: 09 February 2006 and Technorati search forms

filed under:webdesign @ 13:35:03

I added two tags search "forms" for and technorati. Since the functioning of the "forms" is based on Javascript, the "forms" are created using the DOM so that, if Javascript is not enabled, they just don't appear.

I use Firefox and I have the search form in the toolbar but when I'm not using my computer I have to go to the web site or type the full address for the search. Now I can do it from anywhere as long as I have access to my web site.


posted on: 08 February 2006

Accessibility mistakes part 2

filed under:webdesign @ 15:25:12

On Digital Web: seven accessibility mistakes - part 2
link to the first part


posted on: 05 February 2006

Designing a website

filed under:webdesign @ 09:53:04

On A List Apart:

Simple points that need to be remembered because it's easy to underestimate their importance.


posted on: 02 February 2006

The color Blue

filed under:webdesign @ 19:46:34

Design Melt Down on the use of Blue on the web.


posted on: 01 February 2006

Accessibility mistakes and IE7 beta 2

filed under:webdesign @ 19:47:02

On Digital Web: seven accessibility mistakes - part 1

Also, it's now possible to download a pre-release software of Internet Explorer 7 : Beta 2


posted on: 23 January 2006

DIV vs. Lists

filed under:webdesign @ 14:00:34

It makes sense and it degrades nicely (see examples , links provided):

DIVless layouts


posted on: 22 January 2006

Abbreviations compliance and compatibility

filed under:webdesign @ 13:32:47

On A List Apart:

Getting abbreviations right


posted on: 21 January 2006


filed under:webdesign @ 18:52:24

I added a link to 24ways in the links list. This is Drew McLellan post about doing it.


posted on: 18 January 2006

Web 3.0

filed under:webdesign @ 16:59:52

An article by Jeffrey Zeldman on A List Apart :

Web 3.0

The development of new technologies on the web is very fast. For me is difficult to keep up with it even if I have to say that I find AJAX interesting. The point for me is always the same: keep things simple and easy to use. Most people have a very basic understanding of web techology and just need to use the Internet to find what they are interested in. The trend factor is stupid and usually brings bad and confusing results. Part of it is also the general way of thinking nowadays: fast consumption, no trace left afterwards. I also think that what will be done properly will stay around and bring a positive effect into that very open, shape-changing reality the web is.


posted on: 16 January 2006

Free icons

filed under:webdesign @ 13:57:47

Free icons to download:



posted on: 29 December 2005

Forms,typefaces and Zs

filed under:webdesign @ 20:10:30


posted on: 16 December 2005

The anatomy of web fonts

filed under:webdesign @ 21:05:35

An article on Sitepoint about web fonts:

Anatomy of web fonts.


posted on: 15 December 2005

Transitional vs. Strict and 2006 web trends

filed under:webdesign @ 20:12:13

From 24 ways an article on Transitional vs. Strict Markup by Roger Johansson.

Andy Budd on Web Design and Development Trends for 2006.

Two years:

Happy Birthday XFN!


posted on: 11 December 2005

Typography on the Web

filed under:webdesign @ 11:17:18

The Elements of Typographic Style Applied to the Web. A practical guide to web typography:


posted on: 09 December 2005

Useful links

filed under:webdesign @ 19:36:39

A few useful links:


posted on: 06 December 2005

Sevencolors new logo

filed under:webdesign @ 20:49:54

I wanted a logo that conveyed the meaning of this web site and this is what I came up with:

sevencolors logo

The O becoming a broken circle with an arrow pointing out symbolizes the communication between people, an opening of the mind that brings change and that's why the color is different. The name itself (seven colors on a spinning wheel become white, white light passing through a prism splits into seven colors) stands for multiplicity that becomes unity, the capacity of different entities to coexist and actually learn from each other. The circles and arrows also symbolize the World Wide Web and its huge potential for connecting people and circulating ideas freely.


posted on: 21 November 2005

Microformats explained

filed under:webdesign @ 17:06:47

In a previous post I had already introduced the concept of Microformats, now there is an article on Digital Web Magazine that explains what they are and how they work. As usual, on the web, technologies are moving and changing fast.


posted on: 19 November 2005

WebPatterns and WebSemantics

filed under:webdesign @ 19:15:19

An interesting article: WebPatterns and WebSemantics

Lots to read about this subject.


posted on: 07 November 2005

Scripts and tips

filed under:webdesign @ 17:42:11

Scripts based on the Prototype Javascript framework, visual effects and controls with AJAX:

On Evolt, some useful PHP tips: these things I know.


posted on: 19 October 2005

Variables scope and free fonts

filed under:webdesign @ 13:47:57

An interesting article on variables scope and free fonts via this mezzoblue post.


posted on: 13 October 2005

Userscripts, window.onload and mod_rewrite

filed under:webdesign @ 10:03:09

Through Simon Willison's weblog:



posted on: 12 October 2005

Simply accessible

filed under:webdesign @ 10:21:51

Designing for accessibility is not just a technical endeavour like most other pursuits on the web, it involves creative problem solving and experimentation


posted on: 10 October 2005

Cheat sheets update

filed under:webdesign @ 09:38:44

An HTML character entities cheat sheet has been added to the previous ones:


posted on: 08 October 2005

XMLHTTP, Deep Web and brushes

filed under:webdesign @ 09:31:47


posted on: 14 September 2005

Firefox 1.5 Beta 1

filed under:webdesign @ 19:16:39

Firefox 1.5 Beta 1 has been released.

This Simon Willison's post highlights all the new features.


posted on: 29 August 2005

Meta data

filed under:webdesign @ 10:08:13

I came across an interesting article:

" The intent of using a centralized metadata repository as the basis of navigation for a website is to separate business concepts from the content or functionality about those concepts. "

Then, in the news, a staggering scientific discovery:

Well, that's some advanced theory...


posted on: 26 August 2005

WordPress themes

filed under:webdesign @ 18:51:00

I switched to the WordPress themes "system", until today I had been using my old template from the previous WordPress version. I wrote my own CSS and modified some code to accomodate my design.

The way it all works is well thought out, easy to understand if you know a bit of XHTML, PHP and CSS and if not there are many ready to use themes to choose from.


posted on: 25 August 2005

ALA 4.0

filed under:webdesign @ 11:42:05

A List Apart 4.0 is up and running:

" New design. New structure. New server. New publishing system powered by Ruby on Rails. As the dog days of summer draw to a close, we present A List Apart 4.0 "


posted on: 23 August 2005

Upgraded again (WordPress 1.5.2)

filed under:webdesign @ 09:56:46

I upgraded again.

I really hope that I will not have to do it for a while because every time is a pain. I have a dial-up connection, it takes time to download and re-publish everything. Then I must be online to make my site look the way I want and the all thing becomes an expensive process.

I'm seriously thinking of writing my own code and be done with it. I use one tenth of all the WordPress features anyway.

I set up the whole WordPress thing on my local machine so I can work on it without being online..


posted on: 21 August 2005

Web design

filed under:webdesign @ 10:56:54

Design in-flight:

" Design In-Flight (DiF) is an online magazine devoted to art and design, be it graphic design, web design, illustration or architecture. Our mission is to entertain and inform, while encouraging dialogue with our readers and the design community. "

Also, check out Glen Murphy and Jeff Han.

Even if I have visited Jon Hicks 's portfolio many times, it is always a pleasure to look at his work and Denis Radenkovic 's.

I haven't been able to watch it because I have a poor-man dial-up connection but , if you have a high speed machine, go ahead and then let me know: the unseen video


posted on: 10 August 2005

Cheat sheets

filed under:webdesign @ 20:51:49

I found cheat sheets for Javascript, CSS, MySQL, mod_rewrite,PHP and an RGB Hex colour chart:

They all come in PNG or PDF format "designed to be printed on an A4 sheet of paper and live by a developers desk".



posted on: 04 August 2005

Updated to WordPress

filed under:webdesign @ 10:52:54

I just finished updating to WordPress I got hacked in twice (through that XMLRPC file) so I had no choice. Using a modem connection it took quite a while to download the new files, delete the old files and then upload again the all thing..

Once I'm finally done I check out how my index page looks and...there is nothing, not even one single tag showing. After much looking around I found out that I had to erase

 < ?php include(ABSPATH . 'wp-comments.php'); ?>

and replace it with

 < ?php comments_template(); ?> 

Now, so far, everything works.


posted on: 02 August 2005


filed under:webdesign @ 09:57:41

I have found the explanation to what happened to my index page a few days ago:

WordPress has in the meanwhile released a new version of their software, I suppose I could just upgrade it. It seems, though, that doing that I will also have to re-do all the templates (basically the way my index page looks). I have very little time so I'll see if it's possible to upgrade without messing with the appearance of my site.


posted on: 28 July 2005

XMLRPC script exploited

filed under:webdesign @ 09:38:14

Yesterday, after having covered a few thousand kilometers, I arrive back home and get online. I go to my home page (this one, the log) and all I can see is:

Un-Root - fernando em sua homenagem rs

I send an email to my host (dreamhost) and as usual I got a very fast reply from them:

That's all that is in your index.php file. It looks like it was modified yesterday at 1:30pm PDT. It looks like someone exploited your xmlrpc.php script.

What's the point ? If Fernando is having fun like that, I think Fernando has very little to do. He must have skills (I wouldn't know how to do something like that) so why not use them for something useful ? As far as I'm concerned I will go and find out about xmlrpc so maybe Fernando has done something useful after all, “teaching&8221; me a new thing.


posted on: 13 July 2005

SMS technology

filed under:webdesign @ 09:41:23

I've been looking into SMS and HTTP. I'm trying to understand how all that works and what can be done with it. So far, it seems that there is always need for a gateway and they make you pay..

There also a few web sites specifically targeting SMS technology:


posted on: 03 July 2005

TopXML reblogger

filed under:webdesign @ 10:52:15

Reblogger is a free aggregator service provided by TopXML. We collect XML blog items four times a day from around the web, so that you can view all the most interesting and most useful news right here in our reblogger.


posted on: 02 July 2005

Accessibility guidelines and color palettes

filed under:webdesign @ 09:37:38

WCAG 2.0 documents via Access Matters

An interesting article on And All That Malarkey about creating color palettes and links to two more:


posted on: 24 June 2005


filed under:webdesign @ 18:59:02

Microformats have their own site on which there is a link to an explanation of what they are.

Also, May 1st Reboot 2005 is finished.


posted on: 12 June 2005

&apos; and Internet Explorer

filed under:webdesign @ 12:05:43

It's old news, I know, but it's also useful to have a link to the complete ISO Latin-1 Character Set for Internet Explorer 4.0 and later to avoid seeing an ugly &apos; instead of the intended apostrophe.

For whoever does not know what I'm talking about, Internet Explorer does not support the &apos; entity added to the XHTML 1.0 specifications (since ' is an XML entity), which means that insted of showing an apostrophe it shows just &apos;

Use &#39; whenever you need an apostrophe and everything will be all right.


posted on: 21 May 2005

Fonts and Javascript triggers

filed under:webdesign @ 19:24:22

I found a good article on fonts on the New York Times.

I had a doubt, after taking all my Javascript calls off the XHTML, about using the class attribute to determine the behaviour of each link. Now that same doubt is being discussed. I know about DTDs because I'm interested in XML and I have written DTDs before. I'll follow the discussion and see where it goes..

More about DTD:


posted on: 14 April 2005


filed under:webdesign @ 14:37:27

One of the problems I'm having using XML is that I almost always have code samples included in the text of my studies and I have to use entities for everything. I'd rather use a TEXT file and parse it with document.innerHTML, much simpler and faster. Maybe is not very professional or reusable in the future (even if I think TEXT files will always be in use) as an XML file would be but it works fine.


posted on: 15 February 2005

Photoshop - unsharp mask

filed under:webdesign @ 14:47:42

On Cameron Moll's web site there is an interesting article on the use of “Unsharpen Mask” in Photoshop.

It does make a practical difference and the comments also offer different techniques to achieve the same result.


posted on: 15 January 2005

New layout: almost done

filed under:webdesign @ 13:58:14

I have almost finished with the new layout. Almost because I keep finding out things that need to be fixed but that's normal when re-doing a whole site..except that during the process I actually managed to erase everything I had done and had to reinstall WordPress! Fortunately I had backup files so it did not became a big drama just a minor case of cold sweat.


CSS,Javascript and Php studies

Anti spam email
A solution to writing an anti spam email contact link
filed under: Javascript
Background image
A background image randomizer that I used in the second version of this site.
filed under: Javascript/CSS
Javascript menu
A menu that uses Javascript and session cookies.
filed under: Javascript/CSS
Experimenting with CSS and Javascript.A simple but, in my opinion, nice navigation “system”. The MiniSite is a one page site.
filed under: Javascript/CSS
Photo display
Protect copyrighted photos: a simple but effective solution.
filed under: Javascript/CSS
Photo gallery
A photo gallery made for a friend
filed under: Javascript
PHP menu
A PHP menu that can be updated without having to re-publish all the pages is on.
filed under: PHP
Pop-up menu
A very simple pop up menu powered by Javascript. It works also if Javascript is disabled.
filed under: Javascript/CSS
RSS feed
How to write and use an RSS feed
filed under: rss-xml
Tag replacer
The Tag replacer explained and a link to it.
filed under: PHP
Tags search
A search form build and powered using Javascript and the DOM
filed under: Javascript