Jump to content

Wine Route Georgia


diogo
 Share

Recommended Posts

Hi guys,

So, here is our latest creation.

http://wine-route-georgia.com/

Wine Route Georgia provides exclusive tailored tours throughout Georgia including wine tastings and vinery visits.

We were lucky to have a great set of images to work with, so we decided to design the website around them. The strategy was to keep the images in the background with a very slow slideshow, and for this we had make sure that it wouldn't be interrupted while the user navigates the content.

Enter AJAX: Obviously the only way to do this is to use AJAX to get the requested content. We wanted the URLs to work normally and used this technique to make sure everything would work flawlessly http://rosspenman.com/pushstate-jquery/ . On PW the work was not different than a normal website with separate pages (including header and footer) since all the work is done with JS.

The slideshow is quite complicated because it works differently when in responsive mode. On smaller devices, the slideshow pauses and becomes draggable. On larger devices you can call a grid with all images and select the one you want to see next. This is a completely custom behaviour for a slideshow and of course there is no jQuery plugin that does this by default, but after some frustration I found a plugin with an excellent API that allowed me to program it exactly how we wanted http://kenwheeler.github.io/slick/

Hope you like it.

  • Like 14
Link to comment
Share on other sites

Looks great so far, except some things...

It seems that there's something wrong with the replacement part of your ajax implementation. Go to at least two different pages and browse back, the content gets appended (also the slider component).

Another point is user experience. If you want to provide a good/native feel, cache the scroll offsets and restore them on popstate. So, jump to the position where the user was, before he browse the history (via back/forward-buttons, history menu or any other way). replaceState is a good tool for this... Jörn Zaefferer talked about those topics

(de) and has made a repo therefor https://github.com/jzaefferer/pitfalls-examples.

Also, some more/different typography elements would be nice too...

Btw: I'm on my couch with iPhone iOS 9 - mobile safari ;)

  • Like 3
Link to comment
Share on other sites

Great site indeed.

Only one issue: scrolling with the wheel is very slow...

Thanks!

I don't have that feeling. Anyone else had this experience?

Looks good so far, except some things...

Oh boy...

It seems that there's something wrong with the replacement part of your ajax implementation. Go to at least two different pages and browse back, the content gets appended (also the slider component).

Another point is user experience. If you want to provide a good/native feel, caching scroll offsets is important. So, jump to the position where the user was if he browse the browser-history (via back/forward-buttons and history menu). replaceState is a good tool for this stuff ;) Jörn made a great repo, also about this topic https://github.com/jzaefferer/pitfalls-examples

It's funny, this did happen to the client in her browser and it stopped after a couple of changes i did. I stress tested the site on some browsers and was never able to reproduce it. This happened to you on the iPhone?

EDIT: not ideal, but for now I solved it with CSS.

Yep, caching scroll offsets would be a good enhancement. Will have a look at it.

Also, some more/different typography elements would be nice too...

Hm...

--

Many thanks for your feedback guys!

Link to comment
Share on other sites

I don't have that feeling. Anyone else had this experience?

Nope, performance is fine, for me (iPhone 5s iOS 9 Safari, iMac 27" OSX 10.10.4 Chrome, Safari & Firefox)

 

It's funny, this did happen to the client in her browser and it stopped after a couple of changes i did. I stress tested the site on some browsers and was never able to reproduce it. This happened to you on the iPhone?

I can reproduce it... Just open your developer tools, take a look at the generated source and follow the steps explained above. You will see something like this, I am sure ;)

post-1820-0-48213700-1436650703_thumb.pn

post-1820-0-66445500-1436650702_thumb.pn

  • Like 1
Link to comment
Share on other sites

Yep, I saw it meanwhile. For now I "solved it" with css

.ui-loader + .ui-page {
    display: none;
}

Later next week I'll try to actually fix it.

Link to comment
Share on other sites

Thanks!

I don't have that feeling. Anyone else had this experience?

Nope, performance is fine, for me (iPhone 5s iOS 9 Safari, iMac 27" OSX 10.10.4 Chrome, Safari & Firefox)

I'm running Windows with the latest Chrome & Firefox - scrolling with the mouse-wheel and the trackpad is slow. Scrolling by touch is also slow, meaning that it doesn't continue and then decelerate when I let go.

Perhaps this might be applicable?

Also, it appears that I can't scroll by touch on Firefox - not sure if this is a jScrollPane issue, or its implementation. (I doubt it's the latter.)

  • Like 1
Link to comment
Share on other sites

Very nice looking site as always.

Some minor things, which could be improved. The grid view of the slideshow seems to be incomplete for certain screen sizes (1220x1340 viewport) and in this case the thumbnails are also to small (~370x300 block with 250x167 image). That doesn't look good even without a retina screen. And the last thing: I'd close the grid view, when the actual page is getting moved back in again.

  • Like 1
Link to comment
Share on other sites

I can confirm the very slow scrolling (Win 7, Firefox/Chrome).

Clicking through the page, then go back with the backwards button always shows the submenus from the last visited page. Reloading clears this.

post-1027-0-81984600-1436692302_thumb.jp

  • Like 1
Link to comment
Share on other sites

I changed the setting. 50 was definitely too fast for me, even 30 was, so I settled with 15 for now (default is 3), can you win7 guys please check if t makes a difference for you? Many thanks!

Link to comment
Share on other sites

Looks nice. A little nitpicking though content-wise: The german texts / translations are not what they could be. Some pieces sound like they're straight out of Google Translator... - at least the testimonials.

  • Like 1
Link to comment
Share on other sites

Thanks dragan. We're aware that the translations have some problems, although there was a professional translator involved. We will still pass your comment to the client.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...