New post: New PW website ready

[3fingers]

Something I've just noticed on my iMac 27'' :

https://processwire.com/newsite/docs/modules/types/ in this page the "modules & hooks" menu is on the right of the page

https://processwire.com/newsite/docs/modules/hooks/ here instead is above the main menu.

[ren]

Love it!

The only thing I'm not sure about is the emphasis on...

Quote

you can launch a ProcessWire site and then leave it for years without maintenance or updates [...] It’s that reliable and secure

I feel that a low maintenance overhead is already strongly implied by reliability and security sections.

I like to run updates if only to keep the CK Editor plugin up-to-date, which *does* have semi-regular security patches.

It might not appeal to developers for whom updates are bread and butter.

I'd rather see something like...

Lower maintenance costs, because security, reliability, and a stable API resulting in painless upgrades. Yeah, I once did a major version PW upgrade on a fairly complex 30,000+ page site and *nothing* broke! Zero. Zilch. Nada. It brought tears to my eyes. A lack of breakage that is unheard of in CMS land. Compare with regular minor version breakage for some other CMS ?

[adrian]

Not sure I like the showcase thumbnails in the right sidebar on some of the about pages, eg: https://processwire.com/newsite/about/why/ - they seem out of place to me and it's not actually clear what they will take you to.

 

[adrian]

Most of the links on this page https://processwire.com/newsite/docs/modules/types/ are broken - check out AdminTheme and all those below it.

[adrian]

Can you please disable autocomplete on the site search field - the browser's results get in the way of seeing/clicking the ajax returned results.

[MrSnoozles]

Also I just noticed that "speed" could be mentioned a bit more on the start page. I would say back in the day the phrase "ProcessWire open source CMS is fast. ProcessWire with ProCache is insanely fast!" piqued my interest and made me try the system.

[ren]

The search box doesn't close when losing focus, and tab doesn't shift focus to the other menu items. (Linux Chrome 68.0.3440.75)

[Robin S]

5 hours ago, kongondo said:

Robin, the CSS is not loading for me (you preview). Dev console throws an error as well about $ not defined.

Just want to check: did you click the link in the forum email notification or the link that is in the (current) post? I did update the link shortly after I submitted my post. As far as I can see the link that @adrian suggested is the same as the link that is in my post, which should be working. Please let me know if not, thanks.

[adrian]

Another issue that relates to my comment about the title of parent level pages being displayed in the header next to the PW logo. Typically the text of that title goes to that parent page, but in the case of the search page, it goes back to the homepage, eg: http://processwire.com/newsite/search/?q=tracy - I feel like this one should at least reset the search page to: http://processwire.com/newsite/search/ which actually brings up another issue - if you end up at this page, the search input field is poorly placed over on the right - it needs to be larger and left aligned and also it should not respond with "No matches found." when no search term is entered.

[adrian]

2 minutes ago, Robin S said:

As far as I can see the link that @adrian suggested is the same as the link that is in my post

At the time that @kongondo looked, it was linking to http instead of https which was the problem. The current link works for me now also.

[ren]

22 hours ago, gmclelland said:

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

Seconded. I find the body text on blue background slightly hard to read.

[3fingers]

Lots of consideration going on here ? Hope @ryan will be patient enough with us all! ?

I've made some visual arrangements of an inside page too:

- Font in Montserrat from Google Fonts

- Title of the page is smaller

- Bodycopy is smaller on larger line-height

- Paragraphs titles are uppercase

- The incipit on the top of the middle column is a bit muted and smaller

- Blockquotes stand out better with a slightly green background

- Sites thumbnails are no longer visible (they look off to my eyes)

- The main container is 1600px boxed

 

[ren]

If I were explaining why I love PW to another developer I'd say...

1. Unopinionated
2. Powerful stable API
3. Security
4. Extremely active, friendly, *knowledgeable* community.

I feel like that covers the major pain points that CMS/CMF developers feel, particularly 1) and 2).

PW has so many great points that it's tempting to want to cover them all. I kinda agree with others that maybe there are too many points, and too much content.

