On VANDELAYDESIGN :

35 Photoshop Tutorials for Designing Your Own Posters

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

Sunday Type: ornament type

A nice tool:

Tiled backgrounds designer

On Lifehacker:

Top 10 Free Wallpaper, Fonts and Icon Sources

A PNG transparency fix for IE6:

Unit PNG Fix

Via noupe.com:

40+ Extremely Beautiful FONTS from deviantART

An accessibility checklist by Aaron Cannon:
Accessibility checklist via cameronmoll.com

“ 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.”

LOGO DESIGN BASICS: THE FIVE TYPES OF MARKS

“ 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

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

Another post on Authentic Boredom :

Techniques for designing with type characters

A very beautiful way of using characters.

“ 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.”

Mediatyping

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

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 http://famfamfam.com), 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.

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

“ 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?

“ 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.”

welie.com

“ 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

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.

On A List Apart:

Beyond DOCTYPE: Web Standards, Forward Compatibility, and IE8

From Switches to Targets: A Standardista's Journey

On VirtualHosting :

23 Actionable Lessons from Eye-Tracking Studies

“ 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.”

Stripemania

Two articles on WebDesignerWall:

Typographic Contrast and Flow

Vector Polishing Techniques

“ 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.”

Design

Free web tools including webmaster tools:

Web tools

Via Veerle's blog:

Design By Grid on designing grid based websites

Two articles on 24ways:

Typesetting Tables by Mark Boulton

Transparent PNGs in Internet Explorer 6 by Drew McLellan

On askApache :

Smart HTTP and HTTPS RewriteRule Redirects

“ 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

Web Design Survey 2007 on A List Apart:

Findings From the Web Design Survey

On 456 Berea St.

10 colour contrast checking tools

“ 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

On Subtraction :

This Way to the Web

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

40 sources

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

Top 50 Logo Design Tutorials

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

Icon Design: Anti-Aliasing

A nice article on web design on Vitamin:

Web design-isms

“ 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

By Mark Boulton:

Incremental leading

“ 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

“ 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

On Digital Web Magazine:

• Backgrounds
• Creative use of PNGs

On Vitamin :

The Standards Way to Do Dynamic Data

On Sitepoint :

The Principles of Beautiful Web Design

On Digital Web Magazine :

Coding for Content

“ 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

“..an 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

“ 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

“ 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

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()

“ 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

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

More on grid layout:

Five simple steps to designing grid systems

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

Oh Yeeaahh!

On Digital Web Magazine :

Redesigning the ExpressionEngine Site

On Coding Horror :

Primary Keys: IDs versus GUIDs

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

“ ..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..

On icon design:

• Icon Design: Bitmap vs Vector
• Icon Design: Sizing

A collection of Web 2.0 logos:

The complete Web 2.0 directory

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

Web Building Tips

On Array Studio Workshop:

MySQL insert a new row or update old one

A post by Mark Boulton about design and art:

One Principle to Design By

On Digital Web Magazine :

Better Font Management

On nefariousdesigns:

Semantics and Structure

On Bokardo:

Five Principles to Design By

On Sitepoint:

The Joy of Regular Expressions [4]

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

“ 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

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

“ 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?

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

Colour combinations

The book: Five Simple Steps: Designing for the Web

On webtypography.net:

Indent or center verse quotations

On 456 Berea St.:

7 accessibility mistakes

Via NoisyDecentGraphics:

• The BBC's Fifteen Web Principles
• renourish

On perishablepress:

htaccess tricks

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

current web style

“ 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

A post on Noisy Decent Graphics:

Two brilliant pieces of graphic design

Paper prototyping and Photoshop CSS mockups:

• Paper Prototyping
• Quick CSS Mockups with Photoshop

“ 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

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

Whitespace

One more cheat sheet from ILoveJackDaniels:

HTML cheat sheet

Three article typography related on iA:

The 100% Easy-2-Read Standard

Web Design is 95% Typography (1)

Web Design is 95% Typography (2)

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

float flummox

Reminders of floating techniques are always good..

On Ideasonideas:

Five foundries

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

On Authentic Boredom:

summarize a project in one sentence

Interesting comments.

On Digital Web Magazine:

Color: an investigation

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

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

Via Ace Jet 170:

• Science & Society - picture library
• Ken Garland

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

• False accessibility claims
• CSS Validator colour warnings
• Push my button

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.”

“ 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

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):

• Design by Fire: open letter to John Warnock
  the original request by Andrei Herasimchuk
• Clagnut: on fonts for the web
• Cameron Moll:
  typefaces no one gets fired for using (an aside)

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

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

Helvetica vs. Arial:

• The scourge of Arial
• How to spot Arial
• Arial or Helvetica? (quiz)

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) {
document.execCommand("ClearAuthenticationCache");
}
</script>

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 1.5.0.6 and IE6 running on Windows XP.

Some more about HTTP authentication and .htaccess:

• HTTP user authentication
• Authentication, Authorization and Access Control
• Securing Your Web Pages with Apache
• A Guide to Web Authentication Alternatives

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.

Two very interesting articles on Boxes and Arrows:

• The Elements of Style for Designers
  translating writing reminders into design reminders
