Skip navigation

Ajax stands for Asynchronous JavaScript and XML. It is a way of providing a dynamic web page without the need to constantly refresh it. It employs a combination of JavaScript, XML, XMLHttpRequest, HTML and CSS, among others. Ajax does away with the familiar, traditional process of viewing web pages: click on something, then wait a second or more for the page to change. Instead, it creates more interactivity and responsiveness, like desktop applications do. It can update portions of a page without refreshing it all. Ajax can request small pieces of  information from the server instead of the whole page at once. That saves a lot of time.

Ajax is based on open standards, which makes it work well across many browsers. It is cross-browser and cross-platform compatible. It’s possible to build Ajax-based rich Internet applications on most modern browsers. People like having options, so not being limited to using a certain type of browser is a very important thing for a developer. By being based on standards that many people are familiar with already, the learning curve to transition to building rich Ajax applications is not that big. Ajax also works well when it is combined with Flash.

Ajax helps to improve usability. It provides a better experience for the user. It feels as if any changes that happen are instantaneous. Good user interfaces make things get done quicker. In this information-rich age, efficiency is key.

Many successful websites currently use Ajax technology. Google Maps is a considered one of the most impressive ones. Other popular services from Google, such as Gmail, Reader, Suggest also use Ajax. In Gmail, Ajax takes care of spell-check, auto save and checking for new emails, among other things. Flickr uses Ajax too, and so does Meebo, a popular web-based IM client.

Some things that Ajax could be used for are browser-based chat applications or instantaneous form validation – done while user is typing. It could be used for smooth navigation, contracting and expanding them without the need to load a new page.

Ajax is mobile-friendly. Pocket PCs and smartphones support it. It can be easily predicted that Ajax will play a key role in enhancing mobile user experience.

In the end, Ajax sounds like a very useful thing to know. It is very powerful, as evidenced by the success and popularity of Google Maps, Facebook, Gmail, etc. By being based on technologies that are already sort of familiar to people, it encourages people to learn it. Trying to program something in Ajax isn’t going to feel like learning a completely foreign language. That, combined with how much can be done using with, makes people excited about working with it.

Advertisements

Open source technology is very useful. It gives people access to so much more material and widens the possibilities of any project. Its first benefit is that it’s free. That encourages people to test software or scripts out. If it turns out it’s something they don’t like or not what they really need, it’s easy to delete it and move on to someone else. No money has been invested, nothing lost – except a little bit of time.  Another encouraging thing is that often many great people try and improve the open source scripts and software, which is better for the end user. The public’s collective knowledge is really immense.

People like not being limited in what they can do. A recent article notes that open source developers prefer working for the Android and not the iPhone and that more projects are built for the Android than its competitor. The article states: “Android likely gained in popularity in 2009 thanks in part to its open source nature and the fact it has the support of a large handset vendors and operators.”

There are great programs that use open source technology for Mac and Windows computers. They are alternatives to paid programs and sometimes they are even better. Thunderbird, for example, is a viable substitute for Microsoft Outlook. VLC is an open-source media player. I’ve had the experience on trying to view a video with Quicktime and it wouldn’t play right, but it would work just fine on VLC, without prompting me to install a bunch of supplements or codecs.

Personally, using open source things gives me confidence in the product. I like free things. It’s great knowing that so many resources are made available by talented programmers to help make our lives easier. While it is rewarding and impressive to come up with your own script to use in a project, for example, sometimes the cost may outweigh the benefit. It may result in many hours being lost trying to figure out how to do something. If someone else already did the work, why not save time and use their knowledge instead? There’s nothing wrong with saving time.

Creatively done interactive content enhances a website. It turns a simple, one-dimensional site into an environment that a visitor can play with. When it’s really fun or clever, people will return to it again and again. It might even be something worth sharing with friends through email or IM so that other people can also see it. There are many amazing sites that implement an interactive element well. Here are just two of them.

We Choose the Moon (www.wechoosethemoon.org) is a spectacular Apollo 11 mission site brought to life by The Martin Agency and John F. Kennedy Presidential Library and Museum. Through rich audio and visuals, it recreates the moon landing in front of the audience – you.

The site was launched on July 10, 2009, exactly 40 years to the minute after the original mission took place. The real-time re-enactment spanned 4 days and enticed people to stay at the website, look at images and videos and check back often for updates. The actual continuous NASA transmissions served as background sound. It added an impressive sense of reality and made people want to stay on the site to just listen. Some people on Discover Magazine blog mentioned minimizing the website and letting the audio run in the background while they were doing other things.

The site is divided into 11 stages that guide you through the mission, starting from the launch from Earth, through landing on the moon, to eventual return. Each stage has a mission tracker, which lists some vital stats and a way to skip through all the stages. There is also a status window and a short transmission transcript that keeps track of important parts of the audio. Animations show Apollo 11’s journey through space. Videos and images of the original mission add another layer of authenticity. After going through all the missions, the viewer gets a pdf certificate they can download and print.

