Notes on a web journey

“ 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