Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

From Tables to CSS - my new index page

Featured Replies

Hi there,

 

I have tried to change my tables based index page to a CSS based page.

 

See the current page HERE

See my CSS based Page HERE

 

The trouble is, it still looks like it is based on html tablesfool.gif .

 

My problem is that I am a 'technician' and coder with virtually no design skills at all.

Comments on the new design with regard to design/marketing would be much appreciated.

I think there is just too much information crammed in. Try trimming it down and adding some white space. Padding FTW! Th colour scheme isn't very inspiring either though. Props to you on making the change though! :)

  • Author

I think there is just too much information crammed in. Try trimming it down and adding some white space. Padding FTW! Th colour scheme isn't very inspiring either though. Props to you on making the change though! smile.gif

 

Thanks so much for the response.

 

I know you are right about the whitespace because I see it on other sites although sites like Ebay and B&Q are also crammed with information. I just wanted the home page to have a round-up of what is available on the site. I suppose it means more links and more web pages. unfortunately, won't this mean more clicks to get to what you want to know? I also want to get more 'curves' into the design.

 

PS. you can tell my age as I had to look up Props and FTW for meaning on the Web.

Hehe I'm not so young myself :)

 

Actually the thing that grates most on your website is all the dodgy little pictures everywhere. May try and invest in a smart icon set instead, get rid of the testimonials (not a big fan of those in general), get a consistant colour scheme going and get everything lining up with a nice lot of space between the elements.

Hi TopShopper

 

I find the background pattern too distracting - it makes it difficult to focus on the text and using blue for the main text colour gives it a slightly dated feel.

 

Why not have a look at what other shopping carts sites look like to get some ideas? I think this one works quite well - it has a good balance of information and uses nicely designed icons. There is an amazing range of icons on iStockphoto, and they're not too expensive.

  • Author

Hi TopShopper

 

I find the background pattern too distracting - it makes it difficult to focus on the text and using blue for the main text colour gives it a slightly dated feel.

 

Why not have a look at what other shopping carts sites look like to get some ideas? I think this one works quite well - it has a good balance of information and uses nicely designed icons. There is an amazing range of icons on iStockphoto, and they're not too expensive.

 

Yes, I have looked at different shoping cart sites and they are all very different - which makes it difficult to choose from. Thanks for directing me to "Mal's" site as this is one I like. Ah well, onwards and upwards.

  • Author

OK, so I've made it more tidy and I have ditched the blue font. Also ditched the testimonials.

Any better?

See the current page HERE

See my CSS based Page HERE

PS. you can tell my age as I had to look up Props and FTW for meaning on the Web.

 

LMAO! I LOLed on that bit!

 

Hey, no need to Google!

 

LMAO = Laughing My Ass Off, and LOLed = Laughed Out Loud ;)

 

EDIT: And about the website: Don't mean to come at your design skills, but I think this website deserves a facelift, starting with the logo.

 

It is the appearance and brand that sells the product. The identity has to be just as rock solid as the design of the website.

 

Now I am not trying to sell myself, but I think you should look for a professional designer and UX Expert (UX = User Experience) to do the job for you. I can guarantee it will be worth it in the end.

It's a massive, massive improvement.

 

But you've got a phobia I've seen many a time - Bigfatmarginophobia.

 

Take your teeny-weeny 10px edges on everything and WHACK THEM UP. Try 50px for size. You probably won't like it... then you can put it down a bit and you'll be close ;)

 

Next have a good think about typography - what are the most important words on the page? Now emphasize them. Use spacing, bold, italic and colour wisely to improve the readability of your text. People scan the page. I looked at your design for long enough to make these comments but cannot remember a single word that appeared on the page.

Edited by ErisDS

  • Author

It's a massive, massive improvement.

 

But you've got a phobia I've seen many a time - Bigfatmarginophobia.

 

Take your teeny-weeny 10px edges on everything and WHACK THEM UP. Try 50px for size. You probably won't like it... then you can put it down a bit and you'll be close wink.gif

 

