Motigo developer blog

Adding effects to your website

Anders Toxboe — Tue, 16 Oct 2007 08:38:44 +0000

This post might be a little over the standard in terms of technicality. But then, this is a developer’s blog, so why not enlighten you. In this episode, we are going to teach you how to add very simple effects and animations to your page.

Over the last few years, the term AJAX and web 2.0 have become synonym with bleeding edge web software. Although we are not going to show you how to do AJAX, we will show you how to use some of the really nice javascript animations that are available in today’s web 2.0 world. This short tutorial DOES require that you know of some HTML and that you have put your eyes on javascript before. So let’s get this started.

We’re going to take our starting point in the Scriptaculous javascript library (which is an extension of the prototype library). The combination of Scriptaculous and Prototype is what we have used at motigo from the beginning.

We start out by having a

layer, which is a standard element in HTML. Our

looks like this:



  This is the content inside the DIV

The code above produces this: (a box with the dimensions of 200×50 pixels, a red background, white text, and an inside margin of 5 pixels)

This is the content inside the DIV

Now - we can begin to manipulate it. Notice that the ID of the DIV is my_element. That means that we can do this (with scriptaculous and prototype loaded):

Toggle blind effect
Toggle appear effect

This produces this:
Toggle blind effect
Toggle appear effect

Try to click the links and see what happens with the red box.

Pretty neat. Pretty simple!

The reason why we say return false; in the end of the onclick="" attribute, is that we don’t want to redirect the browser to the link of href="".

What allows us to do all this, is because we have Scriptaculous and Prototype loaded on this page. We have done so, first by downloading the Scriptaculous and Prototype files over on the Scriptaculous website, uploaded these files to our server, and including the following HTML code at the top of our page (inside the tag):

The downside of using Scriptaculous and Prototype is it’s large size (in kilobytes). Other smaller libraries include Dojo, MooTools, and Ext JS.

Let us know if this is too advanced, or if you would like to know more.

UPDATE: This article seems to have hit a too high level of complexity. We are sorry if all this doesn’t make much sense. The primary problem our readers have experiences is that they are not aware that they need to upload the javascript files from Scriptaculous and Prototype to their own server - and that it is those files that allow us to do the effects.

NOTICE: The effects work in the most popular browsers. Some older browsers are not supported.

Build your website from reusable components

Anders Toxboe — Tue, 09 Oct 2007 14:59:12 +0000

Building an entire new website from scratch is a large task. To ease the task, we often tend to fall back and reuse parts of old websites we have created. This is how you evolve your own look-and-feel. As we develop more and more websites, our vocabulary of possible outcomes of a website designs increase. We thus become better at building websites over time, as our over time larger design vocabulary lets us pick and choose exactly what we want. Our designs in this way become more and more refined as we develop more and more websites. Our experience grow.

We are all in the same boat! What separates us is the magnitude of our experience: the number of websites we have created. You, the reader might just have created your first website, or you might be a veteran - either way you are in quest for the same thing: to expand your design vocabulary.

Fortunately, we are all in luck. Several individuals and organizations have been jotting down their experience in website design, and put it out for free on the internet for you to use. These websites hold collections of user interface design patterns. In formal words, design pattern are:

“…recurring solutions to solve common problems…”

Source: ui-patterns.com

Jennifer Tidwell continues:

“Each of these patterns (which are more general) and techniques (more specific) are intended to help you solve design problems. They’re common problems, and there’s no point in reinventing the wheel every time you need, say, a sortable table — plenty of folks have already done it, and learned how to do it well.”

Source: Designing Interfaces

At motigo, we find design patterns extremely useful. This is why we would like you to get started using them. Why not harvest the knowledge of many experienced designers before you? Start out by checking out these sites:

UI-patterns.com
A rather new, but also rapidly updated website focusing on combining theory with practise with the goal of providing tutorials for each pattern.
Designing interfaces
A veteran in pattern libraries. The contents of this site has even been published in book form
Welie pattern collection
Perhaps the largest design pattern collection out there.
Yahoo! design pattern library
Design patterns used at Yahoo!

