Slightly Remarkable

Yep, I’ve yet again redesigned. If you’re using Firefox or Chrome, the site will be beautiful, and if you’re using Safari, it’ll be almost as beautiful (Safari 4 still doesn’t support inset box shadows in CSS3 *sigh*).

So a few details about the design.

• Grayscale. The color one chooses when he does not know which color to choose.
• Heavy CSS3. If you look at it in IE, it’ll probably puke. Sorry. Upgrade your browser. =)
• Design took place amidst other activities, including a very lonely The Office marathon.
• The comment form uses an ordered list. The comment form button is pretty CSS3 stuff.
• The web site makes heavy use of alpha transparency, both in PNG graphics and background colors/gradients. This means that the design can be completely transformed, in full color, simply by applying another background image (yes: another).
• Expect to see the background change from time to time as I get bored with the grayscale.
• The home page 3-column layout is some cool CSS3 trickery.
• All of the designing was done in the browser, not in Photoshop. I think this approach dramatically changed my attention to detail, particularly the fonts and colors (well, shades, if you will).
• I took a minimalist approach with the design and stripped out almost all of the plugins I was using for Wordpress. I’m much happier with my content and a few pages, and I think the refocus on “less is more” allows me to write more, fix less, and by extension allows folks to read more and be confused less.

If you’re a graphic designer and would like to see your work on my site, drop me a line. ;-)

Well, that’s all for now. =)

Update: Okay, here’s more. Pick a color to see how the design changes.

• Red
• Green
• Blue
• Pick your own

Today, I upgraded to Wordpress 2.9.2, and in the process I decided to play with some CSS3. If you’re browsing with Firefox, you may notice a completely new look here. Expect it to change frequently. I’m not serving the CSS3 goodness to other browsers that support it (notably WebKit-based browsers and Opera) because of the sheer magnitude of non-standard CSS3 properties (I can’t just duplicate and copy vendor prefixes — the actual order of the properties changes).

So, if you are using Firefox, you’re going to see a new gray/brown/green theme that’s going on. Complete with shadows, rounded corners, and some interesting gradient combinations. I managed to procure some fairly complex gradients, but you may be surprised when you learn that the new look has absolutely no graphics whatsoever. All the gradients (even those ones that look like images) are CSS3. It’s beautiful, no?

I’m looking forward to the day when I can serve these kinds of styles to all browsers and have them behave as expected.

Oh, and for the record, the only thing that Firefox users get is the stylesheet — I’m not serving any different HTML or anything, despite how reorganized the content actually is presented.

So, enjoy! =)

I have become keen on JavaScript libraries since the early days… Prototype, Rico, Scriptaculous, moofx, and so on. They’re very powerful and useful for all sorts of things. I don’t go into the purpose or utility of JavaScript libraries here — I’ll leave that debate to others. What I am going to talk about is how useful jQuery, my library of choice (yes, I’m a John Resig fanboy), is. In specific, user interface design.

To get started, let me just throw out a quick example. It’s rough and I put a lot more in it than I would ever actually use in a web design, plus it’s images-free (no graphics). Still, it’s pretty sleek and requires (this is a big part) no additional plugins. In other words, you can build things like this using jQuery right out of the box.

View the example.

So you’ve seen the example, and you were blown away. I’m not going to cater to the “JavaScript newbie” here. As others will agree, if you don’t know JavaScript to begin with, you shouldn’t be using libraries or frameworks for it (or even writing the code at all, unless you intend on learning it correctly). In fact, I’m not even going to dissect my code because the comments should allow you to follow along (if you can’t already tell what’s going on because of how simple jQuery is). Really, I just wanted to bring to light the utility of jQuery and how it can be used. I thought this little script I wrote deserved more attention, particularly because I may be using it (in a modified way) in the future…

Oh yes, the future. My new company, Webtronic Media (which is still in progress and has not been officially launched), will be using the jQuery library for visual (and other functional) aspects of our site. Our intention is to produce sleek, Flash-esque visuals on top of XHTML 1.1 strict standard front-end code, but without the huge Flash player plugin (or processing!). We’re on the bleeding edge, and we want our web site’s presentation to reflect our passion for the balances of beauty and function, compatibility and efficiency. All I have to say is that you will all be blown away when Webtronic Media launches.

Yesterday evening, I made some changes to the blog design. They’re not major, by any means, but tweaking the design from time to time really breathes life into the blog itself. It becomes a living creature — one that must be tended to by feeding and grooming.

What changes were made? Well, first, I removed the whole “grunge” theme. It was getting worn out (pardon the expression). I also updated the navigation bar and got rid of that awkward “ghostly” kind of bar. I replaced it with a sleeker bar and changed the hover graphics for the navigation items.

Second, I changed the links. They used to be yellow and would just lose the underline when you put your mouse over them. Now they’re gray and turn a dark red color. This is probably a bad change, but for a few minutes I had a gray/blue theme going. I might change the entire design to blue/black instead of red/black, or maybe blue/white, and keep the design elements similar… The possibilities are endless when you have a design where you can simply replace the graphics files and the entire design transforms. Gotta love that CSS!

