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.
Choose 2, 3 or 4 columns wide on desktop.
Drag and drop the blocks where you want them and to order them on a phone width display.
Editing an individual block is extremely easy.
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.
On a phone, they all collapse into a single column controlled by their order left to right, top to bottom.
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.
