Mostly programming and video games.

Category Archives: Web design

Character encoding is a lot like regular expressions. Every time I need to know how it works, I have to learn it all over again. The real reason for this post is to provide a cheat sheet for those times, but first I’ll give you the skinny on character encoding.

Consider the quotation mark character (“). There are many ways this character can be represented on a computer. Ultimately, like any character, the quotation mark boils down to a series of zeros and ones that can be understood by the various electronic doodads connected to your motherboard. To those doodads, the quotation mark is simply 100010.

How would you like to type that every time you needed a quotation mark? Just think, if you wanted to quote Monty Python and the Holy Grail, you’d have to type:

Every binary number has an equivalent decimal number as well as a hexadecimal number and an octal number. The binary number 100010 is equal to the decimal number 34. It’s also equal to the hexadecimal number 22 and the octal number 42. Don’t think about it too hard, just take my word for it:

100010 = 34 decimal = 22 hexadecimal = 42 octal

This makes it much easier to quote Monty Python, but it’s still kinda cryptic and painful to type it in decimal:

Fortunately for you (and especially for me, since I quote Monty Python a lot), there are layers and layers of software that run on top of the hardware in your computer that can translate for you. So you almost never have to type anything in binary or decimal anymore. These days, you will almost always be working with a character set, which maps each of those zeros and ones to their respective glyphs to make them easier to use. You can think of a character set like this:

" -> 100010
A -> 101001
n -> 1101110
o -> 1101111
...

A Unicode character set will map those characters to hexadecimal numbers instead of binary numbers:

t -> 74
h -> 68
e -> 65
r -> 72
...

Except instead of hexadecimal numbers they are called Unicode points, and they look like this:

s -> U+0073
h -> U+0068
r -> U+0072
u -> U+0075
...

Then some other layer will take care of mapping those hexadecimal numbers to zeros and ones for the sake of the doodads we mentioned earlier.

In normal fonts like Arial or Times, the decimal number 169 corresponds to the glyph for the copyright symbol. You can also use the hexadecimal number A9 pretty much the same way but with the letter x in front of it:

&#xA9;

Or you can use the hexadecimal number in your stylesheet instead. This is the approach taken by Dave Gandy when he created Font Awesome:

The reason I needed to do this (and you might find it useful too) was so I could see all the characters a font contained. I couldn’t use the Character Map utility in Windows because it didn’t allow me to adjust the font size, and I didn’t want to spend all day looking for a replacement. I found it much easier to simply print all the characters to a page using some JavaScript:

How many boxes can you count on this one page? I count at least 20. In case you actually took the time to count them up, I highlighted the ones you probably missed:

Don’t forget the huge empty white columns on either side of the main column in the middle.

Maybe you missed some others, but the point is that there are way too many boxes on this single page. This is not an uncommon design – now that I’ve pointed it out, you’re likely to spot it all over the internet.

There are still two more boxes that we are forgetting that are present on every webpage. Can you think of what they are? I’ll give you a hint, you can see them right now (I mean before you look at the picture)…

It’s a box within a box within a box within a…

The edges of your monitor form a box around everything on your screen. That’s one box you can always count on being there, whether you’re on a PC, a Mac, tablet, smartphone, or whatever. The browser window also forms a box around everything in your browser. Granted, you won’t have one if you’re on a tablet or smartphone, but otherwise you will. This renders the main column above (the huge box in the middle groups that everything on the page together) rather pointless.

So I have to ask: Why is boxy design still so common? Let’s get rid of some of those boxes already!

A few less boxes makes a big difference.

Why does this work? The purpose of the boxes that were in the background was to group the content together, but the content is already grouped together because related content is in close proximity to each other! We know that picture of the squirrel goes with the text beside it, and that “A Chunk of Content” goes with the text beneath it. Further, we can tell that it is the title of the article because of how the information is arranged – the title is bigger, and it’s at the top. Our brains are wired to disseminate information like this, so the boxes really didn’t add anything to help us.

Notice that I didn’t remove all of the boxes on the page, only the ones that were totally unnecessary. I still like the contrast provided by the black buttons, so I left those alone.

