Photo-first Design
A photography portfolio should be about the photos. The design for Two Loon Photography maximizes photo real estate for devices of all sizes while making it easy and intuitive to access navigation, comments, and photo information.
The site is, quite literally, all photos. The home page and other photo listing pages have edge-to-edge photos that fill the view. There are 3 pixels separating each photo; enough to clearly define each photo, but no more.
Navigation is represented by minimal, semi-transparent buttons that slide in a category menu from the left or comments from the right.
When you open an image, it fills the whole screen except half of the next line of icons. This ensures the largest viewable image possible while ensuring that the user knows the page scrolls and that there is more information under the image.
Images are opened and loaded with Ajax while back-button functionality is properly maintained. Comments and all other contextual information are updated when viewing an individual image.
Performance-first Software
Responsive Design has left us with a bit of a headache. It’s wonderful and it’s the right approach to mobile-first web development, but it does not provide a consistent way to deliver different sized images to different sized devices. This means that when you load a standard website on your iPhone, the images are larger than the iPhone needs and the site takes longer than necessary to load.
This photography portfolio was our first attempt at solving this problem and the solution in place is quite elegant. Images are resized appropriately for the size of the device making the request. Loading the homepage on a large monitor (2500px wide) downloads 2.1MB of photos. Loading the same page on a mobile device (320px wide) loads 0.3MB of photos, an 85% savings in data transfer and load times.
Lightroom Integration
Managing a blog or a portfolio or any content-based website takes a lot of time. Managing photos online should be different, but no service out there makes it as easy as it should be to organize photos.
The Jesse Hodges Photography portfolio automatically organizes photos into categories based on the keywords applied to them in Adobe Lightroom. It also automatically shows higher-rated photos first. This makes organizing the portfolio as simple as dragging photos out of Adobe Lightroom into the portfolio’s upload page. The rest is magic.
