Category Archives: CSS

Web Design – the Skeleton Framework

This week we are taking a small break from our regular theme of games and looking at web design, specifically at using the Skeleton framework. Something that I learned from The Art of Game Design is that learning better design principles from any kind of design will help your game design.

Why Are We Talking Web Design?

I had my phone out and was looking up a certain kind of local businesses around my area and found that there were only a couple. When I clicked the link to their websites I found that they were not ready for phones. I had to pinch and zoom and scroll around the page. The information was there and the navigation was clear but it was just not designed to work on a phone.

Since I had been meaning to learn better responsive web design in an effort to increase my value as a web based programmer (my current day job), I decided I would take one of the sites on as a project. So I completely redesigned the whole site and made it mobile responsive. I was proud of my work and asked the opinion of a coworker who is very good at design.

He made a simple suggestion that took the redesign to another level.

Adding a Skeleton

My coworker suggested that I add a CSS Grid system to the site and recommended Skeleton. I had never heard of it before and decided to check it out.

One of the most common CSS grid frameworks is Bootstrap. Many people who have looked into modern web design can pretty quickly identify a site that uses one of its templates or something like it. I have tried learning more about Bootstrap in the past but always found it a little murky and never made much headway in understanding what it was trying to do.

Skeleton is a very light CSS framework that allows you to get started applying a grid system to your website design with just a few classes. It is pretty clear what it is trying to do, and it sort of self documents by example on their site. I found it extremely easy to get started with.

The grid is basically rows and columns. You then use these 2 building blocks to create a cohesive design that is more aesthetically appealing. Additionally it helps organizes the information that is being displayed to be more easily consumed by the user.

After applying Skeleton to the site, it looked 1000% better (in my personal opinion).

Lessoned Learned

Many of the principles of grid systems, such as cohesion, can apply to games and most importantly to the part of the game that the player interacts with, the interface.

Every game has some sort of interface that the player uses to play the game. We as game designers should take things like grid systems and learn to use the principles that they are based on to improve our games and their interfaces.

Don’t forget to look for inspiration in all design.

The State of Web Printing

Cross Browser Printing is Annoying

My current task at my current place of employment is to get a certain web page to print to a single piece of paper without heavily modifying a pre-existing print stylesheet and getting it to work on both Firefox and IE. Not all the browsers have to be the same, they really just need to print to 1 page.

The first problem that we come across is that margins and padding are way different in each browser. After a quick web search, the culprit appears to be the use of px and pt. When printing apparently the em element is a better choice as it is more consistent unit of measurement and px and pt are arbitrarily handled by printers and browsers alike.

The second problem the @page CSS directive and page margins. It seems that each browser wants to handle things differently, which is not new and not entirely wrong according to the W3C which as an article about that here. But that does not help our problem which is to disregard how the browsers want to display things and make sure that things come out the way we want.

For once, IE is behaving the most sensible for our purposes. It takes the @page margins and sets the printed page margins to what we want. Firefox, however, makes things difficult by taking the @page margins and adding them to the browsers default printer settings. Why, I have no idea, but we have to deal with it.

The goal is to keep the whole website on 1 stylesheet and also not to have any browser specific hacks or browser sniffing. Unfortunately, if we want similar behavior between the 2 browsers in this case, the best way that I have come across so far is to add a directive to our print CSS that is Firefox specific. The @-moz-document directive is used so that we can set the @page variable inside it to trim the margins back for just Firefox. Other browsers will ignore this directive as it really doesn’t tell them to do anything.