David Emery Online
- About /
- Work /
- Photography /
- Links /
- Contact
Photos
My latest Pictures..., 15 Photos
@DavidEmery
Post
Regular readers will know that I have a – how shall I put it? – tendency to redesign this site at the drop of a hat. So much so that the assorted different versions got featured in a presentation at SXSW last year.
So, with that in mind welcome to version 9 of de-online.co.uk!
It’s actually been over a year since the last version was launched, and although I did tweak that a little as the year progressed that’s the largest amount of time between different version since I launched this little corner of the internet. This version, it has to be said, is not a huge departure from the previous one and carries a few of the themes developed there forward; the large photo headers, the colour red for links and highlights and a similar main typeface choice.
Last time round that typeface was Trade Gothic, with Helvetica used for body text, but that involved using Sifr (flash-based text replacement) which I was never happy with. This time round of embraced the wonders of @fontface and used two freely available fonts in the form of League Gothic for headings, and Steinem for body text, both of which I think look lovely; it’s nice to be able to get away from the standard font choices for once!
Let’s see – what else is new?
I guess the main layout change is the introduction of the sidebar. I’d been thinking for a while that it was probably harder then it should be to see the most recent blog posts and that bringing in photos and twitter updates would be nice as well; that’s pretty much what sidebars are for, right? I’ve also added in a ‘Music’ section – ideally this would be automatically powered by Last.fm but I couldn’t be bothered to actually make that work (a project for another day) so for now it’s a manually updated list of what I’m listening to at the moment.
The whole thing is packed full of CSS3 type goodies, although not as many -webkit-transition’s as I’d like as Webkit these days seems to have all sorts of rendering glitches when using them (dear Webkit team – please fix this!). I’ve also managed to remove a bunch of javascript that used to be used to scale the top header image – now most of that is done using the new background-size property which scales backgrounds to fit.
I’ve no idea what it looks like in any flavour of IE – probably a bit rubbish to be honest, and I’ll fix it at some point I guess.
Anyway; I hope you like it – it probably could be better, but it’ll do for now…
Comments
I’m enjoying the new look, David!
Beautiful. The implementation of the sidebar photos is very slick, clever selector use though it does feel a bit cludgey to have a dozen ‘a + a’s. Had a flash of unstyled text on first load, but other than that great.
Strong look DE !
Really like the latest redesign – there’s some really nice free fonts out there these days, and I hadn’t come across Steinem before I don’t think.
The redesign seems to have fixed a bug I was having where it wouldn’t load in firefox unless it was loaded from the location bar explicitly (i.e. not from links).
Tried the new site in FF3.6, chrome and IE. IE is predictably a disaster; FF looks ok but gets nasty edges on the titles (and obviously doesn’t fade them either); Chrome does the titles beautifully but then has nasty aliasing on the rotated pictures, whereas in FF they are smoothly antialiased.
Seems your site is always a little bit ahead of the curve, since none of the browsers I use can keep up :)
Looks good to me David (using Safari on OS X). Love some of the subtleties in this design.
How long might this one last? ;-)
@everyone – thanks for the kind words folks!
@davidsingleton – couldn’t think of a better way of doing it then lots of a +a’s; did briefly consider js-ing it but think slightly verbose CSS was probably better!
@graham – use Safari ;-)
Good grief. Absolutely lovely, again, David. The textures are fabulous, the banner photographs look great. The whole thing has a feel of being more refined than before. It’s great work.
One nitpick though, and I must credit my friend Leslie with spotting this. Whilst the post pages are stunning, what with the large photography, and you reuse the same header style with close-up pictures of yourself on the About and Contact pages, the “Photography” page is then quite underwhelming. Where every other page grabs you with a large image, that page doesn’t have it, and the embedded Flickr widget in those dimensions doesn’t do your photographs justice at all.
What I’d love to see you do is scrap the stock Flickr widget. Instead implement the same big, scaled header style as in the other pages, adding Next/Previous navigation to it, so that it functions as the slideshow too. You would be limited you to landscape photographs or prepared crops, but for the better, I think.
Also: There seems to be a glitch with the quote speech bubble gradients in Safari 4—where the transition from the rectangle to the arrow isn’t smooth—whereas in Firefox it’s fine (presumably without a gradient)
Wonderful work.
Ben
@benward thanks!
Regarding the photos page – yes, I know, and that’s exactly what I’m planning. Whether I get to it or not is a different question, but I’ve already got the previous/next buttons done…
The speech bubbles are supposed to look like that (ish – they weren’t originally but I like the way they’ve turned out).