Tag Archives: layout

Custom Website Background Tiles with PatternCooler

After making the changes to my domain’s new layout, as profiled in last week’s webdesign post, I found myself still dissatisfied with how plain the layout appeared. It just was…BLAH.

As per my usual habit, I found myself surfing aimlessly around the Internet, trying to pinpoint what it was about my favorite site designs that gave them the “oomph” I was looking for. I just couldn’t quite put my finger on it…and then, I sighted a subtle tiled background effect on one site, and realized that perhaps all I needed was something to give the background a little interest.

Enter PatternCooler.com, a website that should definitely be on your favorites/bookmarks as a design resource!

patterncooler_1
In the Pattern Editor, you can start off by browsing tons of different background patterns, from bold to subtle and everything in-between.

patterncooler_2
Sort through the background images using the tag menu, available from the top left drop-down arrow…

patterncooler_3
…and once you find a tag you like, you can browse through the shortened list much more quickly. But this isn’t where the magic stops!

patterncooler_4
Once you select a pattern you like, you can actually change the colors in the image with either the onboard color picker OR a custom HTML hexcode (like what Photoshop outputs).

patterncooler_5
For this example, I picked the colors from my domain’s upcoming Version 14 layout, and started playing around. It looks so cool already!

patterncooler_6
You can play with the Transparency slider at the bottom left of the editor to make one or both colors more or less prominent. There are also Texture filters to customize the image even further (bottom right toolbar), as well as options to resize the image. When you’re done, simply click Download!

patterncooler_example
And here’s a sample of what that very background image looks like in use on my upcoming layout! I like how the subtle color variation gives a LITTLE interest to the background without overwhelming the eye.

Be sure to check out PatternCooler.com‘s new Background Tile Editor for your layout needs; this has been by far the easiest and best experience I’ve had with creating a background tile. (And they ain’t paying me to say this, either–I just had the good fortune to stumble on this site and realize what a gem I’d found!)

What Happens When You Rethink Your Design

Last week, I wrote about my upcoming domain layout and the design issues I was having with it. Check out what happened when I started rethinking all the bits I didn’t like!

layoutchanges_small
(click picture for larger image in new window)

This layout has a very, VERY different feel from my first design; the lighter, more neutral background color and the longer, thinner sidebar feel like the biggest changes, because those were my biggest problems with the first layout (too dark and crowded). But I also made some smaller changes, depicted below:

Text Shadows and Box Shadows, EVERYWHERE!

lc_dropshadows
The headings have a subtle shadow behind them to make them pop; so do the boxes holding the various website feeds. Even the sticky navbar at the top of the page has a little shadow! (I was following my own advice, LOL!) Though at first I was afraid I was going shadow-crazy with the layout, the design seemed to need a little extra detail, and I find that the text shadow on the headings especially looks good without being overdone. What’s your verdict?

Social Network Sidebar Slightly Revamped

lc_socialnetworks
Since I loved the social network sidebar as it was, I didn’t want to change it too much…yet the taller, thinner dimensions of the sidebar in this design called for me to make some sizing changes, at least. Instead of two wider rows of icons, I now have three narrower rows. However, I’m not sad about these changes–in fact, I like this more compact design even better!

*GASP* A Background Gradient!

lc_gradient
I’ve written about background gradients positively and not so positively, but after struggling with several background tiles and finding them all too “busy,” I finally chose this subtle gradient style, which highlights the top of the page AND scrolls with the sticky navbar as it glides down the page with the user. (I like this option better than the other ones I tried, but admittedly I’m still not QUITE sold on it…what do you think?)

New Quick Links Section

lc_quicklinks
After receiving a couple of complaints from visitors about not being able to find certain sites on my domain, I decided to include this little section–and quickly realized it would be just as helpful for me as for others! These are the sites that are the most active these days, so this Quick Links section could help draw attention to them as well as make it easier to navigate my network.

Less Blathery Welcome on the Sidebar

lc_welcome
Part of what made my first layout feel so crowded, I realized, was the super-long welcome paragraph I had shoved into the main content area. It felt clunky and distracting…so, with a ruthless Backspace key, I edited it and put it at the top of the sidebar instead, where it can properly greet people without overrunning the layout’s prime attention-grabbing space.

Bottom Line: Rethinking Isn’t Scary or Annoying–It Can Be Fun!

