Archive for the ‘javascript’ Category

eboran – esrevni

Saturday, June 7th, 2008

Today I wrote a quick funny script that inverses the text in all the text nodes on a page. I think it’s funny enough to release it:

function fcc_text_reverse(e){
	var j=(e.childNodes)?e.childNodes.length:0;
	for(var i=0;i<j;i++){
		var n=e.childNodes[i];
		if(n.nodeType==1){fcc_text_reverse(n);}
		else if(n.nodeType==3){
			n.nodeValue=n.nodeValue.split('').reverse().join('');
		}
	}
};
fcc_text_reverse(document.getElementsByTagName('body')[0]);

You can also use the favelet / bookmarklet — just drag Reverse text to bookmarks.

Zemanta Pixie

Video is the new AJAX

Monday, April 14th, 2008

TVImage via WikipediaRecently there’s been a lot of video news sites popping up here in Slovenia. In addition to TV networks almost every newspaper site now has a video section. I understand that these sites need to evolve and that media is changing. Every year we see statistics changing telling us we read more on the web and less newspapers. Even TV is losing ground. The media business is changing and in this ever changing world the easiest and the cheapest solution is to follow what others are doing. Unfortunately this also means that you do things without thinking them over thoroughly.

When you do that you have a problem – you’re thinking that you’re giving readers what they really want but in turn you’re giving them what you want. Or what you think they want – either way you’re not on the right track. That made me think of the ways I watch video online and the ways I want to watch it.

Podcasts

Most video I watch is actually not on the internet – it gets downloaded (almost) automatically into iTunes. I don’t watch the podcasts everyday even though some podcasts are daily news reports.

So local media companies are adding podcast feeds to their video content and hoping that people watch them[1]. Newsflash – podcasts are not a technical issue. Most people don’t even know what feeds are (another story), why do you think that they know what podcasts are?

The solution here is quite simple – for a quick start of course. Make real podcasts, use the news you’re making or providing on your site already. This way you can leverage your existing content while providing something that people might actually watch. Focus on local news[2] and target the younger audience, with daily episodes not exceeding 4 minutes in length. A very important thing is choosing the presenter – they need to reflect your your goals and suite your target content and audience. This means that your average TV anchormen won’t work – check the most popular podcasts to get the feeling what you’re looking for, keywords probably being humorous, personal, friendly.

Such podcasts have a few possible ways of monetizing themselves. One possibility is to add commercials (add them at the end, not the beginning), you might have weekly or monthly sponsors that you display in the background or even at the beginning of the show (not more that one screenshot). Since you can differentiate your subscribers from random web users you can adjust advertising to get most from both worlds. Be creative!

TV shows

Fortunately both local TV networks now have ways of watching locally produced shows I’ve missed. I do that quite often[3] since I can’t really fit some of them into my already busy schedule. When I’m watching such a show on the internet that’s probably the only thing I’m doing at that specific time and means that the computer is actually acting as if it was a TV.

Since I can move the slider you can’t push ads to me as you would on TV. That doesn’t mean you can’t have ads in such shows, you just need to think about them differently. What I do often is pause the video to check my email, browse around or just wait for the show to download – perfect time for placing ads. When I come back there’ll be an ad waiting, I’ll click next and continue watching the show.

The idea is not mine – when I was in the Netherlands a few years ago I went to the movies – in the middle of the movie there was a commercial which announced a brief break during the movie. I don’t remember the commercials going on while the break lasted (we all left the theater) but they were on again when we started coming back.

A great option with watching TV shows would also be to allow me to set the shows in my profile – that way I could see when something will be on TV and when I can watch it online. If I have a few shows to check you should allow me to add them to a playlist much as I would in iTunes or on my iPod. And I wouldn’t mind ads in between – if I’m watching a show that has already preloaded you could preload an ad into memory and play it while you start buffering the next show in my playlist – I’d have to wait anyway. You could also create a podcast that would push the shows I added or subscribed to.

Video news

This is the one that most media providers do currently and get it wrong most of the time. When reading news on the internet I’ll have many tabs open since what I’m doing is browsing. This means I’ll start at the homepage and then click on random news there, maybe click a category I’m really interested in, when news open I might click some related news and so on. This “trip” is rather random and fast.

