KeithMcLaughlin.ie has a new design!

I am delighted to announce that my personal web design portfolio website at keithmclaughlin.ie has a new design!

I have wanted to get this new design live for months but have been too busy with client work to give it the proper attention.

The unfortunate events of COVID-19 resulted in less client work, which in turn gave me the time to work on the new web design.

Moving away from WordPress

The old website was powered by WordPress with a theme built using Bootstrap CSS.

The new site is powered by Gridsome using Tailwind CSS for the styling and layout.

I would love to hear your feedback on the new design :)

Standard Web Fonts Revisited

A good while back I asked about Standard Web Fonts. According to my stats app, it turns out that a lot of other people are also interested in finding out the answer. I was going to put together a detailed post on the subject but after a quick search on Google I found an article that covers everything my post would have.

Common fonts to all versions of Windows & Mac equivalents

Don’t bother with web standards!

Quite the statement huh? No, I’m not saying it, but Microsoft essentially are.

According to The Register’s article ‘Microsoft breaks IE8 interoperability promise‘, Microsoft intend on displaying a broken page icon next to all web pages that are standards compliant.

What does this say to your average Joe Blogg user? Standards = wrong. At least that’s the way I see it. And of course some lots of those users will probably want to design their own web sites. Do you think they will design to standards now? I think not!

New Design

As you can see the new design is live, and to be quite frank, it’s long overdue. Looking at the previous design day-to-day really bugged me, but I had a million other things that kept me from finishing this design. Thankfully I managed to make time to get it done.

As promised, I will discuss:

  • How the design came about.
  • Articles, tutorials & blog entries that helped me along the way.
  • Plugins the site uses to display different content.

How the design came about

The colour scheme was chosen by playing around with colours in Photoshop, but was somewhat influenced by some of the schemes at the Color Schemer Gallery.

For the layout, I wanted to be able to display recent Portfolio work somewhere noticable, so I decided on the top of the sidebar. Because of the various other information I wanted to display, I chose to create an ‘extras’ section above the footer. This resolved the problem of having an extra long sidebar (particularly on blog entries that had little content).

With the decision made to use two columns, a header and two footers (one for ‘extras’), I decided to use the same background colour on the columns, which meant I didn’t have to worry about Equal Height Columns.

There you have it… how the design came about!

Articles, tutorials & blog entries that helped

For the top navigation I had originally planned on using Roger Johansson’s Inverted Sliding Doors Tabs technique, but was unable to get it to look exactly as I wanted. I decided to use Dan Rubin’s Navigation Matrix Reloaded instead, with the help of Veerle Pieters’ The XHTML/CSS template phase of my new blog, part 2 blog entry.

To achieve the calender icon look beside each of the blog entries I made use of Shirley E. Kaiser’s Creating a Blog Entry Date Calendar Icon Look with CSS, Mostly, with some modifications of my own :-)

WordPress Plugins Used

The Previous Blog Entries on the sidebar is powered by the Recent Posts plugin.

The Contact page uses the extremely flexible, Secure and Accessible PHP Contact Form plugin.

The Latest Web Design Projects on the sidebar is a Page which is included using the Improved Include Page plugin. The same can be said for Web Design Projects on the sidebar of the Portfolio.

The books and music links in the extras section above the footer are powered by the Amazon Media Management Extension plugin.

All Google Adsense Ads and Text Link Ads are handled by WPAds.

All source code displayed in blog entries (future blog entries) is converted into ‘sexy looking’ source code using the SyntaxHighlighter plugin.

A final word

Originally the doctype was set to HTML 4.01 Strict, but the design passed the XHTML 1.0 Strict validation test (to my delight), so the doctpye is now XHTML 1.0 Strict. During the launch of the design I threw in an upgrade to WordPress version 2.1.2, just for the heck of it ;-)