Simple = Simple

Got up this morning at 5 am and continued. It turns out that I had misunderstood how padding works. I was previously using layer positioning to put the tabs where they should go. However, this approach doesn't work when you want to cover something that is to the left with white (the blue bar is a repeating image, 1 px tall by 91 wide). So I knew I had to put the layer at the very left and top of the page. But when I did this, the tabs lined up against the SG logo, not the colored banner.

So if I can't move the layer, what do I do? I guessed that the solution was in moving the content inside the layer. All it took was a simple padding-left: 91px and my blue bar problem was solved.

The lesson here is that if you are trying to do something simple, the implementation should also be simple. Stop and re-think if it is not, chances are, you've missed something basic.

In other news, I am eagerly awaiting Momoi Haruko's WONDER MOMO.i CD from CDJapan. I also ordered Majokko Tsukune-chan volume 1 + CD--an OVA series I know almost nothing about. Momoi plays Tsukune-chan as well as performing the OP and ED music. That's good enough for me! Momoi is probably best known for her role as Nurse Witch Komugi. She was also the singer/songwriter in the duo UNDER17. Her voice is unbelievably cute :-)

Side bar trouble

Almost have the design in CSS down... As you can see, the side bar is giving me a little trouble. I'd continue working on it, but if I stare at this screen any longer, my eyes will fall out.

I take it all back

CSS-based formatting is the way to go. I've spent the day struggling to understand how to make tabs with text instead of images using CSS. Basically, I've put together two techniques I learned from two different web sites to just get the simple effect I was trying for. Now that I've spent all this time, I fell like I'm fully committed to making CSS-based formatting the default for this web site.

The benefits are pretty amazing, even if you don't utilize all the features CSS can provide--seperate style sheets for print vs. on screen, more accessible web design by reducing the reliance on images for navigation, layers, etc. So I'm going to spend the time to do it right. It's the language of the modern web.

I've also decided from a practical and design perspective, different colors for each section of the web site is no good. So we'll be going with what I call "Scooter Blue" or #3366CC AKA #36C. You know, THIS COLOR. Please look forward to it!

Navigation Bars

So I have been working on the navigation bar at the top of this page (soon to be at the top of every page). I added a mouseover in Adobe ImageReady, but I'm not sure it's absolutely necessary. It's neat but maybe a bit gimmicky. I took a look at the HTML for the mouseover and was pretty surprised to see how long it was! Back in the old days of the Internet, that kind of superfluous nonsense wouldn't be tolerated. Why, eight years ago if you put that on your page, you would have people boycotting your site outside your house with picket signs and everything (my memory on this may not be exact...)

So back to reality. I'd like to have this on every page and if I need to make changes, I'd like it to change automatically (or at least magically) in GoLive. I'm sure there is some way to do that using stationary or something.

Cubase acting up

Aggh! I know that it is a poor workman who blames his tools, but Cubase is starting to drive me nuts! My Tascam firewire audio interface doesn't fully control Cubase even though it's in Mackie emulation mode... Why? Who knows... Maybe I need to upgrade. Why can't stuff just work? Should I spend the money to upgrade from SL 2 to SX 3 or should I jump the boat entirely? I think that once I get all my hardware/software stuff on my music mac sorted out, everything should just work all the time. I just need to do some more research to get everything to work properly. Next year, that is!

Merry Christmas, y'all! :-)

Optical illusion design

Had a good day at work today! My co-worker improved a design I had started while I was on vacation and did a terrific job of it, too. I was happy to see my original--hastily put together--design for a brochure basically still there but noticeably improved. He also created other material related to the brochure in the same style. One of the things I liked that he did was to have an optical illusion for the headlines like this:



