Hey folks! It’s been a while since I’ve let you in on what’s going on with Pixeljam these days. We’ve got some stuff coming up I can’t wait to share; it’s really exciting times here at Pixeljam. Jeffrey is with us on a couple great projects and we’ll begin to reveal his beautiful artwork and animations in the coming weeks/months. I was told to hold off on revealing anything yet though I’ve been really anxious to share.
You might have noticed a new page when coming to Pixeljam.com; I wanted to tell you guys a bit about the design of this page and how I put it all together. First I wanted to make the page using responsive design and hopefully look pretty good at any size on any device. It took a lot of tweaking this and that, pushing the pixels up, up, down, down, left, right, left, right… et cetera. I think I finally achieved something that looks pretty good.
The process really began when Rich, Miles, and I sat down and discussed putting together a new front-page to our site (the majority of the rest of the site is still part of the dev blog, which is what you are reading now). We really wanted to put a single game face-forward and eventually be able switch it out easily with our next project and bump the current one down. Of course our most recent big release was Glorkian Warrior: The Trials of Glork, so featuring that game was obvious.
We drew out on a scrap paper a couple of our ideas on how the layout should look and then I began the process of mocking it up. I utilized a lot of the high-res graphics from the Glorkian project to mock up a real basic layout. Later after the first section was completed Rich went through and created some graphics for it. That’s pretty much how every section was completed, first I mocked up the real thing in HTML/CSS, then he went through and took my placeholder graphics and made them beautiful. After that I went back in and adjusted some section placements, text, even some image editing to get everything just so.
You saw our new logo, right? Rich adjusted some of the letter heights to give the text a uniform look and I think it really is an improvement.
I’m really learning a lot of this stuff as I go along, and managing our web presence at our games studio is only a portion of what I handle. In learning how to put it all together I really wanted to focus on utilizing the most current technologies and standards. I started laying out the page using Flexbox for every section. Flexbox has been being worked on for a while now and it’s finally reached a real standard, so I felt pretty comfortable using it. All current browsers support it, so everything was a go. We launched with pretty much all sections being laid out with Flexbox, and then I realized that some browsers were not displaying it properly (mainly Safari 5, and mobile Safari on the iPhone 4). This called for some adjustment and I removed a couple boxes that were flex and recreated them with another method: floats.
Now I’m not a huge fan of using floats. I feel like people go crazy with floats, floating everything on the page. It makes positioning a pain sometimes but is also a shortcut to getting what you want. In this case I was able to minimally use some floats to remove the problems I was seeing in Safari. The majority of the page still utilizes Flexbox.
The next bit of modern technology I utilized was SVG. Okay, I know what you’re thinking, SVG is really not that new, but I think that using it in the way I am is really a great way to do it. Coding scalable vector graphics (SVG) was not my forte previous to this project and I really knew nothing about it. I did know there was a lot of possibilities utilizing vectors, and wanted to see what I could achieve. You see in doing the web and trying to keep things pixel perfect we run in to a bit of a problem: scaling.
Scaling graphics is fine when you have high res graphics. When you want those crisp squares that come with Pixel art, the browser just wants to dither and anti-alias everything until it’s a big muddy mess of poor-looking pixel art. I have enough trouble trying to utilize our pixel fonts without making everything unreadable. Luckily for me there are some great tools available for working with SVG. My first process was to take any pixel graphics on the page and convert them using this tool by Arjan Westerdiep.
The next step was to take the newly generated pixel graphics in to Illustrator, clean them up, and remove extraneous parts. From there I used one or both of these tools: SVG Editor by Peter Collingridge, and the open source project SVGO started by Kir Belevich. These tools made the process of working with SVG so much easier, cutting image sizes down to their minimum. I then was able to group different parts of our graphics and animate them or utilize roll-overs or clicks for changing the graphics.
Next I’ve been working on an awesome Potatoman page, so you’ll see an update to the Potatoman page as we are working towards porting Potatoman to new platforms.
That’s all for now folks, keep jamming on!
by AD Bakke
Tags: css, pixeljam, svg | Click to Comment