Categories
CSS Expression Web News WordPress as CMS

Introducing Design is Philosophy

After finishing a series of projects long overdue I finally had a couple of days to sit down and redesign my much neglected blog. Over the summer I’ve jotted down ideas and sketches for this blog but I’ve never really had time to get down to work. At the same time I’ve been telling everyone and their dog about how well Expression Web works as a blog design tool and how well WordPress works as a CMS. So I figured it was about time I put everything together to demonstrate that there is reality behind all the talk. And after 3 days of hard work, here is the result: A WordPress blog designed from scratch in Expression Design and Expression Web 2.

New name

To start off with, I’ve renamed the blog to “Design is Philosophy – The Pink & Yellow Media Blog”. The new title is intended to better reflect what the blog is about (design, communication etc) and to emphasize an important element to design I feel is often overlooked. For me, design – whether for print, web, video or anything else – is a kind of communication. And when we approach design as a means of communication, things look very different. Some may say it is a stretch to go from design to philosophy, but in reality the science of philosophy is the science of communication – at least on a meta plane. That’s how I see it anyway. I intend to write more on this topic in the future and in time I’m sure it’ll make more sense to everyone, and not just me.

Everything in one place

For the last six months or so I’ve been tracking user behavior in blogs I’ve created. What I’ve found is that people tend to migrate to the sidebar in search of navigational tools. To facilitate this kind of user behavior and promote communication, I’ve included a tabbed box on the top of the sidebar where I’ve put the most sought after information along with links and menus. The box is based on CSS and JQuery and provides massively enhanced functionality for the visitor as well as me.

Visual elements

To further facilitate communication I’ve added a series of visual elements to the overall design. These include the left hand date tabs, the header background and the comments speech bubble. These elements are included to give the visitor instant and easily understandable clues as to what she is looking at. And did I mention they look good as well?

It validates (at least without content)

As I said, the entire site is built from the ground up on the WordPress platform using Expression Web 2. As a result, the markup and CSS are both valid and compliant. Unfortunately I can’t say the same about the page contents (Amazon.com links and YouTube videos for instance are full of deprecated code) so the validation part only works in theory. Still, the code of the site is sound and it works and looks the same across Internet Explorer 7, Firefox, Google Chrome, Safari for Windows and Opera. I’d love to hear from users of different browsers if they generate any errors, but I don’t think they will (unless they’re using IE6, in which case all bets are off).

Every road begins with a single step

Although it may look like the blog is now complete, I consider this to be only one of the first steps in its journey. There are still counless elements that are not included and issues I have forgotten or don’t know about yet that need to be fixed. For this reason I spent a lot of time working on the foundation of the blog to facilitate future fixes, realignments and redesigns. Interestingly this obsession with creating a “peftect” startingpoint for a WordPress theme has lead to the creating of a solid framework theme that I think I’ll end up publishing for other designers to use. More on that later.

WordPress + Expression = Great Blog Design

I think with the publication of Design is Philosophy I have achieved my main goal: To show that the combination of WordPress as a CMS and Microsoft Expression Web 2 as a design and development platform is one that unharnesses the almost unlimited potential of CSS as a design and layout tool and gives anyone with a vision the ability to make that vision a reality.

Tutorials are on the way

My pile of tutorials-to-be-written is starting to resemble the Leaning Tower of Pisa and I think it’s time I publish some of them. So in the coming months I’ll start posting a series of articles and tutorials on how to use Expression Web 2 to create, customize and restyle WordPress blogs to look like this one.

By Morten Rand-Hendriksen

Morten Rand-Hendriksen is a staff author at LinkedIn Learning and lynda.com specializing in WordPress and web design and development and an instructor at Emily Carr University of Art and Design. He is a popular speaker and educator on all things design, web standards and open source. As the owner and Web Head at Pink & Yellow Media, a boutique style digital media company in Burnaby, BC, Canada, he has created WordPress-based web solutions for multi-national companies, political parties, banks, and small businesses and bloggers alike. He also contributes to the local WordPress community by organizing Meetups and WordCamps.

2 replies on “Introducing Design is Philosophy”

Comments are closed.