Archive: Web Design

Create Interactive World Map with Mouseover Data for Your Website

How to add interactive world map on your website easily with Google GeoChart

A couple of months ago, while browsing online, I came across a website featuring an interactive world map displaying the organization’s locations all over the world as well as their number of employees in each location. After a little of digging, I’ve found that it’s not so hard to replicate such slick interactive world map on my site. At its core, the world map is powered by Google visualization tool, and all you need to do is do re-use their code and a little bit of tinkering to customize the map fit your purpose.

Note that this is not using the image map/hotspot — when you add a static image (of the map) and slice it into different region then add the mouseover code to create the effect.


Yahoo! Homepage Re-Design and Your Homepage Re-Design

About the new Yahoo homepage and using web analytics data to guide homepage and website redesign

Recently (October 2012), the Internet, including CNET, TechCrunch and Business Insider all had articles about the upcoming re-designed Yahoo homepage under the new CEO Marissa Mayer. The responses for the new (not launched yet) homepage were mixed; while many praised the new design for its leaner arrangement and more search-focused, others thought the changes were not significant, not worth mentioning or implementing etc. This article will give you a brief overview of the said changes, but more importantly a possible explanation for the grounds for those changes as well as the strategies that Yahoo is adopting through the new design.


Favicon Library – A Collection of Favicons

I like favicons a lot. For my sites, I even created the favicons myself However, for those who don’t have the software, the time or the ability to do it, below is a long list of favicons. Because it includes literally thousands of icons, I split the list into sub-pages making it easier to navigate. Hopefully, you can find one that fits what you need. If you see some icon that you like, you can just right click on the icon image and save it to your desktop.

Don’t know how to add favicon to your site, my old post Create Favicon For Your Website may help.


Test Your Website Usability in 10 Seconds

Don’t have a lot of time to test your website usability? How about do it in 10 seconds or less?

Website usability

I originally named this post Test Your Website Usability in 60 Seconds (influenced by title of the movie Gone in 60 Seconds). However, after thinking twice, I realized web users today (in the age of Google) no longer have that kind of patience when surfing the web. They often give a website less chance and less time; in fact, users only spend 10 seconds or less trying to search for information. If your website fails to present them what they need during this short window of time, they can just leave and click on the next result on the search result page.


Create Image Map / Hotspot in Dreamweaver CS4

How to create a clickable image map in Dreamweaver CS4/CS5

Create image map in Dreamweaver

An image map or a clickable image map is a web image containing (sub-)areas that linked to different content or web pages. Each clickable area is often referred to as a hotspot. Image map is useful in presenting and organizing information where you let web visitors see the big picture and also give them the option to click around and explore the areas of interest. An example would be something like the image on the left with four distinctive areas constructed by the puzzle pieces. Each puzzle piece may represent one of your products or services or anything else.