Looking For Some Design Ideas . . . Please

I belong to an RC (radio controlled) airplane club and their website needs to be updated/revised. The site hasn't had an overhaul in several years and it is way overdue.

I am here today looking for some design ideas that while keeping it simple and easy to navigate, would give it a more current, modern look.

You can see at http://test.allvixen.com/revised/revised-2.jpg my first idea - which sucks and looks like it is out of at least the 90's maybe. I lack the design skills to give this an impressive modern look so I am hoping that some of the designers here might be willing to share a few ideas.

Thanks for looking . . .

 

Thanks for the suggestion, sarahk. I have already gone the WP route and nothing really tickled my fancy. WP really does not fit the clubs' needs so I am looking to code it myself, but thanks again.

 

What are your club needs, really? I mean, having a set list of what you need, like bulletpoints for priorities, can be a good starting point. Don't think about the actual design - if the site is properly coded, changing the design is a small task (you just change the CSS) - therefore, getting the basics right (the server-code and HTML) is a way more important task. Looking at the mock-up you posted, WordPress actually looks like a perfect fit, although it depends a bit on what is hidden behind the entries in the menu. But yeah, Wordpress can probably be made to fit your needs perfectly. The basic looks, like a front page with a sidebar - Wordpress out of the box. Events? Check. Easily updateable via admin-interface? Check. Create / update tutorials and similar items on sub-pages? Check. A page with a map? Check (easily done via plugin). So on and so on.

 