Hailed as the best of show in HOW’s Interactive Design Awards, We Choose the Moon is something more than just an impressive Flash site. It is a lovingly-crafted user experience. It lets the viewer be immersed in a story and forget they are visiting a website. A full-screen option certainly helps to get rid of distractions, like browser window edges and computer’s task bar. The user is given several choices: to either make the website full-screen or no, to keep background sound or to turn it off, etc. This is important, since people don’t like being forced into things and sometimes sites automatically make those choices for the user. That can be irritating.

The Red Interactive Agency (www.ff0000.com) uses interactivity to promote its services. It’s a Flash site that entices users to play and explore it as soon as they enter. Visitors can customize their own characters and chat with others, but they don’t have to – it’s optional. While being a fun environment that people will want to revisit, it also showcases the agency’s talent.


The Red Interactive Agency, as expected, specializes in interactivity. Giving a sample of the kind of work they are capable of is great. It is impressive already, even if a person never even ends up on clicking on any of the navigation.  It’s also an example of a site that uses Flash with a clear purpose in mind.

direction 1 – brown and pink

This design is made with a warm, feminine mood in mind. It is delicate, set in pinks and browns. It is targetted at women, so it could alienate a male visitor. It has two layers of navigation: main and secondary. While useful for a site with a lot of content that needs to be organized, it would be unnecessary for a small simple site.  There is a blank space on the right side of the design that was planned for extra content, which content should be put in to show how it would be organized. The logotype, while clear and simple, might benefit from another design element, like an icon.

direction 2 – light blue and navy

This layout is set in light grays, blues and navy. It is more neutral and unisex than the previous one. While staying elegant and wedding-themed, it uses a color palette that isn’t necessarily girly. The design has only one layer of navigation, which would be suited for a small simple site. There’s a limited amount of navigation links that can fit in the space provided and still look well, so it wouldn’t be suited to a big site. A shortcoming of this design is that it looks a bit generic and requires of the content to clearly show that this is a wedding boutique website.

direction 3 – light gray and pink

This design looks like a start of something nice, but something that is not completely fleshed out. Its pink-gray color scheme is delicate and neutral enough to appeal to women but not turn away men. It’s very simple and doesn’t have many graphics.

Web is constantly changing and so is the way we access it.  Not only is there a variety of browsers that people like to use, there are also mobile applications and various accessibility issues to consider. This is something designers need to stay aware of when building any websites.

Mobile web use is popular, as many people have cell phones with built-in simple browsers to allow surfing the internet. There are also, of course, smartphones – fun and useful – which are becoming more available and less costly. Mobile web is dominated by Apple’s iPhone (and iPod touch) with Google’s mobile OS Android being a close second. This article reports Apple having a 60% market share of smartphone traffic in the US as of July 2009 and 45% worldwide. Android has a nowhere near as big of an influence – 12% US, 7% worldwide. Big companies continue to push their mobile web versions while new clever startups try to break through with innovative mobile applications. Mobile web is new exciting land that many people want to claim their stake in. Augmented reality is something new that is predicted to change the way people talk about social media, and that is thanks to mobile web devices.

Another thing for designers and developers to be aware of is the importance of accessibility on the web. Not everyone is able to view our sites exactly as intended – with beautiful graphics, videos, text just at the right size to make it prettiest, etc. Users have various needs. They can simply not have or desire to use certain technologies or plugins needed to view a site in all its glory – like a Flash viewer or Javascript. They might be visually impaired and need to set text much bigger than it was intended by the designer. A screen reader might be used. A site needs to make sense and be usable, no matter how it is viewed. There are several easy things to do to make web pages easily accessible. EMMA – Extensible MultiModal Annotation project from W3C and government’s Section 508 provide guidelines to help. There are also lots of tools online that can check sites, much like CSS or HTML validators, to see if accessibility standards are met (www.cynthiasays.com is one).

Making sites with good accessibility involves logic and common sense. When providing a video, for example, one should also link to a place where a plugin or player for viewing that video can be downloaded from. A user shouldn’t have to hunt for it on the internet. Images on a site should have proper descriptive alt tags (which is also a valid HTML practice). Main content should be placed high in the HTML code, so that it can be seen (if a site is viewed plainly, without CSS) or read (by a screen reader) first.

There are plenty of helpful development tools available, which makes coding beautiful and clear websites easier. When they are integrated into a browser, they make it easy to spot and and fix errors. Here’s a useful list of handy Firefox extensions, including Web Developer and FireBug, which are universally liked by many.

There is a lot to keep in mind when designing for the web. Not everybody views it the same way and many people will view it much differently than the designer did when creating it. In the end, it still has to look good, no matter how it is looked at.

