Design & Front-end Development on a desktop and smartphone.

Together with Artspot I built a new website for Erfgoedplus, a Flemish organization collecting and specializing in cultural heritage. I was responsible for the GUI design and front-end development.

From a mobile perspective the design has several remarkable features, but I’d like to talk about one I’m especially fond of: the mobile optimized in-page navigation.

On a wider display, the navigation for larger articles floats along at the right side of the page when you scroll down. A pretty standard behaviour which is familiar to most users. On a smaller display however, the navigation moves to the top and folds elegantly into an accordion of thin lines. While taking up almost no space, which is a good thing on mobile, the closed accordion still gives the visitor a hint that there are more pages for this article. When toggled open, the page titles appear and the visitor can easily switch to an other page. in-page navigation

Technically, the website doesn’t use large frameworks like Twitter Bootstrap or jQuery UI. Instead, a responsive layout is handcrafted and modules like the carousel on the homepage are custom coded with care. This way JavaScript is limited to a mere 55Kb and CSS to about 45Kb. Yes, that includes the vector icon font Font Awesome.

At average, a typical page on weighs less than 500Kb, including images. Mobile friendly indeed.