Marmalade Moon » usability

Live Website Make Over: 7 White Space and Then a Break

Kate — Mon, 31 Oct 2011 16:01:03 +0000

Yesterday, I took a break from the website makeover and today I’ve done some tweaking. More about that in a little while.

Comments and Voting

First, a thank you to everyone who voted in the poll about mobile browsing! Very interesting to see the results! It’s been so helpful for me to hear your thoughts and comments!

Amy, you would like to know more about printer friendly style sheets, and I found two resources that might help you:

Print Friendly and PDF Button A plugin for your WordPress or Blogger site that generates a printer friendly version of your website.
There is also an online resource for you to make a printer friendly version of someone else’s website.

David Bennett helpfully suggested a plugin for creating a mobile friendly version of your WordPress site: WPTouch. Concetta and Wini (who both recently redesigned their websites) offered friendly and helpful thoughts.

Fiddling With The Sidebar

added more space between the main area and the sidebar
added placeholders in the sidebar for categories and popular posts
simplified the information about posts

What Do You Think?

Note: There is a poll embedded within this post, please visit the site to participate in this post’s poll.

To Be Continued

Tomorrow we’ve got a guest over for an inspiring interview, so before that I’ll switch over to the old version of Marmalade Moon. The live website makeover will continue in about a week. Enjoy the interview!

FOLLOW THE WEBSITE MAKE OVER VIA EMAIL

Live Website Make Over: 6 Functionality Behind the Scenes

Kate — Sat, 29 Oct 2011 09:42:35 +0000

iPhone Photography (Instagram): Cherry Trees in the Autumn

While I mull over the layout and prepare dinner for guests tonight, I’ll add some important functions behind the scenes. But first a big thank you to everyone who voted in yesterday’s poll about layout and typography! It’s encouraging to see that everyone who voted finds the typography easy to read. At least I got something right?!

Mousy Brown encouraged me to simplify and get rid of any clutter. A.Pérez likes the zen style and is enjoying watching this work in progress. Joumana came up with a helpful idea for how I can add more space between the main area and the sidebar, as well as some creative ideas for improving the sidebar. Esmee wrote a friendly email with feedback (I’ve asked her permission to mention her email here). She pointed out that the category cloud, with its varying font sizes contributes to making the sidebar look cluttered or messy. And I’ve received email from readers who worry that I’ll “go all Zen and white” and that the colours won’t come back. The colours will return! I’m just trying to find a harmonious and easy-to-read layout before I start adding the eye candy! Such fantastic feedback! Thank you everyone!

Today we’ll take a peek under the hood and look at some of the functionality that lies behind the look and feel of a website. This part might be a bit dry for those who don’t have a website or blog, but for those who do, there may be some things that are worth thinking about.

Functionality Behind the Scenes

Added a link to my favicon (the little image that is displayed in the browser’s address bar and next to the page’s name in a list of bookmarks.) If you want to add a favicon to your site, here’s a free online favicon.ico editor you can use to create your own favicon.
Added my feed url (So people can subscribe to my RSS-feed)
Added my script for Google Analytics (So I can see how many people visit Marmalade Moon, where they come from, what content they enjoy and more.)
Added meta description (That helps search engines understand what kind of content I provide)
Added my Headway username and password (so that the theme framework is updated automatically)
Checked a box to enable the printer stylesheet (that makes websites look good when printed out on paper)
Discovered that there isn’t an option to add a mobile stylesheet (that makes websites easy to read on mobile devices). My statistics tell me that more than 30% of members of Club Marmalade Moon read their club letters on mobile email clients and more than 25% of those who visit Marmalade Moon use a mobile browser! And this is just the beginning of the “mobile revolution”. So this is something I’ll have to return to and think of a way to make the experience more user friendly on a handheld device.

Note: There is a poll embedded within this post, please visit the site to participate in this post’s poll.

Tomorrow

I’ve got two more days to work on my website makeover before a guest is due for an incredibly inspiring interview about the creative life! So on the 1st of November I’ll be taking a break from the daily makeover posts, to put the interview in focus. I think I should switch back to the old design for a week in connection with the interview, one shouldn’t be rude to guests! There’s still some time to work on the redesign though, and we’ll see how far I get before the interview!

In Depth

If you want to learn more about SEO (search engine optimization) and how it can work to help you with your website I recommend watching the video below. Although it talks about how you configure Headway for SEO, it does a fantastic job of explaining how SEO works in plain, non-technical language.

Headway WordPress Theme SEO Configuration Tutorial from Headway Themes on Vimeo.

FOLLOW THE WEBSITE MAKE OVER VIA EMAIL

Live Website Make Over: 5 Layout and Typography

Kate — Fri, 28 Oct 2011 13:57:25 +0000

minimalist marmalade moon

Today I’m going to turn in a different more minimalist direction, opening up spaces and working with typography. Creating a focused, peaceful zen space.

But first a thank you for your helpful feedback on yesterday’s experiment with the Quick Start Wizard. A Peréz liked the colours and the header, Tracy liked the colors and described the feeling as “it’s like sitting in a cozy living room with glass of wine and great conversation” and David Bennett offered a helpful suggestion for how I could fix the crowded menu. And several readers voted in the poll, offering their view on the Quick Start Wizard! Thank you!

Creating a Harmonious Canvas

Stripped the design of colour, reducing it to black white and grey.
Adjusted the columns to be more harmonious, basing the widths on the Golden Ratio (or Divine Proportion)
After hours of experimenting with fonts, I settled on using the humanist sans-serif typeface Lucida Grande

Thoughts

I really wish I didn’t need to have a sidebar at all! It brings a lot of clutter to the layout. The way blogs work, it’s really difficult to get rid of all together… Still, I feel so much gets thrown at us on the internet and I’d like to go for a more peaceful feeling.
I think some more space is needed between the main area for content (to the left) and the sidebar (to the right). Not sure how to do that.
I’ll have to let this sink in during the weekend. Listen to your ideas. Tweak.
Once I feel the basic canvas is right, I’ll be turning my attention to different areas like the footer, the header and the sidebar. Adding more colour and graphics as I go.

Note: There is a poll embedded within this post, please visit the site to participate in this post’s poll.