Problem with responsive export

In general, responsive export does not work.

example here:
http://klotzer.pl/test/velara/index.html

Of the four layouts, two export correctly, the other two are crap.
(export single page with media query)

Scale to fit does not work.
Auto refresh does not work.
Especially 1366x768, two pages appear on one screen !

What I have to set in the export options for the correct effect?

Best regards
Mirek

image

image

Hi Mirek,

Welcome to the forums! Can you post the project here?

What browser?
What version of Web Export?

Single page with media query means that it will show the artboards in that size. If you have multiple artboards of the same size they will both show.

There should be warnings in the output where there are duplicate sized artboards in media query export.

Also, many of these features need JavaScript to work.

Hi,

  1. Google Chrome (78.0.3904.108)… and Microsoft Edge 44.18362.449.0
  2. Web Export 4.1.4
  3. I have 4 artboards, each in a different size: 480x720, 800x1024, 1280x800, 1366x768
    The first 2 are working correcty (480x720, 800x1024). On my tablet and mobile phone also.
    Next 2 browser sticks together (1280x800, 1366x768).

Best regards
Mirek

Interesting. It looks like it has to do with multiple artboards on the screen at a time.

(export single page with media query)

This is the least exported option as far as I know since documentation was not written about it until recently.

If you remove the bottom row of artboards does it work for you? It looks like there may be an issue that needs work.

Do you want it to support multiple artboards at the same size?

It doesn’t support multiple artboards on the same page using media queries well at this time with things like centering or deep linking but it’s theoretically possible. I can see about making this workflow work.

Here’s how it’s currently supported:

For one screen, say Home page, you select all of the sizes of artboards for this page and export one page.

So you would select the desktop, tablet and mobile artboards of the Home page. Then export that as a single page. Then you would select the desktop, table and mobile artboards of the Products page. Then export that as a single page. Any links you create would point to the other page.

Auto animate features are in development but not fully supported yet.

I have the same problem:sob:
My site designed by
1920 width
columns 12
gutter width 40
column width 70
left / right margin 320
when I export the webpage, and open it with chrome
the biggest one didn’t show.
I just follow the tutorial step by step but it still don’t work.
what I supposed to do or what I missing
please help me :cry:

Hi Joon,

Let’s trouble shoot.

  • For 1920 width artboard to show the browser has to be at least that wide.
  • Right now only one artboard at that size is shown. If you have two artboards of the same size both will be shown at the same size
  • Make sure the 1920 artboard is selected when making a selection

If you’d like send the project and remove any details in a private message.

Hi,

I have another problem with responsive export.

I’m trying to insert my own html code using the “Markup inside” function.
I can embed html code into only one frame (works very well).

Embedding the html code in the second frame (even on another page)
… ends with a beautiful disaster.
The pages overlap or the next page is displayed as blank.

I use “Single Page (show by size)”.
An error causes even the simplest code.
Exactly every embedded code …

If I write “multiple pages” everything is O.K.

Is it normal? Can it be fixed? Bypass the problem?
Maybe I’m doing something wrong?

Regards,
Mirek

Can you send me an example? You can send it in a message.

Hi,

index.html file - export “Single Page (show by size)”
The next page is displayed without animated.

iPad_land.html - export “multiple pages” everything is O.K.

After testing the various export options, the simple embedded html code (without animation) works very well.

Does “web xport” use any memory buffer, like “cash files”, “temp files” or something. Sometimes export does not work properly. I have to do XD restart, the export effect after restart is completely different.

Maybe it’s a Adobe problem :frowning:

Regards,
Mirek

index.zip (59.9 KB)

Hmm… It looks like you are embedding the HTML page in the Markup Inside field. This will cause problems.

If you want to embed one page in another page first create or export that other page and then use an iframe tag to point to that page.

I’ve attached an example project showing Page 1 embedding page 2.

iframe.xd (44.6 KB)

Plugins are started for each project. Once you have a project open it will sort of be “cached”. It’s more accurate to say they are loaded into memory. It might be better to think of plugins as web pages. Some code runs at the start and form elements are filled in until you reload the page. With plugins nothing is cached (as far as I know).

Press CMD + SHIFT + R or CTRL + SHIFT + R to reload all plugins. Or go to Plugins > Development > Reload Plugins.

image

Export should export the same HTML time after time. If you are able to recreate any issues I’d be interested.

Hi,

“iFrame” works very well. Thank you very much for help.

I asked about “memory buffering” because I noticed the strange behavior of “web export”.
The plugin remembers the order of selected artboards and to change it I have to restart XD …
It makes work very difficult. I don’t know how I can show this problem by example …

CTRL + SHIFT + R does not work.

Regards,
Mirek

Hmm… for creating a selection of artboards you have to select the artboards and then open the Export Artboard dialog. The last artboard selected is the settings artboard.

The order the artboards are exported are the order they are in the layers panel.

image

image

image

To change the order reorder the artboards in the layers. To create a new selection, select the artboards you want exported and select the same artboard.

image

I’d like to make this area more clear in the future.

Also, if you open the more details views in the same time you change export settings it loses the settings. The more details views are the template buttons and the code compare buttons.

Seriously … those little dots in the upper right corner … are these the arrows?
They are clickable …? And change the order of the selected artboards?
Unbelievable! :slight_smile:
I’m old and a little blind …

But it works :slight_smile:
It makes work much easier. Thanks a lot!

By the way a request.
Could the “Export artboard”, “Panel” and “Element options” windows be movable?
They hide half the screen and can’t see what’s marked.

1 Like

lol. The navigation buttons at the top let you select other artboards to export or change to their settings,

image

I’m not sure what you mean by changing the order. If you export showing slideshow buttons the order of the slideshow is changeable by moving an artboard up or down in the layers panel:

image

The dialogs are not movable. That’s nothing I can change but I’ll pass it on to the people that can! :slight_smile: