Why is writing for the web difficult?

Blogging for dummies

I have been a web professional for over 10 years. In that time I have learned a lot of things: PHP, CSS, XHTML, JavaScript, XML, Photoshop. But one of the things that has always been harder to do right is writing for the web. The reason? It has so many conflicting motives, that it’s impossible to have one good writing style. Let’s analyze:

When we write for the web we most certainly write for the fast paced audience that has no time to read pages and pages of text. That’s a given, and it’s what sets it apart from writing for paper. The other characteristic is links: if you need to explain something, it’s easier to just link to wikipedia than to insert the actual text. Also you don’t want to infringe on copyright.

Let’s look at our goals for writing for the web:

  1. Make it easy to read
  2. Make it easy to use
  3. Make it easy to find (search engine position or ranking)
  4. Make it sell (in case you’re selling, but you’re always selling ideas)
  5. Make it look good

Those goals are also connected to viewpoints from certain people: the writer, the usability expert, the SEO specialist, the sales representative and the designer. These fantastic four have to make sure the page adheres to all their standards. And here is where it starts to itch:

  1. easy to read: plain fonts, short sentences, short text, clear message, bold, pictures and diagrams that explain difficult topics.
  2. easy to use: minimal use of text, clear and large buttons, minimal use of design elements
  3. easy to find: clear headings, short sentences, keywords in bold (not the same ones), no pictures required.
  4. sell:  everything leads to a buy, no navigation on cart page
  5. look good:  creative fonts, no bold text, plenty of  non-illustrative pictures (preferably photographs) and design elements

In my opinion you should work from the outside in: make it look good, then make it easy to use, easy to read, easy to find and easy to sell, in that order. But as you make it look good (design process) you can of course have some consideration for the other aspects. It should also be noted that SEO is still voodoo, since nobody knows how Google really works. Also, search engines, in particular Google, change their ways of working constantly and they get better and better at identifying your pages. So don’t try to fool them, it’s not worth it.

There will probably always be a battle between usability experts and designers, because their worlds are so far apart. But to a modern web user something like useit.com looks like it was made 20 years ago and doesn’t instill trust in a user, something that is vital to sales.

Remember I may not be an expert in all those areas,  but the ideas presented do come from the leading experts in these areas.

Why I don’t like the Facebook Like button

thumbs up

thumbs up

First of all, I hate the “Like” button. However, I have to be honest, I hated the “fan” button even more. Now I am not just being negative. Let me give you some background on this.

The Fan button

The first time I saw the “become a fan of ….” button on Facebook I didn’t know what to think of it. I started thinking, OK, so what am I a fan of. I soon realized it’s a very short list, that also changes over time: Rubik’s cube, Aikido, House, Monk, Rush, Led Zeppelin, and some others some to mind. But to say I am a fan of e.g. Harry Potter is quite exaggerated. So, reluctantly I clicked the fan button for “House” (the TV show, not just any house). The next thing I knew I found myself drowned in messages about (from?) my temporary favorite TV show. It’s just plain stupid. I do want people to know I like the show, but not get stupid messages all the time from it. So I stopped being a fan of anything else.

The Like button

I was happily surprised when Facebook decided to change the Fan idea to a “Like” idea, thinking they must have heard some voices echoing my thoughts. Unfortunately though, the button still does the exact same thing: squirting out a barrage of nonsense messages. I soon found out though that now it’s quite easy to hide those messages without losing your ‘like’ status.

Google Reader

Another thing I am fan of is Google Reader. Ever since I got a new PC I never felt like installing applications. I realized that even though compiled software is faster, and sometimes has really nice features, using online software just works anywhere, and is good enough for me. Also I have been moving around between computers more, so it becomes quite necessary to synchronize application status. But that’s another story.

Google Reader has had a “like” button perhaps even longer than Facebook (can anyone tell me if that’s true?). And since Google Reader doesn’t followup the click of a “like” with a barrage of nonsense messsages, I was happy to click “like”. After a while though, I found out that on the top of my ‘suggested reading list’ were a hole bunch of really stupid posts. I thought: “there must be something wrong with Google’s algorithm”. And then it hit me: Google uses the “like” button to learn what you want to read. But I had been using it all wrong. I clicked “like” usually when something was really, really funny. And so Google decided I was mostly interested in humor. And that’s pure BS. I like a joke once in a while, but not all the time, when there’s interesting serious news ahead. And it was impossible for Google to tell what I found really hilarious and what I found just plain stupid (a sense of humor is not a computer’s strong point).