Since I’m in browsing mode I’m more likely to only skim the information on the news page. This means that when I come to a page that only provides a video I’ll have nothing to skim and will close that tab immediately. I won’t see the ad in front of the video and I won’t see the video. In a month I might discover that I’m not getting quality information and move on to another site that will let me skim what I want to skim and fully concentrate on what I want to see.

Video as add-on

One solution to this problem is to use the video to convey information that text can’t. For example if you’re talking about a football match you might add video of the best move or all the goals scored. Another possibility would be that you’re pushing news on Britney and you add video of the incident. This way I can skim the news, figure if I want to see the video and check it if it interests me enough.

Video as primary content

When you think the only way to present content is video (I don’t think that ever happens but some do) you could use the idea already mentioned – profiles and sort-of bookmarks. I first saw this implemented on the International Herald Tribune website for text only articles – while browsing and skimming for interesting news you add what you want to read to your profile. At the end you can sit back and read what you saved or in this case check your own news show. Hey, you could even add social features to this with sharing of such shows (technically speaking playlists) with friends,… This also makes ads less invasive since you can add them less often then on every video I watch.

AJAX?

Some of you might know that I hate AJAX and I do for the same reason I hate video on the web currently. There’s a bunch of idiotssites shoving it down my throat in totally inappropriate ways and I really hate being molestedbothered this way. Technologies are here to solve problems and the only way they can do that is if people think what problems they solve better than others. That way we can read the news, watch the video, get an AJAXy[4] exeprience when and where we want to and where that specific technology solves our problems best.

  1. I’d really love to see the statistics on that. Anybody know where to get them? back
  2. We get world news in other podcasts or from other sources – keep it linked to what you know best. back
  3. More often on PopTV since I prefer their way of delivering content – via a fullscreen Flash interface – opposed to a small Windows Media / Real player on RTV Slovenija. back
  4. By the way – with all the AJAX around home pages of both local media houses reload automatically (which could really be an asynchronous request to retrieve the latest news) – one with a meta refresh tag and the other with inline JavaScript. back
Zemified

Another year gone by

Thursday, April 10th, 2008

A few days ago this blog celebrated its second birthday. It’s been a good year, with links to my article published by such notable authors as Luke Wroblewski and Ethan Marcotte – the same article was translated into Russian. The blog was also included in Planet Microformats.

I’ve written only 61 posts (down from 100 in the first year), gotten 134 comments (down from 155 in the first year) and more than 70.000 spam comments (up from 17.000). I have 56 subscribers according to FeedBurner, which is more than a 100% increase from 25 a year before.

Firefox is the dominant browser with 47%, Internet Explorer lost some market share and is down to 44% with Safari rising to 4% and Opera to 2.5%. Almost 90% of the visitors have Flash 9 installed, an additional 4.5% are stuck at Flash 8. Screens grew a bit with only 27% having 1024×768 or less (32% year before) and less than 2% 800×600 or less. Windows have a share of 85%, Mac OS 10%, Linux 4%.

Top content is still This page contains both secure and nonsecure items, Messing up the interface coming in at a distant second with merely a third of the visits.

Redesign

I’ve had a redesign planned since day 1, but as usual it took quite some time to get here. Since I’m not a design I couldn’t just create a fancy look with everything else left the same. The idea was to shake everything up and try to come out with a layout that would be worth redoing everything. When I posted about what a TV network / news page should have when being redone I was also setting my own targets.

Tableless layout

This goes without saying. All the pages should validate, although there might be some crap left.

Width

I increased the width to 850px with the addition of 140px to the left used only for design purpose, not content. The main content is only 410px wide which means you can easily read this blog on devices like the Nokia n800.

YSlow

Not really that relevant since the page only creates about 15 requests which might even decrease as I compact the JavaScript. There are a bunch of other requests made that are content related – images, Zemanta pixies, favicons…

Microformats

Every page is supposed to be valid hAtom and the About section is an hCard with adr and geo. Links to others are of course XFNed. The about page is planned to be an hResume.

There’s no need to talk about blog compatibility and screensaving for banners. I don’t use OpenID there are no log-ins.

Context sensitive

