Design
jQuery Tic Tac Toe
- Posted By:
- Matt
- Posted On:
- November 9th, 2008
- Posted In:
- Blog, Design
- Comments:
- 2 Comments
A few months ago I decided I needed to get good at Javascript and I figured a good way to get good was to make a working Tic Tac Toe game. Some of my co-workers are much smarter than I am and they helped me out a lot along the way explaining fundamental principles and helping me understand the massive amounts of math involved in seemingly simple tasks. After a lot of frustration and a lot of learning I have a working Tic Tac Toe game. It’s not perfect, it’s only one player and the computer is not intelligent it just picks a random open square and doesn’t know if one of the open squares will win the game. The computer won’t block you either, I should probably get on that…
It’s based on jQuery because using a Javascript library that allows you to traverse the DOM using selectors similar to CSS seemed like a good idea to me. I was surprised at how much actual Javascript I had to write even tough I was using a library as robust as jQuery. I figured I’d put this up as a work in progress, I’m pretty proud of it since until now all I’ve ever done is straight, static CSS & XHTML.
Check it out and leave a comment if you like it because I like comments.
Free Band iPhone Wallpaper
I was getting bored of my current iPhone wallpaper so I decided to make my own. I like music so I made a a few of my favourite album covers into wallpaper. I didn’t really do too much, I mostly just resized the covers. Use them if you like them. There you go, free iPhone wallpaper and free iPod Touch wallpaper.
To install them just visit this page with your iPhone or iPod Touch and hold your finger on the image you want. It will ask if you’d like to save the image. Open settings and change your wallpaper.
For some awesome iPhone wallpaper check out Adam Finley’s iPhone wallpaper.
Check Out Those Backgrounds…
- Posted By:
- Matt
- Posted On:
- September 9th, 2008
- Posted In:
- Blog, Design
- Comments:
- 3 Comments
My new design should have launched with the ability to temporarily hide the content so you can see the backgrounds that I spend so much time crafting for your enjoyment (just kidding, I spend as little time as possible… always). I didn’t realize how needed this feature would be until I started adding the backgrounds and realized a bunch of them were useless when they were all covered by content (stupid, boring content). So I added a little button in the top right of the page, click it and the content becomes 90% transparent, click it again and the content comes back. Simple. Enjoy it.
This Website Has Been Re-Designed
- Posted By:
- Matt
- Posted On:
- September 6th, 2008
- Posted In:
- Blog, CSS & XHTML, Design
- Comments:
- 4 Comments
After 3 months of pixel-pushing Idiot Banter has a new look.
The old theme was excellent and I still really like it but I felt the need to do some of the more creative things I’ve had in mind that I don’t get to use while working for other people. The new design is all about experimenting and pushing the boundaries of CSS and XHTML. Don’t get me wrong, none of this is ground breaking, but it’s my playground where I can use some more advanced code and not have to worry about selling ads.
The old theme was created when I was a Web Designer so it was very graphic heavy. I am now a Front-End Developer so I’ve focused on code more than graphics.
Some Highlights
- 100% fluid layout
- I was determined to finally create a 100% fluid layout and I did, but I don’t really see the point. It’s never practical when doing client work and as soon as you add graphics or even images to your posts you have to start adding fixed width or min-widths otherwise things get messy. It turned out to be more work than it was worth and it broke my heart to have to add a min-width when I started adding photos to posts.
- Dynamic Background Images
- At An Event Apart in Boston earlier this year Jason Santa Maria spoke about how design helps to reinforce the story. He explained that his site allows for “art direction on the fly” to bring the web experience closer to the rich visual experience of print. His presentation got me thinking and, since I’m not anywhere near as amazing as Jason, the best I could do was dynamic background images. I add the background parameters to a custom field and use JavaScript to extract those parameters and change the body background. Each post will eventually have it’s own custom background, here’s an example.
So Here It Is
Have a look around, there are still a few things I’m not 100% with (I struggle with type-setting) so like any other personal site, treat it as a work in progress. I’ve added my entire portfolio to Wordpress (it was static HTML before) so there are a few kinks to be worked out there. I’m really excited to blog about snowboarding with high resolution snowboarding pictures as the background! I also plan on getting heavy into JavaScript this winter so that should lead to some cool (progressive) enhancements. I already have plans for some way to allow you to make the content semi-transparent to allow you to view the sweet background images.
Thanks for checking out my new theme, enjoy.
Also, let me know if you need any designs cut into perfect XHTML and CSS….
Creative Commons Desktop Background
- Posted By:
- Matt
- Posted On:
- July 18th, 2008
- Posted In:
- Design
- Comments:
- No Comments
A friend of mine is currently battling a giant media company that thinks it owns his company, it’s a mess. In sympathy I made this Creative Commons desktop wallpaper, I know, big help…
Here is it in 3 sizes:
New Website: Love You To Death
- Posted By:
- Matt
- Posted On:
- March 10th, 2008
- Posted In:
- CSS & XHTML, Design
- Comments:
- 3 Comments
I’ve been working evenings and weekends for the past couple of months making some websites as favours to friends. The first of those websites to officially go live is a website for the power pop band Love You To Death. Love You To Death needed a new site because they changed their name from The Pettit Project and I know them because I used to play drums in The Pettit Project.
The new Love You To Death website is a custom Wordpress theme (made by me) with 2 plugins, Gigpress for tour dates and the Flickr Photo Album plugin for photos. I did all of the HTML and CSS and I did a little bit of design (background images) based on the logo, I did not do the logo.
I’m pretty proud of how it has turned out so far. Looks like they need a new store now since they’re still using a static one I built years ago but that will have to wait until after we snowboard in Vermont next week.
What Do You Think Of This New Design?
- Posted By:
- Matt
- Posted On:
- January 4th, 2008
- Posted In:
- Design
- Comments:
- 2 Comments
I’ve been thinking of re-designing this blog for a while. The design you see now is a draft I did for a client that never saw the light of day, I liked it so I used it. Deep down I’ve always wanted something more awesome. Let me know what you think of this potential new design for Idiot Banter.
Elevator Usability
- Posted By:
- Matt
- Posted On:
- November 15th, 2007
- Posted In:
- Design
- Comments:
- 2 Comments
In my mind there is nothing more usable than an elevator, it’s amazingly simple. The doors open, you walk in and you push the button of the floor you’d like to go to. You wait for the doors to open on your floor and you walk off, easy. If you’d like to keep the doors open for a bit longer you press the door open button, if you’d like the doors to close faster because you’re in a rush just press the door close button. The button beeps and lights up to let you know you’ve pressed it, it’s perfect.
Even with all of these amazing usability features, 90% of people still manage to screw it up when getting off of the elevator. I live on the third floor, almost at the bottom but still 2 floors away. Whenever I want to go down, the elevator stops and people start getting off on my floor, even though they don’t intend to, they intend to get off on the ground floor.
There are 4 indications that you’ve arrived on your floor:
- The display inside the elevator shows the number of the floor you’re on.
- The light on the button you used to select your floor turns off.
- The floor number is on the wall when the doors open.
- And if you’re going to the main lobby it looks totally different than any other floor
The elevator designers have given people these 4 very obvious indications of what floor they are on and they still ignore them almost every time I hail the elevator.
This just goes to show that no matter how hard you try to make something easy to use, people can still ignore your hard work, get off on the wrong floor, walk too far out on the wrong floor, and have to keep walking and hail another elevator because they’re afraid of looking stupid.
Black Lights Desktop Wallpaper
- Posted By:
- Matt
- Posted On:
- November 3rd, 2007
- Posted In:
- Design
- Comments:
- 4 Comments
I got tired of the EveryTimeIDie desktop wallpaper I have been using at work for the past couple of years and I couldn’t find a decent replacement so I made my own. I was using plain black for a while but it always made me feel like my second monitor was off, it was creeping me out. I still wanted something simple and dark but I wanted it to be obvious that there was a desktop background so I created Black Lights. Download it in 1024 x 768 (the standard), 1280 x 1024 (the size of my work monitors) of 1440 x 900 (my 17″ widescreen iMac at home).
The Difference Between A Designer And A Web Designer
- Posted By:
- Matt
- Posted On:
- October 30th, 2007
- Posted In:
- Design
- Comments:
- No Comments
As a front-end web developer it is my job to take Photoshop mocks and turn them into functioning, standards compliant, accessible web sites. Years of wading through good and bad designs trying to make everything pixel-perfect have left me with a very strong opinion of what makes someone a web designer, not just a designer.
Web Designers
A web designer designs with the web in mind. They understand how text flows on the web, they understand that the web is dynamic and that their designs should not depend on there being a specific amount of content in one particular area. A web designer understands that there are very few fonts that can be used as live text on the web and they know to only use web safe fonts for the body copy in their Photoshop mocks. Web designers also understand when it’s necessary to use images containing non web safe fonts (for titles for example) and when it makes more sense to use web safe fonts.
Web designers understand how their Photoshop mock will be cut. They know not to design an effect that relies on transparent PNGs if most visitors to the website browse using IE6. They know how big their typical user’s monitor is and they design accordingly. Web designers know that I have to wade through their mess of a Photoshop file and they label and group their layers properly, “Layer 79″ means nothing to me!
Designers
Designers don’t understand any of the above. They design for the moment as though nothing will ever change. They don’t understand dynamic content, they don’t understand that the user has ultimate control over the font and the font size. They don’t take browser dimensions or variable font sizes into consideration. Designers use whatever font they like whenever they like. They make nice long flowing gradients that only work if there are exactly 500 characters in that column.
A designer without an understanding of the process involved in making their Photoshop mock into a website is like a print designer that has no idea how a printing press works.
There’s Hope
Don’t give up designers, you can change. Take a couple of evenings a week and start learning HTML and CSS. They’re not as hard as they may seem and once you know them (you don’t have to be an expert) you’ll be that much more employable, 2 more things to add to your resume.
You can find tutorials that I’ve written in my tutorials section or you can turn to the tutorials at W3Schools. You can read one of the many books I recommend in my library section or ask a web designer friend for some help. Once you understand some HTML and CSS you’ll have much more control over how your designs turn out on the web and you’ll be able to better communicate with your front-end developer.
Life will be better when you know HTML and CSS.
-
Subscribe
-
Matt is...
Categories