For any new comer to the online world, the free web hosting services will surely be a encouraging news. The new comers usually used to compare various free web hosting providers and choose the best one among them. Most probably they will be selecting the company which offers large disk space and bandwidth.

Free web hosting possesses some valuable advantages as follows. You can start to try things without any big investment. You can learn to use FTP, to upload files to web server, to use file manager, etc. Moreover you can add your own contents and also, your own adsense codes which enables you to make some money without any real investment.

But free affordable web hosting also have its own disadvantages. Most of the web hosting companies will add their banner advertisement in your site to attain popularity. The next disadvantage is the small bandwidth and the unreliable server. Also you will be allowed to enjoy only limited features in the free web hosting. You will be allowed to have either one or two email IDs which will not be sufficient as your website grows big. Also you may not be given features like autoresponder, MySQL database support, PHP support, etc. Without these features managing the websites becomes real difficult.

I’ve previously written about how Microsoft Sharepoint mistreats HTML, and makes it look a whole other language. But truth to be told, Sharepoint (and .NET for that matter) isn’t the only framework that can’t handle HTML. I’ve recently worked with a Java framework called Tapestry 5, and it’s really bad in some respects too (though not quite as bad as Sharepoint). Note that this is a review based on only how it handles HTML, not any other of its merits. Let’s get started.

Many of Tapestry’s problems comes from their design decision to parse the HTML you’re trying to output. Yes, Tapestry parses your HTML, and adds stuff to it dynamically. This is nothing new, anyone that has played with ASP.NET knows how hidden form elements get stuffed in here and there. This is a nightmare for an interface developer, we need exact control over HTML to do our jobs well.

Tapestry does horrible things to HTML:

• Several extra javascripts and CSS files are referenced in the head tag. There is no simple way to get rid of these.
• A meta tag which states that the tapestry did generate this page, is added.
• The two above are added to the head, and if a head tag doesn’t exist, it gets added. Never mind that your current little HTML snippet was just a little part of a page, that was being fetched with AJAX, Tapestry will add a head tag for you.
• More javascript, and a hidden div with a firebug-like console, is appended to the end of the body element.
• Self-closing tags are expanded to a start tag and an end tag (<input /> gets transformed to <input></input>), which means you can’t use XHTML together with Tapestry.
• All whitespace is removed by default, and you have to disable the “feature” on a tag-by-tag basis (”Please don’t strip whitespace inside this list, IE6 goes crazy then”). This is a mess for interface developers, who know that whitespace matters for rendering. It was even pointed out to Tapestry developers early on, but was ignored.
• There are ways to do loops, if:s, reference variables and generate URL:s, but all of these are based on the HTML parsing. And as a good parser, it skips all comments. This means using tapestry template code inside a HTML comment will not work. When do you need that? Conditional comments! So what if you want an URL generated to your IE6 stylesheet? No go. You’ll have to write a custom component that does that for you.
• Changes the id of all your forms to “form” and adds name=”form” (which is invalid HTML).
• Adds a hidden “t:formdata” field to forms, much like the dreaded ASP.NET viewstate.
• One of the javascript files added is prototype, a javascript framework which isn’t compatible with jQuery. So you have to rewrite your javascript code to work in “No conflicts mode” if you want it to work with Tapestry.

No. Tapestry was clearly not built with an interface developer in mind. Why is it so hard for many web framework developers to just talk with people that work with HTML, CSS, and Javascript? Please ask us before implementing stuff like the above. We’ll gladly give you our viewpoint.

We all dislike that links are so small, and hard to click. So of course we want to make the clickable areas bigger. Some would think that doing this with some CSS on the a-tag would be a good way, but then you can’t have block level elements inside it (you’ll get a validation error if you try to put headings or paragraph tags inside of links). So what’s a more general solution?

My take is to use a div instead, and use javascript, of course together with a good fallback. When clicking the div, find the first link inside it, and go to that URL. It’s simple, and with a few additional quirks, it gets really useful.

Javascript code (requires jQuery):

