Web International Awards

payday loan

7

NOV 2009 9

Forms. Can’t live with them. Can’t live without them.

Edward Pistachio contact form screenshot

What language does your local store clerk speak? Your own language you say. What language do the web forms you build speak? Do they speak the same language as your site's visitors? Your clerk greets you with a smile. Do your forms smile to your clients?

It is fascinating how bad web forms look and work on most sites that are out there. The problem is that they are usually on the last place on the to-do or check-up list, which is totally wrong. Let me explain why this approach is wrong. A web form is practically the clerk of a site, whether it is a simple site or a huge e-commerce website. As you have the clerk in the supermarket to handle check out, you have web forms on the web to handle all sorts of things, from contacts, to payment processing, to newsletters signups and so on. All these features inside your site are powerful tools for your business.

Not caring for your web forms is not caring for your clients! Not caring for your clients is not caring for your business!

Put yourself into your customer's shoes. From now on, you will have to build web forms accordingly, because better web forms will attract more prospects, which will end up in more sales, and better business. This sounds great given the financial crysis that has got many businesses bankrupt.

This article will cover all you will need in order to create useful, beautiful forms. The first part will handle the theoretical part, describing different scenarios and structures web forms could have. The second part will cover the XHTML / CSS implementation of all forms, and the last part will cover the validation and processing of the forms.

CONTINUE READING

5

NOV 2009 17

Showcase of beautiful horizontal scrolling websites

We just published a great interview about horizontal websites in which Tyler Finck has shared his knowledge and thoughts with us. Keeping that topic, today we are showcasing 25 26 27 28 gorgeous websites that don't make you scroll down, but aside.

Blue Vertigo

Blue Vertigo website screenshot

Caffe Digital

Caffe Digital screenshot

CSS Zen Garden - ex 1

CSS Zen Garden website screenshot

CSS Zen Garden - ex 2

CSS Zen Garden website screenshot

CSS Zen Garden - ex 3

CSS Zen Garden website screenshot

ctrl+N

ctrl+N website screenshot

Ciber Voluntarios[added on 6th NOV 09]

Ciber Voluntarios website screenshot

Dean Oakley

Dean Oakley website screenshot

CONTINUE READING

28

OCT 2009 3

Awesome interview with Tyler Finck, horizontal websites enthousiast and developer

Tyler Finck's website screenshot

Webia: Hello Tyler. Tell us something about yourself and your background?

Tyler: I grew up outside Portland, Maine (USA) in an environment that promoted creativity: arts, crafts, music, space to explore. I left Maine to pursue a film degree which I received from Ithaca College, New York (USA). However, I ended up enjoying the fine arts - such as drawing, designing or music - more than cinema. I did pick up a basic web development class along the way which started with notepad HTML building and concluded with Dreamweaver rollover buttons. From that point forward, everything I learned technically I picked up on my own or by watching someone better do it. Creatively I've been continually inspired by music and analog design though I still appreciate a wonderful website.

Webia: You grew up in a creative environment. Does thinking back to those days help your inspiration or were those days just the kick you needed to pursue a creative career?

Tyler: Those days were pretty special but at the same time I was learning so much in the process, whether it was structured or not. While I'm still learning now I think less about "how" to get something to look or feel the way I want. I definitely think back to those times for inspiration, for "why" my work looks or feels the way it does.

Webia: You're inspired by analog design. Are there any galleries you go trough in search of inspiration? Offline or online.

Tyler: There aren't any places I turn to but rather two completely different offline sources: my son and music. With a four year-old I'm constantly reminded to look at things from a younger, simpler perspective. That has allowed me to relax a bit as a designer and artist. Music has a huge impact on my visual world, both listening to it and creating it. I'm still really inspired by what design accompanies musicians, whether it is album art, hard copy or electronic, concert posters or videos from YouTube, Facebook, Vimeo or wherever bands are posting them.

gavincastleton.com screenshot

Webia: Your site Sursly and Gavin's are quite unique. Their navigation systems are unique. Tell us about how you came up with the idea of such a navigation system.

