Weekly update – May 8, 2020

[ryan]

Last week I told you guys about how I was working on development of a client’s site and deep diving into the details. Well this week was the same, except perhaps more so. Yesterday we finally launched phase one. There’s still more to do, and still working out some small bugs and such. 

This is a site I’ve been developing since back in the early versions of ProcessWire 2.x, which I think was nearly a decade ago. In fact, this was one of the first sites running ProcessWire 2.x, if I recall correctly. We’ve been keeping it up-to-date over the years, but this is the first time we’ve done a full front-end redo of the site, essentially starting from scratch on that, and spending a few months on it. But the admin side (fields, templates and page structure) remains roughly the same from where it was 10 years ago, and that’s what we’re going to redo in phase 2 (this year). There’s a lot of fields in this site, so I’m looking forward to really simplifying it with ProFields, repeaters and more — none of these existed when the original site was built. 

One thing really great about this iteration of the site is that it’s a ProcessWire community collaboration. Pete (our awesome forum administrator) did the design, as well as most of the front-end markup/css for the site. Jan (our awesome system administrator) setup the servers that it runs on, with AWS load balancer setup and everything related to that (he’s also one of the owners of the site). I did the other development stuff (the ProcessWire API side of things), making all the content fill all the markup in the right places, structure and organization, markup regions, search engines, optimization, etc., basically the stuff needed to get it all working in PW. 

This is the first time that I’ve developed a site where we can run new and old site side-by-side off the same ProcessWire installation. During development, the client could click a checkbox in their user profile and then they’d be using the new site. Behind the scenes, it does this using a fairly new feature in ProcessWire which is: $config->setLocation(‘templates’, ‘site/tpl’); So we had site/tpl/ having the new site templates, while site/templates/ had the old version. So one limitation for this phase 1 is that the old and new sites had to deliver the same exact content, even if the resulting output was very different. This site also uses custom page classes (another new feature), Markup Regions, and ProcessWire’s Functions API, and the Uikit 3 front-end framework. Pete also wrote a nice custom PW module for this site to handle localized weather forecasts — I ran out of time to get it in place yesterday, but that should be there next week hopefully. 

Yesterday we launched the site and we were finally able to start running it through its paces with live traffic. I thought I was going to be working on the PW core today, but you know that as soon as you launch a new site you always find things that need adjustment and can’t wait, so that was all of today. There’s more optimization work to do, and then there’s phase 2, where we start using ProFields and Repeaters to better isolate a lot of data and be able to implement the rest of Pete’s design in the parts that we weren’t able to in phase 1. This is where things like the current pricing tables (one example of a weak point) start to look really sharp. But I’m also looking forward to taking a little breather and catch up on some serious PW core work, issue reports and module updates over the next few weeks before diving into phase 2 of this site. 

I didn’t want to share the site quite yet because there’s still some details to take care of and such. But here it is Friday and I’ve got no other ProcessWire news to report, so was feeling a little guilty that I didn’t get more ProcessWire core work done over the last week, due to being focused on developing this site. But this was one of the first sites running ProcessWire, so it's an important one to me. And here it is about 10 years later, still the same installation (templates, fields, page tree) but with a brand new design and running the latest PW, and lots more to come. Tripsite.com

 

[Beluga]

Site looks nice, BUT: "Should I use a carousel?"

[ryan]

Beluga, I'm not much into carousels either, but also wouldn't claim there's no place for them. There's 1 small carousel on this entire site, and there was also one on the previous iteration of the site—the client has always liked it, and the customers react well to it. I really like this client for a lot of reasons, but one is that they are much more involved than most, know their technology, their product and their audience better than anyone I've worked with. The carousel is not my idea, but I trust and am certain the client knows their customers better than any self proclaimed experts online. I got a kick out of that linked anti-carousel site because it's a bit of a self own by whoever made it—it uses a carousel to make points that we likely would not have bothered to read if they weren't in a carousel. ? 

[cb2004]

2 hours ago, Beluga said:

Site looks nice, BUT: "Should I use a carousel?"

I think the carousel implementation is perfectly done. Well designed, and perfect auto scroll speed. As for the whole site, great job people.

As for the link you provided @Beluga, I would respectfully disagree. Running 100s of sites, especially ecommerce, carousels contribute to a massive spike in product sales. Dont read what works for others, implement what works for you. 

[Beluga]

The main page has three carousels, which are autoplaying to make it worse and one of them you can even interact with.

