• 0

major website makeover


Question

Hi guys!

Happy new year to all!

I'm starting on a new project at work, "website makeover", and based on what is requested from the company i thought what better way to ask a community like Neowin what they would change and improve.

Here's the website click here

Basically the company is asking me incorporate:

  • multiple shipping
  • have a "create your own basket" section
  • gift cards section
  • corporate link should require login info for clients to access it (how can i do that?)
  • add ups tracking system
  • update website visually

Thats what the company would like to see, but i know the website needs a major makeover because it is poorly designed with tables and so on, i'm almost thinking to change the entire design completely and start fresh, but I'm wondering whether doing that will cause any complications with the current store on it...

Anyways any opinions would be appreciated, as well as anything you would personally add to improve the site and have it more user friendly.

Thx in advanced!

Link to comment
Share on other sites

Recommended Posts

  • 0

From my own personal experience in web design and development, you have two options

1) If you are feeling confident that you will be able to cope with the learning curve required, then go for it and make the system yourself, *APART FROM THE PAYMENT SIDE* get something commercial for that its just not worth the risk. I mean making a system that has a basked and categories etc would be a rewarding experience in coding and the insight you will gain into the language would be great. Its just whether you will be able to cope with the pressure.

2)Get something like Wordpress, Magneto etc and work around that, you wont need to know as much and can get it done quicker.

Its up to you at the end of the day, me myself? I went with option 1. And I will tell you now I did learn a lot in doing so!

Just my 2p here :)

Link to comment
Share on other sites

  • 0

anyone ever heard of Volusion Ecommerce Shopping cart?

just found it on google and from the features available it looks pretty good....

http://www.volusion.com/ecommerce/online-store-feature-details/

any opinions or anyone ever used it?

From my own personal experience in web design and development, you have two options

1) If you are feeling confident that you will be able to cope with the learning curve required, then go for it and make the system yourself, *APART FROM THE PAYMENT SIDE* get something commercial for that its just not worth the risk. I mean making a system that has a basked and categories etc would be a rewarding experience in coding and the insight you will gain into the language would be great. Its just whether you will be able to cope with the pressure.

2)Get something like Wordpress, Magneto etc and work around that, you wont need to know as much and can get it done quicker.

Its up to you at the end of the day, me myself? I went with option 1. And I will tell you now I did learn a lot in doing so!

Just my 2p here :)

yes i agree i like the challenge so i have decided to desing the site they want something simple and clean using the same colours as the current website... i will show you guys once i have a mockup complete. that way before i move ahead with coding i can ask what improvements i should make...

Link to comment
Share on other sites

  • 0

what do you guys think of this design... looking for something simple yet creative and user friendly... any suggestions or comments bad or good are welcome :)

post-5119-0-34812000-1294847798.png

Link to comment
Share on other sites

  • 0

ok guys im kinda struggling for some reason, maybe cuz im getting interrupted every 2 mins with other stuff and cant get this coding straight

the previous website had a lot of tables, and i want to avoid that completely... so i want it to be based on css and divs ofcourse... unless thats getting outdated as well lol

Based on the design above do i need to slice the layout or can it all just be done on css since its very simple and standard...

im also having some issues with getting the grey boxes lined up correctly and i want to use javascript to have a few pics on the bigger grey box...

any help is apprecaited... i had started coding it but the IT guy restarted all comps and he didnt save me stuff unfortunately so i got nothing to post as far as coding...

thx guys!

Link to comment
Share on other sites

  • 0

ok guys im kinda struggling for some reason, maybe cuz im getting interrupted every 2 mins with other stuff and cant get this coding straight

the previous website had a lot of tables, and i want to avoid that completely... so i want it to be based on css and divs ofcourse... unless thats getting outdated as well lol

Based on the design above do i need to slice the layout or can it all just be done on css since its very simple and standard...

im also having some issues with getting the grey boxes lined up correctly and i want to use javascript to have a few pics on the bigger grey box...

any help is apprecaited... i had started coding it but the IT guy restarted all comps and he didnt save me stuff unfortunately so i got nothing to post as far as coding...

