Jump to content

New Design


Guest

Recommended Posts

Up until today, my CubeCart store has used the default Legend skin. While sales have been okay with that, I finally decided to bite the bullet and have a custom skin created.

I just uploaded and tested a new design that I commissioned a designer to create for me based on several designs I liked from here. I think he did a fantastic job.

The current header graphic is more of a placeholder than anything, as I will have someone else create the image for that.

I'd like to hear your thoughts/comments about the site (other than the header graphic, which will be replaced).

http://www.PowerKeysPub.com

"Edit by moderator/admin. Promotion of 3rd party removed. 3rd party programmers can be found here"

Link to comment
Share on other sites

Alan,

Looks great and I must be honest... a great improvement on your previous design.

The only thing I am not so sure about is the large white space below Featured Products.

Overall excellent :w00t:

Euan

Link to comment
Share on other sites

Thanks Euan,

I've often thought about converting my home page into a type of "squeeze page" where I focus on getting subscribers to my mailing list by selling them on a freebie.

That would use up more of the space that's left empty next to the side column.

It would probably prove to be more profitable as I'd be able to follow up with a larger number of prospects.

Maybe soon.

Link to comment
Share on other sites

  • 1 month later...

I can now report how the new design has impacted sales on my site.

For the month of January, using the stock Legend skin, my site converted an average of 1.89% of visitors to sales, resulting in an average visitor value of 45 cents each.

For the month of February, using the new design by MarksCart, my site converted an average of 2.23% of visitors to sales, resulting in an average visitor value of 70 cents each.

Thus, the new design increased conversions by 18% and average visitor value by 56%.

Between the 2 months, I made no other changes to my site (other than increasing the size of thumbnails to better match the new skin), and made no changes to my regular promotions. Thus, the difference can be attributed to only 1 of two things - the new design, and the normal variability of customers.

Personally, I think the increases are significant enough to prove that the new design had a solid impact on sales.

Link to comment
Share on other sites

  • 2 weeks later...
Guest devstudent

Design looks good, I couldn't help but notice one issue you may or may not be able to see depending on your screen width and resolution though. I know if it was mine I'd certainly appreciate if someone seeing my web pages from a different screen type noticed issues they'd let me know.

As I've read around here and at the dot org site I've noticed less experienced or self taught developers often requesting that certain skins be made to fill their entire screen as opposed to a fixed width. They usualy request this because they are not understanding why modern page developers do this and it doesn't seem to look right on their own screen as opposed to how they think it should look on their screen when a page is locked into a fixed width.

The problem is visitors to a web site, the people you really wish to impress, are going to be coming at you from a variety of different sized screens and resolutions ranging from low res tiny PocketPC and smart phone screen sizes to huge 30" hi resolution wide screen monitors and unless you tightly control primarily the screen width your going to have some strange results people may see.

I'm guessing after your developer turned the work over to you that you edited in some text in an h1 tag on one of your pages that was longer than your developer had anticipated you would have done when he set some parameters in your .css file, and the result looks like a text "leading" error on the page as displayed on my own 17" 1920 X 1200 resolution laptop monitor.

I've attached a screen shot so you can see your page as I and some visitors to your site see it and understand what I'm talking about.

I just happened to randomly open a single page to have a look at it, so I don't know if this is the only place where this happened, the rest of the page looks good, just all that text you had added in on that single h1 line that turned into a bit of a visual mess on my screen as the attached screen shot shows.

The quick way for you to fix this if your going to add such a long text string to that line would be to add some line break tags <br> into the text string you added to make it so it doesn't try to take up an entire line in one shot like it currently is.

Here was the random page I opened, also looks to be for your most expensive product...

http://www.powerkeyspub.com/index.php?act=...amp;productId=7

and here is my screenshot so you see what I'm talking about...

Also noticed on your new since this original post header logo, if I open your page to a full screen view on my wide screen monitor trying to see if the h1 line stretches out ok then, that the page stretches across the entire screen but your header logo stops short and ends up all the way on the left side with a large blank white space on the right. Again, this is exactly why we as formaly trained developers fix the width of web pages we build, usualy to a fixed width of about 800 pixels wide, and again, that logo sounds from reading in your post and on your web site news to be something you have changed since your developer turned the work over to you which is likely why he didn't catch the problem at the time of development. You may want to float that image at a different value so it looks correct on any width monitor. You just about can't buy a laptop these days that isn't a wide screen so you can expect a large percentage of your visitors on laptops will have wide screen monitors and see your pages as I describe to you.

