Bettr, an application that is all about making Flickr look better, hit 2.0 the other week. But not satisfied with the changes that came with it — the introduction of the menu, allowing the viewer to go back to the homepage, to the user’s photos on Flickr, or to select from their sets — we decided to keep going and make it even bettr.

At the current version of 2.2.3 you can now enjoy the ability to view videos as well as photographs!

If you have been using the Bettr bookmarklet (added in version 1.4) then that’s been updated too. So adjust your bookmarks accordingly to enjoy improved username functionality — you too can now view the flickr streams of people with usernames including punctuation, unicode, smileys and other goofy shit.

Bettr aims to make using Flickr to view photographs, videos, and everything else you can find on it much easier and much, much nicer to look at.

We hope you enjoy it.

Firstly though, the three-day weekend that Jason touts doesn’t work for me.

Three-day weekends mean people come back extra refreshed on Monday. Three-day weekends mean people come back happier on Monday. Three-day weekends mean people actually work harder and more efficiently during the four-day work week.

Yeah, that is definitely not what happens for me. Once I’ve taken a three-day break from work it’s very unlikely I’m going to be able to get straight back into it on the Monday morning. So I thought about it, and wondered why you had to take the Friday off, if you’re working for yourself then can’t you take off any day in the week you want? I chose Wednesday. I dont really have any problems with Wednesday, it’s a nice enough day (as days go), but if I take it off then I’ve broken up my work week into two easily manageable chunks:

Wednesday now becomes a ‘free day’; to go to beach (if it’s not raining, which it usually is), movies (if there’s ever anything on, which there usually isn’t), play video games (which at the moment is Demon’s Souls), or do whatever.

Best of all, I’m getting just as much work done (sometimes even more) as I was with a five-day week. If you work for yourself, I highly recommend it.

By now you probably realise the dire state of reading on the web. Articles will be split across multiple pages, animated Flash ads will do what they do best: distract you, the background will clash with the type, the text will be too small/big, the measure too wide/narrow and the list goes on. All in all; it makes for a terrible reading experience. Enter (about a year ago): Arc90 with Readability.

I started using Readability when it was first announced, and although I wasn’t immediately impressed in a big enough way to give it pride of place in my bookmarks I still followed any updates with great interest. Now with the latest editions – annotated hyperlinks, Typekit fonts, and more options – I’m just about satisfied … though not completely so.

Here we have Jim DeVona coming in to pick up the slack with McReadability. Just swap out a single CSS file in your Readability bookmark and you too can enjoy multiple column reading. I’m still not 100% happy but until I get around to building one just for me, this will do fine.

Reading the New York Times can go from this:

To this with Readability:

To this with McReadability:

Last week I finally trawled through thousands of photos archived on my HDD and got to work uploading them to a Tumblr. It’s the place to go if you want pretty pictures of good design, art and photographs (and don’t mind a bunch of cars too) and want the rest of the stuff to get out of the way.

We don’t like Facebook that much. But until all our friends realise how terrible Facebook’s policies are we’re stuck with it. So we started up a page for our site. It’s only related to our work by name, serving as it does as an internet phenomena portal. Think of it like a meme filter — from us to you.

So I’ve started taking the FT2 out again for pictures. Only this time I’m shooting China Lucky 100 and developing it myself in HC-110. Examples below:

I’ll make sure to get around to writing up another post detailing my processing and scanning routine soon.

This is the story of a young mans love for his right hand — which is also a man eating space parasite. Not to be confused with Midori No Hibi which is the story of a young mans love for his right hand — which is also a Japanese school girl.

There is a lot of murder and a few gruesome killings, some romance and at one point the right arm, whose name by the way, is Migi, turns into a giant penis. Laughs are had by all.

I have been brain dead lately and/or studying so there has not been a lot of time for actual enjoyable reading — a comic about space parasite murder was perfect for me. So if you find yourself in the same position you should check it out.

We’re a Dundee based multidisciplinary team with a focus on web design and development, graphic design, copywriting and typography.

We offer a professional, dedicated service and believe that good design should be the standard — not the exception.

Web Design & Development
Superposition Kitty are involved in all levels of the web design and development process, from the original sketch to the final code. This means no outsourcing of files to India for cheap — yet messy and often invalid — coding.