[kongondo]

23 minutes ago, Robin S said:

Please let me know if not, thanks.

 

20 minutes ago, adrian said:

The current link works for me now also.

Yes, it works fine for me, thanks.

[teppo]

+1 to giving contrast more consideration. Overall the site could use a bit of brushing up in terms of accessibility – some quick observations:

• Providing a skip to main content link would be nice, and while we're at it, providing another one for certain long lists of items (such as the showcase items) could also be a good idea.
• At least on the home page the logo icon and the text next to it are separate links, but still lead to the same location – I'd recommend hiding one of them from keyboard / screen reader users.
• There are no focus styles for the top navigation, so keyboard navigation feels quite strange; the cursor seems to simply disappear somewhere.
• The search icon doesn't seem to have label for screen readers to read, so it's just "link: newsite". Same thing with the close icon for the search.
• One more keyboard navigation issue occurs once I reach the showcase section: again the cursor disappears, and I actually have to browse all items (even though visually nothing changes on the screen) before it reappears.

This might've been mentioned already, but I for one keep getting the "home" link wrong, since (in some cases) the text link right next (which is visually connected to the logo and thus I would've expected it to lead to the home page as well) takes me somewhere else. This is one of those "oh, I see what you did there" cases: now that I've clicked the wrong link a couple of times I know how it works, but surprises like that don't exactly improve the overall experience ?

Additionally I find it very confusing that the navigation hierarchy doesn't match content structure. For an example, if I choose "Docs" > "API Reference" from the navigation, I'm suddenly taken to another area of the site – and probably for that reason there's also no indication about where I currently am in the top navigation, since this new area isn't included in the navigation, even though it's hierarchically a top level page.

Finally, I would recommend adding some sort of indication to navigation links that take the user out of current site. "Community" for an example is (a bit weirdly, in my opinion) linked to the Forum, which may come as a surprise to the visitor. I've always instructed clients to never, ever link to another site from their top navigation – but if we really have to do that, at least we should make it obvious what's happening ?

.. and all that said, this is definitely an upgrade to the old site. Sure, there are rough edges, and I must agree with a lot that has been said in this topic, but I'm sure we'll figure it out. Great job, Ryan!

[Robin S]

@ryan, having had a chance now to read some of the new text I want to say: great job! It's clear, insightful, and highly persuasive.

I notice that "I" is used regularly within the text - no problem with this at all, as I think it's the fact that PW is largely the brainchild of a single individual that has ensured the system has stayed lean and focused. But I feel like we need a profile page to introduce Ryan so people know a bit about who this "I" is.

 

5 hours ago, adrian said:

There have been a few recent comments about the text in various sections being too verbose - I'd just like to mention that I agree with this ?

I like the longer-form text, and I think people are often wanting detail. Many information sources these days seem to assume that everyone has a short attention span and it means that things are treated very superficially, which is frustrating for readers who want to learn more. There's a way to have the best of both worlds - a summary at the top and longer information below for those who want it. Regarding the summary, rather than this being just a list of jump links (which is too limited to be a summary) I think a linked heading with a single sentence summary underneath would be good.

 

1 hour ago, adrian said:

Not sure I like the showcase thumbnails in the right sidebar on some of the about pages, eg: https://processwire.com/newsite/about/why/ - they seem out of place to me and it's not actually clear what they will take you to.

I agree. Using showcase thumbnails is fine as a last resort so the sidebar isn't empty but these thumbnails are not that relevant or useful to the visitor. I think the sidebar should be used for links to other content related to the current page. We have a lot of blog posts and documentation pages that could be drawn on for this Related section.

 

I think it would be good to highlight Repeater Matrix a bit more prominently - because it's sold as part of the ProFields bundle it doesn't have as much visibility as the other standalone Pro modules. The "builder" functionality possible with Repeater Matrix is trendy right now and other CMS products are selling builder-type features hard. Frankly I think page builders are probably overused and not such a great approach for most situations, but they are popular and we should advertise prominently that this approach is possible in PW.

[mr-fan]