Link to comment
Share on other sites

Alan,

The only thing I am not so sure about is the large white space below Featured Products.

Ditto, looks a bit weird with all that space. Maybe at the top of the page, have a nice graphical banner then the page text underneath.

But yes its a very nice design!!!

Link to comment
Share on other sites

Thanks for the additional comments. Both of these issues concern the content of the site, which is my responsibility instead of my designer's.

I agree that a very wide screen will show the limitations of the graphic header. We didn't plan for more than 1280 at this time, mostly because fewer than 1% of my visitors use such a screen size, and the larger graphic would slow down the page for everyone else. I'll consult my designer for ideas on how to handle that situation, though.

I do understand the reasoning for the fixed width screens. However, there is an equally valid reason for using fluid width screens, which are indeed more difficult to do correctly. Considering that many "Big Name" sites use fluid width screens, it seemed to be a good way to go. Personally, I think that most 'professional' web designers use fixed width simply because it's easier, but I'm not here to debate that point. Your point about the issues involved with larger screen sizes has been heard and accepted.

And yes, I do plan to fill in the home page so that there won't be so much empty space, althought that may take a few weeks to get to. I'm juggling a number of projects that have upcoming deadlines. When these are done, I plan to convert the home page into a "squeeze page" that makes an offer for joining the mailing list. All of my free items will become subscriber gifts and removed from the store proper. I'm hoping that this will increase my subscription rate from 4 people per day to 12 or more.

Although I hadn't thought of it before, it might be a good idea for me to have my designer lay out the content pages for me so that they match the overall design. Thanks for helping me realize this.

Link to comment
Share on other sites

Guest devstudent

Good stuff Alan,

I think what you'll find is many big sites you speak of aren't ready to invest the time and expense into updating their site layouts, many I see are still using tables to position content on their web pages for this very reason. Using tables in that way is so 1999 HTML 4.0, but big sites are still using it only because they paid a lot to have it done back in 1999 and aren't ready to reinvest in updating everything so in this particcular case, trying to mimic what you see the big guys doing isn't always applicable.

That's not to imply you must use a fixed width layout, my point was only in explaining why its done and that I see a lot of beginners who don't think it's right because they aren't considering the big picture and variety of means in which their pages are likely to be viewed. I'd also suspect a far higher number of viewers to your web site are using wide screens than just 1%, over the next year or two your going to find the number of visitors who aren't using wide screens to be closer to 1% if anything since like I stated, you just about can't buy a square screened monitor anymore. Now that Windows Vista is out there and people are required to use higher end graphics cards to utilize its full effects the manufacturers are designing their products to take as much of an advantage as this as possible so when viewed side by side on store shelves their product doesn't look inferior.

I was hoping you wouldn't take my comments as knit picking on your choice of layout, my only point was to let you know there were just 2 minor issues with the over all look and feel and both of these issues can be very easily resolved with out the need of making your site a fixed width. I wouldn't increase the size of your header logo, this would only lead to more problems as people with smaller monitors would then be forced to scroll left and right on your page, people really hate that, it's very annoying if your trying to read site content and have to keep scrolling back and forth on each line. You could leave your header logo the same size, the size is good, I'd just tweek the code slightly so when the screen stretches the page the header remains in the center as opposed to being fixed to the left margin of the page.

Then with the way your h1 text line is wrapping and over writting the lines you could easily fix this yourself by just using line breaks like I pointedd out, or if you wanted to keep the fluid look of the site and have that data remain on the same line when stretched out you could simply add in some leading values to the h1 tag in your css file so when it does wrap like that you have a set value for the line spacing and the words don't try to overlap each other.

As far as the white space for the content section on your page others are pointing out, I thought it was obvious you had plans for inserting site content in that area without saying, its why I didn't point it out, it isn't a page code issue like the other two problems I was pointing out for you are.

Mark looks to be a skilled and talented designer, if you can't figure out how to fix the code I pointed out on your own there's no doubt he can spit a fix out for you in a matter of minutes, it really is just a simple fix to correct those things and make your page look right.

Link to comment
Share on other sites

Oh, I'd love to believe that the majority of visitors would upgrade and use the newest technologies and software! Unfortunately, that's never been the case in the past, and I see no evidence that the trend is changing.

