2 Columns When 1 Won’t Do

Although some would argue there is no place for two columns in modern day web design, the case can be made in some circumstances it adds values and enhances the user experience. The Xidipity two column template is easy to use and gives authors the creative freedom to add two columns exactly where it is needed.

Multi-column layout is popular in printed magazines and newspapers but not so much in web design as evidenced by the fact WordPress does not support this format natively. The reason for this is rooted in the science of sentence structure and the size of the page it is printed or displayed on.  A review of modern printed manuscripts show sentences typically contain 25 to 30 words with publishers recommending 20 words for readability. WordPress easily meets this standard without the use of two columns.

 

With all of this said, there may be times when two columns make sense from a design perspective and in those circumstances Xidipity has a solution.

 

Design Notes

The Xidipity two column solution is a customization of the HTML table. The reason for using this over a Flexbox design is the table works well with the TinyMCE editor and the result is the same.

 

 Installation

To insert a two column container simply click the ( vertical_split ) two column button on the menu toolbar.

 

Use Case

All Text 

This design provides a method where information is presented in a manner which allows the reader to pick and choose the items which are the most interesting to them. The example comes from the web page Lorem Ipsum – All the facts.

 

What is Lorem Ipsum?

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Why do we use it?

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using ‘Content here, content here’, making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for ‘lorem ipsum’ will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).

 

Use Case

Image Left / Content Right

This design places an image in the left hand column and the content right.  You may ask why not place the image in the content and set its property to display left? Implementing that choice will cause the text to wrap around the image. The image in this use case is high definition with the dimensions of 1630 × 917 pixels.

 


 

2 Columns When 1 Won’t Do Image Title #010
Two Column Image

 

BMW Tesla-Fighting Electric

PERHAPS THE BIGGEST threat now facing Tesla isn’t its ability to scale up Model 3 production or nail down autonomous driving software; it might actually be that the mainstream auto industry is finally entering the market Elon Musk’s upstart car company has long dominated.

 

For five years, Tesla’s Model S has monopolized the luxury electric sedan market, but that dominance is now besieged. Porsche is spending more than a billion dollars to develop the the Mission E, a svelte speedster it plans to launch in 2020. Audi’s planning an onslaught of new EVs over the next three years, including the A9 e-tron, which will become the automaker’s new flagship.

 

Attribution: Wired

 

Use Case

Content Left / Video Right

This design places content in the left hand column and a video in the right.

 


 

Kyle Conerty

Backyard Technologist

Google Gnome Team

 

It all started with smart thermostats, refrigerators, and light bulbs. Then Google Home came along and made your entire house smarter. But what about the backyard, the final frontier in smart homes?

 

Two words: “Ok Gnome.”

 

Google Gnome is a voice-activated, hands-free tool designed to make backyard living effortless.

 

Need to know what animal is squeaking in your bushes?

 

Stay still and ask Gnome what sound does a possum make.

 

Running low on birdseed?

 

That’s where Gnome comes in. You can even use Gnome’s proprietary high-intensity lasers to trim your hedges into whatever shape your heart desires.

Google Gnome

Youtube

 

 

Attribution: Google

 

 Installation

  • Place the cursor where 2 columns are needed
  • Click Two Column ( vertical_split ) toolbar button

 

Leave a Reply

Your email address will not be published. Required fields are marked *