Notes on a web journey

posted on: 14 July 2009

CSS3

filed under: @ 15:07:52

Two articles on CSS3:

tags:

posted on: 06 March 2009

Fluid grids

filed under: @ 09:22:07

An article on A List Apart :

Fluid grids

tags:

posted on: 31 December 2008

Modular layout

filed under: @ 09:15:44

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

Making Modular Layout Systems

Jason Santa Maria's beautiful personal web site explained.

tags:

posted on: 11 December 2008

Grid design

filed under: @ 10:42:52

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

The grid system

tags:

posted on: 27 November 2008

CSS tables

filed under: @ 11:05:22

After the article about CSS tables on Digital Web Magazine, another one on Vitamin:

Tables: The Next Evolution in CSS Layout

tags:

posted on: 23 October 2008

Table related display property

filed under: @ 19:23:44

A very interesting article on Digital Web Magazine :

Everything You Know About CSS Is Wrong

tags:

posted on: 21 July 2008

Layouts and fixes

filed under: @ 09:45:51

Two CSS links:

tags:

posted on: 19 June 2008

Faux absolute positioning

filed under: @ 09:26:02

There are two popular approaches to positioning with CSS: float and absolute positioning. Both approaches have their pros and cons. My teammates and I have developed a new positioning approach that gives us the best of both worlds. After quite a bit of experimenting and testing, it's time to share the technique with the rest of the world and see how we can work together to improve it. I'm calling it faux absolute positioning after the faux columns technique that simulates the presence of a column.

Faux Absolute Positioning

tags:

posted on: 14 May 2008

CSS line height

filed under: @ 09:21:33

Here's the punchline: the effects of declaring line-height: normal not only vary from browser to browser, which I had expected - in fact, quantifying those differences was the whole point - but they also vary from one font face to another, and can also vary within a given face.

line-height: abnormal

tags:

posted on: 12 May 2008

Border radius

filed under: @ 09:28:02

On The Man in Blue:

Circtangles: A JavaScript art installation

For Firefox and Safari only, round corners with CSS border-radius.

tags:

posted on: 08 May 2008

Css: reset, conditional and pagination

filed under: @ 09:02:31

On CSS :

tags:

posted on: 16 April 2008

Extensible CSS interface

filed under: @ 09:38:31

A series on Authentic Boredom :

Introducing “The Highly Extensible CSS Interface”, a four-part series of how-to's and savvy conversation to be published in the coming weeks, with the first article debuting this week. The phrase “highly extensible” is in reference to designing and coding interfaces that are flexible enough to adapt in ways the designer or developer may not foresee when handing off coded templates, while still retaining the overall aesthetic integrity of the layout.

The Highly Extensible CSS Interface ~ The Series

tags:

posted on: 15 April 2008

Data visualization

filed under: @ 20:40:06

An article on A List Apart:

Three techniques for incorporating data visualization into standards-based navigation patterns.

Accessible Data Visualization

tags:

posted on: 29 March 2008

Sevencolors.org make over

filed under: @ 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: 13 February 2008

Resetting CSS styles

filed under: @ 11:10:03

I found out about it a bit late :

Resetting Again

tags:

posted on: 05 February 2008

Em based layouts

filed under: @ 09:35:02

On James Whittaker's blog:

Em based layouts - Vertical rhythm calculator

tags:

posted on: 13 January 2008

Eye-Tracking studies

filed under: @ 13:20:06

On VirtualHosting :

23 Actionable Lessons from Eye-Tracking Studies

tags:

posted on: 09 January 2008

No hacks CSS

filed under: @ 19:48:03

Using CSS3 selectors as an alternative to hacks when targeting specific browsers. Hacks are an example of graceful degradation: you design for the most capable browser and then fix issues in legacy browsers. But what if we took the opposite approach and worked with progressive enhancement?

CSS Not([hacks])

tags:

posted on: 03 January 2008

CSS tutorials

filed under: @ 19:42:03

Posh CSS is a collection of Cascading Style Sheet Articles, Tutorials, Tips and Code snippets for the modern day web designer.

Posh CSS found via shauninman.com

Also on Shaun Inman's site styling file inputs with css and the dom, which was posted on September 10th 2007 but I just read. Definitely worth having a reference to it.

tags:

posted on: 17 December 2007

Web tools

filed under: @ 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: @ 09:27:11

Via Veerle's blog:

Design By Grid on designing grid based websites

tags:

posted on: 02 October 2007

Floats 101

filed under: @ 18:51:02

On Digital Web Magazine:

Web Design 101: Floats

tags:

posted on: 02 October 2007

Lay out images with Javascript

filed under: @ 18:40:03

An article on A List Apart:

If I Told You You Had a Beautiful Figure...

tags:

posted on: 31 August 2007

Navigation using CSS

