Text Post Tweet This Post

The Current State Of HTML5 Video

Posted on the 15th of July, 2010 - http://tumblr.com/xcydgpoh1

Again, inspired by HTML5 For Web Designers, I set about testing the <video> element and seeing how simple it was, I thought it would be a quick process.

If it only was as simple as writing out the code. Needing to use different formats isn’t the problem. Getting the correct format working, especially when it comes to Theora, was a bit more problematic.

For those unaware of the requirements: some browsers require a certain format whilst others require a different one and here’s a quick rundown of what I tested. I’ll clear up browser versions first so you know what I tested on. All of the following are running on Windows too. I used Firefox 4.0b1, Opera 10.60 (3445), Chrome 6.0.458.1 and Safari 5.0 (7533.16).

And now for the video formats tried:

  • OGM
  • OGV
  • OGG
  • MP4

OGM

OGM worked completely in Opera with no problems. It worked in Chrome with some minor glitches in the video controls - the volume control wasn’t working. Safari and Firefox wouldn’t play the format at all.

OGV

Webkit won here with both Chrome and Safari having full compatibility. Opera and Firefox showed no support at all.

OGG

OGG was the most widely adopted, being fully support by Firefox, Chrome and Opera. Safari wouldn’t play it though - there’s always one! Even though OGG had the most support, it was the most difficult file to create. I was converting an MOV and several programs crashed mid-way whilst others forgot the audio. The only successful conversion I did was in VLC and using the Vorbis codec for audio.

MP4

MP4 was fully supported by Chrome and Safari but had no support in Firefox and Opera. This would be my format of choice and one I hope the others pick up. It may not be ‘open’ as Theora is but it’s much simpler to create and work with!

That about wraps it up. I ended up settling on OGG with MP4 fallback for Safari. It’s not a perfect solution yet but it sure beats having Flash crash the browser! Here’s the code if you’re interested and yes, I know I didn’t have to close the source attributes but I like keeping the code neat:

    <video controls preload=”auto” width=”320” height=”240”>
        <source src=”media/vid.ogg” type=”video/ogg” />
        <source src=”media/vid.mp4” type=”video/mp4” />
    </video>

To clear that up if you wondered, “controls” calls for controls to be displayed and the “preload” attribute has the video buffering in the background without automatically playing it.

I’m not sure if these results are the same on other platforms so you may want to check that.

View Comments
Text Post Tweet This Post

Want Some Head?

Posted on the 12th of July, 2010 - http://tumblr.com/xcydaa6j8

Please don’t take that title literally. Please.

I’ve been catching up on some HTML5, thanks to Jeremy Keith’s HTML5 For Web Designers and instantly started playing around with new elements and testing things. I decided to create a new basic template to re-use on each project where it was feasible and then I decided to share it.

It’s nothing advanced, but for those new to HTML5 or new to HTML completely, it may be useful to start creating some pages of your own.

You can download the HTML page here: http://db.tt/dDrJwp - It is currently configured to use Andy Clarke’s Universal IE6 Stylesheet, Modernizr and a HTML5 Reset Stylesheet.

Only the HTML file is included as you can either link to the files mentioned above or visit the respective sites and make sure you have the latest versions. There’s also a pretty decent chance I messed something up or have made mistakes I haven’t spotted so please feel free to comment on those and I’ll update.

You can also just copy/paste from below if you prefer. Apologies for the lack of styling here, I’ve not tested code in this theme before:

<!DOCTYPE html>

    <!— The Class Is For Modernizr —>
    <html lang=”en” class=”no-js”>

        <head>
           
            <title>HTML5 Template</title>
            <meta charset=”UTF-8” />
            <meta name=”author” content=”” />
            <meta name=”keywords” content=”” />
            <meta name=”description” content=”” />

            <!— See http://j.mp/9K4o1V For Release Updates —>
            <link rel=”stylesheet” href=”css/html5reset-1.4.1.css” />

            <!— Global Style For IE6 By Andy Clarke. See http://j.mp/aB5TSl For Release Updates —>
            <!—[if ! lte IE 6]><!—><link rel=”stylesheet” href=”css/master.css” /><!—<![endif]—>
            <!—[if lte IE 6]><link rel=”stylesheet” href=”http://universal-ie6-css.googlecode.com/files/ie6.1.1.css” media=”screen, projection”><![endif]—>
           
            <!—[if IE 7]><link rel=”stylesheet” href=”css/ie7.css” /><![endif]—>
            <!—[if IE 8]><link rel=”stylesheet” href=”css/ie8.css” /><![endif]—>
           
            <link rel=”stylesheet” href=”css/print.css” />

            <!— See http://j.mp/aP5V5F For Release Updates —>
            <script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js”></script>
           
            <script src=”js/modernizr-1.5.min.js”></script>
            <script src=”js/custom.js”></script>

        </head>

        <body>
        </body>

    </html>

