PW.A Perfect Fit

PW.A Perfect Fit

What is Perfect Fit?

Perfect Fit was the idea of the owner of a website that was using the very first version of Timber-Boot.  Once the site was built, we go through a feedback phase to adjust elements such as color, shadows, spacing, and more items.  When it came to the layout on the archive pages, which have teasers of the content, the number of columns changes.

Using the default read-more function of WordPress we would set the read-more after a certain number of words.  The layout in Bootstrap allows you to set the vertical height of the rows to be equal, so the header and footer section will be lined up.  This layout would clam down the variations, so the reader’s eye did not get distracted.  The problem was if the title of the post/article was long it would create a larger header section.  If the words in one post/article were longer words than others, the formatting would create a large white-space in the other content areas in that row, to keep the equal height of the rows.

This effect was sometimes very unattractive and actually more distracting that unequal row height.  The customer stated, why not count the letters instead of the number of words.

Prebuilt Elements and Components: Perfect Fit was designed to do just that and a little more. It is a function that does count the number of letters and at a designated count, it forces “… Read More”.  This break will happen also in the middle of a word, but it a content teaser, and it actually increases the click on the read-more button due to the human curiosity of what it is. This same principle is applied to the post/article title so it stays on one line.  However, when you hover on the title, it actually shows the full title.  This not only assisted the visitor but kept SEO intact.

Admin Interface: Since there is a different width at the responsive breakpoints in Timber-Boot, the admin console allows you to set the number of characters for the teaser body and title. When the newest version of Bootstrap added the responsive font sizes, this interface made it easy to adjust for the change,