thx guys!

Divs/CSS are the standard now and will be for a while. For the grey boxes, you should have a total of 4 divs to make it simple. One div will contain the 3 boxes, each of which get a div. Focus on positioning the container div which shouldn't be to hard in that layout. Then you just have to make the three divs inside it. There is some type float though I am not sure which one it is.

<div id=container>

<div id=box1></div>

<div id=box2></div>

<div id=box3></div>

</div>

Link to comment
Share on other sites

  • 0

im having some trouble showing the white container background... if you look in pic above see the white behind the grey boxes... tahts what im talking about

here's the code im using

body {
    color: #000; 
    font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	background-color: #ebecda; 

#content {
	margin-left: auto;
	margin-right: auto;
	width: 900px;
	background-color: #FFF;
}

/* ----------CONTAINER STYLES---------- */
#container {
    width: 900px; /*MAXIMUM WIDTH OF OUR LAYOUT*/
    margin-top: 50px; /*ADDS A TOP MARGIN TO THE TOP OF OUR CONTAINER*/
    margin-right: auto; /*AUTO MARGIN*/
    margin-left: auto; /*AUTO MARGIN*/	
}

#box1 {
	float: left;
	height: 300px;
	width: 650px;
	background-color: #CCC;
	margin-right: 1px;
}

#box2 {
	float: right;
	height: 150px;
	width: 249px;
	background-color: #ccc;
	margin-bottom: 1px;
}

#box3 {
	float: right;
	height: 150px;
	width: 249px;
	background-color: #ccc;
}

Link to comment
Share on other sites

  • 0

Do you er.. have any experience with coding at all? I'm all for getting awesome projects at work to show off your experience, but it really seems you're struggling with even the basic functionality of the site, let alone the shopping cart and other features required.

Only reason I bring it up is that you're being paid for your work... yet you're coming to Neowin for help, lol.

Link to comment
Share on other sites

  • 0

haha you know what ive always struggled with coding for some reason, and neowin has always helped me...

i wasnt hired from my company as a web designer im an executive assistant but their current web designer has always been negative as far as making changes to the site.... and even i see that this website is too outdated for a company like this...

so i've offered my help, but they are aware that im not fully qualified to do this and that i would kinda get it done as i go...

thats all lol

Link to comment
Share on other sites

  • 0

haha you know what ive always struggled with coding for some reason, and neowin has always helped me...

i wasnt hired from my company as a web designer im an executive assistant but their current web designer has always been negative as far as making changes to the site.... and even i see that this website is too outdated for a company like this...

so i've offered my help, but they are aware that im not fully qualified to do this and that i would kinda get it done as i go...

thats all lol

Ah gotcha, as long as they're aware and don't care then awesome :).

I'm working right now else I'd look over your code and whip up it up to see what's the problem. I've just got enough time to reply, not really code :3.

Maybe in like 30 mins if someone else doesn't help first.

Link to comment
Share on other sites

  • 0

haha you know what ive always struggled with coding for some reason, and neowin has always helped me...

i wasnt hired from my company as a web designer im an executive assistant but their current web designer has always been negative as far as making changes to the site.... and even i see that this website is too outdated for a company like this...

so i've offered my help, but they are aware that im not fully qualified to do this and that i would kinda get it done as i go...

thats all lol

are you talking about the white space below the boxes or the lines between the boxes.

Link to comment
Share on other sites

  • 0

sounds good thx for your input :)

usually i just need that kick in the butt to get my brains going on the right track and then im able to do it you know...

the scary part is that now they got a contrat with a big company and this company wants to create an internal page within our company and have like 10 people be able to log in... its a swag site form my understand... and even after telling them that i dont know if im capable they still think i can do it and that i will figure it out lol...

im gonna have a nervous breakdown soon lol

are you talking about the white space below the boxes or the lines between the boxes.

i'm talkin about the white space that starts from above the logo up until the bottom of the page where that small logo on the right is....

Link to comment
Share on other sites

  • 0

sounds good thx for your input :)

usually i just need that kick in the butt to get my brains going on the right track and then im able to do it you know...