How have you used design patterns? And have you been using them without knowing about them?

Motigo survey results

Anders Toxboe — Tue, 18 Sep 2007 14:42:09 +0000

We recently conducted an online survey to get to know more about you, the users of motigo. Most of your answers were as we had expected, but some were also rather surprising.

It has been a great learning experience for us to get our assumptions about who you all are blown away and replaced by actual facts. The whole process of discovering who our users really are have made us all create our own new archetypical users in our minds, which has led us to launch a new persona effort. A HCI tool that we can greatly approve of.

Just for the fun of it, let me very shortly sketch one of our main archetypical users in bullet-form:

Male and 40 years old
Has his focus on developing personal and private websites with information about a specific topic
Has only little knowledge about web standards and techniques like CSS
Does not read the developer blog (Argh!!!! - not good!)

You also told us what you would most like to see in the future from motigo: Blogs and photo albums. Coming up.

And don’t worry - the lucky winners of the survey will be announced shortly and receive their prize: an iPod Shuffle.

Cool uses of the motigo calendar

Anders Toxboe — Tue, 11 Sep 2007 11:46:12 +0000

It’s always cool to see your product get used in cool and innovative ways. To encourage such behavior, we added embed-able versions of our newly launched calendar. By placing a few lines of javascript codes to your static html page, you will automatically get a very dynamic calendar shown on your page. Just like you would show an ad from google - now just with some real content

Some of our users have done a really nice job of using these small-size calendars on their page. We feel that we should give you a view into how cool your motigo calendar can look and how nice it works. Check out these pages for inspiration on how you can improve your own site with your very own calendar functionality:

Minigolf Club Classic KoÅ¡ice
Has integrated the month view quite nicely into his existing design. The calendar fits seamlessly with it’s surrounding elements.
de nieuwe sch@kel
Has both integrated a calendar RSS feed into his calendar and uses the embed-able month view to show this on his page. Very nice!
Historia de GuipÃºzcoa
Notice how well the transparent background of the calendar works perfect with the general layout of the site.
THE OZ…
Check out how nicely the agenda view and the month view work together side-by side.

We are extremely happy to see the already widespread use of our newly launched calendar - and especially that people are using it both as we planned, but also in new ways that just want us to keep on improving it.

We are looking forward for finding even more cool uses of the motigo projects in the future. Do you know of some?

Motigo survey reloaded: you can still win an iPod shuffle!

Ludovic — Fri, 24 Aug 2007 18:28:42 +0000

Due to the amazing amount of people participating in the survey (aren’t you fantastic!) we quickly reached the target we had set. To popular demand we have decided to reopen the survey so all of you who couldn’t participate can now click on the link again (in the admin_interface) and hopefully get one of the iPod shuffle we will be giving away!

You can jump there directly at my-account.
or create an account to participate! signup!

All in all the survey will be giving us a very clear picture of what you, the motigo-ers, wants to see? What product is for you the missing link to really turn motigo into a workable, practical and interesting environment. The survey will also give you some clues on what we are thinking should come next.

Indeed we know there is still quite some work to do but this is one of the many steps we will take with you. We have opened a new communication channel and we hope you will use the opportunity to reach us!

Designing events view in motigo calendars

Anders Toxboe — Wed, 15 Aug 2007 14:51:04 +0000

As we had built the recently launched motigo calendar, we quickly realized how important the events view was. You can add events to your calendar in two ways. One is subscribing to a news feed, the other is through the events overview page.

The events view is the page where all of your own events are listed (feed-events aren’t listed here, as you cannot edit them). The list provides edit links, so that you can alter the details of your already added events. So the primary purpose of the event view is to let the user browse through all of his events in a quick way, in order to find the exact event the user is looking for.

