BlogmyQuery – BMQ

When using @font-face to embed a typeface that has several weights and styles, your CSS can become a bit of a mess unless you define those weights and styles in the @font-face declarations. Unfortunately some tutorials and font embedding services do not do this.

The problem: Declaring multiple font-family names for the same typeface makes your CSS complex and forces you to remov fallback styles in browsers that do not support @font-face.

The solution: Specify font-weight and font-style in each @font-face rule to match each font’s properties, and use the same font-family name.

Read full post

Posted in CSS, Typography.

The default viewport settings – the size and scale of the viewport – in Mobile Safari/Safari for iOS are optimised for websites with a width of 980 pixels. This means that if you use a fluid/elastic layout or media queries to make your layout adaptable, Safari on iOS doesn’t take advantage of the flexibility that offers but shows the site zoomed out as if it had a fixed width.

Another issue with Safari on iOS is how text size is handled when you change orientation from portrait to landscape on your iPhone/iPod/iPad. The default behaviour is to increase text size instead of using the extra available width to display more of the site.

As a developer you can affect both of these issues (or features if you prefer to call them that).

Read full post

Posted in CSS, Usability, iOS.

A few months ago I posted a tip on how to Minimise file size with the YUI Compressor TextMate Bundle. The idea is to get minifying of CSS and JavaScript files into your workflow even if your server or CMS isn’t setup to do it automatically for you.

It works well, but I recently ran into a YUI Compressor bug that had me scratching my head for quite some time. Some of my media queries simply weren’t working. I checked the Media Queries specification, read various tutorials and examples from around the Web, and despite my syntax being correct some things just wouldn’t work.

Incredibly frustrating, but I found out what the problem was and how to fix it.

Read full post

Posted in CSS, Coding.

For anyone looking for a new job there sure are a lot of interesting listings at Authentic Jobs. However the overwhelming majority of those jobs are in the US, which isn’t very exciting for us here in Europe.

There are currently a few listings for jobs in Europe though. Coincidentally they are all in London, UK:

• PHP/Web Developer at Mr & Mrs Smith
• Creative Designer at Hotels.com
• PHP/SQL Developer at Wireless Intelligence
• Front End Web Developer at Potato

So if you’re looking for a web designer or developer job in the UK those are a few tips.

Read full post

Posted in Job openings.

One of the most visited pages on this site is the Simple 2 column CSS layout tutorial, where I explain how to create a basic 2-column CSS layout with floats. Many readers have asked for a similar tutorial on how to create a three-column layout, and I’ve been meaning to write one for a few years.

Well, I finally took the time to do it. Three-column CSS layouts have been explained many times, in many different ways, by many people already, so there is nothing (or at least not much) new here. It’s also something that I’m pretty sure that most regular readers can do in their sleep. Regardless, there are many people looking for this info, and it’s convenient to be able to refer to an explanation of how I normally create 3-column CSS layouts with a method that I find robust.

Read full post

Posted in CSS.