filed under: @ 10:16:02

An article on Sitepoint:

Nifty Navigation Using CSS

tags:

posted on: 24 July 2007

Scrolling, fixed liquid hybrid layout

filed under: @ 10:09:23

On A List Apart, how to create a scrolling, fixed/liquid hybrid layout without using JavaScript:

Conflicting Absolute Positions

tags:

posted on: 11 June 2007

Lining up elements on grid lines

filed under: @ 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: 03 May 2007

Beautiful web design

filed under: @ 09:19:08

On Sitepoint :

The Principles of Beautiful Web Design

tags:

posted on: 28 April 2007

Focus on content

filed under: @ 09:21:06

On Digital Web Magazine :

Coding for Content

tags:

posted on: 24 April 2007

Positioning

filed under: @ 09:02:03

On Digital Web Magazine:

Web Design 101: Positioning

tags:

posted on: 18 April 2007

Baseline grid

filed under: @ 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: 01 April 2007

Design and the Golden Section

filed under: @ 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: 24 March 2007

Grid systems

filed under: @ 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: @ 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: 17 March 2007

Web building tips

filed under: @ 10:02:45

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

Web Building Tips

tags:

posted on: 08 February 2007

Multi column layouts

filed under: @ 19:50:03

On A List Apart:

Multi-Column Layouts

tags:

posted on: 31 January 2007

CSS techniques

filed under: @ 09:48:02

A definite bookmark:

53 CSS techniques

tags:

posted on: 24 January 2007

Prototyping and mockups

filed under: @ 09:19:07

Paper prototyping and Photoshop CSS mockups:

tags:

posted on: 14 January 2007

Whitespace

filed under: @ 19:32:03

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

Whitespace

tags:

posted on: 14 January 2007

Styling form controls

filed under: @ 19:27:23

On 456 Berea St. :

Styling form controls with CSS, revisited

tags:

posted on: 29 December 2006

Floats

filed under: @ 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: 26 October 2006

Display property

filed under: @ 08:28:46

An interesting article on Thinkvitamin by Molly Holzschlag:

the missing run-in value

The comments are also worth reading. The solution proposed by Jeff Croft, for example, is very nice.

tags:

posted on: 10 October 2006

Accessibility,validation and the button tag

filed under: @ 09:35:21

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

tags:

posted on: 13 July 2006

New layout: sidebar

filed under: @ 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: 12 July 2006

Automatic magazine layout

filed under: @ 18:42:03

On A List Apart: automatic magazine layout

Auto-resized images are a common feature on the web now. Automating the process of resizing images saves a lot of time - it's certainly quicker than manually resizing images in Photoshop - and is a good way to manage images on a site.

Once you have ten or so images, you are better off using an AJAX based image gallery, but this script will fill the gap nicely up until that point.

tags:

posted on: 10 July 2006

Table of content style and CSS selectors

filed under: @ 22:02:05

On Peterned weblog: table of contents
..table of content styles with different types of counting, right aligned page numbers and dotted lines filling the gap..

On Stuffandnonsense: CSS: a tribute to selectors
more links to articles on CSS 2.1 and CSS 3 selectors by 456 Berea St.

tags:

posted on: 09 July 2006

New layout: first post bigger

filed under: @ 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: @ 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: 28 June 2006

Tiny realignment

filed under: @ 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: 23 June 2006

Transparent custom corners and borders

filed under: @ 18:59:08

On 456 Berea St :transparent custom corners and borders

tags:

posted on: 20 June 2006

High resolution and CSS units

filed under: @ 18:43:49

On 456 Berea St :high resolution screen

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

tags:

posted on: 19 June 2006

Inline wrap IE6 bug

filed under: @ 11:30:06

I have been trying to find the best solution to the
inline wrap IE6 bug for a year. Right now I have to write a post then see how it looks on IE and add a <br /> tag to avoid wrapping of the links with the consequent external link icon loss. The solution offered in the post above doesn't work for me because the CSS does not validate using display:inline-block. I hope this bug will be fixed in IE7..

tags:

posted on: 18 June 2006

Four tier web development

filed under: @ 13:08:58

On Friendly Bit: 4 tier web development

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

tags:

posted on: 25 April 2006

CSS hacks

filed under: @ 14:02:05

On Vitamin: Stop Hacking, or be Stopped

I always try to avoid any hacks adapting the layout so as to avoid the different renderings of the browsers. That put some limitations on what I could do but now it pays off since I don't have to change anything.

tags:

posted on: 09 April 2006

Back online

filed under: @ 12:10:33

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

tags:

posted on: 07 April 2006

Computer melt-down

filed under: @ 14:35:44

Naked CSS Day is finished but..my computer broke down. I cannot re-enable CSS and the web log page will stay "naked" until my computer gets fixed.

tags:

