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.


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 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, we have to decide the width under which the columns are re-organized vertically. In web design, this is called the breakpoint value, and expressed in pixels. On the web, the usual default value is 768px. That's the one 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 never 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".