For this week’s blog post, I will analyze the CSS technique the Sojourn Network website uses on its home page. The Sojourn Network is a group of reformed Baptist churches that works to plant healthy, numerous churches. The website has a beautiful design, and part of the reason the site is so aesthetically pleasing is that all its material is organized in a grid fashion.
On the home page, material is separated into regions, each containing three columns beneath one row. Each row introduces the name of a new section, and each column contains information pertinent to the row section. For example, the first region has a row consisting of text and an image that both introduce what the section is about: the Sojourn Network. Also, the region has three columns that lie below the header and contain individual text pieces that further explain what the section is about.
The “Sojourn Network” region evidently uses the grid system to organize its information. One can identify this technique by looking at its CSS markup. The text within the columns for this region is centered, and the blocks of text contain five percent padding on both the left and right sides. This text alignment and padding cause the text pieces to become separated into three separate columns.
The “Churches” region utilizes a grid system, as well. The region has six articles about six different churches. The articles are organized so that two are located on the left of the page, two are located in the middle, and two are located on the right. Each image is stretched and has a width of 1, according to the CSS markup. Since all photos are the same size, the region forms that consistent three-column grid. In addition, the text for the name of the church and the text for the location of the church are perfectly aligned to the left. They lie on the same column boundary line and thus form a grid pattern.
The “News” region is similar to the “Churches” section: all images have a width of 1 and are stretched. Additionally, the headline for each article and the description that lies below each headline align perfectly to the left. Therefore, the photo, headline and text for each column lie on the exact same boundary line and thus form a grid pattern.
The Sojourn Network’s grid pattern makes its website remarkably navigable. Because the site is so well organized, I know exactly where to find the information I want to find. This website encourages me to incorporate a grid pattern when designing future websites.