Web development is constituted of both front-end — HTML, JavaScript, and CSS amongst others — and back-end coding — PHP, and Ruby on Rails etc.

We are highly proficient in all of the technologies mentioned here, as well as many of the popular Content Management Systems (CMS’s) in use today — such as WordPress (the CMS on which this site is built). If what you’re looking for isn’t mentioned here then feel free to contact us — Superposition Kitty posses a wide range of coding skills and are always happy to help.

Our designs meet all standards necessary and where the inclusion of such technologies as JavaScript (or even Flash) are required– which all users may not have installed or activated — we make sure that the design degrades gracefully so every customer will get the necessary information, beautiful formatted.

This also includes upcoming technologies such as HTML5 and CSS3. Many older browsers do not (and will not) support such standards, but we make sure that their users can still have as enjoyable an experience as possible. This means that we still design for Internet Explorer 6, and are one of the (increasingly) few design agencies doing this.

We recognise that many people are simply unable to upgrade from IE6, whether it is due to technological or company-imposed restrictions. We do, however, recommend that people use a more modern — and standards compliant — browser such as Google Chrome, Firefox and Opera.

Speaking of web standards, we exert every effort to make sure that everyone with access to the internet, whether they’re using a screen reader or the latest browser, can enjoy the ease of access and consistency we seek to provide. We have worked with vision impaired users in the past, and have experience in dealing with the many issues for such users that arise from poorly designed websites.

We also provide Search Engine Optimisation (SEO). This does not mean the spamming of blogs and forums with links to websites as you so often see, but rather it involves making it as easy as possible for Google and other search engines to ‘see’ your site by providing them with directions, keywords, site maps, etc.

Web Hosting
We also offer hosting packages. As mentioned previously, we are hosted with Linode — a dedicated VPS provider with rackspace in America and the UK.

For a small monthly fee (with an additional initial set-up fee) we will host your website. Your site will be hosted with only a small number of other sites, thus ensuring that you are provided with the resources you need. This fee does not include unlimited bandwidth — but we will notify you long in advance of you hitting the 100GB limit we impose at the base level so that we can discuss upgrading your hosting package. It does, however, include unlimited email addresses and regular maintenance and upgrades.

Any additional changes to design or coding are of course billed at an hourly fee or according to contract.

Typography
We currently have two typefaces as part of our portfolio, with more to be added in the coming months. Pixl is available to buy now in three different versions: Sans-serif, serif, and monospace.

Segment is a 16 segment display font, designed originally for a project and now made available to the public. You can download it for free from Dafont for personal use only.

These (and future) typefaces are fully licensed for the latest technologies — such as @font-face — if you choose to purchase them for non-personal use.

In this instance a smaller and more nimble studio like ours is out ahead of the larger, more traditional, studios and foundries.

We have a love for good typography, and as such can design a custom font for your logo or even an entire typeface for your company branding. We work with the OpenType format, which allows for various advanced typographic features such as small caps, oldstyle numerals, and ligatures.

Print
Designing for print is different to designing for the web. It requires that the designer handle bleeds and margins and colour processes, and although you can’t touch a website, you can hold a beautiful design printed on a thick piece of cardstock in your hands. Good print design should be tactile, sumptuous and of course, beautiful.

This is why we offer screen printing in house.

Screen printing has an entirely different feel to something that has come out of a printer — as the ink is slightly raised off the card — and it even allows for glow-in-the-dark inks or metallic colours. We design, build, burn, and print the screens here at Superposition Kitty, and we specialise in small-run, few-colour designs. We can screen print anything from business cards to A2 sized posters, and are always willing to take on printing jobs from other designers upon request.

Contracts
Here at Superposition Kitty we believe in the power of the written word, and thus a signed contract is compulsory for all work we undertake, whether it is for £1 or £100,000.

Should you choose to work with us we will send you a sample contract for your consideration before any work is begun. If you wish to make some changes to this contract then this is something that we will welcome and work with you on. All modifications will be consideration provided they fall within the bounds of reason.

Although we have never had a case taken to court, we believe that a contract is necessary to protect both parties, and we feel that a contract offers more than simple legal protection: the act of writing down, reading, and signing all the relevant details to the project ensures that no misunderstandings crop up later, whether they are related to fees, scheduling, the work to be undertaken, or anything else.