the scary part is that now they got a contrat with a big company and this company wants to create an internal page within our company and have like 10 people be able to log in... its a swag site form my understand... and even after telling them that i dont know if im capable they still think i can do it and that i will figure it out lol...

im gonna have a nervous breakdown soon lol

html, body {

height: 100%;

}

#container {

height: 100%;

}

that might work.

if not try adding the min-height property.

Link to comment
Share on other sites

  • 0

that seems to do the trick except it wont show white above the logo part :s tried min-height too no luck

Link to comment
Share on other sites

  • 0

Hi guys..

i got a question....

if you look at the screenshot i've attached... i cant seem to figure out why the little black dots underneath the bigger ones show.... cant seem to find out whats showing that.... it shows in both safari and chrome, but not opera.... haven't tested ie yet.

also i cant seem to get the white background to show above the brownish header... i've tried a few things but cant get it to show....

here's my css code... it might be a lil messy cuz i tried different things...

* {
    margin: 0px; /*SETS 0 MARGIN*/
    padding: 0px; /*SETS 0 PADDING*/
}

 html, body {
    color: #000; 
    font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	height: 100%;
	background-color: #ebecda; 
}

#content {
	margin: auto;
	width: 900px;
	min-height: 100%;
	background-color: #FFF;
}

/* ----------CONTAINER STYLES---------- */
#container {
    width: 900px; /*MAXIMUM WIDTH OF OUR LAYOUT*/
    margin: 0 0 5px auto; /*ADDS A TOP MARGIN TO THE TOP OF OUR CONTAINER*/
	min-height: 100%;
}

#box1 {
	float: left;
	height: 300px;
	width: 630px;
	margin-left: 20px;
	background-color: #dfdfdf;
	margin-right: 1px;
}

#box2 {
	float: right;
	height: 149px;
	width: 229px;
	background-color: #dfdfdf;
	margin-bottom: 1px;
	margin-right: 20px;
}

#box3 {
	float: right;
	height: 150px;
	width: 229px;
	margin-right: 20px;
	background-color: #dfdfdf;
}


/* ----------HEADER STYLES---------- */
#header {
	margin: auto;
	margin-top: 30px;
    height: 130px; /*ADDS A FIXED HEIGHT*/
    width: 900px; /*ADDS A FIXED WIDTH, SHOULD BE SAME AS CONTAINER*/
    background-color: #4a3a15;
}

.logo {
	float: left;
	margin-left: 15px;
	margin-top: 25px;
	margin-bottom: 25px;
}

#social {
	padding-top: 10px;
	padding-right: 10px;
}

.fb {
	float: right;
	margin-right: 5px;
}

.tw {
	float: right;
	margin-right: 5px;
}

.in {
	float: right;
}

.slogan {
	text-align: right;
	color: #FFF;
	float: none;
	margin-top: 35px;
	margin-right: 8px;
}

.bold {
	font-weight: bold;
}

/* ----------MENU STARTS HERE---------- */

 ul, li {
	font-size:10px; 
	font-family:Verdana, Arial, Helvetica, sans-serif;
	line-height:21px;
	text-align:left;
}

#menu {
	list-style:none;
	width:900px;
	margin:5px auto 0px 0px;
	height:36px;
	padding:0px 0px 0px 0px;
	/* Background color and gradients */	
	background: #FFFFFF;
	/* Borders */
	-moz-box-shadow:inset 0px 0px 1px #edf9ff;
	-webkit-box-shadow:inset 0px 0px 1px #edf9ff;
	box-shadow:inset 0px 0px 1px #edf9ff;
}

#menu li {
	float: left;
	display: block;
	text-align: center;
	position: relative;
	padding: 4px 10px 4px 10px;
	margin-right: 10px;
	margin-left: 20px;
	margin-top: 1px;
	border: none;
}

#menu li:hover {
	border: 1px solid #777777;
	padding: 4px 9px 4px 9px;
	/* Background color and gradients */
	background: #EEEEEE;
}

#menu li a {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px; 
	color: #000000;
	display: block;
	outline: 0;
	text-decoration: none;
	text-shadow: 1px 1px 1px #000;
}

