Creating my site one block at a time
Creating my site one block at a time by Dennis Coughlin
Design brief
Create a personal website that highlights essential content with a minimal selection of colours and graphics.
The following is a list of all the major bit and pieces I used to achieve this goal:
Typekit
This site uses Typekit to display the Museo font for all body text. Typekit is a subscription-based service for linking to high-quality fonts. Essentially, it allows all your visitors to see your intended font, removing restrictions such as browser version, font availability or licensing issues.
This is the first time I've used Typekit and the process was extremely simple and user friendly. To start off, I spent some time reviewing their large catalogue of fonts and finally decided on Museo for its friendly and relaxed appearance. To install the font, I simply clicked the "add" button and selected how it should be applied. In my case I wanted to apply it all text, so I went for the "body" tag.
JQuery
JQuery has quickly become an industry standard for Javascript coding, especially among the web design community for its ease of use and extensive examples. I used a variation of the JQuery code below to create most of the navigation on this site. It's the most simple version of JQuery tabs I've come across and it perfectly fits the way I wanted to show and hide content on this site. You can see it under the top navigation as well as the links found under the Portfolio page.
Simple Tabs with CSS and jQuery
I wanted to display my 3 most recent Tweets on the site, however I ran into an immediate problem; the updates from Twitter were slowing down my page loads! That's when I found the following code, which allows your page to load without waiting for Twitter if it happens to be slow, unresponsive or completely down. Plus, if it does encounter any delay while loading Twitter, it displays a nice interim message, which says, "Waiting for Twitter..." along with an animated spinner.
Add Twitter to your blog without slowdown!
Asynchronous Google Analytics
I'm using the new Asynchronous Code provided by Google. Unlike the original Google Analytics, this code allows your page to continue loading while communicating with Google in the background. Once again, this helps to remove any page slowdown.
Placing the code into your page is also a bit different as is goes to the top of your page, right after the opening "body" tag. That feels a bit weird at first as I've always been taught to "put the Javascript at the bottom!".
This new method does seem to be doing the trick so far as there is a noticeable reduction in the page load times.
CSS sprite buttons
Sprite buttons are another great way to reduce file size and speed up your site. I've used a standard CSS sprite method to create all the buttons.
CSS Tutorial: better nav image replacement How to Build a Simple Button with CSS Image Sprites Designing CSS Buttons
960 Grid
For every website I create this days, the grid is always the first thing I sort out. It is invaluable. This site uses a 960 pixel wide grid with 8 columns. I built it using an "in-browser" tool called the 960 Gridder, but you can also use templates for Photoshop on the 960 site below.
Wordpress doesn't live here
Finally, it's worth noting that I did not use Wordpress to create this site. That's a significant change for me.
Wordpress has become the industry standard for blogs and personal websites. However, for this specific site and my personal reasons, I'm finding that Wordpress would have been more of a hindrance than help.
First off, I do not use Wordpress in my daily work. I'm a full time employee so unlike a large number of web design freelancers out there, I work in a corporate environment where my sites are hosted on large platforms such as .Net. So in relation to my job, there is no incentive for me to learn the intricacies of Wordpress.
More importantly, I feel it was stifling my creativity. I have used Wordpress in the past and continue to do so with other side projects. However, as this is my personal site, I really wanted to use it to hone my skills and become a better designer. I find that if I create a Wordpress template, I spend most of my time fighting with its unique code to display my content rather than focusing on the design or creative elements.
With all that in mind, I've created this site using nothing more than standards based HTML, CSS and JavaScript. It's a refreshing change and I would recommend it to all you other web designers out there!
The death of the boring blog post? Jason Santa Maria: A New Day
Conclusion
I'm excited to keep updating this site and letting it evolve. I hope you've found the information above useful and it helps you in your own projects. Cheers & thanks for visiting.