Welcome Dialog

Welcome to the Community!

We have a brand new look! Take a tour with us and explore the latest updates on Adobe Support Community.


Testing Responsive HTML5 output

New Here ,
Sep 08, 2021 Sep 08, 2021

Copy link to clipboard

Copied

Hello, I am looking into working with the Responsive HTML5 output for the first time and I'm wondering how best to check that my project will display correctly on all devices. I want to be able to check that everything works before handing over the project to developers for publishing.

Is it as simple as resizing the browser window on the PC to simulate a tablet or smartphone? That seems too easy! I've tried copying the output files to my smartphone file system and opening it from there but it doesn't display properly - should that work if the project is correctly formatted? Or do I need to publish it somehow so I can view it online and check that it adjusts to whatever device it is displayed on? All advice appreciated, thanks. 

TOPICS
Output presets

Views

48

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Adobe Community Professional , Sep 08, 2021 Sep 08, 2021
Let's go back to your first post. Is it as simple as resizing the browser window on the PC to simulate a tablet or smartphone? That seems too easy! Yes, it is that easy. I've tried copying the output files to my smartphone file system and opening it from there but it doesn't display properly - should that work if the project is correctly formatted? No it won't. It is designed to run on Windows. When your developers put the help up on a server, then users will be able to point to the serve...

Likes

Translate

Translate
Adobe Community Professional ,
Sep 08, 2021 Sep 08, 2021

Copy link to clipboard

Copied

What's not working if you copied it to the device and opened the index page in a browser?

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Sep 08, 2021 Sep 08, 2021

Copy link to clipboard

Copied

The page only displays text or strange shapes, nothing like it appears on the PC. I'm using one of the example projects in RoboHelp which has a Responsive output but perhaps it isn't set up correctly?

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Sep 08, 2021 Sep 08, 2021

Copy link to clipboard

Copied

The samples are set up correctly. Generate a responsive output and open it in any browser on your PC. Then resize the window and you should see the layout change but work.

 

Then browse to the URL on your phone or tablet browser, that too should be fine.

________________________________________________________
See www.grainge.org for free Authoring and RoboHelp Information

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Sep 08, 2021 Sep 08, 2021

Copy link to clipboard

Copied

Thanks Peter. But at the moment I don't plan to publish the project to a server myself, so I'm trying to understand how I can still test that the content works on each device as there won't be a URL on the web that I can browse to. So if I save the project output to the phone or tablet, should I be able to open the first page in a browser on those devices and see the correct content? That was my first thought but it doesn't seem to work on my Android phone.

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Sep 08, 2021 Sep 08, 2021

Copy link to clipboard

Copied

Let's go back to your first post.

 

Is it as simple as resizing the browser window on the PC to simulate a tablet or smartphone? That seems too easy!

Yes, it is that easy.

 

I've tried copying the output files to my smartphone file system and opening it from there but it doesn't display properly - should that work if the project is correctly formatted?

No it won't. It is designed to run on Windows.

 

When your developers put the help up on a server, then users will be able to point to the server and it will work properly from there.

________________________________________________________
See www.grainge.org for free Authoring and RoboHelp Information

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Sep 08, 2021 Sep 08, 2021

Copy link to clipboard

Copied

Many thanks Peter, and sorry for the confusion. I seem to have been over-thinking this and making ot too complicated!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Sep 08, 2021 Sep 08, 2021

Copy link to clipboard

Copied

Most browsers have emulating features that allow you to view a web page as it would appear on various devices. This is part of the Developer Tools you can access with Ctrl+Shift+I. With the Developer Tools open, use Ctrl+Shift+M to open the Device Toolbar. Then you can select various devices to check the responsiveness of your output. You can also open the Developer Tools from a context menu on the page (with most browsers, it's Inspect).

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Sep 09, 2021 Sep 09, 2021

Copy link to clipboard

Copied

LATEST

Thanks so much @Kevin5FC2 , that's a great tip!

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Resources
RoboHelp Documentation