#menu li:hover a {
	color: #161616;
	text-shadow: 1px 1px 1px #ffffff;
}
#menu li .drop {
	padding-right: 21px;
	background: url(../img/drop.gif) no-repeat right 8px;
}
#menu li:hover .drop {
	background: url(../img/drop.png) no-repeat right 7px;
}


.dropdown_2columns {
	margin: 4px auto;
	float: left;
	position: absolute;
	left: -999em; /* Hides the drop down */
	text-align: left;
	padding: 10px 5px 5px 5px;
	border: 1px solid #777777;
	border-top: none;

	/* Gradient background */
	background:#F4F4F4;
	background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));
	z-index: 1010;
}

.dropdown_2columns {
	width: 160px;
}

#menu li:hover .dropdown_2columns {
	left: -1px;
	top: auto;
}

#menu li:hover div a {
	font-size: 12px;
	color: #000000;
}
#menu li:hover div a:hover {
	color: #F3F;
}


.strong {
	font-weight: bold;
}
.italic {
	font-style: italic;
}

.img_left { /* Image sticks to the left */
	width: auto;
	float: left;
	margin: 5px 15px 5px 5px;
}

#menu li ul {
	list-style: none;
	padding: 0;
	margin: 0 0 10px 0px;
}
#menu li ul li {
	font-size: 10px;
	text-transform: capitalize;
	line-height: 24px;
	position: relative;
	text-shadow: 1px 1px 1px #ffffff;
	padding: 0;
	margin: 0;
	float: none;
	text-align: left;
	width: 190px;
}
#menu li ul li:hover {
	background: none;
	border: none;
	padding: 0;
	margin: 0;
}

#menu li .greybox li {
	background: #F4F4F4;
	border: 1px solid #bbbbbb;
	margin: 0px 0px 4px 0px;
	padding: 4px 6px 4px 6px;
	width: 116px;
}

#menu li .greybox li:hover {
	background:#ffffff;
	border:1px solid #aaaaaa;
	padding:4px 6px 4px 6px;
	margin:0px 0px 4px 0px;
}

/* ---------- MENU ENDS HERE ---------*/

/* -----------SLIDESHOW---------------*/

.show {
	width:600px;
	height:300px;
	position: relative;
	margin-left: 28px;
}

#slides {
	position:absolute;
	top:15px;
	left:4px;
	z-index:100;
}

#slides .next,#slides .prev {
	position:absolute;
	top:107px;
	left:-39px;
	width:24px;
	height:43px;
	display:block;
	z-index:101;
}

.slides_container {
	width:570px;
	height:270px;
	overflow:hidden;
	position:relative;
}

#slides .next {
	left:585px;
}

.pagination {
	margin:26px auto 0;
	width:100px;
}

.pagination li {
	float:left;
	margin:0 1px;
}

.pagination li a {
	display:block;
	width:12px;
	height:0;
	padding-top:12px;
	background-image:url(../img/pagination.png);
	background-position:0 0;
	float:left;
	overflow:hidden;
}

.pagination li.current a {
	background-position:0 -12px;
}

/* ------SLIDESHOW ENDS--------*/

/* ----------FOOTER STYLES---------- */

#footer {
	margin-top: 20px;
	margin-right: 10px;
	float: right;
}

post-5119-0-18983900-1295361809.png

Link to comment
Share on other sites

  • 0

thank you!!

anyone have any idea why the white background is not showing above the brownish header? its driving me nuts lol

btw any opinions or critics on the design are also appreciated.... :)

i know the nav menu is not looking the greatest right now working on implementing that a little better as i move forward....

Link to comment
Share on other sites

  • 0

Did you build the previous site?

From my (limited) experience if someone else built the previous site it would probably be best to start over as trying to do such a major overhaul of someone elses site throws up no end of complications.

Plus there is the fact its built with asp.net, you planning on using that or something different like php?

