Trials, Tribulations & Site Redesign

computers with different site layouts

So many themes and designs to choose from.

Last year, the theme I used was pulled from the WordPress repository without warning. The creator decided not to pursue updating it in the future. Though the theme still works, at some WordPress update, it will stop working. This forced me to find a new theme. It took about three months from start to finish. Of course, I could have done it faster, but this allowed me to consider lots of options and let the design sit — kind of like when you need to let your manuscript sit before you edit. The following is a plan of action for your redesign.

Thoughtology: Think Globally

Remember everything needs to be rebranded like Twitter, Goodreads*, Gravatar*, Blogger/Google+ Profile*, Newsletter service, etc.

*Those only need to be looked at if you change your avatar as I did.

Consider Everything

  • Header
  • Background
  • Content area: color, look, style
  • Widgets: header, top, side, content, footer (there are so many places for ’em)
  • Images within widgets and what I call standard elements (bullets, dividers, quotes, etc.) You might’ve notice I kept my butterflies, but I had to change their color from red to blue. I also snuck a butterfly into my header. Did you notice it?

Step 1

Make a test site. This can be done no matter what platform you use. You can tweak and test to your heart’s content. Start by adding copycat pages and posts, not all of them, but 4-10. This will allowed you to see how the old stuff looks with the new design, and what you’ll need to manually fix after the redesign.

Step 2

Play. Whether you have an idea of what you want or are clueless, play with themes. Find one you like the basic look of, then tweak it, mess with code, put up a fake header. See what you can and can’t do. I went through several different themes before settling on this one. This may overlap with the next step, but if you’re not great at coding, do this step first.

  • Tips:
    • Choose a responsive theme—one that shrinks the header too. Not all WordPress or Blogger themes do this.
    • Choose a mobile friendly theme. Not all WordPress or Blogger themes are.

Step 3

Work. It had to come into play at some point.

  • Start with mood. What mood do you want to create? Happy, dark and edgy, romantic? This will obviously be linked to your genre. I wanted to go darker and have an urban feel with a touch of magic.
  • Choose your basic colors. This will tie your site together. It’s two or three colors, and usually in the same tone or value or in the same color range. Mine is blue, teal, and black. Think about what the colors and color combos trigger in most people. (See my color posts.)
  • Design your header. This is the most important design element. It’s the first thing people see. It should clue visitors in on your site’s focus. It can pull them in or turn them away! This is a biggie.
    • Tips:
      • I'm watching you!Make sure to include your name or logo. Mine is actually not part of the header, but a layered graphic on top of the header. That part took me the longest time to get right, so you better like it.
      • The width can vary, but if it isn’t full size—center that sucker.
      • Don’t make the height take up the whole screen. Let your content peak through. People hate scrolling to find out what’s on the page. Visitors should be able to read a post title and a few lines of copy at least. If you want a giant header, create a splash page (a homepage with that image only, the rest of the site should have a smaller matching header). However, be aware that splash pages are dated, bad for SEO, and may turn visitors away due to large graphics slowly loading on the page.
      • Don’t squish or stretch images to fit. They look ugly and amateur. Crop it or use a different image.
      • When you have one you like, optimize it. You need to reduce the byte size. This is necessary. Too large slows down load time; Google’s prickly and gives you bad marks—and lower ranking. And “they” say people won’t wait more than three seconds before they give up and leave.
    • Design your background. Solid color, pattern, or image, whatever you choose, make it fit with your header.
    • Design your widgets. (Widgets are areas of content that don’t don’t require HTML or CSS knowledge for modification.) This includes the content area. Choose the font, style, titles, etc. This is a good time to think about the order of widgets and wording too. Update images. I created new follow buttons to go with my theme.
      • Tips:
        • Don’t clutter your sidebars or footers. No one will read them.
        • Really think about the order stuff appears. Important stuff like the follow buttons up high!
        • Don’t bother with an archives or tags widget. People don’t use them; they use the search or click on the tags within the post.
      • Choose your accent color. This is best for links or things you want to stand out. Mine is an orange-red (the compliment of my blue and teal).
    • Create your site icon/favicon. That’s the image that shows in the browser next to the URL. Mine is a butterfly.

Once all that is done, making the switch on your actually site will be quick and painless.

Sites to help you in your endeavors:

questionAny tips? What’s your site’s theme colors?

Image from pixabay.com
Share! It will make you happy, trust me.

While you’re here…

Sign up for my newsletter and I'll send you one of my cookie recipes free. Other benefits include being the first to know exciting news, first to receive sneak peeks and sale information. Mailers are sparse.
Updated: February 20, 2017 — 10:52 am

