Design Thoughts

This is partly a test to see if the Facebook integration is working, and partly some notes on design for the site. There are still plenty of things to add, and you can feel free to add to the list.

Where to click for the profile page First up I need to write an authors.php file. This will list the posts by each author on the site. In order to do it properly I also want the template to pull out things from your profile here in your dashboard. Click on your name next to where it says Howdy, and you’ll be taken to your profile page. You’ll have the various proof reader options and below that you’ll have the section for your name, website etc. including a section Biographical Info. If people fill out those I can pull this data into the author.php file. I can also, if people want, append it to the post so it appears at the bottom. Your photo will be taken from Gravatar.com – which is a pain for me as I have trouble accessing it, but I’ll have to find a way.

Looking at the Mendeley Related Papers plugin, if you don’t tag a paper the page dies. Nothing appears after the killed plugin. No comments, no sidebar and no footer. I edited it for AoB Blog, and I’m sure I can do something similar so that it says “Oh dear I can’t find related posts” and not just kill the process.

I’m looking at adding a pullquotes option. This would work by typing as usual with <span class=”pullquote”>the thing you want to appear in the pull quote</span> being put in a span. This would mean that if the pullquote class were removed from the blog the text would appear normal without any styling. You don’t get pullquotes in serious journals, so why should the blog have them? The reason for this is that reading on a screen is a different experience to reading hardcopy. You can keep track of moving through a physical article by the feel of pages and the small break as you turn a page over. On screen nothing physically moves. You can keep track of distance using the scroll bar, but as solid text there’s little for the eye to keep track of to indicate progress. It’s a monolithic chunk of text. Dropping in an image or a pullquote every four paragraphs or so breaks up the text so that there’s something you work past to give a feeling of progress. Pullquotes can be easier to find in a paragraph than an appropriate image for long chunks of text and can emphasise a key point. If anyone thinks this is a bad idea, now is the time to say.

This reminds me. I also need a make print.css file so that the pages can be printed off sensibly, for exactly the same reason. Screen != Print.

I’m also looking at adding more shortcodes. {cc}licence{/cc} to output “licenced under a Creative Commons licence licence.” So {cc}by-nc-nd{/cc} would produce licenced under a Creative Commons by-nc-nd licence. The reason is to make photo crediting easier, so you just type “Photo title by name {cc}by{/cc}” to credit a photo. It doesn’t remove all the pain, but hooking into the Flickr API to autoformat credits is likely to cause more problems than it solves. It also allows the cc code to be used for video and audio in the future.

I’m thinking of an {image} shortcode too. At the moment to trigger the projector mode for images you have to insert the photo, go to the HTML view, find the link in the mess of code that is the caption code, type in rel=”prettyphoto”, and then most people will want to flip back to the visual editor. I think {image align=”optional” width=”optional” caption=”optional”}Image URL{/image} could be used instead. You upload the image, copy the file URL and then exit without inserting the photo to type in the code. By default the image would be 500px centre-aligned with no caption.

There are drawbacks to using shortcodes. These shortcodes only worth with this theme, so when the theme changes you’re left with broken shortcodes that don’t display. However, shortcodes can sit in the function.php file, so it’s easy to insert them into new themes. Also this theme uses PrettyPhoto to project images. If we move to one that uses Lightbox then all the rel=”prettyphoto” additions in the code mean nothing. An {image} shortcode could be edited to automatically make the necessary changes to fix the image links.

That’s what’s on my immediate design list with authors.php and print.css at the top of the list. I’ll also get the CFP for the theme posts out as soon as possible.