Two fashion and advertising photographers, Francisco de Almeida and José Caria, contacted us in order to develop their web presence.
Almeida-Caria.com is our first fully dynamic, javascript-only, ajax driven website. It uses a grid layout, dynamically created using the site’s own structure.
It was crucial avoiding the typical single page loading from the server, therefore all of the site’s content is accessible at once on the landing page.
We developed a loading procedure that fetches all of the content sequentially, parse it accordingly to its nature, while rendering each content holder ‘module’ and positioning it in the ‘grid’. A red bar below the main menu indicates the loading status.
Home Page
The layout will immediately reflect any added or removed section by the site’s administrative system. This will also occur on section sub-menus like the Portfolio and Services modules.
We wanted to prevent the usage of the browser’s horizontal/vertical scrollbars, requiring us to create alternative methods of navigation:
Logo Hidden Navigation
- The main menu, located on the top bar is the site’s “standard navigation”. When a menu’s item is clicked, the layout grid will slide vertically and horizontally and center the targeted content module on the screen. “Inactive” modules have half of the opacity than the current section.
- We created a keyboard navigation using cursor keys [← ↑ → ↓]. It allows the user to “maneuver” the layout in any direction, as long as it has any content module to “land on”.
- Selection can also be done by clicking any visible “inactive” module.
- Finally, a “secret” navigation was added to each module: clicking in each of the rectangles [representing each one of the site's sections] will activate the module represented in that location.
keyboard navigation screenshot - navigating the 'grid'
The portfolio modules use our recently developed pSlideShow javascript class, connected to the site’s database, to refresh all the images.
Portfolio>Events (pSlideShow example)
Each module grid-like logo is also created on-the-fly from the site’s tree structure. And like the layout, it will mimic the site’s tree structure.
Almeida-Caria.com is complemented with a social network presence in Facebook and Twitter.
