Designing for mobile devices in WordPress with 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 break-point 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.
By device customization
Some design options like font sizes, padding 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.
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.
- Click on a module's menu
- Open the visibility tab and set your visibility options.
Customizing the responsive column break-point
On a smartphone mobile device, a row of columns is rearranged vertically into a single column layout. This is the default behavior for mobiles. In web design, this is called the break-point value, and expressed in pixels. On the web, the usual default value for this break-point is 768px. This is the default value used by the Nimble Builder.
But there are sections for which the columns have to stay in a row for all devices, and not be rearranged vertically. That's why the Nimble Builder allows you to customize the responsive break-point of the columns in your sections. You can customize it for your entire site, and by sections.
Sitewide custom breakpoint for all sections
- Click on the global settings icon
- Open the breakpoint tab and set your custom breakpoint.
Custom breakpoint for a single section
- Click on a section's menu
- Open the breakpoint tab and set your custom breakpoint.
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 behavior 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 )
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.