So I revised my like-button-decision-making-process and was happily surprised when only weeks later Google had adapted itself back to a more serious note, and I could suffice with reading the top 50 or 100 items, and send the rest of the news to a peaceful death.

Still, I was faced with another issue: once in a while I read interesting news about natural disasters. But I found it morally appalling to mention to Google that I liked the fact that over 200,000 people died in Chili, or that dozens died in a freak accident. But I learned the hard way now it’s wrong to think that way, we have to redefine the “like” button to an “adjust-neural-net-weight”-button, even though that sounds a lot more complicated.

Now what’s next?

I am going to continue clicking ‘like’ for everything that I wish to associate myself with, or wish to receive messages about in the near future. My advice to readers: please realize that there is a commercial incentive to all this ‘liking’: ads will always be tailored to the user, wherever possible. And Facebook nor Google can do this properly when it doesn’t know what you ‘like’.

So far, I like where it’s going, though the wording is wrong in every single way.

Cybernetic Programming

cybernetics

I’d like to make a proposal for a new kind of programming (at least new to me, LOL). When I was studying back in the nineties I became interested in something called ‘sociocratic organization‘. This is a form of organization based on Cybernetics. Cybernetics is the study of systems with feedback loops. When you think of a thermostat in the room, it has a feedback loop. When it gets too hot, it cools, when it gets too cool, it warms up, and that way it keeps the system in balance. In computer programming we don’t deploy such features normally. We pray that all goes well, and that we didn’t forget anything, and if it does go wrong, the whole system usually crumbles apart. In web programming that’s usually a minor glitch, since just one page of our whole system breaks. In desktop computing it’s much worse. And in embedded programming it’s disastrous. Now instead of writing numerous unit tests, or mathematically proving our program, perhaps it would be possible to use this idea of a feedback loop in many aspects of our programming.

Consider you have to write a program that is to determine the best results for a search, similar to Google (but not as vast, so let’s say a small web site). We need to display what’s relevant to the user, but we don’t know what is relevant. So you just do a simple text search to find a record within a table. Now you check which of the results is clicked for this particular search result, and then you log the search term, and with it the clicked result.

Then a new user shows up and does the same search, and clicks the same result. You increment the counter for this result on this search in the log. After a while we should see our statistics in the table represent what people were searching for, and which records were ‘successful’ to them (at least they clicked it). Depending on these results you can now decide to alter the order of the search results, where the highest scoring record is put on top of the search results page.

Pretty nifty. I Googled it and found that Microsoft Research has written a paper on something similar. So expect this to Bing us soon.

Adventures in XML land: combining Excel, XML, HTML and JavaScript

the process

using Excel to generate XML, jQuery and Ajax for animations

In a past long ago I ventured into this barren land, where bugs crept up my sleeves and pants. In most cases after a short scary trip I’d be happy to be back home in PHP or plain JavaScript land.

What am I talking about? Client side “apps”, by which I mean browser based, server-less HTML pages, where everything is done on the client. Examples of such applications are CD Rom viewers, Touch Screen Console applications, and Information Display (like the train station screens).

Recently I got a request to make an Information Display. I started happily to look at how this would work using modern browser based techniques. After a couple of days of experimentation I must say that it was a wonderful journey, and I am convinced this technology will have a great future.

Ten years ago CD Roms with an HTML viewer were simple pages with little interactivity, or they came with a web server to do interesting stuff. Now, with the advent of powerful JavaScript libraries and Office 2007 we can now integrate these into a cool looking almost server-centric interactive display.

I have used the following technologies, and will explain hereafter how:

Excel 2007 and XML

Excel serves as my database. It consists of worksheets of tabular data. The data is exported to an XML file using the XMLTOOLS addin, which you can find on the microsoft site. It is very loosely designed: when I need an extra column, I insert it and start typing. I will have to re-generate an XML mapping then, and export the contents to an XML file. The advantage: the person working with this ‘database’ only needs to know Excel, and how to click on a few buttons.

