Many times in index pages we need to show a message that there are no results to view. Usually as a results of a search, as in the example of Iconly. If you search for an icon on the top search bar, and no results our returned, the following message is shown.
Of course we could just return a phrase saying, "No results found", but that would be like we've left the users with no choice, and a bit poor design wise. With the improved notice, and the button to Clear Search (it could also be written Search again or Search for something else), I feel the user experience improves a lot. Also the baby face adds to the cuteness.
This reminds me a bit of the 404 pages, which nowdays are designed wonderfully.
The code
Let's code the notice we see in Iconly. We use Bootstrap 4 with a bit of custom CSS:
<div class="jumbotron text-center">
<i class="iconly-baby2 mr-05 font-lg"></i>
<h3 class="mb-4">Can't find that icon ...</h3>
<%= link_to 'Clear search', projects_path, class: 'btn btn-lg btn-primary' %>
</div>
We wrap the message inside a jumbotron element, which is a CSS class provided by Bootstrap. The iconly-baby2 class is created by Iconly as part of the web font generator. We want to show it with a big font size, so we create font-lg, to keep it in line with the btn- classes:
.font-lg {
font-size: 4rem;
}
Another example of these sort of messages is used on Github's Notifications page, when there are no notifications to view.
And now the joke:
A horse walks into a bar. The bartender says, “Hey.” The horse says, “You read my mind, buddy.”
Have a funny day!
Banner image designed by Freepik