30 Comments

  1. Hi Holly – this is great … some really good ideas and I will be back to study and take note … well done … cheers Hilary

  2. And yours has come together nicely.
    My background and icon have been the same since the beginning. Header and other things I have changed over the years. It was more challenging creating the IWSG site from scratch.
    Great step-by-step guide!

    1. Thanks. Yes, starting from scratch is harder because of all the shinny directions! My site is simple enough I can swap out the header or logo easily.

  3. When I have a free moment, I need to work on the background of my blog. It's time for a change.

  4. I know this is why I haven't re-branded. I just don't have the energy it takes to do it. However, you've done a great job and I like the results a lot.

    1. Ha ha, yes, I totally get it.

  5. Last year we finally went through all of this, and it was a huge amount of work, but in my completely unbiased opinion I think it turned out nicely.

    Yours looks great. It's simple and clean, and to me, that makes for a great design. Some of these blogs that are so extravagantly designed just end up being full page headaches that strain the eyes and take forever to load up. Not a fan of those.

    1. Thanks. I like the simple designs too.

  6. Lots of good tips here and I will for sure come back to this when I finally get my new site going. Thanks.

  7. Hi Holly! Thanks for the lowdown. I like to redesign my site every so often as I get bored with it. And things change, don't they? I'll be back to have more of a look at this…I have a WP blog too but have kept it basically the same as my blogspot one for now. Time, you know…

  8. Thanks for the insight and info. Anyone who thinks blogging/all its related stuff is easy is misinformed. It's a lot of work! 🙂 Thinking about making the leap to WordPress this year. Have had an account for years but haven't done anything with it. I'm a little less intimidated now, since I've been blogging for a local business and using WP for their blog, so am a little more familiar with it now.

    1. Moving from Blogger to WP is intimidating. I remember it looked like a different language. Now, I find it easier.

  9. Your site looks great. Mine hasn't changed in years and I currently have no intention (or ambition) to mess with it. I don't recall what my theme color is officially called. One visitor to my site once called it "Dead Salmon" but I think that was from some jerk who had some kind of problem with me. Oh well, I'm happy with mine for now.

    Stay ambitious if you can. You're doing a great job.

    Arlee Bird
    <a href="http://tossingitout.blogspot.com/">Tossing It Out</a>

    1. It's definitely a healthy live salmon! Thanks Arlee, I need a laugh this morning.

  10. I picked a theme that had what I envisioned and made sure it was mobile friendly. Then I sat with it a year. After that, I purchased it. Now I can go to the developer for custom code to tweet it as I like. Now that I have a smart phone, it helps me tweak the site further. I like what you did. Sites can be very time consuming. I have to move mine soon, which will be an interesting adventure for me. I'm changing hosts, so the website should continue to exist as is. So I hope.

    1. Taking the time to play with a new design is key. I feel for you, moving from one host to another can be a pain. I hope it goes smoothly for you.

  11. Fantastic tips! Once a year I usually re-evaluate my websites and such and make changes. I haven't done that this year, but I'll likely will at some point.

    1. That's great. I try to do that do and check all the pages to make sure they are current.

  12. I'm so sorry you had to switch things up. The idea of redesigning makes me want to gouge my own eyes out. It would be less painful. =) I have so many YEARS of work in my blog… You make some excellent points for people to follow who are in the process though.

    1. I was bummed at first too, but I think the new design (header) is better for the genre.

  13. Great tips, Holly. There's a lot of work that goes into creating a pleasing site. Your new site looks awesome.

  14. It all sounds so complex, and something I have no time for. I just pray no one ever rips my template out from under me! Congrats on all your hard work, and have a great weekend!

  15. Dude, that's a lot of work and a lot of good information. I went through it some four years ago, back before I had any sort of readership. I like where I'm at now. I've got a back-up of the theme and my child theme in the cloud if things do go awry.

    1. This is a pretty standard theme too, so hopefully it won't go anywhere. 😉

  16. Holli, you're very knowledgeable about all this. Some of the jargon scares me, especially the HTML one.
    My site’s theme colors? I love multi-colors.
    I do have a tech-guy who has helped me with my design.

  17. I like your new design. The toughest thing to think about are the sidebars. I know mine are cluttered, but I have books to promote and other places where I have a presence such as YouTube. I'm fairly good with it on a couple of my blogs, whereas on others I've gone a more minimal route.

    Where do you test your site for new themes? What I've always done is test themes within the admin panel (WordPress). Course, the biggest thing to remember is to remove any themes one decides not to use; after getting hacked a few years ago that's a lesson I've never forgotten.

    1. Thanks! I think as long as the sidebars are meaningful, they work. So, often they are cluttered with stuff that is really only useful to the blog owner.

      For Blogger and WordPress.com, you can just create a new blog. For self-hosted WordPress, create a subdomain or subdirectory and a new WP. And yes, all unused themes and plugins must be removed. It makes your site more secure and it will run faster too. The more you have the more it bloats the site.

Comments are closed.

H.R. Sinclair © 2016
Scroll Up