[ w e b i n s i g h t ] B Y JO HN R E T T I E

HTML5 Shows the Future

The hypertext mark-up language (HTML) is the basic
scripting language that is the key underlying technol-
ogy that allowed the Internet to become what it is to-
day. Created in the 1980s, in its simplest form it dis-
plays a website as simple text with little formatting
or functionality.
However, since being adopted as a standard in 1995,
HTML has been upgraded with new functions and
more structure in the way it is coded so that websites
can be far more versatile. Apart from the core HTML
tags, other components have been added, such as CSS
(cascading style sheets) for styling and JavaScript for
simple programming.
Then there are numerous plug-ins, like Flash, that have
enabled websites to include animation and video. These
have been necessary as HTML has not been capable of op-
erating beyond markup functions without outside help.
When you consider how fast technology changes, it is
kind of scary to discover that the current HTML standard
is only at version 4.01 and it was first introduced as long ago
as 1999. Now, 10 years later, HTML5 is slowly being intro-
duced as a new standard, even though it has not yet been
fully ratified by the World Wide Web Consortium.
The good thing is that HTML5 includes many new func-
tions, such as built-in video playing, so that third party vid-
eo players will not be required. It will also be smart enough
to allow for inline editing and moving of objects without
requiring plug-ins. In conjunction with CSS3, it will also
make it really easy to use any font as well as add nice mod-
ern touches such as borders, rounded corners and shadows
around text, photographs and boxes.
In case you’re wondering—many websites currently
have these features because designers and developers have
conceived of alternative ways to create these looks using
hacks, JavaScript and Flash. The beauty of HTML5 is that
it should obviate the need for these workarounds, mak-
ing sites simpler to create, faster and more consistent in
operation.
The problem is that not all browsers can read the im-
proved methods of writing the code. At this time Safari
4.0 and Firefox 3.5 are the most advanced browsers and
they can display most of the new HTML5 tags. Sadly, as
has been the case forever, Internet Explorer is the worst
browser at following standards.
If you really want to see how well HTML5
works, download the newest version of Safari from
webkit.org. This will give you a beta of a future version
of Safari that will come out with Snow Leopard, the next
Top: YouTube is already experimenting with HTML5 as a more efficient way of delivering Mac OS. I found webkit works well and it is fascinating
video. For example, when you move your mouse over the small images on the right, a
quick preview of the video is shown. Bottom: If you’re curious about new websites cre- to see what is in store when you visit websites written
ated with HTML5 you can see many displayed on this website (www.html5gallery.com). with HTML5.
 Incidentally, users of the iPhone with the newest 3.0
operating system, also get to experience many of the up-
coming HTML5 features.
Even YouTube is planning to switch to HTML5
for displaying videos and you can already see the new
interface by going to www.youtube.com/html5.
Gradually, as browsers get upgraded they will all
become better and better at correctly creating websites
with the new HTML5 tags.
In the meantime forward-looking website design-
ers are beginning to create websites using HTML5 and
those users with modern browsers will benefit from bet-
ter looking websites with improved functionality and
speedier operation.
Fortunately, well designed websites will degrade nicely
so those with old browsers should still get a decent Web
experience as key components will still function.
A sizeable number of photographers, such as those
using liveBooks, don’t really need to worry about this
as much as their sites don’t rely on HTML. However,
“...users with modern browsers will benefit it’ll be interesting to see how HTML5 eventually affects
designers as it may well prove to be a better way to de-
from better looking websites with improved sign graphically strong websites. As an added advantage
it will remove the need to built parallel HTML sites for
functionality and speedier operation.“ search engines and for viewing on the iPhone.
If you’re interested in seeing how HTML5 websites
look, you’ll find many examples. Go to www.html5
gallery.com and see websites and links to more back-
ground information on HTML5. You can also check out
my website (www.webinsight.info/html5) to see some
links to some of my favorite HTML5 links. And, yes, the
page is coded in HTML5.

Use Favicons to Highlight your Website

