The Harry Potter Lexicon Link to Main page of the Harry Potter Lexicon.

The Lexicon Blog

Lexicon redesign coming!

We have been hinting on and off of projects we are working on behind the scenes here at the Lexicon, and we’re ready to tell you of the smaller project: the redesign of the look and organization of the Lexicon!

It is a difficult task that has fostered a lively debate amongst the staff: how do you preserve the friendly funkiness of the Lexicon while improving findability and providing a more consistent look. We’d like to know what you think! Apologies in advance to our vision impaired readers. We’re sorry, but at this stage we’re just publishing JPGs of the redesign. We promise that the new pages will function much better for folks who visit the Lexicon via screen readers and browsers like JAWS.

The first image is what the encyclopedia pages will probably look like:

First of all, note the lovely new banner! The artist is Camilla Engelby. Camilla, your design was just the “kiss” the new look needed!

Second of all, notice the new navigation on the left. In the redesign we are doing away with the main division of Muggle World /Wizarding World and organizing instead by the type of resource and how close it is to canon. Are the category names clear? Think of parts of the Lex you visit often — can you figure out quickly how to get there? Let us know.

The third thing to notice on this image is the content on main part of the page. This is a proposal for a type of page (a “gateway” or “jumping off” place) you would get when you click on the left on “Magic” in the “Encyclopedias” section, listing all the encyclopedias and related pages. Are the explanations for the sections clear or too short?

The fourth change is in the “global navigation” just under the banner. Some of the links — like “Essays” — have been moved to the left hand navigation so the list at the top is now completely of pages that explain the Lexicon (such as a key to our abbreviations).

Here is what an Encyclopedia page will look like:

We hope this is easier to read. There are fewer font sizes and colors on the page.

And here is what a “destination” page would look like:

Again, we hope the page’s structure and navigation are clearer and the text easier to read.

For the geeks in the room, we’ll be using table-free HTML combined with CSS and server-side includes for better site management. At 1,000 pages and counting, the biggest advantage to this new design will be the flexibility we will gain when we can update headers and navigation site-wide in an instant. With the current structure, every time a link on the banner changes (like when the QQQ/Scoop’s was renamed Accio Quote) every single page had to be modified and re-uploaded (yikes!).

We’d especially like to hear from our readers from non-English speaking countries. Are the categories understandable? Are there Americanisms we didn’t notice? We fully appreciate that we have an international readership.

Timetable: we hope to have most of the site changed over before Book 7. We are still working on creating the “gateway pages” and new artwork; once those are finished we will start converting the Lexicon section by section.

CSS and navigation by Lisa Bunker, Clint Hagen and John Kearns
Banner by Camilla Engelby
Navigation images and icons by Lisa Bunker
As for the other project we’re working on? OMG just you wait.

