Use Microsofts official Internet Explorer Virtual PC testing images in VirtualBox on OSX

If you need to test Internet Explorer 6 on your Mac, but don’t want to resort to multibooting, you can download the free VirtualBox software, and grab one of Microsofts free VirtualPC testing images and get up and running.

  1. Download a VPC image of your choice.
  2. Rename the .exe file to .rar, then unpack using a RAR unpacker on the Mac
  3. Create a new Virtual Machine in Virtualbox. When you get the chance to select an existing disk, do that and point to the VPC image.
  4. Boot. The VPC image may require activation and/or a password (which resides inside the .txt file that came with the VPC image)

Yep. There’s the activation hassle. It’s Microsoft. What did you expect? It’s still easier than manually installing Windows XP.

CSS box-sizing; File under “really helpful”

When it comes to layouts, proper widths define whether or not you’ll get a headache. Especially when sizing input fields or textareas, setting the proper width is a challenge. This is due to the CSS box model, which calculates margins, paddings and borders outside of the box width.

A behavior which you can fortunately change:

box-sizing: border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
-ms-box-sizing:border-box;

This changes your divs and block elements to calculate paddings and borders inside the specified width.

The peculiarly bad situation with web-fonts on Apples iPad

I’ve thrown a lot of love in the general direction of Apples open source WebKit lately. It looks like WebKit, moreso than Firefox, has ousted every other browser as the rendering engine of choice for a richer web. Unfortunately, I’m about to throw something other than love at WebKits little-sister, Mobile Safari. Why? Because it’s useless at web-fonts.

Typekit’s talked about it:

Rendering multiple weights from a font family can cause Mobile Safari to crash, even when the individual font file sizes are small (<5k). In our testing, using two weights from a family caused Mobile Safari to crash on up to 50% of attempted page loads, and the crash rate seemed to increase as we increased the number of weights we added.

So that means you can use ONE weight of a web font. “Regular”, for instance. But you can’t use that fonts “Bold”, “Italic” or “Bold Italic” versions.

Just recently I wanted to use the glorious DejaWeb font for a project, and now that all the major browsers support web-fonts, I quickly fed the fonts to FontSquirrels excellent multi-platform font-converter and was output something that was supposed to work in all the browsers. EOT for Internet Explorer, WOFF for Firefox, TrueType for WebKit and SVG for Mobile Safari. Everything seemed to work just perfectly. Except of course for the intermittent crashes on the iPad.

A Temporary Solution

Now since the bug has been filed and Apple will probably fix this in some unannounced not-soon-enough future (maybe the iPad will get multitasking and font-face support at the same time?), I’m not going to waste any more tears. Instead I’m going to let you know what I did to deal with this issue.

At first, I worried that I wouldn’t be able to use DejaWeb at all, since this project had to be at least compatible with the iPad. I didn’t want to look into CSS hacks or JavaScript to detect user agents to then serve web-fonts to only capable browsers, carefully omitting the fonts for the iPad. Then it dawned upon me, a realization that in retrospect is embarrassingly simple (pointing and laughing for a little while is okay). Since MobileSafari can only render fonts converted to SVG, the solution to the crashes was to simply not serve an SVG font. Or in my solution, serve it only one SVG file: DejaWeb Regular.

@font-face {
	font-family: 'DejaWeb';
	src: url('fonts/DejaWeb.eot');
	src: local('DejaWeb'), local('DejaWeb'), url('fonts/DejaWeb.woff') format('woff'), url('fonts/DejaWeb.ttf') format('truetype'), url('fonts/DejaWeb.svg#DejaWeb') format('svg');
}

@font-face {
	font-family: 'DejaWeb';
	font-weight: bold;
	src: url('fonts/DejaWeb-Bold.eot');
	src: local('DejaWeb Bold'), local('DejaWeb-Bold'), url('fonts/DejaWeb-Bold.woff') format('woff'), url('fonts/DejaWeb-Bold.ttf') format('truetype'), url('fonts/DejaWeb-Bold.svg#DejaWeb-Bold') format('svgFIXME');
}

@font-face {
	font-family: 'DejaWeb';
	font-style: italic;
	src: url('fonts/DejaWeb-Italic.eot');
	src: local('DejaWeb Italic'), local('DejaWeb-Italic'), url('fonts/DejaWeb-Italic.woff') format('woff'), url('fonts/DejaWeb-Italic.ttf') format('truetype'), url('fonts/DejaWeb-Italic.svg#DejaWeb-Italic') format('svgFIXME');
}

@font-face {
	font-family: 'DejaWeb';
	font-weight: bold;
	font-style: italic;
	src: url('fonts/DejaWeb-BoldItalic.eot');
	src: local('DejaWeb Bold Italic'), local('DejaWeb-BoldItalic'), url('fonts/DejaWeb-BoldItalic.woff') format('woff'), url('fonts/DejaWeb-BoldItalic.ttf') format('truetype'), url('fonts/DejaWeb-BoldItalic.svg#DejaWeb-BoldItalic') format('svgFIXME');
}

Notice how I’ve invented a new font format called “svgFIXME”? Yep, that stays until the iPad can render SVG fonts in more than one weight. Until then, plain old regular it is. Even for bold-face text. It’s better than a crash, right?

Countering The App-Based Web