Hope this helps somebody as it’ll sure make my projects that bit quicker!

View Comments
Text Post Tweet This Post

Selling 36400 Unique Pixels

Posted on the 12th of July, 2010 - http://tumblr.com/xcyd8y7sz

With the launch of Tileabl.es, I eventually made the choice to try out some advertising on the site but wanted something slightly different.

I didn’t want a load of 125px squares plastered all over the place and the aim of the site was, and still is, not to make money - it would just be a bonus to make a little something back for the continued efforts of creating new packs.

So, I signed up with BuySellAds and created a unique ad spot with them. The advert is a custom image of 260px x 140px and only one space is available so chosen ads won’t be rotated throughout the purchased time period. As for purchasing, the price is only $20 too! That has to be a bargain even if I say so myself!

To make things a little more unique, I’ve turned off auto-approvals as I don’t want to advertise anything and would like to give the space to some nice folk in the creative industry. If I already use a certain product, or it seems like one I would like, then I’d be happy to advertise it.

There you have it. If you have anything awesome you would like to advertise or know somebody who might, please pass it along and check out the listing!

View Comments
Text Post 2
Notes Tweet This Post

Add Twitter Profiles To Your iPhone Contacts

Posted on the 24th of June, 2010 - http://tumblr.com/xcyc37q8n

I posted a note about this on Twitter and it seems I wasn’t the only one who had not seen it before. My instructions weren’t too clear either as I only had 140 characters at a time. Basically, I noticed an option to add Twitter profile information to your iPhone contacts and it can be done a couple of ways.

The first of those is through the Twitter iPhone app. Look up the profile you wish to add to a contact and you should have a screen similar to this:

Tapping the contact card icon in the top right will take you to the following info screen:

You can then tap ‘Create New Contact’ or ‘Add to Existing Contact’ which will bring up your iPhone contacts. You would then choose the corresponding contact if one already exists and there you go. Their Twitter username along with their avatar will now be visible on the contact screen for that person:

The benefit of this technique is that tapping the Twitter username on a contact like that would open up their Twitter profile within the Twitter app. A possible downside of this though, is that it will also pull in their Twitter ‘short bio’ information too and add that as a note.

The other method of adding the information just involves adding a label to the URL field when editing a contact. You want to choose to edit a contact, then tap the label on the URL field. This will take you to the following page:

You can then tap ‘twitter’ at the bottom if it exists or choose ‘Add Custom Label’ and enter it there. After that, you want to add the Twitter username into the URL field. You should use the following convention so that it links the profile with the Twitter app and will open it when tapped:

“twitter:@yourtwitterusernamehere”

Enter that into the URL field and save your contact. The info will now link to the Twitter app but note that doing it manually, you won’t have their avatar or bio pulled in.

That’s about it. A nice, simple feature that it seems not everybody knows about!

View Comments
Text Post 3
Notes Tweet This Post

Introducing Tileables

Posted on the 14th of June, 2010 - http://tumblr.com/xcybj9tpf

I recently launched Tileables and thought I would post a couple of thoughts behind it here.

The main reason for me making the site was actually just out of boredom. I had a gap in client work and rather than spending all of my time playing games, I decided to make something interesting and hopefully something that people will find useful.

There are plenty of places offering swatch and shape downloads for Photoshop but not so much on the pattern front so when the idea came to me, I just threw it together!

Design wise, I wanted something quick and simple to begin with as I launched with only one pack. I stuck to a static, single page that made use of repeating patterns to fit in with the theme. I’ll be adapting the design into a CMS and making changes as needed.

I plan to keep making more pattern packs which will be significantly bigger than the first so go take a look, download the pack and have some fun!

Don’t forget to follow Tileables on Twitter for updates of new packs.

View Comments
Photo Post Tweet This Post

Posted on the 10th of June, 2010 - http://tumblr.com/xcyb9tsgw

And so it begins. I pretty much always start out each project with thumbail thumbnail (damn iPhone keyboard) sketches. Everything remains very rough at this point! Zoom

And so it begins. I pretty much always start out each project with thumbail thumbnail (damn iPhone keyboard) sketches.

