OJS mobile friendly

ammardent · October 30, 2016, 5:12pm

Dear guys,

I have one question,

I want to ask, how I can make my ojs journal mobile friendly?

Thanks

asmecher · October 30, 2016, 5:16pm

Hi @ammardent,

Are you using OJS 2.x or 3.x? OJS 3.0 features a responsive design, which is much more mobile-friendly than OJS 2.x.

Regards,
Alec Smecher
Public Knowledge Project Team

ammardent · October 30, 2016, 5:18pm

I use 2.4.8,

What should I do?

Please visit my journal : (jocms.org)

Thanks

Regards

asmecher · October 30, 2016, 5:29pm

Hi @ammardent,

Upgrade instructions are included in the OJS 3.0 package. Note that not all functionality that was available in OJS 2.4.x is available yet in OJS 3.0; see e.g. Getting Ready For OJS 3.0: When Should I Upgrade?

Regards,
Alec Smecher
Public Knowledge Project Team

ammardent · October 30, 2016, 5:37pm

Hi @asmecher

Would you please send me sample links from journals who are already use OJS 3.0?

Regards

asmecher · October 31, 2016, 5:08pm

Hi @ammardent,

See e.g. this post.

Regards,
Alec Smecher
Public Knowledge Project Team

fgnievinski · August 29, 2019, 11:37pm

Google Search Console has identified that my OJS v3 site is affected by two Mobile Usability issues:

Text too small to read
Viewport not set

Google recommend that I fix these issues when possible to enable the best experience and coverage in Google Search.

Here are details on the Mobile Usability report:

https://support.google.com/webmasters/answer/9063469

Please let me know if you have any tips.

Maybe this is something that should be fixed in OJS default installation?

Thanks,
-FGN.

israel.cefrin · August 30, 2019, 12:38pm

Hi @fgnievinski

You’ve mentioned that you’re using OJS 3. Did you set the Default theme, other than Default or a customized one as the theme of your journal?

Also, could you share your Journal URL or is it under development and not public yet?
And is this issue related to your journal’s home or a specific section of it?

Best,
Israel

fgnievinski · August 31, 2019, 10:06pm

Hi @israel.cefrin.

The journal is live.

I believe we’re using the default skin.

Thanks for looking into this!

-FGN.

israel.cefrin · August 31, 2019, 10:40pm

Hi @fgnievinski

I’ve ran a test using the Mobile Friendly tool (https://search.google.com/test/mobile-friendly) and the resulting report has no issues regarding to small text neither to a missing viewport setting. For the second issue you’ve reported, on your journal website source code, line 6 has it declared:

6. <meta name="viewport" content="width=device-width, initial-scale=1.0">

Could you please double check whether your Google Console isn’t reporting a cached version of your journal?

Also, I’ve noticed your journal is using OJS 3.1.2.0 and it is enabled the Default Theme which has been passed on automatic test for the initial page using Google Mobile Friendly testing tool: https://search.google.com/test/mobile-friendly?id=AJdgZKpg6dB2K6Yxt_I68A

Let me know if these issues are still showing up to you after you re-run the Mobile test.

Regards,
Israel Cefrin
Public Knowledge Project Team

mpbraendle · September 2, 2019, 11:25am

Did you enable the Citation Style Language Plugin? This plugin provides links to pages that exhibit the aforementioned issue.

You can avoid by excluding those pages for web bot harvesting by adding a

Disallow: /citationstylelanguage/

to your robots.txt .

In the Webmaster console, then mark these errors as fixed - Googlebot will try to recrawl the pages and remove the error.

israel.cefrin · September 2, 2019, 11:48am

Hi @mpbraendle

Could you please tell us an example page from Citation Style Language Plugin which causes these issue warnings? I can’t find it on the Testdrive installation to check it. If it can be fixed we would file an issue on Github repo then.

Thanks,
Israel

mpbraendle · September 2, 2019, 12:11pm

Hi @israel.cefrin,

you can take any article details page and look into the HTML source.

Example:

https://www.psychoanalyse-journal.ch/article/view/jfp.59.4

The problem starts at this code:

<ul class="citation_formats_styles">
																				<li>
											<a
												aria-controls="citationOutput"
												href="https://www.psychoanalyse-journal.ch/citationstylelanguage/get/acm-sig-proceedings?submissionId=1933"
												data-load-citation
												data-json-href="https://www.psychoanalyse-journal.ch/citationstylelanguage/get/acm-sig-proceedings?submissionId=1933&amp;return=json"
											>
												ACM
											</a>
										</li>
																				<li>
											<a
												aria-controls="citationOutput"
												href="https://www.psychoanalyse-journal.ch/citationstylelanguage/get/acs-nano?submissionId=1933"
												data-load-citation
												data-json-href="https://www.psychoanalyse-journal.ch/citationstylelanguage/get/acs-nano?submissionId=1933&amp;return=json"
											>
												ACS
											</a>
										</li>
																				<li>
											<a
												aria-controls="citationOutput"
												href="https://www.psychoanalyse-journal.ch/citationstylelanguage/get/apa?submissionId=1933"
												data-load-citation
												data-json-href="https://www.psychoanalyse-journal.ch/citationstylelanguage/get/apa?submissionId=1933&amp;return=json"
											>
												APA
											</a>
										</li>
																				<li>
											<a
												aria-controls="citationOutput"
												href="https://www.psychoanalyse-journal.ch/citationstylelanguage/get/associacao-brasileira-de-normas-tecnicas?submissionId=1933"
												data-load-citation
												data-json-href="https://www.psychoanalyse-journal.ch/citationstylelanguage/get/associacao-brasileira-de-normas-tecnicas?submissionId=1933&amp;return=json"
											>
												ABNT
											</a>
										</li>
																				<li>
											<a
												aria-controls="citationOutput"
												href="https://www.psychoanalyse-journal.ch/citationstylelanguage/get/chicago-author-date?submissionId=1933"
												data-load-citation
												data-json-href="https://www.psychoanalyse-journal.ch/citationstylelanguage/get/chicago-author-date?submissionId=1933&amp;return=json"
											>
												Chicago
											</a>
										</li>
																				<li>
											<a
												aria-controls="citationOutput"
												href="https://www.psychoanalyse-journal.ch/citationstylelanguage/get/harvard-cite-them-right?submissionId=1933"
												data-load-citation
												data-json-href="https://www.psychoanalyse-journal.ch/citationstylelanguage/get/harvard-cite-them-right?submissionId=1933&amp;return=json"
											>
												Harvard
											</a>
										</li>
																				<li>
											<a
												aria-controls="citationOutput"
												href="https://www.psychoanalyse-journal.ch/citationstylelanguage/get/ieee?submissionId=1933"
												data-load-citation
												data-json-href="https://www.psychoanalyse-journal.ch/citationstylelanguage/get/ieee?submissionId=1933&amp;return=json"
											>
												IEEE
											</a>
										</li>
																				<li>
											<a
												aria-controls="citationOutput"
												href="https://www.psychoanalyse-journal.ch/citationstylelanguage/get/modern-language-association?submissionId=1933"
												data-load-citation
												data-json-href="https://www.psychoanalyse-journal.ch/citationstylelanguage/get/modern-language-association?submissionId=1933&amp;return=json"
											>
												MLA
											</a>
										</li>
																				<li>
											<a
												aria-controls="citationOutput"
												href="https://www.psychoanalyse-journal.ch/citationstylelanguage/get/turabian-fullnote-bibliography?submissionId=1933"
												data-load-citation
												data-json-href="https://www.psychoanalyse-journal.ch/citationstylelanguage/get/turabian-fullnote-bibliography?submissionId=1933&amp;return=json"
											>
												Turabian
											</a>
										</li>
																				<li>
											<a
												aria-controls="citationOutput"
												href="https://www.psychoanalyse-journal.ch/citationstylelanguage/get/vancouver?submissionId=1933"
												data-load-citation
												data-json-href="https://www.psychoanalyse-journal.ch/citationstylelanguage/get/vancouver?submissionId=1933&amp;return=json"
											>
												Vancouver
											</a>
										</li>
																		</ul>

The web bot parses the href URLs and then harvests the pages (e.g. https://www.psychoanalyse-journal.ch/citationstylelanguage/get/turabian-fullnote-bibliography?submissionId=1933) - of course, these have no style information, and therefore, Google Search Console issues a mobile friendly error.

israel.cefrin · September 2, 2019, 3:03pm

Hi @mpbraendle,

I’ve attempt to check this page you’ve sent, however it is blocked by robots.txt as you mentioned:
https://search.google.com/test/mobile-friendly?id=sJEy_HU2gl2USO6nwXoWEQ

Hence, I took the source code to test with Google Mobile Friendly tool and I didn’t get any issue, see here:
https://search.google.com/test/mobile-friendly?id=U33ysAElmPqUBNx3gCbHQg

Have you tweaked your local plugin to prevent it from issues?

Best,
Israel

mpbraendle · September 2, 2019, 8:59pm

Exactly - as I described before

fgnievinski · September 3, 2019, 3:57pm

Google Search Console has raised two additional issues (four in total).

Here are some examples:

Text too small to read
Mapeamento da Vulnerabilidade de Evacuação em Caso de Desastres Naturais Empregando a Sintaxe Espacial | Revista Brasileira de Cartografia
Viewport not set
http://www.seer.ufu.br/index.php/revistabrasileiracartografia/citationstylelanguage/get/apa?submissionId=49222
Clickable elements too close together
Mapeamento da Vulnerabilidade de Evacuação em Caso de Desastres Naturais Empregando a Sintaxe Espacial | Revista Brasileira de Cartografia
Content wider than screen
Desambiguação dos Termos Mapeamento Topográfico em Grandes Escalas e Mapeamento Cadastral no Brasil | Revista Brasileira de Cartografia

As @mpbraendle has indicated, some issues seem related to citations, though not all.

@israel.cefrin, we could grant you viewing rights in Google Website Administrator Tools – if that could help, just send me your gmail, please.

Thanks,
-FGN.

israel.cefrin · September 3, 2019, 10:31pm

Hi @fgnievinski

I think I know the reason for this Google Mobile issues. As far I can see they are all related, excluding the second issue which is a Citation issue that should be blocked though.

The reason for small screen issues is the characters lenght of some links in your reference section. It enforces the view-port to either cut-off a portion of your content viewing, making it closer than it should be and/or to fit all content by miniaturization of viewing.
link-length-Annotation%202019-09-03%20192354

It can be fixed adding a custom Stylesheet to your theme via: Dashboard > Settings > Website > Appearance (tab) , scroll down to Custom CSS and upload a CSS file with following code:

.item.references a {
word-break: break-all;
}

It will ensure that long words (like links) won’t go over margin limits.
Please, after of clearing your site and browser cache, test it and let us know whether it has worked for you.

Best,
Israel

fgnievinski · September 14, 2019, 12:48am

Dear @israel.cefrin,

I can confirm that your fix has improved the visuals:

http://www.seer.ufu.br/index.php/revistabrasileiracartografia/article/view/45150

I’m getting mixed results when trying to validate the fix in Google Webmaster; it seems I have to wait for the validation to finish.

Thanks for your help, I’ll keep you posted.

BTW, maybe this css should be include as a patch for the default installation?

-FGN.

fgnievinski · September 14, 2019, 12:52am

Thanks for your suggestion @mpbraendle.

Can I edit the robots.txt file from within the OJS web interface?

Otherwise I’ll have to ask for our IT staff to do it.

Should they modify the proposed line:

Disallow: /citationstylelanguage/

to something that resembles more closely our journal URL, e.g.?

http://www.seer.ufu.br/index.php/revistabrasileiracartografia/citationstylelanguage/get/harvard-cite-them-right?submissionId=44911

Thanks,
-FGN.

israel.cefrin · September 14, 2019, 1:20am

Hi @fgnievinski

It has been created a PR in Github Repo, I think it can be available shortly for default installation. See here:

Best,
Israel