Tyler: I had seen a lot of vertical smooth scrolling websites and while I loved them, I just wanted to move sideways. I stumbled upon The Horizontal Way and realized that I could have a little fun during that transition between "frames". I developed my site about 6 months before Gavin's site, so I learned a lot in the process. His site uses a different script that actually allows for diagonal scrolling, vertical and horizontal. It was developed by the folks at ScripterLative and works differently than similar scripts. I actually tried to get in touch with those site developers, with no results unfortunately, because a friend and I modified the script to center the target destination horizontally in the browser.

CONTINUE READING

26

OCT 2009 0

Improve your forgot password forms

girl on steps thinking

Sooner or later, you will forget your password for that one site you haven't used in ages. When that happens, you'll have trouble even recalling what email address you used to register. Happily, you know your username, hit forgot password, and then you get that crazy message that says that the new password was sent to the email address on file. But which email address is it? You have no clues whatsoever.

There are a number of solutions for such an issue. One would be adding a forgot email form that asks you some personal information available in your account, so that you can prove you are indeed... yourself. This won't really work as it would require the user to input more unnecessary information upon registration. This results in bigger forms and lower conversion rates.

A second option would be using the email address to identify the user that requests a new password. Yet again, this isn't perfect as one may have multiple addresses and bad memory. I wouldn't want to go trough my 20 (just a number) email addresses only to figure out the last one I try was the one used with this site.

The perfect solution

I think the best way to fix these problems would be by using either one of the username and email address fields, or perhaps both of them. If one doesn't remember the email address, but knows the username, the form would respond to something like: your new password has been sent to partly**********@********visible.mail. Now when you see part of your email address over there, you know where to look for a new password.

I hope you enjoyed this article. If you have any other solutions, please share them using the comments. You can also stay updated to upcoming articles via the rss feed.

23

OCT 2009 0

How to build a navigation menu with jQuery, with progressive enhancements

jQuery awesome menu screenshot

I just published a new tutorial over Freelancer Magazine. The tutorial covers building a menu with lists, styling them and applying some jQuery goodness to make it shine. Here's how you can build an awesome navigation menu with jQuery. Please note that this is the first part of a two part tutorial which will help you build a complex menu.

19

OCT 2009 8

Javascript DOs and DONTs. Complete with 17 examples from real web

I've talked about accessibility a couple of times, especially when the main technology used to build a site was flash. You can check the first and the second flash degradation articles before reading this one. In this article I will cover some DOs and DONTs with regard to javascript enhanced websites.

There's only around 5% of internet users which do not have javascript turned on, but that doesn't mean you should disregard them and create a beautifully working site with javascript which fails completely if javascript is not available.

In order to fully understand what I am talking about, you should visit the sites showcased in this article, view them with javascript on, then turn off javascript and refresh to see the difference. Some sites, as you'll see, do a better job then others when it comes to working properly without javascript. All these sites are impressive if javascript is on, but may be completely useless if javascript is off.

Really good examples of javascript enhanced sites

Helloewy

loewy.com screenshot

Helloewy is the blog of Loewy, a NY web development company. They created an accordion for the entire posts structure of the blog which works quite well. I've seen many accordions across the web, but this one's the first one that also automatically scrolls your page and adjusts its position accordingly to the tab you just clicked. The best thing is that with javascript off, there's no accordion, but all the content is there in the exact layout. It's just that it is all expanded, which doesn't bother me - the what is javascript user? - at all.

Youlove

youlove.us/one screenshot

Youlove's older version of the site was bundled with awesome transparencies, animations, sliders and scrollers which resulted in a visual aesthetic that took your breath away. The new version is similar, but for me, its not that bright as the previous one. With javascript off, that first version gave nothing up in terms of usability and available content. It just got rid of animations, sliders and scrollers. Transparency was preserved as it was built using CSS not javascript. Awesome website!

Alexandru Cohaniuc

alexcohaniuc.com screenshot

Alex's website is similar to the first one presented just before. It also uses an accordion to group his portfolio on categories, all tabs beeing expanded if javascript is off. It is a one page website, and the little javascript tricks add some spices to its design and make it beautiful.

TEDx Bucharest

tedxbucharest.com screenshot

