So here is just a quick case study going over everything that went into making this site. The goal of this website was to create something very simple and professional, where I can practice my blogging and SEO techniques, while having an outlet for all my projects.
I decided to build the site as a WordPress site. The reason for this is to have an easier management of SEO’d content that would require less coding. I wanted to focus on content, and not rolling my own PHP backend.
And while it makes getting everything set up semi-nightmarish, once it is, writing new content is a breeze, and there are many invaluable plugins. It also makes quick changes to the design much easier.
Here was how I divided the queries:
- Full Size – anything over the full width of my site, 960px
- 100% Width – smaller than the full size, so the content is stretched to fit the page
- Hidden Sidebar – once the screen was too skinny I moved the sidebar to the bottom to make room for content
- Dropdown navigation – Once the header of my website could no longer fit the logo and the navigation, I hid the navigation and added a single button to open it
- Smaller Font Sizes – This was the last one, just shrinking fonts incrementally to fit different sizes. This was a couple queries, the smallest being 215px wide.
Responsive Pixel Art Gallery
The hardest part was the Pixel Art page. I had to find a way to make the images scalable, but never resized by the browser. This is because pixel art can not be resized except for at intervals of 100%, 200% 800% etc, and must use nearest neighbor filtering to insure no unintentional colors are created. Unfortunately browsers today are not made for this kind of thing, and add billinear filtering to almost all resized images, and there’s no good cross platform solutions as of right now.
The real problem was the media queries do not allow you to change the source of an <img>, so you would have to load all sizes of an image, then hide all unwanted ones. Plus you would have to do separate media queries for each different image.
So instead I am using a plugin called jQuery Picture which allows you to switch images via the page width, similar to CSS media queries. It loads the smallest one first, and then decides if it can fit a bigger version of the same image, and if so loads that. They are all pre-resized, so the browser is never given the chance to resize them itself.
New Tools Used
For this project I tried out 3 new tools, Grunt.js, Sass and IntelliJ IDEA.
- Grunt.js is a program that automates many different useful tasks of creating a website. Unfortunately from my experience I found it a bit too hard to setup and configure. It’s a command line based program, and you configure it through a configuration file. While it does offer lots of great plugins such as image compression, sass compiling, really anything you could need. But I spent far too much time setting it up for it to be worth it. I could see how it could be useful on a bigger project, but for something this size I wouldn’t use it again.
- Sass is a language that you write in that compiles to CSS. It gives CSS some useful features such as variables, math, nested
- IntelliJ IDEA is an IDE, typically used as a replacement for Eclipse with Java, but works with other languages too. It was nice to have the SASS highlighting, but in the end I find Notepad++ to be less daunting, as this IDE has far more features than I’d ever need.