Screenshots
(click on thumbnails for a larger view)
ExpatLife is an online portal, combining the long-standing restaurant delivery guide Door-2-Door with up-to-date articles for expats living and working in Phnom Penh covering 17 different categories.
The old website of Door-2-Door was designed many years ago. It not only had a very outdated look & feel, it also didn’t function as intended anymore. So, a total make-over was badly needed. This was an opportunity to combine it with articles for expats in Cambodia, which were already included in the printed edition of the guide. Hence the new name: ExpatLife featuring Door-2-Door.
The Home Page features ’tiles’ of the three most important articles with a few more underneath (screenshot 1). When scrolling down, a visitor sees links to three highlighted restaurant menus and a link to a prize-draw competition. Notice how the right sidebar (with an advertisement) stays in place when scrolling down. Furthermore, the main menu also stays in place but smoothly changes into a smaller top bar, a so-called ‘sticky menu’ (screenshot 2).
On the Search Page a visitor can search by keywords through the entire website, or choose to search in Expat Articles, Restaurant Profiles, or Restaurant Menus. When the last option is selected a search filter is revealed where one can pick a restaurant cuisine. That same cuisine filter is displayed on the overview page of restaurant menus (screenshot 3).
A single restaurant menu page includes clickable links of the restaurant’s phone number(s), which makes it easy – on mobile devices – to directly contact the place to order food. As ExpatLife doesn’t offer online ordering, there are also links to a restaurant’s pages at online ordering sites like Nham24, Your PhnomPenh, and MealTemple (screenshot 4. And of course the menu page also includes a map with the exact restaurant location (screenshot 5).
We already mentioned the prize draw: website visitors can win a meal voucher when they fill in their name and email address (screenshot 6). Every time someone signs up for the draw, the administrator of the website gets an email with the participant’s details. These details are also saved in the administrative ‘back-end’ of the website. That way the administrator has an easy overview of participants. It also prevents people from signing up more than once with the same email address.
On the overview page of ExpatLife articles, not all articles are loaded at once, as that would become a too large list. But by clicking on the button ‘Load More’ (screenshot 7), another batch of articles is loaded via Ajax (meaning without page refresh).
And of course the ExpatLife website is easily viewable on mobile devices (screenshot 8), including easy navigation and searching via the mobile menu.
As this is a brand new website address replacing the old Door-2-Door website, we have also made so-called ‘re-directs’ from the old website to the new one, in order to keep search engines indexing. This is very important: without doing so a new website would start from scratch, losing all index rankings that were built up over the years.
See the website: ExpatLife Cambodia
Techniques & Functionalities
- AJAX
- CSS3
- Directory
- Filters
- HTML5
- jQuery
- Location Map
- Responsive
- SSL-certificate
- Sticky Header