How evil is the target attribute?

As most of you probably know, the target attribute isn’t allowed on links in strict HTML or strict XHTML. The thinking behind this, as I’ve understood the reasons behind this decision, and as I also see it, is that there are too many web browsers out there, be it in computers, PDAs or cell phones, and there are a number of factors that applies then. The most important ones seem to be:

  • Many of them don’t support opening new windows.
  • Most computer web browsers support tabbed browsing as well.
  • It should be up to the end user, not the web site, to decide if a link should be opened in the same window, a new window or a new tab; web developers shouldn’t force such behavior on people.

While all this is good and respectful and sounds great in theory, it’s not that easy in the real world. Let me take a case in question: in one of the projects I work in, they had a demand that a link should be opened in a new window. I came up with the usual counter-arguments why we shouldn’t do that, but to no avail. However, the thing is, I partly agree with the customer and Project Manager in this specific situation; why a new window was actually somewhat motivational to use:

  • The link was to a PDF file, with all the possible problems that might come of that, and as had already happened to many users (the web site in question is live), they clicked the link and then they just totally lost touch of orientation.
  • Most people don’t understand the behavior of tabs or new windows, and a majority get confused when they get linked to another web site in the same window/tab. And yes, professional users, like I gather most of you are, have no problem, but we also have to regard our end users.

In the end, I went with using the target attribute. Sure, I could have used an unobtrusive JavaScript to add an onclick event and used window.open, and at the same time get perfectly valid code, but then it wouldn’t be as accessible and also dependant on scripts to function properly,

So, I feel a little perplexed about this: is target really a justifiable approach in some cases (though it has been terribly misused), or is my example just the exception that justifies the rule? Should we take some responsibility in educating end users, or just deliver what they ask for?

ASK – AJAX Source Kit

Updated February 17th

Denny brought to my attention that the history and the links didn’t work flawlessly if you have the same target element for several ASK links. Therefore, I’ve now added a paremeter to the object constructor, this.useSameTargetForSeveralCalls = false; that should be set to true if you want to use the same target element for several ASK links. However, the default value is false to avoid adding links to the history if they have different target elements, and also to save performance.

Updated September 29th 2006

I’ve updated a more fail-safe way to use the XMLHTTP ActiveX object in IE, and also added proper fallbacks if the first one fails.

Also, a very minor change has been done to the event handling to cover up for a bug in IE’s garbage collector (something I hear will be addressed automatically in IE 7). In 99,9% of the cases you won’t notice any difference, but if you use it in a very advanced web site/web application it might make things better and less resource intensive.

I have always liked the approach of updating certain content on-the-fly in a web page without the need of reloading the entire content. This approach has been around for years and has fairly recently been nicknamed AJAX.

The thing with AJAX is that it needs JavaScript to work and a direct consequence surrounding its hype is that a lot of web sites have implemented it without catering to common usability and accessibility factors. This is something that has saddened me, and therefore I developed ASK – AJAX Source KIT to address that while at the same time offer a light-weight library to implement AJAX functionality without having to worry about web browser differences.

The basic idea of it is to implement AJAX without sacrificing those factors and at the same time do it in an unobtrusive way, meaning that there’s no need for any event handlers or extra elements in the HTML code. All that is needed is to include the ASK JavaScript file, assign certain class names to the elements one wants to apply the ASK functionality to, and then implement accessible as well as AJAX-enhanced versions of the content that shall be retrieved dynamically.

My ASK concept was featured in the February issue of Treehouse Magazine, where you can find a more in-depth explanation of the code and about the choices I made during its developing phase.

I should also mention that it was inspiring to read Fixing the Back Button and Enabling Bookmarking for AJAX Apps and AJAX: How to Handle Bookmarks and Back Buttons to see the problems they ran into and how they dealt with them, and then take it a notch further.

My humble hope is that by seeing this, more web developers will understand what it takes to take a considerate approach to AJAX while using it to offer end users a richer experience. Please try it out and don’t hesitate to post any questions here that you might have.

Links

Feature code article in Treehouse

I am very proud to announce that my latest code concept, ASK, is the feature code article Easy Ajax with ASK, in the February issue of Treehouse Magazine.