• Icon Analysis
  an icon search task that lasts longer than anticipated can result in user annoyance

Tagging:

• Ontology is overrated: categories, links, and tags
• The structure of collaborative tagging systems PDF
• Folksonomies
• A cognitive analysis of tagging
• A social analysis of tagging

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.

Three interesting posts on Noisy Decent Graphics:

• overdue kerning homework
• 10 things they never taught me in design school
• 30 things about printing, ideas and stuff

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

Photoshop type tips
a good tip on how to choose fonts

On Noisy Decent Graphics:
always do it for real

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

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.

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

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:

And this are the new ones:

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

Regular expressions:

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

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.

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.”

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:

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.

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..

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

On Friendly Bit: current issues with Microformats

On cross browser text size:

• Reminder: Cross browser font sizes
• Text Sizing
• Default Font Size: The Battle is Won
• Font 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.

Three posts on graphic design by Noisy Decent Graphics:

• The future of graphic design
• The future of graphic design [2]
• The future of graphic design [3]

An interesting list: 9 ways to misunderstand web standards

On webdevout: Web browser standards support

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..

On Interconnected: making senses

On Clagnut: line breaks in tooltips

Microformats and browsers:

• Microformats in Web Browsers
• Safari Microformats plugin

A list of Google ranking factors

On 456 Berea St :transparent custom corners and borders

On Computer Arts:
50 ways to become a better designer

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

http://sevencolors.org/post/post-title

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

Graphic Push has an interesting article about URL structure

My URLs read like this:

http://sevencolors.org/post/###

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..

On 456 Berea St :high resolution screen

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

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.

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.

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.

On Friendly Bit:
beginners guide to CSS and standards

A few articles from 456 Berea St. :

• style attributes and strict XHTML
• basics of SEO
• styling form controls

On Digital Web: internationalization primer

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

On A List Apart:
internationalization and localization

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

colour contrast check

On Digital Web Magazine: Build for the Future

On 456 Berea St:

• Indicating language choice
• Language tags in HTML and XML

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.

Colors:

• Color Scheme Generator on wellstyled.com
• Colour Schemes on mezzoblue.com

Accessites.org "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"

On DigitalWeb: Principles and Elements of Design

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

On Pete Freitag's web site:

• Cheat Sheet roundup
• CSS Techniques roundup

Jason Santa Maria: visual thinking

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

Nice idea: CSS naked day

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

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

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.

On Be A Design Group: five steps to font freedom

On FontShop: The Logos of Web 2.0

Picture Cloud free 360 degrees images.

On Particletree:

• replacing trackback
• Lightbox gone wild

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

Netdiver best of 2005

On Sonspring:

• hoverbox image gallery
• removing dotted links

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

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

Color Theory for Digital Displays:

• A Quick Reference: Part I
• A Quick Reference: Part II

W3C character encodings in the Internationalization activity section:

• Character encodings
• Character sets & encodings in XHTML, HTML and CSS (tutorial)

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..

On Digital Web Magazine: Practical Usability Testing

On Evolt: SEO For The Big Three

On Clagnut: Variable fixed width

Garret Dimon: Front-End Architects

On Meyerweb: unitless line-heights.

I added two tags search "forms" for del.icio.us 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 del.icio.us 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.

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

On A List Apart:

• Home page goals
• Use cases

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

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

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

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

DIVless layouts

On A List Apart:

Getting abbreviations right

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

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.

Free icons to download:

icons

• Sensible forms
• Typeface selection
• Z's not dead

An article on Sitepoint about web fonts:

Anatomy of web fonts.

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!

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

A few useful links:

• Internet country codes
• 10 Places You Must Use Ajax
• 24 ways to impress your friends by Drew McLellan
• Top 10 custom JavaScript functions of all time

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

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.

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.

An interesting article: WebPatterns and WebSemantics

Lots to read about this subject.

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

script.aculo.us

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

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

Through Simon Willison's weblog:

userscripts.org

Then:

• window.onload
• window.onload 2
• clean URLs

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

simplyaccessible.org

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

• HTML character entities cheat sheet
• Cheat sheets HTML characters, JavaScript, MySQL, mod_rewrite, CSS, PHP, RGB Hex

• XMLHTTP notes: readyState and the events
• How to Search the Invisible Web very useful, plenty of links from there
• Worn brushes

Firefox 1.5 Beta 1 has been released.

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

I came across an interesting article:

• metadata-based website

" 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:

• Researchers: starving won't make people live longer

Well, that's some advanced theory...

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.

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 "

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..

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

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

• cheat sheets

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

Thanks.

I just finished updating to WordPress 1.5.1.3. 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.

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

• XML-RPC for PHP

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.

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.

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..

• Sending SMS Thru HTTP
• SMS on PHP Classes
• SMS Application Development

There also a few web sites specifically targeting SMS technology:

• developershome
• bestkeptsimple
• textually plenty of links from there

“ 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.”

WCAG 2.0 documents via Access Matters

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

• Color palette tool
• CSS colors: take control using PHP

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.

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.

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:

• W3schools DTD tutorial
• ALA DTD article
• Zvon.org DTD tutorial

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.

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.

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.