A pain for designers

We web designers are always talking about the difficulties of designing web sites that will be compatible across various browsers. And new version of the likes of Firefox, Safari and Opera always trumpet about how they so closely adhere to standards. Usually they direct you to look at how well their browsers deal with the Acid test, as a demonstration of how good their product is.

From a purely design point of view, in terms of rendering CSS correctly, the biggest advantage of web standards is that it means that designs will be rendered consistently. And for a long time we’ve never had that. Regardless of how great a browser was supposed to be, there was always some glitch or other.

Even the supposed standards compliant browsers couldn’t render pages consistently. I know, there’s been numerous times where a page that looks fine on Firefox has layout disasters on Opera or Safari, or where Firefox has failed to deal effectively with mouseover menus. And of course Internet Explorer 6 has been a law unto itself, and Internet Explorer 7 still behaving unusually from time to time.

While being the most criticised for lack of standards compliance, as a designer I’ve always been aware that glitches in Internet Explorer are easier to fix (‘Be Realistic, Be Like Internet Explorer’). Unlike the other browsers, you can specify conditional stylesheets for IE - stylesheets that only load if a particular version of IE is being used. My biggest problems have always been tracking down CSS hacks that deal with inconsistencies between Firefox, Safari and Opera. They seemed to exist in some kind of idealised world - where they didn’t need to have conditional stylesheets because, hey, they were all compliant so there wouldn’t be any problems! Some hope.

But then one day everything pretty much worked

The last couple of weeks I’ve been working on a relatively complex site design. I tend to work initially previewing the site in Safari, as the browser that most accurately renders the CSS to what it’s supposed to look like. I usually get a reasonable way into a design before I start looking at cross browser issues and tracking down fixes.

So earlier this week I decided to check out how it was rendering in the latest versions of the other browsers. I was very aware that with the addition of Chrome, there’s another browser that has to be addressed in terms of compatibility.

Across the latest versions of Firefox, Opera, Safari and Chrome, there was one single glitch based on my initial CSS. That was a Chrome issue related to margins and a fixed footer, and was solved in the main CSS file without any hacks (i.e. the solution fixed the Chrome issue but was relevant and harmless to all the other browsers). 

Internet Explorer, both versions 6 and 7, still have problems of course. But I know that I can fix them without having to hack the main CSS documents. They at least have a practical solution to a known problem with the conditional stylesheets. And with Internet Explorer 8 looking to genuinely be compliant and consistent, one day (although it will be years away given how many people still use the antiquated IE6) the problems might be eliminated altogether.

Be idealistic when it’s practical

Non-Microsoft browsers used to piss me off as a web designer. Internet Explorer always had problems and an obvious and reasonably elegant solution. Firefox, Safari, Opera etc were like the worst kind of idealist - they wouldn’t address practical problems because those problems weren’t supposed to exist. The fact that they did exist was conveniently glossed over. And so a designer had to find arcane hacks to CSS code to make it work properly.

Now, perhaps, we’ve finally reached a stage where those problems are ending. Where I can design with one browser and be genuinely confident that it will render the same in the others - or at the very least it will only glitch in Internet Explorer allowing me an easy fix. Long may it continue.

• Apple Safari
• Google Chrome
• Microsoft Internet Explorer
• Mozilla Firefox

CSS - Pretty and accessible

I’ve spoken about the benefits of CSS design regularly in the past, but to recap - CSS gives you great flexibility in design and page appearance, keeps that appearance entirely seperate from the actual content of the page, and therefore provides excellent accessibility and makes redesigning a site far easier.

As browsers develop, support for deeper CSS functionality has grown extensively. The extensive glitches in support with Internet Explorer 6 can largely be overcome with stylesheets specific to that browser, and Internet Explorer 7, Firefox, Safari and Opera all provide pretty comprehensive CSS functionality. Universal consistency is still some way away, but the small differences between the way these browsers render CSS based designs are usually pretty simple to resolve.

Showcasing the benefits

I’ve decided to make some efforts to showcase designs based on CSS and HTML and nothing else. I want to help people realise how much you can achieve merely with those two technologies. That’s not to say that other technologies don’t have their place, but I definitely think the artistic opportunities available merely from CSS and HTML are overlooked.