I was actually asked back in Mid-November to contribute, but unfortunately I had too much things going on then, so I didn’t feel I would have the time and the focus necessary to produce something worthy of being in Treehouse. We talked back and forth and postponed it until now, but finally, here it is! 🙂

Part of me is humbly very appreciative of being asked, no less by the extraordinary people of Particletree producing Treehouse, and whose impact on the web developing scene has been tremendous; I think there are few web developers out there, at least of the blog-reading kind, that have never heard of them.

Another part of me thinks I rightly deserve this; during the last seven years I’ve put a vast amount of time into web developing and into learning and trying to become a better and more considerate web developer. To work that hard for something and to get this kind of recognition warms my heart and sends me the message that it was all worth it, it wasn’t a struggle in vain.

Tomorrow I will write a release post offering you the source code and a demo of ASK for you to try out and give me feedback about. However, that post will only be a short introduction, if you want a longer technical explanation as well as getting to know why I made the different choices I did, I strongly recommend to get a hold of the Treehouse Magazine issue (plus the fact that you will then have a day up on everyone else, since a link to the demo is in the article).

Also, nevertheless, if you’re not even slightly interested in ASK, I still recommend picking it up, because, as every issue of this magazine, it’s fascinating.

 

PS. Yes, apparently I’m being a little narcissistic today. Please let me just have this one, I promise I’ll be back to normal soon… 🙂 DS.

The view-opened-tabs-as-thumbnails trend

There seems to a trend now that everyone’s offering a way to view all your opened tabs in your web browser as thumbnails, inspired by the Exposé feature in Mac OS X. There’s the foXpose extension for Firefox and now IE 7 also has it as a native feature (Opera has some advanced tiling features, but I’m not sure I would say they’re the same thing).

I’m not really sure if there’s a need for this out there, or if what we’re seeing is a new need being created. While I like the idea of making switching between tabs more visual, at first I didn’t find this feature useful at all. Also, using foxPose meant that when I use it, it opens up the thumbnails in a new tab. Annoying.

But then I started using it in IE 7 and I love the simplicity of it. Just press Ctrl + Q to show the thumbnails, and then press it again to make it disappear. Very nice! The only thing in the IE 7 thumbnail view that felt a little awkward was that the scroll bar had the old Windows 2000 look, while the web browser itself had the nice XP look.

What’s your take on this? An overrated feature or something that will be default web browsing behavior in the future?

 

Related reading

IE 7 beta 2 – a first test drive

Microsoft has now publicly released IE 7 Beta 2 Preview, which you can download in their IE page. It is only available for Windows XP SP 2 as of now. Naturally, your favorite blogger (yeah, you know it’s true, just admit it! ;-)) has taken it out for a short test drive.

A picture of a screen dump of IE 7

The good

The interface
It has a very nice and intuitive interface. I really like the rearrangement of menus and buttons; clean and sleek.
The zoom feature
Without a doubt, this is the best feature of this release! I wrote about my opinion about this in Web browser vendors are also responsible for accessibility and this is exactly what I’m looking for. The combination Ctrl + scroll wheel or Ctrl + +/- now zooms a web page.
Searching in the history
They have added a Search History feature. Seems like a great idea, but for some reason it never worked for me.
No more almighty select elements
It works positioning elements on top of select elements so they don’t shine through. Finally!
XMLHTTPRequest support without ActiveX
XMLHTTPRequest now works even if ActiveX controls are disabled.
Anti-aliased text.
It looks like the text in the web browser now is automatically anti-aliased.
Conditional comments support and consistency
Conditional comments are still supported and in a consistent way. You can use code like this to only include code in versions of IE prior to IE 7 (most likely CSS fixes):

<!--[if lt IE 7]>
	<link rel="stylesheet" href="css/ie.css" type="text/css">
<![endif]-->

The bad

No min-width/max-width or min-height/max-height support
This isn’t just bad but outright irritating! The incorrect handling of width and height is behind many flawed layouts on the Internet, and to see that this still isn’t supported is outrageous!
Lack of support for pseudo-classes
Pseudo-classes like :hover, :focus, :after and :before have no support (except for, naturally, :hover on a elements). Microsoft claim that :hover should be supported on all CSS
elements (what the hell a CSS element is…?), but I couldn’t get it to work on any other element type.
No resizing of fonts in pixels
Resizing fonts specified in pixels still doesn’t work. To my knowledge, the only web browser on the market that doesn’t support it.
Incorrect event model
It still doesn’t support the correct DOM event model for scripting.

