Jump to content
benbyf

New sites in PW by Ben B

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!

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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

  • Like 3

Share this post


Link to post
Share on other sites

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/

Share this post


Link to post
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)

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

really nice work

found two things while on Samsung Galaxy Nexus stock browser

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

post-2236-0-91787200-1401344908_thumb.pn

after realoading all seemed to be fine

and on food-club.com

post-2236-0-15274100-1401344980_thumb.pn

cheers and go on :)

Share this post


Link to post
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

Share this post


Link to post
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!

Share this post


Link to post
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

Share this post


Link to post
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.

Share this post


Link to post
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

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By schwarzdesign
      We recently finished a relaunch of  the website of the consulting firm Engfer Consulting: engfer-consulting.de. Built with ProcessWire 3 and Bootstrap 4.
      Features
      Bilingual website (UPDATE: The English page is now available! the English page is inactive at the moment, as the content is not ready yet) A strong, simple data structure for job offers and news, allowing for a custom search page and fulltext search Sectioned content-blocks built with a Repeater Matrix (ProFields) Reusable components available as page reference fields Automatic generation of open graph-tags, with manual overrides available on each page Contact forms with a custom recipient depending on the current page Modules used:
      ProFields ProForms Sitemap Cookie Management Banner Duplicator Tracy Debugger Wire Mail SMTP Admin Links in FrontEnd Technical insights
      Most of the content is built using a Repeater Matrix field. Each section has an optional heading and a select-field for background colors. Some of the sections available include:
      Text blocks (a repeater-field for multi-column text) Feeds / listing of the latest job offers or news (with a field to control the number of entries shown) Displaying a team member or quote (selected through a page reference field) Downloadable files (a multivalue field for file uploads) Those sections can be combined and stringed together arbitrarily, so any number of page templates showing different contents can be built. The job offers template, in contrast, features fixed fields for taxonomy assignment, description, contact person, preview image and so on, making the job offer pages uniform and easily accesible.
      The (technically) most interesting part of the site is the job overview page, which contains custom filters that are automatically generated from the available taxonomy terms.
      The stylesheets are written in SASS, built with Bootstrap 4. Only the base and grid SASS files of Bootstrap are included, along with the Bootstrap components that we ended up using. Using Bootstrap 4 as a framework in this way makes development & styling blazingly fast, once all the utility classes are commited to muscle memory ...
      > Our Agency.
      Screenshots









    • By benbyf
      Not new, but a website I've worked on for a year or so in continous development.
      http://supercarownerscircle.com/
      I originally inherited the site from another web design company - upgraded PW and over the year added ecommerce using the Stripe module and a custom integration, revamped the frontend and added lots of new templates.
      Also did some frontend work on the shopify shop.

       
       
    • By EyeDentify
      I as have been a bit confused for some time about how the "Markup Regions" functionality in Processwire worked.
      But i have know read a bit more and think that i am getting to grips with it. And Markup Regions is going to be huge.

      To aid me in understanding Markup Regions better i started to read the Source code for the new "Regular" theme in conjunction with the Blog about the markup regions.
      It helped me a great deal to understand the basics and more fine details of it.

      A tip is to open both links and use the Source code of the "Regular" theme while reading the blog post.
       
      The Source code:
      https://github.com/processwire/processwire/blob/dev/site-regular/templates/_main.php
      The Blog post:
      https://processwire.com/blog/posts/processwire-3.0.62-and-more-on-markup-regions/
       
      I hope this could help others starting out with markup regions.
      Just take it slow and read it a couple a times and soon you will see the greatness of markup regions.

      /EyeDentify 
    • By EyeDentify
      Hello Fellow PW Fans and Gurus.

      I have run into a problem where i have created a template without a template file associated with it.
      Now i would like to HAVE a template file associated with it, not an alternate but as the main template file.

      So i thought, that's easy, I upload the template file and change it in template settings but I only get the Alternate template file setting?

      Ok so maybe i can change it via the API , so i wrote some code for this.
      <?PHP function changeTemplate($pages = null, $templates = null) { /* get the pages to change template on */ $logItems = $pages->findMany('template=tmp_log_item'); /* get the template object for our desired template */ $Template = $templates->get('tmp_new_log_item'); foreach($logItems AS $key => $logData) { /* use template object $Template to set template */ $logData->template = $Template; /* save page item */ $logData->save(); } } /* do the magic change */ changeTemplate(); ?> Needless to say, PW was not happy about this, It throw up an error message:
      Error: Exception: Invalid value sent to Page::setTemplate (in /home/virtual/mydomain/public_html/wire/core/Page.php line 1782)
      Now from what i understand i gave $logData->template the wrong type of value.
      So what should the value be to correct this?
      When I read the docs at: https://processwire.com/api/ref/page/
      the value can be "string" or "Template".

      So i gave it a string and it went haywire.

      How should I approach this cause I realy dont want to manually change template file on över 50 plus pages

      Maybe I should use the Template class to create the value that the API wanted, but I am unsure how to use it.

      Thank you for any info you can give me on this.

      If you want more info to help me, ask and I will try my best to give it to you.
      Updated and Solved
      I solved the problem and have updated the code to reflect this.

      Essentialy i used the get() method of $templates to get the template object for my template i wanted to use using the template name.
      I gave the Object to the $logData->template property and all went well.
      We learn something new every day.
      One Note:
      The template file you want to use must have been uploaded and added as a template in the Template section in the Admin for this code to work as expected.
    • By Mustafa-Online
      MBR international is Sudanese mining company. The company aims to maximize shareholder value by through
      exploration and Production of precious metal and industrial mineral, MBR international mining subsidiary was established in 2015, engaged in Industrial Minerals and Metals mining and related activities including explorations, extraction and processing. 
      **************
       
       

       
       

       
×
×
  • Create New...