Also, notice that there aren’t as many things cluttering up the background of the page, so I freed up the color palette. I can use the color I was using in the background as the color of my headers, which adds another dimension of contrast.

Now I’ll be the first to point out that this still isn’t a great looking page, but it looks a lot better than it did when we started. If you’ve got other ideas that could improve this design even further, I’d love to see them!

In my previous article, I covered the most common methods for using the golden ratio in web design. I also alluded to a discovery I made when I was trying to make a grid composed of golden rectangles. In this article, I’ll illustrate how to create such a grid, then I’ll give you one to play with.

Step 1: Define some constants

Let’s make the width of our page 980 pixels. We’ll use 6 columns and make the width of the gutters between our columns 10 pixels each. That means that the width of our columns is 155 pixels each, because of math:

(980 pixels - (5 gutters * 10 pixels)) / 6 columns = 155 pixels

Basically, the width of our columns is the width of our page divided by the number of columns after subtracting the total width of our gutters.

Step 2: Find the dimensions of a single grid cell using the golden ratio

Most webpage grids are composed of columns only, but ours will have rows as well. We want our grid to be composed of golden rectangles. So, to find the height of a single grid cell, we simply divide its width – the width of one of our columns – by the golden ratio:

155 pixels / 1.618 ~ 95.797 pixels

Since browsers can’t render sub-pixels, we’ll round the height of our rows to 96 pixels each. So the dimensions of a single grid cell in our grid is 155 pixels wide by 96 pixels high.

Our columns are 155 pixels wide each, and the gutters between our columns are 10 pixels wide each. So, if we want an element on our page to span two columns, it would need to be 320 pixels wide:

155 pixels + 10 pixels + 155 pixels = 320 pixels

Now, if we want this element span two rows and to be a golden rectangle, we just divide its width by the golden ratio:

320 pixels / 1.618 ~ 197.771 pixels

So the dimensions of an element on our page that spans two columns and two rows is 320 pixels wide by 198 pixels high. That means that the height of the gutters between our rows is 6 pixels each, because that’s the space that’s left over after subtracting the total height of two rows from the height of a golden rectangle that spans two columns:

198 pixels - (2 * 96 pixels) = 6 pixels

We can follow this procedure to build our whole grid, which results in the following:

You can see from the image above that an element that spans three columns and three rows is 485 pixels wide by 300 pixels high, and element that spans four columns and four rows is 650 pixels wide and 402 pixels high, etc. Each of these bigger golden rectangles is made out of smaller golden rectangles.

Step 4: Make something cool

Now, download the Divine Grid from GitHub, which uses a page width of 988 pixels, 6 columns, a gutter width of 20 pixels, and a gutter height of 13 pixels. This results in a slightly different grid than the one above, but it works just as well:

Check out the included files for examples of the Divine Grid in action. demo.html contains at least seven golden rectangles. They are outlined in red in this screenshot, and an image of the grid is superimposed:

The Divine Grid - a fluid, responsive CSS grid framework based on the divine proportion, also known as the golden ratio

Finally, have a gander at the Divine Template – a fluid, responsive CSS template based on the Divine Grid:

The Divine Template - a fluid, responsive CSS template based on the Divine Grid

After you get a chance to play with it, I’d love to see what you came up with! You can post a link in the comments section below.

Also, there’s no reason why you can’t do something similar with seven, eight, or sixteen columns. I just like six.

I’ve written about the golden ratio before, and how I became confused when I was researching the Golden Grid System and The Golden Grid – two CSS grid frameworks whose names suggest there is some relation to the mathematical phenomenon. To be clear, using these frameworks won’t get you any closer to applying the golden ratio in web design, but they are both incredibly useful nonetheless.

There are several articles available that will give you some ideas of how to use the golden ratio in page layouts. Most of them suggest a strategy like this: Multiply the width of your main content area by the golden ratio – approximately 1.618 – and use the product as the width of your sidebar area. Too often, this suggestion is followed by instructions on how to use the rule of thirds, which has little (if any) application in web design and nothing to do with the golden ratio at all. The rule of thirds is a neat trick in print design and photography, but is pretty useless when it comes to page layouts with dynamic content.

I tried experimenting with this sidebar idea a couple of ways. Here is what I came up with:

Using the golden ratio to find the width of consecutive sidebar areas

In this first example, the two right-most columns are in golden proportion with each other, since 52 x 1.618 ~ 84. Then, these two columns combined are in golden proportion with the third right-most column, since (84 + 52) x 1.618 ~ 220. Finally, these three columns combined are in golden proportion with the left-most column, since (220 + 84 + 52) x 1.618 ~ 576. I also tried this:

Using the golden ratio to find the widths of consecutive sidebar areas (cont.)

In this example, each column is in golden proportion with the ones on either side of it. However, it’s much too wide, although you might be able to use only the middle columns. Both examples are very impractical. I’m sure I could think of a use for that far-right column, but not in most cases.

Another strategy I’ve come across goes like this: Divide the width of any content area by the golden ratio and use the quotient as the height of your content area. This is practical if you can restrict the height of your content area. You can see it in action in Adit Gupta’s article on Smashing Magazine. I’ll put the image up here but give him the proper credit:

Using the golden ratio to find the heights of media objects

Each of the content areas above (The Beginning, Newton’s Vision, Einstein’s Relativity, etc.) is a golden rectangle, which means that its width is in golden proportion to its height.

Looking at the picture of Space Geek, I realized it should not be that much of a stretch to make a grid composed of golden rectangles. The awesome discovery I made later restored some of the vigor I had once lost for mathematics. Next time, I’ll explain all about the discovery I made and unveil something truly freaking awesome.

Here’s a situation my coworkers and I ran into with our new online testing system: our users were accidentally clicking the “Submit” button on a form, then they were accidentally clicking the “Confirm” button on a confirm dialog popup. We took a number of steps to make it harder for them to do this, including making the “Next” and “Submit” buttons farther apart and changing the positions of the buttons on the form. Then we realized we needed to move the confirm dialog popup as it was appearing directly over the buttons on the form. When that didn’t fix the problem, we realized we needed to change the default button on our confirm dialog popup. It was more than a little tricky figuring out how to manipulate the jQuery UI modal dialog widget, so I’m going to share with you how we did it.

Although I had to dig through pages of Google search results to find it, the solution to this problem is pretty simple. The jQuery UI dialog() method – in addition to autoOpen, modal, resizable, and buttons – accepts a position option. It’s fairly obvious how to use this option: giving it a value of ‘top’ will place the dialog widget at the top of the window, giving it a value of [x, y] will place it at the specified co-ordinates in the window.

What’s not obvious is that you can also use the jQuery Position plugin, which allows you to position any element relative to any other element on the page. In my case, I was able to place the top of the dialog widget at the top of another div on my page like so:

This way, a user can’t accidentally submit the form by double-clicking on the “Submit” button.

How to change the default button in a jQuery UI dialog widget

After looking at a few cryptic solutions on Stack Overflow, one of my coworkers figured out that you can give the buttons option an array of button objects instead of a buttons object itself. The advantage of doing this is you can add any number of attributes to the button objects in the array:

Give the “Cancel” button a class of “cancelButton” made it easy to select with jQuery. Using the dialog() method’s open event, I added a function to change the focus of the form to the “Cancel” button:

I recently volunteered to be a part of my church’s website ministry. When I learned that we would be creating a new website using concrete5, I was not excited. I’ve used WordPress quite a bit, I’ve dabbled in Drupal, and I’ve experimented with a handful of other CMS’s. When given a choice, however, I almost always end up creating my own CMS for all of my projects. It’s not because other CMS’s aren’t great products, but I usually need more flexibility than they offer without the learning curve that they often present.

After working with concrete5 for a few days, it’s clear to me that this is the CMS I’ll be using for all of my future projects. With little more than a basic understanding of PHP, it’s incredibly easy to convert any HTML template into a concrete5 theme. Most of this process is explained very well in Andrew Embler’s excellent tutorial. There are a few steps he left out that I found were necessary to get everything working properly, so I’ll explain those here.

The first thing Andrew points out is that you need a description.txt file and a thumbnail.png file in your theme directory. Then you need to prefix all relative paths in your HTML template, which should be named default.php, with the following PHP statement:

