Introduction - Responsive Websites

[FLipMts28]

Introduction

Grids are made up of intersecting horizontal and vertical lines. For instance, if you look at a city map, you’ll notice streets crossing paths and forming a clear structure to the city’s layout. This is because a lot of them were designed and built using a grid system.

As a designer, grid systems help you organize your designs and provide a series of guidelines to properly align elements on a page. Using this visual layout system can help easily define the space needed between elements, while creating content that guides the user on how to navigate the web page.

Grids can also promote consistency, allowing you to build repeated patterns to carry throughout your designs. Through the use of repetition, the learning curve of using your website can be significantly reduced allowing users to clearly navigate and consume the content.

Let’s explore the different parts of a grid system and discuss how it can help enhance your designs with consistency, alignment, and spacing.

[FLipMts28]

Grid Types

Various types of grids exist and are used within all types of visual design. With the creation of the printing press, bookmakers developed a manuscript-style grid, or a block grid, to bring structure to text on pages. Within news design, the column grid allowed publishers to break the page apart into sections to emphasize different pieces of content.

Similar to news design, the most common type of grid a web designer will use is the column grid. The column grid breaks up a page into vertical units that span the width of the content, and this grid structure can dictate how elements are laid out with precision and elegance.

Let’s continue to explore the anatomy of a grid and what it comprises.

[FLipMts28]

Grid Anatomy

When designing a website, the grid comprises three major components: columns, gutters, and margins.

Columns are defined as the vertical sections that span the width of a page. In web design, it’s common to see layouts consisting of 12 or 16 columns, while other may only feature three columns. Defining the number of columns depends on what’s appropriate for your design, device, and or screen viewing size.

Next, a gutter is the negative space between each column. Gutters help in ensuring the columns don’t run together, which would negate the purpose of using a column-based grid.

Margins appear on the left and right sides of the column-based grid. These ensure the content of your designs doesn’t match up to the edges of the browser window.

It’s important to note, margins may vary depending on the width of the grid, browser window, or device. For larger displays, margins may be very noticeable while on smaller screens, they may have the same width as a gutter.

[FLipMts28]

Grid Columns

Columns are the vertical containers that span the width of the page. They can be dependent on each other, meaning they are used to organize related content such as a continuation of a paragraph. They can also be independent of each other, meaning they are used for organizing the layout of unrelated content such as a sidebar. This allows for the flexibility of organizing information.

Within a grid, content can span multiple columns. What this means is that a website does not need to maintain the same column layout throughout. For example, a section of a website with a 12 column grid can have content that spans 4 columns, three times.

As the designer, you have the option to maintain this layout throughout the website. Or you can choose to use various layouts, including having the content span the whole width of the grid, half the grid or only a small portion of the grid.

While we will talk about this in more detail in just a few exercises, columns are separated by gutters. This design term is referred to as the space or gap between two columns. No content can spill into the gutter unless it is using the next column.

Columns can also be used to push, or offset content. Say you want to only display content on the right 4 columns of a page while using a 12 column grid. To do this, you can easily offset the content by 8 columns so the content is pushed to those right 4 columns.

[FLipMts28]

Grid Rows

Rows are the horizontal lines on a grid. Think of rows as invisible boxes that group content together by height. Rows are commonly used in web designs to group content together and re-order other content to allow for more whitespace.

For example, let’s say you have a set of items that all span the same amount of columns and you want them to align across the page without being disrupted by other elements. One way to achieve this outcome is to wrap the content in a row component. This will force any content, not inside of the row, to be pushed away.

Again, remember that a row can be used to force content away from an area that has remaining columns not used. What does this mean? Great question.

Let’s say our design uses a 12 column grid and we want one element to span seven columns. That means we still have five unfilled columns to either the left or the right side. Naturally, any new content added to our document will try and fill this unused space. However, by placing a row element around our component that spans 7 columns we can force any new content to start beneath our component and leave the remaining 5 columns empty.

[FLipMts28]

Grid Gutters

Gutters make up the negative space between columns. This design element helps to provide a natural break between elements aligned horizontally, while also helping to break rows of content vertically.

