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.

Fitness Site re-design

Featured Replies

Hi everybody,

 

I hope that you are all well.

 

I wanted to post the re-design of my fitness site here, http://www.supremefitnessequipment.com . It is the first complete site I have done with divs and css, so be gentle!

 

I just wanted some feedback on ease of use, design etc. I have also been informed that in IE 7 the logo at the top appears way over to the right and covers the search box. If anyone has any ideas on how to fix this, I would be very appreciative.

 

Also, I am aware all links in the nav bar don't work yet, I am finishing those pages as we speak but the treadmills and cross trainers pages are active.

 

Thank you everyone

 

David

Hi David

 

I really like your design. It looks very clean is easy to navigate.

 

My only suggestions would be:

 

(i) Consider using less bright shades for the logo and changing the font/text-color of the main navigation bar (as it is a little difficult to read these items).

 

 

(ii) Perhaps reduce the size of the side bar where the adverts are. There is a huge amount of whitespace under the fitness equipment writing. The side bar sections could be split into little groups and displayed in a set space using a javascript rotation.

 

 

From a personal design point of view I would change the default color from a visited link to your standard setting and get rid of the dotted border around any links when they are clicked.

 

I have had a look at the HTML and CSS and made some changes to the main html, header1.css and menu.css. These are enclosed.

 

I had placed the logo and the form inside the header div and changed the CSS accordingly. I floated the logo and the form wraps around it. I then tried to mimick your original locations for the logo and the input. After doing I noticed the menu was below where I expected it to be so I make a couple of tweaks to its CSS too (changing the top from 50 to 20).

 

The HTML suggestions:

 

<div id="header">

<div id="SFELogo"><img src="Images/SFE-Logo.jpg" /></div>

<div id="form"><form action="sphider-1.3.4/search.php" method="get">

<input type="text" name="query" id="query" size="30" value="">

<input type="submit" value="Search">

<input type="hidden" name="search" value="1">

</form>

</div>

</div>

 

The header1.css suggestions:

#header {

width: 850px;

height: 143px;

margin-top: 5px;

margin-left: 5px;

background-image: url(Images/header-bar.gif);

}

 

#SFELogo {

width: 420px;

height: 110px;

z-index: 100;

float: left;

margin-top: 16px;

}

#form {

 

margin-left: 480px;

z-index: 100;

}

#query {

margin-top: 40px;

}

#container {

width: 850px;

}

 

Menu.css:

ul#topnav {

height: 36px;

margin: 0;

padding: 0;

width: 850px;

list-style: none;

position: relative;

top: 20px;

left: 0px;

}

 

Hope that helps,

 

Paul

index.htm

header1.css

menu.css

...isn't this site great (WDF) - and you've made a great start here.

 

I've tidied up a few things at the top of the page and in the logo. You could have a slogan above the product matrix, as it doesn't look quite right going straight into pictures for some reason.The page sort of peters out as you go down. Try to keep the energy of the design up all the way to the bottom of the page.

 

Sport.png

Hi David,

 

I don't like it. It looks very basic, looks like many other fitness equipment sites (i.e. like most of these http://www.google.co.uk/search?q=fitness+equipment&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:en-GB:official&client=firefox-a), the font, colours and layout are all wrong.

 

As someone looking for sports equipment, I would see that site, not like it, then move onto another site that looks and functions better such as http://www.wiggle.co.uk/

  • Author

hey guys,

 

Thank you so much for the comments and also the help in altering files, that is very kind of you.

 

Scifunk: Over time, the content will be filled in there, more text pictures etc. What is there currently wsa copied over from the previous design so I will be looking to fill that out more over the coming months. I also love the header improvements, the search box for example. Is there any way you could send me/instruct me as to how you have done that? or are they the changes made by PaulB? I havent had a chance to download his files and try them yet.

 

Paul thank you by the way for doing that. It really helps me out.

 

Techboy, I also appreciate your comment. For me personally, I looked a the site you mentioned and I am not a big fan of it. For me. it looks far too busy and there is too much going on. I realise my site does not differ greatly from those you refer to, but they are the leading optimised sites so they must have some good qualities.

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.