Browsers

Is the iPad the new IE6

iPad is the new IE6

Imagine you are working on a project targeted for the iPad, Chrome and Safari that should contain an interactive HTML5 video… Design and feature-wise the project seems pretty simple and since you assume that the newest Webkit browsers have a good support for CSS3/HTML5/JavaScript (and Steve Jobs says it’s “amazing”) you shouldn’t have any issues building it, especially since you have coded many video players and interactive videos using Flash before and you are pretty experienced with HTML/JS projects and have used HTML5 video and CSS transitions/animations on a couple other projects.. A couple weeks of development should be fine… – Now you have a big problem.

This is something I’ve dealt with lately, sites not showing up correctly in the iPad. The iPad is a the first wave of simple specialized computers (OK, maybe the second after the iPhone and other smartphones), but it is one of the worst when it comes to displaying html pages consistently with IE, Firefox, Chrome and even the full version of Safari. Safari Mobile has quirks, especially with it’s complete lack of Flash support and difficulties with html5. iPad users complain when sites send them to their mobile pages, but that is the only way to guarantee a consistent experience on the Safari Mobile platform.

Many of us were hoping the days of coding for bad platforms like IE6 was over, but now the iPad rears it’s ugly head. This is an issue Apple should address as soon as possible.

Chrome tips for designers and developers

7 Chrome Tips Developers & Designers May Not Know
google chrome poster at old street underground station

Chrome has definitely become my browser of choice for most things. Firefox has great dev tools, but this is a good list of Chrome’s latest capabilities.

Using CSS 3 @font-face for font rendering

There are multiple methods of creating custom fonts for web pages, Cúfon, sIFR, Google Web Fonts, etc… None of these have been a good fit for my projects until I looked into the CSS3 @font-face method. It’s simple to use and SEO friendly.

All you have to do is go to urbanfont.com, fontsquirrel.com or another good source of appropriate licensed fonts and pick out what you want.

Once you have the font files, use the @font-face generator at fontsquirrel.com to create a kit that includes all of the font files you need for browser support. Put the fonts and sample code in the appropriate places and update your CSS to use the new fonts. Walla, shiny new fonts on your web page.

Disable Chrome QuickSearch for Google

I’ve been using Chrome a lot. Why you ask? Mostly because it works really well on my Ubuntu workstation. Getting Flash and Firefox to play nice together under Linux has been a challenge for years, but Chrome doesn’t seem (at least so far) to have problems like that.

There is one big annoyance I have with Chrome though, QuickSearch. When you type a search term that starts with Google into the URL bar Chrome automatically goes into this QuickSearch mode.

For example, I was going to search for the Google News Archive today (another project Google is shutting down that I hadn’t ever heard of). I typed “Google News Archive”. Chrome conveniently, because the term started with ‘Google’, put me into a search mode labeled ‘Google QuickSearch’. The result of my query? Just a search for ‘News Archive’.

The funny thing is, Chrome searches with Google by default. You can use other terms for QuickSearch, like wp (wikipedia), e (ebay), z (amazon), g (google again??? What’s the difference between this and Google QuickSearch??) etc..

It’s not too difficult to change this irritating behavior. Just go to Preferences->Basic, under Search click Manage Search Engines. The first entry in the Other Search Engines section is Google QuickSearch, just delete it and you will be able to once again search for terms that start with Google