$(document).ready(function(){
   var block = $(".teaser");
   block.click(function(){
      window.location = $(this).find("a:first").attr("href")
   });
   block.addClass("clickable");
   block.hover(function(){
      window.status = $(this).find("a:first").attr("href")
   }, function(){
      window.status = ""
   })
});

CSS for showing that the div actually is clickable:

.clickable {
   cursor: pointer;
}
.clickable:hover {
   background: #efefef;
}

A clickable div demo is of course available.

How it works

• When the div (or other tag, you choose) is clicked, find the first anchor tag, get it’s href attribute, and go there. Relying on an actual link means you always have a fallback, so no cheating.
• When javascript is disabled, it just falls back to a regular block, where only the links are clickable.
• A class called “clickable” is set on the block to allow for javascript-specific styling, such as changing the cursor with cursor: pointer, something you don’t want to happen when the block isn’t clickable.
• The changing background color on hover is done with CSS, which I think is fair, considering the small percentage of users using IE6. Changing background color isn’t a must feature.
• Lastly, since we’re simulating a link here, it should show where the link is going. I’ve done this by setting the statusbar to the link location on hover, something that’s useful when it works (users can disable this in some browsers).

Hope that little snippet is useful for someone out there, I think it’s a good example of good use of javascript.

You can’t be involved with what’s happening on the internet without coming in contact with the “newspaper crisis” somehow. From a business perspective it’s simple really: Much fewer people buy newspapers (on paper) nowadays. Please note that this has very little to do with advertisement or business models, I’m talking about newspapers from the user perspective here.

Internet is really a commodity nowadays. People process loads of  information on the web every day, and this of course affects how they expect newspapers to behave. Every time I hold a big newspaper in my hands I’m surprised at how inferior it is compared to reading news on the web.

Newspapers have problems with references

If I find an interesting news story on the front page, it’s a mess finding the full article in there. The references are done with page numbers, but with page numbers that are local to a certain part of the paper. “Culture, page 7″. And the culture part is stacked inside the part I’m reading, so I first have to find that one, then find the page numbers (which are removed from pages with ads), and then finally find the article I wanted.

The same is true for related articles. If I read an article I like, it’s quite likely that I want to read other articles on the same subject. Newspapers solve this today by placing similar articles close to each other, and hope that you see them. This is of course limited, and gets harder when pages sizes shrink.

Compare this with clicking a link on the web. If I find an interesting article teaser, I click it, and am instantly taken to the full article. If that article was indeed as interesting as the teaser suggested, I’m often presented with similar articles, from similar categories, and can click them to move there.

Newspapers are slow

Even the most frequently published papers are only distributed once per day. This simply means that papers can’t compete on speed, being first with a certain story. Even if you happen to get your hands on a story at the perfect time, a paper still have to be both printed, and distributed to people. This takes hours.

What’s worse, morning newspapers brand themselves as dealing with  “today’s news”, when in fact it’s the news from yesterday. This hasn’t been a problem before, since there was no faster way to get news. Now there is.

If speed is important to you, you can easily subscribe to news via e-mail, Twitter or RSS, and be instantly updated.

Newspapers are static

Articles in a newspaper are, once published, not possible to update and improve. They are left for the wind, even though there are inaccuracies or important clarifications to be made. Any conversation sparked won’t be there.

This is of course the strongest argument for internet news. A big article will be different if you look at it later the same day. Comments and updates based on feedback are able to improve articles considerably.

Newspapers don’t have enough unique content

Big parts of daily newspapers contain poor rewrites, or plain copies, of articles from elsewhere. The reasoning is probably that they are trying to be exhaustive, give a broad view of what has happened. Problem is, they are hiding their own unique content behind loads of reposts of other’s content.

The same happens on the web, but instead of copying the article you link to it. Then you get to read the news from the real source, and dig in deeper if you want to. Additionally, there’s safegards that stop people from copying other people’s content. For instance, Google have special filters for filtering out duplicate content.

Newspapers are not relevant enough

The biggest reason why I don’t subscribe to any newspapers is that they are not relevant enough. I’m not one bit interested in sports, and still, during big sporting events newspapers push them to the front page, over interesting internet-related news; things I find interesting.

