PhotoSecrets redesign — Tiles

To bring you a photo-based searchable menu of over a 1,000 photo guides, I’ve redesigned the PhotoSecrets home page around a colorful mosaic of tiles.

Under the hood

Several custom-coded features combine to bring you a fast-loading site with a simple layout and powerful abilities. Here is a summary:

Lightning load

The page displays in less than a second, using half the requests of (10 requests vs. 23). The image-independent design allows for a full layout without any large photo files, which are loaded later into placeholder boxes.

Mobile-first responsive layout

Designed for the smallest screen-size first and automatically adjusts to any screen size, so everything looks consistent and natural across all devices.

Minimalist design

A simple, clutter-free layout emphasizes images and guides. There are no adverts, columns, or auto-play videos to confuse the eye and slow down the load time. Just big, pretty travel photos.

Instant search

Faster than Google!: All content and code is local (on the page), so, unlike traditional search engines such as Google, a search on PhotoSecrets does not require calls to external server.

Predictive: Type two letters and matching requests are displaye instantly.

Dynamic tiles

The body customizes itself to your search requests with a colorful mosaic of tiles. Enter a search request and the page displays a customized selection from over 1,000 built-in “tiles” of books, guides, articles, whatever. Tap any tile for more info.

Drop-down subjects

From the “Explore” icon, you can burrow down through a wide breadth of topics, including over 300 locations and over 100 subjects/topics. This menu is part of a supplemental load, so it does not slow down the initial file load.

On-page articles

Read more without having to load a new page. Tap a tile and additional content — even an entire article — can pop-up. The content is already present in the HTML, so the browser can display it instantly, without requesting and loading additional data.

Full-width slideshow

Edge-to-edge on any display. Lazy-load images only download just prior to display. Hardware accelerated transitions.

Consistent typography

Only one font family is used for the body, and it’s also used on the ePub books, printed books, and apps. So there is a consistent experience across all formats.

Supplemental load

Large resources (such as the search library, 1000+ tiles, subject menu, JavaScript for the tiles) is loaded separately in the background, so the initial page layout is fast and unburdened.

You might also like

Next page: First six print-on-demand books

Add Your Comment



Email (optional):

Submit your comment: