Responsifying the Design

The preview (and editing) area in Responsive Layout Maker is an actual browser. This has the advantage that the design will look and behave exactly like it will when it’s published to a live server. After all, a website is not a static image as sometimes suggested by the output of graphics programs like Photoshop.

In Layout Maker the design is interactive and resizable. The built-in size slider helps to test the layout and usability of the content at all possible screen widths. The fluid grid automatically adjusts — the page elements proportionally grow and shrink depending on the available space for displaying it. However, at some point layout or design changes are needed to prevent elements and content to become too small or otherwise unusable.

As an example, let’s look at the wireframe for the Layout Maker product page in the demo area below. It looks reasonable at 1st sight, but if you scroll down you will see that the product title appears below the icon at the full demo width (890px). In general, the original wide, spacious design starts feeling a bit crammed. This is especially noticeable when you compare it to the real Layout Maker product page or the responsive prototype at widths larger than the demo container allows. And at widths below 880px, the layout is pretty broken. No worries though, this is where the so called breakpoints come in.

Demo 1: A fluid grid but no breakpoints.

 

Breakpoints to the rescue

Breakpoints are the secret weapon of responsive web design. But despite that fact, a good definition is hard to come by, so here is our take on this. Short and concise, breakpoints can be defined as “design adjustments with style rules that are specific to certain defined screen resolution ranges”.

Desktop monitors have grown a lot over the years and offer lots of space, allowing for a wide multi-column layout with large fonts and imagery. However, for content to be readable and usable on narrow screens such as mobile phones and tablets, a smaller but taller column structure is needed. With breakpoints the same content can be presented in optimal form across the entire range of device sizes and screen widths.

Following each breakpoint a specific set of style rules is delivered, so the site seems to ‘respond’ to the size of the display device. Layouts, widths, font sizes and other design elements are revised where needed to keep the content in focus and pleasant to consume. This feels really dynamic, that’s why we started calling these breakpoint induced changes ‘responsive actions’.

An almost endless number of responsive actions may be specified, ranging from minor adjustments to image sizes, margins, and font sizes, to major layout changes. These major layout modifications are what Responsive Web Design is best known for. Responsive actions like shifting, stacking, and swapping of columns and page elements is what make a site truly device agnostic. The demo area below shows how the exact same layout can be adjusted where needed so the design and content look crisp and clear at every possible screen size. Yes, you can go wild with that slider below now!

Demo 2: The same layout but with breakpoints — sweet!

 

Working with custom breakpoints in Layout Maker

The workflow for adding the necessary breakpoints and style changes is intuitive. The built-in slider (we labeled this one Sizer) can be used to change the viewport, so the design can be inspected at every possible display width. Whenever a layout update and design tweak is needed, click on the plus sign above the device area indicator (top left). A dot will show up exactly above the current position of Sizer. The dot represents a breakpoint, indicating that as of that point style and layout modifications can be made. If more modifications are needed to assure an optimal layout at every single width, simply add more breakpoints where needed. The breakpoint that is active — the breakpoint that contains the updated style rules that are applied at the current width — lights up.

Content-driven design

There are two basic approaches to the responsive design process: desktop down and mobile first. For years web teams have been designing for a good desktop and laptop experience. With the surge of small devices (phones and tablets mainly) used to access websites, the experience had to be maintained all the way down to the smallest screen. The challenges and (screen size) constraints this creates, prompted the creation of an alternative approach: to start designing for the smallest screen. Both approaches have their merits, and since we feel design should be done from the content out, we added support for both workflows to Responsive Layout Maker. Choose what workflow you prefer or what fits the design scenario best, Layout Maker will be there to support it!

The choice for desktop down, or mobile first, can be made when selecting a grid system for a new project. In the first case, a breakpoint is active when Sizer is positioned to the left of the breakpoint. In the mobile first workflow, this works the other way around, the style rules are updated with the slider on the right of the active breakpoint.

Changing the layout at a breakpoint

Layout changes is what responsive design is best known for. They create room where needed, or fill in gaps when enough room is available. Frequently minor changes to the font size of headings is made to prevent them from wrapping at smaller widths. Such a wrap can have a big impact on the overall layout but this is easy to remedy in Layout Maker. Simply add a breakpoint just before the wrap happens and the layout breaks, then adjust the font size. Now continue to slide and you will see that with that change the layout will continue to look good a long way.

One of the most used and easy to understand major responsive layout actions is the stack. In Chapter 2 we explained how each content container ‘spans’ part of the grid. This can be changed at any breakpoint, thereby creating (or limiting) room for the elements inside of the content column. And if the span width of a column is increased enough — making the total span number of the columns in a row larger than the grid span — the most right side column will create room by stacking below the most left side column. Simply play with Layout Maker to get a feel for how this works, and use this article for a quick read about the mechanics of a responsive stack action and to look at some variations.