The terrible

I found something that shocked me when I tested this web site: no content was shown but the background color. After some research and testing, I found the error. I use an element for clearing floats that looks like this:


div.clear{
	clear: both;
	height: 1px;
	margin-top: -1px;
	overflow: hidden;
}

The result of this that everything vanished! I thought that maybe it had something to do with the margin-top or overflow property, but no. It was height: 1px that threw it off so much. And the thing is, no matter what height I set the element to, it didn’t work. I had to completely remove it, and then things worked just fine. Terrible!

Running side by side with IE 6?

Since it’s possible to run IE 5 and IE 6 side by side, I was hoping that this was also applicable to IE 6 and IE 7. I also read Matt Brett’s Running IE 7 Beta 2 and IE 6 on Windows XP post, but unfortunately it didn’t work.

I also got a really interesting dialog when I was trying to get the IE 6 stand-alone version to work:

A picture of a dialog in IE 7 saying 'Press OK to continue loading the content of this page'

Have you tested IE 7? What are your experiences and impressions?

 

Related links

What was your first computer like?

Time to reminisce; to think back to the first proud moment when you finally owned your first computer. Standing there on your desk, most likely ready to offer you knowledge and experience that did definitely affect your life. Maybe even your first trembling step towards becoming a web developer?

My first computer was an IBM PC. It had a Pentium 120 Mhz processor and 12MB of RAM together with an 850 MB hard drive. The RAM was eventually updated to 38MB and the difference was as clear as night compared to day. And to remember that I actually learned Photoshop on this machine! 🙂

What was your first computer like?

Windows user? Do the MSCONFIG dance!

Does your PC feel sluggish? It takes forever to start? It hogs memory like nothing you’ve ever seen but you have no clue to why? Let me give you a little tip: take a look in MSCONFIG (simply press Start > Run and type in “MSCONFIG”, or look at the How to use MSCONFIG guide).

A picture of the MSCONFIG dialog

The part I want you to focus on in that dialog is the Startup tab. Click on it and you will find all programs and process that are run when Windows loads, even though you most likely couldn’t locate them in the Startup folder or each individual program’s settings. I strongly advise you to go through every item you find there and make sure it’s needed by you and/or Windows in your everyday work.

I decided to do this last weekend, just because my home laptop was a little slow and because I have no life (at least not when my daughter is sleeping and my girlfriend isn’t at home). Besides all the totally unnecessary processes I found there, to my horror I found a Trojan/>Backdoor. Being a Windows user, I naturally have a firewall as well as continuously updated antivirus program. I run Windows Update frequently and I use Firefox as my main web browser, so people shouldn’t be able to get to me through an IE glitch.

So how did this happen? I have no idea. How long has it been there? Clueless. But very very annoying and frightening. I want to be able to use a computer connected to the Internet without having to keep it in an atom bomb-proof safe… 🙁

So, the tip of today is:

Do the MSCONFIG dance!

The only Swede at SXSW

In March, the biggest web event of the year (at least in my eyes) is taking place in Austin, Texas, USA; its name is SXSW Interactive. There will be speaking performances from virtually every interesting person in the business, and the networking possibilities are infinite. And now I’m lucky enough to announce that I’m going! 🙂

A picture of the SXSW masthead

I spoke to Roger the other day, and he informed me that he had decided not to go. I guess that means I’m the only Swede, no, correction, the only blogging Swede that I know who is going; I’m traveling there together with a Swedish colleague, Daniel. He is a hilarious guy, so I’m fairly sure that we will have a lot of fun trying endure all the hours on different flights (yes, it’s a pretty long journey from Stockholm to Austin).

Anyway, I do hope I can be a good representative for Swedish web development, and I look forward to learning a lot and to meeting very inspiring people as well a number of friends I’ve made in the web development community, almost too numerous to mention. And if I did, you would just regard me as a namedropping freak, so I won’t do that. 🙂

So, what the hell do I look like then? How do I find Robert Nyman? Well, I look something like this:

A picture of Robert Nyman

I’m staying at the Hilton, where a number of cool people are also staying. Are you going? Write a comment and let me know!

Four things

