PhotoSecrets redesign 2017 — 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 like Google does not require calls to external server.

Predictive: Type two letters and matching requests are displayed — instantly!

Dynamic tiles

The body customizes itself to your search requests with a colorful mosaic of tiles. 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 “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 the supplemental load, so it does not slow down the initial file transfer or 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. Currently 80Kb (gzip), can be updated independently as new books and guides become available.

You might also like

Add Your Comment



Email (optional):

Submit your comment: