Luxury travel site

[reems]

Hi, 

I like to introduce a newly built site to you.

http://www.travelinluxury.nl

Without Processwire it would have been much more complex to built it.

The first left menu you see is not a simple menu but a list of types of trips that are added to all destination pages through the use of a multiselect pagefield. After a click it searches the complete site and selects parts of the world and countries where destinations are to be found with what you selected with final menus to the destinations. With a normal CMS it would have been a real problem to create something like that.

The tabbed blocks on the destination pages are built with Jeasyui and in the admin the blocks are separate template fields.

Beside that I use the MapMaker Module and FormBuilder (see newsletter and "offerte aanvraag").

Also multilanguage fields (Dutch and German). See the link in the botton (NEDERLANDS - DEUTSCH)..

Every page has it's own slideshow for which I used the Jquery cycle plugin with Maximize (thanks my form posts and the suggestion of MadeMyDay...). Check the small cross next to the slideshow controls.....

Plus a lot of Jquery and finally pocketgrid for the css grid to make it responsive (tablet only).

There are still some little issues, that will be finished the coming weeks.

Using Processwire for this site was a learningpass but I enjoyed it much

[diogo]

I moved this thread from "case studies" to "showcase"

[reems]

Thanks, That is a good idea. Sorry.

[Mike Rockett]

Very nice site I just have a few nits to pick from a user experience point of view:

1. The top menus' anchor tags do not fill to the size of their menu blocks 

   <div class="mymenu bn block">...</div>
   

   This means that I have to click on the actual anchor link.
   Whereas, you did this with the menu on the left, making it easier to click on each item. (Only thing I noticed with the left menu is that the anchor tag for "Luxury Honeymoons" goes past the length of the black parent container. Oh, and these links also don't seem to show which one is currently being viewed, i.e a 'current' class.)
    

2. Same concept with the Top 10 drop down. I should be able to click on any part of that, instead of just the drop down arrow.
    

3. I think more work could be done with how the site responds to different screen sizes. As soon as I scale down my browser, or use the device renderer, everything starts overlapping everything else. Unless, of course, you did not intend for the site to be responsive, which is what I've gathered.

Despite this, I really do like the simplicity and usability of the site. It isn't overly complicated, and anything you need to click on is shown to you straight away, which makes it a friendly site.

Kudos!

[reems]

Hi Mike,

Allthough we are now talking about html and css and not about Processwire I appreciate your nitpicks .

Your points 1 and 2 are already part of the issues I talked about in my original post.

But nr 3 about responsiveness. The site should be oke on normal screens and tablets.

There are mediaqueries in the css with a breakpoint at 1200 px. Above this the top and footer menus are centered and about 60% wide, below the 1200 px it spreads out to 100% and the left menu goes all to the left. We tested it on more then a dozen screens, pc and apple, desktop and tablet and it workes fine. But you never are sure with so many combinations of screens, browsers and zooming people sometimes do. I would appreciate if you could send a screenshot plus some information about your machine and settings. That would help to improve.

But.....afcourse.... in reallife we just look at a website on our desktop, laptop or tablet, we are not resizing the browser. If you as test resized your browser just above the breakpoint, maybe then in some cases it could be tricky.

But anyhow thanks for your comments

[Mike Rockett]

You're welcome, reems

Here are some snapshots:

Browser resize: http://imgur.com/PbjrVzv

Lumia emulation (confirmed with my own Lumia): http://imgur.com/y2eGp2J

Galaxy S4 Emulation (I don't have a device to confirm this with): http://imgur.com/YYDajVr

[reems]

Thanks Antony, but as I mentioned in my first post we built the site purely responsive for tablet, not for mobile. Choice of my client

Your three screenshots look mobile to me.

I expect to get instructions in the near future to create a separate mobile layout.

[Mike Rockett]

Oh right. My bad indeed.

[totoff]

Hi reems,

a nice site, thanks for sharing, though I have to second Mike's nitpicks with the anchors.

However, I wonder if some more effort could be put into making the site more SEO-friendly? For example a browser title "HOME" is not helpful for robots at all. Check with Woorank or similar tools - there is some room for improvements.