The peculiar thing about a calendar is, that you can both have events in the future and in the past. The most relevant events for the user will most likely be centered around today’s date, and not in one of the extremes: past or future. This also means that it does not make sense to sort events by their extremes (by the event with the oldest date or by the event with the most future date), but rather by the center: today.

At first we had just chosen to list the events ordered by id - that is ordered by creation time. This would put the most recent added events on top, and thus provide feedback for the user to let him know that his event has been added (as he could see his newly added event on the list). For feedback purposes, this list worked great. But if you wanted to find that specific event you to either edit or delete, the browsing through pages of events sorted by creation date was not acceptable. You could of course search for the event, but then you would need to know what the title of it was.

Ordering the events by start date does not make sense in itself either. The most relevant event is not one that starts in 2012 and not one that happened in 1995.

When looking for a specific event, you always know that it either hasn’t happened yet (in the future) or that it already happened (in the past).

Introducing today’s date as the center of the events view:

Adding today as the center means that you can know browse in two directions: either further back in the past or further ahead in the future. We therefore introduced two paginations: One for pages in the future and one for the past.

This view works much better as the most relevant events (the ones closest to now) will always be shown on the base page of the events view. You can then choose to browse toward either of the extremes (past or future).

Having to pagination directions is all nice, but if you haven’t filled your calendar up with that many events yet, you don’t want to be bothered with information about how you can browse the future or past- you just want the few events you have to be shown.

So the last thing we added was that. The fancy pagination arrows in the left margin are hidden when you just start and will get shown once you have use for them.

We also added the capability of looking up a specific date as a nice shortcut to finding the events you are exactly sure when is.

Developing software is not always straight forward, if you want to deliver a nice user experience as well. We hope that his insight into how we conduct iterative development will help you continue your progress in developing the perfect website of your own.

Launch: Motigo calendars

Anders Toxboe — Thu, 09 Aug 2007 14:57:04 +0000

We are very happy to announce the Launch of motigo calendars! It is the first stand-alone product that we have developed ourselves from scratch, and we are more than happy with the result. If you don’t have an account yet, then sign up for a free account and give it a go.

Creating the calendar has been a great example of constrained based development. With only very little time to develop the application, we had to make vital decisions on what our new application was to do and what it was not going to do. The constraints turned out to be a blessing in that it kept our heads focused on exactly what is important for our product for it to work: it has swept the unimportant nice-to-haves away from the must-haves and secured a simple and non-bloated product.

The calendar is really an ordinary calendar application with two views: an administration area that is only accessible for the owner of the calendar (a motigo user), and a public version, which is visible to everybody. The public version of the calendar would look like this.

But it is not only a web calendar. The motigo calendar has two very intersting features:

Import of RSS feeds
If you have a blog, a flickr stream, or whatever kind of web content that streams as an RSS feed, you can import it into your calendar. You can also import several feeds into your calendar in order to use it as a feed reader. The possiblities are many!
Include a small version of the calendar on your own page
If you have a homepage on your own domain - or just another domain that motigo.com, but still want dynamic content directly inside your page’s main view, then the motigo calendar will help you out. Ad dynamic calendar content directly to your page, like you would add a banner ad.

Now - enough reading - go play around with it!

New product requests?

Anders Toxboe — Thu, 28 Jun 2007 07:14:01 +0000

At motigo.com we are always thinking about what new features and what products we want to create for you. But although we have many ideas of our own, we would love to hear from you what you would fancy the most.

Would you like to have a new blog for your site, to be able to easily insert polls into your site. How about a new calendar?

The possibilities are endless!

What new products would you most like to see from motigo.com in the future?

Motigo search launched

Anders Toxboe — Mon, 25 Jun 2007 09:18:51 +0000

We just launched a new part of our site called motigo search. Hurray!

In the last few weeks, we have been in a steady stream of solid updates to the motigo website in general. We have come a long way since we started in March earlier this year.

This time we added search capabilities to motigo. The “motigo search”:http://motigo.com/search has been born.