<?php echo $this->getThemePath(); ?>

Next, he tells you that you need to replace the title in the head of your default.php file with this:

<?php Loader::element('header_required'); ?>

I found that this statement had to be placed in the head after my .css files had been added but before my .js files had been added. This is because the concrete5 toolbar includes a copy of the jQuery script, which needs to be loaded once – and only once – in order for some jQuery plugins to function correctly. Any .js files that are dependant on jQuery need to be loaded after that.

Then he points out that to make a content area editable you need to replace the HTML contents with this:

<?php $a = new Area('Main'); $a->display($c); ?>

You can replace “Main” with any other string. Each content area must be named something different, so if you want two areas named “Main,” the second one must be named “Main2” or something like that.

If you’re already signed in at this point, or if you know the URL to your sign in page, this is all you really need to do. However, I wanted an easier way for myself and the other web administrators to sign in. I found this code in another concrete5 theme that I downloaded, which I then placed in the footer area of my default.php file:

Let’s break this code down: If a user is currently signed in, the page will display the text “Currently logged in as” followed by the user’s name and a “Sign out” link. If a user is not signed in, the page will display a “Sign in” link.

The next thing I noticed was the concrete5 toolbar was blocking some of the content at the top of my page. I needed to shift everything on the page down by 53 pixels to make room for the toolbar, but only when a user is signed in, so I placed the following code just inside of the body tag of my default.php file:

<?php
// If a user is signed in, shift everything on the page down by 53px to make room for the toolbar
$u = new User();
if ($u->isRegistered()) {
?>
<div style="min-height: 53px"></div>
<?php } ?>

At first, the need to do this baffled me. When the toolbar is loaded, it applies a margin-top property to the body tag of the page, which should shift everything on the page down anyways. Later, I figured out that I needed to wrap everything on the page in a div container, and that I could give this container a padding-top property and eliminate the need for the code above. However, the reason I needed to wrap everything like this was because my stylesheets weren’t playing nicely with the toolbar. This is explained on this page of the concrete5 site:

When converting existing themes to use with concrete5, a lot of the free css templates out there tend to add some pretty greedy style properties to standard elements (like padding or margins on all li or div tags for example).

This causes some major issues with the way stuff in the concrete toolbar and popups are rendered. An easy way to fix this is to wrap the template markup with a DIV with an ID of page or “wrap” just inside the BODY tag.

Then in your main.css and typography css, prepend the #page or #wrap to each css rule, to limit its scope.

There’s one more thing I should mention. On my HTML template, I have a number of content areas that are hidden via a jQuery script when the page loads and unfold when a user clicks on them. This presented a problem with concrete5, which wouldn’t allow me to edit the contents of these areas in edit mode. Thankfully, I had written my jQuery script to allow for graceful degradation, so if a user didn’t have JavaScript enabled in their browser, they would still be able to access these areas of the page.

The fix for this problem was wrapping an if statement around the lines where my .js files were loaded inside the head of my default.php file:

Considering that this step was the most frustrating of the whole process, converting my static HTML template into a concete5 theme was remarkably simple. The thing I like most about this CMS is that it’s really intuitive for any other administrator of the site to edit the content on the page. There is no need to navigate around an administrator interface to find the content to be edited just to change the text on the page.

Let me know if you have any questions or if this tutorial helped you in any way!

EDIT 2/13/2012: As of a February 2012 update, the following code is required in the footer of default.php above the closing body tag:

<?php Loader::element('footer_required'); ?>

EDIT 7/27/2012: I’m not sure when this was fixed, but I haven’t needed to wrap everything in a div container to get my stylesheets to play nicely with the toolbar for some time now. If this really was fixed, it makes the whole process of converting a static HTML template into a concrete5 theme a lot easier.

Instead, I want to discuss a specific issue regarding these two distinct concepts, which is that many people think they are not two distinct concepts but they are actually the same thing. I will let Google prove my point.

I care because it confused me to no end when I was researching grid-based layouts. In particular, I thought the Golden Grid System and The Golden Grid had something to do with either the golden ratio or the rule of thirds, which they don’t. That’s not to say that they aren’t both incredibly useful, just that they have confusing names.

