New post: New PW website ready

[ryan]

This week I’m glad to report the development progress on the new ProcessWire.com website is ready for preview and I’ve placed it in a subdirectory for testing. You can find it here:

https://processwire.com/newsite/

Of course, this is just version 1 of the new site, but it’s now got quite a bit more updated content than the existing site, so I don’t want to wait much longer to replace the existing site. I’m still working out a few small details, but it should be 99% functional. I expect to replace the existing main site early next week. If you have a chance to test it out, please let me know how if you come across anything that isn’t working or any browser/platform specific issues. Thanks for taking a look and testing it out. I’ll have more details next week, along with a new core version on the dev branch with several updates currently in progress. Have a great weekend!
 

[louisstephens]

I really like the new design Ryan! I have only one suggestion; would it be better to move "Getting Started" to somewhere a little easier to find for new users? Thus far, I have only been able to access it here, and it is tucked away from the main sidebar on the right.

[Robin S]

Nice!

A quick observation: I think there needs to be a max container width (1920 pixels? 1600 pixels?) and not fully fluid. Modern monitors can be very wide and fluid sites often don't account for this. My monitor is 3440 pixels across and so the layout can get overly spread out:

[wbmnfktr]

Things and thoughts... will follow after a more in-depth look.

Meanwhile I want to say: that's a super nice rebuild!

[Jonathan Lahijani]

One nitpick about the server in general.  You can access it (the home page for example) without https.  Ideally http should redirect to https.

[BFD Calendar]

It looks like the Dev Map doesn't show. Safari, Firefox, Chrome on Mac.

[dotnetic]

Here are my optimization ideas:

The dropdown menu on the right side is cut off (see screenshot)

The link "Community" directly opens the forums which has a different look and provides a different navigation. Users will be disturbed by this, because they are being redirected to another site, instead of staying on ProcessWires site.

The navigation item "Directory" should be named "ProcessWire Developers" or "Developer Directory". The best title IMHO would be "Find a ProcessWire developer" but that is too long for a navigation item.

And "weekly.pw" should have an explanation like "Weekly blog".

I think one of the biggest problems with the actual and the new site in general is, that information is distributed across different places. We have announcements in the ProcessWire blog, on weekly.pw and in the forums.

Why isn't weekly.pw integrated into the ProcessWire site? I know it's a site by @teppo. But what if he had access to write blog posts on processwire.com? This would make much more sense, and on weekly.pw there is also duplicated content, as it often says the same things as the latest blog post (mostly in a reduced form).
The weekly.pw blog post could have a title like "Weekly highlights"

Also I think the comment function on the blog post could be moved to the forums, because again we have two places to comment (directly on the site, and in the forums). Why don't you automatically create a new topic in the forums for every blog post, and people can comment there, so the conversation/discussion isn't distributed to several places?

More to come ?

[dotnetic]

Despite the mentioned things, I like the new site. Still looking what can be improved.

[Robin S]

Hey, does anyone know a web service that will load a website in an iframe or similar wrapper with custom CSS applied? So that the community can try out some alternative styling ideas for the new website design and share them here in a way that others can see directly in their browser rather than as static screenshots.

I'm sure there used to be some tools that did this but after looking I can't find any working ones. The two I did find are only for font changes, and both seem to be broken for me:

Typewonder - very basic (cannot target different fonts for headings or using custom selector), share function seems to be broken.
http://typewonder.com/home

Webfonter - only for FontShop fonts, also seems to be broken (font thumbnails fail to load and fonts do not update).
http://webfonter.fontshop.com/

Anyone know of something better, ideally that will add any kind of custom CSS and not just font-face changes?

 

[gmclelland]

Looking good Ryan.  One thing I noticed is the last dropdown menu "Docs" should open the same direction/way as the "Download" menu item but it doesn't.  It opens off screen causing horizontal scrollbars.

When viewing on Chrome.

Edit: it looks like jmartsch beat me to it.

Please consider giving the light grey and other muted text more contrast for accessibility.  See https://contrastrebellion.com/ for humor.

#666 for body copy gives AA, but #565656 gives AAA for example.  Chrome's inspector now includes a contrast accessibility checker when you click on the color swatch/square.  The curved line represents what passes the AA or AAA rating.

 

After reading the API examples, I want to know more about it.  I think we need a link or outlined button below the examples "Get started with the API" or "Learn more" so they can continue reading.

Now that I look at it more, maybe each homepage section needs it own call to action button below.  At first it wasn't entirely obvious that the headers on the homepage were links.  Ex.  Blog posts - might need a button below that say's "View all" or something similar.  Same for the Processwire Showcase and Shop.

