Yesterday I made some odd, yet good progress on SOP. Getting sick of staring at code, I decided to bypass some of the more important stuff to work on some of the detail.

Currently on the SOP site there are ad spots along the sidebar, and because of some recent updates to design (thanks to the moving of the logo to the top left of the page) I needed to rework the graphics for it. I spent a lot of time trying to get the sidebar image redone, as it needed to be a touch longer; note to self, never test that whilst logged into my blog. You see, b2evo comes with a toolbar which appears at the top of the page if you’re logged in, whether you’re viewing the backend or front. It kind of screws up your margins, and plays havoc with testing of images.

Anyway, I then set about making some ad images, which will appear on longer areas - tutorials and books, for example - on single post pages. I figured that the addition of a second ad area is good to keep consistency in the design, but is probably not worth selling since it’s so low down on the page. A perfect place to place ads for sellable things, like patterns.

Then I checked my Lulu stats and discovered what patterns sell the most (Round Head is my biggest seller, with my fish shadow puppet pattern after that) and made ads in order of what sells. Technically I did it slightly the wrong way around, since I want to push sales of the newer moppet pattern. Fortunately I can rearrange at will.

This also gave me the opportunity to refine the ‘your ad here’ images. You can see I’ve slightly ‘buttonised’ them by playing with light and shadow: http://www.schoolofpuppetry.com.au/books.php. I also redid the border on my PIM ad, since the black square didn’t match up with my new rounded corners.

But today, I hit a bit of a wall. I’m still stuck on commenting, with a tiny little bit to fix. In order to get pop-up commenting working, I’ve had to delete the default code for the comment link and replace it with my own; problem is that this prevents the text of the link from working properly. Instead of having a number of options (leave a comment, 1 comment, X comments), I’m stuck with only having one text. Which doesn’t help if someone mistakenly believes there are no comments, when there are really 6.

I’ve tried a number of different methods to try and fix the problem, and no one at b2evo forums seems to have an idea. So I’ve started to look for a different method to show the comments. Initially I wanted CSS-only pop-ups - for those who don’t use javascript, which causes a lot of crappy ads to appear when browsing the net - which avoids a lot of problems for browsers as well. I haven’t managed to get it to work yet, which is why I ended up with a javascript version in the first place.

But it got me thinking along other lines. Leaving the problem for another day - again - I went to work on something desperately needed. A ‘download button’ for the patterns. Trouble is on the current PIM pages, people have to hunt for the download link. I read up on some good practices of download links, as well as product description pages, and came up with the ‘grab this’ image. You can see it in use here: http://www.schoolofpuppetry.com.au/tutorials.php. I thought a boring web 1.0 button was too blah, and noticed that one of the good examples had a bunny holding a download sign. I then thought, “why not use the logo?” A bit of careful editing of the image, the addition of a pdf icon, and voila! The ideal, attention-grabbing, download button. (On a personal note, I like the idea of ‘grab’ rather than ‘download’. It makes things seem more immediate, more urgent, more necessary. The image itself makes me feel as though I can be greedy and get the pattern all to myself)

I’m also hoping the placement of it will work well; right underneath the post’s heading, it gets your attention. And it makes use of a principle in web design which suggests that people who read left to right actually skip the bottom left-corner of the page. On the tutorials page, as linked above, I find my eye naturally wandering from the page title/post title, down to the ‘grab the pattern’ link, and down again to the read more link and sidebar. I also find no one really reads descriptions much, so putting the link at the top means more chance that people will click and buy, rather than fuss around trying to find the link and give up in despair.

And here we return back to the whole pop-up thing. Because I had no idea how best to display the information on the description page. Currently, the description is portioned off into ‘pages’, one of the functions of the blog, where you can separate paragraphs of text into pages, rather than a long post. Initially I thought about prettying up the page links and leaving it at that, but it was a bit boring and doesn’t really fit with the new design. But then I started thinking about ‘tabs’. It’s where you have a bunch of links, and depending on which link you click, different content will appear in the same place. This seemed like a perfect solution, hiding content away so as not to clutter up my nice clean design.

I looked into the b2evo forums for a way to do this, but there was only one post with info on how to hack the code. Not wanting to do that, I searched for a way to do CSS-only tabs. With some careful post-editing and some addition of a couple of lines of styling in CSS, this is what I came up with: http://www.schoolofpuppetry.com.au/tutorials.php/how-to-make-a-muppet-type-puppet-human-foam-puppet-pattern. (You can see my ads for patterns if you scroll down) I actually attempted this on the commenting/post’s content, but found that the page ended up looking quite lopsided, with a comment or two - or lots - on one side, and the sidebar on the other.

Again, the download link is in your face, ensuring that people who land on the single post page don’t have to scroll to find it. You’ve got the short paragraph seen on the category page, then a set of links, and then a list of features. (I’m hoping to add a ‘preview’ image here in the form of book made up of images of the actual pattern, but got stuck trying to get that to work too) Go and click on the ‘examples’ link… Done it? See how the example images appear nicely, removing the features list from view? Clicking on the reviews does pretty much the same thing, revealing… well, dud content which I haven’t edited yet. But you get the idea.

The cool thing about this is since I haven’t added any borders or anything to the ‘tabs’, you don’t even realise they’re there. I’m undecided as yet whether or not to better style the links to each tab, but I’m liking this sort of minimalist style of making the most out of the page space. Another thing I like is that no matter which tab you’re viewing, the download link never disappears from sight; it stays right where it is the whole time; and the ‘features’, ‘examples’ and ‘reviews’ are clearly marked and easy to find. No more hunting for what you want, just click and read!

Considering every bit of what you see on that single post page (ie. everything within the post title/content area down) is actually done within my blog’s text editor, it’s pretty impressive. The one thing I’m enjoying with this redesign is seeing just what I can do with the blog platform, and so far, it’s awfully limitless. Of course, I still haven’t solved my commenting system, but I feel like I’m one step closer to figuring it out.

I’m probably also not done styling this particular method of presenting content; the problem with flexibility is it also reduces your ability to maintain a consistent design. (I’ve also just noticed one problem, which is that you have to scroll back up the page to click a different tab link…) Articles and other content-based pages will end up having one design; pattern pages another; videos yet another… and so forth. This is why the minimalism of the tabs is important, to ensure it doesn’t look too different from other pages, and yet provides a different method of presenting content to ‘normal’ posts.

EDIT: Just before posting this I looked at the page in IE. And yeah, if it looks shit in IE, check in Firefox. I haven’t even gotten anywhere near browser compatibility yet. But hey, at least the tabs work in IE!