Markos recently pointed out the fact that not many pages on the internet make use of the possibility to change the page for different users and different context. This, of course, is not an easy job, especially if you’re doing heavy processing – doing this for each user might be a bit to heavy. It is something I think differentiates the internet from other media and should be used to provide a better user experience.

User based

Returning visitors of this page will get special treatment. Since they’re coming back they don’t need to see the About section and they will also not have banners displayed.

Referrer based

People coming from search engines will see their query parsed into words that will be colored for easier findability. They will be able to switch them on and off and be able to repeat the same query on the internal search with the last option available only if the referrer was an external search engine.

Location based

Even though many blog themes have the same sidebar for all the pages (as did the previous one I used) this doesn’t follow the normal architecture rules. The sidebar is normally context specific – in my case a regular user reading a blog post will currently see nothing in it (while others will see the About and the Ads.

Other candy

Grid and baseline

The page is set to a 7 unit grid, with units 60px wide with a 10px gutter in between. It’s also set to a baseline height of 18px that is respected throughout the page. Images and other non-text blocks on the page are corrected with JavaScript to a half of the unit (9px).

Links

The links bar will try to retrieve the favicon of the link – if it succeeds it will use it instead of the default icon.

Maps

If you click on the Google Maps link in the About section they will open as small inline maps with a link to open them in a new window.

Yet to be done

You might have noticed that post categories are nowhere to be found. I didn’t forget them I just found out that I’ve changed my categorizing pattern and had to rethink the display. I also wanted to add the Elsewhere section with links to or even content from other pages where pieces of me reside (Twitter, Flickr, Marela, Pownce, Facebook, LinkedIn, del.icio.us,…). Another thing missing is the Projects and Experiments sections, I’ll tackle these in a separate post sometime in the future…

Zemified

24ur.com relaunched

Tuesday, April 1st, 2008

What we got:

What we didn’t get:,

  • yslow – >160 requests for >450k – but it takes more time to load, probably due to javascripts in the head
  • microformats – wishful thinking
  • openid – wishful thinking

What I didn’t check but I think it’s safe to say we didn’t get:

  • blogs compatibility
  • screen saver for banners

Another thing we lost in the transition is the TV guide. I don’t know where they lost it but you can get it here.

Zemified

Relaunching…

Friday, March 28th, 2008

the webSource: ShutterstockA big Slovenian media house is announcing a relaunch of the biggest Slovenian web page (according to Alexa). Since they own two TV channels they’re advertising it with a short commercial that shows a glimpse of the new design. Another hint is a very very small, almost unreadable banner on their front page which “reads e-volution / evolution continues / next stage in [4] days”. What I want to know is whether it is to be an evolution in technology. That’s why I’ll list a few things I’d want if I was the client:

Semantic use of HTML (tableless layout)

The current page sports a fat table layout. The time of lame browsers and the need to create such a layout has passed and using semantic HTML for all the elements is the standard now. As a fan of XHTML Strict I’d also opt for that, allowing users to use the page as a source of content.

Width

The current page is 800px wide with a skyscraper banner on the right. I think a wider default with a hint of elasticity (that would make it almost or completely useful on smaller screens) would be a great choice. If elastic is too difficult I’d opt for 960px.

YSlow

The current homepage needs more than 180 request and more than 700kB to download. It takes about 5 seconds to do all this. I’m sure that with a little smarter use of CSS and image sprites these numbers could be much lower. A smart thing would be to move the static content to static.24ur.com so the browser could download all the resources faster. I’d also want the styles to be on the top and the scrips on the bottom. And since they use their own system to deploy banners I would expect them to use WEDJE to deploy them without stopping the site.

Microformats

Since all the content on a certain page is actually a news feed I would want them to use the hAtom microformat, with hCard for people and hCalendar for events and the TV schedule also possible. There’s no need to use propriatary format in the age of interoperability.

Blogs compatibility

I don’t think they should offer blogs, but it would be nice if they had a way to embed their content into blogs commenting on the current events. It would also be great if news posts would allow trackbacks so other people could see who blogged about the news.

Screen saver

I’ve noticed lately that when they have a few heavy banners that it’s important to close the tab the page is in to get the full power out of my computer. This could easily be solved with a screen saver JavaScript that would hide all the banners when a user doesn’t interact with it for some time.

OpenID

With OpenID providers around every corner I really don’t see why anybody would want me to register on their page anymore.

Can you think of anything else?

Zemified

About forms: messing up the interface

Thursday, December 13th, 2007

When creating interfaces you often come to a point where you need to decide what your priorities are. The most obvious choice is to cater to the needs of the user. Unfortunately when doing online business sometimes this is not easy to achieve due to certain restrictions. It then becomes an economic choice.

To simplify the problem let’s say you’re designing an interface for a contact form. There are a lot of people involved in the problem and they all have their own issues they want resolved.

UX expert

Obviously the users want the form to be simple and can be filled without thinking[1]. Their ideal contact form would only consist of two or three fields. Usually this is also what you would get from the UX guys…

The simple contact form
HTML example – the simple form

Sales agent

On the other side of the form you should and most probably will have somebody that will process the form, let’s say it’s a sales agent. He’s not going to like what your UX expert mocked up because it doesn’t give him enough information about the lead[2] that is asking the question. So you’d get something like this:

The sales agent wants more data
HTML example – sales agent “enhanced”

Programmer

When a programmer sees this she won’t like it at all. She would say that this contact form really gives her no way to enter the data into the customer database. There is no way she can figure out what the name and surname are, what the postal code might be if it’s there at all and she also needs more contact information since the new database requires all customers to have an email address and a mobile phone number. You’d now have a huge contact form like this:

The programmer needs to put this into the database
HTML example – programmer “enhanced”

Marketing

Since everybody has a stake in the website and they know better you would also get the marketing crew to add some checkboxes at the bottom of the form. They might also want some other “relevant” information about the user – at least the date of birth and the gender.

The marketing and the legal kick in
HTML example – marketing “enhanced”

Legal

At the end the legal department insists that you add one more checkbox at the end of the form that “blames” the person that submits the form for everything and anything that can possibly go wrong[3]. If you’re lucky the same checkbox will be used to convey that the data will be held for at least seven years and that it can only be uses inside “the group”.

The marketing and the legal kick in
HTML example final version

Oh my!

So now you have a contact form with 15 fields (technically you have 18) instead of 3 which is a surplus of 400% (500%). It’s obvious that each step adds more information that is valuable to the company if it actually uses it. A really good company will know exactly how much the data is worth (lead conversion rates, programming fees, marketing material CTR + conversion, legal issues) and would probably stop at the first form. Others seem to think that this data is more valuable than the drop in the users submitting such forms due to the vast amount of information that needs to be given away.

They want it all

If you can, try to convince the client to use a simpler form. The legal department might help you there if you have any laws in your country that deal with retrieving customer information that is not directly needed to the action taken by the customer. You might be able to create two forms, display each to half of the users and test the responses.

Field length

If you really have to do it, there’s stuff you can do to help people. If you check the example forms you’ll see that the input fields have variable length – they try to match the amount of data that is needed to complete the form successfully. The reason for this is that the form seems easier to fill and doesn’t look like one of those insurance forms you need to fill when you had a car crash.

Simple input

Use various types of fields in a way that helps people fill them correctly. Don’t use a text field if there are only two options and don’t use a free form field for the input of a date. Use checkboxes, radios, drop-downs – they’re each good for something. You can also use advanced JavaScript controls like sliders, calendars or autocomplete but use them wisely.

Validate on the fly

You could also add JavaScript to validate the forms on the fly. By that I mean that while a user is writing in a field some visual cue (like a green tick and a red x) would tell the user the field has been correctly filled. A lot of discouragement with long forms comes from the fear of having to refill the form if a single piece of information is input invalidly.

If you want to know more about forms check out the article Web Application Form Design by Luke Wroblewski or wait for his book Web Form Design Best Practices

  1. Check Don’t Make Me Think: A Common Sense Approach to Web Usability, 2nd Edition by Steve Krug. back
  2. Sales people don’t interact with people, users or any other lifeform – they deal with leads. Read more about leads in Managing Sales Leads: Turning Cold Prospects into Hot Customers by James Obermayer back
  3. If it can go wrong, it will – Murphy’s Law back