Jump to content

New sites in PW by Ben B


benbyf
 Share

Recommended Posts

Nice little collection!

I have found a slightly unusual problem with The Hackney Peddler.

If you scroll down with a mouse wheel, when you get to the google map the mouse cursor is grabbed by Google and suddenly you are shrinking the map rather than scrolling the page.

Off the top of my head I have no idea what you do about it!

Link to comment
Share on other sites

Very nice, and very clean - I like them :)

One thing though - and I see that there are a handful of showcase sites that do this:

On http://ciaraphelan.com/, your menu seems to be hardcoded, because the trailing slashes are not in the URIs. So, for every single page request from the navigation menu, there will be a redirect, which adds unnecessary page-load time.

It would be best to either add the trailing slashes in that menu, or use a $page loop so that the links are correct.

Otherwise, very nice.

  • Like 2
Link to comment
Share on other sites

the map thing is an issue, because i want to give people the freedom of the map but also to be able to scroll freely....

If you replace the iframe map with the Google Maps javascript API, you have control over the "scrollWheel" map option which you can set to false, which will solve this problem.

  • Like 1
Link to comment
Share on other sites

It's looking good Ben :) Couple of observations:

  1. The work filter is very nice
  2. The line length on the work detail pages is a bit long for that font size. Perhaps put the main work image on the left/right side of the main body of text?
  3. The left article flyout effect was a bit confusing the first time I saw it, as it was unexpected. (I wanted to click the sausage/hamburger menu but hit the top colour block instead)
Link to comment
Share on other sites

Thanks so much.

I agree with the text length and will amend.

The nav flyouts to the left are an experiment so its good you found them. they represent every page (or subpage) on the site so can be used as a sort of serendity nav. but trying to look out how to make them intiative and not get in the way too much.

  • Like 1
Link to comment
Share on other sites

The sites are looking very nice.

But I would consider this "show content once everything is loaded"-approach. On ciraphelan you have 117(!) requests and load 9.2MB(!!!) before the visitor sees anything. Honestly, usually I wouldn't wait that long before I see something of the content. On a mobile phone I would even hate you for letting my mobile data plan to be reduced by that huge amount of data only for a first look at your website ;-)

What you can/should do:

1. Reduce the size of the images (600x300 with 300kB for an image is way too much, especially when having so many images)

2. Show Retina version only if needed

2. Show at least the first images once they are loaded, don't wait until everything is loaded

3. Use lazy loading for loading the images if the user scrolls and only wants to see more

4. Reduce the requests

Cheers

Link to comment
Share on other sites

Thanks for your input.

To behonest that site was a fixer upper after another dev stop returning my friends calls so I helped make the site work and look ok.

  • In terms of retina, as far as i can see there still is no good way to do this, you have any experience with any good options? or we still waiting on browser makers?
  • Lazy loading messes with the isotope.js otherwise I would have done it... also i would have shown you something too. :/

Thanks for your feedback!

Link to comment
Share on other sites

  • In terms of retina, as far as i can see there still is no good way to do this, you have any experience with any good options? or we still waiting on browser makers?

There are a lot of options, either on server or client side. I have made good experiences with picturefill, which in version 2 adapts the syntax of the yet to be implemented picture and srcset tags: https://github.com/scottjehl/picturefill

  • Lazy loading messes with the isotope.js otherwise I would have done it... also i would have shown you something too. :/

should be possible: http://patchwork.stylehatch.co/

Isotope has an add function, lazy load is nothing different than loading an adding serveral elements to the stack imho.

Cheers

Link to comment
Share on other sites

great, ill check out the add functions in isotope.js sounds like a great solution.

not sure i like the picturefill polyfill, still abit clunky in my mind. would love to hear about any server side solutions.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...