Notes on a web journey

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

tags:

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

tags:

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.

tags:

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.

Mediatyping

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

tags:

posted on: 29 March 2008

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

tags:

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

tags:

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?

tags:

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.

welie.com

tags:

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

tags:

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.

tags:

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

tags:

posted on: 13 January 2008

Eye-Tracking studies

filed under:webdesign @ 13:20:06

On VirtualHosting :

23 Actionable Lessons from Eye-Tracking Studies

tags:

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.

Stripemania

tags:

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

tags:

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.

Design

Free web tools including webmaster tools:

Web tools

tags:

posted on: 17 December 2007

Grids

filed under:webdesign @ 09:27:11

Via Veerle's blog:

Design By Grid on designing grid based websites

tags:

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

tags:

posted on: 06 December 2007

HTTP and HTTPS RewriteRule

filed under:webdesign @ 19:19:21

On askApache :

Smart HTTP and HTTPS RewriteRule Redirects

tags:

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

tags:

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

tags:

posted on: 27 September 2007

Colour contrast

filed under:webdesign @ 10:02:32

On 456 Berea St.

10 colour contrast checking tools

tags:

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

tags:

posted on: 03 September 2007

From print to web

filed under:webdesign @ 09:49:09

On Subtraction :

This Way to the Web

tags:

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

tags:

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

tags:

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

tags:

posted on: 05 July 2007

Design patterns

filed under:webdesign @ 19:23:06

A nice article on web design on Vitamin:

Web design-isms

tags:

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

tags:

posted on: 23 June 2007

Incremental leading

filed under:webdesign @ 18:57:03

By Mark Boulton:

Incremental leading

tags:

posted on: 20 June 2007

Design,css,fonts

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

tags:

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

tags:

posted on: 01 June 2007

Backgrounds and PNGs

filed under:webdesign @ 10:57:21

On Digital Web Magazine:

tags:

posted on: 10 May 2007

Dynamic data

filed under:webdesign @ 09:01:22

On Vitamin :

The Standards Way to Do Dynamic Data

tags:

posted on: 03 May 2007

Beautiful web design

filed under:webdesign @ 09:19:08

On Sitepoint :

The Principles of Beautiful Web Design

tags:

posted on: 28 April 2007

Focus on content

filed under:webdesign @ 09:21:06

On Digital Web Magazine :

Coding for Content

tags:

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

tags:

posted on: 24 April 2007

Software security

filed under:webdesign @ 19:04:26

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

tags:

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

tags:

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

tags:

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

tags:

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

tags:

posted on: 26 March 2007

Uncommon knowledge 3

filed under:webdesign @ 13:32:08

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

tags:

posted on: 24 March 2007

Grid systems

filed under:webdesign @ 09:56:09

More on grid layout:

Five simple steps to designing grid systems

tags:

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!

tags:

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

tags:

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.

tags:

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

tags:

posted on: 18 March 2007

Icon Design

filed under:webdesign @ 11:10:03

On icon design:

Icons

tags:

posted on: 17 March 2007

Web 2.0 logos

filed under:webdesign @ 19:47:41

A collection of Web 2.0 logos:

go2web20.net screenshot

The complete Web 2.0 directory

tags:

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

tags:

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

tags:

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

tags:

posted on: 13 March 2007

Font management

filed under:webdesign @ 12:59:03

On Digital Web Magazine :

Better Font Management

tags:

posted on: 11 March 2007

Semantics and structure

filed under:webdesign @ 11:05:09

On nefariousdesigns:

Semantics and Structure

tags:

posted on: 11 March 2007

Design principles

filed under:webdesign @ 11:03:27

On Bokardo:

Five Principles to Design By

tags:

posted on: 10 March 2007

Regex

filed under:webdesign @ 20:00:21

On Sitepoint:

The Joy of Regular Expressions [4]

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

tags:

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

tags:

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

tags:

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?

tags:

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

tags:

posted on: 09 February 2007

Verse quotations

filed under:webdesign @ 09:07:01

On webtypography.net:

Indent or center verse quotations

tags:

posted on: 09 February 2007

Accessibility mistakes

filed under:webdesign @ 09:04:51

On 456 Berea St.:

7 accessibility mistakes

tags:

posted on: 08 February 2007

Web and graphics design

filed under:webdesign @ 19:30:05

Via NoisyDecentGraphics:

tags:

posted on: 31 January 2007

Htaccess tricks

filed under:webdesign @ 09:50:22

On perishablepress:

htaccess tricks

tags:

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

tags:

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

tags:

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

tags:

posted on: 24 January 2007

Prototyping and mockups

filed under:webdesign @ 09:19:07

Paper prototyping and Photoshop CSS mockups:

tags:

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

tags:

posted on: 14 January 2007

Whitespace

filed under:webdesign @ 19:32:03

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

Whitespace

tags:

posted on: 11 January 2007

HTML cheat sheet

filed under:webdesign @ 09:13:27

One more cheat sheet from ILoveJackDaniels:

HTML cheat sheet

tags:

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)

tags:

posted on: 29 December 2006

Floats

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

tags:

posted on: 22 December 2006

Type foundries

filed under:webdesign @ 08:57:21

On Ideasonideas:

Five foundries

tags:

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

tags:

posted on: 24 November 2006

One sentence

filed under:webdesign @ 20:16:21

On Authentic Boredom:

summarize a project in one sentence

Interesting comments.

tags:

posted on: 10 November 2006

Color

filed under:webdesign @ 19:01:22

On Digital Web Magazine:

Color: an investigation

tags:

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

tags:

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

tags:

posted on: 19 October 2006

Pictures and design

filed under:webdesign @ 14:23:01

Via Ace Jet 170:

tags:

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:

tags:

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.

tags:

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

tags:

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.

tags:

posted on: 07 September 2006

Helvetica, Arial and Typecasting

filed under:webdesign @ 09:06:31

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

Helvetica vs. Arial:

tags:

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

tags:

posted on: 23 August 2006

Tagging

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.

tags:

posted on: 14 August 2006

Design reminders and icon analysis

filed under:webdesign @ 13:30:41

Two very interesting articles on Boxes and Arrows:

tags:

posted on: 09 August 2006

Tagging

filed under:webdesign @ 13:36:42

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.

tags:

posted on: 08 August 2006

Kerning, design school and printing

filed under:webdesign @ 11:13:22

Three interesting posts on Noisy Decent Graphics:

tags:

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

tags:

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.

tags:

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.

tags:

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

tags:

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

tags:

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

tags:

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.

tags:

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.

tags:

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.

tags:

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.

tags:

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

tags:

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

tags:

posted on: 03 July 2006

Current issues with Microformats

filed under:webdesign @ 10:35:27

On Friendly Bit: current issues with Microformats

tags:

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.

tags:

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:

tags:

posted on: 29 June 2006

Misunderstanding web standards

filed under:webdesign @ 10:09:23

An interesting list: 9 ways to misunderstand web standards

tags:

posted on: 28 June 2006

Web browser standards support

filed under:webdesign @ 19:44:51

On webdevout: Web browser standards support

tags:

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

tags:

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

tags:

posted on: 24 June 2006

Microformats and browsers

filed under:webdesign @ 18:57:24

Microformats and browsers:

tags:

posted on: 24 June 2006

Google ranking factors

filed under:webdesign @ 10:36:23

A list of Google ranking factors

tags:

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

tags:

posted on: 22 June 2006

50 ways to become a better designer