jQuery and Cycle

I added jQuery most and for all for the Cycle plugin. It allowed me to create stunning visual transitions for ‘slides’. The slides are actually simple divs in an HTML page.

CSS3

I used CSS3 for creating nice looking gradients. Also I used CSS3 for zebra tables and drop shadows on images. Overall it means there is no need whatsoever for images to enhance the visuals. I think that’s how future web development will and should occur.

SVG and/or Canvas

In fact you hardly ever need both, given that these technologies mostly overlap in capability. An advantage of Canvas is that it is actually a program (javascript) instead of a declarative markup. Of course the same argument makes SVG more attractive for its simplicity.

Ultimately I decided to use SVG for both my static vector based images (floor plan) and my animation (a clock). The SVG animation actually looked better than the canvas one and I wasn’t very interested in modifying the default look.

For the floor plan I hunted for a good SVG or Canvas editor. What I found was Google Docs (!). Recently they added a diagram editor, that can export to SVG. The resulting code unfortunately looks like hexadecimal soup, but the good thing is you can easily modify the diagram on Google Docs and export again.

Right now my app only works in FireFox 3.6, and that’s just fine, baby!!

Note: I cannot share the application since it’s made for our organization, but if you need help in setting up one yourself just add to the comments…

Rubik’s cube Average formula in Excel

stopwatchAny speedcuber knows how to calculate his or her average: total all, remove fastest and slowest, and divide. Here’s how you do that in Excel

=( SUM(A1:A12) – MIN(A1:A12) – MAX(A1:A12) ) / (COUNT(A1:A12) – 2)

But that is tedious of course, and your constantly changing the range to find the average of e.g. 5, or a running average. So instead I wrote a little VBA function you can put in a module.

  • Press ALT+F11 to go to the editor
  • Choose Insert > Module
  • Choose Insert > Procedure
  • Type CubeAVG
  • Click Function
  • Click OK

Now edit so it’s like the code below

' cubeavg : calculate speedcubing average
Public Function cubeavg(r)
    Dim total As Double, fastest As Double, slowest As Double, n As Integer
    total = WorksheetFunction.Sum(r)
    fastest = WorksheetFunction.Min(r)
    slowest = WorksheetFunction.Max(r)
    n = WorksheetFunction.Count(r) - 2
    cubeavg = (total - slowest - fastest) / n
End Function

Don’t forget to save the file…

Convert Excel date value to SQL date

When creating SQL statements you’ll often need a date in the ISO 8601 standard format (e.g. 2010-03-26 12:34).

Of course you can change the format in Excel to show it as such, but that doesn’t give you the string you need, e.g. in an insert or update statement.

Here’s an Excel function to make an SQL date value, presuming the date value is in cell A1:

=TEXT(A1,”yyyy-mm-dd hh:MM:ss”)

This circumvents the use of complicated IF and date/time functions. Append a “Z” if you need to indicate the timezone as UTC (i.e. GMT) time.

Here’s a short VBA function to create this type of date

Function SQLDate(d)
SQLDate = WorksheetFunction.Text(d, "yyyy-mm-dd hh:MM:ss")
End Function

Put this code in a new module in your workbook to instantly start using the function in Excel like this: “=SQLDate(A1)”

SQL date in Excel

SQL date in Excel

More information:

http://en.wikipedia.org/wiki/ISO_8601

How to remove duplicates from a list

There are tons of ways to remove duplicates from a list of items, most of which are way too complicated and technical for a noob (if you don’t know what this is, then that’s you) to perform.

Let’s look at some of them, and let me know in the comments if you think these were useful. Here they come, in order of increasing difficulty (geekness)

TextPad

removing duplicates with textpad

textpad sort & remove

TextPad is a free (well, nagware) text editor with so many built in tools I cannot talk about it without crying…

  • open the file in TextPad
  • select Tools > Sort
  • check the box at ‘remove duplicate lines’
  • click OK

Excel

Another program abused by millions (billions?) to do stuff that could be done with a 10 year old cellphone. What the bozos at Microsoft tell you is the dumbest way to do it, because you’re overwriting your original list. Here’s the smart way

  • Excel Pivot

    Excel Pivot

    Select the data

  • Click Data > PivotTable… (Office 2003) or Insert > PivotTable (Office 2007)
  • Click ‘Finish’ to create a new sheet with an empty pivot table
  • Drag the column for which you need to remove duplicates into the left part of the pivottable
  • adding flavor: you can now sort, filter, group, analyze, you name it.