Revamping and rethinking my design seemed like a huge pain at the outset, but once I started digging into my layout and really trying to revision what I wanted for it, I found myself unexpectedly freed. For instance:

  • If I didn’t just love a layout feature, I wasn’t expected to keep it
  • It’s MY layout, so I can choose to have features wherever I wish/wherever they make sense
  • I can make several different versions of changes and compare them

In fact, doing this redesign gave me carte blanche to try styles and formatting I hadn’t messed with much before (such as the text shadows and the welcome message on the sidebar)–I found myself thinking, “why not try it?” After all, if I didn’t like it, the all-powerful Backspace key and Undo button could help me change it back. That was incredibly liberating! (Just make sure to save your work under different filenames if you want to compare two or more versions!)

So if you’re currently stuck on a webdesign you’re not sure about, I hope this post will inspire you to look back at your design and think, “Hmm, what could be different?” You may only make subtle changes, but it could end up creating a very different look–as I discovered!

Don’t Be Afraid to Rethink Your Design

The hardest thing for me, as a webdesigner, is to admit that a design of mine is just not up to par…especially when it feels like I’ve spent months crafting the stupid thing. Layouts and UIs take so long for me to think up and code, so it’s disappointing when I get to the end of the process and find that I’m dissatisfied with the product.

This is what’s happened to my latest domain layout, version 14, which has sat finished on my hard drive for about 5 months. Here’s what it looks like so far:

v14_ugh
I just can’t get up the gumption to let it go live, because I’m not QUITE satisfied with it. There’s something wrong with it, but I can’t exactly name what it is yet. So I’ve been sitting in “Layout Limbo,” pretty frustrated with myself.

I would guess I’m not the first or only webdesigner to feel like this, however. Come to think of it, we all end up with projects that just FEEL like they need redoing, for some reason. This impulse, contrary to my fears, is not a wasteful, horrible thing; it can serve as the impetus to keep doing BETTER, to keep making things more awesome. And it doesn’t just entail hitting Delete and starting all over again!

Step 1: Pinpoint What You Love about Your Design

Before you hit Backspace and delete all your code, and before you select and delete all your images, take a careful, thorough look at your design. What do you love about it, if anything? It can be even a really small thing, like the font you used, or a particular color.

v14_sidebarcool For instance, I love this cool little sidebar I developed for version 14. The simplicity of the icons, and how they pop against the background color, look tidy and sharp…plus, I like the font I used for the “social networks” and “affiliates” text.

I also like the navbar at the top of the page (which is a sticky navbar, yay)–I like that the main navigation scrolls with the page rather than getting lost.

When you find design elements that you like, make sure you note what they are, and copy/paste code and images so you don’t lose them. This is key to the “scrapping and remaking” process; if you don’t have anything to go on, you’ll be more stuck than you were with an unsatisfactory design!

Step 2: Figure Out What You Hate about Your Design

This is a tough one, but you have to confront it if you’re going to fix the problem. Really take time to look at your design–your choices of font, color, and basic content layout, your link styles, your images, EVERYTHING. What in your design sets your teeth on edge?

In studying my version 14 design, one of the things I keep saying to myself is “it’s so DARK.” The background is a lovely deep purple, but it almost feels so dark that it’s “flat”–it doesn’t seem to have much life in it. The lack of images also disturbs me subtly; it’s as if there’s nothing to brand my site, to make it look different. I was trying to go with the whole modern “mobile-friendly sleek and sexy” site look that’s so popular right now, but I think I may have gone overboard and turned it soulless instead. Even the addition of a few little curlicue images don’t seem to add enough spice.

As you observe your design with a similar critical eye, make notes about the things that bother you. But don’t delete your code or images just yet! There’s one more critical step!

Step 3: How Do You Fix These Problems AND Keep Your Favorite Stuff?

Now that you’ve gone through and figured out what you love and hate about your design, you need to know how to implement changes without losing the stuff you liked most. This is why I said don’t delete anything yet–you may only need to make small changes to your existing layout.

For instance, my main complaints on version 14 are that the background color seems too dark, and that the layout is overall lacking images, which would give it visual personality. Yet I like the sidebar and the top navigation bar. In my case, the colors and personality issues can be fixed easily without getting rid of the happy little sidebar and navbar–I can lighten the background color and darken text colors to maintain readability, and I can add in small images to demonstrate my personality without overwhelming the layout. (I don’t think I need a mid-2000s giant header image, but at least SOMETHING pretty and visual, right?)

Think about how you can blend problem fixes with the stuff you’re already happy with, and you’re halfway to a new design already! (And, if you end up having to scrap your design completely, don’t worry; it’s a learning experience if nothing else!)

Summary

Rethinking a design doesn’t mean you’re a horrible designer, nor does it mean you’ve failed–actually, it means you want to make a better product for your users to enjoy. Listen to those little tugs on your brain that say, “Hey, something doesn’t look right here!” Embrace that impulse to tweak, perfect, and shape your design to your heart’s content. You’ll be much happier with the end result!

Glasses Off: 4 Awesome Webdesign Sites

Here in the HTMLab, I’m fairly skilled at what I do (namely, HTML and CSS), but many of my articles would not be complete without some heavy-duty online research and self-teaching. Listed below are four sites whose tutorials make it easy for even this self-taught, non-technical webdesigner to understand:

WebDesignerWall
Awesome articles abound here about the subtler points of design (which I definitely need help with!)

WebDesignLedger
This site covers everything from helpful webdesign tools to overarching Web trends…really informative!

Webdesign Tuts
Need a tutorial on how to make a webdesign visually work? Webdesign Tuts (part of the TutsPlus network) likely has the help you need, for both front-end and back-end design.

Webdesigner Depot
This site literally runs the gamut of everything a webdesigner is concerned about (even marketing and branding)! You could spend hours browsing and learning.

Next-Gen Headers for Responsive Design

As users get more and more used to mobile browsing, we webdesigners are keeping up with that trend, making our sites ever more mobile-friendly. And nothing has shown that mobile sensitivity more than the responsive header, which not only resizes, but shifts its design slightly with the screen size.

Before we dig into how to make this happen, let’s look at a couple of examples from around the Web:

Visual Example #1: FunnyOrDie

fod_full
(Desktop view)

fod_mobile (Mobile view)

See this responsive header in action: FunnyOrDie.com

Visual Example #2: SmashingMagazine

smashmag_full
(Desktop view)

smashmag_mobile (Mobile view)

See this responsive header in action: SmashingMagazine.com

How Do We Make This Happen?

Combine Site Branding and Navigation in One Bar

An iconic site logo/site name and some simple navigation is the most mobile-friendly design choice. But that does not mean that your desktop users have to look at a boring header design! Both FunnyOrDie and SmashingMagazine’s navbars are both more complicated and elaborate on desktop view, with descriptive text added to icons, greater space between navigation links, and more subtle plays of color.

Make Your Header 100% as Wide as the Page, and Pretty Skinny

Make sure your header bar is always 100% of page width, so that it resizes with the screen size. Also, a navbar that is 100-150px tall translates well between screen sizes–it gives the mobile user enough screen space to tap on, while still being unobtrusive to the desktop user’s experience.

Fix Your Header Bar in Place

As described in my fixed navbar tutorial article, a combination header/navbar that scrolls with the user is infinitely more friendly, especially on mobile. It gives the appearance of an app without having to actually make an app for your site, and it makes quick browsing much easier.

Use Icon-Only Navigation on Mobile

Using tappable icons rather than text on mobile screens is much easier and quicker to view, and it keeps the navigation as small as possible (depending on how many links you have). (Notice that both FunnyOrDie and SmashingMagazine use a three-horizontal-line icon to give you access to full navigation.) This can be done using a CSS @media query to switch between displaying text and displaying icons.

Summary

Making a sleek, responsive header is key to making your site mobile-friendly, and it can be done with just a few code tricks! Try these suggestions and see what kind of mobile magic you can work!

Stable Sidebars: My New Favorite Layout of Choice

I know I’m probably about 3 years behind webdesign’s cutting edge (LOL), but I recently discovered how much I love the idea of a fixed, stable sidebar for my websites.

Wonder what I mean by “stable sidebar?” Here’s a couple of screenshots from my British TV shows fansite:

stablesidebar-1
This is how it appears when you first load one of the show pages…

stablesidebar-2
…and when you scroll down the page, the red sidebar on the left stays perfectly in place!

Why I Think This Design is AWESOME

I love the fact that the navigation and site branding stay in plain view, so nobody has to scroll all the way back to the top to browse between pages. Use convenience, YAY!

I also like that it’s a “headerless” design, which I wrote about back in June. Headerless designs force us as webdesigners to keep things more compact and less blathery (though I still found room for a little paragraph on the sidebar, as displayed in the screenshot, lol). Not to mention that the lack of a header means I don’t feel absolutely compelled to make a huge header image–and people don’t have to keep scrolling past that huge image to see content. Double WOOT!

