Pelican: Default notmyidea theme is not mobile-friendly and will depress SEO

[georgevreilly]

The notmyidea theme is not mobile-friendly, according to Google's Site Tester. Google Search is now penalizing the search rankings of non-mobile-friendly sites. Pelican users who care about SEO will likely see a drop in their rankings.

[qingkaikong]

Yes, I found this not mobile friendly as well, do we have a solution?

[mosra]

Sorry to revive an old thread, but I have something that might interest you: http://mcss.mosra.cz

It's a lightweight, self-contained CSS framework and Pelican theme that is designed to be responsive and mobile-friendly. Currently it's a standalone thing, but I'm happy to help integrating it (or parts of it) into Pelican.

[jorgesumle]

It's a nice theme. I like that it doesn't require an JavaScript. @mosra, if you make a pull request, please remove the external dependencies like Google Fonts. Basically, default themes should not breach users' privacy #2178

[mosra]

It's not that easy; the theme itself depends on a plugin that adds a bunch of Jinja2 filters and also fixes the HTML output to be proper HTML5 (details). I'm slowly trying to integrate the important parts of the plugin into Pelican itself (see e.g. #2163 or #2164), but that takes time and I'm not sure if all the things that the plugin does would be welcome :)

[mosra]

@justinmayer any thoughts on this?

I think we can all agree that the default notmyidea theme is not sufficient anymore and might scare away potential new users. With m.css I have a complete package for publishing content with Pelican that's lightweight, mobile-friendly and self-contained. Currently it's a fully standalone thing, however I think it's sufficiently minimal to be included as one of the builtin themes and make Pelican look better out-of-the-box. But:

• The CSS is based around modern HTML5 and what the builtin docutils reStructuredText HTML writer produces is far from that. I'm fixing it with a plugin that's also providing some more aids to the theme (which were originally part of #2164, but I eventually moved them out to this plugin).
• That plugin significantly changes how the HTML markup looks, which may break existing themes
• In order to use m.css to its full potential, there are additional plugins that expose additional components to reST, it may be useful to integrate them as well
• I have no idea how Markdown would work with this

This is just a side project that I need to power websites for my main project, nevertheless I'm happy to help integrating it tighter to Pelican -- if we find a way how to do that :)

[justinmayer]

@mosra: Thank you for following up. I was just thinking about this very topic yesterday and was planning on reaching out to you. It seems you beat me to it. 😉

I agree with all the points you (and others) have raised, and I think you've created something that could indeed serve as an excellent foundation for a new default theme. So, in short, I'm all for it. What do you think the next steps should be?

[mosra]

Just from the top of my head, incremental steps that could be done one after another:

1. The foundation for having a responsive mobile-friendly theme is the Grid Layout. It's just a single very tiny m-grid.css file and unlike most other things, this does not require anything special from the reST or Markdown output. Maybe even the current notmyidea theme could be rewritten using it to be made responsive. That could be a great first step in my opinion.

2. In order to make the m.css Pelican theme work, various Jinja2 filters from the m.htmlsanity plugin need to be integrated. I think many of them could be useful even outside of scope of m.css:

   • the format_siteurl filter helps in case the site is scattered across multiple domains / CDNs (saw multiple issues where this could help, for example https://github.com/getpelican/pelican/issues/1980)
   • the format_link[s] filters could help in case of https://github.com/getpelican/pelican/issues/2264, for example
   • the render_rst could make it easier for users to modify the theme with easy-to-write markup and is practically just exposing functionality that already exists in core Pelican

3. (Optional) Pelican has a builtin TYPOGRIFY option that enables SmartyPants for smart quotes, dashes and ellipses. It works well only for the English-speaking part of the world, one can't get German-style or French-style quotes with it. By accident I discovered that Docutils have smart quotes builtin and with proper language awareness on top. Unfortunately there are some corner cases where I it touches contents of <code> and <pre> tags, so I had to patch it a bit. The patched version is currently part of the m.htmlsanity plugin, but is pretty standalone and can easily integrated directly into Pelican to replace SmartyPants. The only difference to SmartyPants is that it requires --- for em-dash (-- is used for en-dash). The rest of Typogrify (orphans handling etc.) would stay the same. Also: this works only for reST, as it uses docutils internals. Another option is to cut it away from the m.htmlsanity plugin and make it completely standalone.

4. (Optional) The m.htmlsanity plugin also has hyphenation for better text flow on narrow mobile screens. Personally I like that feature very much, but it may not suit everyone, may cause problems with clipboard and adds a dependency on Pyphen. So I would suggest cutting it away from the m.htmlsanity plugin and make it a standalone plugin instead of trying to integrate it into Pelican.

5. Once the Jinja2 filters from the m.htmlsanity plugin are integrated (point 2), the theme can be used as-is. The current Markdown and reST output would look okay-ish with it, but it would lack some of the fancier features (such as highlighting active sections, for example).

6. In order to enable the fancier features and additional m.css components such as notes, blocks, buttons etc, the sane HTML writer from the m.htmlsanity plugin needs to be enabled. This is the first hard step in my opinion, as:

   • it should be implicitly enabled when the m.css theme is used so the output looks as intended
   • it should not be enabled by default, as that would break every other theme that's out there
   • it should be possible for users to enable it manually as an alternative to the Better Figures and Images, Better Code Samples and Better Tables plugins, which are horrifying in my opinion :)

7. Another important (and probably good to have builtin) plugin is m.components, that could be integrated as a last step. The remaining plugins could stay optional, as they serve differing use cases (not everyone needs math rendering, not everyone needs code snippets and not everyone needs to present photos in an image grid).

[justinmayer]

A very detailed write-up. Nicely done. I'm heading out the door right now but wanted to take a moment to ping @getpelican/reviewers and solicit their thoughts. What do you think?

[iKevinY]

Web development is far from my area of expertise, but I think @mosra's m.css project looks like a great addition to the Pelican builtins (if not replacing notmyidea altogether!). I'm a big fan of JavaScript-less themes, as I feel static site generators _should_ be lightweight all-around, which includes the content that they generate!

[davidag]

After reading #2575 and #2436, just say that it'd be great (and quite important, in my opinion) to improve the default theme, because as has already been said, it's the first contact for any new user of Pelican.

Using @mosra's m.css seems like a great way to do it, though I'm not sure of the complexity of it.

Using a well-known frontend framework/toolkit could have its advantages too, like less maintenance and future support.

@justinmayer do you have something in mind? :smiley:

[justinmayer]

I'm all for replacing the built-in theme, and I think @mosra's work could be an excellent base on which to build.

@mosra: What do you think? Would you be willing to lead this endeavor?

[mosra]

Unfortunately I'm very busy these days (and for the foreseeable future), so I'm afraid I won't have the time to lead this. But if somebody else wants to start, I am available to help, answer questions etc. -- just not being the main force. The main tasklist is outlined in my comment above, and even though it's 18 months old, it still holds.

One very important thing, tho: if m.css is going to become the default theme for Pelican, someone really needs to make a different color scheme for it :smile: Considering it's my "corporate identity", I'm not sure if having the same look as 100 other sites is a good thing to have :sweat_smile: Another problem caused by my lack of time -- it got popular sooner than I could make a different default theme for it.

[justinmayer]

Certainly understandable. With those points mind, who would like to volunteer and work on the integration as outlined by @mosra above?

[ryentzer]

I may can take a stab at it. What is the end-goal? Is it to have a simple responsive theme? Are frameworks like Bootstrap, Foundation, or Tailwind CSS frowned upon? I have extensive experience with Bootstrap and some Foundation. I don't mind looking into @mosra's framework, just wondering about the others.

[Lucas-C]

Just a not that this issue may be related: https://github.com/getpelican/pelican/issues/2536

[tbrlpld]

@ryentzer have you had a chance to implement some of the steps proposed by @mosra?

Otherwise I would try to implement the grid layout (1) as a start.

[ryentzer]

@tbrlpld I have not incorporated @mosra's grid.css file as I'm not familiar with it. I have used Bootstrap on several websites and applications but I have no problem rolling my own.

I did end up copying the not-my-idea theme and made it responsive using vanilla css. But, I went farther than I meant and created a responsive version that no longer looks like the default theme. I'll be happy to modify it or go back to the original smashing theme and just make that one responsive. I've attached some screenshots of what I did in case it's of interest.

screenshot 1
screenshot 2
screenshot 3
screenshot 4

[tbrlpld]

@ryentzer Haha, nice. Looks good. I will drop my efforts then and leave it to you. I like that you are doing it with vanilla css.

[sharmaeklavya2]

I designed a responsive pelican theme without any external JS, external CSS or external fonts, with the intention of keeping it as fast, lightweight and minimalistic as I could. It's not very aesthetically pleasing, but at least it looks better than notmyidea in my opinion. You can see it in action on my blog. I'm willing to add this as a default theme in pelican if it looks okay to the Pelican team.

Mobile screenshot (dark mode)
Mobile screenshot (light mode)

I can do this soon if not many changes to the theme are required, but if many changes are needed, I'll do this after mid-December 2020, since I'm busy these days.

[egberts]

@mosra m.css theme seems to be working for iPad, iPhone and wide-screen pretty well over at https://egbert.net/

[reagle]

I'd love to see an accessible, responsive, and simple (CSS flexbox-based; no/few dependencies; no javascript) default theme than can easily be customized. Issue #1280 has requested this for many years, and this issue is probably redundant to it.

[justinmayer]

@reagle: Agreed — this issue is indeed redundant. Also agree that a new default theme would be welcome. Hopefully someone will propose one in the near future.

[egberts]

In case those who want to see m.css in action without any JavaScript, my site uses it as well: https://egbert.net