Thinking on ways to solve BREADCRUMBS

Поделиться
HTML-код
  • Опубликовано: 17 ноя 2024

Комментарии • 41

  • @patricknelson
    @patricknelson 3 года назад +18

    From the first minute… I think of them less as a “history of where you’ve been” and more of a “hierarchy of where you are”. This is important, particularly when landing from a search result, for example, in case you as a user would like to broaden back out and go “up” and find more stuff related to what you’re currently looking at (e.g. product category? Company information? Etc)

    • @Aragorn450
      @Aragorn450 3 года назад

      Yeah, I agree with you. Coming from a search engine and then not having a way to go to the parent category easily is really a pain. It's possible to kinda do both things, give the breadcrumbs of the default of where the product is when coming from search and then otherwise doing them with how the user got there. But it does cause some issues. Like, recommended links on a page for other content. And then how do you handle a user going to another category that's in a different tree? Add that next? Or replace what was there with the default path from home?

    • @patricknelson
      @patricknelson 3 года назад

      @@Aragorn450 I don’t fully understand the issue that you’re posing, so I’ll do my own interpretation… first I’ll disambiguate: The term “breadcrumbs” for this sort of UI is a bit of a weird name, since it was originally used as a metaphor about something a user could do to remember _where they came from_ (I.e. dropping breadcrumbs so they can find their way back home). Instead, I think of it as more of a navigation hierarchy to instead *inform* the user about _where they are_ (which _may_ need to incorporate user-specific context about where they came from, but see below for that).
      Now, *my interpretation* from what you’re asking is: How do you handle situations where you have a page/product that can exist in multiple places? Maybe it has the same URL (what I’d refer to as the canonical URL, also the technical term, see the link HTML tag) but you may want to *adjust* this navigation UI to be more context appropriate based on what the user did. In that case, you should find a way to “maintain state”. This can often be done with query string parameters or with cookies and varies *widely* on some important details about your stack. Personally, I’d generally recommend using the query string and just ensure you always have a canonical meta tag pointing to the *canonical* version of your current page to prevent duplicate content issues for SEO purposes.

  • @delulu6969
    @delulu6969 3 года назад +2

    This is so good! It's become like a 'dynamic' navbar instead of a plain breadcrumb, I guess?

  • @BlackLampone
    @BlackLampone 3 года назад +4

    Looks pretty cool. I would disagree that a user wants to see the current site on mobile. He is on the site already, wouldn't the page before be more relevant to him?

  • @muzafferhassan
    @muzafferhassan 3 года назад +1

    Wohooooo.... That's awesome man.... thanks for sharing it.. loved it.. ❤

  • @maheshmahi5455
    @maheshmahi5455 3 года назад +4

    Oh god, when can i reach this pro level at web developing😪, btw i like this breadcrumb design👍

  • @cdrini
    @cdrini 3 года назад +1

    Why did you set opacity: 0.01 instead of opacity: 0 for the disguised select?

  • @MrGilsteiner
    @MrGilsteiner 3 года назад +2

    Small correction. Breadcrumbs aren't supposed to reflect where you've been. That's what the back button does. They reflect content hierarchies.

  • @RomboutVersluijs
    @RomboutVersluijs 3 года назад +1

    That snap layout is nice, never new that existed. As well as clicking that FLEX icon in the dev tools, always kinda wondered what that was for. Super nice!
    Wonder how it would look if you completely transform the UI to an icon version one. Ive made an implementation of that on a site i worked on. Quite nice, the navigation transform in this Mobile device UI with icons only and then flips to the bottom for easy access.

    • @AdamArgyleInk
      @AdamArgyleInk 3 года назад

      send me a url to peep!?

    • @RomboutVersluijs
      @RomboutVersluijs 3 года назад

      @@AdamArgyleInk and... whats the verdict?

    • @AdamArgyleInk
      @AdamArgyleInk 3 года назад

      ​@@RomboutVersluijs did you send me a link to look at?

    • @RomboutVersluijs
      @RomboutVersluijs 3 года назад

      @@AdamArgyleInk ai RUclips deletes messages a lot of times when they have a link in the comment
      its promotiespullen com

    • @AdamArgyleInk
      @AdamArgyleInk 3 года назад

      @@RomboutVersluijs i see the mobile menu at the bottom, you're wondering if it's be nice to transform the breadcrumbs into an icon centric bottom nav? that could be cool sure! would it overflow scroll when the crumbs are too many? sounds worth a prototype 🙂

  • @fun8643
    @fun8643 3 года назад +1

    This is amazing

  • @chinmayk8004
    @chinmayk8004 3 года назад

    Amazing! Please mention the icon library !

  • @whatthefunction9140
    @whatthefunction9140 3 года назад

    I would like to see a checklist of all the factors you find important. Like motionOk??? never thought motion wasn't ok.

    • @RomboutVersluijs
      @RomboutVersluijs 3 года назад

      he showed a link??!?! goo.gle/Breadcrumbs

    • @seanthesheep
      @seanthesheep 3 года назад

      Indeed, some users prefer there to be no animations; it's primarily for accessibility since for example, on-screen animations could induce motion sickness or some other discomfort for some people. It's not necessarily just preference because this discomfort could stem from a disorder, though perhaps a few users also prefer the interface to immediately change with no fancy animations

  • @dorktales254
    @dorktales254 3 года назад

    This guy roasts Firefox dry

  • @emmahighwood
    @emmahighwood 3 года назад +1

    Awesome 😎

  • @abdusco
    @abdusco 3 года назад

    Correction: ruclips.net/video/kHL3gxAlvK8/видео.html
    Firefox does support simulating color scheme as of v87.
    www.mozilla.org/en-US/firefox/87.0/releasenotes/

  • @RomboutVersluijs
    @RomboutVersluijs 3 года назад +1

    I thought breadcrumbs were there to show the structure and location where you are in a site. Not immediatly the history of how you got there.

    • @berndeckenfels
      @berndeckenfels 3 года назад +1

      Both styles are used. From the name alone it’s more like “last x screens visited” but especially if you work with sibling selectors it’s more usually used as a navigation indicator (parents path to root).

  • @xingyahao4106
    @xingyahao4106 3 года назад

    What's this font and theme 🤯🤯 looks so good

  • @edu.paixao
    @edu.paixao 3 года назад

    I liked IDE's theme. Whats t name?

  • @RomboutVersluijs
    @RomboutVersluijs 3 года назад

    Ow wow, i thought the breadcrumb script would actually look at the omnibox see what the url is and then build the breadcrumbs hierarchy accordingly. How does your breadcrumbs script react to that then? PS in the link to the example/demo page, i dont see the script you showed in the video?

    • @RomboutVersluijs
      @RomboutVersluijs 3 года назад +1

      ow it actually is, its minified and looked a bit different my bad!

  • @LarsRyeJeppesen
    @LarsRyeJeppesen 3 года назад +1

    Wow

  • @azonicin
    @azonicin 3 года назад

    The nav has many problem.

  • @Killyspudful
    @Killyspudful 3 года назад +2

    Kermit the Frog builds a UI

    • @qzbnyv
      @qzbnyv 3 года назад +1

      Killyspudful… please be nice. I personally think it’s pretty impressive Owen has managed to build such solid tech skills between film shoots (…and now TV too! p.s. if you read this Owen, you were my favourite character in Loki and also I think Midnight in Paris is a massively underrated film too)

    • @AdamArgyleInk
      @AdamArgyleInk 3 года назад +1

      lol! maybe i'll lean into this and go full kermit in an intro hehe