Got to agree with this. I was hired to create a dynamic job vacancies page for a client. The HTML code was really messy, I couldn't even start. Anyway, I managed to get it done after a long time. Then the client requested that I update the footer links, for EVERY single page. There were about 15-20 pages. I told him I'm willing to redesign his site. He said okay and I went ahead. I think it would've took much less time. I got rid of all the ridiculous tables and coded the entire site in HTML5.

Link to comment
Share on other sites

  • 0

anyone? :)

do you mean the white background of the container? and you want it to show above the header?

well without seeing your page i would assume the container div doesnt start till after the header.

you could move the start of the container div in your html above the header or wrap the header in a new div that starts before it and give it a white bg.

Link to comment
Share on other sites

  • 0

this is the code for the page ...css code is in a previous post...


&lt;body&gt;

&lt;div id="content"&gt;

&lt;div id="header"&gt;
	&lt;div class="logo"&gt; &lt;img src="images/logo.png" alt="Peter and Paul's Baskets" /&gt;&lt;/div&gt;

&lt;div id="social"&gt;
	&lt;div class="in"&gt; &lt;a href="http://www.linkedin.com/peterandpaulsbaskets"&gt;&lt;img src="images/Linked In-32.png" alt="LinkedIn" border="0"  /&gt;&lt;/a&gt;&lt;/div&gt;
	&lt;div class="tw"&gt; &lt;a href="http://www.twitter.com/pandpbaskets"&gt;&lt;img src="images/Twitter-32.png" alt="Twitter" border="0"  /&gt;&lt;/a&gt;&lt;/div&gt;
	&lt;div class="fb"&gt; &lt;a href="http://www.facebook.com/pandpbaskets"&gt;&lt;img src="images/Facebook-32.png" alt="Facebook" border="0" /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;/div&gt;


	&lt;div class="slogan"&gt;Don't forget to stalk us!&lt;/div&gt;

&lt;/div&gt;

&lt;div id="navigation"&gt;
	&lt;ul id="menu"&gt;

    &lt;li&gt;&lt;a href="#" class="drop"&gt;CATALOGUE&lt;/a&gt;&lt;!-- Begin Home Item --&gt;

        &lt;div class="dropdown_2columns"&gt;&lt;!-- Begin 2 columns container --&gt;
		&lt;ul&gt;
			&lt;li&gt;&lt;a href="http://www.peterandpaulsbaskets.com/simplyfabulous.html"&gt;Simply Fabulous&lt;/a&gt;&lt;/li&gt;
			&lt;li&gt;&lt;a href="http://www.peterandpaulsbaskets.com/gourmetgoodness.html"&gt;Gourmet Goodness&lt;/a&gt;&lt;/li&gt;
			&lt;li&gt;&lt;a href="http://www.peterandpaulsbaskets.com/homegrown.html"&gt;Home Grown&lt;/a&gt;&lt;/li&gt;
			&lt;li&gt;&lt;a href="http://www.peterandpaulsbaskets.com/mymothersolivesandoil.html"&gt;My Mother's Olives and Oil&lt;/a&gt;&lt;/li&gt;
			&lt;li&gt;&lt;a href="http://www.peterandpaulsbaskets.com/under60.html"&gt;Under $60&lt;/a&gt;&lt;/li&gt;
			&lt;li&gt;&lt;a href="http://www.peterandpaulsbaskets.com/holiday.html"&gt;Holiday Entertaining&lt;/a&gt;&lt;/li&gt;
		&lt;/ul&gt;
	&lt;/div&gt;
    	&lt;li&gt;&lt;a href="#"&gt;BABY&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;US BASKETS&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;INTERNATIONAL&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;SPECIALTY&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;UNIQUE GIFTS&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;CORPORATE&lt;/a&gt;&lt;/li&gt;

	&lt;/ul&gt;
&lt;/div&gt;

