Two Columns

Although some would argue there is no place for two columns in modern day web design, the case can be made in some circumstances if 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 for those circumstances Xidipity has a solution.

 

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

 

Use Case

Condensed Font 

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. The font is changed to “Roboto Condensed” by using the Tailwind class “font-condensed”.

 


 

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).

 

Light Font

This design mimics the “Condensed Font” design with the font changed to Roboto at a weight of 300 using the Tailwind class “font-light”.

 


 

Where does it come from?

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of “de Finibus Bonorum et Malorum” (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, “Lorem ipsum dolor sit amet..”, comes from a line in section 1.10.32.

 

Where can I get some?

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don’t look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn’t anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.

 

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.

 


 

Xidipity Two Column Demonstration with Full Size Image Displayed in Left Column
BMW Concept

 

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

 

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.

 

YouTube Video
Gnome
Google Gnome

 

Attribution: April Fools 2017

 

Template

<table class="twocolumn">
  <tbody>
    <tr>
      <td></td> <!-- Column Left -->
      <td></td> <!-- Column Right -->
    </tr>
  </tbody>
</table>

 

Installation

  • Highlight template code
  • Copy to the clipboard
  • Place the cursor at the beginning of the line where the template is needed
  • Click the editor “Insert ” menu dropdown
  • Select “ Media”
  • Select the “Embed” tab
  • Paste clipboard content into the text box
  • Make adjustments
  • Click the “OK” button

 

Leave a Reply

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