Now you can search the web for pictures and video to reference in your blog posts or in your forum discussions. We feel that we by that have a superior product to many competitors. The search also allows your to search our “webstats”:http://webstats.motigo.com counter catalogue.

The future will call for a full motigo service search, but as we felt the described update in itself provided enough significant value to our users to stand on its own, we decided to push out the search capabilities as they are now in their early state.

Please go try it out and let us know what you think.

New account overview

Anders Toxboe — Fri, 15 Jun 2007 09:11:55 +0000

Things are really starting to get better at motigo!
We are very happy to announce the launch of the new account overview. A feature that was both widely requested, but also extremely important in bringing the motigo services together.

When we first launched motigo in the end of March this year, the most important thing for us was just to get motigo up and running. It is now - a few months later - that we can actually start to tweak motigo into being what we actually want. The new account overview and the recent “frontpage redesign”:http://devblog.motigo.com/2007/06/04/redesigning-the-frontpage-step-2/ are some of the more visual steps we have taken in this direction.

As usual, we will give you an insight into the design process.

As opposed to earlier redesigns, we actually didn’t have anything to redesign! The account overview has been non-existent until now. We wanted the new page to fulfill a list of things:

First of all, the overview should bring all motigo services together: giving an overview
The page should function as the natural “home page” - the page you always end up on when you want to do something new
We wanted as much of motigo to be accessible from only one page
We wanted to communicate the colour scheme of motigo, where each service has its own color

Our first thought was to reuse the toolboxes we have so far used for the forum/guestbook/shorturl admin pages as these had the color of the respective service in the header. The result came to look like this:

We chose to take the approach of designing everything straight and only in HTML instead of taking the usual photoshop way that many designers choose. Doing the design in HTML only gave us several benefits:

The actual interface is at the center of the attention at first. There is no spec: the interface is the spec.
An interface is not a wireframe that we can just slice up and magically transform into an HTML document. Neither is it a photoshop mockup.
Creating a mock-up of the interface in photoshop will produce a design that matches the constraints of photoshop - not the constraints of HTML. We should therefore “embrace the constraints”:http://gettingreal.37signals.com/ch03_Embrace_Constraints.php of HTML.
When we build it only in HTML, we can actually use real and live data while building the design. This helps surfacing problems that photoshop would otherwise hide
The interface is at life from start. You can click it, try it out, and feel it.
You will get something that works very soon in the design process
There is no monster integration in the end.

Although the new and colorful proposal was better than anything we had before (we didn’t have anything) - it was too much. Too colorful and tivoli like. Plus - the boxes approach to showing each service did not always line up nicely, when a user had services in one category than the other.

The next approach was to list the services in one big list and now side-by-side. We removed the colorful header of each service and give it a more settled look:

This however proved to be a little too settled. This meant that we didn’t get to indicate any of the colors of the services. So we added a little bit of color:

Again - this was too much. The final solution would be just to have a small box indicating the color of the service:

We also wanted to add several things to the overview page, so that the user would go there as a natural thing to find just the information he wanted to see. These things included basic information about the logged in user: his name and email, but also the current time in the timezone he had selected. As we have users in many different countries, setting the timezone of your account has huge importance as it will determine the time of your forums and guestbooks as well as the base time in your statistics. We also added links to often used and important documents such as FAQs, terms of service, and of course the developer blog ;-).
All this provided the necessary detail to make the Account overview feel like a real motigo home…

Along with the overview, we’ve also added a toolbox that is placed in the same spot on all admin pages, so that you can always find your way to the most important pages of motigo.com. This continuity was greatly missed in the old version of motigo, why we are relieved that we finally got it online.

We also got rid of the top bar with the list of our services, as we now have this list a more natural place: in the account overview. Instead we added a search bar that we plan on expanding to be able to do more in the near future.

We really hope that the newest updates has helped your experience of motigo.com. We are extremely happy about the release ourselves and hope that you will be as well.

Now, go enjoy the new “motigo”:http://motigo.com