Summer Refresh

http://herbal-jazz.net/blog/wp-content/uploads/2012/06/210612.png

Well, I did it, I’ve done it, look at me go: I’ve updated Herbal Jazz’s layout for the first time substantially in a year. It’s a big change and I quite like it – and I hope you all do too!

There are a few big things that this redesign brings. Most things are pretty obvious, but I’m still excited about them so I’d like to take a moment to tell you about them. :) However, there are also a lot of bugs crawling around, so I’ll list those afterwards. I’ve spent too long on this design, and I think Stu Robson summed it up quite nicely in a tweet the other day – better to put the site live and have people tell me about the bugs so I’m forced to fix them now rather than putting them off forever! So, first things first, the lovely things.

Lovely things

  1. Responsive design
    That’s right! Hoorah! HJ has a responsive layout. Resize your browser! I dare you. It’s been a long time in the making, and I’m pleased to finally have had the chance to put my play-tests to the real test. I’ve had ideas for making the layout responsive ever since I went to a CSS conference in London last year, but I was always too worried about doing anything with them. This time I took the plunge! I don’t think it’s been done particularly well (don’t go snooping at my code please don’t), but for a first try, I’m quite pleased with it.
  2. A portfolio
    *gasp!* A portfolio! At last! Where there’s been a link to a portfolio for years, there is now actually a portfolio for you to peruse. It’s mostly full of old illustrations at the moment, and some university work, but I intend to add some of the things that I’ve done on my placement this year and hopefully that’ll make it look a little better. Oh … and it’s going to have links to full sites, too, so you’ll be able to nosey around – I just need to find the files for some of them before I upload them.
  3. Nicer typefaces
    Okay this isn’t really a big thing but I’m far happier with the typefaces on here now. Again, still not perfect (still learning…), but I think Adelle and Chaparral Pro are a good choice for the overall look and feel of the site. I hope you think so too. :)
  4. HTML5
    And something else I’ve finally taken the plunge with … some basic HTML5 bits and pieces. Just really basic stuff for now, but I’ve used them and I’ve started and that’s the important thing, so I’m happy. The first step is always the hardest, and all that. Hopefully now I’ll be less afraid of using it in the future!

Known bugs

I think it’s important to note that I don’t know about all of the bugs on the site: if you spot something that isn’t listed here, please feel free to add a comment or drop me a line to let me know.

  1. Show/hide menu
    At smaller sizes on desktop (i.e. when you resize your browser window), the show/hide menu button disappears entirely after you hide it again. Silly thing.
  2. No margin on resize
    Something I thought I’d fixed but apparently haven’t – there’s no body margin when you resize the window/view the site on a mobile device.
  3. Colours don’t *quite* match up
    A few things in the footer – such as the links “elsewhere” – aren’t using the same shade of green as the header. I know, that needs sorting out. It’s because of a last-minute change of mind as far as colour scheme goes.
  4. Post image headers overlay strangely at smaller sizes
    Yeah need to add a catch for that.
  5. Category archives don’t work
    I’m still learning the WordPress stuff. If this were Drupal, I’d be fine, but I’m struggling (strangely) with the WordPress codex. I’ll get to that in the end, though, and any tips that anyone has would be great.
  6. Portfolio isn’t quite right
    It stops paging after 6 pages, could do with an extra row of content on larger screens, the images aren’t totally right, and I can’t arrange by category … but again: only just learning WordPress properly, not to mention I’ve never used the Types plugin before this month. It’s all very, very new to me!
  7. Meta information doesn’t quite line up
    Yeah I know about this, I thought I had it fixed but apparently I didn’t. That’ll be sorted soon, hopefully.

Anyway … I think that’s it … like I say, any and all feedback is appreciated, whether it’s congratulations or you’re reporting another bug that you’ve found. (And yes, that is some HJ code in the post picture. And yes, that is a note to self that I left in the code.)

I hope you enjoy the new layout as much as I do!

by Sophie
on 21st June, 2012 20:09

filed under The Girl, Web Design

 
 
  • http://twitter.com/jegtnes Alex Jegtnes

    I’ve actually had a chance to look at the site properly now! I like it -
    the design is beautifully uncluttered and it’s super easy on the eyes
    while maintaining your branding. One criticism, though, it takes
    absolutely ages to render on my phone (the front page is 4.5MB!) – could very well do with some optimisation (YSlow is great, and look at kraken.io for image compression – it’s amazing). I’m sure you’re on the case, though. :) Well done on launching!

    • http://herbal-jazz.net/ Sophie Shanahan-Kluth

      Thanks, Alex!

      I guess my problem is that I was testing it on my mobile with a pretty good wifi connection. I’ve got an image compressor in place, but unfortunately Richard doesn’t use the WordPress image uploader … he was uploading 2000px-wide images to Photobucket then linking them over here *sigh*

      I’ll need to reupload those, I think, and I’ve told him he’s not allowed to do that anymore :p

      • http://twitter.com/jegtnes Alex Jegtnes

        Haha, naughty Richard! The images could be optimised further, though, you could convert the header of this post to JPEG (it’s a photo, after all) and size that down to 923×219 – the size it’s displayed on in the post, and save 235kb. But that’s just me being anal about performance – doesn’t really matter all that much as long as you avoid the 2000px-wide ones!

        Your phone is better than mine, too, mine’s an aging HTC Desire. Oh, how I’d love to justify an upgrade. :)

        • http://herbal-jazz.net/ Sophie Shanahan-Kluth

          AHh, that’s true (about the header). I think that comes from years of saving everything as a .png. The size of it also varies depending on the screen res, but it can definitely be sized down a bit.

          My phone isn’t *that* much better – I’m on an ageing HTC Desire S :P