Category Archives: Web design



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



About the new Yahoo homepage (in the making) 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.




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.




Create a Pull-Down List/Drop-down Menu



How to turn a pull-down or drop-down list into a drop-down menu (without and easier than using Dreamweaver)

Pulldown menu

I have another short and pretty popular post about how to Create a Drop-down Menu with Dreamweaver. The drop-down menu discussed in that post is different from the pull-down menu mentioned here although most of the times people use the terms “drop-down” and “pull-down” interchangeably. The menu we are talking about here is done by using the <select> and <option> tags and looks like the thumbnail on the left.




Website Maintenance Tools



Want to do the website maintenance yourself? Here are some basic tools you need


DIY - Website maintenance

There are a lot of good HTML tutorials online from beginning to intermediate and advanced levels. You can find almost everything about HTML and other web design coding languages at www.w3schools.com. This article and the followings, however, only aim to help you gain some fundamental knowledge of essential tools and HTML basics – not enough to build a whole website but perhaps enough and quickly enough to know what to use to look at an HTML page and know what’s what and to maintain the web pages by yourself.