More links:

Firefox extensions I couldn’t live without

Firebug – web development extension for Firefox

Every successful designer realizes the importance of a well-crafted, professional, off- and online persona. That involves having a polished resume and c.v., business cards, and a portfolio of creative work.

Research and planning are the first steps to take before designing anything. Not only is it inspirational but it also provides insight into how other people approach the task. Inspiration can come directly from seeing the kind of work you are doing: looking at resumes when writing a resume, portfolios when creating a portfolio, and so on. The advantage is that it lets you identify trends, common elements, how people structure their work. Seeing what the competition is doing is great. Let’s take online portfolios, for example. The fun and creative sites as well as the unexciting ones are fairly consistent in their sections, with an about section, project list, a contact form, client list. There navigation is usually at the top or left. Knowing what’s been done gives you an opportunity to find a fresh approach and be a little unique. However, it wouldn’t be wise to try to be very different from the established norm. Conventions are popular for a reason.

This article explores the idea of consistency and understanding user expectations. People already have an idea of what should be in a site and when it is not there, they get frustrated. That applies to content, language and layout. A personal portfolio site is expected to have online, clickable samples of work. If its owner simply compiled all of the work into a huge multi-paged pdf to download instead, it would be seen as rather inconvenient. If a contact page didn’t have a form or a contact email available but just a phone number or mailing address – that would turn people off. It’s basic content that is so convenient that people expect to be available. If it’s not there, it’s an annoyance. Adhering to basic usability standards in design is helpful as well. When visiting a website, you look for certain key elements in certain places. Privacy policy and Terms of Service are usually at the very bottom. Breadcrumbs navigation is at the top, below the main and secondary navigation. If you want to break away from established conventions in your design, make sure that there is a good reason for it. There’s a small showcase of creative portfolio designs here to see.

Aside from using amazing competitors’ work as inspiration, there are also other ways to spark the imagination. Magazine spreads can be great to look at, as are lists of great typography and calligraphy. Flipping through an art history book or seeing some museum exhibits can be a good experience. There are so many sources of great art and design work from many different fields.
The other thing to keep in mind while designing things for yourself is to keep different pieces related to each other. Business cards, portfolio, resume and c.v. – and any other things designed for oneself – should all look good together. They are all part of one package and therefore have to be consistent.

More reading:

Don’t Make Me Think! A Common Sense Approach to Web Usability – Steve Krug (book) a bit more information on usability, conventions and how people use the web.

“The best websites are useful and ugly” touts this article. It lists eBay, Google and Craig’s List, among others, as perfect examples of wildly successful and aesthetically unappealing websites. Beautiful and useful are not mutually exclusive terms, however.

There are several articles on the web that showcase selections of ugly but successful websites. They also tend to make a key point – that not every type of website can be ugly and yet successful anyway. A certain quality is expected of brand websites or stores selling high-quality products. In these cases, good design is employed to exude confidence and  a strong image, which assures clients of quality.

An interesting argument crops up in many posts defending ugly but successful websites: that customers trust them because they look like an average person could have made it. They are afraid of polished designs which imply that a marketing team just waiting to suck out all of the customer’s money was employed by the website’s owner. On the other hand, a non-appealing design can also turn clients away from a site. It suggests that the site owner is not serious about their company and craft if their online presence does not look polished and professional. Sometimes it may even look outdated.

Google or eBay are not successful because they are ugly and I do not believe they would be less so if they were designed more appealingly. They are successful because of their purpose, because of what they do. Content plays a huge role in making a site successful. A good design can support a good site – as long as the desire to create the loveliest, most creative site doesn’t eclipse such important concepts as user-friendliness, accessibility, functionality, etc. Everything in moderation.

A lot of careful research and planning is done by a designer before the creative work is started. A site planning guide is listed here. It’s important to begin with the basics: figuring out what is the site’s objective is. Then, the audience should be considered, because it will tremendously affect the look and feel of the resulting design. Older people and children, for example, might need bigger type to read comfortably. A site directed at high school students would have a different look and feel than one aimed at businessmen. A business-to-business website would have another aesthetic from one directed at general consumers. How visitors access the site is also something to keep in mind, since more and more access the web on their phones. Simple and clean looks better on a phone screen. If the website will have flash elements, it might also benefit from a non-flash version. And so on.

Designers should remember the purpose of the site they are designing for, first and foremost. It’s important to stay focused on making design complement the content, so that it is presented in the best way possible. The resulting work will be beautiful and functional at the same time. There is a reason why there are so many helpful articles and tutorials written by designers and for designers – to give a site the best chance at success. How something is designed is a huge component of that.

More links:
Top 10 Ugly but Highly Successful Websites
Beautiful Websites = Successful Websites?