Tag: Web Design

Curtain Up!

Well, hey, that was pretty painless. I was worried about having to move my Wordpress installation from one directory to another, but it went off very smoothly. Of course, then I had to do a bit of cleaning up, re-upload my images, and so on.

So here we are. 6+ months of work, on and off at times, have finally paid off.

Well, hey, that was pretty painless. I was worried about having to move my WordPress installation from one directory to another, but it went very smoothly. Of course, then I had to do a bit of cleaning up, re-upload my images, and so on.

So here we are. 6+ months of work, on and off at times, have finally paid off. I have harnessed the powers of WordPress and Gallery (and the synergistic power of WPG2) and come up with… well, something that’s pretty darn good, if I do say so myself. I mean, I could go the humble route and be all, “Oh, I still have a lot to learn”, which was actually my first reflex. And which goes without saying. But, comments! And a rich blogging interface! And Lightbox overlays!

I’m still going through the posts and pages, and testing internal links. URIs for posts (except the pre-2003 ones) haven’t changed, but those for photos have. Unfortunately, though Gallery does provide some URI rewriting ability it’s not nearly as versatile as I would’ve liked. Grumble, grumble.

Anyway. Enough about me. Enjoy the new site!

Firebug is the bestest tool evar!!!

I’d installed Firebug for JavaScript debugging, as part of an online Ajax course I’m taking. At first that’s all I used it for, and only for that course’s homework, because I don’t use any JavaScript for my site.

But as I wrap up the new design for my site, I’ve been using the HTML/CSS inspector function more and more. I’m easily able to see all the nested elements, their precise layout (with margins and paddings), as well as the styles applied to them.

I’d installed Firebug for JavaScript debugging, as part of an online Ajax course I’m taking. At first that’s all I used it for, and only for that course’s homework, because I don’t use any JavaScript for my site.

But as I wrap up the new design for my site, I’ve been using the HTML/CSS inspector function more and more. I’m easily able to see all the nested elements, their precise layout (with margins and paddings), as well as the styles applied to them. It takes all the guesswork out of Web design (okay, not all. This being a Firefox plugin, it’ll only show you how a site looks in Firefox). No more futzing around with coloured backgrounds or borders to test layouts!

If I had to find one fault, it’s that the HTML inspector is too tolerant of invalid code. Now that I’m at the stage of validating the XHTML, I’m finding a number of errors—such as incorrectly nested div’s—that (IMO) should have been caught by Firebug. But, oh well. No one tool can do everything.

The Search For…

So… I’ve got two options here, neither of them totally satisfactory.

1) Use the built-in Wordpress search function. It’s pretty basic, though you can install plugins to make it search pages as well as posts, and nicely highlight search terms on the results page. Pro: it only searches post/page content, and title (this annoyed me before). Which in fact is a bit of a con, because now I may want to search the comments.

So… I’ve got two options here, neither of them totally satisfactory.

1) Use the built-in WordPress search function. It’s pretty basic, though you can install plugins to make it search pages as well as posts, and nicely highlight search terms on the results page. Pro: it only searches post/page content, and title (this annoyed me before). Which in fact is a bit of a con, because now I may want to search the comments. Other con: the search results are displayed in chronological order (timestamp for posts, creation date for pages). No clever algorithms to determine usefulness, even if it’s only giving a higher ranking to search terms in titles.

Other huge con: it won’t search the photo galleries. That runs off a completely different database, and while Gallery does have a search plugin, I think it’d look silly to use two different forms, each searching half my site. Not to mention, I don’t even know where I’d place them.

So it looks like we’re going with (2), a Google-powered search. The same as what I’ve got now? Not quite. I’ve registered a custom search engine which should do pretty well. It’s nothing fancy, but it will allow me to style the results page to a degree. There’ll be ads, but I can live with that. And it’ll make my job a lot easier, since I don’t have to worry about formatting the output of two different search engines.

What don’t I need?

I’m still working on the new site design. It’s slow. And frustrating. I want to do more than just giving my site a face lift, but honestly it’s damn hard to be creative when I’m still learning the tools. So I experiment. And I play. I add stuff. And I subtract.

