kristarella.com

Happiness Engineer at Automattic, lover of knitting, crochet, sci-fi and more

You are here: Home / Blogging / A new look for kristarella.com

A new look for kristarella.com

by

kristarella.com is getting a new look! I imagine some of you will be sad to see the old one go, judging from the compliments it’s received in the past year and a half (which I genuinely appreciate), but there are good reasons!

Reasons for redesigning

It’s not just that I was tired of the old one (although I was a bit), but I want to make information more accessible. When I made the old layout I really wanted to cut it down and minimalise it as much as possible. I wanted to present visitors with as few options as possible in an effort to make the site as easy to use as possible. I think it worked at the time; the most recent content took precedence over some of the extraneous bits down the bottom (Twitter, affiliate links etc).

Now I am bringing some of those things — that I once considered unnecessary — back in (or up). Many of my old posts are still very popular, but some folks are not finding them as easily as I’d like. So, I’ve got some of my favourite posts and the most popular (most commented on) posts in the sidebar.

I’ve tried to include more in the main navigation so that visitors can readily see some of what’s available on this site. And naturally, photography has poll position in the multimedia box.

Nifty changes

Other bits and pieces include a reformatted post archive page, reformatted portfolio and also a list of contents accompanied by quick links for posts that have sub-headings with IDs. By using IDs in the post sub-headings it allows you to link directly to that section using a URL like https://kristarella.com/post-name/#section-ID. So now you have quick access to sections and can quickly copy and share the URL to that section.

I’ve also using caching a lot more than I was before as well as compressing/minimising images, CSS and Javascript. So, I hope things will run faster and smoother.

Some experiments

A few things are a bit experimental as well. The most notable is the use of @font-face to include the font Raleway as the main site title font. It’s working on all the Macs I try, and also in Safari on Windows, but I’m not sure about any other browsers yet. Perhaps you can let me know if it works for you & how the fallback looks if it doesn’t.

Old & New Designs

I’ve had several requests to release the previous design as a skin and it’s extremely likely that I will do so soon. I need to update it to Thesis 1.7, make it suitable for general use, and possibly decide on a price.

Both designs are built on the Thesis theme for WordPress.

If there are features you wish were here, or things you think would make this site easier to use, please let me know. Also, if you find any pages that look dodgy (e.g., videos that are too wide for the new content width), please let me know via my contact form. Thanks!

Reader Interactions