SQL

If your data is in a database, and you have access to SQL, perform the following query:

  • SELECT DISTINCT(column) FROM table
  • in place of ‘column’ you type what you need to be unique
  • in place of ‘table’ you type the table name
  • tip: you can combine more columns by typing (column1, column2, …)

Linux

If you have the file on a linux or unix system, from the terminal (command line) type

  • sort -u file > output
  • where ‘file’ is the name of your file and ‘output’ is the name of the output file.

I’d like to know if you can come up with new and maybe even faster ways!

How to ruin your website in 10 steps

I have worked for almost 10 years in web development now, and here’s what I have learned from the clients: you can ruin your website too!

Here’s how:
1. Get the cheapest designer you can get. If your nephew says he can do it, let him do it. It’s not that hard.
2. That being said, you can also do it yourself. Why pay for some fancy designer when you can buy or get a template. And HTML+CSS is easy, right?
3. Even cheaper, copy someone else’s site and just change the text.
4. Don’t start a forum or community. There are a lot of people out there ready to say nasty things about you.
5. You should get a CMS if possible. Then you can control everything yourself real easy, and choose any font and color. Did you know with a CMS you can just copy straight from MS Word? You can make sure people notice your links by using a big red font.
6. Don’t listen to any advice from your designer. They’re just after your money, not to help you.
7. If it looks good in Internet Explorer, then you’re done. There are so many browsers there’s no keeping up with it, and most people use IE anyway.
8. Almost everyone has broadband, so keep your images in high quality. Browsers resize them anyway when they display them.
9. Tables are cool. With tables you can get layouts done that are really hard without them.
10. Get as much information from your visitors as possible. When they sign up, ask for name, gender, location, email, interests. You can even sell that information later and make a good profit.

And all of the above will help you to get the lowest possible position on Google. But there are companies that can help you to become #1, just wait for the ‘offers’ to come in.

Adrian Monk and the case of the crippled DVD driver

Finally solved all computer problems, where nobody else could. After having Infoman have a look at my PC they said it was a virus, and it was repaired, but the problem (sudden reboots) kept occurring. In addition, my DVD player didn’t work anymore. I opened the case and found a dangling cable end, almost touching the motherboard. I think when the fan started blowing, it would sometimes short-circuit the MOBO (it’s a guess still). Anyway I secured it and the problem is now gone. 2 weeks, no reboot.

The broken CD player was a problem with an application named ‘HotSpot Shield’. Actually a pretty good app that enables you to access all kinds of sites that are blocked in your country (e.g. Veoh, Hulu, some YouTube vids). But, the thing came with very annoying ads so I uninstalled it. A couple of days ago I bought a wireless router and setup a network. All went well, but the connection dropped suddenly. I checked the TCP/IP stack and saw ‘Hotspot Shield’ as a layer in there. Damn! I said: “He’s the guy”.

Adrian Monk

Adrian Monk : "here's what happened"

Here’s what happened (Adrian Monk style): “At first we thought it was maybe a virus causing this, but cleaning with plenty of scanners didn’t resolve it. The next suspect was the hard disk, but even chckdsk /r didn’t solve the problems. Then we suspected the drivers themselves and reinstalled and updated all drivers. That didn’t work. But then we found HotSpot leaving a trace in network settings. Hotspot Shield needed to intercept all traffic in order to make sure it looked like it was coming from the US. So it put itself not only in Program Files, but also as an add-on in browsers, and as a layer in TCP/IP. That interfered with the built-in modem driver, which then failed. The modem driver looked for another resource and used one that conflicted with the DVD drive. After removing HotSpot from all network settings and uninstalling the DVD driver, it came back automatically and started responding again. Patient saved, and HotSpot put away.”

The Real Sixth Sense – digital meets real life

While Microsoft is playing with their $10,000 surface table, MIT creates a $300 alternative that does more. It’s a wearable device aptly named Sixth Sense that lets you interact with the digital world, in awesome ways. Just watch…