It seems that the stats I remembered were from a script I no longer use. I wasn't able to confirm the actual percentages of users with various screen resolutions, so you may be right that it's greater than 1%. The stats I remembered had 800x600 screens at around 65%, 1024x768 at about 25%, 1280x1024 around 5%, and higher resolutions at lower percentages. I'm thinking that these numbers were from about 2 years ago.

{EDIT: I found a site that reports screen resolutions used - http://www.sitetrafficstats.com/screen_resolutions.php}

Do you have any stats regarding the number of users that use cell phones to browse our sites, or PocketPCs and Palm Pilots? They're certainly not wide screen devices. Of course, once you take out the CSS from the layouts, then the screen width issue becomes irrelevant, and then it's an issue about the order of content.

As far as the point about "Big Name" sites not having a budget to redesign their sites, I have a hard time believing that Yahoo, Amazon, Google, and others like them fall into that category.

Again, I appreciate your comments and will take action on them when I can.

Link to comment
Share on other sites

Guest devstudent

Statistics that are two years old would not apply, the trend didn't realy start till this year with the release of the new Windows Vista Operating System. One trip into your local computer store will tell you immediately what you should be expecting and prepaired for as far as screen sizes and resolutions to be expecting. Actually the trend started late last year when the manufacturers started putting their new products on the store shelves in preporation of the new release of Vista. Trust me, the majority of the world buys prebuilt systems, these systems are all coming with Vista already installed on them now and the systems do not look as appealing on a store shelf running Vista without a wide high resolution screen. New users have some trouble adapting at first to the wide screen and higher resolution, but once they learn how to effectively use it there is no going back. If your a developer you just can't beat the ability to have multiple different windows open on your screen at the seem time and be able to see all of them at the same time without flipping or scrolling. I assure you, its a trend that is here to stay, like I said, once you get use to the wide screen monitors there is no going back, square screens and low resolution will drive you nuts. Take a stroll into your local electronics store or browser their web sites and look at what is being sold, you almost can't even find a square screen monitor at all anymore. If the trend wasn't for everyone in the past to upgrade we'd all still be using monochrome monitors and doing everything from the command line. People in this market are almost actively forced to upgrade due to support being phased out for the older technologies. You either have to upgrade, or what you have just plain doesn't work anymore.

What do you mean no one browses your site on a PocketPC, you should check your web stats again, I'll bet there's someone looking at your site right now on one ;-)

Actually I get a ton of phone and pocketpc browsers on several of my sites that I run for motocross promoters, the racers are usualy in the pits checking their results and stats, paying for their races and everything else from their phones and pocketpc devices. The "@media rule" has been a life saver for me on dealing with it. I also run some web sites for restaraunts that get a lot of hits by small devices from people looking for directions and setting reservations, often out of town and traveling, using their phone device for this purpose.

You have to prepair for everything and its easier to do if you try and stay ahead of the game rather than playing catch up. Its largely in part why I'm here checking out Cube Cart in the first place. I always do as much research as possible on anything new I may plan to implement. Check out what bugs and security issues pop up, watch to see how well they are handled by the vendor, see what degree of support is offered and then what degree of support is actually provided in the real world, and get a feel of what people who are already using it are having problems with, how well these problems are handled, and over all what the vib is I get from other people already using something.

I'm in the process of moving all the sites I manage over to a central location on my own servers, currently they are scattered everywhere and its gotten to the point where its too difficult for me to stay on top of all of them this way. I'm hoping I'll be able to use Cube Cart as a single solution to a variety of different types of clients I have, so far its looking pretty good, I'm likeing what I see. Looks like it will be pretty easy for me to support for them as well.

Big name sites have big position bean counters, they don't let them just toss money out because they have it. Updating a major site involves a huge amount of resources, time, money, labor and coordination, it's not a simple thing. Most of the sites you mention are still running on 1999 deprecated code from HTML 4.01 standards. Trust me, thats not what you want to mimick on your new site, support for the older browsers and Operating Systems are ticking down, these older browsers and Operating Systems aren't going to work well or at all on the newer standards, even newer standards are just around the corner as well thats going to make it to a point where everyone will need to get up to date with what they are running and codeing into their web pages.

It was a smart choice on your part I think to go with Mark as your developer, he takes clean code and validation seriously, which also shows he takes a lot of pride in his work. I'm in negotions with him right now to help me out since I'm overwhelmed with having to move all my scattered clients to a central point right now and just can't possibly do all that needs to be done on my own. It was certainly reassuring to me to read your posting here and get the impression that you are very satisfied from working with him yourself.