TEDx Bucharest has and interesting and original concept in terms of layout, structure and navigation. Funny thing is it uses javascript for a small amount of the website, which is flying in a few thumbnails on the homepage / guests page, and to create some sort of a tooltip while hovering those thumbnails. Besides the flying in effect, the strange tooltip could have been easily created with some tricky css. The important point here is that with javascript off all functionalities are preserved. Nothing too extraordinary, but the concept and progressive enhancement cannot be disregarded.

The full article will contain more example of website that do a bad job when using javascript, and some who are right on the edge of falling in the same category, but are not quite there yet.

CONTINUE READING

15

OCT 2009 0

Better home link buttons (4)

This is the fourth article in a series that showcases some very well thought out buttons to link the home page from within the site. You may check the first, second and the third articles on the subject or you can simply check out the following home button of Pro Blog Design.

Pro Blog Design's logo screenshot

I hope you enjoyed this article. Let me know what you think about it in the comments. If you liked this one, you can stay updated to upcoming articles via the rss feed.

14

OCT 2009 0

How to waste 1.000.000 Euros on TV spots!

land of choice key phrase search on Google screenshot

I waited quite some time to publish this post just because I wanted to see if some SEO will be done for this huge ad campaign on Eurosport. I am talking about a recent publicity campaign the Romanian Government contracted on Eurosport. It all started at the end of May this year, during Roland Garros. The Government has contracted some company to create a few TV ads, and then signed a contract with Eurosport to run them more than 1000 times. I don't know the costs of the actual ads, but I do know the costs of running them in prime time on Eurosport accross the entire European Union. 1 Million Euros. That is quite a lot compared to Croatia running almost as much ads as Romania on the same TV channel for half the money.

Spent 1.000.000 on TV ads to raise awareness on your country and slogan!

The most important aspect, totally neglected by the Government, was what to do next when the ads are finished. Seeing over and over again a TV ad with one distinct phrase: "Land of choice", tying that up to beautiful landscapes, architecture and events makes you want to know where is the so called "Land of choice" and how can you get there!

This is where the Government had a huge flaw in their thinking. Their campaign site for Land of choice is not optimized for search engines. In fact, "Land of choice" key phrase doesn't show up on the site once. I am not sure about this, but I think the first backlink with the text "Land of choice" is the one I just posted above in this post.

Conclusion

Basically, Romania spent 1 million Euros for a TV campaign that brought no tourists because they had a hard time identifying where "Land of choice" is, and the main fault for that is the fact that if you search for this key phrase on Google you end up in Croatia! Such a complete waste of money, but hands down for entrepreneurs in Croatia who picked up on the slogan ran on TV and incorporated it into their sites, their offers, their business!

12

OCT 2009 3

Improve iPhone’s UX with custom TLD

iPhone keyboard original, screnshot

I think the iPhone's user experience is the best I've ever come across. Everything seems polished, and with each new OS update they refine it even more. I do love how the keyboard changes from landscape mode to portrait mode. I do love how the keyboard changes its contents based on the application you're currently using.

However, I do not like the hot TLD key in Safari. While typing in the address bar the bottom row of the keyboard contains the hotlink for symbol keys, point (.) key, forward slash (/) key, .com hotlink key for TLDs and the Go button. Clicking the .com key will input in the address bar the full tld, while clicking and holding will reveal additional TLDs to select from. This is the part I don't really like and the one that can be improved. The additional TLDs provided are .net, .edu, .org and the traditional .com that is easily accessible. I don't remember ever going to a .edu site on my iPhone. I do visit quite a lot of Romanian sites, ending in .ro TLD.

What I'd love for the iPhone to do is to take note of the sites I visit and their TLDs and display instead of the current .com the TLD most frequently used, and the other three ones revealed after clicking and holding the primary TLD button to be the next ones in frequency of usage. Did you hear that Steve? The next image is self explanatory.

iPhone keyboard modified, screenshot

Let me know what you think about the idea in the comments section just below. If you liked this article you can subscribe to the full content rss feed and stay updated as we post new information.

28

SEP 2009 0

Follow us on Twitter

We have added a new way for you to track our articles, via Twitter. Unfortunately webia was taken, so we had to go webia_info for our account. There's a huge icon in the sidebar of the site with a direct link to our Twitter account. Stay tooned!

Page 6 of 11« First...45678...Last »