When I was building my portfolio page a few weeks ago, I came up with an idea for a side-scrolling page. The idea is basically, you click on an arrow and the content slides to the left or right. Cool idea, but I couldn’t wrap my head around how to get the CSS to work.

Shortly after I figured out how to get it all to work I learned that my unique idea wasn’t all that unique after all. Its still a great effect, and over the last few days I have seen a lot of people asking how to do it on various forums so it makes for a good tutorial.

When I originally started this article I was planning on using just the ASP.NET Ajax framework because that is what I was using for my latest project. However, once I got it up and running I was a bit disappointed in the performance of the animation. That is when I began hunting for another way to do it. By the end of my search I had delved in and created a side scroller using 3 different frameworks: ASP.NET Ajax, scriptaculous, and MooTools. All of them “get the job done”, but I learned that each have their own advantages and disadvantages.

Over the next few days I will be going over these different frameworks and explaining what I liked and didn’t like about each one. Each will have their own demo so you can see how the finished app looks and feels, and in the end I will include a link on where you can download all the pages I made for the demos. Read the rest of this entry »

Now here is something interesting. ClickHeat is a free tool that you can install on your own server to track where your users are clicking on your sites.

Now for a blog, this is a no brainer (assuming your host will allow it to be installed) because you always want to see where your traffic is for ads or even just to know where the best place to put your articles are. However, thinking bigger, this could be a valuable tool for just about any website.

Most people design in a vacuum. In other words, they build something they like…the client sees it, thinks it is the greatest thing since Elvis, and you put it online. The customer never sees it until it is live. What if they don’t like it? What if they are focusing on a different part of the site than you expected them too?

If you use a tool like ClickHeat, then you can see what is working and what isn’t and make the adjustments that make the most sense. Sounds good to me.

Now this isn’t the only tool out there that does this sort of thing. Crazy Egg does something very similar, except they do it online and it has a price tag once your site is rockin’ (over 5,000 hits in a given time period).

Diligint is another option. This one isn’t free either (it costs a one time $67), but it is installed on your server just like ClickHeat.

Whichever way you go, knowing what your users are doing is always helpful. If you can do that for free, then all the better.

Here I was minding my own business wandering around the web when BAM! Ajaxian smacks me with a new framework called Responder. Since I love me some frameworks, I had to go and see what this one was all about.

Basically Responder a javascript framework that is a very clean way to develop things like an in place editor. It combines everyday HTML, CSS, and custom javascript to enable you to do things on the page. When you see the demo on the link at the top you will get a feel for what I am talking about. It just feels…clean.

Not the most technical way of describing it…here is a better description from the author:

Responder aims to help you be more productive in front-end programming that shares in the same kind of ‘good design’ practices that we expect on the back-end; in the same way that we think about models, templates and controllers when writing a web application, we need to have an effective and consistent path to follow when building the user interface.

The author hooks it into Ruby on Rails, but since it is pure javascript, it can be used with any server-side language like PHP, or .NET.

Definitely something I would like to try out on my next project. Let me know if you give it a whirl.

So on the site I am working on, I need some popups. I have used Lightbox before and it works wonderfully, but I wanted to try something new this time. Since I was already knee-deep in the ASP.NET Ajax framework, I figured I might as well try their ModalPopupExtender and see how that works.

Its pretty simple to get a popup to show up, but I wanted something a little prettier than the standard format of a big rectangle. Maybe some rounded corners? As it just so happens…there is a RoundedCornersExtender in the toolkit. So I figured if I put those two together I would get one sexy popup. It wasn’t quite that simple…

Read the rest of this entry »

So I am building a new site (which I will talk about in detail in a later article), and as usual, I wanted to play around with some stuff I haven’t seen before.

So the tool of choice this time was the Microsoft ASP.NET Ajax AnimationExtender. Now, unlike the other extenders I have talked about, the AnimationExtender (or AEx as I will call it from now on) is not just a control that you flop down on your page and you are done.

Instead, the AEx is kinda like a framework that you can play with. The only problem is the documentation seems to be written for people who already know how to use it. Because the Ajax Toolkit is an add-on to Visual Studio rather than an integrated part, the documentation is a bit light. What I really would have liked was a basic overview on the tool and how it works. Just something to give me a push in the right direction. Since I couldn’t find that anywhere, and I know that there are a lot of people who are itchin’ to give this thing a try, I figured I could write the overview I couldn’t find.

Read the rest of this entry »

So I was wandering around the web today and I found a couple of cool little scripts that make the daunting process of making web based forms pretty a little less so.

Now, if you don’t want to develop forms at all (but still want something pretty), you can always use something like Wufoo, Icebrrg, or Jotform.

However, if you want to get your dev on, making a form can be quite a challenge, but nowadays it doesn’t have to be. These two libraries aren’t new, but they are new to me so I thought I would share.

Read the rest of this entry »

Yesterday, I began talking about the ASP.NET AJAX framework and went over the basics of the UpdatePanel. If you are simply wanting a “no refreshing” website, then that is basically all you need to know.

However, if you are wanting to use some of the cool client enriching doodads like animation, accordions or draggable lists, then you need to employ the Toolkit. That is the subject of today’s article.

Oops
Before I go into the meat of today’s article, I want to correct an oversight from yesterday. I forgot to mention an important piece of the whole ajax.net puzzle and that is the ScriptManager. In order for any of the new ajax enabled .NET controls to work you have to start the page out with this:

<asp :ScriptManager ID="IDGoesHere" runat="server" />

Basically, this is how you tell .NET to load up the javascript files that run things behind the scenes. Simple, but important. Ok…on with the show.

Read the rest of this entry »

As readers of the site know, I like to monkey around from time to time with various UI frameworks. Last month I ran a 3 part series on the YUI that was really well received (thanks!), and continues to be some of the most visited articles on the site (I even have a postback from Yahoo!…kinda cool).

To continue with that success, I bring you a series on ASP.NET AJAX. In the next few articles I will be breaking down the framework and provide some examples of how I used it while building a site for a client. Keep in mind, that this series won’t be able to cover everything, but it will give enough detail so you will know how to tackle something that isn’t directly covered here.

So lets get started shall we?

Read the rest of this entry »

Last week I started a new section called Design Breakdown. This week I am pleased to announce the next “new thing” for the site, Designer Interviews.

The idea of having an interview is to get the thoughts of the true professionals out there and take their pulse on the various topics of the day. Today’s interview is with Daniel Mall (www.danielmall.com). He is a prolific designer and has worked for some of the biggest names on the web.

So without further ado…here is the interview. Read the rest of this entry »

So if you read my article yesterday you might be a bit confused about this one. Why would someone who doesn’t get the whole reboot thing, have a post about the best reboot sites?

Well, I am glad you asked. Jon responded to my request for someone to explain the whole reboot thing. Here was his comment:

it’s a great way to get a lot of free advertisment if you do a good job. like a trade show, people show up because they know they’ll have access to a lot of people that are tooling about, specifically looking for something to get excited about.

internet foot trafic

That is a great answer, and made me realize that the reboot is kinda like a contest, where the prize is getting traffic to your site because of your new design. So I figured today that I would do my part for the community and give a little traffic to those sites that I liked for one reason or another.

So here we go, after looking through the vast majority of the sites from the two reboot sites, here are the ones that I liked the most (in no particular order).

Read the rest of this entry »