I don't wanna waste to much words on this but i have to write you my feelings

a) i love the concept and design from ryan!
b) and i love how constructive and good are all the input on this topic is! (no bashing or i would do it in red...or somehting like that)

I know that such a open disscussion could take many wrong turns on other places, but not here!
Great people here - wish all a great 2019

[Mikie]

Hey @ryan,

Looks great, will be a much easier sell for prospective clients. Well done!

Just flagging that categories accessed by the dropdown menu on the Sites page aren't working in the demo. Directs to /pwsite instead of /newsite.

Tried to search to see if anyone had flagged this, apologies if doubling up.

[Mikie]

I also don't necessarily agree with design by committee, but since this is the first thing you see I feel obliged to dive in...

Personally the iMac sans apple branding is a bit weird for the landing page gif since you end up with a big grey bar wasting space, and so much screen realestate is taken up by the display itself and not the content you are trying to show (pw in action). Also, it is such a ubiquitous image that most people will automatically notice something is off, and there may actually be legal ramifications for doing this. Not sure what the solution is, I'll have a think and pm you.

Secondly, the poor quality and artifacting in gifs are really noticeable, especially on retina displays, and nothing can be done to be rid of them. Have you though of a <video> for this? This is also an interesting solution: 

http://www.sublimetext.com/~jps/animated_gifs_the_hard_way.html

I'm pretty sure someone will have turned the above into an easy to use library and put it on GitHub.

Otherwise, as mentioned, great work!

[kongondo]

2 hours ago, Mikie said:

Not sure what the solution is

I prefer this...

22 hours ago, 3fingers said:

Moreover I've quickly swapped the iMac with a flat browser with a (really rough) image of the backend.

+1

[adrian]

Regarding those API examples on the homepage, there is an error in the first one:

echo pages('/')->children->each('<a href='{url}'>{title}</a>');

Exception: syntax error, unexpected ''>{title}'' (T_CONSTANT_ENCAPSED_STRING), expecting ')'

You need to replace the single quotes around {url} with double quotes so it looks like this:

echo pages('/')->children->each('<a href="{url}">{title}</a>');

That said, I don't like this example - firstly there is the use of the functionsAPI (which I mentioned above will be confusing unless you are planning on turning this on by default in new installs), but also it outputs this with all titles on the one line.

Perhaps a more useful example would be this, especially given that you state it as: "// Render your site’s primary navigation"

This is OT, but did I just discover a bug with these? EDIT: https://github.com/processwire/processwire-issues/issues/779

This doesn't work:

but these do:

Why does getting the homepage ('/') in the first example NOT work?

 

[adrian]

Back to the idea of the demo site having a Tracy Console - esque sandbox/playground with pre-saved API examples. Obviously this is just the Console in its current version, but you can see that I've saved the examples from the new homepage into the snippets list so that users can select and run them and edit as they wish. I think with a bit of work this could be cleaned up nicely to work as a way for users to see just how great the API is.

[MoritzLost]

Hey @ryan, looks great!

But I agree with @gmclelland and @teppo, the site has major accessibility problems; the thing I noticed immediately was too little contrast in the areas with blue background. Only the pure white headlines pass AA level, AAA fails completely (see Screenshot).

The ProcessWire blue is unfortunate as a background color, as there can't really be enough contrast to white copy on it, and black copy just looks bad and doesn't fit the theme. Obviously it would be some work to change that color at this stage, but the homepage of a CMS that aims to be inclusive really shouldn't have such accessibility issues itself. Maybe remove the background and use the blue as an accent color for buttons, outlines et c. instead? Or use a much darker shade for the background sections, something like @3fingers suggestion here.

 

Another thing, the main content on the documentation pages is a bit too wide for my taste, longer texts are harder too read since the lines are too long. Currently the #content-body sits at about 70rem, I'd reduce that to maybe 45~50 rem and center it between the sidebars. See screenshots, feels much easier on the eyes to me.

[3fingers]

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.

[Craig]

35 minutes ago, 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.

I saved a copy at the time - here they are (I think!) ?