Another change I made was the header graphic. I put a couple funky bubbles on the letters “S” and “R.” I don’t know why, but that’s what I did. The way the design works has the added benefit of putting a couple random bubbles along the header (they usually sit behind the search bar on a 1024 × 768 screen).

I have also made some changes today, most notably (and insignificantly at the same time), I removed the quotes around the list of categories at the bottom of each post. So, for example, in this entry, you would normally have seen something like:

In "Site News," "Design," "Blogging."


Now you will see:

In Site News, Design, Blogging.


It’s not much, but something in the way of “change” and “improve” and… er… “ameliorate.” You know, keep moving forward kind of thing… All right, well that will conclude my ranting for today.

I really don’t have a great deal to say about the design, other than I hope you like it and I kind of threw it together at the last second.

Oh, and if you still see the old design, try checking the sidebar for a link that says “Slightly Remarkable 3.0″ and click that; if you still have old cookies, the design you see may not be the current one.

Thanks, and enjoy!

Henry David Thoreau was a transcendentalist writer of the 19th century who I encountered recently in school. Although I am in strong conflict with many of his ideas, in his journal he makes some excellent points on how to write better. I believe these concepts are also, to some extent, applicable to (web) design.

The writer must to some extent inspire himself. Most of his sentences may at first lie dead in his essay, but when all are arranged, some life and color will be reflected on them from the mature and successful lines; they will appear to pulsate with fresh life, and he will be enabled to eke out their slumbering sense, and make them worthy of their neighborhood. In his first essay on a given theme, he produces scarcely more than a frame and groundwork for his sentiment and poetry. Each clear thought that he attains to draws in its train many divided thoughts or perceptions. The writer has much to do even to create a theme for himself. Most that is first written on any subject is a mere groping after it, mere rubble-stone and foundation. It is only when many observations of different periods have been brought together that he begins to grasp his subject and can make one pertinent and just observation.

In regard to design, Thoreau’s thoughts can be translated like so:

The designer must to some extent inspire himself. Most of his design elements may at first lie dead in his mind, but when all are arrangd, some life and color will be reflected on them from the mature and successful changes; they will appear to pulsate with fresh life, and he will be enabled to eke out their slumbering sense, and make them worthy of their neighborhood. In his first design (mockup) for a given job, he produces scarcely more than a frame and groundwork for his sentiment and ideas. Each clear thought that he attains to draws in its train many divided thoughts and perceptions. The designer has much to do even to create a design for his blog. Most that is first developed on any design is a mere imagination, mere thoughts and basic ideas. It is only when many observations of different changes have been brought together that he begins to grasp the completed design and can make one pertinent and just observation.

In another journal entry, Thoreau makes these observations…

In the composition it is the greatest art to find out as quickly as possible which are the best passages you have written, and tear the rest away to come at them. Even the poorest parts will be most effective when they serve these, as pediments to the column…

Again, the designer’s translation would be something like the following…

In the design it is the greatest art to find out as quickly as possible which are the best design elements you’ve created, and tear away the excess so that you can focus on the best ideas first. Even the ideas which seemed poor in the beginning may turn out to be very effective when placed appropriately, much like the pediments (broad triangular parts above doors or columns) to the column.

The last journal entry that I read of Thoreau’s goes like this:

Find out as soon as possible what are the best things in your composition, and then shape the rest to fit them.

This one doesn’t even need to be changed, as it is perfectly applicable to the designer as is. The basic point here is the same as the previous paragraph: find out the best thing in your first mockup, and strip away all other elements until you’ve created what’s best. Then add the other elements in, and they may (or may not) look good, but (going all the way back to the first paragraph) at that point you can make a pertinent observation whether those elements look bad, and if so strip them away.

However, one flaw that has caused much inconvenience is the incredibly tiny “Empty” link that deletes spam from the Bulk folder. Almost half of the time, when I go to click the “Empty” link, I end up clicking the area that surrounds it, and wind up viewing the Bulk folder instead of emptying it. This is exceedingly frustrating. Here’s how Yahoo’s interface currently looks:

Yahoo should at the very least add some padding to the “Empty” link. It may be desirable to have it small to avoid accidental clicking, but their confirmation message serves to prevent that, so there is no need to keep the link smaller. My suggestion would be to take the Bulk folder’s link and cut its width in half, and use the other half of the space that the Bulk folder’s link normally consumes for the “Empty” link, so the two links would be alongside each other and both would be easy to click.

Oh yea, you guessed it. Yours truly has been given the opportunity to design BellyGraph.com. So, whatcha’ think?

This is pretty cool, I checked my referrer logs for the first time in, whew, a month, and there were a lot of links from CSSLiquid.com. Lo and behold, my site’s listed in the gallery. I feel proud. Thanks, Christian Montoya.