The page at www.fogofeternity.com/showcase/cartoon is an opening effort in demonstrating how CSS can be used to make attractive pages with interesting functionality. The main point here is to demonstrate how simple the underlying HTML can be, when you consider how extensively CSS can change the appearance of the page. Look at that page, and its functionality, and consider that the main body of the HTML page, whose appearance the CSS defines, reads:

<body>

<div id=“header”>

<p>A demonstration of some effects possible solely through the use of HTML and CSS. By <a href=“/”>Fog of Eternity</a>.</p>

</div>

<div id=“scene”>

<div id=“tank”>
</div>

<div id=“jumbo-jet”>
</div>

<div id=“anime-man”>
</div>

<div id=“invisible-girl”>
</div>

<div id=“goth-girl”>
</div>

<div id=“explosion”>
</div>

</div>

</body>

Accessible and good looking

The best showcase for the flexibility in CSS design is probably CSS Zen Garden. What’s great about that site is the demonstration of great design with zero changes in the HTML structure of the site. I’d also advise reading the excellent book ‘Transcending CSS‘ to gain a deeper understanding of the benefits, and developments, in CSS based design.

I’ll be looking to take more opportunities in the future to show how extensive the benefits of CSS can be.

Taken as a hypothetical or general question, in each situation the conclusion I reached would have been different. Each demonstrated the important of context and specifics.

How to lose your right to browsing privacy

I’m a strong believer in the right to browse largely anonymously. Web Analytics will give any webmaster a degree of personal information about their visitors - whether that be IP, domain, service provider - but this information shouldn’t really be used. It certainly shouldn’t be used to track individuals.

…but there are exceptions. I often look at my analytics information to see what Google searches are bringing traffic to my site. I’d noticed since my post a while ago ‘Only Cute Girls Make Me Stumble‘ that I’d started picking up odd bits and pieces of search for “cute girls”. Not entirely surprising given the amount of people who use the web to look at pictures of cute girls, even if they’d be sadly disappointed on reaching that article.

None of which was of major concern until a couple of days ago. Mistaken searches for “cute girls” based on a blog article title is fair enough. Someone coming to my site following a Google search entitled “images of cute girls of age 6″ is an entirely different matter. That’s disasteful and potentially illegal.

My analytics data provides me with an IP address and a service provider for that visitor. Not a huge amount of data, but more than nothing. Its a visitor from India, and nothing may happen, but I have no qualms about dropping the service provider a note with the information.

Does pay always undermine independence?

When you start to get paid to do a particular piece of work you lose some control over it. As they say, “Those who pay the piper call the tune.”

I was pointed recently towards the site ReviewMe. The basic idea is simple, you submit your blog, it gets checked by the staff at ReviewMe, and you’re then eligible to write reviews of products (based on the subject matter of your blog) for payment.

The site says that there’s no requirement to provide positive reviews. And you can pick and choose what you review. I’m still wary.

Does it undermine the authority of Fog of Eternity?

Even if reviews are only a minor part of the site (and I wouldn’t post more than one a week), are people going to be interested? Or will they feel that the site has “sold out”.

You’re not “required” to give positive reviews?

ReviewMe say that there’s no need. But they also say that the “vast majority” of reviews are positive. Is that tacit pressure to give positive feedback to their clients?

Why I’m going to give it a test run

Once I’d had a look around the ReviewMe site my concerns were reduced. It’s easy to pick and choose. And frankly I’m independent enough as a person that I’ll say what I think regardless!

But the biggest reason I decided I’ll give it a try is that I realised it’s a good way to find new services. Some of the offered reviews are of betas and services I hadn’t heard of before, but look interesting. If a service like ReviewMe can give me a route into new products as well as providing a little bit of pin money, then that’s all well and good. It benefits Fog of Eternity all round.

Bending morals by circumstance

If you’d asked me “is it right to track back people who visit your site?” then I’d have said no. If you’d asked me if it you thought a site could benefit from paid reviews, I’d have said no. But context is important, and I think in both the situations above I’ve come to a fair and considered conclusion.

What do you guys think?

Social networking exacerbates the problem. It creates a sameness in the conversation, because everyone is looking at the same subject. In early May everyone was talking about how great Twitter was. In late May everyone was talking about how annoying Twitter’s downtimes were. This month it’s Friendfeed and the fragmentation of conversation.

Did you hear the one about … oh … you did already …

