Visual Inspiration

I’m a web designer and a front-end developer (CSS/XHTML), so naturally I take a lot of inspiration from visual sources. And, since I spend all of my time online, that usually consists of looking at other sites, design galleries, and anywhere the next tweet sends me.

However, I have also found that much of my visual inspiration comes from the print world. Since print designers don't have to worry about the same constraints that web designers do, they have a lot more flexibility with their designs. They can put just about anything anywhere and send it to the printer. Browsers aren’t as accepting. I generate a lot of ideas from the print world and with a little CSS creativity I can achieve similar results.

Audio Inspiration

Listening to other designers and developers talk about the industry and clients really fires me up. The last couple weeks I have had my headphones tuned to the Big Web Show hosted by Dan Benjamin and Jeffery Zeldman. I’ve been following Zeldman, Happy Cog and crew for a long time and I try to study everything they do. If you love design and web standards then you know that when Zeldman speaks, you listen.

Dan and Jeffrey have an unbeatable list of guests, and the show really gives me great insight into their perspectives and thought processes.

Dan has five other shows too. EE Podcast with Ryan Irelan is another one of my favorites. Ryan Irelan’s series on EE saved me hours of headaches. If you're starting out with ExpressionEngine, I highly recommend checking it out.

The audio inspiration is great because I can still sit back and design or code, but I can also learn a few things at the same time.

Literary Inspiration

I’m working on becoming a better writer, and the web is where I write, so I've been getting a lot of inspiration from reading on related topics – writing for the web, content strategy, and the concept of copy versus content.

I sat down and read Kristina Halvorson’s Content Strategy for the Web this weekend and once again I’m fired up to go back to work. Kristina is the president at Brain Traffic and their blog is another great source when it comes to content strategy.

I was brought on to JMG as a designer, but also to help out with web standards, SEO and social media. I also do my fair share of content wrangling and as anyone who has ever worked with clients in a corporate environment knows, changing processes isn’t always the easiest thing.

The book goes into great detail on why good content is so hard to come by and what processes you need to put in place to get you there. Throughout the book, Kristina mentions numerous other great books that are now part of my future reading list.

Inspiration can really come from anywhere; you just have to be open to accept it. I find that I’m most open when I’m learning about the things I love – design, development, writing and the Internet.

Where do you draw your inspiration from?

Published in: Design

We left South Carolina early Tuesday morning and were on the beach by 1pm. A fairly short trip for feeling like you’re in the middle of nowhere. Our resort/cabana #1 was amazing, the people were very hospitable, and every bike ride or walk was a new adventure.

We spent our days lounging at the pool, snorkeling with sharks & stingrays, walking through Mayan ruins, and exploring the less inhabited areas of the island. The off-road golf carts gave us the ability to discover new locations that weren’t accessible by any other means.

One of the most pleasant aspects of our exploration in Belize was that no matter how desolate the area, there was always a beach bar around the corner with nothing but a lonely bartender ready to serve you a refreshing beverage, surely an advantage of going during the off season.

We loved Belize and we can’t wait to go back.

Published in: Family

In the past, I've tried to redesign my site about once a year and I've been able to stay on this schedule up until 2009. The redesign process started on track and everything was going according to plan until I came across and became enfatuated with grid based designs.

Designing on a grid allowed me to layout my content in a much more structured manner. Typically, when I began a new design, I would layout certain elements where they felt right. I've always been anal about sections being equal widths and counting pixels to make sure everything was perfect. In a way I was designing on a grid without realizing it.

Grid based designs and CSS supporting templates have popped up all over the place the last couple years and while I have been using grids at work for a while now, I was ready for this site to reflect the same skill set.

Content Refresh

Whenever I redesign a site, I also take a long hard look at the content to make sure it's conveying a consistent message with the new look and feel. Thinking about how my site was structured I removed a lot of content and reorganized articles, posts, and pages. In my previous architecture, I had quite a few pages that were technically under my services area, but weren’t actually services. My viral marketing strategies article is one of the most visited pages from the search engines but unless you came from a search engine, you probably wouldn't be able to find it.

Since I was planning on redesigning every page it was also time to rewrite all of the content as well. Over the past couple years my content has become bloated and "pitchy." I didn’t like that and wanted to get back to what was more important. Clear, concise content that simply explained what I do and how I can help or guide you to the next step.

