This page has a common layout consisting of this column of
text and a column of photos. For the mobile variant there’s
no room to fit both side-by-side, so the photos are arranged
under this text column.
All the content on this page, this text and the photos, are
shared by both variants. So I can edit this text, or replace the
photo or caption, and both the mobile and wide-screen
variants remain synchronized.
Animated Navigation Bar
You might notice that link buttons at the top of the website progressively fade in, left to right, as the page is revealed. While this could have been created using the Xara NavBar feature, this was done using just a simple button from the Content Catalog (that like all buttons has a mouse-over highlighting effect). And I just set the animation (Utilities > Web Animation) to be a ‘fade-in down’ effect on Reveal, with slightly longer delay for each button.Mobile Navigation
As is common for mobile width screens I have created ‘Hamburger’ style pop-down menu. Also each page has the page title at the top so you can always see what page you’re on. Lastly this top navigation bar (and all the items on it) are set to be Sticky so they remain on screen always as you scroll down the page. For the wide-screen variant the third link has a drop-down menu. This is created using the pop-down menu feature of the NavBar builder. So the third button was created by using a copy of the button and turned into a vertical NavBar (Arrange > Create Navigation Bar).
The caption for the photos have a specific text style called
Photo Caption. The mobile variant has the point set to be
larger as appropriate for small screen devices.
This page has a common layout consisting of
this column of text and a column of photos. For
the mobile variant there’s no room to fit both
side-by-side, so the photos are arranged under
this text column.
All the content on this page, this text and the
photos, are shared by both variants. So I can edit
this text, or replace the photo or caption, and
both the mobile and wide-screen variants
remain synchronized.
Animated Navigation Bar
You might notice that link buttons at the top of the website progressively fade in, left to right, as the page is revealed. While this could have been created using the Xara NavBar feature, this was done using just a simple button from the Content Catalog (that like all buttons has a mouse-over highlighting effect). And I just set the animation (Utilities > Web Animation) to be a ‘fade-in down’ effect on Reveal, with slightly longer delay for each button.Mobile Navigation
As is common for mobile width screens I have created ‘Hamburger’ style pop-down menu. Also each page has the page title at the top so you can always see what page you’re on. Lastly this top navigation bar (and all the items on it) are set to be Sticky so they remain on screen always as you scroll down the page. For the wide-screen variant the third link has a drop-down menu. This is created using the pop- down menu feature of the NavBar builder. So the third button was created by using a copy of the button and turned into a vertical NavBar (Arrange > Create Navigation Bar).
The caption for the photos have a specific text style called Photo
Caption. The mobile variant has the point set to be larger as
appropriate for small screen devices.
