The Sojourn Network’s Grid Technique

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.

Screen shot 2013-09-24 at 6.19.24 PM

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.

Screen shot 2013-09-24 at 6.20.40 PM

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.

Screen shot 2013-09-24 at 6.21.26 PM

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.

Screen shot 2013-09-24 at 6.22.13 PM

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.


3 responses to “The Sojourn Network’s Grid Technique

  1. I like the scrolling with background changing on this site. Did you check its CSS coding on how did they do it?

  2. This was the coding I found:
    /* Line 51 */

    /* Line 56 */
    body *
    transition-property: all;
    transition-duration: 0.35s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s;

    /* Line 63 */
    .fullwidthimage .title div
    display: table-cell;
    vertical-align: middle;
    height: 60em;

    /* Inline styles */

    height: 579.7px;

  3. I really like this particular grid pattern. I think you’re right that keeping the layout simple makes it much easier to navigate. I also liked that difference in the text heavy grids vs. the multimedia grids.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s