Minimalist responsive skin that works well on mobiles

This forum is for discussions on the Help & Manual Premium Pack and the Premium Pack Toolbox configuration utility introduced with Premium Pack 3

Moderators: Alexander Halser, Tim Green

Post Reply
jrhaddad
Posts: 20
Joined: Tue Feb 09, 2010 7:44 pm

Minimalist responsive skin that works well on mobiles

Unread post by jrhaddad »

Hello,

I am trying to publish web help manuals that have a minimalist look and that will work well on mobile devices. I have tried many skins included with HM7 and Premium Pack. I don't personally like the one with the Premium Pack because they are not so minimalist (at least the ones in V3 Responsive Skins). But that's just personal taste.

I have done something with a default skin in HM7 (iFrames responsive grey). You can see it here.

http://doc.k2geospatial.com/jmap/doc/6. ... index.html

I like the look (I will embed the Roboto font once I am set with the skin), but it does not seem to work well on my iPhone 6. For a reason I ignore, sometimes clicking on a topic will do nothing, but sometimes it will open the topic. I don't get consistent results.

Any advice?

Thanks.


Jean-Robert
User avatar
Tim Green
Site Admin
Posts: 23156
Joined: Mon Jun 24, 2002 9:11 am
Location: Bruehl, Germany
Contact:

Re: Minimalist responsive skin that works well on mobiles

Unread post by Tim Green »

Hi Jean-Robert,

I just tested this on my iPhone 6s Plus and there is definitely something wrong. My guess is that you have accidentally damaged the skin while modifying it. Also, it's a very bad idea not to use topic headers if you are targeting phones. At first glance you may feel that you are gaining screen space, but that is offset many times over by the elimination of the topic navigation.

My first suggestion would be to start over with a fresh copy of the original skin and make your changes one step at a time, testing after every change. Also include headers in your topics, at least initially. Then you will know which change is causing the problem. Use a local server like WampServer so that you can test quickly.
I don't personally like the one with the Premium Pack because they are not so minimalist (at least the ones in V3 Responsive Skins).
You might want to have another look. They are as minimalist as you would like them to be and the user can always hide all the navigation so that they can use the entire screen for the content. But it is available when you need it, which gives an improved user experience.
Regards,
Tim (EC Software Documentation & User Support)

Private support:
Please do not email or PM me with private support requests -- post to the forum directly.
jrhaddad
Posts: 20
Joined: Tue Feb 09, 2010 7:44 pm

Re: Minimalist responsive skin that works well on mobiles

Unread post by jrhaddad »

Hi Tim.

Thank you for your answer.
Tim Green wrote:My guess is that you have accidentally damaged the skin while modifying it.
I did not modify the skin actually. I used it as is. Any idea?
Tim Green wrote:Also, it's a very bad idea not to use topic headers if you are targeting phones.
All our manuals are configured without topic headers. We prefer it that way. Since this one is only for mobiles, I will consider putting back the headers just for this one.
Tim Green wrote:You might want to have another look. They are as minimalist as you would like them to be
I did not see them. I saw mostly skins with lots of background design. Maybe I looked in the wrong place (C:\Program Files (x86)\EC Software\HelpAndManual7\Templates\HTML Skins\Premium Pack 3.10\V3 Responsive Skins). Could you indicate there are the ones you are talking about?


Thank you!

Jean-Robert
User avatar
Tim Green
Site Admin
Posts: 23156
Joined: Mon Jun 24, 2002 9:11 am
Location: Bruehl, Germany
Contact:

Re: Minimalist responsive skin that works well on mobiles

Unread post by Tim Green »

I did not modify the skin actually. I used it as is. Any idea?
Hmm.. Please mail me the demo project you used here and the skin at support AT ec-software.com (replace the AT with @) and we will check it for you.
I saw mostly skins with lots of background design. Maybe I looked in the wrong place (C:\Program Files (x86)\EC Software\HelpAndManual7\Templates\HTML Skins\Premium Pack 3.10\V3 Responsive Skins). Could you indicate there are the ones you are talking about?
Those are the right ones but the background is minimal and can easily be changed or removed. See the documentation in the "Help & Manual Premium Pack 3.10" chapter in the help.
Regards,
Tim (EC Software Documentation & User Support)

Private support:
Please do not email or PM me with private support requests -- post to the forum directly.
jrhaddad
Posts: 20
Joined: Tue Feb 09, 2010 7:44 pm

