sudo apt-get install ruby1.9.1
sudo gem1.9.1 install compass
sudo echo "PATH=$PATH:/var/lib/gems/1.9.1/bin:$HOME/.gem/ruby/1.9.1/bin" > /etc/profile.d/rubygems1.9.1.sh
compass version

I’m not a Ruby on Rails developer, and I’m not overly familiar with Ruby configuration, Rails, gems, etc., but the above steps were found on a couple of mailing list and forum posts.

I’m still finding my way round the mixins, features and syntax that compass offers, but very much believe in the power of using such a framework to cut down on manual CSS typing and future maintenance issues. I’ve started building up my own framework and am looking forward to using it in future projects.

As a result, I am closing my Amazon account, as has Daniel Ellsberg and, no doubt, many others. This involves sending Customer Service a message from within one’s account pages.

Once I manage to set up an alternative means of payment for one of my domain name registering service providers, I shall also be closing my PayPal account for the same reason.

Google Wave really struck me with its potential when I first saw what it was about. Adding the persistence of email to the real-time nature of instant messaging in an environment open to multiple participants was one of those things that now seems so simple and blindingly obvious. During its preview I’ve successfully used it with two clients and a few friends, and avoiding email copying to multiple recipients in order merely to have a textual conversation was great.

So I’m extremely disappointed that Google has announced it doesn’t plan to continue developing Wave as a standalone product.

I’m aware many people’s response to Wave has been one of confusion or apathy. Many seemed to think that it was pointless. But I believe expectations were misplaced.

I didn’t view it as replacing project management or instant messaging. I didn’t explore the various extra bits and pieces, or the advanced techniques. I didn’t read The Complete Guide to Google Wave to find out about all the extra cool things that could be done with it. I just thought the basic concept was great, and found that it worked.

Google was even going to open-source the protocol, allowing the whole world to work with the technology.

Google states “But despite these wins, and numerous loyal fans, Wave has not seen the user adoption we would have liked.” But it’s currently only a preview. Carry on making it, and it has great chance of shining through in the end.

If Wave doesn’t see the light of day as a full product/protocol in the near future, something similar will soon after. Change does take time, and the full potential of good things is very rarely seen by the masses immediately. But we humans are social animals, and we will find better and better ways of communicating with each other over time.

Google: please let that Wave build.

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).

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.