Note that you are also able to enter a Cell Offset value for each cell, which results in the cell being indented from the left. You need to enter different numbers in the Cell Width fields for each of the three media types (Web, Tablet, and Mobile). In the Responsive Layout window, a grid is called a "Row", and an individual HTML block within the grid is called a "Cell". Open the Responsive Layout window by clicking the new icon on the Home ribbon. The values for the widths are shown in the diagram above. So specifying a width of 4 for each of six items would result in two rows of three items. Blocks are placed side-by-side from left to right when there is space available, but if the next block would cause the total width of the row to exceed 12 parts, then the block is placed beneath to start a new row. For example, if you specify a width of 6, you are saying that the block should be resized to fill exactly half the width of the screen. You then express the width of each block within the grid in terms of these parts. Responsive Layout enables you to achieve this by dividing the full width of the screen into 12 notional equal parts. The diagram below illustrates these three different layouts. For example, you might want a set of six images, with an accompanying text hyperlink beneath each, to be displayed as two rows of three blocks on a large screen, three rows of two blocks on a tablet, and a single column of blocks stacked on top of each other on a mobile phone. In a nutshell, the Responsive Layout feature enables you to define, for a set of HTML blocks, a different grid layout for each of the three different standard screen sizes: Web (large), Tablet (medium), and Mobile (small). Top of page How does Responsive Layout work? An example of such a layout is shown below. Where Responsive Layout could be useful, however, is on your Help system's home page or on other landing pages that present a set of options laid out as a grid. For such content, we don't need any special techniques other than perhaps setting a maximum width for images and tables so that they scale automatically on smaller screens. Most content that we create as technical authors tends to be simple in layout, consisting of a single main flow of text, images, and tables. Applications of Responsive LayoutĪlthough the new feature is an exciting innovation, don't be under the misapprehension that you'll be using it on a regular basis during your day-to-day authoring. Until, that is, the recent release of version 12 with its brand new "Responsive Layout" feature. However, it has not been possible to use responsive design techniques within topic content without resorting to hand-coding of media queries or use of the Foundation Framework (described later in this article). This technology has been behind the scenes of the responsive HTML5 skins available in Flare since version 10. This has given rise to so-called responsive design, which typically uses a combination of the float property and CSS media queries to ensure that layouts adapt and reflow for a range of different screen sizes and orientations. One of the most interesting challenges for web designers in recent years has been to create layouts that succeed on the wide range of device types use to browse the Internet.
0 Comments
Leave a Reply. |