Comments

  1. Looks really nice Kristarella!

    Liked the old design but must agree the new one is better organized and easier to get around to various places and posts.

    IE8 and Firefox on Windows don’t seem to pick up the font-face fonts, but the fall-back looks good. You might want to try putting quotes around the file location? From trying to get font-face working with IE on Windows I know it’s super finicky but is possible.

    Also take a look at bulletproof font-face and I think the font-face generator at fontsquirrel.com uses those “rules”. But again it looks good with the fallback so I wouldn’t worry too much about it.

  2. I love the new layout — very user-friendly. Unfortunately, the dark letters in your header are simply not visible against the blue background. There needs to be more contrast.

  4. Outstanding! Very nice work, well done.

    Tag line in the header there might need a little color tweak to help it stand out more, but overall I love it.

  7. I Really Like this layout!

    It’s simple, easy to navigate and professional.

    As always, you’re a great example!

  9. Love it, love it, love it!

    I just switched to Thesis myself. Your customization is a real inspiration. Nice work!

  10. Brilliant! Really great design. Very clean and cutting edge. Any chance you’ll be building a Thesis skin based on the new design?

  11. I love the layout. You have a great eye for detail. I love the @font-face css functionality – I know of it and how it works but haven’t tried it yet, mainly because I just get by with the old fonts. But you’ve inspired me, I’m gonna try this soon.

  12. Kriso, very nice design and code. Am now patiently standing in line for a kristarella.com 1.7 skin 🙂 /r Scotty (A x3, Oi x3)

  14. I fully agree with Adam’s comment about bulletproof font-face and fontsquirrel – that’ll help get you code such as:

    @font-face {
    font-family: 'twitteruRegular';
    src: url('fonts/twitteru.eot');
    src: local('twitteru Regular'), local('twitteru'), url('fonts/twitteru.woff') format('woff'), url('fonts/twitteru.ttf') format('truetype'), url('fonts/twitteru.svg#twitteru') format('svg');
    }

    …which not only supports the woff and SVG formats (and in the right order), but uses the local() trick to make it play nicely with IE as well. Code in use at bsktweetup.info

    Otherwise, looking very nice. Is there a reason for visually linking to the XML sitemap, instead of sitemap for humans?

  15. Thank you all for your comments! I definitely look into those @font-face and contrast issues.

    Gary — Many moons ago I had both an XHTML and an XML sitemap. The main difference was that the XHTML one looked like a page of the site and had things broken up into sections (posts, pages, categories etc). Then I had only an XML sitemap, but it was not linked anywhere, just there for robots. Now, I figured it’s sitting there, it doesn’t look too awful (at least in my browser) and if someone really wants to Ctrl+F something in there they can, but most of the good navigation is up the top in the form of a Google search bar, an archive page listing the different types of archive pages and a post archives page with all the posts on the blog.
    So really the only reason it’s linked is that it was there and if someone finds it useful, good. I cared more for making a post archive page than a full sitemap.

  16. I’d forgotten that plugin comes with a .xsl stylesheet, so yes, it’s not looking too bad, but it’s still not a part of the site. On the other hand, you could have one that was integrated and highly customisable, with only three lines of code, and re-use some or all of it wherever shortcodes are supported 😉

    Performance wise I think there’s room to cut down a few HTTP requests without too much effort, but it’s not like the site is slow anyway. Lovely.

  20. I loved the old design. It looked real artsy and carefree. However, the new one is nice. A more mature look look to the site. And a little more user friendly. Great job, Kristarella.

  23. I’m sorry. but i don’t like new skin of thesis theme for kristarella.com. I feel don’t nice as old theme.

  25. Lehientinh & Dattai — I mildly appreciate your honesty, I would appreciate it much more if you could accompany it with something constructive. I can’t please everyone, and maybe this current design doesn’t appeal to everyone aesthetically. However, it’d be great to know if it just doesn’t appeal to your personality or if there is a good reason for not liking it (e.g., hard to read, custom font not working on your computer, etc).

  28. One Of The Best Designs I Have Ever Seen.
    But Why You Haven’t Thread Comment Enabled on This Blog Kris?
    Read My Mail. I Discovered Some Of The Problem of Enabling The WordPress Thread Comments.

  29. Saif — I have responded to your email.

    I don’t use threaded comments because I find that visitors use them inconsistently, sometimes using “reply” and sometimes just making a new comment. It would bug me to have things inconsistent in that way, so I just have the one comment method.

  30. @KrisTarella
    OK… Its Fine… Now Would You Please Tell Me How You Linked My Comment?(The Underlined Saif) R U Using Any Plugin? Or Any Fixes In Custom_Functions?

  31. Saif — I just type the HTML into the comment box. I copy the link address for the comment from the linked number at the top right of the comment and then I type <a class="comment_link" href="http://www."kristarella.com/2010/05/a-new-look-for-kristarella-com/#comment-68941">Saif</a> --- before the comment.

  32. Hey Kristarella,

    Must confess, haven’t been here in a bit, but now that I am I’m very impressed! Although I am certainly one of those who liked your old design, I understand the need for change every once in a while (especially when you have other great reasons like usability).

    Love the new look!

    ~Graham

  33. This is a really good design overall hands down!!
    Are you gonna publish a tutorial version of this? I would love to learn how you customized your header, sidebar navigation and comments area. The only thing I did not like is the submit button…I just hate sharp edges buttons..lol!
    The clean and neatness look is really awesome!