Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Post Please review this site!

    Hi, I built this site for a local Pilates Studio in my area. Please HONESTLY tell me what you think of the color scheme the layout and the functionality. Please let me know if you have any suggestions. Thanks in advance!


    website: www.pilatesnharmony.com


  • #2
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Oh and I built this site from scratch.

  • #3
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,872
    Thanks
    6
    Thanked 1,029 Times in 1,002 Posts
    Hmm, I appreciate your effort and would like to say how awesome your website is but I do see a number of problems.

    The very first thing I noticed was how I was greeted with an error message that the website requires JavaScript and I should enable it. For one, when I actually allowed scripts from your domain and saw the actual website I was wondering why this basic site would require JS at all since all you do on most of the pages is just display text and images. So there is problem #1: You prevent anyone without JS from viewing the site even though it’s not even required on most pages.

    Secondly, don’t tell people what to do. Visitors probably come to get information about your pilates studio so just provide that info. They don’t come for the awesome visual and aural effects, they come for info on pilates lessons, they come for contact info, they come for a schedule or whatever. Of course, an appealing grapical design can support the content so that people like to read and browse but in the end it’s the information they come for. And for plain information there is no need to 1) require JavaScript and 2) tell people to enable it or forget about it. The thing is that it’s not always the visitor’s choice to enable JS. Some browse from work where an overly careful IT department has disabled JS for everyone, some browse from mobile devices where JS either isn’t supported or they want to save bandwidth. Some browse with very old browsers that choke on too much JS. So, don’t tell people to enable JS, provide the information for anyone without much hassle. JS is there to enhance an already working and fully functional website, not to break a website.

    Next turn-off is that popup window that comes up on the home page. What’s the point? I mean, splash pages have been a useless, superfluous additional step in accessing a website for at least 10 years. But you even have a popup window (I’m wondering why my browser is not blocking it in the first place) that asks me to “click ‘enter site’ to begin” while the actual website is already open in the background. You could very easily integrate the scanty information on the index page itself.

    Then the sound. Man, do I feel pulled back into the ’90s. Background sound on a website is being considered very annoying by many people (including me). OK, at least you don’t have “Deathpunkmetalcore” and you have a switch to switch it off immediately. But the next annoying thing is that it starts over again everytime I change the page and I have to switch it off again. I’d suggest having no sound by default and offering the choice to enable it.

    Also, your website is much too wide for my browsing habits – and my laptop screen in general. But the major problem is not the horizontal scrollbar, it’s the fact that the left column is cut off and I can’t read the content properly, and I am already at the very left with the scrollbar.
    I see that the actual container is just 776px wide which is the perfect width but you have positioned these sidebar items with a negative value so for my 1280×800 display (and my usual viewport width of around 1000px) it goes off screen. You should think of another way to achieve a three column layout. You could also use CSS media queries to apply different styles to different viewport sizes.

    So, these are the things that come up on first sight. And it’s just about the plain basic functionality of your site. I haven’t gotten into the design part but I’ll have to do that some other time. Let me just say that you forgot to specify a page background color, text color, and general font family. People can set their own colors and fonts in their browser unless you specifically set them in your stylesheet, so don’t assume that everybody has the same default white as background and the same fonts as default that you have. I, for example, have a slight yellowish background and your site looks weird with that.

  • Users who have thanked VIPStephan for this post:

    web_monkey (01-06-2012)

  • #4
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Wow. Thank you for the quick and lengthy reply! I am on the road now. I'll send a reply back tonight around 11 EST. Thanks again!!

  • #5
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hey! Ok. Just got home.

    1. The Javascript error: The reason why I have that is because the online schedule that this company uses is MindBody and in order to use that scheduler it requires Javascript. There is nothing I can do about the online schedule, it is an outside company they purchased from. So I figured why pass the user through the website if the main function of the site is so they see the information and see the online schedule. So I just display basic info with the option to print the PDF schedule instead.
    In addition to this the nav bar and the scrolling photos on the site requires JS as well.

    2. The Pop Up: I was thinking the exact same thing the other day... haha. Thanks. Will delete it.

    3. The Music: I was also thinking about this as well. I think I might just leave it for the first page and not include it in the others... OR is there a way where I could dynamically show the switch button for the music on every page but have it save the users option wether to play or not? Like maybe, have it in another frame or something, so when the user reloads the page that switch doesn't reload?
    Here is the code for the AJAX loaded music script I use:
    Code:
    <div id="switch">
    <table>
    <tr>
    <td>
    <font color="#000000">Sound</font> 
    </td>
    <td>
     <div class="left" id="1"></div>
     <div id="ajax"><embed src="http://pilatesnharmony.com/music/PNH-website-music.mp3" autostart="true" loop="true" hidden="true"></embed> 
    </div>
    
      <script type="text/javascript">
     
        $('#1').iphoneSwitch("on", 
         function() {
           $('#ajax').load('on.html');
          },
          function() {
           $('#ajax').load('off.html');
          },
          {
            switch_on_container_path: 'http://pilatesnharmony.com/images/iphone_switch_container_off.png'
          });
          
      </script>
    </td>
    </tr>
    </table>
    </div>
    The "on.html" just contains the music to be played. The "off.html" is just an empty file (so the music stops).

    4. Dimensions: YES! I noticed that, but I'm not really quite sure what to do. I will look at that link you gave me. BUt if helps here is my css for the page...
    Code:
    <style type="text/css">
    body
    {
    	background-image: url('images/BG-gradient.jpg');
    	background-repeat: repeat-x;
    	background-color: #FFFFFF;
            color: #000000;
    	font-family:Verdana, Geneva, sans-serif;
    }
    
    
    
    #container {
    width: 776px;
    top: 0px;
    left: 0px;
    right: 0px;
    margin: 0 auto;
    background: #ffffff;
    margin-top: -10px;
    padding: 0px 0px 0px 0px;
    /* ROUNDED BOTTOM
    -moz-border-bottom-right-radius: 15px;
    -moz-border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
    */
    -moz-box-shadow:1px 2px 20px rgba(0,0,0,.75); 
    -webkit-box-shadow:1px 2px 20px rgba(0,0,0,.75); 
    box-shadow:1px 2px 20px rgba(0,0,0,.75); 
    
    }
    
    /*
     *
     * 	HOLIDAY PURPOSES ONLY
     *
    
    #holiday {
    
    background-image: url('images/lrg_Icicles.gif');
    background-repeat: repeat-x;
    filter:alpha(opacity=90); 
    -moz-opacity:.90; 
    opacity:.90;
    z-index: 3;
    position: relative; top: 195px; left: 10px;
    margin-top: -200px;
    height: 200px;
    width: 756px;
    
    
    
    }
    
    
    #holiday2 {
    
    background-image: url('images/lrg_Icicles2.gif');
    background-repeat: repeat-x;
    -moz-transform: scaleX(-1);
            -o-transform: scaleX(-1);
            -webkit-transform: scaleX(-1);
            transform: scaleX(-1);
            filter: FlipH;
            -ms-filter: "FlipH";
    filter:alpha(opacity=70); 
    -moz-opacity:.70; 
    opacity:.70;
    z-index: 701;
    position: absolute; top: 380px;
    height: 200px;
    width: 776px;
    
    }
    
    *
    *
    *
    */
    
    #connectlinks {
    position: relative; float: right; top: -40px; margin-right: 30px;
    color: #ffffff;
    
    }
    
    #connectlinks a {
    background-color: none;
    padding: 10px 0px 0px 0px;
    display: inline;
    border: none;
    opacity: 0.5;
    filter: alpha(opacity=50);
    
    }
    #connectlinks a:hover {
    background-color: none;
    opacity: 1.0;
    filter: alpha(opacity=100);
    
    }
    #connectlinks a:active {
    
    
    }
    
    #gift {
    background-image: url('images/ghealth.gif');
    background-repeat: no-repeat;
    position: relative; float: right;
    left:270px;
    top: 380px;
    width: 230px;
    height: 83px;
    padding: 10px;
    margin-bottom: -140px;
    
    
    }
    
    #content
    {
    	z-index: 2;
    	padding: 10px;
    	border: none;
    	clear: both;
    }
    #schedulelink a {
    border: 1px solid #cfcfcf;
    -moz-border-top-left-radius: 5px;
    -moz-border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    -moz-border-top-right-radius: 5px;
    -moz-border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    background-image:-moz-linear-gradient(0% 40px 90deg, #e5e5e5, #ffffff); background-image:-webkit-gradient(linear, 0% 0%, 0% 50%, from(#ffffff), to(#e5e5e5));
    -moz-box-shadow:1px 2px 20px rgba(0,0,0,.10); 
    -webkit-box-shadow:1px 2px 20px rgba(0,0,0,.10); 
    box-shadow:1px 2px 20px rgba(0,0,0,.30); color: #595959;
    text-shadow: 0px 2px -3px #ffffff;
    color: #595959;
    text-decoration: none;
    text-align: center;
    padding: 10px;
    }
    
    #schedulelink a:hover {
    border: 1px solid #cfcfcf;
    -moz-border-top-left-radius: 5px;
    -moz-border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    -moz-border-top-right-radius: 5px;
    -moz-border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    background-image:-moz-linear-gradient(0% 90px 90deg, #ffffff, #e5e5e5); background-image:-webkit-gradient(linear, 0% 0%, 0% 130%, from(#e5e5e5), to(#ffffff));
    -moz-box-shadow:1px 2px 20px rgba(0,0,0,.0); 
    -webkit-box-shadow:1px 2px 20px rgba(0,0,0,.0); 
    box-shadow:1px 2px 20px rgba(0,0,0,.0);
    text-shadow: 0px 2px -3px #ffffff;
    color: #595959;
    text-decoration: none;
    }
    #schedulelink a:active {
    border: 1px solid #cfcfcf;
    -moz-border-top-left-radius: 5px;
    -moz-border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    -moz-border-top-right-radius: 5px;
    -moz-border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    background-image:-moz-linear-gradient(0% 160px 90deg, #ffffff, #05E9FF); background-image:-webkit-gradient(linear, 0% 0%, 0% 170%, from(#05E9FF), to(#ffffff));
    -moz-box-shadow:1px 2px 20px rgba(0,0,0,.10); 
    -webkit-box-shadow:1px 2px 20px rgba(0,0,0,.10); 
    box-shadow:1px 2px 20px rgba(0,0,0,.10); 
    text-shadow: 0px 1px -3px #ffffff;
    color: #595959;
    text-decoration: none;
    }
    
    #facebook {
    position: relative; float: right;
    left:250px;
    top: 480px;
    margin-bottom: -300px;
    }
    #features {
    width: 230px;
    position: relative; float: left;
    left: -255px;
    top: 195px;
    margin-bottom: -700px;
    border: 1px solid #d3d3d3;
    padding: 10px;
    -moz-border-top-left-radius: 15px;
    -moz-border-bottom-left-radius: 15px;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
    -moz-box-shadow:1px 2px 20px rgba(0,0,0,.30); 
    -webkit-box-shadow:1px 2px 20px rgba(0,0,0,.30); 
    box-shadow:1px 2px 20px rgba(0,0,0,.30); 
    background-image:-moz-linear-gradient(0% 40px 90deg, #00ffff, #ffffff); background-image:-webkit-gradient(linear, 0% 0%, 0% 20%, from(#ffffff), to(#00ffff)); 
    z-index: 1;
    }
    #maillist {
    width: 168px;
    position: relative; float: left;
    left:-191px;
    top: 0px;
    margin-bottom: -300px;
    border: 1px solid #d3d3d3;
    padding: 10px;
    z-index: 10;
    -moz-border-top-left-radius: 15px;
    -moz-border-bottom-left-radius: 15px;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
    -moz-box-shadow:1px 2px 20px rgba(0,0,0,.10); 
    -webkit-box-shadow:1px 2px 20px rgba(0,0,0,.10); 
    box-shadow:1px 2px 20px rgba(0,0,0,.10); 
    background-image:-moz-linear-gradient(0% 40px 90deg, #f2f2f2, #ffffff); background-image:-webkit-gradient(linear, 0% 0%, 0% 20%, from(#ffffff), to(#f2f2f2)); 
    }
    #spanish {
    position: relative; float: right;
    left:300px;
    top: 10px;
    margin-bottom: -140px;
    background-image: url('images/spanish.png');
    background-repeat: no-repeat; 
    width: 251px;
    height: 140px;
    z-index: 10;
    }
    #switch
    {
    position: relative; float: left;
    top: -40px;
    margin-left: 10px;
    z-index: 20;
    
    }
    #interviews {
    clear: both;
    -moz-border-top-right-radius: 15px;
    -moz-border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    border-top-left-radius: 15px;
    
    background-image:-moz-linear-gradient(0% 40px 90deg, #00ffff, #00eeee); background-image:-webkit-gradient(linear, 0% 0%, 0% 20%, from(#00eeee), to(#00ffff)); 
    padding: 10px;
    border: 1px solid #d3d3d3;
    margin-bottom: 15px;
    }
    
    #interviewbutton {
    clear: both;
    margin-bottom: 15px;
    opacity: .75;
    filter: alpha(opacity=75);
    transition: all 0.25s ease-in-out;
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    }
    
    #interviewbutton:hover {
    clear: both;
    margin-bottom: 15px;
    opacity: 1.00;
    filter: alpha(opacity=100);
    transition: all 0.25s ease-in-out;
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    }
    
    #footer {
    clear: both;
    -moz-border-top-right-radius: 15px;
    -moz-border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    border-top-left-radius: 15px;
    
    background-image:-moz-linear-gradient(0% 40px 90deg, #e6e4ed, #ffffff); background-image:-webkit-gradient(linear, 0% 0%, 0% 20%, from(#ffffff), to(#e6e4ed)); 
    height: 230px;
    border-top: 1px solid #d3d3d3;
    width: 100%
    }
    
    #footer a {
    background-color: none ;
    text-decoration: none;
    padding: 0px;
    color: #761a8b;
    -moz-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow:1px 2px 20px rgba(0,0,0,.0); 
    -webkit-box-shadow:1px 2px 20px rgba(0,0,0,.0); 
    box-shadow:1px 2px 20px rgba(0,0,0,.0); 
    }
    #footer a:hover {
    background-color: none ;
    text-decoration: none;
    color: #000000;
    padding: 0px;
    -moz-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    border-radius: 3px;
    -moz-box-shadow:1px 2px 20px rgba(0,0,0,.10); 
    -webkit-box-shadow:1px 2px 20px rgba(0,0,0,.10); 
    box-shadow:1px 2px 20px rgba(0,0,0,.10); 
    /*
    -moz-box-shadow:2px 2px 20px rgba(0,0,0,.75); 
    -webkit-box-shadow:2px 2px 20px rgba(0,0,0,.75); 
    box-shadow:2px 2px 20px rgba(0,0,0,.75); 
    */
    }
    #footer a.sub {
    background-color: none ;
    text-decoration: none;
    padding: 0px;
    color: #000000;
    border: 0px outset #d3d3d3;
    -moz-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    border-radius: 0px;
    -moz-box-shadow:1px 2px 20px rgba(0,0,0,.0); 
    -webkit-box-shadow:1px 2px 20px rgba(0,0,0,.0); 
    box-shadow:1px 2px 20px rgba(0,0,0,.0); 
    }
    
    #footer a:hover.sub {
    background-color: none ;
    text-decoration: underline;
    padding: 0px;
    color: #ffffff;
    border: 0px outset #d3d3d3;
    -moz-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    border-radius: 0px;
    -moz-box-shadow:1px 2px 20px rgba(0,0,0,.0); 
    -webkit-box-shadow:1px 2px 20px rgba(0,0,0,.0); 
    box-shadow:1px 2px 20px rgba(0,0,0,.0); 
    }
    
    
    .info {
    background-color: none;
    float: right;
    margin-left: 10px;
    padding-left: 20px;
    padding-top: 0px;
    
    height: 200px;
    width: 200px;
    margin-top: -199px;
    border-left: 1px solid #d1c7c7;
    
    }
    
    
    .infologos {
    border-top: 1px dashed #d3d3d3;
    margin-top: 10px;
    
    }
    
    #headimage {
    
    z-index: 10;
    
    }
    
    
    /*============================*/
    /*=== Custom Slider Styles ===*/
    /*============================*/
    
    #slider {
    	position:relative;
        width:776px;
        height:246px;
        margin-left:0px;
        margin-top: -22px;
    	background:url(http://pilatesnharmony.com/images/loading.gif) no-repeat 50% 50%;
    	border: 1px solid #000000;
    	z-index: 700;
    }
    #slider img {
    	position:absolute;
    	top:0px;
    	left:0px;
    	display:none;
    }
    #slider a {
    	border:0;
    	display:block;
    }
    
    
    .nivo-controlNav {
    	position:absolute;
    	left:330px;
    	bottom:-42px;
    }
    .nivo-controlNav a {
    	display:block;
    	width:22px;
    	height:22px;
    	background:url(http://pilatesnharmony.com/images/bullets.png) no-repeat;
    	text-indent:-9999px;
    	border:0;
    	margin-right:3px;
    	float:left;
    }
    .nivo-controlNav a.active {
    	background-position:0 -22px;
    }
    
    .nivo-directionNav a {
    	display:block;
    	width:30px;
    	height:30px;
    	background:url(http://pilatesnharmony.com/images/arrows.png) no-repeat;
    	text-indent:-9999px;
    	border:0;
    }
    a.nivo-nextNav {
    	background-position:-30px 0;
    	right:15px;
    }
    a.nivo-prevNav {
    	left:15px;
    }
    
    .nivo-caption {
        text-shadow:none;
        font-family: Helvetica, Arial, sans-serif;
    }
    .nivo-caption a { 
        color:#efe9d1;
        text-decoration:underline;
    }
    
    
    #sliderbottom {
    
    z-index: 703;
    
    }
    
    /*====================*/
    /*=== Other Styles ===*/
    /*====================*/
    .clear {
    	clear:both;
    }
    
    
    </style>
    * I fixed the background color, text color and font-family issue. Thanks.

    Please get back to me. Thanks.
    Last edited by web_monkey; 01-07-2012 at 04:31 AM.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •