Code a Backwards Compatible, One Page Portfolio with HTML5 and CSS3

January 25th, 2010 97 Comments

HTML5 is the future of web development but believe it or not you can start using it today. HTML5 is much more considerate to semantics and accessibility as we don’t have to throw meaningless div’s everywhere. It introduces meaningful tags for common elements such as navigations and footers which makes much more sense and are more natural.

This is a run through of the basics of HTML5 and CSS3 while still paying attention to older browsers. Before we start, make note of the answer to this question. Do websites need to look exactly the same in every browser?

View Demo | Download Files (.zip)

Read more...

15 Stunning and Fresh Premium WordPress Portfolio Themes

January 19th, 2010 16 Comments

A benefit of building a portfolio using WordPress is you have the ability to use the powerful blog features alongside your portfolio. A blog discussing your work or more about your processes and inspiration will add to the personality and allow potential clients to get to know you more increasing the attractiveness of you as a web designer. WordPress can also act as a more than adequate CMS for displaying your portfolio work.

Read more...

Call to Arms for Web Designers: Make Simplicity the Trend for 2010

January 15th, 2010 51 Comments

When designers talk about web design trends, more often than not, they’re referring to a visual design style such as letterpress or gradients but a trend doesn’t have to be something you see.

So this doesn’t mean you have to resort to using a minimalistic design to achieve simplicity in web design. Far from it. Applying simplicity to your websites or designs can be as simple as removing unnecessary elements or by reducing the steps it takes to complete a specific task.

We live in a world where technology is becoming more and more advanced but the way we interact with it is becoming more and more simple. The current example are touch screens and the impending release of tablet computers. When you look at what touch screens are doing for usability, you realise they are removing any intermediate devices (keyboards and mice) and allowing you to interact with the device directly. A great example of making something easier through simplicity.

Read more...

How to Create a Theme Development Environment for a Live WordPress Site

January 11th, 2010 72 Comments

Any good website owner knows that they need to be constantly looking at ways to improve their site even through small little tweaks. If you’re using WordPress you’ll notice that it isn’t easy to create a development version without creating a separate installation. Of course, you can make changes directly on a live WordPress site but that isn’t recommended for anything other than minor tweaks.

With the help of an excellent plugin for WordPress called Theme switch and preview, this tutorial will allow you to easily switch between the live site and development versions using two different themes on the same installation of WordPress. We’ll do this by creating a bar at the top of the page which will clearly show you if you’re viewing the live theme (what everyone else sees) or the development theme with a link to switch between the two.

While there may well be a Worpdress plugin that does everything below, it’s much more rewarding and satisfying to create your own solution.

Read more...

A Look Back at the Best Redesigns of 2009

January 7th, 2010 29 Comments

With 2009 complete, we can take a good look back and realise that it was a great year for web design. It’s time to reflect and see what redesigns really were the best of the bunch from such a great year. While redesigning Inspect Element, I took the time to see what other sites had done to reinvent themselves and breathe new life into their projects. Here are just some fantastic examples from the last year and what makes them so great.

Read more...

Fantastic Presentation Styles of Web Designers' Portfolios

January 4th, 2010 27 Comments

Portfolios are an important part of a web designer’s job hunting arsenal. In most cases they are the only thing that a prospective client or employer have to decide if you are the right person they are looking for. More importantly, portfolios are extensions of our own work so don’t just think of them as dumb pages to show off your work. Treat your portfolio design as just another piece of your own work as they deserve to be.

This is something I’m currently researching myself as I start preliminary work into redesigning my own rather dull portfolio display so it would make sense to share my findings with you all.

Previously we’ve looked at web app homepage design and the key ingredients of great single page web design and now it’s the turn of web designers’ portfolios. There are a number of different ways to present your work. Here they are as well as some of the best examples:

Read more...

New Year, New Design, New Motivation

January 4th, 2010 19 Comments

The first six months of Inspect Element have been great but it’s time to step it up a level. If you’ve been following Inspect Element lately, you’ll notice that everything looks new! Times have changed and the site was in desperate need of a redesign in order to grow and improve. Although saying that, I wanted to carry over the fundamentals from the previous design including keeping a minimalistic appearance to keep the focus on the content.

Hopefully this new design conveys a sense of higher quality, something that I have been trying to do with my writing after writing for the last couple of months.

Read more...