Note, there will always be one less gutter than the total number of columns. For example, if you are designing on a 12 column grid, then you will only have 11 gutters, one for every gap that separates each column.

While there is no set standard for a gutter width, it’s best practice to select a size that visually separates horizontal columns but is significantly thinner than the width of a column. The same can be said for vertical gutters.

Moreover, vertical and horizontal gutters do not need to match in size for a given grid layout. This is because you as a designer may want more vertical spacing than horizontal spacing when separating elements on a page.

Remember, if the gutter space is too tight, it can be hard to visually tell where one element ends and another starts. On the other hand, if the gutter space is too large, the design can be hard to follow.

[FLipMts28]

Responsive Grid

When designing web content, a designer needs to take into account the different screen-sizes a user might encounter and how that will affect a website’s layout. Many websites utilize responsive design, a set of techniques that allow a website’s content to shift based on the device or screen size. Because of these changes, responsive design requires a different number of total columns based on screen size, in order to accommodate content and keep it from being squished.

Consider your mobile, tablet and desktop devices. Now, think about their viewable areas. All are substantially different in size. Thus, it’s common practice in web design to create responsive grid sizes. On a large or desktop device you may start with a 12 column grid, but on a small or mobile device, you adjust the 12 column grid to a 4 column grid.

As a designer, responsive grid design enables you to maximize the content on the screen, ensuring a more accessible experience for users. Additionally, your design elements will have sufficient space to breathe and content can naturally flow across the page.

[FLipMts28]

Whitespace

Space is an important aspect of creating balanced and harmonious layouts in web design. As a designer, it’s important to understand how space can enhance as well as hurt your designs.

Whitespace, or negative space, refers to the emptiness between elements, whether that’s in the gutter of the columns, or additional padding around a block of text. As a designer, don’t be afraid of using space to enhance the usability of your site and prioritize the content.

Let’s explore some examples of good whitespace. If you look at the examples in the workspace, you will notice that the website on the left embraces whitespace on its landing page. It focuses the user’s attention solely on the primary action, which is searching for content. In this case, the whitespace is white in color as well. However, whitespace isn’t always going to be white.

In the example on the right, you’ll notice that too much whitespace can negatively impact the flow of your site. By including too much spacing in between elements, it can cause issues for users trying to navigate seamlessly through the content.

Whitespace is broken up into passive and active, which we’ll explore in the next two exercises!

[FLipMts28]

Passive Whitespace

The first type of whitespace we will discuss is called passive whitespace or micro whitespace. Used to improve the aesthetics of the layout without guiding the user through a specific reading, flow, or content order; passive whitespace is sometimes referred to as the unconsidered space. The most frequent use of passive whitespace comes within text elements.

Different font families have varying amounts of passive whitespace and you can control aspects of them within your design by altering CSS properties such as line-height or margin when setting type.

By adjusting the space between your lines of text, you can improve the design’s overall legibility and balance.

If a site’s text is too tight or lacks sufficient margin below headings and paragraphs, it can be hard for users to consume the content. However, if the site’s text is too spaced out, it can make it just as hard to read.

Finding a healthy balance between text that lacks sufficient spacing and text that has too much is an important task for designers.

[FLipMts28]

Active Whitespace

Unlike passive whitespace, which occurs more naturally, active whitespace is intentional. Also called macro whitespace, active whitespace refers to enhancing the overall page structure through space to emphasize content or guide users from one point to the next.

By adding active whitespace to a site’s design, we can spread our different sections out. This technique helps guide the user through the page’s content more effectively, allowing users to consume and absorb content more easily.

Active whitespace comes in many forms. But traditionally, it is achieved by adding space between a site’s elements. For instance, adding space to an article’s sidebar helps to visually separate the content from the page’s main content.

Additionally, this type of whitespace allows readers to quickly understand what they should be focusing on versus what is just supplementary details.

[FLipMts28]

Review

Remember, the reasons we design using grids are:

• Promote consistency within our designs
• Properly align elements on our page
• Provide ample spacing between content

Remember a grid is made up of:

• Columns
• Gutters
• Margins

Spacing is incredibly important within a design to ensure:

• Elements have ample room to breathe
• Denote emphasis on certain parts of a page
• Promote harmonious patterns and rhythms within your designs

[FLipMts28]

Flexbox

What is Flexbox?

CSS provides many tools and properties that you can use to position elements on a webpage. Codecademy’s lessons on the box model and CSS display introduce a couple of these techniques.

In this lesson, you will learn about Flexible Box Layout or flexbox, a tool that greatly simplifies how to position elements.

There are two important components to a flexbox layout: flex containers and flex items. A flex container is an element on a page that contains flex items. All direct child elements of a flex container are flex items. This distinction is important because some of the properties you will learn in this lesson apply to flex containers while others apply to flex items.

To designate an element as a flex container, set the element’s display property to flex or inline-flex. Once an item is a flex container, there are several properties we can use to specify how its children behave. In this lesson we will cover these properties:

1. justify-content
2. align-items
3. flex-grow
4. flex-shrink
5. flex-basis
6. flex
7. flex-wrap
8. align-content
9. flex-direction
10. flex-flow

Flexbox is an elegant tool that makes it easy to address positioning issues that may have been difficult before.

[FLipMts28]

Flexbox

inline-flex

In the previous exercise, you might have observed that when we gave a div — a block level element — the display value of flex that it remained a block level element. What if we want multiple flex containers to display inline with each other?

If we didn’t want div elements to be block-level elements, we would use display: inline. Flexbox, however, provides the inline-flex value for the display property, which allows us to create flex containers that are also inline elements.

        <div class='container'>
         <p>I’m inside of a flex container!</p>
         <p>A flex container’s children are flex items!</p>
        </div>
        <div class='container'>
          <p>I’m also a flex item!</p>
          <p>Me too!</p>
        </div>

       .container {
        width: 200px;
        height: 200px;
        display: inline-flex;
        }

In the example above, there are two container divs. Without a width, each div would stretch the entire width of the page. The paragraphs within each div would also display on top of each other because paragraphs are block-level elements.

When we change the value of the display property to inline-flex , the divs will display inline with each other if the page is wide enough. As we progress through this lesson, we will cover in more detail how flex items are displayed.

Notice that in the example above, the size of the flex container is set. Currently, the size of the parent container will override the size of its child elements. If the parent element is too small, the flex items will shrink to accommodate the parent container’s size. We’ll explain why in a later exercise.

            <div class='container'> 
             <div class='child'>
                  <h1>1</h1>
             </div>
             <div class='child'>
                  <h1>2</h1>
             </div>
            </div> 

            .container {
             width: 200px;
            } 

           .child {
            display: inline-flex;
            width: 150px;
            height: auto;
           }

In the example above, the .child divs will take up more width (300 pixels) than the container div allows (200 pixels). The .child divs will shrink to accommodate the container’s size. In later exercises, we will explore several ways to handle this.

[FLipMts28]

Flexbox

justify-content

In previous exercises, when we changed the display value of parent containers to flex or inline-flex, all of the child elements (flex items) moved toward the upper left corner of the parent container. This is the default behavior of flex containers and their children. We can specify how flex items spread out from left to right, along the main axis. We will learn more about axes in a later exercise.

To position the items from left to right, we use a property called justify-content.

     .container {
       display: flex;
        justify-content: flex-end;
      }

In the example above, we set the value of justify-content to flex-end. This will cause all of the flex items to shift to the right side of the flex container.

Below are five commonly used values for the justify-content property:

• flex-start — all items will be positioned in order, starting from the left of the parent container, with no extra space between or before them.
• flex-end — all items will be positioned in order, with the last item starting on the right side of the parent container, with no extra space between or after them.
• center — all items will be positioned in order, in the center of the parent container with no extra space before, between, or after them.
• space-around — items will be positioned with equal space before and after each item, resulting in double the space between elements.
• space-between — items will be positioned with equal space between them, but no extra space before the first or after the last elements.

In the definitions above, “no extra space” means that margins and borders will be respected, but no more space (than is specified in the style rule for the particular element) will be added between elements. The size of each individual flex item is not changed by this property.