Cambodia Pocket Guide

Website Development Directory Listings

Miscellaneous • Tourism • Mobile friendly


(click on thumbnails for a larger view)

This was a very interesting project. To get to the point what Cambodia Pocket Guide really wanted was a search for the perfect solution, including all the trial and errors that happen on such a journey. That’s just the way it works. It takes time, but what counts is the end result. And that, we may proudly say is superb!

When landing on the Home Page of Cambodia Pocket Guide, a visitor sees a full screen picture with search options (screenshot 1). The most prominent one being a ‘keyword’ search, but underneath are buttons to refine the search by category, city (Phnom Penh or Siem Reap) or distance from the visitors’ current location. The result of the search, we’ll explain later, first the rest of the Home Page.

When scrolling down (screenshot 2), a visitor sees options for categories (represented by icons), to go directly to a search for a certain category. Beneath that are the latest listings – displaying business logos – organized by category in so-called ‘tabs’.

And underneath that are latest articles with more in-depth information on various subjects, organized in a so-called ‘slider’ (clicking on the arrows goes through all the articles).

This is a ‘heavy’ Home Page (consider all the logos and article images that need to be loaded), but CamboDesign managed to make it load quite fast, even on mobile devices.

Back to the search results. Initially, it will display a map with all listings. As you can see on screenshot 3, many listings are ‘combined’, displaying only a number of how many listings are near that location. This is to prevent the map being overloaded with icons, where a visitor would not even be able to find the right one. Clicking on such a ‘number icon’ zooms in the map, displaying individual listings. You can also see the icons (and the colour) representing a certain category (e.g. ‘dining’, ‘shopping’, ‘travel’, etc.).

An individual listing (screenshot 4) displays the business logo, a description of the business, opening hours, maybe an extra image, contact details, and of course the exact location on the map. It also displays a button to contact the business directly via a pop-up form, and a button to ‘Get Directions‘.

The ‘Get Directions’ button is in fact the star of the website: When clicking that button, a simple form pops up where one can select a starting address (and when clicking on ‘Start from my location’ it automatically fills in the visitors current position) and presents you with a detailed route map and direction instructions (screenshot 5). Where many websites offer this service on a separate Google Maps page (where a visitor would leave the website), Cambodia Pocket Guide provides the service on the listings page itself (in other words: the visitor stays on the website; very important!).

Furthermore, the website features Articles and New Openings, which can be selected (in a so-called ‘masonry’ lay-out) by location (Phnom Penh or Siem Reap), see screenshot 6.

As the site uses visitors location details, the website has a so-called SSL-certificate installed, making the site ‘secure’ (meaning any data transfer between the visitors browser and the website is encrypted). That is not only to protect private visitors details, but Google has announced it regards ANY website with SSL-protection higher than an ‘insecure’ website.

By the way, in the footer on every page is a sign-up form for a newsletter, which Cambodia Pocket Guide manages through MailChimp. When subscribing successfully, an ‘AJAX’ message (meaning without page refresh) confirms the subscription.

Did we mention the website is mobile friendly? Oh well, we don’t really have to, as these days all websites developed by us are easily viewable on any mobile device. But just to convince you, see screenshot 7.

Visit website:

Directory Listings website Design Cambodia

Techniques & Functionalities

  • AJAX
  • CSS3
  • Directory
  • HTML5
  • jQuery
  • Location Map
  • Masonry
  • Newsletter
  • Responsive
  • Slider
  • Sophisticated Search