It’s just data

Blazing a Trail

Anne van Kesteren: Now we have all these early adopters of HTML5 it seemed about time to move the goalposts. With help from Simon Pieters (SVG, some CSS bits), Sam Ruby (notably smaller SVG), and Robbert Broersma (menu) my site now looks uglier in most browsers. In fact, although I have not tested Safari 3.1, I am relatively certain it will not render properly in any released browser.

I approve.  While I try to stay within the boundaries of only using something that some released browser supports, and I am willing to apply such workarounds as vendor specific properties instead of “proper” CSS3 support for rounded corners, pushing the boundaries even further is also important.

I haven’t cut over yet, but I have been experimenting with a new design.  As features get deployed, I hope to incorporate them into my design.  If people have suggestions about things I can try, let me know.


I like the new deign a lot. But not so much the shades of blue.

Posted by anonymous at

Concrete suggestions on shades?  Or is it just blue that you object to?

Posted by Sam Ruby at

The Explore menu blue does look, well, awful.

Also, the small-caps headings in your current layout work OK, in the new one, not so much. The current layout specifies a global default font selection which includes Verdana, so that is what I get, and the browser emulation of small caps for Verdana works passably. The new layout does not specify a global default font selection, so it gets rendered in Droid Sans for me, for which the small caps emulation result looks terrible (over-sized bold capital letters towering next to dainty regular ones).

Dashed borders gone in new layout: about time.

Display of commenter names at the top right: nice. Display at the bottom still there: redundant.

Posted by Aristotle Pagaltzis at

The Explore menu blue does look, well, awful.

Would #e0e0f4 look better?  (Do you have firebug or equivalent?  If so... body > aside {background} )

Posted by Sam Ruby at

Whatever about the colors/style, in the new design your titles are left aligned but the comments and date are over the right, so I can’t saccade.

Posted by Bill de hÓra at

I can see scanning titles, that’s why I tried to make them have more visual impact than other parts of the page.

Dates are something I feel should be included somewhere, but I am looking to push them back a bit.

By comments, I presume that you are talking about the comment counts.  I do often scan this, but for some reason I feel that this shouldn’t compete with the titles.  I need to think about it some more.

Posted by Sam Ruby at

Concrete suggestions on shades?  Or is it just blue that you object to?

I can’t say I’m the expert on colour myself (I generally go for mostly monochrome designs for this reason) but the shades don’t seem to “fit” together. I seem to recall an article on the knack of picking shades that go together for web design, but can’t recall the URI.

Posted by anonymous at

do you really want to keep the blue? :) I’m pretty some young Web designers would be happy to do the redesigning job saying “I have done the design of Sam Ruby’s blog” with html5 and svg.

Posted by karl at

What about some shades of grey: aside, borders, body background ? But keep the blue masthead.
And, please, remove the use of small caps on the post headlines, and the italics on the aside h2. Looks sooo 1999.

Posted by Philippe at

I seem to recall an article on the knack of picking shades that go together for web design, but can’t recall the URI.

Do you mean one of Stefano Mazzocchi’s articles?

Posted by Aristotle Pagaltzis at

I’ve pushed out a few tweaks.  The small caps are gone.  The body>aside color is now paler.  I find if I make the h2 on that aside non-italic, it feels both neglected and 1995 to me.  The intent was to use the same font family and style as the h1, but unfortunately the letters in the word “Explore” aren’t cooperating.  An example of an intertwingly problem.  For now, I’m trying “mingle” which works better, feels a bit playful, but doesn’t seem as semantically accurate.

If somebody (pretty, young, or otherwise) wishes to provide input for bragging rights, I’m certainly open to the idea.  The biggest problem is that I, like most customers, don’t really know what I want.

I do want to continue to move towards making these pages amenable to view-source from top to bottom.  To me, that doesn’t just mean that everything is in a text format, it also means that the markup doesn’t look like it was produced by a code generator.  Use of forward looking standards that are supported by at least one released browser are also desirable.  The ability to work as text/html and on text-only browsers is also important to me.

There are no non-negotiable colors, but going monochrome feels like giving in, and I’m not there yet.

I appreciate the comment on the redundancy of the names.  I feel that highlighting the person making the comment is an important piece of context, and all too often I find somebody leaving a feature length article as a comment, and I found myself scrolling to the bottom to establish this context.  I’m not yet ready to clutter the information on the top of the post with the mini-icon (openid/stranger) or the timestamp.

Posted by Sam Ruby at

The only person you have to please is yourself, Sam. Sure, if your page shows up wonky or hard to access then you’ll want to make changes. However, choice of color and stylistic options should reflect the web site owner, not whatever is cool, or chi-chi at the moment.

No matter what you do, some people will like it, some people will hate it, and some people will just want you to talk about Rails.  And the truly perverse aspect is you won’t be able to differentiate between the three in your comments.

Posted by Shelley at

not whatever is cool, or chi-chi at the moment.

There is good design and there is fashionable design. You can achieve either, both, or neither. One of them is timeless.

(For human values of “time” anyway, admittedly.)

Posted by Aristotle Pagaltzis at

Would #e0e0f4 look better?

After having enabled Firebug (which is usually disable to save cycles, alas) and playing around a bit, something like this would be my suggestion:

background: #E0E0EA;
border: 2px outset #444488;
Posted by Aristotle Pagaltzis at

AP: “Do you mean one of Stefano Mazzocchi’s articles?”

Yep :) The former.

Posted by anonymous at

(On a typographical note, I would also support making the actual text less wide, but I’m odd like that.)

Posted by anonymous at

“There is good design and there is fashionable design. You can achieve either, both, or neither. One of them is timeless.”

But what is good design? Or timeless? If you think on it, the web started with white pages and black text and links in blue. Then a short time later it was psychedelic floral, with blinking yellow text. Ultimately the only “good” design is one that’s easy to read, easy to navigate, accessible, and doesn’t crap out, even in IE.

Which is kind of what makes this all cool, don’t you think?

Posted by Shelley at

and doesn’t crap out, even in IE.

Sigh.

But what is good design?

I think it’s fair to say that the print media (books, periodicals, ...) have settled on a fairly stable notion of what constitutes good design. The Web has been around for a much shorter period of time, and the technology is still evolving. So it’s unsurprising that notions of good design on the Web are still evolving.

While I enjoy Sam’s (and others') experiments, my pages are authored to long-established Standards, and yet they still render correctly in only a tiny fraction of browsers.

I’ll start playing around with HTML5 when Opera (say) renders this page correctly.

Posted by Jacques Distler at

The Web has been around for a much shorter period of time, and the technology is still evolving.

Many of the notions of good design in older media are based fundamentally on properties of human perception and cognition rather than merely of the medium itself. Differences in the media require reinterpretation of these notions in terms of their underlying principles (eg. screens are luminous with low resolution whereas paper is reflective with high resolution). The principles, however, are highly stable across media – those of typography and of contrast and colouring, in particular. (Though typography as such is still evolving on centennial time scales, being only five centuries old.)

Ultimately the only “good” design is one that’s easy to read, easy to navigate, accessible, and doesn’t crap out, even in IE.

Exactly.

Posted by Aristotle Pagaltzis at

[link]

This page contains the following errors:

error on line 37 at column 472: Entity ‘rsquo’ not defined
Below is a rendering of the page up to the first error.

Posted by anonymous at

Ah, yes.  Some functionality I had yet to port over.  Fixed.

Posted by Sam Ruby at

Add your comment