Quote

Also I think the comment function on the blog post could be moved to the forums, because again we have two places to comment (directly on the site, and in the forums). Why don't you automatically create a new topic in the forums for every blog post, and people can comment there, so the conversation/discussion isn't distributed to several places?

- This might actually motivate new users to join the forums as well.

Those are just a few of the first things that come to mind when viewing the site.

Hope that helps

[3fingers]

Nice rebuild Ryan, well done.

Some small but effective tweaks I think should be considered:

a) Padding and line height it's too narrow for my eyes, I'd love to let the content breathe more.

b) What about using a vector/flat/illustrated image of a browser instead of that big iMac? It looks to me as outdated as (or more than) the actual site.

c) I'd like to see a bit more font-weight on the titles and a uniform size.

d) I usually avoid pure black as hell. I'm looking at code examples on the homepage ? More subtle background, even a "light themed version" would be better.

e) I know, you love it but....that blue it's way too much for me, expecially on the hero image on the top of the homepage. It's a personal preference though and I respect that.

f) As @Robin S mentioned, +1 for the boxed version (1440px for my tastes) ?

g) On the showcase page, what about using the Uikit card component for the previews thumbnails and the badge component for the respective categories? (eg. https://www.awwwards.com/websites/sites_of_the_day/) without the carousels?

[gmclelland]

@Robin S - haven't tried these, but maybe https://sitemod.io/ or https://userstyles.org/ or https://www.styleurl.app/ or https://www.canvasflip.com/visual-inspector/?

[Jonathan Lahijani]

14 minutes ago, Robin S said:

Hey, does anyone know a web service that will load a website in an iframe or similar wrapper with custom CSS applied?

Tampermonkey will let you modify the code of a page:
https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo?hl=en

You could create your own CSS file, and then establish a setting in TM to load that file (other's would have to do it on their browsers as well however).

[Robin S]

5 hours ago, Jonathan Lahijani said:

Tampermonkey will let you modify the code of a page

Yes, there are many browser extensions that will let you do this, but we want something that can be shared and viewed easily by others via a link.

6 hours ago, gmclelland said:

maybe https://sitemod.io/

Quote

Sitemod lets anybody modify a website without having access to the source code and get a shareable link to the modified website.

Sounds perfect, will check it out.

Update: I made my own tool...

 

[horst]

@ryan, the site is beautyful in so many details! I directly fallen in love with those little wire-loops and plugs etc. ? !

I will have some more in depth looks next week, as I have to work this weekend.

Only one thing I want to show you know: Unfortunately the fonts render very bad on my machine, win7 firefox 64. I'm aware that it do not render that bad on all win7 machines, but I'm also not aware of any special settings regarding fonts rendering on my machine. I setup my system completly new from scratch last year, and I left the most things by default settings where applicable, (to reduce time with the setup, as I have to change in 2019). There are, maybe 15% webfonts in websites that behaves like this one too. (?)

A 1:1 PNG screenshot is uploaded here, so that it doesn't get rendered through a forums image engine. Please look at it in 100% scale.

https://biriba.de/pw_pop3/new-pw-site---fonts-rendering-ugly-win7-ff64.png

 

[Jonathan Lahijani]

The offcanvas toggle icon is using the slightly older approach (the markup got updated at some point during UIkit 3's development):

Replace:
<a id=offcanvas-toggle class=uk-hidden@m href=#offcanvas-nav uk-toggle> <span uk-icon='icon: menu; ratio: 1.3'></span></a>

With:
<a id='offcanvas-toggle' class="uk-navbar-toggle uk-hidden@m" uk-navbar-toggle-icon href="#offcanvas-nav" uk-toggle></a>

[Jonathan Lahijani]

When scrolling down the home page, the animations of the 8 callouts cause a horizontal scrollbar to temporarily appear while they animate in.  Adding the 'uk-overflow-hidden' class to the #content-container div should fix that.

[adrian]

Overall looking great. Just a couple of quick things - I'll try to dig in deeper later.

1. I think The API examples using a mix of $pages and pages() is confusing. I would stick to one approach
2. The demo site should be running the latest stable which is currently isn't
3. I'd like to see a Github link on the homepage or preferably the footer for all pages. I think it gives an open source project legitimacy and advertising this upfront can be an important thing for swaying someone to look around further.
4. On the site directory, is there a reason for the category order? I think it's especially weird that "Newest Additions" is second.
5. Speaking of the sites directory - are you running a regular check on all these site (using @teppo's isit.pw) to make sure they are still powered by PW - I think it looks really bad for PW if a listed site has been moved to another platform.
6. The "What you'll love" page is so long. I saw the TOC links at the top and didn't initially realize that they scroll down on the current page. It seemed link too much to look at - where do I start?
7. This page (http://processwire.com/newsite/about/requirements/) lists PHP 5.4, but this one (http://processwire.com/newsite/docs/start/install/new/) says 5.3.8 still.
8. At the bottom of http://processwire.com/newsite/docs/start/install/new/ you state: "See our download page for additional download and installation options.", so I think it should link to http://processwire.com/newsite/download/core/, rather than http://processwire.com/newsite/download/
9. I think the master and dev download buttons on http://processwire.com/newsite/download/core/ should show the version numbers
10. Afraid I don't really like the blog page - I feel like the blocks are too confusing - I'd rather a more normal vertical approach and an image (when available) to go with each summary.
11. I was surprised that Page Reference fields are not listed here (http://processwire.com/newsite/docs/fields/). BTW - I think that all docs needs to use "Page Reference" rather than just "Page" because in PW "Page" is already used so much.

 

BTW - thanks for the link to Tracy from http://processwire.com/newsite/docs/more/

 

[dotnetic]

13 minutes ago, adrian said:

• Afraid I don't really like the blog page - I feel like the blocks are too confusing - I'd rather a more normal vertical approach and an image (when available) to go with each summary.
•  

I second that

[wbmnfktr]

Don't want to be kind of a grinch but what about...

• cookie/privacy info banner
• cookie and privacy pages
• local embed of Google fonts
• no external CDNs
• GDPR statement (even as a feature)

I know that pages and page-owners from the US aren't that much affected by laws like people from EU countries but setting up those trust(-worthy) pages like cookie policy and privacy pages could be a very good sign. Even something like an imprint page.

[adrian]

9 minutes ago, jmartsch said:

I second that

I would go with the first image for the existing posts and then from now on you could make use of a "feature image" option.

[tpr]

I like it, just a few observations:

• the pw-intro-screenshots are in JPEG, (optimized) PNGs would look better imo (no artifacts)
• the home page feels a bit crowded for me, especially the 4x2 blocks like the "Web developers love PW" and the "Clients love PW" sections. Some whitespace could help.
• slide-in, fade-in, etc animations: perhaps a bit too much, I would at least turn them off after the first appearance (if there's a way). Eg. scrolling up and down causes these animations to re-run, making reading text blocks harder (because you need to wait them to fully load).

[adrian]

A few more thoughts:

I feel like the Selectors page (http://processwire.com/newsite/docs/selectors/) needs to be more prominent. To me, this is more useful than the current "Getting Started" and "Tutorials" pages. Or at least, it should be a page that is listed on the Getting Started page.

Speaking of the tutorials page, I don't like that most of these are external links - even though they are great resources, I'd rather have users see a centralized source of the best tutorials on the PW site itself.

I don't like the pages that put the title next to the PW logo in the header, especially given that not all pages do this - I know it depends on what level page you are on (although not entirely), but I still find it a little confusing. I also don't think that the "Community" top level link should go anywhere.

On the variables page, you have: "page() accessing as a function can be very convenient, when available." - how or why wouldn't it be available? I know, but new users won't.

This one:

$pages->wire('page')

is actually quite confusing - again, I get it, but certainly never thought to use it like this and I think it would be really weird to do something like:

$pages->wire('fields')

I would say this option should not be shown.

I also am not sure about showing:

$this->page

when on the very next line you state that:

$this->wire('page')

is more efficient - why would anyone want to user the former?

 

Sorry for all the negative, but you know how feedback often is ?

[Jonathan Lahijani]

Working on this, which I hope to finish off at some point in a couple weeks after the main site launch:

It will be 2 minutes and 11 seconds long, which is the length of the audio (full audio here).

I will try to make it show off the power of ProcessWire as much as possible (tree, fields, matrix, front-end editing, api, docs, formbuilder, procache, github activity).  I may need to extend the music a bit for it all to fit.  Anyway, this is happening!

[grimezy]

Great work @ryan!  A really nice fresh new look.  I especially love the little fine details of all the wires and plugs.  I also like all the little testimonials scattered everywhere which relate to the content above them.

Just two little things I noticed that were not mentioned yet.

When in a sub category of the About menu, the navigation menu displayed on the left appears for each item except for 'Reviews' page.

The top menu has the same flow and look regarding the plug and circle for items 'About', 'Download' and 'Docs', but the others don't.  The plug and circle when on the 'Docs' page, using a widescreen monitor, the circle is outside the cord or overlapping the plug, depending on the width of the viewers monitor.

I can't believe so much has been done in such a short amount of time though, great work!