Embrace Change
I’ve spent most of the day on Saturday (and just finished for the night about ten minutes ago) working on my eCommerce site (see “Related Posts” below for earlier posts).
The current site is a design disaster. Different pages updated at different times, where I changed designs (though slightly) from time to time, intending that ALL pages would be with the new design, which never happened. So, the result is a hodge-podge of pages where even the logo may vary from page to page. Not good.
A few years ago, I developed a new design that I intended to use for all of my related web sites. I have an eCommerce site currently running with this design, and had plans for the main eCommerce site to eventually have that same design.
Well, I have had to learn to embrace change.
Not change for change’s sake, mind you, but to accomplish my design and function goals with the site. The original design was created to look good at resolutions of 640×480 and 800×600, the popular resolutions at the time I created the design, which should give you some indication as to the age of the design.
Being a fixed design, it looks small on monitors with greater resolutions. As I looked at a number of other web sites, I see that many are using fixed designs, many of which are still for 800×600, but centered on the page so that it doesn’t look so small as when left-justified.
But, I wanted a flexible design. Along the way, I relearned why I did the original design at a fixed size rather than a liquid design. With trial and error, plus some helpful advice from people on a listserv I’m on, I was able to create a liquid design that met my criteria.
First, it has to be readable at a 640×480 resolution. Granted, that’s reportedly less than 1% of users these days, but a sale is a sale! I don’t want to lose out on a customer because the web site was too difficult for them to read! I accomplished this by setting a minimum width for the main table, plus using a graphic at a fixed size to force that width in browsers that don’t recognize the minimum width parameter.
It also has to look good at higher resolutions. By using a liquid design, the page resizes nicely to fit the user’s screen. I used a combination of fixed and percentage widths to control the liquidity such that some elements on the page remain consistent while others flex easily. At most sizes, it looks great! Now, some people with super high resolutions may find some of the text stretched on long lines, but I think it should be fine for most people.
Why continue to worry about the low resolution users and not the super high resolution users? Well, the low resolution users cannot make their resolutions higher but a super high resolution user can always resize their browser window should the text prove too difficult to read. So, even though it may require some user intervention in some cases, overall, people should find the site easy to read and navigate.
As I mentioned in an earlier post, I am also trying to make the site more feminine. One part of that was rounded corners. Finally, I mastered the HTML art of rounded corners! Doing this, and then tweaking the design based on feedback, meant that I had to make changes to my original graphics. In the end, I wound up with some graphics that were completely different than what I started with. For example, I had to give up ovals in favor of rounded boxes.
The rounded boxes look good, but I kind of miss the ovals. Maybe I will give them a second look, since the new design I wound up with doesn’t necessarily require rounded boxes. You see, the ovals didn’t work when I started tweaking the graphics, but when I arrived at the end result, that’s no longer necessarily the case. Sometimes, things come full circle. I will have to give the ovals a second look, but not right now!
Though initially hesitant to do so, I also changed my colors somewhat. I nearly completely eliminated the feminine “pink,” which was actually a shade of red, but appears bright pink on newer monitors. I added some darker colors, still related to my color scheme. I was reluctant at first, but it adds a good contrast and I think it works out well. I guess you could really say that I expanded my colors!
The header and footer are done differently than in the original design too.
I think the end result is something that is still recognizable as an update of the original design, but also something new. It accomplishes my goals of flexibility and functionality, as well as maintaining a strong sense of the original design.
I’m not done tweaking yet! I have to take a second look at the ovals, plus probably do some more tweaking and solicit more feedback.
But, after I’m finished with this design (and completely finished with this eCommerce site), I think I will update my other related sites to this same layout. It’s been a long road (I’ve actually been working on this eCommerce site for YEARS), but I’m happy with the way its turning out.
Embrace change! Within reason, of course. 
Related Posts:
- “Finally” (20070902)
- “Closer…” (20070919)
- “Are You a Woman?” (20070922)
Hahaha, I’m glad the “pink” is gone. =P The tweakings sound really awesome, looking forward to the debut!
An eMail is on its way. Just curious as to whether you’ll prefer the ovals or rounded rectangles.
Or, do I already know the answer?
I’m sorry to hear you had so many problems. However, it seems like you have worked most of the issues out.
I like the idea of having rounded corners. Layouts always seem more put together when this design feature is utilized.
Good luck with the rest of your tweaking!
Thanks!