Blog

The Internet in 3D, seriously

It’s not often that something genuinely new comes to the Web. Not new new, anyway. Sure, things evolve, often slowly and usually incrementally. A few years ago the big browsers started supporting javascript in a (mostly) standardized way, and that paved the oxcart trail for point-and-shoot libraries like jQuery and Scriptaculous, which sparked a wave of  awful sliders on top of every other Web site.

But times are changin’. And with more powerful Web browsers, a new generation of HTML, and killer new javascript libraries, full-on 3D is now a reality.

I use a fixed full-screen canvas and sync up scrolling with a 3D camera. The scene is mapped to CSS pixels and CSS perspective is locked to the camera. Once HTML, CSS 3D and WebGL are all in sync there’s a truckload of linear algebra and easing functions to keep you amused. The code is based on the platform I kludged together for the christmas demo, at times a mess of ad hoc demo formulas and spaghetti, though robust enough in the parts that count.

Check out the how-to. It’s jaw-dropping Wow (at least for Web design geeks).

Fonts on the web

For experienced Internet hands, the subtleties of font usage on the Web is probably old hat. But for many newcomers, it’s often a sour pill to swallow – the fonts you use on your computer every day cannot be used on your Web site.

glyphs

In the earliest days of the Web, the number of fonts available to Web designers counted about five. Beautiful typography was non-existent. The source of the problem lied in the fact that when a designer specified a font – Arial, Helvetica or Times New Roman, for example – that font had to be installed on the computer of the user visiting the web site or the font simply couldn’t be displayed. It was impossible to know who might visit your Web site and what fonts he or she might have installed.

A solution was first proposed in 1998 with CSS2, but the techniques never caught on. It wasn’t until 2009 that a robust solution finally gained traction: the CSS3 Font Module, which allowed designers to send font files down the pipe just like images.

But there was a catch. A few actually, and not small ones.

For one, fonts are made by font designers who earn their living from making fonts. Many would not be able to eat if their products flourished freely across the Internet. Browser support was inconsistent, too, which made consistent display impossible at times.

By late 2010, however, most of those issues had been solved and a new era of Web typography was in full swing. Yet still the problem remained: the fonts you used on your computer every day could not be used on your Web site.

The reasons were two-fold. The first was mostly a technical issue. Many, if not all, of the fonts on your computer are optimized for print, not digital display. So they just don’t look right on the Web. They are too small, too rough. The other reason was a legal one: you only have the right to use, not distribute, the fonts on your computer.

Free public libraries

So what is the answer? Since web typography has spread, a handful of services have come along to help solve this issue. The two most notable ones are Google Fonts and Font Squirrel. The first offers a library of fonts freely available to use in all your digital projects. The second offers an easy way to package fonts you own into easily shareable web formats. And both are free.

Spend some money

It’s still likely, however, that most of the fonts you love are not available from the above services because of copyright issues. You can probably find them from paid services such as

Now that you have tons of fonts at your fingertips, take a little time and learn about font pairing and selection.

Death to the slider

More of this, please.

If you asked us what is the number 1 trend in Web design today, this would be it.

… Either it be a simple blurred photo in the background with a heading centered in the middle, or a more elaborate one such as the illustrated hero area in the Realtii.com site above, hero areas are quickly replacing sliders as the new attention-grabbers, and they are becoming increasingly creative and elaborate.

I’ve never been a big fan of the slider, mostly because it turns the user into a passive viewer. On the web, everyone wants to drive; no one wants to be a passenger. Bigger, bolder, better artwork will leave memorable impressions. Sliders often struggle in that task.

WordPress e-commerce

As an avid WordPress evangelists, one of the most obvious missing elements in the arsenal has been a viable e-commerce solution. While options have existed for some time, none were great, and even the best of them required tons of time to adapt to your specific needs. And, as we all know, time is money.

About a year ago, WooThemes announced its intention to change the playing field and launched  WooCommerce, an open-source WordPress plugin aimed at doing e-commerce right.

Fourteen months and several beta tests later and the reviews are in: WooCommerce is good.

The basic WooCommerce plugin is completely free to download and use. It’s built on top of standard WordPress Custom Post Types and straight out of the box, is extremely powerful with a lot of functionality. WooCommerce comes with all the standard features that you’d expect within an eCommerce plugin such as;

  • Various types of reporting on sales, customers and stock
  • Dashboard widgets that allow you to keep an eye on various aspects of your store from the main WordPress dashboard page
  • Shipping & Tax settings
  • Customers & Orders
  • Product & Inventory
  • Marketing & Promotions including the ability to add “coupons”
  • And most importantly, various Payment Gateways & payment methods

If you’ve ever had to suffer through the frustration of developing with WP E-commerce (fair warning: don’t believe the hype), WooCommerce will make you absolutely jubilant.

Flash goes HTML 5

Expect to be hearing a lot about this in the future.

The latest buzz is that Flash goes HTML5 i.e. the work done in Flash can be imported to HTML5 using the new Creative Suite called Flash CS6 that will work on iPad and iPhone as well as Android and it will also support Windows 8.

A year or so ago, pundits were predicting the death of Flash. That seems unlikely to be the case now. The devil, of course, is in the details. Expect a lot of experimentation over the next few months.

Flash CS6 uses the CreateJS open source framework for the output of animations in Flash. A Flash animation can be exported to the CreateJS framework working within the Canvas element of HTML5 which is being called as the Toolkit for CreateJS. It will help to smooth the transition to the world of JavaScript from ActionScript development. It is thus being predicted that HTML5 has a great future in the world of web development and Web designing.

 

SEO in 1 minute

Read Jill Whalen. Religiously. Her newsletter is among the very best resources on search engine optimization available anywhere. Her posts are far too complete to try and summarize, but here is a taste from her latest newsletter:

I recently did a site audit for a client who was wondering why they were having a hard time showing up in Google. … They have a fairly small local company that sells some common but specific types of office furniture. While they have a niche for the type of furniture they sell, for the most part it’s nothing that you can’t buy at most of the large office-supply stores such as Office Depot and Staples.

So how do you compete SEO-wise with the $1 million budgets of Office Depot and Staples. It’s not impossible. But it’s not easy, either. Or fast. Read the whole post.

Quest for Land, by John Vink

If I haven’t mentioned it before, I’ve been working with Magnum photographer John Vink on his Quest for Land iPad app — John on photos, me as the dev guy, and journalists Robert Carmichael as the wordsmith. The app was released about 10 days or so ago, and as an iPad app, it’s gotten pretty good reviews from those who took part in our informal beta testing.

John has more info on his site, including screen shots and a short movie. And, of course, it’s available on the iTunes store: Quest for Land.

Quest for Land chronicles more than a decade of land issues in Cambodia. There’s a lot on forced evictions and their aftermath, as well as some solid historical and cultural background on land issues in Cambodia. In total, Quest for Land contains about 720 photographs and 20,000 words on the subject. The app costs US$9 — basically that’s a penny per photograph and the words are free — a shocking value proposition. Buy a copy if you can. It’s well worth it.

Fighting spam

Everyone hates spam. So why are more and more local companies adopting this awful marketing technique? Ignorance, I suppose. But there are ways to fight back.

During a recent project, I stumbled across a dead-handy WordPress plugin that does exactly what its name suggests — obfuscates your email address.

Type your email address —  [email protected], for example — into any WordPress page, and the plugin will render the html as [email protected].

Spam-bots get nothing.

For more on the subject, check out A List Apart’s essay on Graceful Obfuscation.