The key here is of course to realize that relevancy is in the eye of the beholder. Only I know what I find interesting, and relevant. Why trust someone else’s relevancy ranking when I can easily get my own ranking online? Even if I don’t want to tailor-pick RSS feeds and build my own custom news feed, there’s someone out there that has more similar taste than the four major newspapers here.

So, what should newspapers do?

Well, they have two options: One, they could keep writing articles, hoping that the quality will be high enough to turn the trend, or Two, they could start thinking of how they deliver news. The expectation of how news should be served is changing. It now needs to be delivered…

1. … filled with references for digging deeper
2. … faster than once a day
3. … in a manner where people’s contributions enhance it
4. … with a quality stamp that ensures that you’re reading something you couldn’t get anywhere else
5. … personalized to my own specific taste. No sports.

Is there any other way to do this than focusing aggressively on the web, and less on dead trees?

Som många av er vet så jobbar jag för ett konsultbolag som heter Valtech i stockholm. Via Valtech får jag ofta möjlighet att hålla föredrag om saker jag tycker är intressanta, och som jag tycker att våra kunder (och vi själva), borde satsa mera på. Den här gången var det upplevelsedesign: att inte bara sätta fokus på att användaren ska klara av specifika uppgifter, utan att bry sig om hur det känns att genomföra de uppgifterna. Kort sagt, att sikta lite högre.

Presentationen håller jag tillsammans med Visar, och Marwin, två av våra extremt duktiga Art Directors, och ni ser mig sist i presentationen.

If you’ve worked with webdev professionally you know how it goes. “Why can’t a company with a strong visual brand get to use their own font?”, the designer asks. Then a long discussion about web fonts follow, where you decide to replace the font with a “web safe” font instead. Or do you?

You could think it’s strange that in 2009, we can’t use any fonts we want on the web, and I would fully agree. You could ask whose fault that is, and I would reply with a quote from a meeting between browser makers in august 2008:

“My understanding, from Chris, is that supporting direct linking of the fonts would be a great disservice to the independent font industry. A high-level decision within MS says we won’t implement that in IE. So what is done other than EOT is [probably] not going to interop with IE. “

“MS” is of course Microsoft, and “Chris”, is referring to Chris Wilson, Platform Architect of the Internet Explorer Platform team. The same Chris has also written a longer text about font linking on his blog. I first thought that this was something the font foundries had pushed through, but on the above post it seems that this is also a personal opinion. Browsers (but only IE) need to protect fonts from getting pirated.

And that’s the whole reason why we don’t have cross-browser fonts on the web today. (Although direct linking to fonts work in all the latest versions of Firefox, Opera, and Safari). Nice isn’t it?

Embedding fonts anyway

Of course, there’s still a need to embed custom fonts on webpages. That means clever developers will develop techniques will work around a broken internet explorer. No matter what the font founderies and Internet Explorer team thinks.

My reasoning for why this is a good thing is because that’s how everything else works in the browser. Even though anyone can copy an image, we have a big market for stock images. Even though anyone can copy the HTML, CSS, and Javascript of a whole site, we still have people building websites for money. Fonts are no different, and the exact same business model that works for stock images can work for fonts.

One popular technique is sIFR, a way to use javascript to replace regular html with flash. Inside the flash you embed the font you want, and voilá, you can use any font you want. sIFR misses one crucial point though: It’s far too annoying to embed a font inside a flash movie. You need a commercial program, and you need to know what you’re doing. And you’re dependent on flash support. It’s not that bad, but a bit annoying to work with.

So for a recent project I’ve been playing with Cufón, which uses javascript, but draws on canvas, or in VML for browsers that don’t support canvas (IE). They have an extremely friendly website, which walks you through the process of getting things to work, and the font conversion needed is available directly on the website. I’ve only used it for simple cases, but it works really well.

All in all, Cufón is a great alternative until IE gets its shit together.

PS. Famous people that don’t agree with me:

