Internet Explorer 6 onwards and recent versions of all mainstream browsers support the CSS fonts module.

Preparing the font files and CSS

The quickest and most efficient way of preparing font files and getting appropriate CSS to use them that I’m aware of is the Font Squirrel @font-face Generator. Here are a few notes on using it and choosing from its options.

My currently preferred settings

Adding fonts

Clicking the Add Fonts button allows you to select the font(s) you wish to use. If you don’t already have a font that is legal to use via @font-face, have a read of Where to get web fonts.

Font formats

Different browsers have different font format-reading capabilities, so more than one format of font is required. Each browser will only have to download one format, so don’t worry about extra bandwidth being wasted.

Very briefly: TrueType is used by many, EOT is the only format Internet Explorer can use, and WOFF can be used by Firefox. I use TrueType, EOT and WOFF (OpenType).

Alternate Formats

@font-face rules are well supported, so Cufón shouldn’t be necessary.

Font Options

I’ve found Add Hinting to improve font rendering in Windows, so I keep this option selected.

File sizes of fonts have been quite small, so I don’t feel the need to Simplify Outlines. And the same goes for Remove Kerning.

However, reducing file sizes without loss of quality is always a good thing to do, and subsetting fonts can really make a difference, especially if the font you are using has an extensive range of glyphs. So tick Subset Font… and spend a little time narrowing down the included glyphs to those you will actually use this font for with the aid of the font-face generator’s easy-to-use options.

I haven’t experimented with the Base64 Encode option as yet, but not all browsers can use it anyway.

CSS Code

I opt for the “Mo’ Bulletproofer” method from Richard Fink as it avoids Internet Explorer making requests of your server which result in 404’s. You can read technical details about the methods using the links under the fields at Font Squirrel’s page if you wish to know about the ins and outs.

Agreement

As you’re putting the resultant files in a publicly accessible place, download-able by all, it’s important that you use fonts that come with the appropriate permissions.

Download Your Kit

Once you’ve signaled your agreement, the download button will appear.

Testing

Extract the zip file you’ve downloaded and open up demo.html in a web browser to see the font at various sizes. Check that it displays in an acceptable fashion at the kind of size you’ll be using it in different browsers. Particularly look out for the display quality in Windows versions of browsers.

Using

Copy the actual font files (e.g. .eot, .ttf, .woff) to your website directory. I place them in a subdirectory called ‘fonts’.

Open up stylesheet.css in your text editor and copy the given CSS into an appropriate CSS file of your own that is used by your pages.

Example CSS:

@font-face {
    font-family: 'BallparkWeiner';
    src: url('ballpark_weiner.eot');
}