The re-writing process took about 6-8 months. I wrote and rewrote each page about three times trying to cut it down each time and make it more succinct. I wasn’t in any hurry and was more concerned with getting it right versus up and online tomorrow. Once I had all of the content fine-tuned it was time to start the design process.

Not so Fast

Loving and designing on a grid was the easy part. I also wanted my new site to be more of a blogazine. Basically, taking a page from the print world where each article or page has a slightly different layout. You would never buy a magazine where each article looked exactly the same format wise so why should my site be any different.

In an attempt to get away from a templated looking site I really wanted each of my main pages to have a different look. Even though I am a designer first, I still feel that content is why visitors are coming to my site and it’s what deserves to have the center stage.

Content informs design; design without content is decoration. Content has the same relationship to design that product has to advertising.
- Jeffrey Zeldman

Design: Take One

Like some long term projects, the longer you stare at it the less you appreciate it. I started down this design path early on and for the most part was pretty happy with it, but there were a few things that bothered me that kept me from loving it.

It was based on a grid, but it didn’t feel like elements were lining up as well as they could. Since I was so grid happy I wanted there to be consistent lines everywhere. I put up a comp of the design to get some feedback and overall it was liked, but I wasn't convinced it was the best way to go.

Design: Take Two, Three and Four

After massaging the previous comp for quite a few hours I decided to start over. Sometimes the easiest way to solve a problem is to take a step back and approach it again. I started with a new color scheme, layout, and mentality as to how the content was served up.

Once again, trying to keep things as simple and clean as possible I minimized the content in the footer and rewrote the navigation items. I was obsessed with making sure the header and footers were on a grid and before arriving at my final decision I probably redesigned those sections about seven or eight times. I would design it, look at it and think about it for a few days, and then design another version.

Now that the Foundation has been Laid

Once the structure of the site was completed I was ready to start the design process for the interior pages. About, services, design, development, SEO, consulting, portfolio and contact all have different layouts wrapped within the same theme of the site. This was really important to me so that users didn't get an insomnia feeling of clicking around a site while nothing much was really changing.

Having battled so many projects in the past where content was an afterthought, it was very refreshing and exciting to design a page around the content instead of trying to force the content into the design.

Nothing is sadder than a beautiful design that works great with lorem ipsum but doesn't actually support the real content.
- Jeffrey Zeldman

Similar to the content, I designed and redesigned each sub page multiple times trying to make sure that even though every page was custom, they still fell in line with the grid of the header and footer. It was very obvious when I got this process right and when I got it wrong. The layouts that weren’t perfect still looked good, but staring at them left me feeling that something was just a bit off. When all the elements were in line I didn’t have any question that I had found a good layout for that page.

Out with the Old

When it came time to redesign a site I used to design a home page, a sub page, maybe another template or two to catch all the other content possibilities and then dump all the content into its place. This obviously led to a very typical site.

I was determined to make this redesign process different and enjoyed paying the price for over 24 months. I am very happy with the end-result and hopefully it will lead to a richer experience for the user. I can definitely say that the re-written, YOU focused content has certainly helped conversions. I highly recommend subscribing to the High Rankings Newsletter and reading Content Strategy for the Web and Don’t Make Me Think.

Published in: Design

Published in: Random

Hearing over and over again that ExpressionEngine is the designers' CMS, I decided to give it a try. After wrapping my head around the completely different language and tags, it was pretty easy to jump right in.

Getting started with ExpressionEngine

Before I took off on a client or personal site I started off by completing two tutorials over at Train-EE, building a small business site and building a church site. Both were fantastic intros on how EE works, language, tags, and how to think about structuring your site.

Ryan Irelan’s ExpressionEngine screencast series was also an invaluable resource. I certainly don’t mind reading a tutorial, but if I can sit back and watch a video…I’m in. Ryan’s series goes through just about every single step you’ll run across when building out a site as well as getting the CMS ready to hand off to the client, which was what sold me.

Here is a list of the episodes:

• Episode 1: Templatizing the Front Page ($5.00, 33 mins)
• Episode 2: Adding a Comment Form & Embedding Content ($5.00, 35 mins)
• Episode 3: Organizing Content in Categories ($5.00, 30 mins)
• Episode 4: Linking Main Navigation & Building an RSS Feed ($5.00, 25 mins)
• Episode 5: Adding Static Pages Using the Pages Module ($5.00, 38 mins)
• Episode 6: Building a Stand-Alone Entry Form (SAEF) ($5.00, 31 mins)
• Episode 7: Publishing a Podcast ($5.00, 24 mins)
• Episode 8: Adding Membership to a Site ($5.00, 26 mins)
• Episode 9: Creating Relationships Between Entries ($5.00, 26 mins)
• Episode 10: Adding Search Functionality ($5.00, 30 mins)
• Episode 11: Optimizing a Site with Caching ($5.00, 28 mins)
• Episode 12: Preparing a Site for Clients ($8.00, 53 mins)

What about all my old content?

Switching from one CMS to another can sometimes be a painless process. Switching to ExpressionEngine didn’t appear to be that way, at least from what I read. A post from rousette.org, Transferring from WordPress to ExpressionEngine gave me a lot of good insight. The MTImport format seemed to be the best way to get my WP content into EE.

You’ll want to build out your new EE site with all your custom fields before you import your content in, but once all that is ready it’s a piece of cake. Once your templates are ready, login to the EE control panel and go to Admin > Utilities > Import Utilities and click on Movable Type Import Utility. Chose which fields you want your content to be pulled into and you’re all set.

Although I was concerned about the comments because nothing was mentioned on the import page about how they were treated, they were all imported into the site seamlessly.

One problem that I did run into had to do with the links that were in my existing content. Since the exported content in the MT Import format was just text, it stripped out all of my links. The site that I was importing only had 40 posts so it wasn’t a huge deal to go back through and update the content. Obviously if you had a lot of posts this would be a problem.

I am still researching how to get around the link issue. If anyone has any ideas, please post them in the comments below.

Published in: Expression Engine

In theory the plugin is fantastic. The people who comment the most on your posts get a link on the sidebar, or where ever you place the PHP. The link is not rel="nofollow" ed, so it’s more beneficial (for rankings) than the regular comment links that do have the nofollow attribute on them.

Ideally people would use their real name so that you could actually start to form a relationship and community on your blog. Sadly that never happened. It’s almost impossible to establish a relationship with your keyword.

So at the end of the day, I decided to remove the plugin because I felt it was bringing down the quality of commentors and links.

Sorry to all the good commentors that had to get penalized for A LOT of bad apples.

Published in: Technology

Check out his post to learn all about using @font-face.

Published in: CSS

Content strategy is such a huge part of any website and sadly it seems like it is often overlooked. Listening/watching to the live feed from A Event Apart Chicago conference going on this past week, much of the topics I caught were on content strategy.

Here’s a snippet from Kristina Halvorson’s Content First

Results from good content strategy: better user experience, greater brand consistency, new operational efficiencies, better risk management, improved SEO, more personalization and targeting.

Here's a summary of some of presentations at An Event Apart Chicago.

More posts on content strategy from around the web:

• Content Strategy: planning a site pt.2
• Doing a Content Inventory (Or, A Mind-Numbingly Detailed Odyssey Through Your Web Site)
• Content Analysis Heuristics
• Brain Traffic Blog

Typography

I enjoy reading about typography for the web. When I started designing websites it was all about Photoshop and how many bevels and glows I could put on everything. As the years have gone by, I’ve started to care more about search engine optimization which has in turn led my interests more towards content. With a greater appreciation for content strategy (see above) and formatting my evolution has guided me back to typography. It’s easy to throw some type on the page, but to make one font for the entire site look sexy is quite a different story.

Information Architects gave me an incredible amount of inspiration this week, everything from their design point of view to their method of business. The post that really caught my eye was Web Design is 95% Typography (not the real title, but you’ll have to read it to find out) as well as the follow up post, Reactions to 95% Typography.

If you don’t want to take the time to see how this font looks next to that font let TypeTester do it for you. Typetester is a great tool that allows you to look at a lot of different font variations on the fly and whenever I feel lazy with CSS I instantly visit that site.

Seen any other good links on content strategy or typography? Post them in the comments below.

Published in: Development

Above is a little Sunday jam session with John King on guitar and yours truly on the drums.

Published in: Family

Snook.ca wrote up an exciting post on Text Rotation with CSS and explained exactly how you accomplish this task and make it work across multiple browsers (Safari, Firefox and even Internet Explorer).

Published in: CSS