Link to comment
Share on other sites

Guest devstudent

I almost forgot, here's something you might find to be helpful to you as you play around with editing your own site content. One of the toughest things you'll run into is trying to figure out just where a value is going to place something on your page and what changing values in your css file will do.

This code which you can cut and paste into notepad (not Word) and then save the text file or rename it to css_positioning.htm (or what ever you want .htm) will give you two display boxes you can see where they position as you change the values around on the right. As you begin to play with positions you'll figure out the usefullness of this. I'll just paste it in here and we'll keep it as a secret bonus to anyone who had the interest to open and read your initial post here...

<html>

<head>



<!-- 

  Shows you how position values will display 

  by being able to change the values and see 

  the direct effect.

-->



	<title>CSS Positioning</title>



	<style type="text/css">

	   body {

		background-color:white; 

		font-family: Arial, Helvetica, sans-serif

		}

	   h2 {

		color:yellow; 

		letter-spacing: 1em;

		font-size: 1.5em; 

		padding: 10px; 

		margin-bottom: 0; 

		text-align: right

		}

	   p {

		font-size: 0.8em; 

		padding: 10 30 10 30; 

		border: solid 1px black; 

		margin-top:0; 

		background-color: ivory

		}

	   address {

		text-align: center; 

		font-size: 8pt; 

		border-top: 1px solid black; 

		clear:right; 

		font-style: normal;

		margin-top: 15px

		}

	   span.btitle {

		font-style: italic

		}

	   #form {

		float: right

		}

	   #outer {

		width: 150; 

		height: 150; 

		background-color: red; 

		border: 5px outset red

		}

	   #inner {

		width: 50; 

		height: 50; 

		background-color: yellow; 

		border: 5px outset yellow

		}

	   #flow {

		width: 300; 

		height: 50; 

		border: 1px dotted black; 

		margin-top: 10px

		}

	</style>



	<script type="text/javascript">

		function moveit() {

		 outerbox=document.getElementById("outer");

		 innerbox=document.getElementById("inner");

		 opindex=document.csspform.outerpos.selectedIndex;

		 ipindex=document.csspform.innerpos.selectedIndex;

		 oppos=document.csspform.outerpos.options[opindex].value;

		 ippos=document.csspform.innerpos.options[ipindex].value;



		 if (oppos != "static") {

			outerbox.style.position=oppos;

			outerbox.style.top=document.csspform.outertop.value+"px";

			outerbox.style.left=document.csspform.outerleft.value+"px";

			document.csspform.outertop.disabled=false;

			document.csspform.outerleft.disabled=false;

		} 

		else {

			outerbox.style.position="";

			outerbox.style.top="0px";

			outerbox.style.left="0px";

			document.csspform.outertop.disabled=true;

			document.csspform.outerleft.disabled=true;

		 }

		 if (ippos != "static") {

			innerbox.style.position=ippos;

			innerbox.style.top=document.csspform.innertop.value+"px";

			innerbox.style.left=document.csspform.innerleft.value+"px";

			document.csspform.innertop.disabled=false;

			document.csspform.innerleft.disabled=false;

		 } 

		 else {

			innerbox.style.position="";

			innerbox.style.top="0px";

			innerbox.style.left="0px";

			document.csspform.innertop.disabled=true;

			document.csspform.innerleft.disabled=true;

		 }  

		}

		function resetform() {

		 document.csspform.outerpos.selectedIndex=0;

		 document.csspform.innerpos.selectedIndex=0;

		 document.csspform.outertop.value="0";

		 document.csspform.outerleft.value="0"

		 document.csspform.outertop.disabled=true;

		 document.csspform.outerleft.disabled=true;

		 document.csspform.innertop.value="0";

		 document.csspform.innerleft.value="0"

		 document.csspform.innertop.disabled=true;

		 document.csspform.innerleft.disabled=true;

		 moveit();

		}

	</script>



</head>



<body>



	<h2>CSS Positioning</h2>



	<p>

		This page demonstrates how different position styles affect layout. Select position

		values from the selection lists and input boxes below. The first column of input fields 

		sets the position of the larger red box. The second column of input fields sets the 

		position of the smaller yellow box. To reset all the two colored boxes to their default 

		positions, click the <b>reset</b> button. The position of the dotted paragraph can 

		not be set, but it may change in relation to the movements of the two colored boxes.

	</p>



