I'm designing a website for a dog and cat shelter. We will put the photos with the descriptions of the animals and any other useful infos.

Since there are about 50 dogs and 100+ cats, how can I make sure all the animals will have equal chances to be seen? I could periodically change the order in which they are written in the HTML but that would be way too much work and I couldn't keep up with this practice.

Is there any best practice for this type of case?

Thanks you very much!

  • 1
    Randomizing the order can be automated with a bit of javascript, so that isn't a technical issue. Whether you should do that is debatable. I'll wait for someone with more experience with this to answer. Aug 3, 2020 at 16:07
  • Oh cool. I didn't know about the JS random stuff. Just started learning JS. Thank you!
    – Matthew100
    Aug 3, 2020 at 19:57
  • Randomizing is a great idea but you might want to think about creating a visual / information hierarchy. Figure out what is most important and go from there.
    – JTD
    Aug 4, 2020 at 4:25

2 Answers 2


As others have suggested I agree that a bit of randomness will help you out a lot. However, I wanted to over some additional suggestions.

The randomness only really provides a solution to the "fairness" of which animals are seen. However, given your specific scenario I would argue that there should be a bias towards certain "items" getting priority. And that is, I think animals that have been with the shelter the longest (and supposedly the least desirable) should get a bit more promotion than the new additions.

To resolve this I would potentially look at allowing the user to choose different "sort orders" for the list. By default you could have the random sort order, as discussed. And also have a sort order for the length that they have been with the shelter. The longer they have been there, the further up the list they will appear.

The benefit of this is it caters for your viewers that are looking for animals that don't get much love (i.e. the ones that have been with the shelter the longest).

As a side, personally I would be tempted to try and guilt trip the viewers. I would have a sort order called "Most Unloved" (or something along those lines) that would give priority to the ones that have been there the longest (as mentioned above).

I would also make sure every item has a "X days at the shelter" info too, if you don't already have something like that. At the end of the day, your site is there to try and "sell" (convince, not profit) the animals, so you should promote those that need the help more. The cute, friendly, well behaved animals will sell themselves, so try to promote the ones that don't get much attention.

  • Thnaks you very much! Great idea! What language should I use in order to create the "sort by"?
    – Matthew100
    Aug 4, 2020 at 15:04
  • @Matthew100: If you are creating static HTML pages for you website, then you don't have much choice other than to use JavaScript. Perhaps look into JS frameworks like JQuery to help you out.
    – musefan
    Aug 4, 2020 at 15:21

As AjitZero mentioned, you could randomize the order in which the animals are presented to give each dog/cat an equal chance to be placed on top.

Building on that idea you could create a spotlight section with 3-5 animals (chosen new each week) and additionally provide a catalogue of all the animals.

  • This + the randomized stuff should get the job done as I want it. What about the catalogue? For example, should I put a limit on the number of cats showed per page? For example like the products on Amazon, you can see 20 or 30, than you have to go the next page. It is called pagination I suppose(?). Or are there other better ways? I am talking mobile and tablet, cause on desktop you have much more room to play around
    – Matthew100
    Aug 4, 2020 at 7:15
  • Lazy-loading combined with regular pagination gives an effect of infinite scrolling. Initially load only, say 15 items, then as the user scrolls to the end of the list, load the next 15 items in the list. In this sort of pagination, the data that you fetch would need to be randomly ordered as a SQL database query, or the NoSQL equivalent. Aug 4, 2020 at 9:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.