• Richard Rutter, author of the clagnut blog suggests that font founderies server-side generate our fonts on demand, much like Google Maps only sends a part of the map, and not all of it.
• Joe Clark: “Quite simply, there is no broad clamour among Web designers to use any font they want.”
• Jason Santa Maria: “embedding normal typefaces without any sort of precautions is putting it on a silver platter for anyone to take freely. That’s like saying people steal from stores anyway, so let’s just leave the doors unlocked at night ”
• And of course, the IE team…
• …and all the typeface makers in the world.

So there I sat, at the demonstration of a new website I’ve been part of building. About 10 people in the room, some of which had never seen the site before. There had been preparations, and we had gone through which parts of the site we were going to present. Only the simple part left…

So the presenter fires up the projector, connects it to his Mac, and looks at the projection. Half the site is outside of the screen. Turns out the maximum resolution is 800×600, and we’ve designed the site for 1024! People started looking at each other.

“We have to be able to show the site with a projector!”, one from the audience proclaimed.

Awkward silence.

I’ve rarely heard people working with accessibility mention projectors as arguments for accessibility, but it turns out they are great for that purpose. Just look at it like this:

• Resolution is often at the very low end, and they get upgraded much slower than regular computers.
• Brightness is much lower than on a computer screen, especially at daytime, in a room with bad curtains.
• Many presenters move their mouse by looking at the projection, which makes clicking things harder.

Interesting isn’t it? Those three just happens to be exactly the same things that we try to optimize when working with accessibility:

• We try to avoid having people to scroll sideways, because unexperienced users find that hard to do. A flexible design, that can adapt to different screen widths (within reason), is a great way to accomplish that.
• We work hard to make sure that the contrast between page elements is big enough. That way, the large part of the population with low vision (don’t forget those that left their glasses at home…), can use the page without problems.
• We expand clickable areas of links and buttons, to make sure people with motor disabilities can still use our site.

So, we could just as well have been optimizing the “projector experience” all along.

How did the presentation go? Well, we simply zoomed the site out one step, and continued as usual. You are making sure your site zooms properly are you?

The programmers behind The Pirate Bay are getting charged with making it easy to share files over the BitTorrent protocol. Note that it’s not because they’ve done it themselves, but because they have made it easier for others. Never before has usability been a crime.

“They have to get paid”

Copyright holders protest and say that they “have to” get paid for what they produce. And that argument seems to work well with people, because hey, why shouldn’t they? (Real non-geeky people, not people like you).

At the same time, people seem to agree that there are exceptions. It is considered OK to play music to your friends. Or lending a CD to a friend over the weekend. Or letting a colleague listen to some music on your iPod. So sharing with friends is fine. The problem, and the major change that many have missed, is that people have more friends than ever before. All across to globe, all connected via the interwebs. And as the number of friends grow, people tend to shift over, and not consider it OK to share any longer. “Hey, you can’t share with 100 people! The artists have to get paid!”.

Lets make some laws

So lets say you want to make laws based on that kind of “reasonable sharing”. How would you do that? Do you lawfully define what a friend is? The number of friends a person is allowed to have? That you have to keep a count of how many times you let someone listen to your iPod? No, it just doesn’t work.

Perhaps if you put a ban on some types of technology. Technology that makes it easy to share to many? No, because technology moves several magnitudes faster then laws get made, so as soon as you manage to ban one technology, there are five new ones available that circumvent your law. Allow any form of sharing and technology will generalize it to be used for mass sharing. (See OneSwarm for an example).

What about using technology to block sharing? This is what’s called DRM, Digital Rights Management. Sorry, it just doesn’t work. Every DRM system ever built, has been broken. The core problem is: it’s not possible to both block people from sharing music, and let people listen to it.

“Hmm, then maybe allow no sharing?”

So what about banning sharing altogether, strange as it may seem? Well, paying customers would hate it. A big part of music is sharing it with people, hoping that they will like what you like. We want to play music at our parties, without requiring everyone to pay a license fee to attend. A complete ban (and extensive citizen surveillance to go with it) would quickly lead to a separation between music that we can share, and music we can’t share.

This is exactly what has happened with computer programs. There’s now proprietary and open source, no-share and please-share. Open source is growing stronger every day, and lots of companies decide to join the tide, and release their code the same way. This is exactly what will happen to music. Let’s call it the Open Music movement, and lets see how many years the no-share music will last.

