Designing for mobile devices with the WordPress Nimble Builder

source of the image : pixabay

The Nimble Builder is built on a responsive CSS framework foundation ensuring that your the sections and columns adapts nicely and automatically to desktop, tablets and smartphones.

This documentation explains how the plugin helps your designing your site for mobile devices in live preview. The Nimble Builder let you customize some options by devices, like font sizes, or decide if a block of content has to be hidden or visible for a type of device. You can also customize the breakpoint for responsive columns.

Side note : if you worry about speed performances on mobile, you're totally right. Speed is key for your visitors. That's why Nimble Builder includes an option to load your images only when they become visible while scrolling. The option is located in the global Nimble options.

Smart image loading


By device customization

Some design options like font sizes, paddings or alignments have to be customized specifically for desktops, tablets or smartphones, depending on what you need to achieve. The font size is a good example of a web design option that can hardly be identical for a desktop computer and a smartphone.

This problem can be easily solved with the Nimble Builder. The user interface of the plugin includes a device switcher allowing you to customize options like the font size for each type of devices.

Designin for mobile devices with the Nimble Builder

Switching devices with the Nimble Builder

Font size

Alignment

Padding and margin

Height and width

Setting the visibility of a content element for a specific type of device ( desktop, tablet or smartphone )

There are 3 majors types of devices on which your visitor will visit your website : desktops, tablets and smartphones. The Nimble Builder allows you to decide on which device a block of content ( section, column or module ) has to be displayed.

The example hereafter describes how to use this option for a module. But the process is exactly the same for a column or a section.

  1. Click on a module's menu
  2. Open the visibility tab and set your visibility options.


Customizing the responsive column breakpoint

When designing for mobile devices, a row of columns is re-organized vertically in a single column layout. This is the default behaviour for mobiles. In web design, this is called the breakpoint value, and expressed in pixels. On the web, the usual default value is 768px. This is the value used by default by the Nimble Builder.

But there are sections for which the columns have to stay in a row for all devices, and not be vertically aligned. That's why the Nimble Builder allows you to customize the responsive breakpoint of the columns in your sections. You can customize it for your entire site, and by sections.

Sitewide custom breakpoint for all sections

  1. Click on the global settings icon
  2. Open the breakpoint tab and set your custom breakpoint.

Custom breakpoint for all sections sitewide

Custom breakpoint for a single section

  1. Click on a section's menu
  2. Open the breakpoint tab and set your custom breakpoint.

Custom breakpoint for a single section

Note : when custom breakpoints are defined both sitewide, and specifically for a section, the section breakpoint "wins".

Reversing the column direction on mobile devices

Nimble Builder allows you to change the order of columns when re-organized vertically on mobiles. For example, in a row of 3 columns, the default behaviour is that the first column on the left ( for non RTL sites ) goes on the top, and the last one goes at the bottom.

This concept is illustrated with the picture below ( this is an example for non RTL language site, like English )

flex direction 1

flex direction 2

source : https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox


There are cases when you need to change this order and display the last column on top. That's where the reverse option of Nimble Builder is useful.

Reverse column order with Nimble Builder