Jay Lake’s New Site
Filed Under: Web Design
My latest client project is complete. Jay Lake, a SF/F author published by Tor Books, and winner of the John W. Campbell Award for Best New Author approached me with a desire to have a personal website that would be easy to maintain, incorporate his podcast, and allow him to crosspost blog content to his LiveJournal. For a design, Jay wanted something with a decayed industrial feel, imitating some of his photography and invoking the feel of some of his fiction.
This is a standard WordPress set up with about a dozen various plugins installed from Latest Comments to podcasting enclosures. No real problems presented themselves in its construction. Jay was a delight to work with and the site went very smoothly. These are the kinds of sites that I love to make.
Personal Interlude
Filed Under: personal
Things have been very busy outside of the day job (and at the day job as well, but who cares about that stuff?). I put most of the finishing touches on a new website for Rudi Dornemann last week. I’ll let you know here when he signs off on the site, and I’ll try and write up a postmortem at that point. It was a fun project, involving updating an older design of mine for a different sort of website.
I finalized my artwork for the Strange Horizons donation card over the weekend as well. I will let you know how to get that special Roundbottom art when the donation drive begins. I’m really pleased with how the image turned out. The poor little gob!
I’ve also put nearly every book I own into boxes for the impending move to our new place (only six blocks away from the current house, but $300 a month cheaper).
Blogging will be lighter over the coming two weeks as I’m in the process of finishing up a couple of freelance projects while packing for the move. I currently have no projects scheduled for June or July, so if you are looking for a designer, and want to discuss the possibility of hiring me, you know how to reach me. An awesome new website would be a good investment of your government stimulus check!
I will be on vacation in Oregon for the second week of June, but I can still work on a project for the latter half of the month. If nothing turns up, I’ll put that time into building the new Roundbottom site to go with the relaunch, and in general, just doing more photography.
Have you missed some of the recent Daily Photos? This link will take you to the tag that I file all the daily images under. I don’t usually post images over the weekend, but sometimes I get excited about sharing the work I’ve done and upload it earlier. On my list of things to do is to create a feed specifically for just the daily photos so that I can offer up my blog as a photo blog and get it listed in the directories for those.
One last exciting thing. We purchased a 24 inch LCD for the office computer over the weekend. It is mighty. So mighty that it gives me eye strain to work on it currently. I’ve had to dim down its light as much as possible just to handle looking at it for more than 20 minutes. But I opened up Photoshop first thing after installing it. Oh boy, the room. The room… Unfortunately, the machine it is hooked up to is not powerful enough to run the Age of Conan MMOG I just bought, which means I do not have a computer that can run it period. Perhaps a video card upgrade will solve my problem, but that is $100+ I don’t want to spend after dropping so much on the new monitor. Luckily, I didn’t really pay for the Conan game, but traded in a ton of stuff for it at GameStop. All part of slimming down my possessions for the move. The next step in this is holding a garage sale this coming weekend.
CSS Tutorial: Cleaning Up Footer Code
Filed Under: CSS, Tutorial, Web Design
For my first web design/css tutorial, I wanted to talk about a problem that I had, and how I solved it. This is pretty simple stuff, but it took me a while to grasp the idea, so I thought I’d share it with the half-dozen of you who do this sort of work.
Below is a screen capture of a footer of a blog I’m designing for a client. Typically, I like to include the navigation redundantly at the bottom of a page so that, rather than scrolling back to the header, a user can jump to wherever they want to go next. You’ll see this kind of basic redundant navigation in a lot of places.
The little line between links is called a pipe, and as a separator, it is pretty common. It’s just a simple little visual element to help delineate between the nav items. The trouble comes in when you want to use these in combination with dynamically generated code from WordPress.
The List Code
First off, navigations should pretty much always be a list in html. That’s what lists are for, and styling them is great and easy. And, coincidentally, WordPress returns a call for pages with list code. So the HTML for this list of links looks like this:
<ul>
<li><a href="#" title="Home">Home</a></li>
<li><a href="#" title="Blog">Blog</a></li>
<li><a href="#" title="Fiction">Fiction</a></li>
<li><a href="#" title="Other Writing">Other Writing</a></li>
<li><a href="#" title="About Rudi">About Rudi</a></li
</ul>
I stripped out some classes that WordPress adds automatically, as I don’t need them here. All of the above is contained in a div with an id of #footer. So, note that nowhere in that code is the pipe iteself. That’s because I am adding the pipe with CSS. You can add characters with CSS, you ask? Yep!
The CSS
#footer ul {list-style-type:none; position:absolute;
left:300px; top:27px; font-size:16px;}
#footer ul li {display:inline; color:#e3bd8e;}
#footer ul li:after {content:" |";}
So what’s going on here? First of all, I am using Eric Meyer’s CSS Reset above this, so all of that default padding and styling on a list has been stripped. This means the only styling that happens is the styling you want, and it creates a baseline between browsers. It really makes my job easier.
So we’re styling the list itself to have no bullets, and we’re positioning it absolutely within the container. You don’t have to do that, but I just found it easier for my needs in this particular footer. Next, I wanted the list all on one line, so I added display:inline. Finally, I’m using the pseudo class :after and the property content to insert a space and the pipe after each item on the list. Say my client wants these items separated instead by an asterisk? Easy enough to change across the entire site with that one line.
Pseudo classes aren’t something I often use, so the next thing I wanted to do tripped me up. The code above will add a pipe after each li tag, but I don’t want one on the last one. There’s no reason for it. How in the world do I do that? I know how to use the :last-child pseudo class, but it alone wouldn’t let me remove the pipe. Turns out, you can and should chain together pesudo classes
#footer ul li:last-child:after {content:" ";}
I probably could have set that to content:none as well, now that I think about it. But a plain space in my case works just fine.
So there you have it. The moral of the story? Chain pseudo classes together to get what you want. Any questions?
Related Links:
5 Reasons Why SF/F Author Websites should be (more) standards-based
Filed Under: SF Business, Web Design
I am often asked to comment on the web designs of friends and associates. It’s a tricky situation for me. Regardless of the visual design, which is usually fine, often, I find problems underneath the hood that are difficult to explain. What I find are sites designed with tables-based layouts, using older HTML techniques. Today, I’d like to make the case for why you should discard that old way of design and move to standards-compliant design.
1. Accessibility
A web design done with standards in mind is broadly accessible. I have noticed that the SF/F fandom is particularly accepting of those with handicaps and disabilities, but many SF-related websites do not take these fans into consideration. A properly designed web site takes makes allowances for the use of screen readers and other accessibility tools. Tables based designs make a mess of this. Accessibility is a small part of standards-based designs, based on the number of people that it effects. But do you really want to run the risk of alienating any potential fans?
2. Ease of Maintenance
With css/xhtml-based designs, the content is separated (mostly) from the presentation. Here’s what this means: say you have a new book coming out that you want to promote. If your site is built with old techniques, updating your design involves a complete teardown and rebuild. However, if your site has been built with standards, you could simply replace the stylesheet and have an entirely new design that reflects your primary project. In general, these websites are very easy to make changes for, as far as presentation is concerned. Don’t like that link color? Edit the CSS, and it’ll change across the site.
3. SEO Implications
A standards-based design takes search engine optimization into account straight away. Proper page structure, even if it is not perceived by humans using browsers, will be picked up by indexing services. Building your site with standards in mind does not automatically mean higher rankings, but it certainly helps.
4. Less Bandwidth Intense
Standards-based designs are lean and quick. CSS is downloaded once, whereas in the old way, the presentation would be downloaded over and over again. Your file sizes are all-around smaller, which means a faster website, and happier visitors.
5. Your website is like the cover of a book.
A standards-based design can look good or it can look bad. But more often than not, they look pretty good. Your website is like a book cover. Whether you know it or not, potential readers are evaluating whether or not to pick up your work based on your website. They may not even know it–it may just be subconcious. But good design facilitates the presentation of information, and you are in the business of selling that. Your website should reflect a level of professionalism at least on par to the cover design of your books. Don’t commit a sin on the level of the SFWA website, please.
Afterword
Despite all this, I am not a standardsista. Sometimes to satisfy the desires of your client, you need to bend the standards a little, and I still sleep okay when I have to do so. Like anything, you can go overboard with the idea of standards-based design. But in general, the above are some very good reasons for hiring a professional designer who is familiar with standards to provide your site–or if you are a do-it-yourself-er, picking up some books on XHTML and CSS. This is the part where I plug me. You already know I do web design, but if you’re interested in learning more about my client process, visit my freelance information page.
