Web Development Essentials for Content Designers: Page Reflow

This series offers print designers transitioning from InDesign to HTML an introduction to web development. After discussing composition, my second post focuses on page reflow. 

One of the most important differences between print and digital content design is how the design reaches the end user. Print design is first rendered (printed) and then sent to the reader exactly as it was printed. 

4652484f84a80f7228db887079

Digital design is first sent to the reader, and then rendered by their particular devices. 

074fa54561b8de4302dfc5c29a

Years ago, when digital content first began to take shape, this difference hardly affected content design. There was a limited number of screen sizes and most of them emulated traditional print media, anyway. However, as more and more mobile devices came online, it became clear that simply shrinking down the contents of a page to fit a screen was not a suitable solution. 

Enter responsive design. With responsive design, designers could create one flexible design that adapted to any given device. Fundamental to responsive design is page reflow, or the idea that digital content can (and should) change its layout to fit the constraints of the device on which it is being rendered.

4d8ef64d6395b59a4e0a8d14a8

Even though responsive design does much of the heavy lifting for designers, there are still important concepts to consider. In this post, I’ve outlined four key tenets of page reflow to keep in mind when designing responsively. 

Page Dimensions

One of the biggest differences between digital devices is the width of the screen and, consequently, the width of the content. While the width is usually a fixed dimension, digital designers can increase the page length, allowing users to scroll a page to view additional content. In the example below, the page reflows for smaller screens by increasing the overall length of the page.

edae03412e83ee56fa61b9c77a

Notice how the font size of the content did not simply shrink in proportion to the page size. Instead, the content reflows by wrapping the text at different line lengths. When designing mobile layouts, take into consideration that text size is not permanently tied to screen size, and developers can implement these kinds of variations through CSS.

Responsive Layout Guides

Since page width is typically the biggest layout constraint, designers will often use a vertical grid of columns to organize content. The columns extend indefinitely since the length of the page may change as the content reflows to fit smaller screens. The width or amount of columns is entirely dependent on the design and can even change as the page reflows (smaller screens may have fewer columns).

Content Order Still Matters

Reflow allows designers to change the perceived visual layout of content, but it’s important to remember that the HTML, the underlying outline of the content, still has a strict order. This means there’s a limit to the amount of layout changes that can be accomplished with only CSS. While a design can easily accommodate an image changing size, it would be much more difficult to change the order of the image and the paragraph.

Mobile screens tend to draw attention to the content order because many of the elements span 100% of the page width, since they cannot accommodate as many columns as a larger screen.

Accepting Minor Differences

One of the downsides of letting the users’ device render content is the lack of precise consistency. It is inevitable that inconsistencies will occur on different devices, mainly caused by different rendering software. Margins and font sizes might change slightly or layouts may appear relatively larger on one device than another. 

Instead of fighting these anomalies, adapt your design to accommodate for these differences. Allow design measurements to remain fluid whenever possible. When considering sizes for images and other media, try thinking in terms of percentages instead of fixed width. It’s much easier to make an image span 50% of it’s available area than always trying to define a pixel value equal to half of the screen width.

The bottom line: 

With all of the different-sized devices used to read your content, creating the right design may feel like an overwhelming challenge. However, by shifting your thinking from designing for a fixed page to page reflow, you’ll structure your design by new restraints and, more importantly, new opportunities. In my next post, I’ll talk more about these new opportunities by explaining how to convey interactivity through design. 

For more information on how content designers can use Inkling Habitat to create beautiful digital content without a web developer on-hand, request a demo from our sales team.

Like this blog post? Share it!

Explore Categories

Inkling NewsOperations Efficiency
  • James Harvon

    I didn’t realize how much expertise was needed to do insert printing. This is something that I would leave up to printing services. The translation process sounds like too much work. http://www.flottmanco.com/printing-brilliantly/insert-printing/

  • Alex Jennings

    You’re awesome, Dan! Thanks for informing us of the top 4 rules of digital print content production. I liked your last rule, “Build from re-purposeable patterns,” that’s a great suggestions! Hopefully I’ll be able to catch on; this field is always expanding. Thanks for sharing!

    Alex Jennings | Digital Printing

  • nyc site data your site article is so unique i read it fully your article content is nyc and 100% pure so thanks for the post..Alllicensekeys

  • Stephanie Daugherty

    WYSIWYM is a better choice for publishing to multiple formats. Instead of worrying about style, WYSIWYM allows authors to focus on structure, which works well for “single source publishing” – documents can be styled and restyled for a variety of different outputs – desktop web, mobile web, print, PDF, eBook, Microsoft Word, OpenOffice, and LibreOffice all have rudimentary WYSIWYM functionality by applying predefined styles to text, but a specialised WYSIWYM authoring environment like LyX avoids the temptation to try to make everything pixel perfect during the authoring process.

    As a bonus, working with structure instead of style makes it easy to generate a detailed table of contents for larger works, easier to attach bibliographic references to your work, and easier to generated detailed indexes.

  • Nastya

    Thanks for describing the other side of the coin (prototyping)! :)