Auto hiding navigation and sticky header

A simple navigation that auto-hides when the user scrolls down, and becomes visible when the user scrolls up.

Auto-hiding navigations have been around for quite some time now, in particular on mobile devices. The idea behind this UX pattern is simple yet efficient: we want the navigation to be easy to reach all the time, so we stick it on top. However, we auto-hide it when the user scrolls down, to create more room for the content. If the user scrolls up, we interpret his behaviour as a will to access the navigation, so we bring it back.

Continue reading Auto hiding navigation and sticky header

Add a Progress Bar to Your Site

Since the advent of mobile, web sites are turning more and more into “apps”. Concepts that make sense for a locally running application are transferred to the web. One of these is the recent addition of “progress bars” to some of Google’s websites that show the loading state of the page.

Continue reading Add a Progress Bar to Your Site

Single Element CSS Spinners

“This is a collection of loading spinners animated with CSS. Each spinner consists of a single div with a class of loader and content text of “”Loading…””. The text is for screen readers and can be used as a fallback state for older browsers.

Continue reading Single Element CSS Spinners