Weekend web work

I spent some of the weekend adding to the Pixels on Toast website. I added Javascript animated slides for the main image, changing out every 10 seconds. There is a slide for each of the games, as well as a Pixels on Toast slide. You can also access each slide individually and statically by clicking on one of the game boxes beneath the main image.

Here are some things I noted whilst updating the site.

A change is (almost) as good as a rest

To prevent fatigue from working overtime, I’m purposefully switching tasks to something other than the regular work during extended hours. Tasks like updating the website. This means that evenings and weekends feel a little like a rest from the day job, even though they are spent achieving work that needs to be done just as much as the regular stuff. And when I return to the 9-5, the work still feels fresh.

Websites are iterative work

A website is never finished. There are several things I know I need to do to the site - the tweet button and Facebook “like” button are still awkward for one, but it’s better than it was before the weekend. And that’s OK, websites change and evolve over time to a greater extent than games do, which once they are finished are generally added to rather than modified.

BBEdit is probably great

I’ve started using BBEdit for my web site coding. It has a great range of HTML tools, including validation, link testing and code completion. It has Grep built right into its search and replace dialog.

I’m also a fan of its lightweight implementation of projects. Simply choose a folder on your hard drive: that’s your project. Changes on disk are automatically updated in the project tree. Compared to, say, Xcode projects which hold a separate representation of your project structure, this means that there is no data duplication. Maintaining both a project tree and a disk system tree can be painful. The simplicity of the singular representation reduces friction.

It’s early days with BBEdit, and I’ve only scratched the surface, but so far so good.

960.gs is definitely great

960.gs is a system for designing and coding websites through CSS that aims to speed up your productivity and help you implement a vertical grid system. This isn’t news for true web designers, but for casual tinkerers like myself, the discovery of the benefits of 960.gs this weekend was a nice surprise.

For those not familiar, a brief overview. The page you produce is always 960 pixels wide, which was chosen as it works well on most modern devices and is easily divisible into equal columns by many factors. 960.gs provides several CSS files for you to choose from, dividing your page vertically into 12, 16, or 24 columns. Design templates for pretty much any software package you can mention are included, from Photoshop to OmniGraffle.

Choose the number of columns which is appropriate for your site. It’s advisable to choose the lowest number that you need for your design, with 12 being sufficient for me, it being divisible by 3 (note the 3 game boxes below the main image on the website).

The CSS file lets you set HTML divs easily for size and position within the chosen grid system simply by setting the class. So class=”grid_4” would indicate a div 4 columns wide, and class=”grid_2 suffix_2” would indicate a div 2 columns wide, with a gap of 2 columns after it. Spaces between adjacent divs are automatically dealt with, and are 10 pixels wide. 

It’s worth noting that the grid isn’t strictly enforced, it’s entirely optional and you can break out of it at any time by simply not using the CSS classes.

See the 960.gs website and Google for the many tutorials online for more information.