January 2012 Archives

I have been admiring some of the cute design-geek products available on Poketo (http://poketo.com/) over the past few months, and I've posted a few of my favourite items below. 

I really love the mugs, which look as though they have been partially-dipped in a bucket of primary paint - blue, yellow, red, and black. Very stylish. The other items that I enjoy include the coloured pencil sets; there is a set with a weathered motif design and another set where the outside of the pencils look like twigs and are covered in bark. I also like the cute paperclips in the shape of deer.

This shop has a lot of neat things, from clothing to office storage to stationary. I also love their artistic wallet designs, drawn by a variety of artists.


An Evening out at Proud Cabaret

| 1 Comment | No TrackBacks
We went out to Proud Cabaret recently to watch the cabaret and enjoy a meal. Proud Cabaret is a chain of cabaret entertainment centres in London, and we had a voucher to visit the one in the City of London. This was handy considering we work in the City, and we went to Leadenhall Market beforehand to have some drinks before making our way to the venue. 

The voucher included a meal, which we selected beforehand. I had a goat's cheese starter with beetroot, which I did not like as it was too heavy. However, the main dish and the dessert made up for it. We ordered wine, and the wine list is extensive and good quality. However, vegetable side orders needed to be ordered with the main course, and the wine and service charge was not included, so that was an extra cost on top of the voucher. The dessert I had was chocolate mousse, and it was the most delicious.

Proud Cabaret captures the feeling of the swinging 1920s with jazz and smoke machines to create the hazy atmosphere inside the venue. The girls were all dressed as a part of the show, and we had a friendly waitress. The acts were fairly good, but I felt that it could have been better, and some of them seemed to be quite short acts. The more interesting ones seemed to be shorter acts. A Saturday is probably a better day to go.

We also had amazing seats near the front of the stage, and it was a good night watching the acts and enjoying the food and entertainment.

Wedding Party Invites Designs

| 1 Comment | No TrackBacks
After the first wedding party (and the wedding itself) was out of the way at the end of July, plans started to be put together for the second party. The second party was for friends and family in the United Kingdom, and we held it at the end of November, on the edge of the holiday season. (For me, the holiday season starts after Thanksgiving Day in the United States, which fell two days before the wedding party).

As I do not have a lot of time, I decided to reuse the design of the wedding invitations that I created last spring, but instead of the purple-blue cornflower theme, I decided to come up with a different colour scheme. I was inspired by the colours grey and lime (spring green), and I have seen these used in wedding photographs. I wanted to avoid anything associated with the holiday season, so I thought that the brightness of these colours would look perfect (modern and contemporary) at the end of autumn.





Spicy Maya Brownies

| No Comments | No TrackBacks
Crate & Barrel sell Chuao Chocolatier's 'Spicy Maya Brownie' mix. Being obsessed with spicy food, I had to try it. The brownie mix is easy to make, and it only required adding eggs and butter. The ingredients were mixed together into a bowl, and the batter was very thick, but I managed to dish it all out into a rectangular bowl and even it out. A little while later, I had the aroma of delicious brownies filling the apartment.

The brownies themselves are made of good-quality chocolate, and the spicy flavour is not inside the batter - it's in the dusting powder. A stencil was provided to dust the spicy powder onto each brownie, but it did not work well, so I ended up spreading the powder on top of the brownies. (The powder is very fine, so watch that it is not inhaled accidently while eating.)

The brownies turned out to be delicious and a little gooey on the inside; the spice gave it just enough kick without being too overpowering. The below photograph shows some brownies cut after they had cooled for a few minutes; they were not that gooey once I properly let them cool down. I simply could not wait to tuck in! (I am sure that these brownies are responsible for a few extra pounds.)


Web Font Loading Using Typekit

| No Comments | No TrackBacks

In a recent website project that I have been working on, the designer used a non-standard web font for page headers and navigation. This required loading through one of the methods of font-loading that I mentioned in a previous post:. Upon further research, I discovered that the font is available on Typekit, so I did some research into the service before deciding to sign up to the service, taking into account the particular usage of the website and potentially shifting multiple fonts across different domains.

Speed of the service:

TypeKit state on their website that they 'minimize fonts as much as possible' to ensure that the files are the smallest size possible. They also ensure that fewer requests are made with multiple CDNs (Content Delivery Networks) across the world and use font caching. Despite many enablers put into place to ensure the speed is quick, there may be some issues, such as the following:

'In these cases, Typekit users are most often concerned about their visitors seeing an effect commonly know as the FOUT, or the flash of unstyled text. You may have noticed the FOUT before: it's that brief flash of text in a default font before the web fonts have finished loading.' (http://blog.typekit.com/2010/10/29/font-events-controlling-the-fout/)

While making the website look more visually attractive with a new font, it is always a good idea to ensure that the website looks good with the standard web-safe fonts (such as Arial). This is necessary, in my opinion, as the Typekit font only works if Javascript is enabled.

Reliability and SLA (Service Level Agreement)

While Typekit do claim to provide a reliable service and have a wide CDN, I noted that they had recently suffered a DOS (denial-of-service) attack, and this brought down their CDN. (After the service was signed up to and I was using Typekit, I noticed a couple of times that the fonts were not being loaded, and this was reported by a couple of other users as well.)

Typekit do have an SLA, and I believe that I read somewhere on their website that if their service suffered an outage, that the customers would not have to pay for that month's service. (That SLA only applied to enterprise plans.)


There are a few different types of payment plans to choose from, depending on your needs. Each plan reflects the number of domains, pageviews, and the fonts available. Note that payment is on a monthly basis.


Each plan had a different pageview limit per month, and Typekit state that this is a 'basic  guideline'. In the case that pageviews are consistently higher each month than the plan allows, they will require that another plan be chosen. Typekit state that they will not 'turn off' the font service if the user has gone over their pageview limit. Before purchasing a plan, view your website's logs/statistics to determine how many pageviews are made each month, on average.


TypeKit is used by big brands, such as Zynga, New York Times, WIRED, Wordpress, and Twitter - to name a few.

TypeKit is owned by Adobe.

If the SLA is not met (enterprise plans), the month's fee is returned. Typekit promise '99.9% uptime' on their website. (https://typekit.com/plans/business)


By using Typekit, you are signing up to rent the font on a month-by-month basis.

Typekit relies on Javascript, but there's no alternative in some cases, depending on font licensing costs. CSS @font-face can also be used, but this is determined by the font.

Typekit has a trial if you are unsure and would like to see the service working and to judge whether or not it is right for you and your company.

Selfridges: 2011 Christmas Window Display

| No Comments | No TrackBacks
The Christmas season has come to London, and the shops have decorated their windows and storefronts for Christmas. The following photos were taken of Selfridges on the day of the London Oxford Street Christmas lights switch-on in November. 

The colour in Selfridges's window displays this Christmas was 'white' with mainly white products and a neutral colour scheme. All of the displays were featured primarily in white, and pine branches with white lights were used to decorate the entrance and in between the windows.




At the end of 2011, Red Bull ran a competition for three different categories (stop-monition, drawn animation, and CGI computer-generated) of video creatives, and the criteria was to feature the Red Bull can. I wrote about this and shared my favourites here: 'Red Bull' Canimation Competition Creative Entries

The winners have been announced, and the results are below. I am happy that three of my favourite entries made it into the winner list. Some of the categories would have been difficult to judge as there were many wonderful entries.

Winners of Stop-Motion Category:
Student - Bill Hennessey: http://vimeo.com/32179301 (The video features a squirrel that skateboards after taking 'Red Bull'.)
Non-Student - Chris Butcher: http://vimeo.com/32105591 (This was one of my favourites featuring the morphing can.)

Winners of the CGI Category:
Student - Scott Waddington: http://vimeo.com/32087852 (The video features a chicken and a can of Red Bull.)
Non-Student - Paul Barlow: http://vimeo.com/32150228 (The video shows the can turn into a flower with a bee.)

Winners of the Drawn Animation:
Student - Marc Moynihan: http://vimeo.com/31856894 (This was one of the videos that I liked, featuring the growling bear and this followed the brand well.)
Non-Student - Chloe Rodham: http://vimeo.com/chloerodham/redbull (This was one of the videos that I liked, featuring a greyhound chasing after Red Bull.)

Artwork by 'Running for Crayons'

| No Comments | No TrackBacks
Tilly, also known as 'Running for Crayons (http://www.runningforcrayons.co.uk), produces colourful and wonderful illustrations. Tilly is from Brighton, educated at Brighton University, and engages in her artwork by the sea. Tilly has completed artwork for many companies in the publishing, food, charity, and corporate sectors. Her client list includes Fire & Stone, Jamie at Home, Vodafone, and Octopus Publishing Group. Characteristics of her work include witty and charming characters, which she refers to as her friends.

Tilly works in a studio that she calls BigChinaCrayon near the sea with two close friends, and all three support each other. These sound like amazing friends, and the studio looks like an inspiring place from the photographs in the interview by David Cole, sourced below (1). In Tilly's words, "When confronted with creative block, having the others to discuss your ideas with is invaluable (the relaxing coo of the pigeons also helps, though their criticism isn't quite so constructive)." (1)