A couple of months ago, Dreamhost, the Web-hosting
company I use to host my various websites, sent out a no-
tice saying it was automatically placing an empty favicon
[short for “favorites icon”] file on every website that did
not already have one in place. The company stated it was
doing this in order to speed up the half a million or more
websites it hosts. The reason given made perfect sense as
most Web browsers look for a favicon when they load
a website on a computer. The browser wastes time if it
is searching for one when none exists. It may not make
much difference to an individual user but, in aggregate, it
can be quite a time and resource waster.
So, you ask, just what is a favicon? It’s that little icon
that sits on the left of the URL (address) of a website at
the top of the page. If there is none, a generic symbol
shows up that reflects the browser in use. Safari, for ex-
ample, displays a blue “blob” while Firefox displays its
worldly fox logo.
You’ll also notice the same favicon icon shows up beside
each website you have saved in your bookmark folder. It’s
here where the value of a favicon is immediately apparent
Top: When you look at your bookmarks you’ll quickly see those websites that have a as it visually locates a website listing. A good favicon helps
favicon. Middle: This randomly picked liveBooks customer uses his logo as a favicon
on his blog but not on his portfolio. Bottom: Just one line of code is required in the one find a bookmarked website much more easily than
header of the index.html file in the root folder in order to show a favicon. one with no favicon.
 Favicons came into being in the early days of the Inter-
net. They were first created by Microsoft and were only
used by Internet Explorer. Since then favicons have been
adopted by all browsers. Modern browsers can recognize
a favicon in several formats such as a GIF or even JPEG.
However, older browsers, especially Internet Explorer, only
recognize the ICO file format. Image editing programs,
like Photoshop, do not recognize this unique format.
A favicon is just a square image 16 x 16 pixels in size.
Try creating something in Photoshop at that resolution
and you’ll quickly get frustrated. Although there are
some Windows-only programs and even a plug-in for
Photoshop for creating favicons, it’s far easier to use free
online services to convert JPEG images or create ones
from scratch.
Some favicon-creation websites (www.genfavicon.
com is one) will convert a JPEG file. This is the easiest
way to create a favicon, but a photo, as it is so small, will
not likely be good for grabbing attention. If your logo is a
square format or short enough, it can, of course, be con-
verted as well.
If you want a quick favicon, I found one website
(www.antifavicon.com) that makes a dramatic but sim-
ple favicon from a few letters. It is somewhat limited but
is a quick way to get a favicon that will stand out.
So, once you have created your favicon, what do you
“… most Web browsers look for a favicon do with it? Ideally it needs to be placed in the root folder
of your website and it has to be named “favicon.ico” in
when they load a website on a computer.” order to be found by all browsers. In order to ensure that
it is discovered, there should be one line of code in the
header of your main index.html file that also sits in this
ALL figures COPYRIGHT © john rettie

root folder on your server. The line (see illustration, page

50) directs the browser to find the favicon file and use it
as an icon. It can be placed in another folder as long as
this line of code points to it.
If you have a third party creating your website for you
and you don’t have a unique favicon showing up, ask
them to add one to your site. If you supply them with a
logo that can be resized and will look good as a 16 x 16
icon, just supply them with a JPEG file and they can take
care of the conversion and uploading, which will only
take a few minutes. If you have access to your server it’s
easy enough to do it yourself.
Even once you’ve loaded your favicon it does not
always show up. That’s because some browsers cache
favicons and if the site has already been visited and
has a generic favicon that one will not necessarily be
overwritten immediately. Fortunately, it seems mod-
ern browsers are better at making sure the latest favi-
con is displayed and saved.
Using a unique favicon for your site will make it look
all that more professional and make it easier for visitors
to find your portfolio again, once they have bookmarked
your site.
John Rettie is a photojournalist who resides in Santa Barbara, CA.
He has been using a computer for 29 years, and has been on the
Top: This website (www.genfavicon.com) is one that can generate a favicon by Internet for 14 years. Now he’s learning how it all works—learn
uploading a JPEG file. Bottom: This (www.antifavicon.com) is a website that can more and find links to resources on his website: www.webinsight.
generate a simple but effective favicon from a few letters. info or contact him directly at [email protected].