Thomas Winston Thorpe

HTML5 and CSS3

For this, the latest incarnation of my site, I decided to move forward with HTML5 and CSS3. This decision was made because HTML5 is becoming more and more pervasive. More browsers are supporting it and more Web sites are using it every day.

Personally, I love HTML5 right now. I think that it is a huge step forward, and has not come a minute too late. I also love the fact that folks have written all sorts of great JavaScript shims that make certain browsers play friendly with HTML5, bringing its functionality to the masses.

Furthermore, I absolutely love CSS3. As a designer, I have been waiting for this for quite some time now. I love everything from the dopey rounded corners to the incredibly awesome transitions. I just cannot wait for this to come of age and for all browsers to support it. I really think that this brings our craft much farther ahead.

Blueprint

I think quite highly of CSS frameworks. I understand the arguments both in favor and against them. However, for me and my needs, frameworks are very useful. After much deliberation, I settled on Blueprint CSS for my framework. I like the ease of use that comes from their grid and lot of the extras they provide to support their grid (such as a rock solid reset style sheet and a great set of typography styles).

Media Queries

I have been playing with Media Queries quite a bit over the past few months to deliver sites to a wide variety of devices. My site is no exception. I have a set of Media Queries available that will alter the layout of the site to be displayed on devices that support this functionality. For the older devices out in the world that still support the old Handheld media type, I have a media style sheet especially prepared for them.

LESS CSS

While I think that CSS3 is absolutely amazing, I still think that it lacks some basic functionality that I have lived with in programming languages for forever and a day now — namely variables. It is for this reason that I chose to use the ASP.net port of LESS CSS, named dotLESS.

I have not taken full advantage of all that LESS has to offer, but I have taken advantage of what I need — again, most notably, variables. The use of variables makes it very easy for me to keep track of commonly used elements, such as margins, colors, etc. If you have any interest in streamlining your CSS and adding a bit of programming-like functionality to it, I would highly recommend trying out LESS.

jQuery

I think this might be a bit of a given, but I will say it anyway. I, like everyone else out there, use jQuery for the supercool JavaScript enabled parts of my site. Specifically, I am using the jQuery UI libraries for things like modal dialogs and progress bars. I could be making more use of jQuery on my site, but I always think that JavaScript should enhance the experience, not overwhelm it.

APS.net and C#

OK, OK, I admit it. I enjoy code. But, please do not tell anyone! I fear they might revoke my artistic license!

I do not know as much about programming as I would like, but I am learning. For years now, I have worked in the ASP.net and C# environments, so for me, it was an easy choice to build my site using these technologies. I have used my site to teach myself more about C# and I have incorporated bits of pieces of code, scattered all across my site, to make it do some of the cooler things (such as hiding and showing elements, displaying my portfolio from a database, etc.). And, of course, I use the powerful Visual Studio, provided by Microsoft, to use these technologies.

TypeKit

A recent new addition to my Web Designer's toolkit is TypeKit. This wonderful service serves all of the groovy cool fonts you see on my site. I finally have a reliable service that provides me with high-quality, professional-grade fonts. If you are a typography nut, as I am, I would highly recommend this service – give it a try and finally start designing with the fonts you know and love!

SmushIt

Another recent discovery is SmushIt, from the Yahoo! Developer Network. This tool accepts a bulk upload of your images, examines each one and determines where it can cut the fat. Sometimes, it can reduce as much as 50% of an image without a decline in quality. This can be a huge gain for speed and performance for your site.

Source Code

I invite you to view my source code and CSS files.

I will be honest with you… when I have a candidate to interview, the first thing I ask them, even before I meet them, is for a link to their personal Web site. After a few minutes of pointing and clicking to see their design and UX abilities, the very next thing I do is view source. I take a look at each of their pages, their CSS files and any JS files they may have. I look to see how the code is built, how well it is documented and how well it validates.

I invite you to do the same with my site. You will notice that my HTML should look a little smashed together, but that's all thanks to ASP.net. You will also notice my nearly anal–retentive level of commenting, but I believe in good commenting and documentation. And, most importantly, all of my HTML validates. Now, on the other hand, my CSS does not validate, but I am 100% a–okay with that. The reason that my CSS does not validate is that I am using lots and lots of CSS3 through the wonders of vendor prefixing (which the validator does not like).