&lt;div id="container"&gt;
	&lt;div id="box1"&gt;
    	&lt;div class="show"&gt;	
			&lt;div id="slides"&gt;
				&lt;div class="slides_container"&gt;
					&lt;a href="http://flic.kr/p/9aXsv6" target="_blank"&gt;
                    &lt;img src="img/slide-1.jpg" width="570" height="270" alt="Slide 1"&gt;&lt;/a&gt;

					&lt;a href="http://www.flickr.com/photos/stephangeyer/3020487807/"target="_blank"&gt;
                    &lt;img src="img/slide-2.jpg" width="570" height="270" alt="Slide 2"&gt;&lt;/a&gt;

					&lt;a href="http://www.flickr.com/photos/childofwar/2984345060/" target="_blank"&gt;
                    &lt;img src="img/slide-3.jpg" width="570" height="270" alt="Slide 3"&gt;&lt;/a&gt;

					&lt;a href="http://www.flickr.com/photos/b-tal/117037943/" target="_blank"&gt;
                    &lt;img src="img/slide-4.jpg" width="570" height="270" alt="Slide 4"&gt;&lt;/a&gt;

					&lt;a href="http://www.flickr.com/photos/bu7amd/3447416780/" target="_blank"&gt;
                    &lt;img src="img/slide-5.jpg" width="570" height="270" alt="Slide 5"&gt;&lt;/a&gt;

					&lt;a href="http://www.flickr.com/photos/streetpreacher/2078765853/" target="_blank"&gt;
                    &lt;img src="img/slide-6.jpg" width="570" height="270" alt="Slide 6"&gt;&lt;/a&gt;

					&lt;a href="http://www.flickr.com/photos/aftab/3152515428/" target="_blank"&gt;
                    &lt;img src="img/slide-7.jpg" width="570" height="270" alt="Slide 7"&gt;&lt;/a&gt;
				&lt;/div&gt;
				&lt;/div&gt;
            &lt;/div&gt;
		&lt;/div&gt;

	&lt;div id="box2"&gt;test&lt;/div&gt;

    &lt;div id="box3"&gt;

    &lt;!-- Start Bravenet.com Service Code --&gt;
&lt;div align="center"&gt;
&lt;div style="border:none; width:229px; height:104px; margin:0px; background-color:#dfdfdf;"&gt;
&lt;form action="http://pub16.bravenet.com/elist/add.php" method="post" style="margin:0px;"&gt;
&lt;div style="background-color:#fdfdfd; padding:3px; font:10px arial; color:#000000; font-weight:bold;"&gt;Join our mailing list!&lt;/div&gt;
&lt;div style="margin:10px; font: 10px arial; color: #000000; text-align:left;"&gt;
&lt;div style="margin-bottom:5px;"&gt;Enter your name and email address below:&lt;/div&gt;
&lt;div style="text-align:right;"&gt;
Name: &lt;input type="text" id="elistname" name="ename" size="25" maxlength="60" style="width: 164px"&gt;&lt;br&gt;
Email: &lt;input type="text" name="emailaddress" id="elistaddress87420232500" size="25" maxlength="100" style="width: 164px"&gt;&lt;br /&gt;
&lt;span style="white-space:nowrap; float:left;"&gt;&lt;input type="radio" name="action" value="join" checked style="border: 0px;"&gt;Subscribe?&lt;/span&gt;
&lt;span style="white-space:nowrap;"&gt;&lt;input type="radio" name="action" value="leave" style="border: 0px;"&gt;Unsubscribe?&lt;/span&gt;
&lt;input type="hidden" name="usernum" style="border: 0px solid black; height: 0px; width: 0px;" value="1366430928"&gt;
&lt;input type="hidden" name="cpv"  style="border: 0px solid black; height: 0px; width: 0px;"  value="1"&gt;
&lt;input type="submit" name="submit" value="GO"&gt;&lt;/div&gt;&lt;/div&gt;
&lt;div style="color: red" id="elist_err87420232500"&gt;&lt;/div&gt;
&lt;/form&gt;
&lt;/div&gt;&lt;/div&gt;
&lt;!-- End Bravenet.com Service Code --&gt;

    &lt;/div&gt;
&lt;/div&gt;


&lt;div id="footer"&gt;&lt;img src="images/bypandplogo.gif" alt="ByPeterandPauls.com" /&gt;&lt;/div&gt;
&lt;/div&gt; 
&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;


Link to comment
Share on other sites

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.