Sharing is nothing strange

To explain why allowing people to share isn’t so strange, compare a famous book author to a famous speaker. People tend to think that writers must get paid for what they write, once every time someone reads their text. If lots of people read what they write, they somehow “are entitled to” lots of money.

Speakers on the other hand, get paid each time they speak. Not each time someone listens to a recording of their speech, or someone else repeats what they say, but based on their own performance, once. They get paid for original performance, not copying. This also means that speakers want their stuff to be spread as much as possible. Because for each copy, there’s a potential new customer waiting to pay them to perform.

So why is it so strange to see the same model for writers? Writers that get paid for their performance when writing a book, not by the number of people that read it.

Separate distribution and performance

So we have to separate distribution from performance. Distribution is the reason that authors think they need the big companies. How else could they distribute their great performances to a large audience? Well, the internet. Yeye, but how can they distribute it and get paid? That’s where things get interesting, because now we’re talking about business models.

Media companies have had a distribution monopoly for a very long time. Now the internet threatens that monopoly, by making it easy for anyone to distribute anything, for free. This isn’t going to change, no matter what kinds of laws that get pushed through. So how do you tackle that?

And that’s the challenge that the record industry should put all their power towards. Think of speakers instead of writers, how do they get money? Think of how the TED conference makes lots of money off speakers. Think of how you can build technology to compete with BitTorrent, how to get people to pay for performance, not distribution. Think of how you can improve usability, something that’s in a pretty bad state when it comes to BitTorrent.

What model to use is not my problem

Companies missing proper business models is not my problem. It isn’t, and has never been, a government problem either. There’s no reason to pass integrity limiting laws to help companies survive. There doesn’t need to be completed alternatives waiting. That’s their own problem to solve, and time will tell if they manage the switch before it’s too late or not. I don’t know.

Meanwhile the internet continues to evolve, while media companies try to fine the programmers behind The Pirate Bay…

Lots of opinions here lately, and very few concrete examples of work I’ve done. I thought I’d take a few minutes of your time and talk about those projects here.

All of the sites I’ve built are in Swedish. The reason for Swedish is just that they are so much easier to write for. Since English is not my native language, everything takes a little bit longer when having to struggle with vocabulary.

All of the sites are built with Django, a framework I’ve had great success with, which feels both well architectured and easy to get started with (a very unusual combination). Django also lets me write the HTML I want, without getting in the way.

(By the way: there’s a Django User Group forming in Stockholm if you’re interested. First meeting this friday)

Uttråkad.se

The first one to launch was Uttråkad.se – hitta saker att göra, a site for everyone that have too much time on their hands. I guess the english version would be “bored.com”, which kinda tells you what the site is about, right? Anyway, we’ve played around with having the site very open, with no registration needed at all.

I would say the launch has been a good one, with an article in metro the first week of launch, 153 activities posted, and about 70 daily unique visitors. It has been a fun project to be a part of, and it’s been developed together with three friends in a group we call openworks.

Are you bored? Then play around with Uttråkad a bit

Kundo.se

With our first project barely launched we decided to join an even called 24 hour business camp. The idea was simple: prepare a business idea, and build and launch it in 24 hours. Said and done: 92 entrepreneurs gathered at a luxurious conference center and presented 52 new sites 24 hours later. It was simply the best conference I’ve been to, and an extreme energy boost to be in a group of doers like that.

Anyway, we launched Kundo – kundtjänst på nätet after 24 hours, a site that companies can use to embed a feedback-widget on their site. Translates to something like “CustomerO.com”, it’s clearly influenced from Getsatisfaction but in Swedish.  There’s clearly a need for better ways for companies to communicate with their customers in Sweden too.

After the camp we still had some bugs and important features missing, so yesterday me and Björn sat down and squashed all the major ones. So, do you know of a company that needs to take better care of their customers? For free. Send them a link to Kundo. Thanks!

Samhallsentreprenor.se

I’ve also been busy with Django at work. Samhallsentreprenor.se is a meeting place for people that work in projects that somehow help their local (or global) community. These are people that are incredibly motivated to do good, a group that’s of course great to work for.

