JeremiahTolbert.com: SF Writer Web Designer Photographer

Posts Tagged ‘Web Design’

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.

Jay Lake's New Site

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 Footer of a Client\'s Website

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?

A graphical depiction of a very simple css documentImage via Wikipedia

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.

About Me

Hi! My name is Jeremiah Tolbert, but you can call me Jeremy. I am a fantasy and science fiction writer, photographer, and web designer living in Northern Colorado. I am currently starting a new job and cannot take freelance work at this time. Drop me a line if you have any questions or comments. I love hearing from new people and I now have a lot more time to chat.

My Best Content

Recent Comments

Previous Photos at Flickr

Frozen Food Center (HDR)

Frozen Food Center (HDR)

A concrete building in Old Town, reminiscent of Soviet Russia. Once a warehouse of sorts, it is now a very badly maintained apartment building, at least from the outside. Hmm, that sky didn't look like that when I was working in photoshop. Single exposure RAW experiment.

>>>>

Vedawoo Trees

Vedawoo Trees

The trees of Vedawoo are twisted and gnarled by the high winds at that altitude much of the year. Not much grows up here, but what does is very hardy.

>>>>

Prayer Rock

Prayer Rock

From the right angle, these rocks look like praying hands, and I've always called them Prayer Rock. More haloing than I would like. I should probably process this one again, but I really like the foreground.

>>>>

Vedawoo Light

Vedawoo Light

The sun was at one of those great angles where everything low was still in the shjade, but the rocks were lit brightly. This is the kind of shooting opportunity that HDR was made for. This is one of my favorites, and is in excellent focus compared to some others. No matter what your shutter speed, you _cannot_ handshoot HDR.

>>>>

Vedawoo, early dawn II

Vedawoo, early dawn II

Another capture of the early dawn in Vedawoo, a rock formation in Wyoming. This reflects the pinkness of the sky very well.

>>>>

Vedawoo, early dawn

Vedawoo, early dawn

More of the Vedawoo rock formation in Wyoming. This is taken just barely after the sun came up. Everything was covered in frost and snow, resulting in a blue/pink miracle. Less hyper-real, more true to the actual situation. Oddly, a little bit of vignetting in the top left and right, but not elsewhere. I'm not sure how that happened. Actually might be caused by the highlight smoothing, come to think. I've been trying to eliminate the halo effect, which is what I like least in HDR, but it's hard in these landscape shots.

>>>>

Vedawoo Dawn

Vedawoo Dawn

The Vedawoo rock formations in Wyoming at dawn. It's not quite in focus. I need to work on my tripod locking. The blur I think comes from alignment issues.

>>>>

old water plant

old water plant

>>>>

Rocky Outcrop (Landscape)

Rocky Outcrop (Landscape)

>>>>

rocky outcrop with stones

rocky outcrop with stones

Trying to bring back the effect a bit. Was too much in the old version.

>>>>

Like Something Out of Myst No.2

Like Something Out of Myst No.2

>>>>

Like Something Out of Myst

Like Something Out of Myst

Gotta look at these at large or higher size.

>>>>


See More Photos at Flickr