@font-face {
    font-family: 'BallparkWeiner';
    src: url(//:) format('no404'), url('ballpark_weiner.woff') format('woff'), url('ballpark_weiner.ttf') format('truetype');
}

font-family can be anything you like.

Unless you keep your CSS file and font files in the same directory, you will need to change the src urls in the CSS. For example, if you keep your font files in /fonts and your CSS files in /css, you would change

url('font_name.ttf')

to

url('../fonts/font_name.ttf')

Then style elements which should be displayed in the new font with CSS. An example:

h1 {
    font-family: 'BallparkWeiner', Georgia, serif;
}

Test in a variety of browsers, and enjoy your new-found typographic freedom!

Further reading

Nice Web Type has some excellent articles on technical details, font licensing information and where to get fonts which can be used with @font-face rules.

The context

Apparently, this round of the discussion was initiated by Elliot Jay Stock’s tweet:

Honestly, I’m shocked that in 2010 I’m still coming across ‘web designers’ who can’t code their own designs. No excuse.

Here are some subsequent blog posts:

• Web designers who can’t code
• On Designers writing HTML
• 5 Good Reasons Why Designers Should Code
• Why designers should and shouldn’t code

Semantics

As with so many discussions, it largely comes down to good old semantics; Elliot makes his general point well and explains further what he meant by his tweet in his blog post.

My own brief thoughts are as follows. If you take “web designer” to mean a person who offers a complete design, build and maintenance service (let’s say, for example, me), that person needs to know HTML and CSS for obvious reasons. If you take “web designer” to mean a design and development team member who works in broad ideas and perhaps visuals, the specifics of HTML and CSS will be far less important to their role. However, having a fundamental grasp of what web pages do (present information), how they do it (with HTML) and the kind of styling that can be applied (with CSS) will always be helpful in certain respects.

Applying semantics to our own trade

As forward-thinking web designers, we spend a lot of our time paying attention to and talking about semantics; it’s important for discussions and it’s important for publishing content and data on the web. With this in mind, now is perhaps a good time to make a little point of my own.

It seems a lot of web designers are under the notion that typing anything other than a natural language into a text editor or IDE counts as “coding”. Well it doesn’t. I cringe when I see people referring to using HTML and CSS as “coding”.

From Chambers:

verb (coded, coding) 1 to put something into a code. 2 computing to generate a set of written instructions or statements that make up a computer program.

When we use HTML to create a web page, we are annotating content using a markup language, not coding. When we use CSS to style a web page, we are describing presentation using a style sheet language, not coding. If we program using a programming language (such as Javascript), then we are coding.

Is this pedantic? I don’t think so. Keeping in mind distinctions such as this can help all those involved in the production of websites and applications, and can help us to remember to focus on what’s really important: the content that we’re publishing.

Here are four options available from Personas (which are an improvement on the cheapy Aero Windows look) that work well with Firebug and are neutral, tasteful and usable.

Windows Vista Firefox default appearance

“gloss white”

“FirefoxOxygen”

“Prosty i szary”

“pyx-egyes”

Key concept

The worldwide web enabled us to link documents. Now we want to link data that lies within those documents.

Including linked data in a machine-readable (as well as a human-readable) format blows open the possibilities of what we can do with it.

Introduction

Tim Berners-Lee on the next Web (TED talk)

If this doesn’t get you excited, don’t bother with the rest of this post. ;)

Intro to the Semantic Web

Helps with recognising importance of using semantics and gives some examples of possible uses of linked data.

Beyond Web 2.0 – How RDFa Can Help to Democratise Data on the Web  (Google Tech Talk)

RDFa Basics (short video)

Introduces the fundamental method used by RDFa and the triple.

A Short Introduction to Semantic Web-based E-Commerce: The GoodRelations Vocabulary

Introduction to RDFa (A List Apart article)

Introduction to RDFa II (A List Apart article)

General information and help

DERI Linked Data Research Centre RDFa cheat sheet

W3C RDFa Primer

RDFa for HTML Authors (W3C article)

W3C Linked Data Tutorial

RDFa Wiki (a RDFa community)

GoodRelations (a vocabulary designed for e-commerce)

RDFa news

rdfa.info

Searching with RDFa

RDFa and SEO

Google’s Social Graph API, RDFa and the future of web search

Introducing Rich Snippets (Google)

Help us make the web better: An update on Rich Snippets (Google)

Yahoo Search Monkey

W3C RDFa distiller

Try this Tesco product page in the above distiller:

http://www.clothingattesco.com/menswear/Onebody-Ski-gloves/invt/ew921763

Simple use case example

My web page – a XHTML document which presents some information about me in human-readable form:

1. I know Ian Oliver (see text under Firefox car);
2. what social media accounts I have (LinkedIn, twitter and Flickr).

The linked data (machine-readable form) in my XHTML document as extracted by W3C’s RDFa distiller (must be viewed with an XML-capable browser – not IE)

Scenario: someone who knows (of) David Oliver wants to find him at social networks.

With no linked data, a search for David Oliver relies on keywords (e.g. “David” and “Oliver”), producing many returned results (there are lots of people called David Oliver).

With the linked data from http://doliver.co.uk/, a properly defined search would produce only results that were derived from “http://doliver.co.uk/#me” – precisely those desired and no others (the three social networking accounts).

Here are my goals:

1. getting up earlier weekdays and improving my daily schedule;
2. progress in learning German;
3. lifting dumbells or training with my Power Ball (alternate days).

Today is our first day, and so far I’ve marked off 1 and 2.

Getting up earlier (6am today) has meant my eyes have been feeling tired, but I made good progress through my to-do-list and felt like I’d accomplished a lot by 4/5pm (even though I took about an hour-and-a-half out for lunchbreak stuff) – I won’t need to work late tonight like I often have done, and I’m feeling quite pleased with myself. I’ll be getting an early night tonight, and hope I soon adjust to the change.

For my German, I’ve reminded myself of and relearnt the regular verb endings, using ‘kommen’ as my example. I need to make sure I reuse what I learn as I have the type of brain that forgets things easily unless they’re in constant use.

That just leaves either lifting my dumbells or using my Power Ball, which I’ll probably do while we watch a film.

Print design and text frames

When thinking about ways to apply paragraph spacing to text in documents, I’m often reminded of my time working at a printer’s studio. When using QuarkXPress, and later InDesign, we could use ‘paragraph styles’ to assign spacing above or below text, and different people in the studio had their own ways of working things. If I remember correctly, I usually inserted space before my paragraphs, and my colleague who sat at the desk next to me inserted space after his paragraphs. It was interesting to discuss the pros and cons of each approach, and I enjoyed picking up tips which I could then use in future.

14pt 'space before' applied to a paragraph in InDesign

Now, when a heading or paragraph which is set to have space before it (e.g. 14pt) sits at the top of a text frame in a QuarkXPress or InDesign document (e.g. a non-breaking subheading that happens to start a new page), it does not have its before paragraph spacing applied, and continues to butt up against the top of its containing text frame.

In the context of print artwork, this approach by desktop publishing software works well and avoids many awkward situations. However, a web page requires more strict application of style rules. There is no such concept as a text frame in web pages – they are themselves textual documents.

The issue in web pages

For us web designers, a heading or paragraph keeps its top margin even if it is the first element in its parent element, which means we sometimes have to explicitly assign styling to get rid of unwanted margin-top values.

An old way

One suboptimal method was to assign a class to the first text element (in the example below, a heading) to which we wished to give a zero top margin.

A disadvantage to this method is that we were introducing a presentational-only class, meaning it was inefficient and did not really align with the concept of keeping our markup structural. If a new element was inserted before the heading (e.g. an image), we would have had to manually remove the class from our paragraph and apply it to our new element instead.

A “new” way

My brother, Ian, came up with a far better way yesterday.

The CSS rule applies our desired zero top margin to any element which is the first child of our article div. It avoids having to assign a class to our element, leaving it free of unsemantic fluff, and thus requires no manual class switching should our content change. We can now set top and bottom margins to elements as we wish, and leave it to our new CSS rule to ensure we don’t have an unsightly gap at the top of the relevant content area. It’s adaptable, elegant, and is a good example of how simple styling a document with CSS can, and should, be.

Of course, this isn’t really a new method, and has been available to us for a long time courtesy of CSS2. The reason it may not have been at the forefront of our minds and present in our work until now is its lack of support in Internet Explorer 6.

Pushing on despite IE6

The above scenario is just one example of where using current capabilities of CSS can save us work and make life as authors of web pages decidedly easier, so it could be well worth investing a little time to get Internet Explorer 6 and 7 (and 8 when wanting to use CSS3) to play along with the rest of the world. Here are some options.

ie7-js

ie7-js is “a JavaScript library to make MSIE behave like a standards-compliant browser”, and you can see the CSS support it adds at the projects test page, as well as the rendering bugs it fixes.

Within the “ie7-js” project there are two main JavaScript scripts: IE7.js and IE8.js. If you decide to use IE8.js, you don’t need IE7.js as all its functionality is included in IE8.js. If you’re new to ie7-js, all the instructions you need are on the main project page.

ie-css3.js

ie-css3.js “allows Internet Explorer to identify CSS3 pseudo selectors and render any style rules defined with them”.