Lastly, I like this kind of design because the sidebar functions as a visual ribbon decorating the page, adding a different color and look to this all-important bit of the page.

One Caveat: This Sidebar’s Not Exactly at the Leftmost Edge of the Page

One thing the above screenshots don’t show you is that the red sidebar isn’t actually at the left page edge; it actually hangs out kind of in the middle of the page in a fixed-width layout instead of being part of a fluid layout like most folks do.

The big reason for this? I can’t make fluid layouts work at the moment. I’ve studied, copied and pasted, and otherwise tinkered, but I’m still missing something important (my attempts at fluid layouts usually don’t scroll right, have horribly spaced out content in wide windows, or have a stinky vertical scrollbar on the side no matter what I do). I’m completely self-taught in webdesign and not really that great at understanding highly technical code, so I’ve had to mostly blunder through on my own when trying new layout styles.

So, in order to incorporate this look which I so loved, I had to find another solution, one that captured the essence of the stable sidebar without making the whole layout fluid (and thus breaking it). The following code was my fix:

How to Make a Robin-Style Stable Sidebar

#sidebar {float: left; width: 200px; padding: 5px; height: 100%; position: fixed; top: 0px; background-color: #8e0001; color: #FFFFFF; font-size: 14px;}

This is the code for the magic little sidebar. What makes the magic happen:

height: 100%;
position: fixed;

This makes the sidebar always as tall as the browser window it’s in, and it keeps the sidebar attached to the top of the page as well, so that it doesn’t scroll with the rest of the content. This sidebar stays right beside its content thanks to the old “wrapper-div” trick (seen below), which corrals both divs into a fixed-width layout.

#wrap {width: 1000px; margin: 0px auto;}

I’ve tested this in IE, Firefox, and Chrome with identical results; I don’t know how any other browser handles it, but it seems to be pretty obedient code. (IE usually has fits if I try anything creative, but this time it behaved itself!)

Comments or Questions?

Leave me a note in the comments about this design–like I said, I know it’s not the cutting edge of design anymore, but I really like it and it seems to function really well for my visitors. What do you think? (Oh, and if you have tips on how to make this kind of design work in a fluid setup, be my guest!! :D)

Robin Makes a Mobile Blog Layout, part 3: Testing Your Layout

Designing a mobile layout and knowing how to code it properly is great, but how does a webdesigner/developer test how a layout will perform on a mobile browser? After all, it’s not quite as easy as testing desktop layouts through your browser before uploading it.

I worried over this as I compiled this series, but thankfully, there are folks out there who have solved part of this problem, developing wonderful online tools that can test your site’s layout and help you identify problems in mobile browsing. The following sites are the best of the best, in my opinion, offering simple and sleek functionality as well as a wealth of information. Simply visit these sites and type your URL in to test how your current layout performs in mobile settings!

W3C MobileOK

w3cmobileok_1
w3cmobileok_2
This tool is a MUST for mobile web developers–it helps you validate, improve, and ultimately optimize your code for mobile usage. As you can see from the above pictures, Crooked Glasses currently fails miserably at being a mobile-friendly site…I got a lot of work to do. *sigh*

Responsive Design Tool

responsivedesign_tool
This simple online tool loads quickly and shows a range of different page widths at a glance, so that you can easily compare and contrast. (Caveat: you can’t click through pages unless you download the free tool from Github, but the download link is provided.)

Screenfly

screenfly
Screenfly displays your website on many different platforms, mimicking everything from tablets to televisions. Click the various icons to see even more specific screen sizes (like Kindle vs. iPad, or iPhone vs. Android phones); you can even click through your miniaturized site to view different pages!

The Responsinator

responsinator
The Responsinator gives you a scrollable list of all sorts of mobile devices, even comparing portrait vs. landscape orientation on the same device to show you how your site changes when the device is held a different way. The scrollbars on each individual display allow you to scroll around on your site to see what parts of your site may be obscured to the mobile user.

Further Reading

If the above tools have whetted your whistle in terms of mobile site testing, check out the following articles for even more apps and online tools!

SixRevisions: 10 Excellent Tools for Testing Your Site on Mobile Devices
WebDesignerDepot: 8 Popular Apps to Test the Mobile Version of Your Site

Robin Makes a Mobile Blog Layout, part 1: Designing the Look

