New sites in PW by Ben B

[benbyf]

http://www.owengildersleeve.com/ - illustrator (built by CodeByBoy and edited by myself)

http://ciaraphelan.com/ - illustrator (built by CodeByBoy and edited by myself)

http://thehackneypeddler.co.uk/ - vintage bike shop (built myself)

[Joss]

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!

[benbyf]

thanks!

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....

[Nico Knoll]

Wow, all of them are looking clean and lovely. Well done!

[Mike Rockett]

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.

[Craig]

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.

[dazzyweb]

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.

This is also another approach if you want to keep the scroll wheel option working. http://codepen.io/jreece/full/szlov

[benbyf]

Thank guys! will give one of those a go.

I also launched this site today for a string of Pubs in the cotswolds:

http://food-club.com/

[benbyf]

also im just building myself a new portfolio site in PW. love your feedback on anything that is obviously not broken or in development:

http://benbyford.com/dev/new/

[benbyf]

Any feedback would be appreciated.

also im just building myself a new portfolio site in PW. love your feedback on anything that is obviously not broken or in development:

http://benbyford.com/dev/new/

[Craig]

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)

[benbyf]

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.

[Can]

really nice work

found two things while on Samsung Galaxy Nexus stock browser

http://ciaraphelan.com/ the first load gave me this

after realoading all seemed to be fine

and on food-club.com

cheers and go on

[MadeMyDay]

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

[benbyf]

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!

[MadeMyDay]

• 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

[benbyf]

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.