Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Default notmyidea theme is not mobile-friendly and will depress SEO #1704

Open
georgevreilly opened this issue Apr 21, 2015 · 18 comments
Open

Default notmyidea theme is not mobile-friendly and will depress SEO #1704

georgevreilly opened this issue Apr 21, 2015 · 18 comments
Assignees

Comments

@georgevreilly
Copy link
Contributor

@georgevreilly georgevreilly commented Apr 21, 2015

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

This comment has been minimized.

Copy link

@qingkaikong qingkaikong commented Jun 8, 2016

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

@mosra

This comment has been minimized.

Copy link
Contributor

@mosra mosra commented Oct 24, 2017

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

This comment has been minimized.

Copy link
Contributor

@jorgesumle jorgesumle commented Oct 24, 2017

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

This comment has been minimized.

Copy link
Contributor

@mosra mosra commented Oct 25, 2017

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

This comment has been minimized.

Copy link
Contributor

@mosra mosra commented Feb 10, 2018

@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

This comment has been minimized.

Copy link
Member

@justinmayer justinmayer commented Feb 10, 2018

@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

This comment has been minimized.

Copy link
Contributor

@mosra mosra commented Feb 10, 2018

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 #1980)
    • the format_link[s] filters could help in case of #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

This comment has been minimized.

Copy link
Member

@justinmayer justinmayer commented Feb 11, 2018

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

This comment has been minimized.

Copy link
Member

@iKevinY iKevinY commented Feb 11, 2018

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

This comment has been minimized.

Copy link
Contributor

@davidag davidag commented Aug 10, 2019

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? 😃

@justinmayer

This comment has been minimized.

Copy link
Member

@justinmayer justinmayer commented Aug 10, 2019

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

This comment has been minimized.

Copy link
Contributor

@mosra mosra commented Aug 10, 2019

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 😄 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 😅 Another problem caused by my lack of time -- it got popular sooner than I could make a different default theme for it.

@justinmayer

This comment has been minimized.

Copy link
Member

@justinmayer justinmayer commented Aug 11, 2019

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

@ryentzer

This comment has been minimized.

Copy link

@ryentzer ryentzer commented Oct 21, 2019

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

This comment has been minimized.

Copy link
Contributor

@Lucas-C Lucas-C commented Oct 21, 2019

Just a not that this issue may be related: #2536

@tbrlpld

This comment has been minimized.

Copy link

@tbrlpld tbrlpld commented Nov 15, 2019

@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

This comment has been minimized.

Copy link

@ryentzer ryentzer commented Nov 18, 2019

@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

This comment has been minimized.

Copy link

@tbrlpld tbrlpld commented Nov 18, 2019

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
10 participants
You can’t perform that action at this time.