While IE8.js provides support for Internet Explorer for some CSS3 pseudo selectors (the ones which Internet Explorer 8 itself has as I understand it), there are others that it does not handle and which ie-css3.js does: :nth-of-type, :nth-last-of-type, :first-of-type, :last-of-type and :only-of-type.

eCSStender

There is some overlap between IE8.js and ie-css3.js (and feature gap if IE7.js and ie-css3.js are used), meaning there’s still work to do on creating the “complete” solution. eCSStender (pronounced “extender”) sounds very powerful, but I haven’t looked at it in detail yet – it seems to be more complicated to use than the two aforementioned projects. Hopefully I can work it out to see if it can provide the CSS emulation for Internet Explorer that I’m after.

No time like the present

I feel that now is a good time to finally start using more of the CSS2 and CSS3 goodness in my web page styling that Internet Explorer and its market share have hitherto skuppered, so I’ll be testing these projects further with a view to settling on a solution.

Have you had experience with using new types of CSS selectors, and emulating CSS2 and CSS3 capabilities in Internet Explorer? I’d be very interested to hear how you’ve got on.

Update: Chris Coyier has included the basics of this approach in a more concise form at CSS-Tricks – worth reading if the above isn’t clear to you.

Hello all

I’m emailing my clients to recommend that they switch from Microsoft Internet Explorer to a more secure web browser in light of the security vulnerability currently being publicised in the news. So far, two governments (Germany and France) have warned that Microsoft Internet Explorer should *not* be used.

A web browser is the program used to view web pages. Microsoft Internet Explorer is the default web browser that comes with Microsoft Windows – it has a blue ‘e’ as its icon.

If you use Microsoft Internet Explorer to access the web, I recommend you download and install a better and more secure web browser to use instead – it’s very easy.

Here are a couple of good options, both of which are free and superior to Internet Explorer:

Mozilla Firefox
http://getfirefox.com/

Google Chrome
http://www.google.co.uk/chrome

Here is some more detailed information on the situation and the government warnings for those who wish to read more:

The German and French governments are warning web users *not* to use Microsoft Internet Explorer to access the web due to a security vulnerability, present in all versions of it, which was used in the recent attacks on Google, Adobe and other companies. They are recommending that current Internet Explorer users switch to an alternative web browser.

As a web designer, I also very much agree with this recommendation, based on security considerations as well as other important issues such as quality of web page rendering.

BBC news articles on the subject:

German government warns against using MS Explorer
http://news.bbc.co.uk/2/hi/technology/8463516.stm

France joins Germany warning against Internet Explorer
http://news.bbc.co.uk/2/hi/technology/8465038.stm

Microsoft admits Explorer used in Google China hack
http://news.bbc.co.uk/2/hi/technology/8460819.stm

If you have any questions, or are not sure how to go about using a different web browser, feel free to reply and ask.

If you know of others who may still be using Internet Explorer, you may like to forward this email onto them.

Kind regards
David Oliver

And then, without removing it from my mouth, I started moving it back and forth over my lower rear left teeth, as I would use a manual toothbrush. Even though it had either developed a fault or lost access to its power source, it degraded gracefully, allowing me to continue using it for its intended purpose.

Being a web designer, this inevitably reminded me of how websites should be built. (Though progressive enhancement is my strategy.)

Ever get the feeling your work colours your experiences of the world? :)

Harry Roberts has also blogged about Usability in everyday items over at CSS Wizardry.

This list is probably going to be of more use to me (as a reference to check on my progress) than to you, but maybe you’ll see something that catches your interest so I’m including explanatory notes.

Use open source software more, proprietary software less

I’ve been using the Ubuntu operating system on and off for quite a while now, but for the last few months I’ve been mainly working in Windows. If I can change this and work in Ubuntu I’ll be much happier as I’ll be better secured, have more useful features available to me, use a more streamlined operating system with less annoying fluff, and be less locked in to a monopolistic vendor (Microsoft).