This entry was posted in What's New. Bookmark the permalink.
  • Finn

    Hmm, I’d say the sidebar at the left looks like the biggest improvement: it is usually quite difficult to get into the different core topics of the wizarding world. And I like the new banner, well done!!

    Make sure you archive the old pages though — looking through the past is always fun too.

    What other projects?? You’re killing me with the set report, and now this. Eek!

  • Jabbok

    Most excellent! The artwork is exquisite and I have to say that the overall design is much cleaner. As I am an American, I can’t help you out on “Americanisms”–I found the links quite easy to identify, and especially like the Pensieve button. I think changing over to table-free HTML combined with CSS and server-side includes was a wise idea (wow, 1000+ pages!). Anyway, you have my FULL approval!

  • beauxbatons

    This looks great ! and apparently, it’s also very understandable. I didn’t find any Americanisms — any that French people couldn’t understand. Don’t worry : we don’t learn English directly from Shakespeare and Milton in Europe… :)

  • silos

    I think the new layout looks really good. I like the banner a lot.

    I’m from India and I cant complain about anything at all. The categories are direct and are fun to explore as they lead on to more enjoyable things.

    My only concern is…whether this change would make the site heavy like the Leaky Cauldron?? Many have trouble accessing that here cause it just sends off our pc’s in a phrenzy! I open leaky on their low scaled and less bandwidth page…

    I’m looking forward to the notes on book 5 and 6 too!!

  • Lisa

    Silos, The structure will be very different from Leaky which is a database-driven site written in (I think) PHP and Ruby on Rails. While we’re working on the optimization, I can tell you that even the most image heavy page in this set (the “Magic” page) has a load time of under 30 seconds for a 54K modem. That would be for the first time one visits the site. If your browser caches images from page to page (this is the norm) every other page after the first will load more quickly.

    If anything the CSS should make our pages *more* accessible to different devices like screen readers and mobile phones.

  • silos

    Thanks! You’re all doing great work..Lexicon is always a fun place to hang out!
    Sounds great! Cant Wait!

  • Lisa

    I just did a comparison between the load time of a new page compared with the old one and the old page had a load time of 42 seconds. So the new pages (on the whole) will be *lighter* than the current site. In this case, almost 30% lighter.

  • Mrs. prongs

    wow this is great i sometimes have a hard time finding stuff thanks guys!

  • Alana

    I think that it looks great and very much an upgrade. Will this new version at all affect the text-only version? I like to use the text-only when running on dial-up, and sometimes find that easier to use. Will the text-only even carry on?

  • Lisa

    Good question. Currently the “text only” page is an alternative to our graphics-heavy homepage — it’s links lead to pages with full graphics. I will talk to Clint about the feasibility of extending this as an option.

  • Pat

    Oh wow! I love the new banner! The other things are great too, though I think the font on the new navigation isn’t as great as it could be. Well anyway, great changes, and I’m looking forward to it!

  • Lisa

    Pat, the label text or the link text?

  • http://aol.com ginny321

    The banner is totally awesome!!!
    The redesign should be SO cool.

  • http://aol.com ginny321

    The banner is totally awesome!!!
    The redesign should be SO cool.

  • Jenny

    I always like to reserve judgment on a rework until I can get in there and play with it, but on the surface this one looks like it should be easier to use than the current page (although it will take a little time to get used to anything new). I use the forum and what’s new links a LOT and both are easy to find. I must admit on the discussion of the fonts, I prefer simpler fonts on the “guts” of pages (especially menus and full paragraphs). I have a hard time reading fancy fonts unless they’re in big headlines. Keep it easy to read as you make it easy to use! Thanks for such a great site!!!

  • Reader2

    This looks like a great design, but I am now extremly curious about your cannon/non-cannon devision.
    Does this mean that you will now have a separate (non-cannon) list for each subject (character, creatures, spells etc.)?
    What about the notes revealed by JKR, are they considered cannon?
    How about the Newsletter?

  • magnoliasouth

    I’m going to agree with Finn; the left side is a major improvement. The click through menus were difficult and most of the time I had trouble finding what I was looking for. I’m not criticizing mind you, as your work is just amazing and I’m very thankful for it. I just had trouble navigating is all.

    My best suggestion though is less graphics. I really don’t see a need. We come here for content, not icons, banners, etc. I would say a large number of fans are International readers and I would be willing to bet a great many are still on dial-up. I was on dial-up myself when I began visiting and I can say, I always dreaded the load wait.

    I’m glad you’re switching to CSS and I’ve wondered for awhile why you’ve waited. What a task this must be for you! Congrats on the determination, will and service you provide. You’re work is greatly appreciated.

  • magnoliasouth

    Your work, I mean. Geez! I wonder how many other typos are in there that I didn’t see. :(

  • Lisa

    Reader2, on a site the size of the Lexicon it would be impossible to strictly divide things up. There is a continuum: canon, deductive canon, interpreted canon and commentary. What we hope to do is feature first the sections that are the purest and then segue into the sections (like the essays) where insight plays a greater and greater role. But stay tuned, eh?

  • Melissabeth

    I think the new set up looks amazing! Excellent work. The one thing I’m particularly looking forward to is having the Muggle world and the Wizard world all together, since they are all connected and such.

  • Lisa

    Sorry to double-post. magnoliasouth, I shared your frustration with the navigation. I know I can search, but I prefer to navigate so I know where I “am.”

    We’ve been using CSS but only in a limited way to control fonts, etc. The thought of re-doing a site this large was — and is — daunting. The Lexicon was recently migrated to a new server that made the server-side includes possible, and that was the final tool we needed to move forward.

  • Lisa

    Eep. I meant to post this link. The Lexicon is archived on the “Wayback Machine” and at the U.S. Library of Congress. The link for the Wayback Machine is http://web.archive.org/web/*/http://www.hp-lexicon.org/

  • journeymom

    It looks excellent! It looks logical and intuitive.

  • Bandersnatch

    Most righteous new layout. Rock on, Lexi-dudes!

  • Bandersnatch

    And thank you, Lisa, for asking us readers for feedback before implementing the pages. It is appreciated.

  • will orwont

    I’ve enjoyed the Lexicon for quite a while, so I hope the following comments can help.

    The banner looks lovely, but is it too big? There is a typographic principle which says that ornamentation on any page should be kept to a minimum. On the web we also think about loading times (though less relevant these days), and how far down readers need to scroll to see what they want.

    Also, the labelling of the films as Beyond Canon is correct, if Canon is understood to be everything that JKR writes on Harry Potter. On the other hand, she is involved in the films. JK is on record as having advised on casting and production design and having screenplay approval. There doesn’t seem to be much information available on this. Although JK hasn’t written any dialogue for the films specifically, that we know of, there have certainly been other kinds of contribution, maybe including writing or drawing in some form. That material would be Canon.

  • Bob

    Love the new banner! It’s both elegant and beautiful. Keep up the good work.
    :-)

  • RobC

    Looks really good! That’s a boat load of work updating all of the pages. Is there going to be a “links” link to other sites?

  • Bessie

    NO! You can’t change anything! Everything has to stay the same forever!

    I keed, it looks great. I like the navigation buttons on the left side especially, and the banner on the top gives the site a nice bit of color/style. I can’t wait to see what else you have to surprise us with.

    Keep up the good work

  • Spader Tre

    I really like the new outfit, but I’m going to miss the “second page” (the one after you’ve pressed “enter”). I like it as you like a messageboard – you can see what’s happening. Will that one vanish now? Anyway, when I’m in the lexicon, the new outfit makes it easier to get brief overview. As a Swede, I haven’t seen anything ambiguous! Good work!

  • RaytheforgottenWeasley

    People fear change, but this looks great. I got “turned on” to the Potterverse out their on-line through the lexicon, so changes ar always suspect. However, I like this. I appreciate that smart phones are being consiered as a part ofthe layout. I use a cingular 3125 and often read essays or parts of the Lexicon directly from that as I am out and about. Last night I was looking at a part of Chamber of Secrets on it while in the Leaky Lounge reading commentary at the same time. Keep up the good work. Hopefully, the conondrum of how to keep your website topical and fresh will be solved as delightfully in the future.

  • http://www.leakylounge.com SarahW

    Woot! Way to make a great site even better! I know it is a huge undertaking to come up with a new design and implement it. There is so many desires and needs to be balanced – so kudos to you for putting up with all the frustrations and feedbacks to make this an eventual reality.

  • Kacky Snorgle

    I’m in agreement with magnoliasouth that (a) the proposed designs look great and (b) a significant decrease in graphics would be even greater. I’m not on dialup at this moment, but I’m still stuck with it sometimes, and it’s not exciting when sites use image menus, icons, and so forth to excess. The Lexicon’s certainly not as bad as some other sites in this regard, but still–as long as you’re doing a major redesign anyway, you might look into decreasing the use of graphics that are being used to decorate rather than to illustrate.

    I’m not so much suggesting an extensive text-only version; it’s useful to have images to illustrate what an article’s talking about. But it’d be nice if every image had a purpose, and in particular if the usage of images containing only fancy text could be eliminated totally. Having a quick-loading site is much better than having a cool-looking site…and frankly, for a reference-oriented site like the Lexicon, a stodgy old low-graphics look is kinda cool anyway. ;)

    Thanks again, Lisa et al., for all you do here…. :)

  • Kathee

    Very Professional Looking! Can’t wait for the new look! Thanks for making my “Harry Potter” experience so wonderful!

  • pam

    I’ve been a fan of the Lexicon for at least five years and it is getting better and more useful every year. THanks for all you hard work. Do you have any plans to publish a hard copy of all your lists, essays, etc. when all the books and movies are finished? Something rather like the guide to Narnia that came out some years ago?

  • kzspot

    Looks good!
    *rubs hands evilly*
    Now let us at it!!!!! BWAHAHAHA!!!!!!

  • Pat

    Lisa, I’m not sure what you mean. THe words like ‘Canon Sources
    The books
    JKRowling.com’

    etc.

  • Lisa

    Pat, Canon sources are those that come directly from Jo: the books, her website, interviews where she is directly quoted, and a few other things we know to be her creation. Steve’s explanation is here: http://www.hp-lexicon.org/help/hp-faq.html#canon

    So for the Lexicon, those links will go to our guides to those resources, such as the pages exploring Jo’s website.

  • http://tele2 Lisa Marie

    Hi, my mothertongue isn’t English, and in my opinion it’s of great importance that the Lexicon staff doesn’t Americanise things, since the author is actually British. And therefore I think it’s very important that you use the British editions for extracts or other things. But since you DO use the British books, (considering the post of Lisa about “Snape quotes page now includes Book 6″) everything’s alright! :-)
    And as far as I can see, there is no Americanising whatsoever. Keep it up!

    And BTW, have I ever mentioned that the Lexicon is the best thing you can find on the internet?! I fell in love with it, the moment I discovered it (platonically, of course *g*)!
    Thank you SOOOO much!!!

  • Ginevra Potter

    I love how clean the pages look – not bogged down with flashy graphics. This page is much cleaner than what you have now, while most sites are going in the opposite direction, unfortunately.

    I also love how easy (I can imagine) this new site will be to navigate. By listing the alphabetic links for the encyclopedia pages, you are cutting out half of the clicking, which should really speed things up! I also like how organized and logically grouped everything is.

    It does seem odd to me to have a link to the pensieve from the main page. Is this going to be one enormous thread?

  • http://mypheon.blogspot.com Phoenician

    I’m liking the new look, and I can’t wait to see it up and running!

    My only hope is that the little “Association” stickies stay with the characters, places, plants, etc.

    That was always a fun feature I liked: To read about a character and then click on who/what they are associated with (like being a DA, Order member, Death Eater, Painting, etc).

    I always liked those stikies and I hope they survive the transition!

  • http://www.hp-lexicon.org/wizards/wizards_list.html Lisa

    Phoenician, you will be in heaven, then, when we launch our new project. (Sorry, no ETA but we’re more than halfway there). The stickies (we call them icons) are definitely staying — that’s why they got a facelift recently.

    Ginevra Potter, and everyone, thanks for the feedback. Keep it coming!

  • Jabbok

    One critique, on the first page, I find the category “Miscellaneous Magic” and its tag line a bit confusing, as in, I’m not sure why these things are distinguished, and not instead under other categories…

  • Lara

    Is that “Proud member of the – The Floo Network” on the banner? You’ve got two “the”.

  • redskinmaniac7392

    It looks amazing. Keep on doin’ the fantastic work… Lexicon is beast!

  • turbot

    when can i see the new web page?

  • http://www.hp-lexicon.org/wizards/wizards_list.html Lisa

    Sigh. Real Life (visitors, new job, unexpected trips) and my other website (Accio Quote!) have interfered with my ability to concentrate on this huge project. I have cleared my desk, though, and will charge ahead soon!

Harry Potter Lexicon logoAbout Us | Privacy Policy | Contact Us | Copyright | ©2000 - 2014 The Harry Potter Lexicon.
NO PART OF THIS PAGE MAY BE REPRODUCED IN ANY MANNER WITHOUT PERMISSION.
HARRY POTTER, characters, names, and all related indicia are trademarks of Warner Bros. ©2001-2014.

Page layout by Lisa Waite Bunker and Steve Vander Ark, banner graphics by Camilla Engelby © 2007.

Primary editor: Steve Vander Ark
Original photograph © Steve Vander Ark
Original page date 9 June 2011; Last page update 14 June 2011 SVA