Nice stuff. Like the little touches, like when photos fade in and the photoset icon animation.
The photo masonry grid causes my browser to momentarily seize up each time a photo is loaded up, but only when viewing it on my retina screen.
Yeah the masonry integration is a bit contrived at the moment. I assume you're talking mostly about the masonry on the bottom of the photos page right? That one's a bit intense, calling it to reload after every successful image (but throttled to 250ms). I need to get it to somehow only calculate on a per-item-appended basis. There used to be a masonry method to only reload a single item but I couldn't find that in the documentation anymore.. gotta investigate best practices for masonry image lazy loading more!
If you know the ratio of each image, then you could define it in the CSS using this trick (just modify it for use on images) and it will result in an empty 'container' exactly the size of the image.
This 'container' will allow masonry to set the layout perfectly, and no janks when images finally load.
I used it successfully on a recent project which had ~3 image ratios, but for your use it could be a bit more complicated.
Looks great on Safari.. not so great on Chrome. At least for me. Just a friendly heads up.
Ah odd, I designed it entirely in chrome (in both canary and stable). If you open up console are there any JS errors? Looks like masonry.js got stuck in the middle of a transition
Loving the "progress" bar on the top of the page that shows how much of the post is left to read. Cool detail :)
Really love it Stammy - really lets your photos shine. Two things that are bothering me: - the masonry grid on the homepage is doing all sorts of weird things to my eyes. I don't think there's enough contrast in it - no hierarchy, I don't know where to look - the perspective on the loading animation is a bit intense - it's lovely but I think it might look better if it was less extreme
Been a fan of your work and articles since a long time, this looks great too! Will you be writing about it like you had your responsive site series? :D
Overall , I really like it. Nice and clean with a lot of little details that shine throughout. However, I have a little difficulty with the hierarchy of the grid layout posts on a very wide screen. My eyes aren't really sure where to go. I'm not able to create a strong logic out of the ordering, especially with the "View all" link appearing at the bottom of the first column when other columns extend past it. Might have something to do with the amazon post not having an image or some of the horizontal lines nearly aligning, but not quite. Not entirely sure. Could just be me though.
There are a lot of little touches that are very nice. Here are a few of my thoughts:
Night/Day mode I found myself going back and forth, both modes worked well and looked really nice. One thing to note is that the icon looks a little strange not vertically centered in the nav when you are at the top of the page.
Navigation Animation. I'm digging how the border comes in. In fact, all the animations were very well done.
Nice interaction on the Japan landing page. I like how the background changes on hover. One thing I might tweak is making sure the header ('Japan' in this case) fits within the padding of the container.
Grid layout I would be curious to hear more your decision to use a grid layout for your posts. After reading Prismatic's post on them, I haven't considered them much. I'm sure they work in certain cases though and would enjoy hearing your perspective.
Overall, I really like it! The layout and aesthetic are clean, and it seems very responsive from a performance standpoint.
Also, the content really shines. The photos were excellent!
Thanks for the feedback! Night mode was the latest addition and I just wanted to deploy last night.. needs to be a bit more responsive and move into the header when the page gets smaller.
As for grid layout - to be honest I just wanted to try something new. I've been essentially using the same title + blurb layout on my site's homepage about about 6 years!
Really nice design, Paul. I like how I can see so much photography up front and how the photos grab my attention.
One small item: maybe center align the "View more posts" below the posts grid. I was looking for the pagination to see more and completely missed it over on the right.
Haha man I should have gone with my first inclination -- that's how i had it!
A simplistic, clean design complemented with brilliant photos. Fluid with no lag across devices.
I was, however, a bit surprised with the slightly angled footer separation line. While unique, and charismatic - it seems to contradict the clean, symmetrical lines throughout the rest of the site. Just IMHO.
I was debating about that, was a fairly last minute addition. Felt like my site was a bit too clean and grid-like, thought this would add a touch of attitude, but it does draw a bit too much attention. will probably nuke it!
Don't nuke it, I like it. It gives it a bit of personality.
Hey folks - just deployed a significant redesign to my blog's homepage and photos section. Still a few things to tweak but a good foundation I think!
Site used to be 2 jekyll installs (one for root and one for /photos/ but I just merged them with Jekyll 2.0's collections support. It has a few issues - for example I can't seem to paginate collections, so I had to do a masonry lazyloading setup instead of inline infinite loading or JS 'load more' button)
Homepage and bottom section of photos pages use Masonry for grid-like items.
Thinking I may add a localStorage-stored toggle setting to enable/disable the homepage grid view.
Be sure to checkout the photos page http://paulstamatiou.com/photos/
Love the photo galleries, especially including short videos in there with the photos. I'm definitely stealing that ;)