Editing (X)HTML, CSS, XML, PHP and Javascript (the bread and butter technologies that I use in my work) can all be done fine in Ubuntu (likely using gedit or Aptana Studio), but visual designing and graphics work is something I’ve found I need Adobe software, such as Photoshop and Illustrator, to do.

Once I have a faster computer, maybe I’ll be able to do graphics work in a virtualised Windows from within Ubuntu. Better yet, I’ll find actual alternatives to Adobe applications. When I’ve previously tried GIMP, I couldn’t make myself persevere with the interface having got used to Photoshop. I also plan to take a look at Inkscape for website designing and web graphics.

Further reading: Free Your Computer with Linux (at The World of Stuff)

Learn the Dvorak keyboard layout

I currently touch type with the usual QWERTY keyboard layout, and learning to do so was one of the most useful and time-saving things I ever did. I would now, however, much prefer to be able to use the better optimised Dvorak layout.

It’s not so much that I want to type faster than I currently can (though that would be fine) – it’s more to do with not wanting to make awkward and inefficient finger and wrist movements. For example, ‘Regards’ is a word I often type at the end of an email, and with QWERTY the left hand has to type all seven letters. The Dvorak layout was designed to be easy and efficient, unlike QWERTY which was designed to stop typewriters jamming.

This will be a generally daily endeavour, perhaps half-an-hour every day. Ideally, I’ll initially keep my QWERTY touch typing ability so that I can type at a reasonable speed while I’m learning Dvorak.

Further reading: The Dvorak Keyboard and You (at The World of Stuff)

Read some books

I’ve found reading books to be a great way of improving current skills and learning new ones (as well as using the web to keep up-to-date with web-related technology and news), and of keeping myself positive and motivated. A good story is also something I enjoy very much.

In progress

The Handmaid’s Tale

There is Nothing Wrong with You: Going Beyond Self-Hate, A Compassionate Process for Learning to Accept Yourself Exactly as You Are

Where’s Stig? (like Where’s Wally? but with Top Gear’s tame racing driver – yes, I’m a big kid)

To start

Build Your Own AJAX Web Applications

The Principles Of Successful Freelancing

Designing With Web Standards, Third Edition

No Nonsense XML Web Development With PHP

A Short History of Nearly Everything

The Wishing Game

Continue building freelancing success

I was pleased with the acceleration in amount of work which came towards the end of last year, and I’ve got a fair mount of exciting and interesting projects to be getting on with. Together with some advancements in the industry, this means I’m very much looking forward to continuing developing my web design business.

To this end, I think I could do better in communicating 1) my products’ results, 2) my products’ technical quality, and 3) my main skills and approach. I also feel doing this in a friendly and straightforward way is important. My current website was intended as a temporary design and I’ll be coming up with something more comprehensive/betterer.

A first for me was creating and launching a site using Magento, an ecommerce webshop system: Model Learning Shop. I have another custom Magento design in the works for a new client, and with a bit of luck I think this will be an area in which I can help many others with, too.

Meet people

With work being busy, and my ability to be happy sat in front of my computer, it’s very easy for me to stay in. Living in Germany near my girlfriend’s family has ensured I’ve had a fair few laughs with good company, but it’s also important to get out with some other friends, so that’s what I hope to do more of.

I’ve already met up a few times with English-speaking people here in Cologne (a great thing to be able to do), and I’d also like to be able to communicate better with the natives. Which leads me on to…

Learn the German language

I have learnt some bits and pieces of the language, but can’t hold a proper conversation which is, of course, necessary to properly integrate! Britta, my girlfriend, has kindly got me some learning resources, including Take Off In German (Oxford) which I’m spending half-an-hour on each day.

German was not my best subject at high school, and there are things I don’t yet understand (e.g. cases), but like most things, with perseverance and time it will be achieved!

Use RDFa

A concept which has inspired me very much recently is that of linked data, and RDFa is the technology I will use to include machine-readable data in websites.

