Testings Nearly Finished Photographers Site

[benbyf]

Hey Everyone!

right I'm nearing the end of development on this photography agencies site and I was wondering if anyone could have a quick look for bugs etc.

http://nicegrp.co.uk/dev/hs/

It's not quite finished so there may be obvious stuff, also there's ALOT, going on in the front end, for example:

- pages are cached client side (to prevent unnecessary ajax requests for seen pages)

- Ajax page requests & pushstate

- pdf module for gallery pages

- slideshow animations

- add image to your custom gallery

- alot of menu logic

- responsive

- lazy loading images on gallery pages

Let me know what you think.

Thanks

[Philipp]

Looks and feels great. Immediately browsed through the galleries. 

Just the tennis background image on the Affiliates page ( http://nicegrp.co.uk/dev/hs/affiliates/ ) ist about 2.3MB. Took a while before it loaded and I'm not sture how mobile users like those large image files.

[Mike Rockett]

Indeed - it is a great site. very nicely built.

Must agree with Philipp here. In fact, there are several images that are too large. Sure, they're not all 2.3MB, but they're a tad too big.

May I suggest that you have a look at this article for more information on how to work around this:

http://www.smashingmagazine.com/2014/02/03/one-solution-to-responsive-images/

The article makes reference to these as well:

- http://www.smashingmagazine.com/2013/07/08/choosing-a-responsive-image-solution/

- http://adaptive-images.com/ (this looks quite promising)

And perhaps a loading indicator? Changing the title to "Loading..." was not easily noticeable for me; perhaps some people have slow connections/latency may question if a page is even loading.

Otherwise, I like it!

[diogo]

You can always make those images responsive. Thanks to Horst, PWs native images sizer provides images with much more quality than before. It's really easy to create responsive images with JS or even with the new SRCSET attribute for images or the <picture> element and respective polyfills http://scottjehl.github.io/picturefill/#examples

It's great that you give the option to collapse the menu to show the images in bigger, but I think the wording could be better: I don't really want to "collapse the menu", what I really want is to see the content in bigger. What I mean is that the wording could be something like "enlarge content" and turning it into "show menu" as you already have there. I also think that this ability should only be present in the gallery pages as there's no point on seeing the blog or the copyright notice in larger.

Just a suggestion

[3fingers]

Really nice and clean website here, top notch photos everywhere!

May I ask you to point us (at least me) in the right direction to use requests and pushstate with processwire?

Thanks!

[horst]

Really nice and clean website here, top notch photos everywhere!

May I ask you to point us (at least me) in the right direction to use requests and pushstate with processwire?

Thanks!

maybe more is to read here: https://processwire.com/talk/topic/4792-festival-site-with-processwire-and-ajax-boom-festival/

------

Edit: A very good site @benbyf. The only thing that I (personally) would change is the behave when clicking on a photographers name: one should get the "Main Gallery" directly, no need to click two times before seeing the first photo. / but also a bit nitpicking, I know

Edited July 30, 2014 by horst

[benbyf]

Thanks everyone, an image is still a hard won problem, especially when your not restricting the client in their uploads to much. Will look harder into this, but still loathed to use polyfills for images.

Really nice and clean website here, top notch photos everywhere!

May I ask you to point us (at least me) in the right direction to use requests and pushstate with processwire?

Thanks!

I was thinking about writing a lengthy description / tutorial on this site, as there's loads in it after it's live. I'll endeavour to do so after your interest.

[arjen]

+1! New descriptions and tutorials are always welcome!

[benbyf]

HEY,

Thank you all for your comments! My client loved seeing them too, so thank you.

The site is now live: http://horton-stephens.com/

Tutorial coming this week, anything in particular people would like to know?

Thanks

[3fingers]

+1 for pushstate and pw integration

[pwired]

slick site

[MuchDev]

Loving the work. Im working on a very similar project, but I hadnt figured out how one would implement a add to custom list. I would really love to know how you plan on accomplishing this.

I have just a couple observations. A small thing that was kind of confusing from a navigation standpoint is how the links go to the parent page where the photographer is on as opposed to the page itself, it wasn't until I moused away from the link, and it faded the rest of the images that I understood why you did this. I think from a gut point click perspective if I were to click on an artist I would expect an artist page.

One little detail I think would really jazz up your page transitions, as you will be performing fades, would be using a little plugin like imagesloaded. Then you could fade images once they are loaded, and get rid of the loading of those big pretty images that you have.

https://github.com/desandro/imagesloaded

[benbyf]

Thanks MuchDev.

In terms of the images, I am using a image loader for the galleries if you scroll down (try turning javascript off and your get the first 2 images), but I'm not using one ofr the page load itself so maybe something I can improve if the client agrees.

[MuchDev]

Thanks MuchDev.

In terms of the images, I am using a image loader for the galleries if you scroll down (try turning javascript off and your get the first 2 images), but I'm not using one ofr the page load itself so maybe something I can improve if the client agrees.

As I said though, just a suggestion. I did see the photographer loading which is what led me to want to comment in the first place. I really like you use of infinite loading on the pages. Also your tag display system is pretty slick, I like the ability to grab selections of work based on a tag, I have a mondo tag system I've been developing that will be very similar. Great work though, it is really coming along!

[benbyf]

caching help? As pages can be got directly or via ajax Im having massive caching issues (as it wont work with ajax), anyone have any solutions they can direct me too?

Currently a page template is if'ing in ./head and ./foot if not ajax so that I'm only grabbing page content instead of all the page resources etc. But, obviously to me now, I'm unable to caching any of the pages with ajax on them as they get served without the head and foot as the ajaz version is more likely to be cached. interesting problem.

[horst]

I don't understand what caching issues you mean. Do you use ProCache or other Caching methods?

[benbyf]

the PW template caching (goto a template in the admin and click the Cache tab )

[benbyf]

article tutorial on some of the logic / js used on the site http://benbyford.com/articles/making-horton-stephens.com/

[dotnetic]

Hi, i discovered a bug with Chrome 37. When i use my browers back button the URL changes but the content stays the same. Seems the soft-cached version isn´t injected.