A lot of web developers, at least over the years, seem to have fallen for Microformats. Naturally, the given question then is: do we really need Microformats?
Having had a number of jobs and from being a consultant, getting the opportunity to see how a lot of companies and clients work over the years, I’m way too often surprised how underestimated cooperation and keeping a competence available throughout a project really is.
As you all know, form elements aren’t that easy to style, especially not consistently. At a first glance, the button element seems like a sure winner, but once you delve into it…
For those of you who have missed it, IE 8 beta is now available for download. Let’s take a quick look on what’s in it.
I am, hypothetically ( 
) working on an e-commerce site, and the other day I discovered that IE doesn’t post all values with a form.
Microsoft released MOSS, Microsoft Sharepoint Office Portal, which is a web-based collaboration and document management platform.
What’s in an award, really? Swedish computer magazine Internetworld has just given the Sweden’s Best Web Site 2007 award to the supposedly best web site in Sweden.
I have a strong interest in semantics in general, and when it comes to web developing, the benefits of properly marking up a document should not be neglected. One problem is that some people don’t understand the difference it makes, so therefore let me humbly make an attempt to explain why semantics is important.
application/xhtml+xml?Remember a couple of years ago, when serving XHTML with a text/html MIME type was the worst you could do if you were serious about your trade?
It is fairly easy to distinguish a developer’s knowledge level by their usage of label elements. To see how much they care about accessibility, usability and semantics.
People have asked of my opinions about HTML 5 and the road they’re taking. Basically, I feel that you need to do a lot of reading up to actually be eligible to have an opinion, so I’ll try tread lightly with mine, and only cover certain areas.
Wednesday night we had yet another Geek Meet in Stockholm, and this time we covered HTML 5 and XHTML.
I don’t know how many of you who can actually do this, but for fun, I’ve kept the first web site I ever built online, and now I want to share it with you!
Just a small note to those of you who use my getElementsByClassName script: it has been updated for performance reasons and flexibility reasons.
As late as yesterday, I heard an argument I didn’t except to hear. Not now, not in 2007.
Time for the last Geek Meet before the summer, and it will most likely be an intense one.
One thing that I’ve always taken for granted how to do is the indentation of code. Sure, people place characters like { either on the same line as the CSS rule/JavaScript function name, or on the following, and that’s just fine. But what I mean here is how to accomplish the actual indentation.
When done properly and in a serious manner, SEO is truly a fascinating field! However, I have some wonderings about how Google and other search engines treat and index certain things.
When developing web sites with heavy interactivity, your scripting skills are really put to the test. And, sooner or later, you will be put in a situation where it’s a fine line between following web standards and what’s best from a performance and structure perspective. One question that follows that is: is it ok to apply invalid attributes via script to elements?
One of the web sites I’m currently working on has a lot of line dividers, and they had been added somewhat inconsistently. Therefore, I decided to go the semantic route and throw out all div and p elements, and replace them with one single class-free hr. Oh man, did I open up a can of worms…
I’ve always liked semantics and to choose how to properly mark up content to convey the information the best way possible. But, and I know this might sound weird, as of lately, I’ve had a harder and harder time to find the suitable content for one specific element: the H1.
Free People Search The most effective people search engine ever built
I’ve recently started on a new assignment (which is mainly the reason that I haven’t been able to muster any extra strength to blog, besides from my family being sick…), and I’m hired as a subcontractor. This means that I’ve been introduced to a lot of people the last couple of days, and it has almost exclusively been with a term that I hate:
The HTML guy.
Vlad Alexander has written an article entitled X/HTML 5 Versus XHTML 2, discussing what he likes respectively dislikes.
Hopefully, you’re someone who cares about web standards and wants to have valid code for the sake of web browsers’ rendering and for you as a web developer, to more easily spot errors right away. Then, when including Flash content in your web page, the default code output from various tools and web sites out there is invalid (at least when it comes to using them with a strict DOCTYPE, which I’d really recommend you to go with).
So, what should a poor caring web developer do?
Ever been in the situation where you want to put some HTML on top of Flash movie? You’ve cursed the designers for using Flash, and stated that it is impossible? If that’s the case, I’ll advise you to reconsider.
Some people like to proclaim that the so-called web standards war, i.e. a wide-spread usage of web standards, is over. Let me take a couple of web sites as example why I don’t agree:
The hunt for getting a good search engine ranking affects more and more companies. A higher ranking equals more visitors equals (most likely) more customers. More customers, in turn, equals more money, which is what business is about.
But sometimes, the hunt hurts the quality of a web site.
Recently I got a bug report from marketing (don’t all bug reports come from there? 
), about an unexpected problem in Firefox in Mac OS X. The end users had problems tabbing through the web page, and especially through forms. Since I, at the time, sat on a PC, I couldn’t test with my settings, although I knew I hadn’t seen the problem on my Mac at home.
If you develop a web page nowadays, you don’t use br tags, right? Or do you? And if you do, is it wrong, or the most efficient and pragmatic way to implement a desired line break in some text?
Let’s take a look at this from a number of perspectives:
Once every now and then you come across code that is so ghastly, so terrible, that it almost makes you go blind! While fighting the pain, you (think) you can be almost sure of one thing: this must have been done on purpose!
In November last year, Aleksandar Vacić wrote his post Insert HTML page into another HTML page (found through No more iframes?). Basically, what it is about is finding a way to use an object element instead of an iframe to get the correct behavior in Internet Explorer.
Right about now, I guess your questions are why, how and is it necessary?
So, 2006 is almost over and it’s time to look ahead at 2007. Will it be an exciting year? No doubt, we have to wait to see just how riveting it can get! I thought I’d go through some notable things that happened in 2006, not just web-related, and scribble down some words about them…
I think that in (almost) every project I work in, when a web page contains one or more form elements, the most common question is: should we set initial focus to the first element in the form when the page has loaded? Heated debates follow, where people argue very convincingly for their view on it.
However, to me it isn’t an easy black or white-question.
This might sound condemning, but I’m thinking of establishing a weekly award: Web Site Most Likely To Have Been Built By An Intern. It is about large companies targeting a lot of users who, in this day and age, still don’t have any clue about web standards, accessibility or semantics. If, for instance, a web site only works in one web browser (guess which one…) on one platform, something is fundamentally wrong!
Without further ado, let me probably announce this week’s winner: MSN Music.
PS. A little tip: first try it in Internet Explorer on a PC, and then in any other web browser on any platform. DS.
Just before I started blogging I got to know Tommy Olsson, through his now resting blog Autistic Cuckoo. I was impressed with his technical expertise and inspired by his respectful comments and discussions with his readers, and it was something I set up as a goal and role model for my relations with the readers of my web site.
Unfortunately, Tommy doesn’t write anymore on his blog, but he has now made an interesting contribution to SitePoint about HTML.
When I wrote Looking for a good interface developer? Here’s what to ask to make sure you’ve got the right person, I wasn’t sure if I should reveal the answers to you or just let you do the research yourselves. However, I came to the conclusion that this web site is really about sharing knowledge, and also that some of you might have some good extra input on my answers.
So, here are some answers and links to more information about the questions:
Are you perhaps looking for a talented interface developer? You’ve heard that web standards and perhaps accessibility is good to have experience with, but you don’t know how to determine the applicants’ experience.
Don’t worry anymore, I’ve put together a check list of what to ask to make sure they’re suitable and in the loop with proper and modern web interface development.
When developing a web site, amongst the initial questions is what level of accessibility one wants for it and what eventual extra measures are needed to achieve that. Sure, if you’re an experienced interface developer, you naturally write semantic HTML, use alt texts and try to avoid making the web site in question JavaScript dependant, and so on.
But, let me tell you something: you can be the best damned interface developer in the world and then still, in the end, you stand there with an inaccessible web site. What happened?
First, let me sincerely tell you that I’ve thoroughly read every motivation, and many of them were outstanding! You are really smart and funny people, and you all deserve one iPod Shuffle each (no, it’s not going to happen :-)! Thank you for all your wonderful contributions!
In the end, I went for something simple and a bit philosophical, and would proudly like to announce Barry Allison and his motivation the winner of this contest. Congratulations Barry!
Ok, here’s the deal. For the next couple of days I will be very busy, so I don’t find it likely that I will be able to find the time to write. But don’t worry, I think I’ve found a way to make it up to you: a contest!
MySpace Layouts are themse for your myspace profile. They can be found at all4myspace.com. Find more than 105,000 myspace layouts.
Apparently Opera’s claim to support document.all in conjunction with not mimicking it exactly like IE led to some problems in Opera 9 when I use my getElementsByAttribute function. Thanks to Ash Searle who tipped me about this and also explained what the problem was. The code in the JavaScript file to download has been updated.
Also, Harmen asked an interesting question about nested elements with the title attribute. It didn’t work initially, but now I’ve updated the GLT JavaScript file with support for that as well.
I did some thinking how to address the faulty technical implementation in IE to display values in the alt attribute as a tooltip, and if I should suppress it on images that have a title attribute as well. I decided to implement a setting for it and then it’s up to you to choose. The GLT JavaScript file now contains one more setting: suppressAltTooltipsInIE : true.
I’ve done a very minor change 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.
Just as Chris commented, the script didn’t consider if the custom tooltip would disappear if it was positioned too far to the right. It is now updated with a fix for this.
A side-effect happened in Firefox when using GLT for any link; the status text wasn’t shown in the web browser status field. This issue has now been addressed.
Just as Jordan Ambra pointed out to me, there were cases when you could mouse out from the element just when the GLT element was shown, and making it stick and not fade out. This was just because of a tiny typo by me in the code, but it has now been fixed.
Bob pointed out a typo of me in the code, where the result was that you couldn’t turn off the fading in through the fadeInTitle property. The code has been updated and can be downloaded in the GLT web page.
Added an extra check to prevent any eventual error that occurred when hovering a GLT element in the middle of the loading of the page.
As of lately it seems like I’m giving you a new JavaScript library every second day. But don’t worry, I will be fairly busy in the upcoming months so this one is probably the last one for a while.
Anyway, tooltips in a web page, maybe more commonly known as what will be displayed when using the title attribute on an element, have some shortcomings that I wanted to address.
I could just stack argument after argument why using frames when designing a web page is a bad idea, but frankly, I’m too lazy to do it once again. Let’s turn this around:
Why would anyone see the need to use frames nowadays?
Lately, and especially evident in the beginning of the summer after the @media conference, people proclaimed that the war of web standards is won and that we should move on to focus on other things. Let me please say that the war is so far from over.
Have you ever had the need/wish for WordPress to deliver HTML instead of XHTML in your blog? And if yes, then having no idea how to control the default XHTML tags generated in comments and its likes? Fret no more!
After doing some extensive testing, due to some error reports that the overlay layer didn’t cover all parts of the web page if it had a scroll, I’ve now updated the script to take that into consideration as well. A positive effect of this is that, during a slideshow, it will automatically adapt the overlay size if the user resizes the web browser window or scrolls within it.
Also, one of the biggest upsides to this is that I’ve eliminated the need to add CSS specifically for Internet Explorer to handle overflow scenarios. The CSS code below has been updated accordingly.
So, I sincerely ask of you to download the example package (ZIP file link) to get this important fix, or if you already have your own custom CSS, to re-download the JaS JavaScript file and simply replace your current one.
Looking at nice features like Lightbox JS and what my friends at Particletree did with Lightbox Gone Wild!, I found it to be a given to add this functionality to JaS - JavaScript Slides. Now the image view, as well as the slideshow feature, supports it in different combinations.
Remember something called Geek Meet? People with a sincere interest in web development, always up for learning more and hanging out with like-minded? Well, fret no more! It’s time again!
<div class="left-col">Content here...</div>
<div class="navigation">Content here...</div>
(Note: I’ve used my fair share of left-cols, so this is no way meant to be elitistic.)
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:
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:
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?
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:
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:
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.
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.
Apparently Opera’s claim to support document.all in conjunction with not mimicking it exactly like IE led to some problems in Opera 9. Thanks to Ash Searle who tipped me about this and also explained what the problem was. The code below and the JavaScript file to download are updated.
Since we all have to face a new hard tough week now, I thought I’d brighten your day by giving you some code that might be useful.
Ever run into a situation where you want to get an array of all elements with a specific attribute? Or even want elements with a certain value for that chosen attribute, as well? That’s not a problem anymore; let me present getElementsByAttribute.
/*
Copyright Robert Nyman, http://www.robertnyman.com
Free to use if this text is included
*/
function getElementsByAttribute(oElm, strTagName, strAttributeName, strAttributeValue){
var arrElements = (strTagName == "*" && oElm.all)? oElm.all : oElm.getElementsByTagName(strTagName);
var arrReturnElements = new Array();
var oAttributeValue = (typeof strAttributeValue != "undefined")? new RegExp("(^|\\s)" + strAttributeValue + "(\\s|$)") : null;
var oCurrent;
var oAttribute;
for(var i=0; i<arrElements.length; i++){
oCurrent = arrElements[i];
oAttribute = oCurrent.getAttribute && oCurrent.getAttribute(strAttributeName);
if(typeof oAttribute == "string" && oAttribute.length > 0){
if(typeof strAttributeValue == "undefined" || (oAttributeValue && oAttributeValue.test(oAttribute))){
arrReturnElements.push(oCurrent);
}
}
}
return arrReturnElements;
}
*) if you want to look in all elements.
getElementsByAttribute(document.body, "*", "id");
getElementsByAttribute(document.getElementById("the-form"), "input", "type", "text");
The code has been tested and verified to work in:
To use it, just copy and paste above code or download the getElementsByAttribute.js file.
This post is mostly applicable for Swedish readers, but I believe most of you in other countries stumble across this fairly frequently too.
Here in Sweden we have a publication called Internetworld , whose target group is mostly private users and small businesses. Their articles mostly deal with business gain, short press releases what has happened in the field of technology with things like new services on the web, Firefox increasing its user base etc. Out of general interest I read it, amongst a lot of other publications, just to stay on top of what’s going on and what people are talking about.
When I had worked a while in the internet business, I soon realized that they aren’t always exactly spot on with their articles, especially when it comes to technology choices, coding tips and its likes. However, what they’ve written has mostly been harmless and can at least be of some help to amateurs starting to code.
However, I just browsed through the latest issue with an article entitled “Web standards part 1 - Adapt the web site for different web browsers”. Just reading the headline, I realized it probably wasn’t going to be good. After going through it I came to the conclusion that it isn’t as bad as I first thought, they do, at least partly, try to convey the message that there actually is something out there called web standards and it is there for the device “Code once, run everywhere” kind of equivalent for web code.
Unfortunately, though, they have some parts and quotes that I sincerely think will hurt new web developers’ attitude towards web developing and that’s the reason for me writing this. They briefly touch on the fact that there are different interpretations by web browser vendors how web standards should be implemented. While that is to some degree true, it’s seldom knowledge that beginners need to know, it’s usually only interesting on a pretty high level, as long as you start out the correct way when you build your web sites. And it’s rarely a problem when you write HTML/XHTML, it’s usually when you code CSS that this will be more evident (which will, as I understand, be touched on in an upcoming part in this series).
The conclusion of the article is to follow web standards if you have no idea about your target group; otherwise, offer them an enhanced and web browser-specific version that only works under certain circumstances. Another conclusions is that web standards is an “advanced technique” and question if it’s worth to require that out the users to have such modern web browsers to be able to use your web site; talk about not understanding web standards.
I don’t know where to begin with to describe how damage such an attitude will do. Sure, naturally most if not every web site out there will work better in a later version in, say, Internet Explorer or Firefox than in Netscape 4 but that doesn’t give you the right to shut out users with an older web browser. It’s all about progressive enhancement.
Another thing is that even if you do know a lot about your visitors and the statistics, that situation can almost change overnight. Build an Internet Explorer-version on proprietary code just to realize a month later that many of them have started using any other web browser out there. Also, does anyone really know how many web browsers there are out there? Hundreds and hundreds, let me tell you that. Different web browsers on different operating systems, PDAs, cell phones, digital TV boxes et cetera. The only way to make sure that your code will work is to follow web standards. No, web standards will not solve your every problem, but that’s the closest you can get and definitely your best bet if you’re serious in what you do.
Let me quote some pieces in the article:
There are a number of reasons where you gain from following web standards, but here are also occasions when you don’t, which we will explain in some of the following tips.
After that, I never find any tip where the difference is proved. Also, that’s just the mindset that’s so dangerous and there has to be a realization that while web standards maybe won’t save the day automatically, they will never hold you back either.
In modern HTML, that is often referred to as XHTML…
What kind of crap is that? There’s HTML and there’s XHTML; they are two different things and none of them are really more modern that the other. Something that really bothers me is that that isn’t even mentioned and doctypes are totally left out. No wonder you think there are differences out there if you don’t know how to choose a doctype and what effects that choice will have on the rest of the code.
Usually the unit px (pixels) is the one unit that gets interpreted most alike amongst the web browsers
While I kind of get what he’s going for, like percentage rounding errors in some web browsers and its likes, talk about killing the accessibility factor. You can’t make such a statement that will give such repercussions without explaining it in a more detailed way. And what about ems? Ever heard of those?
Conclusively, maybe I’m way too hard on this guy. After all, I do sincerely believe that he meant well with the article and tried to help people, but my fear is just that he did as much harming as helping; hence this post.