posted on: 21 March 2006

Realignments and redesign

filed under: @ 09:28:18

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

tags:

posted on: 03 March 2006

CSS layouts and web authoring statistics

filed under: @ 19:20:13

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

Google code: web authoring statistics

tags:

posted on: 25 February 2006

The Style Layer

filed under: @ 14:10:32

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

tags:

posted on: 13 February 2006

Variable fixed width and front-end architects

filed under: @ 13:28:43

On Clagnut: Variable fixed width

Garret Dimon: Front-End Architects

tags:

posted on: 10 February 2006

Unitless line-heights

filed under: @ 19:51:00

On Meyerweb: unitless line-heights.

tags:

posted on: 23 January 2006

DIV vs. Lists

filed under: @ 14:00:34

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

DIVless layouts

tags:

posted on: 17 January 2006

CSS typography and background images

filed under: @ 21:31:35

Typography and CSS on Digital Web Magazine

On 24 Ways css background images

tags:

posted on: 14 January 2006

CSS 2.1 and CSS 3 selectors

filed under: @ 19:14:12

On 456 Berea Street:

tags:

posted on: 04 January 2006

Best 20 of 2005, query and grids

filed under: @ 09:50:35

On web-graphics:

On A List Apart:

tags:

posted on: 29 December 2005

Forms,typefaces and Zs

filed under: @ 20:10:30

tags:

posted on: 25 December 2005

Php, CSS,Javascript and attributes

filed under: @ 12:25:18

A post an Simon Willison's web site:

Google base

I'm not particularly interested in Goole base itself, more in what Simon says about structuring data using attributes that allow to query it and make it interchangeable. I think that XFN and Microformats are products of the same general orientation. Seems to me that that's all the web is about, connecting people and data in the easiest possible way.

tags:

posted on: 28 October 2005

CSS layout

filed under: @ 16:41:26

CSS one layout :

Total Layout Flexibility: that is, the ability to order columns logically in the source while displaying them in any order desired. For any number of columns. Equal Height Columns: or more accurately, equal height columns without having to rely on faux columns. Vertical placement of elements across grids/columns: designers face the choice of relying on elements being a particular height, resorting to tables or simply not bothering.

tags:

posted on: 30 September 2005

CSS lists and columns

filed under: @ 19:12:08

Some interesting articles on CSS techniques :

I use lists for the main menu of this site and, as I explain on the menu code page, I want the menu to appear as it does and the only way I know to position the links like that is to use four different unordered lists and float them .

I will read the multi-column lists article properly and see if it gives me a better solution.

Update- 2005/10/01 : I read the article and it does a different thing from what I want. Also, it is mostly an exercise in “taming” lists, as the ALA content warning specifies the article uses experimental techniques. I try to avoid excessive mark up and hacks as much as possible, sometimes I simply prefer to change the design instead of forcing it into realization.

tags:

posted on: 18 September 2005

Religious penguins..

filed under: @ 11:03:03

This is hilarious and almost incredible:

Antarctic family values read the article and draw your own conclusions...

A few links to interesting posts:

tags:

posted on: 08 September 2005

CSS and printing

filed under: @ 10:26:05

CSS gradients, look at the source to see how it is done. In my opinion it requires way too many divs. But this is just a demo and the idea behind it is interesting.

“The Rising Tide” a scrolling effect tutorial on WestCiv

On A List Apart : printing high-resolution images.

tags:

posted on: 26 August 2005

WordPress themes

filed under: @ 18:51:00

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

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

tags:

posted on: 07 August 2005

Sprites

filed under: @ 15:36:16

From Dave Shea article on ALA titled:

about a CSS technique that makes use of the hover state to:

by Bryan that extends it to use the active state.

tags:

posted on: 25 July 2005

CSS cascade and inheritance

filed under: @ 14:15:34

To fully understand the cascade and inheritance of CSS is the most important prerequisite to achive a solid presentation. It also helps to avoid using “hacks” and workarounds as much as possible:

tags:

posted on: 28 June 2005

CSS: workaround vs. hacks

filed under: @ 19:26:19

I agree with Alessandro of web-graphics.com on the topic of CSS hacks. I don't like to use them and I always try to work around them.This is the article, I have to say that the best solution would be to have browsers that render CSS properly..

tags:

posted on: 23 May 2005

Organizing CSS

filed under: @ 14:47:41

Web-graphics has a couple of links to articles that offer tips on organizing CSS files:

I personally divide my CSS files in groups of rules and save them for quick consultation but I publish them optimized (no whitespace, each rule in one line) to keep them light.

tags:

posted on: 17 March 2005

Clearing of floats

filed under: @ 09:28:04

Interesting article about clearing of floats on Mezzoblue.

This is the “old” way.

tags:

CSS,Javascript and Php studies

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