The effect on the printout was more extreme, but the idea is that the lower parts of the letters look darker than the top parts. Since this design will be one we will update each month (it's for a new event each time, so the layout stays the same but all the content changes), I was worried when I saw this! I thought that I would have to create the two-tone letter effect each time in Illustrator :-) But it's actually just a trick of the eye. So it's easy to do and looks really neat. I'm sure the client will be impressed, too.

So I've been thinking about changing how I do font distribution at Scooter Graphics. I'm thinking that perhaps it would be better to e-mail the registered versions of fonts to people rather than making them download it from the web site. Font files are pretty tiny, especially so with OpenType, so I think that this might be easier for folks. They also wouldn't have to worry about password-protected zip files (some people have a little trouble with those in Windows), since the font will just be there as a file in the e-mail.

However, this will mean that either Kagi or I will have to do the e-mailing. I'm thinking that Kagi won't do fulfillment without charging me extra--and I'd like to avoid that. Another idea might be adopting PayPal as a payment option. That has some interesting possibilities, too!

In the end, I would rather adopt a solution that makes things simpler for customers than one that confuses them.

Nested Tables and Karin

So this is the new "look." (Note: The buttons and tabs are not currently functional--I'll get them working this weekend.) I was thinking of doing this using CSS and PNG graphics, but then thought, "Huh? Am I trying to design to please some web standards board or am I just trying to get something done that will work well in most browsers?" So it's back to tables! I am using table background color for the vertical and horizontal color bars. Maybe this won't work in older browsers, but at least they will see something. If I used CSS, they wouldn't see anything close to the intended design.

I think when designing for the Web, you just got to go with what works and what you know :-) Anyway, the new layout uses a new wrinkle that I thought up to avoid nested tables, so I guess I'm improving the implementation as well.

So I've been watching a new series called Karin. It's about a family of vampires who live in Japan. The oldest sister, Karin, is a bit of an oddity, though. Instead of sucking blood out of humans, she does the opposite! Her body produces more blood than she needs, so when she bites someone, she is actually giving them a transfusion of vampire blood! (Of course, since vampire blood is incompatible with human blood, there's no problem--or whatever...)

Of course, if she can't find a "victim" in time she has an embarrassingly huge nose bleed (hey, it has to come out somewhere, right?). Did I mention that this is a romantic comedy? :-) The manga will be coming out next year from TokyoPop--retitled "Chibi Vampire." Perhaps the anime will be licensed here, too...

I'm so glad I took time off work!

I haven't taken more than a day here and a day there in over a year and a half. I didn't realize how burned out I was. So I have had a lot of success lately with my music and web site design. I'm at least a couple years behind the times on Cubase (my main music program) and Adobe GoLive (I used to use Page Mill). You know the part I hated most about college? Reading textbooks. That's what reading software manuals feels like, too.

However, good news! They don't make software manuals anymore, so you just have to "learn by doing." I'm not sure if this is an improvement, but at least I don't fall asleep 200 pages in anymore. :-)

So on Monday's update, I put up an idea for the new home page for Scooter Graphics. I've tweaked it a little since then. I still like the tabs at the top, but I didn't like how the blue line goes all the way across underneath the tabs. It made the "SG" logo look unbalanced. So I changed that and also designed a few different section pages. Yeah! This is going to be much easier for folks to get around in. The old navigation system kinda just grew as the site expanded, so it wasn't planned like I'm doing now.

Here's a peek at what I've done today:


It's so GREEN! I like it :-) What do you think about the subsection titles? Go ahead and e-mail me if you think this is/is not a good way to get to the different fonts in the section. Note that this is the main section page--I'll have a quick overview of each font with a link to download each one just on this page. The subsection pages will just be for folks who want to know more before downloading.

Here are the rest of the section pages I did today, just three more to design...


Obviously not actual size! What do you think about the word "Delightful?" It's one of my pet words these days. And it just happens to have a "g" in it which is very cool since Especial Kay has an awesome "g" in it.



So I've pretty much got all my fonts right there in these three screens. I have more designs than these, but I think I'd like to showcase my best work and let some of the older fonts go--at least until I can get time to improve them.

In other news, I just got Starship Operators today from Right Stuf. I'll be watching that tonight! KOTOKO does the opening and ending themes for the show. She's just awesome. I saw her concert and panel at Anime Expo '05. She actually brought a band with her! Most J-Pop artists that come over here just perform to a tape, but she put on a full show--she even had costume changes. Very professional. I can't wait for her CDs to be available here in the states.

The English dub was done by The Ocean Group. They do most of Gundam, so space battle shows are no stranger to them! I recognize a few familiar voices. Nicole Bouma (last heard as the adorable Tanpopo in Dokkoida?!) and Kirby Morrow (Trowa Barton from Gundam Wing and Miroku in Inu Yasha) put in some good work.

(And, yes. I'm trying to update the font blog every weekday from now on :-)

Don't make me think about web design

One of the things that Don't Make Me Think talks about is the kinds of things to put on the home page of a web site. So I'm not just working to create new graphics and such, but also make it easier for first time visitors to see what Scooter Graphics is all about. So here's what I've come up with

Site ID: Scooter Graphics
Tagline: Free and shareware fonts designed by Marty Pfeiffer
Welcome Blurb: Welcome to Scooter Graphics. Marty has been designing fonts since 1994. You can download and try these typefaces exclusively from this web site. Some fonts on this web site are free and some are reasonably-priced shareware.
Tabs: Home Nu Fonts (Nu Sans, Nu Serif, Nu Casual, Nu Sans Mono), Script (Moris Script, Especial Kay, Marty Bold), Display (Electrode, Receipt, Scooterboy, etc.), Purchase, F.A.Q., Font Blog

I don't really think that Scooter Graphics needs a search function, but maybe I'm wrong. I'll be sure to ask a few folks and if it's handy, I'll put it in. Since most folks aren't limited to 640x480 monitors these days, I'm going to increase the size of the graphics by 150%. Another thing I'm thinking about is putting the most recent entry from the font blog on the home page, with a link to the rest. Blogs are pretty popular these days, aren't they?

Here's my first try in Photoshop:


So anyway... In episode 37 of Pretty Cure, in one scene the bad guys brushing their teeth. Who knew? I guess folks from the Dusk Zone are not only interested in obtaining the power of the Prism Stones, but also maintaining proper oral hygiene. Of course, in the very next episode, Nagisa (Cure Black) is brushing her teeth during the previous episode recap. Good thing, too. You don't want kids getting the wrong idea about taking care of their teeth. It's not just something that bad guys do!

I've decided to update Scooter Graphics

This update is going to be on two fronts: this site and the fonts. I'll be updating the site first. I've just finished reading Steve Krug's excellent Don't Make Me Think: A Common Sense Approach to Web Usability (2nd edition) and I'm going to put what I learned about usability into Scooter Graphics. It's going to be great!

I'm also going to be using Adobe GoLive to update the site from now on. That will make things much easier for me to update. In the past, I've been editing the HTML by hand when I've had to, since Adobe Page Mill doesn't work in Mac OS X (and has been discontinued by Adobe). It's fun learning new things. :-)

So I think that the eWorld layout will change so that I can have persistent navigation on all the web pages. I have to find a way to do that and still be true to my roots. Wish me luck!

The other part of the upgrade will be the long overdue conversion to OpenType. Basically, OpenType makes things a lot simpler for users of fonts, while adding a lot of flexibility. They also work on Mac and Windows, so you don't have to have two different versions of the same font if you work on both platforms. Any moderately recent version of Windows or Macintosh has OpenType support built in.

I will still keep the PostScript and TrueType versions for folks who are "retro-computing." I don't want to keep anyone from using my fonts. However, since I'll be concentrating on OpenType from here on, PostScript and TrueType versions of my fonts won't be updated regularly. This isn't so bad, though, since all my ideas for updates have to do with OpenType-specific features.

As they say on Science Ninja Team: Gatchaman, "Look forward to it!"