Here is a small selection of some of my favourite pieces from her collection, but many more wonderful pieces can be viewed on her website: http://www.runningforcrayons.co.uk


1) Cole, David. Reader's Studios: BigChinaCrayon. http://www.creativeboom.co.uk/south-east/features/readers-studios-bigchinacrayon/ [14 February, 2011].

Notable Movie Websites of 2011

| No Comments | No TrackBacks
Movie websites are never the best-designed websites, but some of them do have some decent ideas for an interactive website, and the movies made for children seem to have more interactive websites. The following is a list of websites released in 2011.

The Muppets Movie: 

The Adventures of TinTin:

The Ides of March:


Arthur Christmas:

The Smurfs:

Captain America:

Cowboys and Aliens:

Attack the Block

The Help:

Cars 2:





Red Riding:

The Green Hornet:

The Mechanic:

Gnomeo and Juliet:
The Historic Dockyards in Portsmouth hosted a 'Victorian Christmas' event at the end of November. The ship museums were open to the public, and Christmas markets lined the streets and buildings around the dockyard. Actors and actresses were dressed up in Victorian costume to act out Victorian characters. I spotted chimney sweepers, a traveler, a criminal being paraded through the streets, Scrooge, women protesting for voting rights, and people on penny farthing bicycles.

I took my parents here while they were in town visiting. There was plenty to do and see, and this was perfect to mix shopping, watching the actors, and visiting the historic ships and the many museums. A few of my photographs are below.