Thank You
We hope this document has been helpful to you. Should you have any questions relating to this — or anything else — then please email me at ryan@superpositionkitty.com.

If you’ve visited the site recently you may have noticed some new icons on the front page. As you have to click refresh a few times to view them all (they’re displayed using a Javascript random function) I thought I would show them all here on the blog.

I’m pretty sick of the way Flickr forces you to view people’s ‘photostreams’. The pictures are always too small and I don’t care about any of the text. So with the help of phpFlickr — and a few spare evenings — I came up with my own:

Bettr v1.2

It turned out to be quite easy, although there were a few obstacles to overcome. I had to do a little hacking to get pages to work, and retrieving the dimensions of the images for David DeSandro’s Masonry to work its magic was problematic. At first I was using getimagesize to parse the dimensions, but it turns out that getimagesize will download the entire image before getting the width and height (thus slowing the page to a crawl), so I had to turn to flickr.photos.getSizes.

If you have any feature requests or interesting ideas then leave me a message in the comments. But be warned that Flickr makes you get permission from the user before doing any cool stuff such as uploading pictures or even displaying the original size.

Update:You can now copy and paste urls to peoples ‘pages’ on Bettr, like so: http://bettr.superpositionkitty.com/#/harry%20kaufmann/.

Bettr is displaying the photos of Harry Kaufmann in the image above. Bettr is not affiliated with Flickr in any way etc. etc. etc.

Stephanie Meyer is writing another book about VAMPIRES. Imagine that!

(Note: imagining a Stephanie Meyer books in any way guarantees that you’ve thought about it more than the author ever has.)

I’m sure, as a sane person, that you’re thinking ‘Why? Weren’t four enough?’. Well unfortunately friends, four is never enough — especially for someone who ran out of plot at around page twenty-five but kept on going for the remaining one thousand, six hundred and seventy five pages anyway. There can never be enough for that kind of person.

And it’s almost entirely certain that there can never be enough of anything for the force known as the Teenage Fan Market. As long as they can scream themselves into pants wetting unconsciousness over it or fatuously self-identify with it then they’re all for it. Just you try stopping them.

So more Twilight it is. This time in the form of a free to download novella titled The Short Second Life of Bree Tanner.

You’re thinking ‘Who?’, right?

Don’t worry — so was I, and I’ve (sadly) read the whole bloody saga.

(Note: someone needs to tell me how Twilight actually qualifies as a saga. Seriously.)

Luckily for both you and I the existence of such a thing as a Twilight Wiki (I fucking KNOW) makes it possible to find out ‘what the hell’ almost instantaneously.

So Bree Tanner is a ‘new born VAMPIRE’ created by the ‘evil’ (though in my opinion perfectly reasonable and likeable) Victoria during the course of the third novel as part of an ill-fated revenge plot to murder the fuck out of central character Bella Swan.

We all remember Bella Swan right? Dull, dish water brown and more insipid than a whole mountain of very insipid things. A turbo twat who sacrifices college, an education, an independent future and in the end, even her own humanity to get teen pregnant to a one hundred year old misogynist creeper. That Bella Swan.

I’m sure we remember her. It would be difficult to forget her given the popularity of both the books and movies she features in.

Which brings me, in a round about fashion back to the point I began with — The Short Second Life of Bree Tanner, to be released online and in books stores on June 5th of this year.

It promises to be — and I’m sure Meyer and the people who optioned the rights to her work would back me when I say this — A MUST HAVE, MUST READ EVENT THAT WILL ADD DEPTH AND UNDERSTANDING TO YOUR … UH … UNDERSTANDING, I GUESS, OF THE TWILIGHT UNIVERSE AND HOW MUCH VAMPIRES RULE … OR SOMETHING

Or to use less CAPSLOCK and sarcasm, it’s an extremely clever marketing ploy.

This doesn’t take a huge work of effort or genius to work out — unless you happen to fall into the membership criteria for the Twilight fandom.

(Note: membership criteria for the Twilight fandom consists of being a thirteen to seventeen year old girl, or, if you’re older then you have the mental age and capacity of a thirteen to seventeen year old girl.)

All you have to do is take some time to think it over and eventually the realisation will dawn on you.

“Hmmmm…’, you’ll think, “…a new, free to read Twilight novella about a character featured in the third book of the series Eclipse … I wonder when that movie comes out…”.