Subtracting’s important. There comes a point when pretty styles and frills are just too distracting, too showing, too hard to maintain, too much.

I’m still working on the new site design. It’s slow. And frustrating. I want to do more than just giving my site a face lift, but honestly it’s damn hard to be creative when I’m still learning the tools. So I experiment. And I play. I add stuff. And I subtract.

Subtracting’s important. There comes a point when pretty styles and frills are just too distracting, too showing, too hard to maintain, too much. It’s not just styles, either. Just recently I decided to scrap the login functions provided by WordPress. There are other ways to control comment spam (such as, hah, nobody reading my blog), and the “login/register” links were just… blocking me. Which I didn’t even realise until I removed them from the sidebar, and then everything fell into place. Visitors will get cookies to remember their info, so they only have to fill it in once.

And then there’s quotes. Do I want quotes in this upcoming version? If so, how? On big long pages, the way they are now? But do I want to put them in separate pages? It feels… untidy, somehow. I was never totally happy with the structure of the “Inspiration” section in the present version, though maybe it’s the asymmetry of it: one page of links vs. 3 pages of quotes. So what’s the solution? Are cool quotes to be nonessentials? Maybe I put a random one in the sidebar or footer, like Slashdot does (and like I’m doing for my blogroll)? Or prune them and keep them around in a separate page? I dunno. I like them, and I like that they bring some search engine traffic in, but I’m not convinced they fit with the rest of the site.

Monsieur Smartypants

Okay, The Tick vs. Reno, Nevada is far from my favourite from Season Two (that would be Grandpa Wore Tights, with its brilliantly hilarious parody of Golden Age heroes), but the title seemed appropriate. After a hiatus of a few weeks I’m back at work on my site redesign, and making good progress. I’ve got a pretty good structure for the blog and assorted pages, though there are still some open questions and many tweaks to be done. And, I’ve started looking at customising my photo galleries. Yes, it can be done.

Okay, The Tick vs. Reno, Nevada is far from my favourite from Season Two (that would be Grandpa Wore Tights, with its brilliantly hilarious parody of Golden Age heroes), but the title seemed appropriate. After a hiatus of a few weeks I’m back at work on my site redesign, and making good progress. I’ve got a pretty good structure for the blog and assorted pages, though there are still some open questions and many tweaks to be done. And, I’ve started looking at customising my photo galleries. Yes, it can be done. The trick is that Gallery doesn’t use pure PHP scripts like WordPress, but Smarty templates, which I’m not familiar with. URL rewriting, another one of my worries, is also possible–I found a plugin for it–but it’s not working quite like I want it to. I may have to hack the .htaccess myself. That’s all right, though. As I said before, learning new technologies is part of why I’m doing this. The other part–and the real challenge–is to go beyond what I have now, not just give my old styles a new paint job while adding obvious features like comments. Which I already knew. But damn, it’s hard to be creative when I’m still figuring out the tools to be creative with.

The Myspace Blues

I haven’t been working much on my site lately. A few weeks ago, a friend of mine asked me to set up a Myspace page for his Blues band. He doesn’t know HTML but I do, and I was happy to help, but damn that was a painful experience.

I haven’t been working much on my site lately. A few weeks ago, a friend of mine asked me to set up a Myspace page for his Blues band. He doesn’t know HTML but I do, and I was happy to help, but damn that was a painful experience. Myspace looks like it was designed by a band of retarded, crack-addicted monkeys flinging poo at each other while they built it. The user interface is clumsy and stupid (enter styles in the same field as the content? Are you kidding me?), the HTML is just so 1997, with no Doctype, half-assed, inconsistent use of Cascading Style Sheets, generous use of non-breaking spaces to force layout, tables (natürlich) and various other easily-avoided annoyances. But, the best part: you can’t store the pound sign. That’s right, any instance of “#” in any field, including the stylesheet, just disappears. That means you can forget about proper typography. And forget about styling elements with unique ID’s, of which there are a few. I guess those particular bits were either never tested, or the powers that be didn’t care enough.