We boarded the HMS Warrior and had a look around this battleship. There were many cannons.


These soldiers walked up and down the street, and they fired guns and marched to their drums. 



One of the small docks contained a sunken boat.


Actors and actresses dressed as Victorians rode on these contraptions, which looked like penny farthings.


More actors and actresses on penny farthings.


Actresses dressed as Victorian women protest about women's right to vote.


Steam trains feature in one area of the historic dockyard.


These children were dressed as chimney sweepers.


A makeshift hut serves as a bar and a brothel.

In the Spirit: Christmas in Bath

| No Comments | No TrackBacks
Christmas stalls are set up in the centre of Bath near the Abbey, selling a range of goods and getting everyone into the spirit of the holiday season. Going to visit the Bath Christmas Market has been a tradition for me in the past few years as I used to live in the city; I was not going to bother with it this year, but I had visitors who wanted to see it. The photographs below showcase Bath's Christmas Market (2011).






In the past, web designers have had to use the widely-distributed fonts (such as Arial and Times New Roman) so they could guarantee their users could read their website. This left little room for creating websites that looked a little more like print. In the past, non-standard fonts would have to be converted into images, and this generally was not good for page loading, SEO, or website maintainability.

Although we have come a little closer to being able to use non-web-standard fonts on our websites, we still need to use Javascript to render different fonts, until more advanced methods are widely-used and available in browsers. The @font-face tag can be used, but it requires advanced browsers using CSS3, though the idea was proposed in CSS2. 

