davidairey.com gets a new look
Ever since I started publishing articles on this blog, I knew I had to launch my own WordPress theme, rather than using a modified version of someone elses. There will no doubt be some bugs and tweaks in the coming weeks, especially as this is my first ever custom WordPress theme design.
Brian Gardner’s Vertigo theme served me well for the past half a year, and that’s testament to the expert WordPress designer that Brian is. A big thanks to you, Brian.
I was happy with the general feel of the modified Vertigo theme I used, so the changes here aren’t too radical. If you’re reading this in a feed reader I’d really appreciate you visiting davidairey.com and letting me know your thoughts.
Simplicity is the goal I’m shooting for, and I want to keep the ‘airey’ cloud banner for now. I’m already noticing a few things I want to change – aspects that will help legibility and usability. One thing I had quickly tried to implement was a horizontal page navigation just below the top banner image. Something similar to Derek Punsalan’s Grid Focus idea, also seen on John’s graphic design and typography blog. What do you think?
I also want to change the headings / typefaces and the comments section. It’s kind of like a work in progress, with the main chunks completed.
Bear with me while I get to grips with the new code I’ve generated, and please do let me know if you have any suggestions.
Related posts on David Airey dot com
48 appreciated comments on “davidairey.com gets a new look”
What are your thoughts?
All comments are moderated so you may experience a short delay before yours appears. Comments should be respectful of other voices in the discussion, and I reserve the right to edit or delete comments at my discretion.
Please use your real name. Keywords will be removed.
Nice new design – very clean.
I also think you did something very important (I assume you did it on purpose :)) You put your “Hire Me” stuff in the sweet spot.
The first thing I noticed after your header, was your picture, then the Hire/Portfolio links. Since this blog is a way to promote your expertise and get work, that works very well.
Hi Tony,
Thanks for your thoughts. You’re absolutly right about my placing of the ‘hire me’ info. It’s my intension that people see my logo first, then my photo, then ‘GRAPHIC DESIGN’ and ‘Hire me’ (in that order), so great to read that’s how you saw it.
Congrats on the new design! Simplicity is definitely the way to go. I like the idea of bringing back the left-side navigation, I think a lot of blog designs neglect the idea that a blog sidebar is really a navigation, and humans inately look for navigations on the left (or along the top, as you mentioned).
I love the horizontal navigation you linked to from 5thirtyone/redsil, I was in the process of working on something similar myself already (they’ve soooo stolen my thunder). However, I’m not sure that that style of navigation would match the ‘look and feel’ your new design presents. Maybe it’s just a colour thing though.
Looking forward to seeing the design evolve more over time…
It looks great and has a fantastic synergy to your previous look ‘n feel or “brand”.
Still lovin’ your work!
A.
Simplicity is great ^^
And I especially like images you put on header and footer :)
Great design!
I personally love the Grid Focus menu, so I would give that a shot if I were you. Even if you don’t go that route, I think you do need to emphasize your menu and differentiate it from the other sidebar links.
Verne,
Thanks for the congrats! Took me a fair bit of learning but it was definitely worth it, and I’ll be more comfortable designing some for public release (on my to-do list).
I wanted to add a left navigation to my site because, like you say, we instinctively look to the left or top for guidance. I agree that the actual colours of the top navs I linked to wouldn’t suit my design, but it’s the layout I like.
Adrian,
Again, thanks!
Ahmed,
I thought I’d give the site a proper ‘grounding’ by adding the grass beneath the sky. Glad you noticed.
JD,
I agree that the menu could do with some differentiation. Thanks for backing up my own idea for it.
David, I really like the changes! As others have noted, it’s simple, straightforward and the navigation is clear. I also like that I didn’t get hung up on the top of your page…in the old version there was a lot of info in and above the header and my eyes got pulled there. Now, your header actually encourages my eyes to sweep down a bit and see what’s in your navbars. It’s lovely!
Looks great!! Simple with a focus on the content – as it should be.
Hi David,
I did like the old style, but the new one works even better. It is very clean and uncluttered.
Regards,
Ian
Wonderful Design nice and clear
Tammy,
One thing about my old design that I didn’t like was how the page links were above the header image, competing for attention over the content. I’m glad you saw that too. Thanks!
Jason, Ian, Toon (Andi?),
I’m stoked that you all see the change as a clean, uncluttered one. That’s exactly what I’ve gone for, and am hoping there’s even more focus on the content and ease of navigation here.
David, looks good buddy! :) I really liked the design you had before, but it looks much “cleaner” now.
Maybe just one suggestion would be to change your “visited links” color or underline, cause the visited links in your posts are the same color as the text, just a thought :)
Great job David!
I like the redesign David. I’m really digging the green grass footer image for some reason. :)
As for a quick suggestion, I really love Lucida Grande font. If you haven’t check it out, you might like it as well (it’s what my blog uses).
I like the new site design, and am I the only one to get the grass at the bottom as ‘earth’ and the clouds, etc, as airy? :) Probably not, but I like the subtlety.
I like it! Looks great and clean.
I really like your design stuff. Very talented!
I agree the new design is clean and simple, nicely organized, but I’ll hold off from too many comments until you’re done with the changes. I do miss the old footer with all its extra interesting bits though.
Overall, great job with your own theme!
The new design looks great. Simple and professional. Great vibe too.
I like the clean look (weird that so many blogs are littered with icons and stuff, when most people seem to like the simple ones).
I too miss the footer with MBL and various photos ;)
Jon,
Thanks for the tip mate. I’ve changed the a:visited colour so it’s the same as a:link.
Deron,
I like your font usage so will give it a shot. I also really like how you display your recent MyBlogLog visitors in the footer. It’s much better than the standard look in my opinion.
Carol, Terence, Baron,
Thanks very much for your feedback. I value your thoughts so glad you took the time to comment.
Vivien, Dennis,
I’d been questionning the purpose of my old footer, and wondered just how useful it was in achieving my goals. In the end I thought I could go without, but as I create my content for you then I’ll rethink the exclusion. Thanks!
Very nice, very readable.
I much prefer the 3 column look, and this is very easy on the eyes. Are you planning on releasing any themes in the future?
I really like the new looks. The text is a whole lot easier to read…….good work!
David: Thanks, I appreciate the compliment. :)
Feel more than free to use my MyBlogLog code to style your own. I know how much of a pain that thing is to style! No need to reinvent the wheel.
Chris,
Glad you like it buddy. I hope to release one or two custom themes for public use in the next month or two, time-permitting. How about you?
John,
I purposely made the body text larger than in the old design, to improve on screen reading. Tiny text is a pet peeve of mine.
Deron,
You’re more than welcome, and thanks for the offer. Very kind sir.
Nice job David. I like how the overall look wasn’t a big departure from the original design. I think that makes for a smoother transition and doesn’t “shake up” the readers.
I also like how you have added a “subscribe RSS” option here in the footer. Very sensible place to add that. I’ll have to make a note of that for my future design overall.
One suggestion, perhaps there is a way to replace the footer with a portfolio preview. You sort of have a captive audience when someone leaves a comment. Might want to try an capitalize on that with more stuff from your portfolio.
Otherwise, nice redesign.
Thanks Bret,
I was quite happy with the old look, but knew I needed my own custom design.
Good suggestion about the portfolio preview. I know I can make more of the footer but am conscious not to clutter it. Cheers for dropping by.
Liking the new look, but as you mentioned the first thing that stood out for me was the navigation bar at the top was missing. It not only gives users a secondary navigation means, but everyone thinks differently. Some people will look for the menu that runs along the top, while others will miss it and go for the left/right hand menus.
I bet 99% of your readers are pretty much web/technology minded people so understand what your website is about. Although you must always remember about potential new customers that come to your site and are little less web/blog experience. So maybe the secondary menu is more oriented around them?
I’m sure you’ve already planned alot the features I’ve mention. Hope my feedback helps.
Jamie
Eyup David. Looks great!
Any reason why you chose a fixed width over liquid layout? For me, it just makes things easier to control.
Don’t know if you want to check this out as well (I’ve never gotten around to it on my current layout), but it doesn’t quite validate yet for the DOCTYPE you’ve used. Check out this link…
Did you check it out in other browsers? I normally try it out in FF 1.5 and 2, Opera 9, and IE6. I haven’t got IE7 yet. In IE6 there’s some extra padding showing up below each list item on the sidebars – you don’t get it on FF. IE’s a bitch for stuff like that. It looks much better in FF.
I also spotted you’ve got unequal margins in the CSS (.sidebar1, .sidebar2, .container) left to right on the sidebars and container. Might cause a problem in some browsers – dunno.
It’s a real fiddle sometimes!
I like where you’ve placed things, and all the whitespace, btw!
Cheers
Jamie,
Thanks for the feedback. You’re right that people associate with horizontal navbars too, which is why one is in the pipeline. I figure that after looking for a horizontal nav the next place to look is top left, which is where I’ve placed the info I want first time visitors to see (photo, graphic design, hire me etc.).
Mark,
I was one of the foolish people to download IE7 to test websites, not realising I couldn’t back-track to IE6.
If you, or anyone else, can help me fix the padding issue you see in IE6 I’d be extremely grateful. It took a bit of tweaking to get IE7 looking similar to Firefox and Opera, and I wasn’t aware IE6 would throw it out again.
Thanks for running it through the validator. There’s an issue with my sidebar lists that cause most of the error, although I haven’t yet sussed it out.
Dawud,
Good of you to take some time out over here, and I’m glad you appreciate the cleanliness. It’s all about the readability for me and I’m looking forward to your upcoming theme launch.
Thanks Shonnie!
I think you’re spot on with your tagline suggestion. Something that lets you know what the website is about without having to look through the sidebars. Thanks also for your thoughts on the top horizontal navigation, which should follow within the next while.
Mark,
Oh well. Fingers crossed Microsoft will pull IE from existence and give their business to Opera / Firefox.
Hey David. Love the theme. Very clean…very easy to follow.
I’ve actually been working on a three-column theme myself that has similar organization. Hope to launch it (finally) in the next couple of weeks.
Morning David,
Congratulations on your first custom created theme!! Awesome job! I like the clean 3 column look with the main content in the center. Still plenty of white space which is nice though part of me wonders if a lightly shaded background for the sidebars would draw your reader’s eyes to your content even more. I think it might be helpful to have a tagline or description somewhere to tell folks about your blog or business. I know you have the “graphic design” info visually prominent, yet I believe you could be more overt about what you do. Finally, I agree with some others’ comments about the benefit of top navigation. If you can do it elegantly, I think adding it would be a plus.
Keep up the great work! It’s fun to be inspired by what you’re doing. :-)
Hi David,
For IE6, I’ve found that no matter how much you try to figure out why it’s doing what it’s doing, you’ll end up banging your head against a brick wall! Some people that know more than me seem to use conditional style sheets, and then there’s this whole “quirks mode” thing that I’ve never quite looked into. It’s a bloody nightmare!!
Hi David,
You asked for my 2 pence worth so here goes
Like everyone else I think it looks very good overall, but I have a few suggestions
Looks nice and clean, not that disimilar to how it was before, but for me I think you should have kept your pages in the top nav panel too (horizontally) its just another way that someone can find the stuff you really want them to find – contact portfolio etc. The different width side bars jar with me a little too, but I can see why you need to do it
Blog wise I like a “recent posts” heading, I came to your site via firebug headings (feeds) and first went to your most recent post and the only way I could get to this one was by going back to the home page.
Hope you don’t mind the input.
Tara,
Your input is more than welcome, so no, I don’t mind at all. The top navigation is something I’m definitely going to add. It’ll just take a little more learning before you see it in action.
I might actually prefer the two sidebars to be the same width, but the left one felt a little empty when wider, and the right sidebar can now accommodate every ‘popular articles’ link on one line, which is a plus. I know where you’re coming from though.
Recent articles, yep, I might bring that back. Cheers Tara.
Lauren,
There was never a blogroll on the previous version (at least not for quite a few months). I’d thought about adding a specific page for related sites, and that’s something I’ll do soon.
I’m curious how the visited links are looking for you. I know they were previously all black (which I didn’t want) though I thought I’d fixed that. Perhaps not. What colour are the commenters names for you?
Thanks for the feedback!
Ian,
First off, thanks for pointing me in the direction of WPDesigner.com. I read through every step on my way to this design and it was extremely helpful. You’re right, it’s much better having my own name in the footer. ;)
Do you know how to split the ‘before’ and ‘after’ navigation links? Shall I simply enter some ALT code or a line break? I wasn’t sure if a line break would work but I think it’d be the best solution.
As for the technical post, that’d be a fairly big job with my current learning curve! Leave it with me though, and thanks again.
I think I agree with Vivien, I miss the footer! But that’s me, I’m partial to the “extras” in footers that seem to be the trend with websites today.
Is there a reason you took out the blog roll? I like to see them and visit sites that people put in their blog rolls; it’s a way to get to know more people who write in this topic. And I glance at the ones from blogs I read regularly to see if there are new blogs my favorite bloggers think are worthy of promoting.
I would also like to see a recent articles list. It’s just one more way to draw people into reading your blog, especially if they are new (but don’t replace the Most Popular, that’s more important!). Maybe this would be a good item for the footer if you decide to add it?
Overall, as everyone has said, beautiful, clean, great job! I like the clouds above and the grass below! I’m glad you didn’t get rid of the clouds :D And I just love this blue, as I’ve said before.
Hmm, and just noticed the way visited links are looking. I think it’s ok for everything except the comments. Was that on purpose? I like to see the bold blue name of the person commenting; it helps distinguish when new comments start.
Looks good to me! I bet it feels pretty good just having your name there in the footer, doesn’t it? ;)
Oh, your nav links beneath the comments are squished together on this post.
I’m hoping there’s a monster technical post in the works on your redesign. I love that sort of thing.
Thanks very much, Lauren. I’ll work on that.
Yes, the visited links are just black (in the hover state, the link gets underlined). The unvisited links are bold and blue. These are the way all the links are for the commenters and also for the next/previous links at the bottom. The links in the content (your articles and also comments), are not bold but they are blue before being visited, and after, they are black (no underline).
I’m on FF 2 on a PC if that helps you at all.
It’s fixed! Now the visited are not bold, but they are still blue :D
Looking good David, although I will chuck in my tuppance worth if I may:
The way the header and footer images are a set width looks kind of incomplete to me. If you were I, I would investigate ways of making the header and footer images bleed off the side of the screen by perhaps using an ultra wide graphic, or maybe try capping them with some kind of border that stretches the entire height of the page.
Also, I think you mentioned you are experimenting with the heading typefaces, and I would agree they need playing with a bit.
That said, I like it and feel at home already. Good stuff :)
Hi Aaron,
Thanks for your take on the design. I experimented with a background around my content (showing on the left and right of the banner / footer images), but thought it confined the text somewhat. I prefer the more open look I have but you make a good point about how the photos I use just stop.
Still need to find an article heading that fits. Thanks for backing me up on that, and glad you like the overall layout.
Nice one my friend.
One thing only, I’m just not sure if the font used for the headings compliments the site. However, you’re the designer ;)
I gave my own, personal blog a complete overhaul too. A little more drastic than yours.
I like the header and banner footer – blue and airey, green and earthy. Still, I missed your former footer which showed your photo archives, your communities, etc.
I know I’m a little slow on this one, but I do like the new layout. The difference was a little striking – it seems to grab attention faster by aligning the main content in the centre.
The layout feels more natural now; sidebar information is exactly where you expect it to be.
Great work!
Good to have you stop by, Armen. I left a couple of comments on your blog.
Vivienne,
I’m thinking of a way to incorporate a little more info in the layout. Thanks very much for the feedback.
Damien,
Glad you like. I think it was when I saw the new Copyblogger layout that I finally decided to set the sidebars either side of the content. I think it’s easier to navigate for first time visitors and those less familiar with the blog environment.
Hi David, nice to see that you 2 have opted for the “white style” design. I must say that this style is the most professional crisp, simple yet elegant way to approach any Visual Identity. Although me as a brand designer had much trouble accepting the fact that I had three color palette to use for my brand, ( i love to design with lot of colors )but understood that its quiet a clever approach, and now many companies repositioning themselves with this approach. Good way to go. Recommend you to adapt three colors to maintain uniqueness and clarity- like white, blue green, or can be brown, chrome, maroon if you wanna be too colouful :)