Paris 26 Gigapixels.

Belfast Shipyard

Just read on the BBC that visitors to the Thompson Dry Dock (the dock the Titanic was built) at the old Belfast Shipyard are to pay for the privilege.

The Northern Ireland Science Park have obviously seen pound signs in their eyes, what with visitor numbers on the up and tourist season approaching.

I Took a walk around the Shipyard a few weeks ago and to be perfectly honest there isn’t much to see to make it worth spending any sort of entrance fee. I’d understand their motives a bit better if there were visible signs of investment in the area (other than fancy, empty apartments and office blocks). I’ve got a feeling naming an area after a sunking ship wasn’t such a good idea, bad omens and all that…

If urban decay happens to be your thing though, it’s well worth the visit, plenty of rust!

Harland and Wolff Crane

Rusty Sign

Working By Hand Power

Download iFlowerpaper

To get around this limitation designers used to create graphics for headlines, or use flash based scripts such as sifr. CSS3 allows for easy embedding of fonts on a page, surprisingly it’s supported well across all browsers.

Browser Support for @font-face

All modern browsers support the @font-face rule in some shape or form. Internet Explorer has supported it since IE4, with the only issue being that they only support embedding of their own proprietry font file – EOT. Safari, Firefox and Opera should all support True Type or Open Type fonts. Safari on the iPod/iPhone will only support SVG files. With this in mind it’s always good to pick a web safe back up font to ensure your site degrades nicely.

Fonts and Licensing

Fonts aren’t just free for everyone to use. Make sure that the font you plan on using on your site is bought and the license permits you to use it online. There are plenty of free fonts out there, use one of those if you aren’t sure. If a client insists on using Helvetica or other commercial font, make sure they buy it first!

Converting Your Font

If you have a TTF or OTF font you can convert it online to EOT and SVG using a service like Font Squirrel (who also provide some great free to use fonts, prepackaged for using on the web.) The typeface I’m using on this site is Charis which I downloaded from there.

Once you have your font files ftp them up onto your web site.

The CSS

Declare the fonts you wish to use at the top of your css file

@font-face {
	font-family: 'CharisSILRegular';
	src: url('Fonts/CharisSILR.eot');
	src: local('Charis SIL Regular'), local('CharisSIL'), url('Fonts/CharisSILR.ttf') format('truetype');
}

font-family: This can be anything you want, it’s how you will call the font later on in your CSS file.
src: This tells the browser where your font is located.url is a location on your server, local would be the name of the file if a user happens to have it already and format is the file type. It’s always good to give the local name as it would mean that if the user has the font they don’t need to download it from your server. If the browser doesn’t find the font locally it will move to the next source. Declare your EOT file seperately from the others.

So now you have declared the font you can use it throughout your CSS in the same way you use other fonts

h1 { font: 2em CharisSILRegular, Georgia, serif;}

Don’t forget to add a fall back font (in this case Georgia, then any other serif font) to ensure maximum degradability. That’s all there is to it. Just like in print design try not add too many fonts to one design (even more importantly for the web as the browser needs to download every font the user doesn’t have locally)

Close up of waterfall at Crawfordsburn

We took a walk around the Glen at Crawfordsburn Country Park yesterday. Unfortunately quite a dull, flat sort of day but it’s a really nice place for a quick walk

Crawfordsburn is situated on Belfast Lough, between Belfast and Bangor. There are three marked trails – the Coastal Path, the Glen Walk and the Meadows Walk. The Glen Walk is the shortest of the three, and being pressed for time, the one we took. It passes through some very nice scenery including a five-arched railway viaduct and a pretty cool waterfall.

Waterfall at Crawfordsburn

Layout differences are easy enough to deal with. We just display alternative style sheets for different browsers. It does however increase the time we are required to spend ensuring our sites look just right on your browser of choice. That’s our problem, not yours (though if you are a client you really should be concerned with how our time is being held  up by just one browser). Recently though, with the move towards new web technologies, Internet Explorer is starting to hold back how we can make sites work better and that’s getting frustrating.