Which is still not as crazy as that one evening where all instances of the letter “i” (upper- or lowercase) were converted to double periods “..”. Ser..ously. Every..th..ng was look..ng l..ke th..s. At f..rst .. couldn’t bel..eve ..t, .. was sure ..t was a bad dream. It’s a good thing I’d backed everything up. I sent in a bug report, but it was fixed by the next morning. Or it just fixed itself. Or maybe it really was a bad dream, for all I know.

Okay, enough venting. Honestly, after a while I started to see it as an interesting challenge, and I’m happy to see how well the site turned out. Not as pretty as I would have liked, maybe, but it’s nice and clean and does the job, and (more importantly) the Piggies are happy with it. Now that I’ve looked around, it turns out I can style things even better, but that can wait. I should probably focus on my own site for a while.

Reinventing The Wheel

It started when my old camera conked out. No display in shooting mode, no images recorded. Ah, we had some good times these 4 years, but I guess nothing lasts forever. So I bought a new one. And then I started thinking more about photos, and the work I have to do to put them online.

It started when my old camera conked out. No display in shooting mode, no images recorded. Ah, we had some good times these 4 years, but I guess nothing lasts forever. So I bought a new one. And then I started thinking more about photos, and the work I have to do to put them online. And creating a new gallery is indeed a pain: besides setting up the metadata, there’s resizing (3 sizes! sometimes 4, for pics embedded in posts, like this one), cropping, and uploading. Surely there’s a better way? Flickr seemed a good choice, so I looked into that. Popular, easy to use, with plenty of tools and a wide knowledge base. But the automated tools to blog photos only worked with established blogging software. And me, all I had was a few scripts I wrote myself.

So I thought, hey, if I’m going to use Flickr, why not go all the way and use proper blog software. It so happens that Dreamhost will install quite a lot of software on your webspace with the click of a button, including WordPress. So I installed it. And played around with it. And read the documentation. And played around some more. And I thought about how my existing content would fit in WordPress. The history project, quotes and links, older posts (which don’t have a precise date assigned to them). They’d have to be pages instead of blog posts. How to organize it all? What categories to use? Do I need a hierarchy? I checked out the dozens of available themes, and it was like looking at the CSS Zen Garden all over again (except, of course, not quite as awesome).

Boom. Another site redesign has begun.

I’m still in the preliminary stage, figuring out how I want to organise my site and exactly how to make WordPress do what I want to do. Fortunately there’s lots of excellent documentation and examples to use.

As for photos, I think Flickr is out—at least as far as my main galleries go. The problem is that I wouldn’t be able to keep the old URIs, I’ve got very little control over the presentation, and I’d lose access stats. But Gallery 2.2 is also available through Dreamhost, and that looks more promising. There doesn’t seem to be any way to apply my own styles to the galleries, and that’s annoying. But I’ll keep looking. Part of me feels happy with the little scripts I’ve got now, which maybe just need to be spruced up a bit. But no: half the point of this exercise is to try out new technologies. There’s a learning curve, sure, but a smaller one than if I tried to develop all these features on my own. And in the end I’ll have learned some useful skills, kicked my site up a notch, and joined a growing community of WordPress users. And that is a very good goal to work for.

A New Look

Rejoice, for I bring you a version change. Here’s what’s new:

A new colour scheme, inspired by my recently repainted condo.
A search function, powered by Google. One of these days I may implement one on my own.

Rejoice, for I bring you a version change. Here’s what’s new:

  • A new colour scheme, inspired by my recently repainted condo.
  • A search function, powered by Google. One of these days I may implement one on my own.
  • The sidebar is now identical for all pages. I’ve dropped the “previous” and “next” links in posts since it seemed to confuse the aforementioned search function if one searched by post title.
  • A couple new archive categories.
  • The photo galleries’ footer text is now consistent with the rest of the site. Likewise, the photo pages’ layout is more consistent with that of the galleries.
  • Speaking of photo galleries, all my old galleries are back online (with a few additions). ’Bout fracking time.

Finally, major props to Browsershots. Without it, I wouldn’t have caught the IE double-margin bug that seemed to show up only in IE 6. Not 5, not 7, only 6. And of course my site looks fine in Firefox and Safari. Bah. Stupid IE. And I couldn’t ignore it, ’cos that browser makes up 40% of my traffic (such as it is).