I’ve been getting my proverbial hands dirty behind the scenes this week, grappling with code in order to put together a probable, working mobile layout for this blog. (The main thing I’ve realized so far? It’s a LOT of WORK. LOL)

mobilelayout This is the mobile design I finally came up with, working with the basic color scheme from the new desktop layout I’ve been designing. Its main features:

  1. Site content shrinks and expands as necessary (this screenshot shows how a mobile phone would display it)
  2. Same logo as my desktop design
  3. Bigger font and widely spaced text lines
  4. Simplified navigation
  5. Larger-sized links

But it took quite a while to get this design “right”–and it wasn’t easy to figure out how to manage it. Indeed, I’ve struggled most of this last week to come up with a design that actually looked like a mobile site layout, instead of a hopelessly squeezed version of my desktop design!

The Key: Focus on Readability and Content

I found out while designing this mobile layout that trying to fit all my navigation, my sidebar information, AND my content would just not work. Instead, I needed to make my mobile layout rather sparse-looking by desktop standards:

  • Keep the color scheme basically the same as your desktop layout, but make sure that there is a lot of contrast between the text color and the background color. High contrast is especially important for readability on small screens!
  • Only include the navigation that matters to your mobile users; if it doesn’t have to do with your content, it doesn’t need to be on your mobile site’s navigation. (For my blog, that meant that I had to exclude my “Links”, basically.)
  • Same goes for content. If it’s not one of your articles, don’t include it on your mobile layout. (No sidebar info here!)
  • Bigger font is actually better on a mobile device–you don’t want to make your users have to zoom in to read your text! That’s why you make a mobile layout in the first place. (For instance, I ended up with Garamond 16px for the body font in my mobile design, and I might even make it bigger than that in the final draft.)
  • Make headings, links, and navigation very, very clear and very easy to tap on with big fingers. Take it from someone with large fingertips–a link in big font is much easier to tap on than a link in itty-bitty font.
  • Include clear branding for your site (i.e., your logo/icon); if you can use the exact same logo/icon for your mobile site that you use for your desktop, all the better!

Summary

Mobile layouts have to be simplified, but that doesn’t mean that they are simple to design. (Indeed, you have to be deliberate and careful in your design choices, otherwise your mobile layout will be unusable!) But with a few considerations, you too can make yourself a layout that will transition well to all mobile devices, big screen or small.

(Tune in next week for part 2, in which I will attempt to make this mobile layout a coded reality!)

WordPress “Easy Mobile Layout” Plugins: YIKES

These days, more and more people are viewing blog content through mobile means–our phones and tablets have largely replaced our laptops when it comes to simply taking in content. We bloggers must keep pace with these demands when possible; after all, visiting a site and having to re-zoom in to see the text every time you open a new page can be an off-putting hassle. (Take it from me, I’ve run into this annoyance factor even on my own blog!)

But what if you don’t have the time to develop either an app or a mobile-friendly version of your site? The solution seems to be simple: use a mobile layout plugin! It’ll build your mobile design automatically!

Since I am running a self-hosted WordPress installation on my blog, I looked up WordPress plugins which create mobile-friendly layouts. The following is what I discovered while investigating 3 of the most Internet-viewed “popular” plugins…and it’s shocking, to say the least.

WPTouch

Free or Paid: Both options available, but the paid “Pro” option appears to have better tech support overall.

Brief Reviews: Most people get what they’re looking for–a quick, usable mobile layout with a little customization. However, the free version seems to have some issues, especially with themes giving a “too many redirects” error or not serving menus properly to mobile devices. Upgrading to the Pro version apparently fixes this for some users. Check out more reviews on the WPTouch reviews page.

More Information: WPTouch by BraveNewCode

WordPress Mobile Pack

Free or Paid: Free

Brief Reviews: Lots of bad reviews about this plugin not working properly, messing up blog databases, and and being almost impossible to install. Looks like you’d better steer clear of this one…check out more reviews here.

More Information: WordPress Mobile Pack

Mobile Website Builder for WordPress

Free or Paid: Paid

Brief Reviews: This one looked very, very promising–the best of the three I reviewed, in fact!–until I read about all the ads that the plugin puts all over your site, which are very difficult (if not impossible) to remove. Couple that with the fact that this plugin apparently hosts the mobile version of your site on a DudaMobile web address, and this doesn’t seem as strong a contender as I first thought. Check out more reviews here.

More Information: Mobile Website Builder for WordPress by Dudamobile

