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 Google.com (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.