You already, or course, know when the movie comes out, even if you don’t now the exact date. Experience and healthy cynicism tells you when: twenty-three days after the release of The Short Second Life of Bree Tanner.

You know this because twenty-three days is the exact amount of time necessary for a Twilight fan to read a novella, talk to their friends about how totally cool it was, knowingly tell people who haven’t read it yet just “How much, you know, deeper it makes Breaking Dawn ’cause it’s like, sad and junk”, and then get SUPER EXCITED about the movie which they will undoubtedly go to see six times in the theatre because Robert Pattison is so dreamy and not at all a poor square headed chump who should have run a mile the moment his agent mentioned the role of Edward ‘Creeper’ Cullen to him.

(Note: poor Robert Pattison. Dude got hit by a car because of those movies… but I digress. A lot.)

Whoever came up with this idea is a bloody genius. Whether it was Meyer herself, her publisher, her publicist or the marketing team at Summit Entertainment or where-ever — whoever it was, it was a masterstroke.

But apart from appreciating the marketing genius of it, why care? It’s just a book. It’s just stupid VAMPIRES. Who cares about VAMPIRES?

No-one but teenage girls (and the emotionally crippled) right? So why bother writing about it?

It’s not like impressionable, vulnerable young women are being exposed to a large amount of questionable and potentially dangerous ideals and attitudes. It’s not like the Twilight novels actively promote abstinence based sex ed. and toleration of abusive relationships.

Wait. What?

You mean impressionable young women are being exposed to these things? And the Twilight books do promote that stuff?

Well why didn’t you say so before?! Come on in! We’ve got so much to talk about!

If you’ve previously waded your way through my previous Twilight rant then you’ll be familiar with a number of my moral objections to the series. You may, if you don’t feel like re-treading some arguments and expanding them a little further want to Skip to The End at this point.

If however, you’re like me, and you could wail on dumb books from here until the end of the world and never once get tired of it then stick with me for the next little while. I will not let you down.

Stephanie Meyer, on some occasions, has been heard to make the grand claim that her novels, as they stand, are a study or masterwork on a ‘woman’s right to choose’ as engendered by modern wave feminism. The choices made by central character and feminist icon in the making Bella Swan about her future are her own to make.

The Twilight Saga then, is a celebration of female empowerment and therefore a gift to young women.

Apart from when it’s not. Which is all the time.

In actual fact, in penning the Twilight Saga Meyer has committed a crime akin to aggravated assault against teenage girls and their ability to choose a future not filled with terrible choices.

On closer inspection the real message conveyed by the novels is nothing more than ‘There is always a magic bullet!’.

Any of your problems — from acne to heartbreak and back — can be solved, not by any human endeavour or effort but by becoming a VAMPIRE (!).

Your friends are lame and just don’t understand you? Become a VAMPIRE!

Your parents are divorced and your relationship with your father is a fractured mess? Become a VAMPIRE!

Your boyfriend is an older, possessive creeper who sneaks into your room at night while you are not even dating to watch you while you sleep and who, once you are dating, tells you who you can and can’t hang out with? Become a VAMPIRE!

Your sex education has either been entirely absent or entirely abstinence based (same thing) and now you’re teen pregnant after your first sexual encounter? Become a VAMPIRE!

There is nothing in the world that being a VAMPIRE cannot fix. Working on becoming a better, well rounded person with self-worth isn’t something a mere human could possibly do so why bother?

After all you’re already a unique and special flower waiting for your one true love to complete you and whisk you away to a glamorous, supernatural forever. It’s what you deserve! If only your parents/friends/teachers/THE WORLD understood, right?

Wrong.

All Meyer has done is collect a wealth of experiences common to the teenage girl (or emotionally crippled adult) and spewed them out, slap dash, willy nilly and haphazardly around the place. The end result is a series of novels, each worse than the last with which teenagers can relate to but which ultimately have no value other than that.

The responsibility and opportunity to reach out and inform young women with her writing is utterly ignored in favour of encouraging and revelling the in self-centred, foolish and uninformed decisions of teenage girls the world over.

The Twilight Saga, at it’s heart is nothing other than a fantasy about how cool it would be to ignore all your problems and the real world and marry a VAMPIRE. Fine. That’s o.k.

Let’s just not pretend it’s anything other than that.

I will admit that it may, arguably, be feminist — women, do after all have the right to be respected in their decisions, no matter what they are. There should be no hierarchy of what is a ‘better’ choice — becoming a career woman or a housewife. Neither is ‘better’ than the other. Both are simply decisions made by individuals about the their own futures and personal happiness in life. To each their own. No one woman is representative of all women and to act as if this were the case is backwards looking, insulting and dumb.

It may therefore be argued that the novels, although feebly and I suspect accidentally, touch on an important and current debate ongoing within modern feminist circles.

It cannot however be argued that the choices portrayed in the novels are at all sane.

Encouraging a teenage girl to believe she knows better than everyone else on the planet about her abusive, unequal relationship, and that ‘Hang the consequences! TRUE LUV IS 4EVA’ is functionally retarded.

Couching teen pregnancy within the bounds of marriage does not a happy ending make.

If you’re preaching abstinence — and Meyer is — why not preach about it lasting into your mid to late twenties so that your protagonist can actually have her own life between leaving high school and motherhood?

If not, why not preach safe sex?

Setting all this aside however I cannot, and will not, claim that the Twilight Saga is entirely worthless: it makes idiot kids happy, which is nice. Everyone deserves to be happy. It introduces and encourages reading in young adults (hopefully) functioning like a gateway drug to more and better books. Increased literacy is both cool and a good thing.

And above all else they serve to highlight the concerns of young women. This is invaluable.

Somewhere inside the mess of plot, abuse of the English language and sickening middle ages wish fulfilment is a bright and shiny kernel of truth.

Somewhere beneath the surface of the truly terrible journey into the underbelly of the soul that is the Twilight saga is the condensed experience of the adolescent female, who, at the centre of things seems only to yearn for something more than all of … this.

Poor girl.

Who knows what Meyer could have done for young women if only her powers of empathy with them had been used for good instead of crippling mundanity.

Sadly, in reality any sequel or extension to the Twilight franchise (because that is what it is now), such as the ill-fated Midnight Sun or the soon to be released Short Afterlife of Bree Tanner will probably continue this trend of disappointment and the practice of actively short changing its reader base.

Wouldn’t it be nice though, if something else were to happen instead? Wouldn’t it be great if say, a more realistic or balanced sequel were to appear?

What if it went, for arguments sake, a little like this:

…Eight years on from the conclusion of Eclipse Bella and Edward’s child Renesmee has grown up and fled the nest of the Cullen’s idyllic cabin in the woods in a fit of disgust at her mother’s childlike obsession with her father and her damaging lack of self-respect. She has stopped shaving her armpits, eating meat and humans and wearing or using animal products and has begun attending an Ivy League school where she is currently reading Enlgish Literature and Women’s Studies.

Meanwhile all is not as perfect as it seems within the happy marital home — it transpires that Bella is the worst kind of needy supernatural shrew. She never sleeps, as VAMPIRES has no need to and is a twenty-four seven ball and chain, attached firmly to her husband. The same husband who is having problems of his own…

Edward, you see has discovered his mistake — his real attraction to Bella came not from being bonded soul mates, but from the excitement of their fraught and dangerous relationship. Having confused love with situational lust and subsequently impregnating Bella before transforming her into a VAMPIRE he has removed both her humanity — her only redeemable feature — and his desire for her. Consequently he’s been stepping out on her with younger, mortal college aged girls in an effort to relive the torrid excitement of times past…

The rest of the novel would be a carefully balanced story of betrayal, retribution and ultimately personal growth and redemption as Renesmee, Bella and Edward are forced to deal with their issues and relationships like real, grown up people.

Or rocks fall and everybody dies. The End.

That’s the only new Twilight novel I want to read. I don’t care about poor old Bree Tanner and her short and almost assuredly self-absorbed little life. I want to the story of after forever after — the cautionary tale of how one comes to terms with the stupid decisions set in stone by the mistakes you made when you were younger.

I want an aspect of realism.

i want a nod to the responsibility Meyer should feel to her own characters and to the millions of young women who have contributed to making her who and what she is today.

I want Bella to die in a fire.

However, we do not often get what we want.

But we can dream…

(Note: all characters mentioned in the above post are the creation and “intellectual” property of Stephanie Meyer. Thank Christ.)

I’m sick of every web statistics monitoring tool out there. They either give me too much information or not nearly enough — and they universally fall down in one area that is very important to me: looks. I think it’s something to do with the desire to cram in as much information as possible, but I don’t care about your screen resolution, OS, continent, timezone, browser plugins, search engine, last time visited, or any of the other myriad pieces of information that is made available to me.

The only stats package I found remotely good looking was Mint, but I just can’t get over my desire not to pay for things that should be free, especially when that money is going to Shaun Inman. I just don’t like him, don’t ask me why. I think he hates cats, or maybe that was Gruber. God I don’t know, they’re all the same.

Aside: Okay this is creepy. Just as I am typing this Google sends me an email about Google Analytics. Fuck you Google I’ve already used Google Analytics and I didn’t like it, now stop spying on my searches.

Anyway, I’ve been using Piwik for a few months now. It’s pretty great — there’s all sorts of modules and plugins and detailed reports — and best of all: it’s free. But damn it’s ugly, even uglier than the rest of them (they’re working on this, but it may be a while). However, where Piwik really shines is its API. I can pull whatever data of mine I want out of Piwik and import it pretty much anywhere. I can do this:

Pretty Stats (v0.1b)

Isn’t that pretty? You’re probably using the latest version of Chrome, Opera, Firefox, or Safari if you agreed with me. I’m afraid that a lot of the CSS3, HTML5, and jQuery functions fall down in other browsers at the moment.

If you’re using one of the above browsers and didn’t think it was pretty, then screw you, go design your own stats package man.

This is only version 0.1 (beta) of Pretty Stats, it’s still missing a lot of the functionality. I’m hoping to release this as a package in the coming months as an add-on to Piwik (obviously under the same GPL license). This is where you come in. If you have a server, the ability to follow some instructions to install Piwik, a modern browser, and a want for prettier stats — then email me at ryan@superpositionkitty.com to get in on the beta.

First off you’ll have to follow the previous tutorial. You can leave out the steps involved in copying inlineplayer.js and inlineplayer.css to your site as they won’t be needed for this tutorial. I’d also recommend that you replace soundmanager2.js with soundmanager2-nodebug-jsmin.js (you’ll find it in the same folder).

Today I thought I’d concentrate on page player — also known as Muxtape–style UI — as it’s one of the more popular SoundManager UI’s. Just as you copied inlineplayer.js and inlineplayer.css and linked them in the head of your theme previously, you’ll do the same with page-player.js and inlineplayer.css this time around. Then in any post you want to use page-player you can paste something along the lines of:

<ul class="playlist">
<li><a href="../mp3/song1.mp3">Artist 1 - Song 1</a></li>
<li><a href="../mp3/song2.mp3">Artist 2 - Song 2</a></li>
<li><a href="../mp3/song3.mp3">Artist 3 - Song 3</a></li>
</ul>

<div id="control-template"><div class="controls"><div class="statusbar"><div class="loading"></div><div class="position"></div></div></div><div class="timing"><div id="sm2_timing" class="timing-data"><span class="sm2_position">%s1</span> / <span class="sm2_total">%s2</span></div></div></div><div id="spectrum-container" class="spectrum-container"><div class="spectrum-box"><div class="spectrum"></div></div></div>

That block of <div>‘s and <span>‘s are necessary for the layout of the UI while playing, so make sure you don’t forget them.

This will result in something similar to the SoundManager demo, but that wasn’t what I was looking for. What I wanted was a much-simplified version of this layout, as below:

• E.S.L. — Girls
• Fujiya & Miyagi — Collarbone

You may notice that the timer doesn’t appear until the song has fully loaded, unfortunately there’s no way around this. I’ve also occasionally noticed a problem where the song doesn’t completely load and will stutter or start to loop in certain sections, this only seems to occur with longer, larger in size, songs. Generally, clicking on another song and back to that one will fix the problem.

To achieve that you’re going to have to modify some CSS. Make sure you overwrite the styles in inlineplayer.css with the below:

ul.playlist {
padding-bottom: 18px; }