Next have a good think about typography - what are the most important words on the page? Now emphasize them. Use spacing, bold, italic and colour wisely to improve the readability of your text. People scan the page. I looked at your design for long enough to make these comments but cannot remember a single word that appeared on the page.

Thank you so much ErisDS. mrchristoph earlier said about 'whitespace' but I didn't twig that it could be done by margins. Sorted out the headings and unified some images.

What do you think now?

 

See the current page HERE

See my CSS based Page HERE

Improving! But I think the software box needs some breathing space. Try to give it just as much margin-right as you've given the content.

 

Cheers!

  • Author

get rid of this its making my eyes bleed:

 

easykeyboard2.jpg

 

Awww, that's my pride and joy. So what exactly don't you like? Tacky perhaps?

  • Author

When I view this page in IE6, the widths of the left float and right float colums reduce to the width of the images. Anyone know anything about this? I'm using 'IE Tester' to view it.

  • Author

Improving! But I think the software box needs some breathing space. Try to give it just as much margin-right as you've given the content.

 

Cheers!

 

Hi, did it by shifting whole box to left by 20 pixels.

Hi, did it by shifting whole box to left by 20 pixels.

 

Looks better don't you think? But now the bottom is touching the text! Looks like you have some more pixel pushing to do! ;)

  • Author

Looks better don't you think? But now the bottom is touching the text! Looks like you have some more pixel pushing to do! wink.gif

Sorted Thanks.

  • Author

Hi

 

I think it is alot better but your logo could do with modernation to fit in with the new site.

 

I too agree that the background is distracting.

 

I also think your navigation needs to be more simple be removing the 'wood' type effect background.

 

I think the main image 'easy' computer keyboard could be better implementing, a faded blurry edge is so cheesy.

 

it's still a million times better though.

 

char

 

 

OK, that's two people that have commented on the background and the cheesy 'easy'. So what type of background would you suggest and how could I update the cheesy 'easy'. Any thoughts on the Logo?

 

Thanks Mike

Hey, you can take a look at this (the attached image) old thing I made when I worked for a studio. If you look closely you can see a really faint image in the background. I would suggest that type of effect for the cheesy easy or maybe just a stock image of a keyboard?

 

post-9028-126538777708_thumb.png

 

Here and here is some logo inspiration.

Hope that helps spark a couple of ideas! :)

  • Author

Hey, you can take a look at this (the attached image) old thing I made when I worked for a studio. If you look closely you can see a really faint image in the background. I would suggest that type of effect for the cheesy easy or maybe just a stock image of a keyboard?

 

post-9028-126538777708_thumb.png

 

Here and here is some logo inspiration.

Hope that helps spark a couple of ideas! smile.gif

Thanks for that. The logo stuff is excellent although I could have done without the music on the second site.

Yeh I see now, what I've got isn't really a logo is it. Just a mess.

There's music on the second site?! I guess I missed it :(

 

And regarding your logo, there's always room for improvement. I always see that a face lift of the identity as well as a website, boosts up sales. Or maybe it's just my personal experience?

  • Author

OK, a completely new style of background which forms a banner at the top. I think I like it. What do you think?

 

Original Here

Latest HERE

 

Hmmm, seems like it works OK in most browsers but IE7 and IE6 mess up the alignment.

It's definitely a huge improvement on your original design.

 

However I think your Navigation could do with a slight re-design, try a really subtle gradient or the 1px lines effect ( see here ).

 

Other than that nice work :)

 

 

 

  • Author

However I think your Navigation could do with a slight re-design, try a really subtle gradient or the 1px lines effect ( see here ).

 

Thanks for the link. good.gif Yes I will have a go at that. I like the 1px lines. However, won't be until Tuesday now I think.

 

Anyone any thoughts on the IE6 and IE7 problem?

  • Author

Just uploaded new site. Thanks for all your help. Still a long way to go but new site is 1000 times better than old one. Home Page . At least it is CSS based so can change layout and colours easily in future.

Create an account or sign in to comment

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.