A good example is on this site. As it’s a personal site I’m keen to exploit new technolgies and use it as a testing ground for things I develop for clients. The image gallery at the bottom of the page is written in jQuery, works perfectly in all browsers… breaks in IE with a completely non-specific error. I’ve spent an hour or so looking into it with no joy (edit – after another hour I’ve found that Internet Explorer does not support window.innerWidth). Frustrating to say the least. I just can’t see why it is that I can code a site knowing it will work fine in all Browsers with the exception of Internet Explorer and then must spend extra time getting the same functionality to work on it alone (not to mention how each version of Internet Explorer has it’s own issues).

The main reason someone should upgrade to a better browser is that on nearly all accounts Internet Explorer is the weakest application on the market. It’s simply an inferior piece of kit. Have a look at this infographic.

Internet Explorer uses more resources, renders styles and selects items on a page slower than any other modern browser out there. It’s like driving up a motorway in a scooter. Why would you do that to yourself?

Use of Internet Explorer also holds innovation back. The following issues are unlikely to be resolved in the next decade if people continue to use Internet Explorer:

1. Limited Data URI Support

   Support for this could speed up the delivery of web content. All it means is instead of referencing data it can be embedded within the page.

2. SVG Graphics

   Again, support for this could really speed up your browsing experience. This graphics format can be edited using a text editor, can scale to any size and allows user interaction (think Flash without the plugins).

3. CSS3 Colours

   Instead of us designers using Javascript or graphics files to create transparency on the web we could just use css. Not at present unfortunately.

4. Embedded Fonts

   All other browsers use OpenType Font embedding, Internet Explorer does not use this, using it’s own EOT font format. In fairness it was first to the game regarding font embedding, but OpenType is by far the most popular font format these days.

5. Text Shadows

   Putting nice drop shadows on text is just simply not supported. Could be a blessing though as I could see it being well over used

6. Rounded Corners

   Instead of creating graphics to give the effect of nice rounded corners on boxes we could just be using a simple css declaration.

7. Multiple Columns

   This is a must have feature. At present text cannot flow dynamically into neat columns. That’s why you either see carefully designed sites where the text is placed in each column statically (or the columns are uneven) or you have lines of text that are just too hard to read. Alternatively you do what I’ve done on this site and increase the size of the text / decrease the area it is displayed on. The optimum amount of text on a line for readability is 10 or so words. Go grab a book off the shelf and see for yourself. Multiple columns are a great idea. They’ve been employed in print for centuries. If Internet Exlorer has it’s way it could be decades before we get to use it on the web.

There’s a lot more Internet Explorer cannot do but the above are my main gripes. If this sort of thing interests you check out When can I use.

So if you are reading this on Internet Explorer please consider upgrading to another browser.

Washed up

Each Sunday some friends and I try to get out of the house and away from the screen for a few hours.

Last week we took a walk along the coastal path between Holywood and Bangor. The weather was blowy to say the least, but the sun shone (a bit too low, but at least it was out) and the sea air was good for the soul!

choppy waves!

As a result my own site has sat in limbo for years. Every so often I take it off the shelf and give it a bit of a dusting. Time for a spring clean. Up until now my own site has always been a static, hand coded site. More for personal gratification as I work on an in house CMS every day.

The drawback with that is that although I can create something pretty, it’s not that easily updated. Especially in this new age of iphones, tweets and syndication. Last week I spent nearly a full day installing and playing around with Movable Type. What a mistake!

Movable Type was a disaster in comparison to WordPress (which I have used in the past but thought at the time was justa  bit underpowered). Last night I deleted Movable Type and uploaded WordPress.

I’ve probably spent 3 hours max with it so far, have installed an iphone app to update the site and an iphone plugin for displaying it on mobile devices, added a page, two entries and begun creating a new template (which, for anyone reading this right now is an abortion… give me until the weekend, I still haven’t read the manual!!!)

First impressions are that this CMS / Blogging app is a thing of beauty and simplicity. Love it! My first major task is to get a design up, then look at ways of pulling in my designs and photos from mobileme if possible. Seeing I can easily write a widget in php that shouldn’t be too much of a problem.