CMS Solution to Responsive Web Design Columns

by BANG! Website Design • November 19, 2019

Trying to build a web page with columns in the era of responsive web design is a challenge. Here's how we solved it using our CMS system for our client's.

Let me start by saying if you code your web pages by hand, this doesn't necessarily apply to you. Having columns on a web page that collapse down into a single column on phones is possible by hand. But trying to do so within a Content Management System (CMS) has been a challenge. We solved that by building what we call a blocks system where you can create individual blocks of content. These can be text, images, videos, etc. but each one is treated as an individual element and can be edited, cloned and reused. Background color of each block can be edited with a color picker or a hex value can be inserted. Don't want a background, click the transparent background check box. Drag and drop to rearrange each block's order. 

It's an elegant solution to handle chunks of content that work both on a desktop or a phone's screen.

Here's how it looks on the backend administration area.
Blocks System Admin Area

Choose 2, 3 or 4 columns wide on desktop.
Adjusting the columns used to display the blocks

Drag and drop the blocks where you want them and to order them on a phone width display.
Moving the blocks to change the display and order.

Editing an individual block is extremely easy.
Editing a block of content

On the public side, on a desktop computer, they look like this. One popular application of this would be a 2 column approach with a photo on one side and text next to it. You'll note we have both a Top Content and Bottom Content area for flexibility on laying out the page. This allows putting the blocks anywhere on the page.
Multi-Column Blocks System for Content Management

On a phone, they all collapse into a single column controlled by their order left to right, top to bottom.
Block content display on a phone width screen.

This provides a simple, no coding necessary solution for our client's to work with columns on their site. Our first application was showcasing multiple products with pricing. Being able to reuse the blocks meant they could go on multiple pages without having to re-key for every page. 

Just one more example of how BANG!'s Content Management System can be customized for our client's needs.

Recent Blog Posts