<div id="form">

   

	<form name="csspform" id="csspform">

	

	<table cellspacing="2" style="border-left: 1px solid black">

			<tr>

					<td>

					</td>

				<th colspan="2" style="color: blue">

					Positioning Styles

				</th>

			</tr>



			<tr>

					<td>

					</td>

				<th style="background-color: red; color: white">

					outer

				</th>

				<th style="background-color: yellow; color: black">

					inner

				</th>

			</tr>

   

			<tr>

					<td style="text-align: right">

						position:

					</td>

					<td style="background-color: red">

						<select name="outerpos" id="outerpos" onchange="moveit()">

							<option value="static" selected="selected">static</option>

							<option value="absolute">absolute</option>

							<option value="relative">relative</option>

							<option value="fixed">fixed</option>

							<option value="inherit">inherit</option>

						</select>

					</td>

					<td style="background-color: yellow">

						<select name="innerpos" id="innerpos" onchange="moveit()">

							<option value="static" selected="selected">static</option>

							<option value="absolute">absolute</option>

							<option value="relative">relative</option>

							<option value="fixed">fixed</option>

							<option value="inherit">inherit</option>

						</select>

					</td>

			</tr>

   

			<tr>

					<td style="text-align: right">

						top:

					</td>

					<td style="background-color: red">

						<input name="outertop" id="outertop"  disabled="disabled" 

						value="0" size="5" style="text-align: right" onchange="moveit()" />

					</td>

					<td style="background-color: yellow">

						<input name="innertop" id="innertop"  disabled="disabled" 

						value="0" size="5" style="text-align: right" onchange="moveit()" />

					</td>

			</tr>

			

			<tr>

					<td style="text-align: right">

						left:

					</td>

					<td style="background-color: red">

						<input name="outerleft" id="outerleft"  disabled="disabled" 

						value="0" size="5" style="text-align: right" onchange="moveit()" />

					</td>

					<td style="background-color: yellow">

						<input name="innerleft" id="innerleft"  disabled="disabled" 

						value="0" size="5" style="text-align: right" onchange="moveit()" />

					</td>

			</tr>

   

			<tr>

					<td>

					</td>

					<td colspan="2" style="text-align: center">

						<input type="button" value="   reset   " onclick="resetform()" />

					</td>

			</tr>

	</table>



	</form>



</div>



<div id="outer">

   <div id="inner">

   </div>

</div>



	<p id="flow">

		Sample paragraph.

	</p>

	

	<address>

		<span class="btitle">

			CSS Positioning Test bed

		</span>	

	</address>



</body>

</html>

Link to comment
Share on other sites

  • 1 month later...
Guest chantesse

I recently upgraded to a flat screen - it is actually several years old and has a horizontal resolution of 1280. I could not get text to appear sharp until I changed the PC's resolution to 1280 also, which I understand is correct, you only get sharp text at native resolution. The text is then small but I set the windows XP DPI scaling to 120 and things are now just about acceptable.

Now my Cubecart store takes up about only 60% of the width and looks a bit 'silly'. Am a bit concerned so this brought me to this thread. Am on 3.0.9 so maybe I need to see what 3.1.x offers in screen width management before deciding what to do.

BTW a quick look at our visitor stats shows:

63.00% 1024x768

19.00% 1280x1024

12.00% 800x600

4.00% 1152x864

22.00% Unknown

and a really suprising 48% are on IE 7.0 (another 48% on IE 6.0)

Any further comments on this topic are of interest to me.

Link to comment
Share on other sites

Wow, I had not followed this thread, I'm glad it popped up again. Alot of interesting reading here. As I am the skin developer, I would like to say that I prefer to code fixed width skins. I think that dev-student's critiques are a little long-winded and overwrouhgt (sorry, just my opinion :)) but he has made valid points about fixed width skins and I entirely agree.

Having said that, there is also this: Many people prefer liquid width sites, and they won't be deterred from that preference. It is very difficult for any web designer to create a liquid width layout that is 1) xhtml valid, 2) relies on CSS and not tables, 3) looks FABULOUS in every possible screen resolution that people can come up with.

In this, Alan is correct, most designers stay away fromm liquid width because of these difficulties.

Thanks for all the comments on Alan's store, both Alan and I appreciate the feedback and we are working to improve it even more :D

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...