We’ve released new versions of the site about every 10 days, so development is fast, and through the development blog people can directly influence future features.

So, do you have ideas for projects that can help people around you? Sign up on the site and start talking to people.

Two more projects…

… are under development and will be announced when they are done. There’s no lack of things to do in my world

Do you remember the time when web development was easy? Right where it all started, when there was just one browser, and only one website existed?

Things changed. And now you can’t trust anything any longer. Trust me, if you think you know how your site will be shown, you’re wrong. Just consider the 10 major steps of “progress” we’ve made since then:

1. Browser widths stopped being predictable as soon as people stopped using maximized windows, and monitor sizes stopped being the same everywhere. People cling to their fixed 760px or 960px grids feverishly (yes, me too), dreaming that they are what people use.
2. Browser heights started giving us the same problems as widths, but toolbars also started showing up, making height prediction plain impossible to predict. “The fold” is now the top 10 pixels of a page, unless you got a browser warning, then “the fold” is pixels 10 to 20.
3. Aspect ratio, the relation between width and height, went strange when first wide-screen monitors, then TV-screens and mobile phones, entered the market. I wouldn’t be surprised if I’m soon able to set my own ratio, or if someone launches a stretchable screen that I can drag to my own preference. I hope your site is well prepared for that one.
4. Colors differ not only depending on the lightning in the room (which was a problem as soon as there where two computers), but also depending on monitor (including brightness and contrast), gamma correction differences between operating systems, gamma correction bugs in PNG files and browser implementations, color profiles (now supported in Firefox 3.1!). Add to this accessibility tools that invert colors, increase or decrease saturation. Pantone color codes on the web anyone?
5. Font selection is another interesting mess. The browser has a default font, different (of course), depending on what operating system/device you’re on. The website author can try to override that font, specifying one or more fonts, which the user might, or might not, have. Oh, and lets not forget the editors, copying and pasting text from Outlook or Word, getting font tags inserted into your throughly crafted site.
6. Font rendering complicates things even further by letting either the operating system or the browser render the fonts as they wish. Things like ClearType, subpixel font rendering, and font smoothing.
7. Character encoding is far beyond repair, and this is easily conveyed by looking at what steps a browser has to go through to render a single letter. To quote Mark Pilgrim: “It’s a 7-step algorithm; step 4 has 2 sub-steps, the first of which has 7 branches, one of which has 8 sub-steps, one of which actually links to a separate algorithm that itself has 7 steps…”.
8. Unstyled HTML looks different because of default stylesheets in some (but not all) browsers. Developers are left guessing what styles to set to override all defaults.
9. CSS styling is of course fully unpredicable, depending on not only browser, but on what underlying rendering engine, and version of that engine, and with what patches applied, and on what settings the user has made. On top of this we have piles of bugs, which tips most developers from scientists, trying to use logic to solve problems, to “empirates”, trusting only trial-and-error as a tool to “just get it to work”.
10. HTML versions can also be selected in several ways, not always according to reason. First you can specify no doctype, and watch everyone try to render your site like IE5 once did, long time ago when someone used that browser. Then you can pick a doctype, and watch how some browsers render your page differently, depending on whether your doctype is in their “white-list” or not. And then there’s standards mode, quirks mode, and almost standards mode, there’s XML prologues and MIME-types, and what-not.

But that’s not all, enter IE8

The newest entry in the “making web development hard” toplist, is (soon to be released) IE8. They have recently decided that your page will be rendered based on popular vote. So better not make your designs “arty” in any way. People might think it’s broken and vote you to IE7 rendering (very broken). Don’t laugh, it’s not a joke, the proof is on IEblog, linked in the paragraph above. I dare you.

“Are you fully out of your fucking mind?”, you might be tempted to ask the IE8 developers. The reply is simply, no no, don’t worry, just settings this HTTP header you can opt-out of the rendering that popular vote has selected for you, even though you already opted-in by setting a doctype once.

And so we slowly stop caring, and give up. Dreaming ourselves back to the time when there where one computer, and one website…