diogo Posted July 11, 2015 Share Posted July 11, 2015 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. 14 Link to comment Share on other sites More sharing options...
Mike Rockett Posted July 11, 2015 Share Posted July 11, 2015 Great site indeed. Only one issue: scrolling with the wheel is very slow... 1 Link to comment Share on other sites More sharing options...
Yannick Albert Posted July 11, 2015 Share Posted July 11, 2015 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 3 Link to comment Share on other sites More sharing options...
diogo Posted July 11, 2015 Author Share Posted July 11, 2015 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 More sharing options...
Yannick Albert Posted July 11, 2015 Share Posted July 11, 2015 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 1 Link to comment Share on other sites More sharing options...
diogo Posted July 11, 2015 Author Share Posted July 11, 2015 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 More sharing options...
Mike Rockett Posted July 12, 2015 Share Posted July 12, 2015 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.) 1 Link to comment Share on other sites More sharing options...
LostKobrakai Posted July 12, 2015 Share Posted July 12, 2015 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. 1 Link to comment Share on other sites More sharing options...
Manfred62 Posted July 12, 2015 Share Posted July 12, 2015 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. 1 Link to comment Share on other sites More sharing options...
apeisa Posted July 14, 2015 Share Posted July 14, 2015 Scrolling is turtle here also (Win7 / latest chrome). It's not "lagging", it just scrolls way too little with each scrollwheel movement. Great, beautiful site! 1 Link to comment Share on other sites More sharing options...
Beluga Posted July 14, 2015 Share Posted July 14, 2015 Found solution to jScrollpane slowness from StackOverflow, the default speed is way too low. You have to define the wheel speed when you initialize the plugin like this: $('.scroll-pane').jScrollPane({ mouseWheelSpeed: 50 }); 1 Link to comment Share on other sites More sharing options...
diogo Posted July 14, 2015 Author Share Posted July 14, 2015 Thanks guys, I will try this fix. Link to comment Share on other sites More sharing options...
diogo Posted July 15, 2015 Author Share Posted July 15, 2015 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 More sharing options...
Mike Rockett Posted July 15, 2015 Share Posted July 15, 2015 It's better, but I think 20-25 will feel more natural. Scrolling by touch is quite irritating on my Windows tablet and laptop on Chrome in that it doesn't slowly decellerate upon let-go. I wonder if you shouldn't upgrade to the newer jScrollPane... Their demo page (using 2.0.22) works as anticipated. 1 Link to comment Share on other sites More sharing options...
diogo Posted July 15, 2015 Author Share Posted July 15, 2015 Thanks Mike! I didn't even notice that I was using an old version. Linked to the latest and changed the speed to 25. Link to comment Share on other sites More sharing options...
Mike Rockett Posted July 15, 2015 Share Posted July 15, 2015 The touch-scroll issue is still there. But I don't think that's a huge issue. Scroll-speed is perfect now, at least for me. Link to comment Share on other sites More sharing options...
dragan Posted July 18, 2015 Share Posted July 18, 2015 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. 1 Link to comment Share on other sites More sharing options...
diogo Posted July 19, 2015 Author Share Posted July 19, 2015 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now