ul.playlist li {
  position: relative;
  display: block;
  width: auto;
  height: 18px;
  background-color: #F5F5F5; }

ul.playlist li a {
  display: block;
  color: #555555;
  font-size: 12px;
  position: relative;
  z-index: 2; }

ul.playlist li:hover {
  background-color: #EEE; }

ul.playlist li .controls {
  display: none; }

ul.playlist li.sm2_playing .controls, ul.playlist li.sm2_paused .controls {
  position: relative;
  display: block; }

ul.playlist li:hover .controls .statusbar {
  position: relative; }

ul.playlist li .controls {
  position: relative;
  margin-top: -18px; }

ul.playlist li .controls .statusbar {
  position: relative;
  height: 18px; }

ul.playlist li .controls .statusbar .position, ul.playlist li .controls .statusbar .loading, ul.playlist li .controls .statusbar .annotation {
position: absolute;
  left: 0px;
  top: 0px;
  height: 18px; }

ul.playlist li .controls .statusbar .position {
  background-color: #99ccff;
  border-right: 3px solid #99ccff; }

ul.playlist li.sm2_paused .controls .statusbar .position {
  background-color: #CCC;
  border-color: #CCC; }

ul.playlist li .controls .statusbar .loading {
  background-color: #E5E5E5; }

ul.playlist li .controls .statusbar .position, ul.playlist li .controls .statusbar .loading {
  width: 0px; }

ul.playlist li.sm2_playing a.sm2_link, ul.playlist li.sm2_paused a.sm2_link {
  margin-right: 4.5em; }

ul.playlist li .timing {
  position: absolute;
  display: none;
  text-align: right;
  right: 0px;
  top: 0px;
  width: auto;
  height: 18px;
  line-height: 18px;
  vertical-align: middle; 

ul.playlist li:hover .timing {
  z-index: 2; }

ul.playlist li .timing div.sm2_timing {
  margin: 0px;
  padding: 0px;
  margin-top: -1em; }

ul.playlist li.sm2_playing .timing {
  display: block; }

ul.playlist li.sm2_paused .timing {
  display: block; }

ul.playlist li.sm2_paused .timing .sm2_position {
  text-decoration: blink; }

#control-template {
  display: none; }

That’s a lot of CSS, but hopefully it should be reasonably self-explanatory, Scott Schiller did a great job of naming the classes to make it as easy as possible. If you want to try and mess around with the style then you can replace all the 18px’s with whatever you want the hight to be, and the colours with whatever new colour you want.

I hope you found this as helpful as everybody seemed to find the first SoundManager 2 & WordPress post. If you have any questions then feel free to post them up in the comments below.

Replace your doctype with <!DOCTYPE html>.

That’s it, you’re done. Of course, in doing just this you’re not going to be taking advantage of any of HTML5’s wondrous new features. I’m not taking advantage of any of these features at the moment either, but I did want to pave the way for implementing them in the future.

However, before we run off into the wonderful world of <header>, <footer>, and <article> tags and their ilk, we’re going to have to add a line of code to the <head> of our document to get Internet Explorer to treat them properly:

<script src="http://html5shiv.googlecode.com/svn/trunk/ html5.js"></script>

With that out of the way we can now go crazy with these new semantic elements. I’ve updated the structure of Superposition Kitty as below:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
</head>
<body>

  <header>
    <nav>
    </nav>
  </header>

  <article>
    <header>
      <h1>Post Title</h1>
      <time datetime="" pubdate></time>
    </header>
      <p>Content</p>
  </article>	

  <footer>
  </footer>

</body>
</html>

This is just to give you some ideas of how to use these new semantic elements in your markup. Also, there are a couple of things you’re going to want to know if you’re using the <embed> code supplied by YouTube or Vimeo in your posts. The first is that you should add type="application/x-shockwave-flash" to the <object> elements. The second is that the <param> and <embed> elements must be closed with /> in their start tags, with no end tags (eg. </param>) allowed.

There are a few other differences in markup between previous versions of HTML and HTML5 (such as <script> and stylesheets no longer needing type=""), you’ll find a good breakdown of what you’ll need to know here.

Superposition Kitty is a Dundee based multidisciplinary team with a focus on web design and development, graphic design, copywriting and typography.

Implementing a wide range of technical skills and knowledge we can provide everything from corporate identities, business cards and logos to personal websites and blogs. We also specialise in promotional images, posters and flyers for bands, club nights or special events.

We offer a professional, dedicated service and believe that good design should be the standard — not the exception. Interested? Learn more.

We want to make things look good.