New post: New PW website ready

[horst]

Oh, work is also rendering very sharp and clear here!! ?

 

[horst]

5 minutes ago, ryan said:

Making them PNGs doubles the size

Implementing a basic support for additional webP format in PW is just around the corner, (when I next get time to do the implementation in IMagick. In GD is already working.) ?

 

[dotnetic]

The problem with the dropdown to the right does not come from setting the zoom, but you can simulate it with it. The position of the dropdown is correct to exactly 1440 pixels width, and if your browser window is wider than that, for example 1441 pixels then the dropdopwn goes to the right. That was for latest Chrome on Windows 10.

Here is a screenshot form latest Firefox on Win 10, where the dropdown is ALWAYS to the right:

To test this on different operating systems and browsers you can use Browserstack (paid)

[Chris Bennett]

Weird one relating to the Docs dropdown not behaving. Win7 here, can reproduce the aligning left at certain zoom levels, not at others. The weird part is if I change fonts to /?font=roboto, the issue disappears. Not sure why or what that means. Raleway, for example, exhibits the same problem with unwanted left align.

[adrian]

Hey Ryan - thanks for all of today's changes - it's really coming along!

A few more thoughts:

1. On the core download page (http://processwire.com/newsite/download/core/) in the right sidebar, the grab.pw link directly downloads the master.zip file. I don't think users will expect that - they will expect to visit a grab.pw website. Maybe it's just me, but the distinction between grab.pw and www.grab.pw is pretty weird. Also, does anyone ever use these links? Honest question because I have never thought of using them and I am not sure that they offer any real value - just seems a little like unnecessary and confusing options.

2. We have a LOT of different install options with the bitnami etc, soma install and even @bernhard's https://processwire.com/talk/topic/18166-processwire-kickstart/

3. There seems to be a bug when clicking on the close button for the live search - probably best shown by a screencast - see how closing it temporarily shows the menu, but then the search box comes straight back again.

4. I'd love to see the ESC key not just clear the live search text, but also remove the search box and display the menu again. Even though you improved it by hiding it when un-focusing it, I think this would also help - I know I use the ESC key a lot for stuff like this.

5. In response to my earlier comment about linking to the Github repo for your Upgrades module, on https://processwire.com/newsite/about/what/#easy-to-upgrade you point to the modules directory, so there is a lack of consistency here.

6. On the https://processwire.com/newsite/docs/fields/repeaters/ page you state "When you edit a repeater field in your page, you edit all items at once. Is this necessarily true now that repeaters have ajax loading? I know the point is to discourage use of repeaters when there will be too many items which I agree with, but I wonder is that statement is still maybe a little confusing.

7. Also on the https://processwire.com/newsite/docs/fields/repeaters/ page you have two links to "PageArray" which are absolute URLs so they currently go to: https://processwire.com/api/arrays/page/ instead of https://processwire.com/newsite/api/ref/page-array/

8. I couldn't find any docs for field templates that you described here: https://processwire.com/blog/posts/more-repeaters-repeater-matrix-and-new-field-rendering/#processwire-3.0.5-introduces-field-rendering-with-template-files - is this somewhere in the new docs that I missed?

I think that's all for this round ? Keep up the great work!

 

[ottogal]

Really overwhelmed by the incredible efforts by you, @ryan, and the community! Many thanks!

My two cents on colors and contrast:

Making the blue background darker would increase the readability of the white text on it (and of the h3/h4 headlines on white) - and it would reduce the irritation on totally blue pages like the blog. I'd propose https://processwire.com/newsite/?color=1155DD.

And, please: Make the body color darker, say #333333. Reading text with too low contrast ist very tiring.

Two more remarks:

I like the font "Krub" - it's looking fresh and modern, like PW is - whereas the font "Work" looks oldfashioned to me.
But of course, if a font is not rendered well on some platforms, it's not an option.

I'm not sure you should show an image of the iMac (despite the pride owning one...). At least I would remove the foot of it, so it's brand is a bit less obvious.

Again: Thanks and compliments!

[MoritzLost]

9 hours ago, ryan said:

 

@teppo I am using a retina screens, both on my aging MBP and 27 iMac. However, my eyes are not so good, so I simply can't see anything if I use the scaled down resolutions. ? I have to use the default res (2560x1440 on the iMac). Not seeing the artifacts myself, but I know they are there, as I definitely saw them when I exported them in Photoshop. But the scaling them to 50% down (for hidpi) must have taken care of that. If using screen at native resolution (non-hidpi) I can see how the artifacts would show. I'll try re-exporting these. Making them PNGs doubles the size, but I think that's okay because I'm actually lazy loading these 1-by-1 as they display, so it's not slowing the initial page load.

For the record, I also see heavy compression artifacts on those screenshots. Normal full HD monitor here.

How about using some responsive images for those screenshots and the iMac frame? Then you can provide multiple PNGs and each browser/device only needs to download the size it actually requires. Also makes it easy to provide high-resolution variants for retina displays. Shouldn't be a problem to include a srcset in the function that loops over the individual screenshots and shows/hides them.

[ottogal]

12 hours ago, ryan said:

You can change the color of the entire site by using a URL with a “?color=<hexcode>” on any URL in the site. Once you do that, the color will be retained on any links you click on, so you can browse the site with your selected primary color.

Just stumbled over the fact that using this color attribute in the URL makes some links not working anymore. Examples:

1. On the page https://processwire.com/newsite/docs/selectors/?color=1144DD, clicking the submenu item Selector fields results in this bad URL:

http://processwire.com/newsite/docs/selectors/?color=1144DD#fields?color=1144DD

2. On the page https://processwire.com/newsite/docs/modules/hooks/?color=1144DD, clicking the submenu item About hooks results in this bad URL:

http://processwire.com/newsite/docs/modules/hooks/?color=1144DD#about-hooks?color=1144DD

[adrian]

There have been a few comments about the iMac frame on the homepage - I don't really mind it, but what about this? Not sure if it should extend below the blue area or not - anyway, food for thought.

[3fingers]

24 minutes ago, adrian said:

There have been a few comments about the iMac frame on the homepage - I don't really mind it, but what about this? Not sure if it should extend below the blue area or not - anyway, food for thought.

Even if is just the frame of an iMac I still feel it's very ugly and not representative of what is Pw. Moreover that image is the first thing a newcomer will notice on the homepage and it does not explain nor give credit to the quality pw deserves. Sorry if I'm a bit rough and direct, it's just because I really care about the project ?

What about something like this, where a simple and not recognisable osx frame serve as a placeholder for our purpose?

I still strongly believe that it's not important to show inisde that frame a 1:1 rapresentation of the backend, instead it could be used to show a sneak peek of the api, where some code is presented and act as an immediate hook for the visitor.

[horst]

To sum up my favourites: the look and feel of the screen presentation @3fingers linked to, but as a automatic slider with maybe 3 slides, in high image quality without artefacts as picture or srcset elements with webP alternatives. ?

Ps: speaking about the screenshot on the entrypage. 

[ryan]

Quote

Implementing a basic support for additional webP format in PW is just around the corner, (when I next get time to do the implementation in IMagick. In GD is already working.) 

@horst If already working in GD, what's necessary to make it work with the core? Or are you saying the ImageSizerEngineGD in the core already supports it? Admittedly I've not had much experience with webp but interested. Btw, how does the Barlow font version render over there?

@jmartsch I enabled permanent scrollbars here and now I'm seeing it. I applied a few adjustments that seem to fix it and will push those updates later today. 

Quote

On the core download page (http://processwire.com/newsite/download/core/) in the right sidebar, the grab.pw link directly downloads the master.zip file. I don't think users will expect that - they will expect to visit a grab.pw website. 

This is the way it has always worked (it did not change with the new site). However, I really have no idea of anyone is using it or not. I might disable it and see if anyone says "hey what happened?"

Quote

3. There seems to be a bug when clicking on the close button for the live search - probably best shown by a screencast - see how closing it temporarily shows the menu, but then the search box comes straight back again.

Thanks I fixed it locally and will push the update later today. I don't immediately know how to implement ESC key here but will revisit it later. 

Quote

I like the font "Krub" - it's looking fresh and modern, like PW is - whereas the font "Work" looks oldfashioned to me.
But of course, if a font is not rendered well on some platforms, it's not an option.

I think this is what I was feeling too (with Work Sans), there is kind of a typewriter feel going on. I still like it, but just thinking it's not the right fit here.

I like Krub better than any others I've seen so far, but if it's got rendering issues then we'd need to determine if the issue is reproducible beyond Horst's computer, which I'm guessing it is, though have not yet heard any other reports.  Barlow then Rubik are the other two that I think could do the job. 

Quote

Just stumbled over the fact that using this color attribute in the URL makes some links not working anymore. Examples:

I don't expect it to work with all links, it's just a quick-n-dirty way for us to see different fonts/colors. But it's not going to be retained as a feature of the site. 

Quote

There have been a few comments about the iMac frame on the homepage - I don't really mind it, but what about this? Not sure if it should extend below the blue area or not - anyway, food for thought.

It looks to me like an iPad, which doesn't speak to a development environment for me. Though maybe people are using them that way, I don't really know. But the goal with the frame was just to give the appearance of looking over the shoulder of someone's development and editing environment. While just a browser frame (or some other OS frame) is kind of what I expect to see here, anonymous, so I'd just tune it out. It lacks context of a dev environment that I think is needed here. It's got to be something that implies we're looking at the whole screen of an actual computer of a web developer, not just a window. I also don't want to show an iPad (or any tablet or phone) because that isn't representative of an dev environment, plus it implies something to do with mobile, which isn't a message we're trying to get across here.

While we'll start with the current frame, I also see it as a short term thing. I personally like the current setup but I know it's also subjective. Regardless of subjectivity, I think it communicates what needs to be, and that's what I'm focused on rather than whether people think an iMac is ugly or pretty. But an actual video is the end goal, and this needs no frame. I'd like to replace it with that video Jonathan was working on, once that's at a good point (and if he's open to it). 

[adrian]

10 minutes ago, ryan said:

This is the way it has always worked (it did not change with the new site). However, I really have no idea of anyone is using it or not. I might disable it and see if anyone says "hey what happened?"

I understand it's not a change from the current site, but I do still think it's confusing and would be an improvement to the new site.

[ottogal]

An observation:

The title of the newsite homepage is An open source CMS with a powerful API: ProcessWire CMS
while it was ProcessWire CMS: An open source CMS with a powerful API before.

Given that bookmark lists are using the titles (which often get truncated) the latter version should be kept.

[adrian]

35 minutes ago, ryan said:

I don't immediately know how to implement ESC key here but will revisit it later.

If you give the search input an id of "livesearch", then this works:

document.getElementById('livesearch').addEventListener('keydown', function(e){
    if((e.key=='Escape'||e.key=='Esc'||e.keyCode==27)){
        e.preventDefault();
        document.getElementById('livesearch').blur();
    }
}, true);

Maybe could be improved?

[Peter Knight]

 

I think the site is a huge step forward. Nice work ? IMHO it should go live ASAP and changes and bug fixes could be streamed in incrementally

My main points would be:

Text
It seems 'wordier' that the current site. On almost every page I'm hit with a wall of text. We should have more screenshots on internal pages.

Screenshots
I think we've lost something with the wall of text and more emphasis should be put on the screenshots.
I think you should loose the iMac mockup and replace with a simple collection of 10 or so screenshots which a user can cycle through. 

None of my clients has ever tried PW based on a description of the CMS. In contrast, almost every one has been an instant fan of the simplicity of the UI. I've had clients who were new to PW fire up the initial tree view and become instant fans. I think the essential simplicity of ProcessWire has been lost in an effort to describe ProcessWire. Pictures and 1,000 words and all that etc...

Video

One of the things that attracted me to PW was Ryan's video where he spoke about the CMS and what it means / stands for. It was sincere, clear and honest without hyperbole. I just rewatched it and it's still a very compelling piece of video and 100% of what is said is still relevant. Of course the screengrabs are out-dated but that didn't stop me exploring PW and diving in at the time. 

Is it worth including this and later on re-doing it? Edit: I found the video on the new site ?

API examples
This is subjective but I'd rather the API samples were a little more user-friendly in tone and presentation. An example I like is on Stripe.com

https://stripe.com/ie

If you scroll down the the section 'Developers First' they have a lighter background and a nice way to flick between the different methods

Zooming text
That's the only part I'd 100% change. It's too gimmicky for my tastes.

But seriously - good work. ?

 

 

[adrian]

2 minutes ago, Peter Knight said:

Video

One of the things that attracted me to PW was Ryan's video where he spoke about the CMS and what it means / stands for. It was sincere, clear and honest without hyperbole. I just rewatched it and it's still a very compelling piece of video and 100% of what is said is still relevant. Of course the screengrabs are out-dated but that didn't stop me exploring PW and diving in at the time. 

Is it worth including this and later on re-doing it?

This is still available at: http://processwire.com/newsite/about/background/

Also, regarding your link to the Stripe site - I really like their Runkit code sandbox. This might actually be a good example of how the Tracy Console could be included - actually embedded into a page, rather than as a Debug bar panel. I think this really helps to get devs engaged and seeing just how easy and powerful the API is.

[Mike Rockett]

On 1/6/2019 at 7:58 PM, 3fingers said:

Hey @Mike Rockett ? Have you somewhere your re-design mockups posted almost exactly 2 years ago?

I remember they were very well crafted and appreciated by all of us, especially the lighter version.  Does anyone remember them?

Maybe we could visually iterate over those in order to point the new website in the right and smarter direction, I'd love to hear some kind of feedback about it.

Hey! ? Wow, what a throw-back – can't believe it's been so long, haha! Those files saved by Craig are the right ones (thanks!), except for the last one.

[thetuningspoon]

FWIW, I really like the font and shade of blue. I also really dig the home page and how you've presented PW, interspersed with the user quotes. I found it very convincing ?

Agreed on getting "headless" on the page somewhere.

The documentation is really shaping up. I like the addition of the WordPress vs. PW section.

 

One critique... The tertiary menus on the right side on the doc pages are confusing to me. For some reason I just don't understand what I'm looking at.

Also, the hamburger menu looks a little generic. It would be nice to spice it up a little.

I also noticed the issue with horizontal scrolling. If you scroll to the right there is a small bar of white that appears. I've found the way to deal with this is to add an additional element inside of the body element that contains everything else on the site and put overflow-x: hidden on it (adding that directly to the body tag doesn't work in all browsers). But I haven't actually looked at your code so I don't know what is causing it.

[horst]

6 hours ago, ryan said:

@horst If already working in GD, what's necessary to make it work with the core? Or are you saying the ImageSizerEngineGD in the core already supports it? Admittedly I've not had much experience with webp but interested. Btw, how does the Barlow font version render over there? 

@ryan here is a screenshot with barlow font. Looking good here, (not best but good!)  https://biriba.de/pw_pop3/Screenshot_2019-01-08.png

Regarding webP, we have had discussions in the forums and at github, plus I have built it into GD already for basic usage.

With the current version here, you can add an additional param with the images calls to additionally create a webP image besides the requested variation.

With two hooks I'm already using it in test sites: hasWebp and urlWebp. In my markup generation for picture elements (or srcset), if hasWebp is true, I generate alternative webP image src for browsers that do support it.

The other cool thing (what I not have tried yet, but should become my favourite usage) is to use it with the lazyload class, that already includes checking for webP alternatives via JS, when enabled. So the only thing to do is to create the webP format besides the requested image.

I had planned to finish this during the holidays, but then got two jobs with one deadline 29.12.18 and the other has to be finished this tomorrow. (uff)

Here are the links to the discussions:

https://github.com/processwire/processwire-requests/issues/1#issuecomment-443164642

https://processwire.com/talk/topic/14236-webp-support/?tab=comments#comment-176944

https://processwire.com/talk/topic/14236-webp-support/?tab=comments#comment-177630

 

 

 

[ottogal]

5 hours ago, horst said:

here is a screenshot with barlow font. Looking good here, (not best but good!)  https://biriba.de/pw_pop3/Screenshot_2019-01-08.png

A direct comparison shows that typographically Kurb is way better than Barlow. Sigh.

 

[matjazp]

When reading the latest blog post (https://processwire.com/newsite/blog/posts/rebuilding-the-pw-site-5/), there are two links at the bottom of the page to the previous blog posts. This might be by design since there is no next blog post, but it looks odd having two previous posts... I see that the hamburger icon in mobile view is now fixed, thanks Ryan. When you submit a site to the showcase list, the link contains two slashes (/newsite/sites//submit). The categories list in mobile view overlaps.

[3fingers]

14 hours ago, Peter Knight said:

API examples
This is subjective but I'd rather the API samples were a little more user-friendly in tone and presentation. An example I like is on Stripe.com

https://stripe.com/ie

If you scroll down the the section 'Developers First' they have a lighter background and a nice way to flick between the different methods.

+1 for the lighter background, I percieve it more user-friendly too (or at least not totally black IMHO).

[Craig]

Have you thought about not using any webfonts at all, and instead use the native or system CSS font stack?

Doing this removes any cross-browser/device font rendering issues as well as removing several external resources (smaller download + even faster loading!)

 

There seems to be a shift towards this:

https://booking.design/implementing-system-fonts-on-booking-com-a-lesson-learned-bdc984df627f

http://markdotto.com/2018/02/07/github-system-fonts/

https://make.wordpress.org/core/2016/07/07/native-fonts-in-4-6/

Other resources:

https://woorkup.com/system-font/

https://css-tricks.com/snippets/css/system-font-stack/

[Chris Bennett]

1 hour ago, Craig A Rodway said:

Have you thought about not using any webfonts at all, and instead use the native or system CSS font stack?

Doing this removes any cross-browser/device font rendering issues as well as removing several external resources (smaller download + even faster loading!)

 

There seems to be a shift towards this:

https://booking.design/implementing-system-fonts-on-booking-com-a-lesson-learned-bdc984df627f

http://markdotto.com/2018/02/07/github-system-fonts/

https://make.wordpress.org/core/2016/07/07/native-fonts-in-4-6/

Other resources:

https://woorkup.com/system-font/

https://css-tricks.com/snippets/css/system-font-stack/

I quite like sites that use the system font stack, with the exception of Segoe UI which doesn't really behave like the rest.
For example, every Twitter button which defaults to Segoe for me looks off, with text dropped well below the vertical centre.
Just the nature of Segoe and not a huge deal, but I usually leave it out or replace it with something that plays nicer with the rest and is reasonably likely to be in cache, like Roboto. Speaking personally, I would even prefer a boring Arial than a weirdly aligned Segoe every day of the week.