Building an Awesome Navigation Menu with jQuery: Part 2

This is the second part of a two-part series that will help you build a complex sliding menu, enhanced with modal windows. Click here to read Part 1 of Building an Awesome Navigation Menu with jQuery

This second part will cover building a modal window and coding its behavior. If you don’t know what I already explained, please go back to the first article here and come back once you finish that one. However, if XHTML, CSS and jQuery are your friends, you may pick things up as we go, so just go ahead and read this part of the tutorial.

Let me remind you the concept we described in the previous article. We have a horizontal menu with a few categories. Each category has multiple subcategories and each such subcategory may contain a random number of products. For easier and faster movement of users thorough the site, we won’t reload the page once a subcategory is clicked. Instead, we will display all products in a modal window.

Here’s a screenshot of the menu and one simple modal window.

How does the modal work?

Read more

Building an Awesome Navigation Menu with jQuery: Part 1

Do you need to build a navigation interface that has to handle hundreds of product links? All grouped in categories, subcategories? Perhaps even containing thumbnails? If the answer is yes, here’s a usability path to avoid :

1. select categories, wait for a page to load
2. select a subcategory, wait for another page to load
3. check out products
4. click to go to desired product

The typical web user only wants to click once or twice to get to the product they want. And if clicks are unavoidable, make sure page loads are minimized! The more clicks and the more page loading they have to go through, the higher the risk they will get lost and never come back to your site. The good news is that you can achieve a good navigation menu that reduces page reloads.

This article is an in-depth tutorial on how you can achieve an expandable navigation menu using valid xhtml coding, valid css and a bit of javascript.
Read more

A Recommendation Engine for Your Next eCommerce Project

Internet giant Amazon.com popularized the product recommendation engine more than a decade ago, by creating a system that suggests items to customers based on what they, and others like them, had previously purchased or viewed. That deep level of personalization is a major factor in the company’s success today.

In 2009, Netflix awarded a $1 million USD contest prize to researchers who could significantly improve their proprietary recommendation engine. In theory, the more Netflix DVDs that customers add to their watch list, the longer that subscriber will remain with the service, since new movies will just keep coming. The prize may seem hefty, but Netflix was so impressed with the results that they granted the prize and immediately announce that there would be a sequel to the recommendation competition.

So how can a freelance web developer implement an enterprise-quality recommendation engine for your smaller e-retail clients? You may think that you’d have a tough time competing with Amazon or Netflix on functionality. However, low-priced service providers are now focused on enabling that process of discovery for small-site shoppers. These engines have low monthly costs, can be easily implemented in an afternoon, and work on the idea that you need to incorporate behavioral targeting in addition to monitoring a customer’s previous purchases.

Strands Recommender provides one of the low-cost recommendation engine options. Their engine suggests products of interest based on a specific customer’s purchases, visits, searches, wish lists, and other behavior. The system is quite flexible as well, with back-end capability to configure your recommendation display widgets. The retailer can also create rules and product filters for each widget, where results can be previewed prior to being applied to the site.

Click for more detailed information on Strands’ eCommerce solutions. They can help make your eCommerce clients successful, and strengthen your site proposals by creating additional ROI.

Usability Tips: How to Properly Handle Images in your Site

One of the most important aspects of the overall feel of a website comes from the pictures that lie within it. It is great that you can provide great layouts, interesting and enhanced navigation, valuable content, but all of the above will be worthless if the pictures you insert next to your content are:

• of awful, low quality
• displayed in the worst way possible

Read more

The Ultimate Navigation with CSS level 3

Please note that this article is targeted at web designers and developers who are well versed in xHTML/CSS.

Update: A demo of this method can be found here: The Ultimate Navigation CSS Level3 Demo – by Bogdan Pop

One of the toughest tasks in the process of developing your web applications or web sites is choosing the best navigation system. Let’s face it, the easier people get around in your website, the more delighted they are.  With this in mind, you have been reading articles on user interface design, layout, and by now you are  implementing breadcrumb trails and other list handling techniques, such as the ones described in taming lists article at A List Apart. Everything evolved and now you implement drop down menus. But does this really work on big websites?

Read more

How To Make Your Portfolio Better And Get More Clients: Part 2

In the last part of this topic, I covered ways to improve your portfolio. Usability was the main issue at hand, and I presented many ways in which you could make your portfolio user-friendly, and therefore attract more potential client interest. In the second part of this topic, I decide to go deep into the realm of marketing; and obviously in particular, the marketing of your portfolio.

Now, there are an abundance of ways for freelancers to market their portfolio in order to get more exposure and ultimately get better clients. I’ve noticed that freelancers in particular don’t take time out of their usual schedule to come up with new, creative ideas on how to promote their portfolio. A lot of freelancers don’t dedicate nearly as enough time as they should marketing and they don’t do it right. Well, here’s a list on ways in which you can effectively market your portfolio (also included are ways you could directly land more clients as well).

Read more

The Return of Table-Based Layout (Well, Sort Of)

This is a guest article written by Bogdan Pop, a young Romanian entrepreneur who runs WebRaptor. He loves web programming and design and has a passion for standards and SEO. He relaxes by taking photos every once in a while and by mixing french electronic music.

Please note that this article is targeted at those of us who are more code-centric and well versed in xHTML/CSS.

How to build “table based” layouts with CSS Level 2

No quirks or tricks and it’s all standard compliant. Developers need free time, and now they can have it.

How many of you have lost countless hours while developing the perfect layout for your websites? How many have lost in fact money because of the extra time needed to complete a job! How many of you “have gone crazy” because of Internet Explorer and it’s incompatibility with standards based markup. Well, all of you need to have a quick break and celebrate. All those days will soon be over.

Read more