Conclusion: You’re Really Better Off Doing It Yourself

If you can believe it, this post started out as a way to let people know about great plugins to simplify the process of making our blogs mobile-friendly. Sadly, after considering all the reviews, I can’t in good faith suggest any of these–it’s not worth risking all your hard work just to save time on developing your own mobile-friendly layout. (Of course, this is just my opinion, but after reading about the database problems some of these plugins created, it’s kind of given me the willies about it all!)

I’ve written a few articles here before about developing mobile-friendly designs–these will be helpful no matter whether you want to develop a mobile app, make a separate mobile site, or build a responsive layout that adjusts to all sorts of browsers.

Crooked Glasses’ Upcoming Facelift: 3 Things to Learn

(LOL, y’all are probably thinking “IT’S ABOUT TIME!!!”)

For the last month or so, I’ve been spiffing up things behind the scenes, slowly getting things ready for a big new redesign of this little blog. As long and hard as I worked to get this original layout working, I realize it’s got a few usability problems, and I wanted to address those in the new version.

Such is the life of a webdesigner–we are always updating, always in the process of refitting so that our sites move with the Web and keep up with user demands. So, this week, I thought I’d use my current layout thought process to illustrate this point, and reveal how we webdesigners think out our design choices and put together good-looking yet usable layouts.

First: The Layout Mockup

First, I’ll give you a preview of how Crooked Glasses will look soon:

blog_full
(Click on the picture to see the full size in a new window)

3 Things I Changed for the User’s Sake

I’ve kept the color scheme basically the same, since I was happy with it and no one has yet reported any visibility or usability issues with it. However, there were 3 big issues I wanted to resolve with this facelift:

A Sticky Navigation Bar

blog_navbar
Ever since I did this blog post about an easy way to “stick” your navigation bar to the top of the page, I’ve been in love with the idea…so in this redesign, I incorporated a sticky navbar, for ease of navigation and a cleaner page look overall. Plus, it takes away the huge header image and collapses my site branding into a much more compact and tidy space.

Both these changes help readers get to my content faster without being bombarded with excess information or having to scroll up and down the page to find things. The more obstacles I can remove for the reader, the better for their stress levels–which means happier visitors!

Better Font and Lines Spaced Farther Apart

blog_linespacingfont
You know how your teachers always ask for your papers to be in Times New Roman and double-spaced? It’s not to make your paper twice as long–it’s for readability. I realized that in my original layout for this site, I had not taken line spacing into account, and as a result, awesome writing ended up looking like “Great Walls of Text” on people’s screens. Plus, the Arial font made body text run together more often than not, even when I was reading my own work! FAIL!

To combat that, I not only chose a larger font size and different font (Garamond 16px), but I spaced the lines 22px apart on the page. It’s not quite double-spacing, but it’s far enough apart to make each line distinct on the page. And with the new font choice, words don’t run together as easily, either. After all, if I’m writing a blog, I want users to be able to read what I’ve written as easily as possible!

Awesome New Sidebar

blog_sidebar I got to thinking as I designed this layout: “I don’t want a sidebar that’s trying to do too much.” Admittedly, I filled my original layout’s sidebar with a TON of stuff, like a tag list, category lists, blogrolls, recent tweets–it was all happening up in the sidebar region, and it looked overstuffed after a while. But the stuff that should have been in the sidebar, like a welcome, proper attention paid to the blogroll, etc., was tucked away on WordPress pages. Not my smartest moment as a webdesigner, I’ll admit. But that’s the great thing about webdesign–there’s always “Undo” and “Backspace.” 😀

So, with this sidebar, I’ve included a welcome, put up a blogroll, added the “Brought to you by” links, and called it a day. (With the last choice, I eliminated the need for a footer altogether!) Plus, I spiffed up the FAQ page so that it would indeed answer any and all common questions about me and about this blog. This will keep the sidebar from looking so cluttered and stuffed with text, so that it doesn’t distract from the star of the show–my content!

Summary

Good layout redesigns take time and thought, as well as a critical eye turned toward your own designs. As I’ve illustrated, you have to first point out what’s not working in the design you worked hard to craft, and then take steps to fix those problems so that the site works and reads better.

I’m very excited about this redesign, even though I dread the process of trying to placate WordPress to accept another layout; the last time was rife with much fist-shaking at the computer screen and words I’m trying to stop saying. xD But if these changes will help readers take in my content more easily, it’s ALL worth it!