1. The big image section at the top of the page
2. The quotes section below it (can't interact)
3. The collections section

Related quote as I was just researching a different topic (SVGs):

Quote

An animation that cannot be paused can be extremely distracting for people with cognitive disabilities.

I think the main source of confusion and why people do not interact with carousels much is the typical "meatball" navigation, which is not intuitive. I am planning to implement a non-autoplaying carousel for a site and I will probably replace the mystery meatballs simply with descriptive text elements so you know what will happen on click.

@cb2004 I put some trust into professional UX research groups as I do not have the resources to conduct this science myself.

[horst]

3 hours ago, Beluga said:

I am planning to implement a non-autoplaying carousel for a site and I will probably replace the mystery meatballs simply with descriptive text elements so you know what will happen on click.

That, for example, may not work for people who don't like much reading. Can be that those people just don't see or get what you want them to, also if you explicitly have done it for that reason.

I think it depends a lot, or only, on the use case, the target audience and its implementation, ( and sometimes maybe plus what your customer want to have ) ?

  

10 hours ago, ryan said:

I got a kick out of that linked anti-carousel site because it's a bit of a self own by whoever made it—it uses a carousel to make points that we likely would not have bothered to read if they weren't in a carousel. ? 

Haha, yep. Now its one of my favorites, I never would have read all quotes when they where listed top down. But with the carousel, I was curious about every next quote.

 

@ryan Very well done redesign. I know this site for some time now and have a feeling that your customers do know their target audience very well, and do and like to do their own jobs in more depth than many people may do. Seems to me that this is one of their essentiell points. - I am a bit envious of the way you work together and would like to work with (more) such clients too. But they really seem to be very rare. ?

Ah, and I sometimes like carousels.

[Pete]

Thanks Ryan - I can't claim all credit on the design by a long shot as there's still a tonne of bits you had to figure out on the complex results filtering, plus whilst we're working with older content in new templates I still want to tweak some of the templates around the site.

There's some seriously impressive regexp going on behind the scenes by the way everyone - the old tour pages had maybe 3 or 4 tabs and the new ones have more but it's mostly all in one CKEditor field so Ryan had to do some magic pulling the right bits out and even displaying icons next to some parts of it. Will be much saner to manage all that after the fields get an overhaul in phase 2.

Carousels - there's a bit of variation in how they were implemented. Some have dotnav (which isn't the clearest), we're probably going to implement arrows overlaid either side on some of them where it makes sense during phase 2 (customer request I've not got around to yet), but if you don't autoplay who's going to bother to look for the play button? ? I don't think ANY of the information in the carousels is essential so in this case doesn't matter so much, but given the audience is looking for trips and will be drawn in by the nice pics carousels work well for this site. Plus it's somewhat consistent with the old site and also what the customer wants as has been said. I don't really want to be drawn into an argument about carousels (too late) but I think they're perfectly fine in some scenarios.

[Jonathan Lahijani]

18 hours ago, Beluga said:

Site looks nice, BUT: "Should I use a carousel?"

With respect, it's replies like these when people post their sites in the showcase that somewhat annoy me and I think would either be better handled through a private message or just left alone.  With a site as complex as the one Ryan posted, how could you possibly know what's best?  Sites like these take thousands of hours and go through many iterations.

There's a lot of group-think with any "best practice" but in my belief and experience, especially with ecommerce sites, visitors usually don't care.  Here's 2 examples:

1. A friend of mine started a Shopify website, which is probably the biggest Shopify website in the world (not an exaggeration). For the first 3 years, his website was nothing "special" and could probably be designed by anyone here in their sleep.  A basic logo, simple lines, decent pictures of products.  Knee-jerk snarky-developer reaction would be "omg, your website sucks lol bye".  But, customers don't care.  They want a good deal and he provided that and had great timing.  Needless to say, he's probably a billionaire at this point.
2. With one of my own ecommerce websites, I'm not using whatever the latest cutting edge web development practices are (React / all that JS stuff / AJAX everywhere / crazy system infrastructure / etc.).  Customers don't care (customers in this case being Fortune 100 companies, even Fortune 1 companies... ? ).  They are looking for something specific and will find what they need.  Snarky developer reaction: lol bro you should be using technology 'x', a read about it in a blog this week.  Do the end customers care?  No, they are people looking to buy a product on our website, not judging the behind-the-scenes code.

It's easy to fall into this trap of taking whatever latest article you read and thinking you must apply it or you are falling behind / going to lose customers / are a bad developer / whatever.  I went through years of this until the above to examples opened my eyes a lot.  I would recommend focusing on your customers and what's working for you... not what trends are.

[Beluga]

2 hours ago, Jonathan Lahijani said:

With respect, it's replies like these when people post their sites in the showcase that somewhat annoy me and I think would either be better handled through a private message or just left alone.  With a site as complex as the one Ryan posted, how could you possibly know what's best?  Sites like these take thousands of hours and go through many iterations.

There's a lot of group-think with any "best practice" but in my belief and experience, especially with ecommerce sites, visitors usually don't care.  Here's 2 examples:

1. A friend of mine started a Shopify website, which is probably the biggest Shopify website in the world (not an exaggeration). For the first 3 years, his website was nothing "special" and could probably be designed by anyone here in their sleep.  A basic logo, simple lines, decent pictures of products.  Knee-jerk snarky-developer reaction would be "omg, your website sucks lol bye".  But, customers don't care.  They want a good deal and he provided that and had great timing.  Needless to say, he's probably a billionaire at this point.
2. With one of my own ecommerce websites, I'm not using whatever the latest cutting edge web development practices are (React / all that JS stuff / AJAX everywhere / crazy system infrastructure / etc.).  Customers don't care (customers in this case being Fortune 100 companies, even Fortune 1 companies... ? ).  They are looking for something specific and will find what they need.  Snarky developer reaction: lol bro you should be using technology 'x', a read about it in a blog this week.  Do the end customers care?  No, they are people looking to buy a product on our website, not judging the behind-the-scenes code.

It's easy to fall into this trap of taking whatever latest article you read and thinking you must apply it or you are falling behind / going to lose customers / are a bad developer / whatever.  I went through years of this until the above to examples opened my eyes a lot.  I would recommend focusing on your customers and what's working for you... not what trends are.

A bit confused - your examples seem to support my own philosophy of keeping things simple and avoiding bells and whistles such as autoplaying carousels?? Carousels were exactly the shiny thing that people were applying ten years ago without thinking. The Cambrian explosion of jQuery plugins etc... Customers care about sites not being assaults to their senses. This is an accessibility issue as well like I mentioned and can very well land people in trouble in the future.

I also find it weird that you would categorise the work of researchers like Nielsen Norman Group as "group-think" (or is it just the "Group" in the name as a trigger? :)).

[eydun]

@ryan and @Pete Congratulations on the site upgrade! It is impressive to see all the elements of ProcessWire coming together in a unified solution. Best of all, the website seems to be blazingly fast. Thanks for sharing.