I saw this four things meme going around the blogging world but was kind of hoping it would miss me. Just as things seemed to quiet down, though, Roger got me. Make sure to follow the links from this post, some of them are actually interesting! 🙂

Here goes:

Four jobs I’ve had in my life

  • Working in a gas station
  • Packaging trucks for UPS
  • Sales man
  • Web developer

Four movies I can watch over and over

I love movies, and I also have reviews of some in my movies section. Not sure I would really watch Big Fish over and over, but it’s an amazing movie and everyone should see it.

Four places I have lived

  • Bromma, Sweden
  • New York City, USA
  • Stockholm (Södermalm), Sweden
  • Vallentuna, Sweden

Four TV shows I love to watch

Same goes here as for movies; I love watching TV. To be allowed to only pick out only four TV shows is excruciating to me.

Four places I have been on vacation

  • Easter Island
  • New Zealand
  • China
  • Mexico

To travel is something fundamental in my life, and I have been to many places. Our longest trip is when Fredrika and I went around the world in 2002 .

Four of my favorite dishes

  • Scampi
  • Quesadillas (chèvre cheese, jalapenos, honey and prosciutti in a garlic-flavored pita bread, nicely warmed up in a grill frying pan)
  • Pizza
  • Fish soup with saffron and garlic bread

Four websites I visit daily

Four places I would rather be right now

Since I’ve been to many places, I thought I’d mention four places I haven’t been to but that I really get to visit one day.

  • Egypt
  • Peru
  • Antarctica
  • Madagascar

Four bloggers I am tagging

Technically speaking, he hasn’t got a blog (to my knowledge), but I still just have to name him as a runner-up, because I know he would put together an outstanding (and maybe horrifying?) list: Mr. Robert Wellock.

 

I would actually want to tag each and every one of you kind enough to read my ramblings, so please please feel free to share your four items in any or all of the categories below in a comment!

How to get a good search engine ranking

With the humble title of this post, I guess I really need to add that these ways mentioned below are the ones I’ve experienced to be very reliable to get a good search engine ranking. Naturally it varies a lot, but I get somewhere between 28 – 45% of my visitors from pure Google searches, out of just having a high ranking (and sometimes for terms that amaze me :-)). These are my advices:

Semantic code
Make sure you write semantically correct code, meaning that you need to use the correct element for the right situation. It is all about how you mark the words you are using, and how and in what context you want them to be interpreted.
Friendly URLs

Make sure you have URLs with a good descriptive value, as opposed to one being made up of just a lot of parameters. There are different tools and settings to achieve this in most, if not all, web development environments. For instance, these two links both lead to the same web page:

This is a good URL:

http://www.robertnyman.com/2005/11/07/the-ultimate-getelementsbyclassname/

and this is a bad one:

http://www.robertnyman.com/index.php?p=256

Get mentioned
If you get mentioned with good words in an appropriate context, especially from a web site that has a good PageRank, it will help push you up the search engine list.

 

These are the only tips I can give you; basically, it’s just about good web development practises and maintaining good relations with other web site owners.

I’m sure there are good SEO companies out there, but the ones I’ve come across have all been unprofessional and/or been using very suspicious methods. And as soon Google update their algorithms, there’s a big chaos when some SEO’s dubious work fail, since some of their tricks have been found out and taken care of. Then, naturally, it backfires so their customers get a very bad search engine ranking.

Just do as I suggest above; code properly and you will be safe. Look around to see how good search engine ranking most web developing blogs get, just because they know how to implement a web site in a correct manner.

Come on, give us a bad example

Sure, but only since you asked for it. Recently the web site http://www.larmdirekt.se/ was brought to my attention. If you navigate to their web site and disable CSS in your web browser (Ctrl/Command + Shift + s is one way to do it if you use the Web Developer extension in Firefox), alternatively view the source code of the page.

In the footer, you will then find a link with the text “y”, which leads to the page http://www.larmdirekt.se/laarm/ . Make sure to turn off JavaScript in your web browser and navigate to that page and you will not believe your eyes: a little link farm. If you surf around those links you will, amongst others, find the names of some fairly large Swedish companies, and the best thing of it all: the name of the SEO company in the title bar.

 

So, go check out the code of your own web site right now, or ask your SEO what methods they use.

 

Read more about search engine optimization

Go to the Archive to read all posts since 2005.