Overall, I suggest using a combination of CSS @font-face and one of the Javascript methods to load the font. I also suggest using a custom font sparingly and only in certain HTML tags and instances, such as in header <H1> (or <H2> and <H3>) tags only, pull quotes, or in navigation menus. I certainly do not recommend using a non-web-standard font for all body text. In all instances, I recommend using a fallback method in case there is an issue with the custom font loading, such as making all custom fonts default to 'sans-serif' in the case that the custom font does not load.

To embed the font using CSS @font-face, you must first have permissions to use the font in this way. (Fonts are copyright, just as images are.) If you have permission to use the font and there are no restrictions on the licensing, you can load the font file as below. The following loads the font depending on the browser requirements on varying types of font format. The method was reworked several times by multiple developers since 2009, and this method is devised by the website FontSpring.com (1). This solution works in all browsers that support @font-face and on Android phones.

@font-face: {
font-family: 'MyCustomFont';
src: url('/fontfolder/CustomFont.eot?') format('eot'), 
url('/fontfolder/CustomFont.woff?') format('woff'), 
url('/fontfolder/CustomFont.ttf?') format('truetype'),
url('/fontfolder/CustomFont.svg#svgFontName?') format('svg'), 

@font-face: {
font-family: MyCustomFont;
src: url('/fontfolder/CustomFontDark.eot?') format('eot'), 
url('/fontfolder/CustomFontDark.woff?') format('woff'), 
url('/fontfolder/CustomFontDark.ttf?') format('truetype'),
url('/fontfolder/CustomFontDark.svg#svgFontName?') format('svg'), 

Once you have loaded the font following the method above, you can call it using the font-family tag, as below.

h1 {
font-family: 'MyCustomFont', serif;

The following websites below use the @font-face method:

Note how the websites restrict the custom font to the headers and, in the case of the faciodesign.co.uk website, the navigation.


The following methods that I will look at include: Typeface.js, Google Fonts, sIFR, TypeKit, and Cufon.

This solution uses a Javascript file to render fonts.

Easy to implement.
Does not require Flash.
The Javascript file is small, and it has the ability to load quickly.

The text rendered is output like an image, and each word is output into a <span> tag.
Uses the <canvas> tag for each word, and combined with separate <span> tags, it inserts a lot of HTML.
The solution cannot be read by screen readers.
Looks different in different browsers and does not render in all browsers.

To use Typeface.js, simply download the Javascript file from:

You will need to select a font that you have permission to use, and you will need to convert the font into a Javascript file (available on the Typeface.js website). Simply load the two Javascript files after your CSS file is loaded. After this is completed, you should be able to reference the font name in the CSS 'font-family' tag.

I had some problems converting some fonts to Javascript, and some fonts that were converted had rendering problems.

Google Web Fonts
This solution is developed by Google and allows developers to use licensed web fonts on their websites through Javascript.

Google Web Fonts is free.
Easy to implement and only requires loading Javascript from Google onto your website.

There are only a few fonts available to use.

To use this method, simply visit the website: 
Choose a font and import Google's Javascript that renders the font by using:
@import url(http://fonts.googleapis.com/css?family=MyFont+Serif&v1);
Simply add the font to the font-family tag in CSS.

sIFR (Scalable Inman Flash Replacement)
This solution uses Flash and Javascript to render the font and is an SEO-friendly method.

Text is selectable and SEO-friendly.
Screen readers will not have problems reading the fonts that use this method.

Requires the Flash plugin, so this cannot be seen on the iPhone.
Page loading is an initial problem as it needs to load CSS, Javascript, and Flash.
There seems to be a learning curve, and it takes extra time to configure setting up on secure websites.
It requires much testing and there may be problems with it rendering in certain visual instances.

See the credit for a tutorial on how to use this method on your website (2). 
To try this method, you can download sIFR from the developer's website: 

This solution uses Javascript to render fonts, which are then passed from TypeKit's servers and delivered to the website. This solution is a subscription plan, and the company is now owned by Adobe.

Owned by big brand, Adobe, so I suspect that this will continue to be developed and supported.
Contains many fonts to select from, and all are available to use.

You pay monthly to rent the font.
If you have a lot of fonts in your kit, the produced Javascript file can be large and slow.

To use this method:
Visit the website http://www.typekit.com. You can sign up for a trial to test before you purchase one of their plans.

Cufon allows you to render your fonts into Javascript files to use on your websites.

Easy to use.

Although you can convert any type of font, you need to bear in mind the licensing restrictions on the fonts that you wish to use.
Renders fonts as not selectable, and creates extra HTML and uses <canvas>.
Is not good for SEO.

I tried this method, and some of the fonts would not convert. Others converted, but they did not convert the font correctly.

To use this method:
Download the Cufon Javascript and the font-specific Javascript. To generate your font's Javascript, simply visit: http://cufon.shoqolate.com/generate/
Use Cufon.replace to add the font to specific HTML tags and classes:
Cufon.replace('#cufon-text h1');

Other Methods
Many other methods exist, and these work similar to TypeKit's solution, though some of these methods are free, and others require a fee. Methods include: Webtype, FontDeck, FontsLive, TypeFront, FontSpring, Fonts.com, and WebINK. There are many more, and these can be researched to discover the correct method for you.

In conclusion, I am glad that some progress is being made in this area so that we can use custom fonts in our web designs without relying on images or compromising SEO. There is still some way to go in this area, but we have come a long way from the days when you were limited to only using Times New Roman or Arial in websites and images for headings or navigation menus. 

1) FontSpring. The New Bulletproof @font-face syntax. http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax [3 February, 2011].

2) Wake-up Later. sIFR Tutorial:Use your own fonts. http://www.wakeuplater.com/website-building/use-your-own-fonts-a-simple-sifr-guide.aspx [10 October, 2011].

Keeping Calm and Carrying On

| 2 Comments | No TrackBacks
The British government created the "Keep Calm and Carry On" posters to boast morale for the people in 1939, at the brink of World War II. Since fifty years have passed since the "Keep Calm and Carry On" poster was introduced, the design is now in the public domain, and it has been popular in 2011 with varying alternative slogans and colours. (The original design was red.)

Perhaps this design and slogan now appeals because it tells us to keep calm during the economical and financial crisis. The year 2011 has also seen an emergence of British themes in time for the Royal Wedding, which took place at the end of April of this year. The "Keep Calm and Carry On" theme has been available in nearly every shop this year, in some form (clothing, cards, dinnerware, cups).

This slogan could also be used for the holiday rush. No matter how busy the shops are or our time being taken up with events and seasonal parties, we can always remember to "Keep Calm and Carry On".

Here's a few selections of the use of the "Keep Calm and Carry On" slogan below, and all of these items are available for purchase from the links below. (Note that all photographs were taken by the seller.)

1) Paper gift tags for that special gift for a stressed friend or work colleague, perhaps? 
dobleele: http://www.etsy.com/people/dobleele

2) A pretty silver necklace with a crown charm
asilomar works: http://www.etsy.com/people/asilomarworks

3) A set of coasters for the coffee lovers.
Meadow Tea: http://www.etsy.com/people/MeadowTea

4) A pillow with a statement. 
Jael Studios: http://www.etsy.com/people/JaelStudios

5) A chunky silver necklace replica of the "Keep Calm and Carry On" poster.
E. Ria Designs: http://www.etsy.com/people/ERiaDesigns


Recent Comments

  • jenn: Thank you. read more
  • Murge: Amazing post. read more
  • Herbert: good post. site read more
  • Frank Quake: Hey, This is great when you said that I had read more
  • Chappy: You mention peptides here? I have had first hand experience read more
  • jenn: Thanks! I love the work. I have got more recent read more
  • Fanakapan: Thanks for the write up. This was some of my read more
  • jenn: Yes.... but that's only for the islands. Mostar and Montenegro read more
  • jenn: Hello, the code is not mine to hand out. I'll read more
  • pantich: More info about the best day trips from Dubrovnik can read more
OpenID accepted here Learn more about OpenID