Thanks for your input, PoPSiCLe. A couple of versions ago I went the WP route and just didn't like the way it worked out. Could be that I am not real swift at modifying WP to suit a particular need. Because of that, I did the site from scratch. At that time I didn't think that it looked toooo bad. However, now when I look at it, it looks real plain and amateurish. The present site (you can see it at http://thebams.net) serves its purpose other than it needs to be made mobile friendly and from what I understand, WP can't be made to be truly mobile friendly like doing it with pure html and css.

Maybe I need to reassess my way of thinking a bit. Maybe I need to look into WP again and learn more about it so I can get it to work the way the club needs it to work. Push come to shove . . . I guess I could just clean up the code and go from there. In the mean time, I will take a look at WP again and see if I can find a theme that will suit our needs and then learn how to modify/use it for a sleek, modern look.

thanks again . . . your input is always appreciated

 

Take some really high resolution pictures of awesome looking planes in the sky. Get a responsive Wordpress theme that can easily take these images as background images and fill up the full width of the screen on any device, both desktop and mobile. That's easy to do and looks amazing.

 

According to your requirement ,

1. you should better use Wordpress design for your site,
2. create at least 1000px width site and mobile friendly.
3. Gather quality pictures

 

Well, that's not true. WP can be made mobile friendly, that's not really an issue.

Actually, looking at the code for the site, it's really not that bad. The HTML seems to be fairly decent, actually, and it's probably not that hard to modernize it a bit, and make a responsive version. I would recommend you perhaps read up a bit on responsiveness, and see if you perhaps can make something work with the code you already have, doing some minor changes, and rewriting the CSS. Have a look here to start: http://www.cutcodedown.com

@deathshadow, you wanna take a look? (Yes, I know we mentioned WP, but forget about that - the code isn't that bad - based on XHTML Strict)

 

PoPSiCLe, I agree that the code isn't too awfully bad considering I coded this about 5 years ago and not knowing anything compared to what I know now. I have been looking at the code and I do need to clean it up and make it responsive. I think I have an idea how to make it responsive, but I not 100% sure. I will give it a try as soon as the new club President (I have breaking in new Presidents - LOL) and I come to terms on the changes he wants to see. If I run into problems in making it responsive, I think I know where I might be able to find some help. HaHaHa!

Thanks again and I sure hope that deathshadow realizes that you guys mentioned the W word and not me

 

I'm actually kind-of impressed that anyone was able to bend turdpress over that much to make it their bitch, overriding 99% of the crap it tries to shove down the developers throat without so much as the common decency to give a reach-around... Whilst the presence of tags like <center> that have no business on any website written after 1997 are troublesome, if this was "greenhorn five years ago" you show a lot of promise. In fact, you've actually done something I've never seen accomplished before; hate to think how badly that must have neutered your upgrade path.

Actually, your jpeg concept (that really isn't a design) isn't THAT bad... NOT that screwing around in a paint program is web design, but there's nothing there that's not salvageable. The only reason it likely looks "dated" would be the red contrasts too much with the rest of the page colours, and the cyan isn't quite "pure" enough leaning a bit too far into the red and green. If you went for a 1:2:3 ratio blue-green for the menu, such as #248 or even #369 I think it would help pull the design together better, particularly if you went for a 0:+1:+2 ratio or 2:4:5 ratio for the header area. Opposing primary colours for backgrounds just clashes too much, and it's best to try and stay withing 45 degrees on the hue wheel to try and keep things "tied together".

When it comes to making a template for much of anything, write it without the system it's for FIRST. I don't advocate screwing around drawing pictures because IMHO content should dictate markup, and content + markup should dictate layout. Only once you have a proper semi-fluid elastic responsive design should you even THINK about colours, borders, and presentational images.

To that end, just make a standalone of each page first, so you can hammer out the layout issues without the "TP for your bunghole" mangling stuff or making it harder to test. Build progressively, write the content or a reasonable facsimile of future content without HTML in a logical order FIRST, then apply your semantic tags (everything but DIV and SPAN) to say what things are or would be in a professionally written document -- only once you have that do you start adding DIV and CSS to create your layout. I suggest starting with legacy desktop layout FIRST as you can't target that specifically with media queries, and it's easier to strip off / re-arrange things like columns and presentational garbage using media queries than it is to magically somehow create a desktop layout when there's no way to say "this is for legacy desktop not modern CSS3 browsers". (It's why I say "mobile first" design is back-assward!)

In the header, I wouldn't have BOTH the logo and the text showing at the same time. I'd hide the text under the logo image and use that extra space for something else... maybe move the menu up there, maybe work the weather plugin into that space... That "Join us" "call to action" at the bottom might fit better up there, since that's kind of an important thing assuming it would be a link. A wide image relating to the club (like a lineup of aircraft and members) with a gradient fade into the logo could also help spruce up the header. Hell, even just switching to a sky blue or a simple cloud pattern could clean that up.

Though that logo... screams 1950's gas station attendant patch. That needs help/modernization.

I would also consider making it a full width background with a restricted width content style layout. Given the nature of the content I don't think that a restricted "boxed" layout would be all that great for it. Anything you did for a background outside the content would probably feel cheap and cheesy given the subject-matter.

But again these are layout concepts it's hard to draw a picture of and are easier to just code... hence why if you're going to play around with a new design, I say write the markup and then style it -- design in the code, otherwise it's not design, it's art.

 

deathshadow . . . I took your advice and have reworked the first page for a new, more modern look and hopefully a whole lot leaner code. HTML is all of 79 lines and CSS is a whopping 113 lines.

Anyway, I am incorporating a "slider"(?) and I need to know if it can be modified to get rounded corners to match the #contentWrapper?

If it can be, how do I go about doing it? I have never tackled anything like this.

HTML is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-GB">
<head>  
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
    <title>The BAMS - Butler County's Premier Radio Control Flying Club</title>
<meta name="description" content="We welcome all who are interested in radio control flying of most any kind at Butler County's Best RC Flying Club" />
<meta name="keywords" content="radio control, rc, r/c, flying club, radio control club, radio control flying, rc flying club, r/c flying club" />
    <meta name="robots" content="index, follow" />
    <link rel="stylesheet" type="text/css" href="screen.css" media="screen" />  
  
<!-- Start WOWSlider.com HEAD section -->
<link rel="stylesheet" type="text/css" href="engine1/style.css" />
<script type="text/javascript" src="engine1/jquery.js"></script>
<!-- End WOWSlider.com HEAD section -->
      
</head>
<body>

<div id="contentWrapper">  
    <!-- Start WOWSlider.com BODY section -->
    <div id="wowslider-container1">
    <div class="ws_images"><ul>
            <li><img src="data1/images/beautiful_fall_day_for_flying.jpg" alt="Beautiful Fall Day For Flying" title="Beautiful Fall Day For Flying" id="wows1_0"/></li>
            <li><img src="data1/images/ready_for_flight.jpg" alt="Ready For Flight" title="Ready For Flight" id="wows1_1"/></li>
            <li><img src="data1/images/preparing_for_a_fall_flight.jpg" alt="Preparing For A Fall Flight" title="Preparing For A Fall Flight" id="wows1_2"/></li>
            <li><img src="data1/images/pilot_skills_demonstrated.jpg" alt="Pilot Skills Demonstrated" title="Pilot Skills Demonstrated" id="wows1_3"/></li>
            <li><img src="data1/images/enjoying_a_day_of_flying.jpg" alt="Enjoying A Day Of Flying" title="Enjoying A Day Of Flying" id="wows1_4"/></li>
            <li><a href="http://wowslider.com"><img src="data1/images/the_pros_prepare_for_flight.jpg" alt="jquery carousel" title="The Pro's Prepare For Flight" id="wows1_5"/></a></li>
            <li><img src="data1/images/thrilling_the_crowd.jpg" alt="Thrilling The Crowd" title="Thrilling The Crowd" id="wows1_6"/></li>
        </ul></div>
        <div class="ws_bullets"><div>
            <a href="#" title="Beautiful Fall Day For Flying"><span><img src="data1/tooltips/beautiful_fall_day_for_flying.jpg" alt="Beautiful Fall Day For Flying"/>1</span></a>
            <a href="#" title="Ready For Flight"><span><img src="data1/tooltips/ready_for_flight.jpg" alt="Ready For Flight"/>2</span></a>
            <a href="#" title="Preparing For A Fall Flight"><span><img src="data1/tooltips/preparing_for_a_fall_flight.jpg" alt="Preparing For A Fall Flight"/>3</span></a>
            <a href="#" title="Pilot Skills Demonstrated"><span><img src="data1/tooltips/pilot_skills_demonstrated.jpg" alt="Pilot Skills Demonstrated"/>4</span></a>
            <a href="#" title="Enjoying A Day Of Flying"><span><img src="data1/tooltips/enjoying_a_day_of_flying.jpg" alt="Enjoying A Day Of Flying"/>5</span></a>
            <a href="#" title="The Pro's Prepare For Flight"><span><img src="data1/tooltips/the_pros_prepare_for_flight.jpg" alt="The Pro's Prepare For Flight"/>6</span></a>
            <a href="#" title="Thrilling The Crowd"><span><img src="data1/tooltips/thrilling_the_crowd.jpg" alt="Thrilling The Crowd"/>7</span></a>
        </div></div><div class="ws_script" style="position:absolute;left:-99%"><a href="http://wowslider.com/vi">jquery image slider</a> by WOWSlider.com v8.2</div>
    <div class="ws_shadow"></div>
    </div>  
    <script type="text/javascript" src="engine1/wowslider.js"></script>
    <script type="text/javascript" src="engine1/script.js"></script>
    <!-- End WOWSlider.com BODY section -->

<div class="colmask leftmenu">
    <div class="colleft">
        <div class="col1">
            <center><h2>Welcome To The BAMS R/C Flying Club</h2></center>
            <p>If you are interested in building or flying fixed wing, radio control (R/C) aircraft or just enjoy great company, then you have come to the right place! The BAMS (Butler Aircraft Modelers Society) is an excellent club to help you get started in this hobby.
            If you are already a pilot, you will find The BAMS to be a very diverse group of pilots who are interested in the many different facets of this wonderful hobby. To us, there is no more satisfying sense of accomplishment than seeing the creation that you built fly for the first time! All of our members enjoy the hobby and enjoy spending time and sharing their experience and know-how with others that are interested too.</p>
            <p>
            The simple truth of the matter is that you just will not find a friendlier group of fliers anywhere.</p>
            <p>
            Unlike some of the other clubs around, we offer an excellent training program during the warmer months if you are new to the sport of R/C. Because we know how difficult and expensive it can be to try to learn to fly on your own, we do everything we can to teach, support and assist new pilots. We believe that in order to truly enjoy this hobby/sport, you need to learn to not only to fly safely, but to build and maintain your aircraft. And you can always count on our members to help out when yo need it.</p>
            <p>
            Please take a few minutes to browse around our website and get to know a little about our club. If you are interested in learning more about radio controlled airplanes, feel free to visit us at the field. We invite you to join our club and enjoy some fun with us along with the benefits of being a member of The BAMS!</p>
            <p>
            Our handicap accessible, park-like field is just north of Butler, located between Routes 308 and 38. It features large beautiful grass runways, a covered pavilion with picnic tables, and full restroom facilities. We utilize the field for more than just flying. Our members fly year-round and during the flying season, we conduct monthly business and membership meetings at the field. We also hold monthly picnic's for our members and their families.</p>
            <p>
            If you would like to come out and visit with us, click here for a map to our field.</p>
            <p>
            Again, if you want to learn to safely operate and fly radio controlled airplanes, join The BAMS and get the training you need. Take part in our new pilot training program that is second to none. Our training starts in May of each year.</p>
            <p>
            If you would like to participate in our training program or just want more information, please feel free to contact Club President, Carl McCall, by email at corg@netzero.net and he will get you signed up and ready to start flying.</p>
            <!-- Column 1 end --></div>
      
        <div class="col2">
            <div class="sideMenu">
                <?php include("nav-menu.php"); ?>
                <br>
                <span style="display: block !important; padding-left: 6em; width: 215px; text-align: center; font-family: sans-serif; font-size: 12px;"><a href="http://www.wunderground.com/cgi-bin/findweather/getForecast?query=zmw:16061.1.99999&bannertypeclick=wu_travel_plane1" title="West Sunbury, Pennsylvania Weather Forecast" target="_blank"><img src="http://weathersticker.wunderground.com/weathersticker/cgi-bin/banner/ban/wxBanner?bannertype=wu_travel_plane1&pwscode=KPABUTLE3&ForcedCity=West Sunbury&ForcedState=PA&zip=16061&language=EN" alt="Find more about Weather in West Sunbury, PA" width="215" /></a><br><a href="http://www.wunderground.com/cgi-bin/findweather/getForecast?query=zmw:16061.1.99999&bannertypeclick=wu_travel_plane1" title="Get latest Weather Forecast updates" style="font-family: sans-serif; font-size: 12px" target="_blank">Click for weather forecast</a></span></span>
            <!-- end .sideMenu --></div>
        <!-- end col2 --></div>

<!-- end contentWrapper --></div>

</body>
</html>

Code (markup):

CSS is:

body {
    margin: 0;
    padding: 0;
    border: 0;  
    width: 100%;
    background: #88A0BB;
    min-width: 600px;
    font-size: 110%;
}
a {
    color: #000;
}
a:hover {
    color: blue;
    text-decoration: none;
}
h1, h2, h3 {
    margin: .8em 0 .2em 0;
    padding: 0;
}
h2 {font-size: 36px;}
p {
    margin:.4em 0 .8em 0;
    padding-top: 20px;
    font-size: 110%;
}

#contentWrapper {
    max-width: 60em;
    margin: 0 auto;
    overflow: hidden;
    background: #FFF;
    -webkit-box-shadow:
        0 0 1px 1px #000,
        0 0 1.5em 0.1em #321;
    box-shadow:
        0 0 1px 1px #000,
        0 0 1.5em 0.1em #321;
    -webkit-border-radius:
        1em;
    border-radius:
        1em;
}

/* column container */
.colmask {
    position:relative;    /* This fixes the IE7 overflow hidden bug */
    clear:both;
    float:left;
    width:60em;            /* width of whole page */
    overflow:hidden;        /* This chops off any overhanging divs */
}
/* common column settings */
.colright,
.colmid,
.colleft {
    float:left;
    width:100%;
    position:relative;
}
.col1,
.col2,
.col3 {
    float: left;
    position: relative;
    padding: 40px 0 1em 0;
    overflow: hidden;
}
/* 2 Column (left menu) settings */
.leftmenu {
    background: #FFF;
}
.leftmenu .colleft {
    right: 75%;
    background: #FFF;
}
.leftmenu .col1 {
    width: 62%;
    left: 107%;
    top:  1empx;
    padding-bottom: 3em;
}
.leftmenu .col2 {
    width: 18em;
    left: 5.5em;
    top: 1em;
    padding-left: 1em;
    background: url("/revised/images/logo.jpg") no-repeat;
}

.sideMenu ul {
padding: 6em 0 0 3em;
width: 12em;
list-style-type: none;
}

.sideMenu ul li a {
text-decoration: none;
color: #000;
padding: 1em;
background-color: #FFF;
display: block;
}

.sideMenu ul li a:visited {
color: #000;
}

.sideMenu ul li a:hover, .sideMenu ul li .current {
color: #000;
font-weight: bold;
background-color: #E7E7E7;
}

Code (markup):

Once I get the corners rounded on the 'slider', then I am going to tackle making it responsive. I think I am getting a general idea of how that works, but I won't know until I try.

And if you want to have a look at the site, you can see it at http://thebams.net/revised/index.php

Thanks . . .

 

Since the slider is rewriting the code a bit, I think you will need to do something like this in your CSS:

.ws_images > div:not(.ws_controls,.ws-title-wrapper) { border-radius: 1.8em 1.8em 0 0; }

Code (markup):

It basically sets rounded corners on top of each <div> directly under .ws_images, but not on the controls (the buttons) and the title of the image (text).

 

Thanks PoPSiCLe . . .

I plugged your suggestion into my CSS and I am sad to report that it didn't work. Or I did something wrong. Below is where I added it to my CSS.

#contentWrapper {
    max-width: 60em;
    margin: 0 auto;
    overflow: hidden;
    background: #FFF;
    -webkit-box-shadow:
        0 0 1px 1px #000,
        0 0 1.5em 0.1em #321;
    box-shadow:
        0 0 1px 1px #000,
        0 0 1.5em 0.1em #321;
    -webkit-border-radius:
        1em;
    border-radius:
        1em;
}