Different viewpoints are all well and good. But how many different viewpoints are you going to get among hundreds of blogs all addressing the same topics? People see that something is “the buzz” because they read it on Scobleizer. Then they talk about it on their own blog and link back to the original articles.

They probably develop more immediate traffic this way - it’s the fashionable thing after all. It’s easier to continue a trend than begin one. But how much value is being added to the wider discussion? Doesn’t the conversation just become circular, and inaccessible to new readers? When we talk about the topics that everyone else is talking about we’re not adding originality.

OK, we’re all talking about the same overall topic - social media. But it’s rarer to find an original subject than it is to find an article similar to something you’ve already read. That’s not beneficial to the long term development of social media. It keeps it insular, it doesn’t widen the conversation. We’re happy enough, people come and visit our sites and comment on our thoughts, but there’s not much new material being developed.

If everyone is special then no-one is

The derivative nature of these posts and the discussion stops us moving forward. Social media is failing to widen functionality and accessibility to the non-techie, the non-early adopter. Its highly cliquey when it should be as open as possible.

We think of ourselves as specialised, as interesting, as unique. But in many ways we’re as “unique” as the emo kid who listens to My Chemical Romance like millions of others. Who thinks his angst and his emotion are something special. We think our voices are important in large part because they are our voices.

Don’t be a dedicated follower of fashion

That internal conversation is important of course, because we’re honing and developing the media and its services. There can be new perspectives on popular topics - for example I always find Alexander van Elsas tends to offer an original viewpoint on the buzz. But that can’t be the only conversation, we need to extend ourselves.

We need more original thinking in the blogosphere. I’m going to challenge myself to do this, and I challenge you to try something similar, at least from time to time. If something is the buzz topic that week, then don’t write about it. Refuse to write about it. Write about something completely different. Don’t continue a conversation, start one.

Which seems to be the same across the technology world. We can’t merely like something and dislike something. We have to love things and despise things. A couple of months ago we loved Twitter. Now it’s had a little bit of downtime we hate Twitter, but we love Friendfeed. Macs hate PCs, and like to patronise them. People aren’t just loyal to brands they are LOYAL to brands, to the extent of reacting aggressively and rudely to their competitors.

The only other medium that I can think of that provokes such strong feelings is music. You don’t see people looking down on others because of the cereal they eat. We don’t laugh at morons who drink Snapple instead of Mountain Dew. Yet for some reason - and we’re talking about mere tools here - we can’t extol the virtues of a computer, a browser, a social media service without denigrating another one in return.

But it doesn’t matter what we’re talking about.

Browsers can all…well…browse

There isn’t much difference between Internet Explorer, Firefox, Safari or Opera. All are perfectly fine for browsing the internet and taking pretty much full advantage of its functionality.

They have their strengths and weaknesses. Internet Explorer is more widely supported by corporate sites (e.g. the Citicorp owned Egg online banking site still has limited non-IE support), but IE6 and 7 fail to adhere to standards. Firefox is extensible, has great add-ons, but is resource heavy (even with version 3) and…for me anyway…is the least stable browser in terms of crashes. Safari looks pretty. Opera is perfectly capable but has little market share.

Actually, I even have a pretty PC

There isn’t that much difference between a PC and a Mac. PCs aren’t the incredibly user unfriendly tangles of code and crashes that Apple suggests. They have more software, tend to have more power for the price. Macs are a bit more user friendly, significantly more stylish (generally) and have a “cool” image.

Twitter still does what it’s supposed to

Twitter was good before, and it’s good now. It went down a few times, it’s not the most reliable free service around. But it’s still great. Friendfeed is also great. Its possible to like one without liking the other. It’s possible to like Plurk and like Twitter. It’s more interesting to state your hatred for Twitter and how you’re going to abandon it (…especially if done so in 140 characters!).

Passion is good. Crazy…not so much

It’s good that we have passion for products and services in the IT world. Passion leads to excitement and further developments. But seriously, people need to chill out a bit sometimes. I look sometimes with jaw dropped at the incredible aggression and strength of feeling in a debate on the merits of an operating system, a browser, Twitter’s merits.

Be happy that we have a choice. Be happy that there are options for people who don’t think that it’s somehow morally wrong not to use Firefox! Be happy that Twitter and Friendfeed can coexist, and that Twitter and Plurk are forced to excel to compete. Competition is good, competition between more than one perfectly capable product is even better.