Re: Minimalist responsive skin that works well on mobiles

Unread post by jrhaddad »

I just sent you the project.

Thank you.
jrhaddad
Posts: 20
Joined: Tue Feb 09, 2010 7:44 pm

Re: Minimalist responsive skin that works well on mobiles

Unread post by jrhaddad »

Hello Tim,

I decided to give it another try. My help projects were all old projects that had been adapted from version to version and going through many H&M updates.

I decided to start from scratch with an clean empty H&M project and skin. I also decided to follow your advice and reintegrate the "Topic has a separate header" option. I also decided to stop trying to embed the Roboto font by modifying the skin and I will rather wait until you support web fonts in a near future update (ultimately, I would like Web help and PDF versions all using Roboto fonts).

To recap, here are my goals:
- To publish help manuals using Web help, with a minimalist presentation.
- To have a single output that is also well viewable on mobile devices.
- To generate PDF versions for customers who ask for them.
- No keyword index.

I used the skin called "Webhelp, Responsible Blue, Keywordslist" because I like the look and its simplicity. At this point, I am not sure if it is the best choice. I have the Premium Pack but it is not very clear for me what the differences are, in terms of responsive design, etc.

The WebHelp version can be seen here: http://doc.k2geospatial.com/jmap/doc/test/
The PDF version is here: http://doc.k2geospatial.com/jmap/doc/te ... ue_2.0.pdf

It goes pretty well so far. But I still have a few questions and problems. Hope you can help me sort it out.

Questions/problems :

Webhelp
- On my iPhone, sometimes, touching a topic title in the TOC will not bring the topic. I believe I reported that already. It still does it.
- Topic called "Utilisation des styles" is not displayed properly on my iPhone. Seems like the table at the bottom is making the whole page too wide. I activated the table relative size and activated word wrap for the style. On my computer though, when I look at the topic in my browser, it adapts well to all window sizes (responsive mode).

PDF
- I need to delete the Index (with its page #) from the TOC in the .mnl file. Is this the proper way to do it?


If you have any advice, or if I am doing something wrong, the choice of skin, etc., please tell me. I really need to get back on the track with this.

Thank you!

Jean-Robert
User avatar
Tim Green
Site Admin
Posts: 23156
Joined: Mon Jun 24, 2002 9:11 am
Location: Bruehl, Germany
Contact:

Re: Minimalist responsive skin that works well on mobiles

Unread post by Tim Green »

Hi Jean-Robert,

Webhelp
- On my iPhone, sometimes, touching a topic title in the TOC will not bring the topic. I believe I reported that already. It still does it.
The first touch selects the topic, the second touch switches to the topic frame. On iOS Mobile Safari taps may sometimes not register the first time.
Seems like the table at the bottom is making the whole page too wide.
You are expecting magic -- the problem is the simple fact that you are using a table. 8) A table is a solid object. It CANNOT adapt to a responsive layout. Tables will ALWAYS break responsive layouts on small devices like phones. If you want responsive design, stop using tables. That is a simple fact of life. In the next update to the Premium Pack we are introducing a new feature called "tap tables" that will allow you to be lazy and keep your old tables: You just add a special CSS class to the table style name and the table will be hidden on phones and small tablets and replaced by a [Tap to Display Table] bar. When the user taps the bar the WebHelp will be hidden and only the table will be displayed, in scrolling mode so that phone user can scroll around in it and view all the contents.
PDF - I need to delete the Index (with its page #) from the TOC in the .mnl file. Is this the proper way to do it?
There are two simple steps to this:
  1. Open the Keyword Index section in the template, select its Page Options in the Pages menu and turn the "Print this Section" option OFF.
  2. Select the Table of Contents section in the template and delete the entries for the keyword index and its page number.
Regards,
Tim (EC Software Documentation & User Support)

Private support:
Please do not email or PM me with private support requests -- post to the forum directly.
jrhaddad
Posts: 20
Joined: Tue Feb 09, 2010 7:44 pm

Re: Minimalist responsive skin that works well on mobiles

Unread post by jrhaddad »

Hello Tim.

Well, the magic works in all other topics, I don't know why you say that. They all have tables and the resizing works perfectly except for that one I mentionned (grey block of text). I am ok with the way the tables get resized on small displays and I don't see how I could stop using the tables anyway. Besides, lots of websites that show source code examples will allow that part only to scroll horizontally. That might be an interesting approach too.

--> Anyway, I found why only this specific table was not resizing. It had long lines of text without spaces and because of that the text did not wrap. I added a few spaces for a test and now it resizes perfectly.

Now the only problem I have left is when clicking on topics in the TOC, it won't open the topic. Even if I touch many times, it won't open. But if I select a topic and touch the hamburger button at the top, it will open the topic. Again, sometimes it works fine. Running iOS 10 in iPhone 6. I just tested on Android and I have the same results.

Any idea how I could fix this last issue? Should I use another skin?

Thank you.

Jean-Robert
User avatar
Tim Green
Site Admin
Posts: 23156
Joined: Mon Jun 24, 2002 9:11 am
Location: Bruehl, Germany
Contact:

Re: Minimalist responsive skin that works well on mobiles

Unread post by Tim Green »

jrhaddad wrote:Well, the magic works in all other topics, I don't know why you say that.
It will only work on tables that contain only text with enough fluid column widths to resize to the small device screen. Anything that goes beyond that, and particularly layout tables, will break responsive layouts. 8)
jrhaddad wrote:Now the only problem I have left is when clicking on topics in the TOC, it won't open the topic. Even if I touch many times, it won't open. But if I select a topic and touch the hamburger button at the top, it will open the topic. Again, sometimes it works fine. Running iOS 10 in iPhone 6. I just tested on Android and I have the same results.
That's strange and it may have to do with something in the topic ID. Do you have any unusual characters in the ID of the affected topic? Strictly, that means ANY characters that are not a..z, 0..9, - or _, or an ID that starts with a number instead of a letter.

