As this is my first post on the blog I guess I should formally introduce myself - hello, I'm Ralph Croly and I'll be working on the research, puzzle design, UI and sound design for the game.
As resident web designer my first job was to design and build this spiffy new blog that you are currently reading, I have designed and built many websites and blogs before (you can see some on my website pluggy pluggy! apologies if it's a little stagnant - I haven't had a chance to update it in a while), so I decided to use this site as a chance to test out some of the newer technologies that are beginning to emerge; namely HTML 5 and CSS3.
With new technology comes great er, responsivity?
As with any new technology it takes time for the community to get to grips with it, and to figure out the best practices and pit-falls. HTML 5 and CSS3 bring us a whole host of new features; better semantics, the promise of better cross device support, and better media support. As a front-end developer type the stuff that most interests me is the new
@font face CSS feature, which allows the simple embedding of non-standard fonts into a website. Look at the post header up there, it's an example of this technique in practice. Font Squirrel Is a fantastic resource for this technique.
Another excellent feature of this new technology is media queries. With their use it is easy to deliver different styles to different devices, just with a little bit extra CSS enclosed in a media query. As this is a blog about the development of an iPad game, it made sense to me to optimise the site for each category of device. Try it! If you are looking at this on your computer, try resizing the window and see what happens (If you are on Internet Explorer 8 or below, I'm afraid this isn't going to work for you. Anyway, cop on and download Firefox or Chrome will you!? At least Internet Explorer 9...). If you're on an iPad, change the orientation and see what happens. Magic!
This is the first time I've employed this technique, so there are bound to be a few hiccups and inconsistencies - there are just so many internet enabled devices out there it is impossible to test on them all. I used the excellent Skeleton Framework and a bit of guidance from the wonderful A List Apart's book Responsive Web Design. Here's the original post on responsive web design
If you have any comments, notice any bugs, problems on certain devices or want to put me down, please leave a comment!