Web pages as they commonly are at present, are documents consisting of textual and other data, linked only by connections (hyperlinks) themselves. Each web page is essentially a standalone document. When the data on a page itself  is linked, and different websites refer to external data in a machine-readable fashion, entirely new ways of using the web become possible.

One of the most easily appreciable benefits of linking our data is the increased efficiency when searching for information. Instead of searching merely with keywords, relying on a search engine to take a stab at what we mean, we can explicitly define the entity in which we are interested. One example would be searching for a person; if we search using the keyword concept our meaning is ambiguous, but if we search by defining a specific person (defined, for example, by a url which represents the person in question) we will only get results relevant to that particular person, no matter how many people share his or her name.

With another advantage being that search engines such as Google and Yahoo Search Monkey are starting to include linked data in their results (and drawing attention to products that use it), now is the time to start making your data available with RDFa if you haven’t already.

Further reading: Linked Data Guides and Tutorials (at linkeddata.org)

Contribute to our environment and worthy causes

The annual BBC Children In Need event is something that my family and I have traditionally watched and contributed to, but I’d also like to include other charities which target other very important needs where possible.

1% for the Planet is “an alliance of businesses that donate at least 1% of their annual revenues to environmental organizations worldwide.” I came across it a while back but didn’t check out the details. The website has been updated since, so I will look into it further and hope to sign up if I’m happy it’s run well.

A non-profit charitable and educational foundation which launched on New Year’s Day is Foundation Beyond Belief. I like the sound of the way it’s set up:

Foundation Beyond Belief is a new non-profit charitable and educational foundation created (1) to focus, encourage and demonstrate humanistic generosity, and (2) to provide a comprehensive education and support program for humanist parents.

The Foundation will highlight ten charitable organizations per quarter–one in each of ten categories. Members join the Foundation by signing up for a monthly automatic donation in the amount of their choice, then set up personal profiles to indicate how they would like their contribution distributed among the ten categories. Maybe you’d like to give 25 percent each to human rights, poverty, education, and the environment. We’ll distribute it accordingly. By year’s end, you will have helped support a dozen organizations in the areas you care most about.

Blog

You’re reading the first post of my new blog, and I want to continue blogging throughout the year. I have a few ideas on things I want to write about/highlight, which hopefully some will find interesting.

I’ll be signing up to Project52 to give myself a good target of at least one post per week.

Aside from my own blog here, I’ll also be writing (assuming I can think of something to share) for a local English-speaking community blog, which will hopefully be a good way of connecting with people.

Improve website creation workflow

I’m a “hand coding” (I use that phrase reluctantly as writing (X)HTML, XML and CSS is not coding – it’s marking-up and styling) kind of guy when it comes to web pages, and I like to be in complete control of the markup behind each site I create. What is necessary for one site may be bloat in another. There are, however, many things which apply to most sites, so I’ve recently been doing my own little “framework” from which to start new projects. I’ve also decided to try using CSScaffold – a CSS framework with provides some great features without creating bloat.

In short, I’ll be able to give important considerations such as accessibility the attention they deserve while reducing the time taken to complete a project. The next website I do will use this framework as a starting point.

Buy a new computer

My computer was good when I got it, but that was a while back. I want something faster and quieter.

Relax better

I think I’m fairly good at mentally switching off when I want to, but sometimes I find I’m combining relaxation time with work time, rather than making sure I take some set time out. Sometimes urgent things require immediate attention, of course, but in general I’m going to try to relax better, as well as work better, where possible.

Exercise

At Christmas I got a set of dumbells and a Powerball! With half-an-hour on each (perhaps while watching something interesting/useful) I should be able to improve my upper body strength considerably, and put some weight on in the form of muscle. I’m 182cm (about six foot) and only 64kg (a little over 10st.), so a bit more weight would be good.

Play games

Thanks to a load of bargains on the Steam games platform I have several modern games which don’t run well on my now under-powered PC. Once I have a new system I’ll be devoting a little time here and there to some quality gaming – something I used to do a fair bit in my younger years.

And a Happy New Year to you!

All the very best with your 2010 and whatever you choose to do with it.