Welcome to the
MudCorp® Corporate Website
Saturday March 25, 2017.
MudCorp is the studio of Takashi Okamoto specializing in graphic design, web design, technology art and software & hardware implementation. Our services include website designing and programming, custom e-commerce and content management systems, hardware and software solutions for interactive kiosks, signage design for electronic displays, technology consulting and any other project that involves both design and technology.
For new business inquires or If you want to say hello, please use the contact form to send me a message. I will respond as soon as possible.
Takashi Okamoto is a graphic designer, programmer and technology artist living and working in North America. His illustrations have appeared in magazines and newspapers including: The New York Times, The National Post and Shift Magazine. As a graphic designer, he has worked with studios including 2x4, Stiletto, Village and artists Ben Rubin and Natalie Jeremijenko. His technology based art has been exhibited in Canada and Mexico. He holds a (Hons) BSc in astrophysics from the University of Toronto, a MFA in graphic design from Yale University and a SM from the MIT Media Lab, where he studied under Professor John Maeda in the Physical Language Workshop. Currently, he is a partner at BuzaMoto.
Copyright Takashi Okamoto. Contact.
Please complete the following form.
Grid Systems in Web Design
Takashi Okamoto (10/09/05)
This is the first of (hopefully) a series of articles discussing issues of typography and the web. To start off this topic, we begin with the discussion of one of the fundamental methods of design: the Grid System.
In the early years of web design, graphic designers with a background in print design began making websites which turned out to be rather unsuccessful. It was evident that you can’t design a website as if it were a book. Over the years, more designers began specializing specifically for the web, which resulted in a better visual and interactive experience. It seems impossible to imagine a world without the web, but it’s been barely a decade since its use in the mainstream. Compared to the world of print design, web design is still in its infancy.
Although we have seen in the beginning that it is a mistake to design a website as if it were a book, there are many typographical techniques and methods from print that we can employ onto the web. It’s surprising that some of these elementary methods are still hard to implement. I think a lot has to do with the division between visual designers and the contributors of the web standards, who aren’t necessarily sensitive to the needs of graphic designers. As graphic designers, we need to demand these needs.
I’m not going to go into the details of design using the grid. For a more comprehensive discussion, see Grid Systems in Graphic Design (Switzerland: Verlag Niggli AG, 2002.)
Static Multiple Columns
In print we work with a fixed page size. We need to initially set up a page size before we begin our grid construction. This is not true for the web, since users have the freedom to resize their windows. For now we will focus on a static content size, independent of the window size. Later we can discuss how to set up a grid with variable content size.
I decided that we will need to keep the content area roughly 800 pixels in width, since the most commonly used monitor resolution is 1024x768. For 12pt type, four columns seem to work best, so the following example will all use a four column based grid, and is modeled after the 20 grid fields example pp. 80-84 in Müller-Brockmann.
Creating multiple columns is rather easy. We define a <div> called content-wrapper which will define the visible content area. We will then define a <div> for each column. If we put four columns of equal width into the content-wrapper, we will have four <div>s. The main portions of layout.css and index.html is shown below:
This will serve as our basic four-column grid. The <span> in each of the columns will be used to determine overflow of each column. The end result will look something like this.
Overflow Text Content
In index.html, add links to mud_TextFlow.js and mud_API.js (this is a collection that all the scripts I write depend on.) Also since we always want to promote writing well-formed MVC-model code, we should write our initializing js script as a separate file, so link that as well. (I call it mud_Scripts.js.)
To initialize MudTextFlow, we first run initDHTMLAPI() which initializes mud_API.js. We then run the constructor which accepts two arguments:
Where textcontent is the innerHTML of the hidden <div> that contains the text content, and containers is an array that lists the <span> of the columns in sequential order. In our case, we want to fill column-0 to column-3 in sequence, so we define an array for the columns. Finally, our initializing script looks something like this:
where getRawObject() is defined in mud_API.js. We get a result that looks something like this.
Extending Column Classes
We can also make some columns span across two, three and all four columns. It will be beneficial if we define these new column classes:
To achieve more complicated designs, we need to subdivide the columns horizontally to create grid fields. There are two ways to create the fields, one is to create columns first, then rows; the other is to create rows first then columns. This all depends on whether you want to flow your content top-down, then left-right; or left-right, then top-down, respectively. Though in the end it doesn't really matter which way you decide to create the fields since the fields are linked independently.
Textual Example 1
In this first example, it’s pretty obvious to see that it will be easier to divide this page into three rows: header, text and footer. The header and text will span all four columns, while the footer will be a group of four linked columns. The key parts of layout.css and index.html is displayed below:
Notice that all the columns are contained within a parent <div> since we decided to divide the page by rows first. The result looks something like this.
Textual Example 2
Lets now see what happens when we divide columns first. We will use textual example 2 for this. We can split the page up into two columns, the left spanning three columns and the right will just be one. We will then create two rows within each column.
Now the column division occurs first. The only problem with this approach is that it is not compatible with MudTextFlow, since the column classes have height: 100% (which is relative to the parent node: content-wrapper.) You should not have any problems if you explicitly set the height in each of the rows. The end results in something like this.
Below are some complex examples with oblong images and wide text. Complex example 1 reads top-down, while complex example 2 reads left-right.
|Complex Example 1||Complex Example 2|
The results are located here: Example 1 and Example 2. Both examples were built with defining rows first, but you can probably see that it would be better to define columns first with example 1; especially when users select text, it will select texts in order of the linked content blocks.
Dynamic Multiple Columns
All the examples so far has explicitly set a value for column widths. You can convert to % values relative to the window size in order to make their widths change dynamically. If you call update() for the MudTextFlow object, the text content will also reflow. The sample file for MudTextFlow actually does this. However, I feel that having width dynamic isn’t very appropriate since if you make the window too small, you'll only have a couple words per line, which makes the grid useless. Instead, I think we need to think of better ways to introduce new content. That will be the topic of the next article.