Jump to content
diogo

Patina — Unikate für den Alltag

Recommended Posts

Hi guys, here is our most recent website

http://patina-store.de/

Patina is a really nice vintage objects and furniture store here in Wuppertal. Pay a visit if you pass by ;)

We are aware of some flickering and strange scrolling (seems to happen with Safari on desktop and iOS) on the homepage initial transition. I'm looking into it, but if you guys could report how it's behaving with you, it would be a great help!

A point of interest is the Lookbook page. For this we used the Image Marker module by @kongondo and @heldercervantes, which worked flawlessly. Thanks guys!

Although the site is very simple, PW has a very important role, since we transitioned all the shop organization (mainly the products) from excel spreadsheets to it. We could say PW is acting as a small CRM, and Lister Pro is doing a great job at it.

  • Like 19

Share this post


Link to post
Share on other sites

Very nice!

One issue I noticed is that if you scroll down one increment of the mousewheel, as well as triggering the animated scroll past the hero section the text below is also scrolled, meaning the first couple of lines are already obscured behind the header.

2017-12-16_110315.png.0888045f6eeb9dda043e0d417a78d7a8.png

How many text lines are scrolled perhaps depends on the OS mouse settings.

Maybe you could somehow capture the first mouse scroll interaction so that it only triggers the hero scroll and not scroll the rest of the page content?

  • Like 1

Share this post


Link to post
Share on other sites
29 minutes ago, Robin S said:

Maybe you could somehow capture the first mouse scroll interaction so that it only triggers the hero scroll and not scroll the rest of the page content?

@Robin S thanks for reporting! I tried to do this, but for what I've seen, that's not possible. To catch the scroll event, it can't be deactivated... unfortunately there's no way to capture the user action (rotate mouse wheel or swipe on the pad), only the scrolling itself, so there's no way of preventing that first movement. I'll continue looking into this. For now, I just added an animation that repositions the content in the place that it should be. In my chrome the movement is quite elegant and in the ipad is so-so. I'm not sure how it will look in other devices, but it should at least solve it in your case.

 

59 minutes ago, SamC said:

Wow! The lookbook page is deliciously smart :) 

@SamC thanks, that's great! ^-^

Share this post


Link to post
Share on other sites
19 minutes ago, diogo said:

For now, I just added an animation that repositions the content in the place that it should be.

That did the trick.

Another little thing I noticed is your font stack:

font-family: "Hind Madurai", "woodford_bourne", sans-serif;

You are specifying "Hind Madurai" from Google Fonts as the first preference, but this is not actually rendered anywhere (that I could see) and instead all the text renders in the first fallback "woodford_bourne" which you are self-hosting. So maybe "woodford_bourne" is actually the typeface you actually intend to use and specifying/loading "Hind Madurai" is unnecessary?

  • Like 1

Share this post


Link to post
Share on other sites

We're loading only the @ from Hind Madurai, notice the import line:

@import url("https://fonts.googleapis.com/css?family=Hind+Madurai&text=@");

I know we're being picky, but we really really dislike the @ from Woodford Bourne.

Anyway, thanks for digging in and telling me what you found. I appreciate it.

  • Like 4

Share this post


Link to post
Share on other sites
6 minutes ago, diogo said:

We're loading only the @ from Hind Madurai

That's a great tip, will do that myself in future. So often an otherwise nice typeface has a weird unrecognisable ampersand or something. Cases in point...
http://www.myfonts.com/fonts/font-fabric/nexa/regular/glyphs/716952/445
http://www.myfonts.com/fonts/intelligent-foundry/averta/regular/glyphs/756381/1184

Share this post


Link to post
Share on other sites
4 hours ago, diogo said:

@import url("https://fonts.googleapis.com/css?family=Hind+Madurai&text=@");

Nice :)

Share this post


Link to post
Share on other sites

nice site :)

2 suggestions (or maybe more 1 suggestion and 1 feedback):

  1. it would be nice to have different markers for sold/available - can save lots of clicking.
  2. i would prefer opening the details on hover and not on click (needing a little caution on mobile of course)
  • Like 1

Share this post


Link to post
Share on other sites
On 17/12/2017 at 12:34 AM, heldercervantes said:

First scroll... WHOA!

Love it.

:D

 

On 17/12/2017 at 12:55 PM, bernhard said:

nice site :)

2 suggestions (or maybe more 1 suggestion and 1 feedback):

  1. it would be nice to have different markers for sold/available - can save lots of clicking.
  2. i would prefer opening the details on hover and not on click (needing a little caution on mobile of course)

@bernhard thanks!

1. Good idea! I'll ask the client if they want this change.
2. I think we'll skip this one. I'm not a big fan of too many things happening on hover.

  • Like 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...