Responsive Skins

Responsive content, layouts, and skins all contribute to the responsive design of your output; meaning, the way it renders and how it adjusts automatically for different device sizes. Responsive design techniques use HTML and CSS to increase usability while making your HTML5 output look good on any screen.

Consider the skin when thinking about output. A skin is a file that contains information about the appearance of an online output window. When a skin is responsive, the navigation elements (e.g., menu/table of contents items) are automatically adjusted depending on the size of the screen.

Note Responsive output is always enabled for Side and Top Navigation skin types, and skinless output. Keep in mind that the Austin template includes a Side Navigation skin.

How to View Responsive Skins and Media Queries

To support responsive output, HTML5 skins come equipped with three mediums/media queries—Web, Tablet, and Mobile. Web kind of serves as both a medium and media query in Flare (controlling how skins and content look on a large screen), whereas tablet and mobile are technically both media queries, not mediums. You can use these media queries to specify different looks when necessary for the various devices people might be using to view your output.

Note Sometimes the terms mediums and media queries are used interchangeably. See Mediums and Media Queries.

  1. From the Project Organizer, expand the Skins folder, and double-click Side-Navigation.

  2. In the HTML5 Skin Editor, select the Styles tab (if not already selected).

  3. From the local toolbar, the default Web Medium should be selected. This is what you will see if viewing output on a large screen. In the preview area to the right, notice the menu on the left side, and the search bar in the upper-right corner.

  4. Select Tablet Medium. This is what you will see if viewing output on a tablet, or when the width of the window is narrower and reaches a certain breakpoint. Notice the decreased width, the flyout menu in the upper-right corner, and the repositioning of the search bar.

  5. Select Mobile Medium. This is what you will see if viewing output on a mobile device, or when the window gets narrow enough for the mobile breakpoint. Notice the decreased width.

Note In the HTML5 Skin Editor, the user interface displays a Print medium button next to the Web, Tablet, and Mobile mediums. The main purpose of the Print medium is for controlling how the skin looks when printed from an online source. The Print medium in the skin is its own entity, separate from the other mediums, and it does not share the same purpose as mediums in the stylesheet or in responsive output.

How to Create a New Skin

For the Austin project, let’s create a new skin. Like the Side Navigation skin, the Top Navigation skin is frameless, flexible, and looks modern (where the main menu is positioned at the top).

  1. From the Project Organizer, right-click the Skins folder.

  2. From the context menu, select Add Skin. The Add File dialog opens.

  3. In the Source area, select New from template, and select HTML5 – Top Navigation.

  4. In the Skin area, in the File Name field, type TopNav.

  5. Click Add. The new skin is added to the Skins folder, and it opens in the HTML5 Skin Editor.

  6. With the Styles tab selected, click through the different mediums to get familiar with the new skin.

  7. From the local toolbar, click Mobile Medium.

  8. Let’s make a quick style change to the skin. Select the Header style group, and expand the Background property.

  9. In the Color field, type #964B00. (This will make the header background for the mobile medium brown.)

  10. Click Save the active file. to save your work.

How to Associate a Skin With a Target

In order to see a new skin in generated output, you can associate it with the target.

  1. From the Project Organizer, expand Targets, and double-click All-About-Austin-HTML5.

  2. Select the Skin tab.

  3. In the General area, from the Skin drop-down, select TopNav.

  4. Click Save the active file. to save your work.

  5. Select the Project ribbon. Then from the Build Primary drop-down, select Build All-About-Austin-HTML5. The Builds window pane opens at the bottom of the Flare interface, and the target begins to generate. When the build finishes successfully, the Build Progress cell turns dark green.

  6. Double-click the row to open the HTML5 output, and view it in a regular browser with the window maximized. Notice the new look that the TopNav skin design provides.

  7. Click and drag the browser window to reduce it. Notice the header turns from black to brown when it reaches the responsive setting breakpoint for the mobile screen size.

    Note With a maximized window, you might have to click the Restore Down icon first, in order to click and drag to reduce the size of the browser window.

    Note In the Target Editor > Skin tab, you can view the default Responsive Output Settings; that is, the Tablet Breakpoint, and the Mobile Breakpoint.