If you continue to have problems with this please mail me a demo project and the skin you are using at support AT ec-software.com (replace the AT with @) and I'll check it out. :)
Regards,
Tim (EC Software Documentation & User Support)

Private support:
Please do not email or PM me with private support requests -- post to the forum directly.
jrhaddad
Posts: 20
Joined: Tue Feb 09, 2010 7:44 pm

Re: Minimalist responsive skin that works well on mobiles

Unread post by jrhaddad »

Ok.

Topic IDs look normal.

I just sent you my project files by email.


Thank you!

Jean-Robert
markusflow
Posts: 50
Joined: Tue Apr 30, 2019 4:29 pm

Re: Minimalist responsive skin that works well on mobiles

Unread post by markusflow »

Hi Tim, hi Jean-Robert,

any hint about that issue? Have you solved it?
Now the only problem I have left is when clicking on topics in the TOC, it won't open the topic. Even if I touch many times, it won't open. But if I select a topic and touch the hamburger button at the top, it will open the topic. Again, sometimes it works fine. Running iOS 10 in iPhone 6. I just tested on Android and I have the same results.
I figured this out today, too. The clicks work in the Dev-Tools of Chrome but not on the mobile devices. But I do get a message in the console:
8Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
User avatar
Tim Green
Site Admin
Posts: 23156
Joined: Mon Jun 24, 2002 9:11 am
Location: Bruehl, Germany
Contact:

Re: Minimalist responsive skin that works well on mobiles

Unread post by Tim Green »

Hi Markus,
markusflow wrote:any hint about that issue? Have you solved it?
What version of the Premium Pack skins are you using? I can't reproduce this with the current version, neither on iOS nor on Android. However, the oldest version of iOS I now test on is 12, which runs fine on iPhone 6 (and much better and faster than version 10, which you are using, by the way). In the Chrome console in Phone mode I can sometimes get the non-passive event warning, but not on topic selection. That only comes on switching between TOC, Index and Search tabs. And in that case I'm pretty sure that the warning is spurious, because no scrolling is occurring when you do that. I could remove the preventDefault() statements on the listeners for those events but I really don't think it is necessary. All it does is suppress a spurious console message.

Try visiting http://www.it-authoring.com/info/pp3help/index.html with your mobile device, which is compiled with 3.48 (not yet 2.49). Does it work there?
Regards,
Tim (EC Software Documentation & User Support)

Private support:
Please do not email or PM me with private support requests -- post to the forum directly.
markusflow
Posts: 50
Joined: Tue Apr 30, 2019 4:29 pm

Re: Minimalist responsive skin that works well on mobiles

Unread post by markusflow »

Hi Tim, thanks for investigation.

Your link works. I use PP 3.48. So my theme adaptions must have crashed this function, however the desktop version and the Chrome Phone version work as expected.

Thanks anyway. It‘s my turn do get this work again.
Post Reply