August 07, 2019

Creating consistent rhythm for Weezie's blog

An important element of creating styles for a blog is considering all of the possible HTML elements that can be displayed in the article and the combinations of elements on a page. A key element of creating a consistent and readable blog is to use a typographic scale. Typographic scales provide consistency, rhythm, hierarchy, and contrast because they are predictable. A well-defined scale helps users understand your content better, speeds up a product development cycle, and even helps to reduce technical debt. Since one was not specified for Weezie's blog, I chose the 4:5 major third scale, meaning the text ratio is 1.25.

The typographic scale combined with a consistent baseline (often referred to as "leading" in traditional typesetting) creates a vertical rhythm to the content that makes it pleasant to read. The design document specified what appears to be a 12-pixel baseline. This means each block element of the blog post should have a line-height and margin that adds up to a multiple of 12px, creating a consistent rythm.

Element sizes based on the scale.

Below is a list of block-level elements available in the Shopify visual blog post editor. For the first version of the blog styling, we should use just these elements along with the bold and italic inline styles. Using these fundamental elements will help ensure a good document structure for SEO purposes, as well as obviate the need to manually edit the HTML of the blog.

Block level elements in the Shopify editor

Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Paragraph
Blockquote
Bulleted List
Numbered List

Images

Images are usually treated as inline elements by the browser, which means they usually flow with text on the page. For the purposes of this blog, we will render them as block elements so they take up the entire width of the page. Since doing variations of the image layout would require someone manually editing the HTML, all images will be treated the same right now. They will span the full width of the text plus some extra distance on each side.

Since all images are treated the same, I suggest creating images that are 1296 pixels wide, and a height that is a multiple of 12 pixels. The maximum width of the blog post is 648 pixels, so this means that creating images that are 1296 pixels wide will provide better clarity on mobile devices that support higher resolutions without slowing down the page too much for devices that have a 1x resolution. Creating images that have a height that is a multiple of 12 pixels means that the image will maintain the baseline rhythm when the blog is viewed at its widest. The rhythm will break slightly on smaller displays, but this is a tradeoff for not having complete control over the content and not editing HTML directly.

A blockquote

Block quotes have to be handled slightly differently given the limitations we have right now by not editing the HTML. Typically, one would add the quote attribution tag inside the block quote. We can't do that with the Shopify editor, so we will assume the first paragraph after the block quote is an attribution. If you'd like a block quote without an attribution. Add an empty paragraph after the block quote.

A blockquote will pop out of the page to bring attention to a piece of content. Many times an attribution tag is added to the quote.

- Curt Hasselchwert, Blog Styler

Block quotes bring attention to the rest of the page. This paragraph is here to ensure the attribution is corretly styled and the flow is maintained.

This block quote has an empty paragraph after it.

As you can see, with an empty paragraph in between, the following paragraph of text formats properly.

Editor controls that should be used, and ones that shouldn't

Most of the tools in the Shopify editor should work without issue. There are a couple that should not be used because either a) they will break styling or b) do not yet have style support yet. Below is an image showing the controls which are safe and the ones that aren't.

Basically, avoid using the "indent", "outdent", and "color" controls because they will intefere with the styling, and avoid the "table" and "video embed" controls because they do not yet have style support.

Testing the Rest

The rest of the content on this page is to ensure that all elements are styled and work well together. Aliquam sit amet tellus ipsum. Aliquam ornare, massa ac scelerisque maximus, lorem nibh venenatis turpis, ut aliquet arcu tellus vel odio. Ut euismod bibendum luctus. Pellentesque turpis augue, pellentesque et sollicitudin in, tincidunt eget velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam non efficitur urna. Donec rhoncus eu urna non posuere.

Class aptent taciti sociosqu ad litora torquent per. Conubia nostra, per inceptos himenaeos. Vivamus non sem convallis.
Conubia nostra, per inceptos himenaeos. Vivamus non sem convallis.
Et ultrices posuere cubilia Curae; Ut eget diam neque. Morbi at

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus non sem convallis, bibendum ipsum eu, viverra sapien. Vivamus arcu ex, tempus vitae nunc non, dictum rutrum lectus. Ut sem nunc, suscipit ut laoreet quis, cursus eu metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut eget diam neque. Morbi at tincidunt erat, in mollis nunc. Curabitur rhoncus magna in eros vestibulum congue.

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus non sem convallis, bibendum ipsum eu, viverra sapien. Vivamus arcu ex, tempus vitae nunc non, dictum rutrum lectus. Ut sem nunc, suscipit ut laoreet quis, cursus eu metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut eget diam neque. Morbi at tincidunt erat, in mollis nunc. Curabitur rhoncus magna in eros vestibulum congue.

Tincidunt erat, in mollis nunc. Curabitur rhoncus magna in eros

Duis id libero ac urna tempor rutrum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus efficitur eleifend mi, sit amet cursus lectus viverra nec. Duis tincidunt massa ut fringilla molestie. Donec neque sapien, elementum at ipsum quis, rhoncus elementum lacus. Nam in mauris volutpat, volutpat sem eu, ornare dui. Morbi in nisi condimentum, ultrices velit nec, sollicitudin ligula.

Bibendum ipsum eu, viverra sapien. Vivamus arcu ex, tempus vitae nunc

Class aptent taciti sociosqu ad litora torquent per. Conubia nostra, per inceptos himenaeos. Vivamus non sem convallis.
Conubia nostra, per inceptos himenaeos. Vivamus non sem convallis.
Et ultrices posuere cubilia Curae; Ut eget diam neque. Morbi at