Where a design has a very long list of links that would exceed
the length of the page, or where the list is disproportionately
long for the page design, the list of links can be a separate
page in a separate document. The designer can manage and
edit a simple links page (or pages), which is (are) published to
the same directory
To open that page with the current page being viewed, the ‘list
page’ is called using an iframe within a placeholder.
The width of the list page should be no more than the width of
the mobile variant and is exported with the option Scale-to-
fit-Width.
The height of the placeholder is a design choice, but should
not exceed the page height.
In this example the desktop is 1200px wide and the mobile
variant 540px and the Listings page is 480px wide The text size
for the Listings page is 21px.
The Listings page(s) can be any length and the height of the
placeholder with each list can be varied though it should not
exceed the length of the page.
Design Notes
• The design uses Scale-to-Fit-Width (Pro Xv16.3 onwards) to transition between the desktop and mobile variant - the effect and transition can be viewed by squeezing the width of a desktop browser. This scales downwards until the mobile variant becomes visible. • There is ONLY one copy of any Listings page; each is a separate Xara document that is published to the main website directory (each needs to have a filename other than “index”. In this example the single listings page is “list-1”. Each list can therefore be maintained independently and placed anywhere in the main website. • In the desktop and mobile variants the Listings page placeholder is ‘sticky’ so wherever the visitor is on the page, it will always be visible. The placeholder in the mobile variant has a height of 600px; this means that the placeholder is fully visible in most mobile viewing windows. The alternative is to have the mobile variant placeholder non-sticky, in which case its length can exceed the viewing window and it scrolls as normal.
Where a design has a very long list of links that
would exceed the length of the page, or where
the list is disproportionately long for the page
design, the list of links can be a separate page
in a separate document. The designer can
manage and edit a simple links page (or pages),
which is (are) published to the same directory
To open that page with the current page being
viewed, the ‘list page’ is called using an iframe
within a placeholder.
The width of the list page should be no more
than the width of the mobile variant and is
exported with the option Scale-to-fit-Width.
The height of the placeholder is a design
choice, but should not exceed the page height.
In this example the desktop is 1200px wide and
the mobile variant 540px and the Listings page
is 480px wide The text size for the Listings page
is 21px.
The Listings page(s) can be any length and the
height of the placeholder with each list can be
varied though it should not exceed the length
of the page.