.ws_images > div:not(.ws_controls,.ws-title-wrapper) { border-radius: 1.8em 1.8em 0 0; }

/* column container */
.colmask {
    position:relative;
    clear:both;
    float:left;
    width:60em;
    overflow:hidden;
}

Code (markup):

Since this is way out of my league, I would appreciate anything else you might suggest to fix this, otherwise I am just going to use squared off corners - which I really don't want to do, but will if I have to.

Thanks for your input . . .

 

Ah, I might have done a boo-boo. Try this:

.ws_images > div:not(.ws_controls):not(.ws-title-wrapper) { border-radius: 1.8em 1.8em 0 0; }

Code (markup):

And put it at the very end of the CSS-file, to be sure you don't paste it before other rules pertaining to the same elements.

 

Well PoPSiCLe . . .

I put this as the last line of my CSS and my corners are still square.

Don't want to have to do this, but I think I am just going to do away with the rounded corners so that the images in the slider will look right.

Thanks so much for your help . . .

 

My advice, lose the bloated stupid bandwidth wasting slider crap.... that type of artsy-fartsy bullshit might be visually impressive, but it can also piss off or even drive away visitors -- PARTICULARLY if you have it as the first bloody content on the site pushing the ACTUAL content clear below the fold.

Adding a slider where you are is a step backwards a thousand-fold. Particularly one as ineptly coded as that one. If any slider makes you hard-code into the markup the little circle selectors? It's rubbish!

But then all sliders are rubbish that don't belong on LEGITIMATE websites. ESPECIALLY before you even have your bloody H1.

Side note, there's STILL no such thing as a <center> tag. You want something centered, do it in the stylesheet!

IMHO you've taken colossal steps BACKWARDS!

 

Here is my situation. As ya'll know I am not a designer. Hell! I am not much of a coder either, but I have a new club President that is in his 70's and doesn't seem to know a whole lot about computers or the Internet in so much as to how a decent website should work. If I said that right. For what its worth, I do believe that my way of thinking when it comes to websites is frozen in the 80's and 90's. I am working on trying to change that, but it's tough teaching an old dog new tricks. LOL

Anyway, because I lack the skills to design an appealing, eye-catching website, I do what I can with what I have. Unfortunately, the current look of the website - including the slider - is what tickles the new club President. Because I don't have the knowledge to offer him any better alternatives, what you see at thebams.net/revised.index.php is the best I can offer based on his requirements.

No excuses . . . just a lack of experience and knowledge.

I do realize that this is not ideal, but it is what satisfies the new Pres. That is why I came here looking for some design advice. I needed, and still do, any ideas that would make for a visually impressive type of site. If you take a look at most of the other r/c flying clubs websites, this one looks damn good.

But . . .

This page is not the final product. Once I had everything else the way it needs to be, I had planned on asking your help in getting the <H1> to work the way it is suppose to when the screen is reduced. I tried my hand at in the beginning, but just turned it into a cluster f$%k. So I bypassed it and went at it just for desk top initially. If that makes sense.

Yeah! I know. I know. I guess I missed that when I was re-working the code. Shame on me! Want me to take a time out and stand in the corner? LOL

So . . .

I feel like I am stuck between a rock and hard place with this particular task. I am still learning and still getting frustrated. I am about to the point with this task of telling my club where to shove this website.

The main reason that I keep coming back to this site is because the advice and help I receive has been excellent from day one. I know that if I complete a task and get it right ya'll will let me know. I know that if I screw something up ya'll will let me know that in no uncertain terms as well. When I am reach the point of throwing in the towel, ya'll offer words of encouragement and this something I really never expected.

Sorry for ranting, but I have about reach the point of chucking this whole project. Maybe this frustrated old Marine needs to hit the local watering hole and tie on a good one. Maybe I just need to figure out how to get out of the 80's and 90's.

Uggggghhhh!!!!!!

Over and out!

 

I don't think it's as bad as @deathshadow thinks The look of the site is at least way more modern now, than it was before. Not entirely 2016, perhaps, but then again, your clubmembers might not be that modern themselves

 

Well . . . at least it doesn't look like its still stuck in the 80's. LOL

And you're right . . . the club members are NOT that modern themselves. LOL