Everything remains very rough at this point!

View Comments
Text Post Tweet This Post

My Take On Privacy - AKA The Facebook Post

Posted on the 01st of June, 2010 - http://tumblr.com/xcyatc1hz

Recently, it seems to be pretty popular to quit Facebook. Their privacy settings were too complicated for some people and subsequently, they never bothered changing them. The problem there is that Facebook naturally wants your data to be public. The more public you are, the more money they can make from you.

This is a bigger problem than just Facebook though. Quitting there won’t help you elsewhere. I think it’s something that a lot of people overlook when posting photos, videos and bits of text online - myself included. More and more location based apps and services are being used and others are already pointing out the dangers of being too specific when sharing your details with strangers.

Let’s not forget, if your information is online and not explicitly private, random strangers can and probably will come across it. Whether or not their intentions are malicious is beside the point - the fact that they found it should be something you’re thinking about when posting content online.

I’m fairly open with my online activities but have recently tightened up some of my settings such as having certain content private that just doesn’t need to be shared. When posting something publicly, you may not be handing out a link actively but that publish button is doing it for you.

View Comments
Text Post 1
Notes Tweet This Post

Fontdeck - The Missing Part Of The Web

Posted on the 26th of May, 2010 - http://tumblr.com/xcyai4w1j

I’ve played about with several different services for custom fonts online and I’ve found problems with each of them. That is, until I tried out Fontdeck.

This is only a beta that I’ve used too which can only be a sign that the service will improve more before its launch. I ran a quick test which you can view here. I haven’t made alterations for individual browsers so there may well be bugs but the performance is outstanding.

I noticed a very slight ‘flicker’ on page load while the custom stylesheet was being loaded but that was it. There’s no flash required on the page. There’s also no JavaScript on the page. These two points alone put Fontdeck right up at the top of my custom-font-services list.

From what I can tell at a glance, they’re using a new, secure approach to font-face embedding. They serve you a stylesheet with the font-face rules in and they’re hosting the font files. Licenses are then agreed with foundries and you pay for a font or package license straight from Fontdeck. This means that we are more likely to get custom font licenses as the security issue is removed from the decisions of foundries as they make up their minds on embedding licenses.

I’ll give this much more testing over the coming weeks and will have a proper write up afterwards, this is very much just a first impression note and nothing extensive.

If you’re having problems viewing Fontin Sans on my demo page, it’s because there’s limitations on the free, beta package and one of which is 20 unique visitors will be served the custom font - this list is refreshed so trying again later should help.

So it basically boils down to these key points:

  • No Flash needed.
  • No JavaScript needed.
  • Improved security for foundries.
  • Wider choice of premium font-face ready fonts for developers.

Can’t argue with that right?

View Comments
Text Post 1
Notes Tweet This Post

My Follow Yearly Decision

Posted on the 14th of May, 2010 - http://tumblr.com/xcy9wflim

Earlier on, I recommended a group of people to follow on Twitter. This is typical and happens mostly on each Friday of the week.

The difference with my recommendation is that it was for the year, not the week.

At first glance, this may seem like a long time to limit my recommendations to, especially based on the immediacy of Twitter but my choices were not based on a weeks worth of content. Publishing a list of names for other people to follow isn’t something I take too lightly and so picking people weekly seems pretty pointless. Somebody could post a couple of decent links one week and a load of useless rants the next - Not something I want to endorse to my followers.

Basically, it takes a while to build up a relationship with people and it’s only those people I would recommend to others. I have plenty of acquaintances online but only a few that I would refer to as ‘friends’.

That list is a selection of the few.

View Comments
Text Post Tweet This Post

Working For The Man

Posted on the 07th of May, 2010 - http://tumblr.com/xcy9jxknr

I’ve not been freelancing all that long. I always assumed I’d have plenty of work coming in and I would be turning people away. This hasn’t been the case at all. To be fair, up until now, I’ve not done much marketing wise either and I’ve relied on word of mouth promotion which hasn’t been powerful enough.

I have now reached a point where I either need to seriously ramp up my project intake and find a healthy supply of clients or look for full time employment with a design firm. I’m not even sure which I would prefer, given the poor state of my current forecast.

With that said, now comes the part where I need your help! Yes, I’m talking to you. If you’re a freelancer that has too much work on (somehow, that seems to be a lot of you), then please consider forwarding some requests this way! If you’re employed locally or for nice folks that like working remotely, please let me know of any positions available.

Thanks and wish me luck!

View Comments