Far too little do I visit websites, these days. I mostly stay within the comfortable uniform walls of Google Reader, clicking j or k to navigate from one item to the next, in a carefully mixed personal newsstream. Which means webdesign is usually lost on me. Not only that, but with very few exceptions, I prefer the clinical design which Google Reader homogenates everything into. I can even favourite, share and otherwise discuss or manipulate individual news items, right then and there. It’s a great way to browse the web.

So what of webdesign in five years? Will it exist as it does today, or will it drown in an app based web which wraps every content item into viewer into viewer, turtles all the way down?

iPad_reader.png

If more and more websites are read through these web-goggles, here’s a few wild guesses as to what it’ll all mean:

  • Likely, RSS feeds will get its content designed, things such as ads, logos and copyright notices included in each item. Maybe even even colors and font sizes will be tweaked
  • Websites will primarily serve to advertise their RSS feed, and subscribing will be sponsored by Amazon 1-Click
  • Way more RSS feeds will become excerpt-only
  • Blog comments will continue their death spiral and their move towards social media

The focus of this speculation is whether traditional webdesign will have a place in the future, so please omit web-app websites like Gmail or Google Docs from these criteria.

Steve & Rupert, Sitting In A Tree

Apples vision is that of an app-based web. Large media companies that can afford iOS apps, will get their content wrapped in a distributable container. They can put a price tag or even a paywall on these apps and the content is usually presented in a fashion that is more “delicious” than “just a website”. Which when put this way, appeals to control freaks like Rupert Murdoch. The situation is that small individual websites like this one, maybe even yours, may be slowly dying as an editorially tailored, individual news stream. It’s easy to worry that in the future, all a website will be is a content teaser and a large subscribe button. Or a suggestion in an app-based feed-reader, where once subscribed, all visual distinction will be exorcised. Like the web killed newspapers and iTunes killed the album, so Google Reader killed the blog. This house is clear.

iPhone_reader.png

I don’t think the app-based web is the future of the internet. Wrapping your web-accessible content into something that has to pass through the App Store to end users is a fad, inspired by the joy it is to use a well-designed iPhone app. It’s also artificial respiration for Ruperts vision of control. In my mind, it’s only a matter of time before executives and recent iPhone switchers stop yelling “we need an iPhone app” — wait, maybe not — but it is only a matter of time before end users will avoid these non-apps like the plague. What will survive the age of enlightenment, are feed-readers, even ones that take your content and present it in book-like, newspaper-like or even magazine-like fashion. Ultra-personalized, tactile, Minority Report-esque, flying, folding, flipping rotating throbbing super feed readers.

The Consequence For Webdesign

I like a pretty weblog. I spend a profuse amount of time designing my own websites, not to mention client sites. It’s a joy to look at a content-well that’s well-crafted and put-together. My worry is that the designed website is going the way of the dodo, in favor of something that has to be “installed”.

At the same time, I like the idea of the personal news-stream. Using my Google Reader and staying inside it, I’m instrumental in making this change happen. I also don’t bookmark websites anymore, or type in web-addresses. If I visit a website, it’ll be the odd situation when I step out of my reader, or visit a link you sent me. As much as I love it, I smell death on your lovingly crafted blog.

In one future that is forming, we search, and we use web-apps that have prominent app-like bookmarks. We read sock-off-knocking personal news-streams, and in this future, the RSS standard has been elaborated upon in a fashion that allows a modicum of interactivity and customization. It’s a future where a feedreader called “Duper Reader” combines RSS with HTML5, CSS, Javascript and extensions, and some of your design will survive its stripping and aggregation powers.

The Earth-Two Personal Website, Where URLs Survived The Great Purge

In another future, we still do type in web-addresses. In this one, the blog you spent time designing has a shot, and it doesn’t involve you excerpting your feeds. In this future, your well-written blog which features real content and not “song of the day” or “latest lol-cat”, will be visited outside of feed-readers. These websites work as they do today: users might star or favourite an item in your reader and then actually visit the website to discuss it with the author.

Depending on which future you believe in, what you want to do is ask yourself: do I care enough about my webdesign, that I want to give people reason to leave their feedreaders?

If the answer is no, then do the following:

  • Love the reader. Screw your design. Use a service that makes it incredibly fast to post, like Tumbleblog, Posterous or Buzz.
  • Make sure your RSS feed icon is large and super well advertised on your website.
  • You absolutely must provide a full-text feed.
  • If you want to monetize, put … gasp … ads in your RSS feed items.

If you can answer yes, then do the following:

  • Write well.
  • Provide means to share your columns.
  • Put effort in your webdesign and set yourself the goal of out-designing the feed reader: your design has to be at least as easy and preferably more comfortable to read than an RSS item. Trust me that this is no trivial task. It involves font sizes, paragraph styles, column widths, and lack of text shadows.
  • Find an app-based website you like. NY Times or Jamie Olivers iPhone apps, perhaps. Study them. Then grow the skills it requires to translate these reading paradigms to your website. I’ve seen what you can do in HTML5 and JavaScript. Leverage this to make a delicious, quick-loading, tactile reading experience, where the page jogs that are usually associated with loading webpages are minimal.

I sense it in the water; a purge is coming. If you can manage to build a great website before then, your website will survive feed-reader obscurity. If you cannot, embrace the reader.