A comparison of the golden ratio vs the rule of thirds. The yellow lines were derived using the golden ratio, which is approximately 1:1.618. The black lines were derived using the rule of thirds, a ratio of 1:2.

I’ve even read somewhere that a golden spiral will eventually approach the point of intersection or “power point” of the rule of thirds, which is obviously false:

The golden spiral does not approach the point of intersection of the rule of thirds.

The island object is a generic class that simply adds padding to an element. The nav abstraction is another generic class that will turn a bulleted list into a horizontal navigation menu.

Additionally, if you use the fluid grid system builder available on the inuit.css website, creating a grid-based layout is a piece of cake. I’m going to walk you through how to do exactly that.

Step 1: Download inuit.css from the inuit.css website. You can do this by clicking on the big “Download now” button on the right side of the page. Extract the zip archive, then get the inuit.css file from the core/css folder and include it in your document.

Step 2: Get the grid.inuit.css file either from the demo/css folder or create a new one using the fluid grid system builder on the inuit.css website. Don’t include this file in your document. Instead, get the igloos.css file from the demo/css folder and include this file in your document. This file should contain the single line:

@import url(grid.inuit.css)

Other include statements can be added to this file as well to add other igloos to your document, but leave it the way it is for now. By keeping the grid.inuit.css file separate from the rest of the inuit.css framework, along with any other igloos (or plugins) we want to add, we are making it easy to change the grid later should the need arise. For the purpose of this article, I’ll assume you’re using a grid that is composed of 12 columns.

Step 3: Apply a class of .wrapper to the body element in your document.

Step 4: Create a div element within the body element of your document. Apply a class of .grids to the div element you just created.

Step 5: Within the div element you just created, create a div element for each column you would like to fill with content. Each div can have one of the following classes:

.grid-1 — Spans one column

.grid-2 — Spans two columns

…

.grid-12 — Spans 12 columns

For example, you can create two divs that span six columns each, like so:

I filled the divs I created with lorem ipsum dummy text, but obviously you can do whatever you want. Alternatively, you can create however many divs you like as long as they span 12 columns total. To start a new row of columns, simply start a new div with a class of .grids, like so:

The grids all come with preset widths and therefore their box model properties should not be edited or overridden. If you would like a <div> with a yellow background and a padding of 10px then create a <div> inside a grid container and style that.

So, if you want to fill that last row of divs with a yellow background, you would do it like this:

Of course, you can style the .promo class in your stylesheet however you like. Classes such as the media object should also be placed inside a grid container and not applied directly to the grid container, like so:

Using a combination of the media object, the island object, the nav abstraction, the keywords igloo, and a 12 column grid, I created the following super awesome website that everyone would want to visit:

One of the coolest features of inuit.css is that it is responsive. All of the columns will stack vertically and fill any remaining horizontal space if the user’s browser is less than 720 pixels wide. I added an extra media query to my own stylesheet to add vertical space between elements that didn’t already have it:

@media (max-width: 720px)
{
.peninsula
{
margin-bottom: 1.5rem;
}
}

That wraps up my discussion on inuit.css. There are lots more ways it can be used to create great looking websites, so head over to the inuit.css website to check it out for yourself, and be sure to let me know if you found this article helpful!

It struck me as odd at first when I realized that, when expressed as a percentage, an element’s margin-top property is computed based on its parent container’s width as opposed to its height. (http://www.w3.org/TR/CSS2/box.html#propdef-margin-top) The same goes for its margin-bottom property, as well as for any vertical padding such as padding-top and padding-bottom.

After thinking about it some more, it does make sense this way. Specifying an element’s margin as simply 5% will result in the same amount of pixels on all sides of the element.

Is this a total “Duh” moment, or what? Was anyone else tripped up by this?

I had all but forgotten about Kaliber 10000 until it came up in an article by Molly Holzschlag on grid-based design. As a budding designer, I can’t tell you how many times I was inspired by something on K10K. I would throw some awful thing together in Photoshop, slice it up in ImageReady, and sew it together in Notepad. Visiting the link above was a real nostalgia trip for me.

Maybe, some day, I’ll post pics of some of my projects from when K10K was in its heyday.