Firefox Beta 1
If you are running Deer Park and ran an update, check your Help menu – About Mozilla Firefox, it should now say Gecko/20050907 Firefox/1.4, and the Deer Park references should be gone. Looks like the beta is here for FireFox 1.5.
The Browser Reloaded
It is hard to imagine, but I am sure someone out there is still using Internet Explorer, though I cringe every time to even think someone on Mac OS X would even dare open up IE 5, but I am sure that still occurs once and a while. I have been running Deer Park (Firefox 1.5) for a few weeks now on Windows, but on Mac OS X, I still use Safari about 60% of the time, with Firefox coming a close second. With Apple updating Safari recently I started thinking about what makes a browser useful and popular among those of us who get in six plus hours of internet browsing a day?
Updates Versus Stable Fixed Releases
Undeniably there has to be a certain mystique of freshness. But no application can ever stay at .9 or even at 1.0 for very long. Progressive users want progressive upgrades, in a sense this is what is missing from Apple’s Safari and Microsoft’s Internet Explorer. Now I am not talking so much about feature load, no one wants to load a browser that is overblown with features, but tech-savy users do in fact crave constant updates. Firefox and Mozilla come in stable releases and in nightly builds that anyone can try out. Thus the constant updates helps build the mystique and momentum that makes the stable fixed releases even more popular.
If Apple and Microsoft adopted this same two-fold release schedule, I am sure it would have the same effect on their browsers, but since both browsers come pre-installed on their respective operating systems already, it would seem rather unnecessary to mimic Firefox and Mozilla, when you already have an audience, right? User base is one thing, perception is quite another. The Deer Park Alphas have shown something new in Firefox, namely that the browser is not so much being reinvented, but that it is being fine tuned for a generation of internet users who want simplicity and expandibility in ways that previous users never imagined. What is happening is that while Apple is great at user interface and Microsoft is great at adding features, neither of them is great at both. Firefox is trying to do both, along with everything else, and while the 1.0 release was short on many areas, the 1.5 release is a remarkable improvement on everything.
Expandibility, Letting Others Show You A Better Way
Outside of the nightly builds, Firefox has something unique, it has a community of extension and theme authors that are expanding Firefox beyond the shell it is, and while not all the additions make sense, they are in fact building a community. The word community, emphasizing trust, because although you can download toolbars for IE and other such add-ons, not very many users have trust in these packages. Firefox’s association with opensource also helps attract more users to its extensions and themes, because even if Microsoft and other closed-source developers would like to argue, the truth is that most people trust opensource projects more than they trust commercial closed-source products.
The presence of an active and contributing third party community is really essential in making the browser attractive. This is what Safari really needs in order to gain more momentum in the market. Note the initiative that Apple took in pushing the popularity of Mac OS X Tiger Dashboard Widgets. Why could they not do this for Safari? Is not the browser the number one application these days?
Authoring Tools Needed
Perhaps the last piece of the puzzle for a popular browser is the one which no one has quite really mastered yet, which is the authoring tools. The web may seem infinitely more open today because of bloggers and their constant typing of editorials, thoughts, and news items, but what made blogging popular in the first place was not new technology, but accessible tools. The online publishing revolution has not even begun. Internet users still need better tools than WordPress and Dreamweaver. All this time the browser makers have spent their time making the web page render better and in more interesting ways, but what makes the web more dynamic is when the user actually publishes and not just sits there browsing. The browser will eventually need to become the publishing tool as well, and maybe that is what has been missing most of all.
Adding Style Sheets to Your HTML
This is part one of How To Add Style Sheets To Your HTML. We will cover the basics mostly, but the idea is that there are always multiple ways to do something, and many web designers do in fact vary their methods of how they add CSS to their html code.
Method 1: In the beginning…
This is by far the most common and the default way to add style to your html document. You simply link to your stylesheet in the HEAD section of your html document.
<head>
<link rel="stylesheet" href="http://www.domain_name.com/style.css" type="text/css" media="screen" />
</head>
<body>
The optional media specifies the medium or media to which the style sheet should be applied to. The most commonly supported media type is “screen”, which is meant for computer screens. There are other options though, like print, for output to a printer, and aural and braille for speech synthesizers and braille tactile feedback devices.
Method 2: Embedded Style Sheet
Perhaps not the most efficient, because it makes your html document larger, and you lose the benefit of being able to effect other html documents, but still a popular method is to simply add your style information to the html HEAD section.
<head>
<style type="text/css" media="screen">
body {
background: #a9ac99;
font-size: 13px;
font-family: 'Trebuchet MS', Verdana, 'Lucida Sans', Helvetica, sans-serif;
}
</style>
</head>
<body>
</body>
This method is helpful too, in cases where your html document has a unique section which other html docs will not have, and you do not want to change your main stylesheet.css file. You can add just the css you need after the normal linked style.css like so:
<head>
<link rel="stylesheet" href="http://www.domain_name.com/style.css" type="text/css" media="screen" />
<style type="text/css" media="screen">
#special_section {
font-size: 12px;
}
</style>
</head>Method 3: Inlining Style
Sometimes, you have worked all day on getting something to look great and then you find out that your style looks awful in Internet Explorer, so you cheat and use inline style. This is where you add the style information to the element itself, like so:
<p style="color: #666666; font-family: serif;"> This means I'm too tired to fix it in IE.</p>
This is not very flexible but it does fix some problems very quickly. However you should not rely on inline style very often because it makes the html document not very readable in other media, like braille, or even print.
Inline styles are userful in troubleshooting stylesheet problems, but just remember not to implement them as an actual solution.
The CSS Anthology
I finished reading Rachel Andrew’s The CSS Anthology: 101 Essential Tips, Tricks & Hacks and I have to say, that this is a very well written book.
There is nothing more frustrating for me than to buy a technical computer book and find out that it was totally useless. I often run into the problem where most computer books are either too easy, (like explaining how to install something or edit a preference), or they are tomes of reference material which I get bored with very easily. It seems like everything is written for the absolute beginner or experienced professional, perhaps publishers do not like to market to articulate readers who can do multiple things well. However Rachel Andrew’s book happen to be a welcomed and exceptional computer book.
To begin with this is a CSS book, and in case you do not have much experience with CSS, this is a very intimidating subject. CSS does two things for html web design, it removes the layout leaving only the content for you to write, and it styles the content. CSS layout and CSS styling are where most web designers are aiming for these days, but if you are just learning CSS, you will soon find out that CSS styling is the easiest concept to grasp and CSS layout is quite the opposite. Given this, every CSS book tries to conquer both layout and style, and usually fails miserably when it comes to explaining layout. Part of the problem is that there are multiple browsers and each one supports CSS positioning in different ways, and you end up having to find a layout that works well in most browsers, while with font styles, even if a font does not display quite right, it still displays, so web designers has an easier time with CSS styling.
Although the title of this book states to have a 101 essential topics, while reading it cover to cover, you do not have the impression of counting each topic and that some topics are not all that essential. Rachel Andrew’s writing style makes each topic seem important and relevant to the overall discussion which is important, because it also allows you to read the book in multiple ways. Most computer book authors tend to reiterate the same things over and over again too, because they know most people will not be reading the entire chapter at once, as if they also know their book is boring; Rachel Andrew avoids a lot of repetition which is good, but obviously some points have to be restated for clarity. Personally I found the book a better read if you can finish the whole chapter at once, and this tends to work very well until you get to the later chapters which tend to be less consistent and have more random points.
Chapter Thoughts
As usual the first chapter covers CSS fundamentals, but it does it very well and even if you have experience with CSS, you should glance this chapter over, as Andrew’s explanations for browser layout and elements are very good, in fact it is the best explanation of CSS I have ever read! After this Andrew covers font styles and images, which most experienced designers will probably be familiar with. A good chapter to read is the chapter on navigation, as it explains how unordered lists are essential for making good navigation menus. For the chapter on tables, I found the subject interesting, and probably it will be something I will come back to, but I do not do much work with tabular data of late. I found the chapter on forms to be more immediately useful. About 40% of the book, is devoted to CSS layout positioning and while the beginning chapters are pretty clear, the last chapter is kind of a muddle of different browser specific problems which of half are essential and useful. I will still give Andrew credit though for remaining consistent until now and not boring me.
Sitepoint has the complete chapter list on their website, so if you would like to see the specific chapter titles you can.
Problems, Complaints
EasyRiders has quite a few CSS books on the market, some of which are in color and written by CSS guru Eric Meyer, and in certain places, it would have been nice if the CSS Anthology was in printed in color instead. Some of the tips would have been easier to see if you could have seen a better graphic in the book. However given that some of those colored books are around $50 and Rachel Andrew’s book is considerably cheaper, this complaint might not be so valid to some readers.
I am sure some readers would have liked a reference chapter, or a nice cheat sheet graphic which they could use as they are learning layout, but to be honest, some of this is more easily found on the internet and if you really want a colored cheat sheet, you should be able to find one and print it yourself.
Summary Review
Rachel Andrew’s The CSS Anthology: 101 Essential Tips, Tricks & Hacks is a good book aimed at beginners and experienced designers who want a concise and very readable CSS manual. I recommend it highly.
Easy XHTML Templates
Easy XHTML is a simple form that builds a standard XHTML template with all the meta tag lines that you always need to have in any html file, (but for some reason always tend to forget about). I’m sure not very many WordPress users have a great need for such a thing, but every now and then you run into a situation where you just need to code a single page outside of your blog, and that’s when it comes in handy.
Easy XHTML builds either strict or transitional templates and I put in the four indexing options just for completeness. Although the form is not very fancy, because it will generate all tags regardless of whether you inputted any data or not, it is still faster than trying to write a template by hand or should I say memory.
Overview
The first two options, are pretty simple. The title is what the browser window displays, and the domain url is used to generate the code needed for a favicon.
For the stylesheet, either put in the full url or if the stylesheet is at the root of your directory, then just type in the stylesheet name.
Author and Copyright are pretty self explanatory, just type in what you want for these meta tags.
Description and Keywords are important meta tags if you want to be displayed well on Google and Yahoo. You usually want to have the same words in both the keywords and description. The description should be short and to the point, 25 to 30 words (or about 160 to 180 characters). For the keywords, you can separate phrases or words with commas. Keywords should be limited to 15 to 20 words.
There are four indexing options, just choose the one you want, with the most obvious choice being to index all.
Lastly are the doc types for the template. Transitional is the most popular.
Notes
I have double-checked the output of the form for errors and it does validate. You should note that the template created is for English language and specifies the more common ISO-8859-1 encoding.
If you find this useful, let me know. You can find Easy XHTML under the Tools section on the sidebar.