CSS + HTML - Having trouble with a simple concept - Web Layout

Discussion in 'HTML & Website Design' started by Darius Shojaei, Jul 25, 2013.

0
  1. #1
    I'm making my first page using CSS with the 960 Grid. I'm using the 960 grid to help myself understand layouts in CSS. My problem is a simple one. Every time i try to preview my page nothing will line up. It seems as if each row is off by only 5-10px. Ive tried changing the margins of the objects, and used the prefix_1 tag (Padding-left:60px) and still the site does not line up. At first when making the code the Nav bar the top banner lined up perfectly. But as soon as i add a third and fourth row for the content area everything becomes out of wack. Please let me know what i'm doing wrong here. To my understanding the 960 grid mostly helps me define the width of objects to fit the grid correctly within 960px. Also i understand that objects appear in order left to right like reading a book. Still i'm having trouble with each row of my site not lining up on the edges. I'm making my sites using the 960 grid in Photoshop, and attempting to use the grid to place them on the site in order correctly.


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "(URL address blocked: See forum rules)">
    <html xmlns="(URL address blocked: See forum rules)">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Test Site</title>
    <link href="CSS/reset.css" rel="stylesheet" type="text/css" media="all" />
    <link href="CSS/text.css" rel="stylesheet" type="text/css" media="all" />
    <link href="CSS/style.css" rel="stylesheet" type="text/css" media="all" />
    <link href="CSS/960.css" rel="stylesheet" type="text/css" media="all" />
    </head>

    <body>
    <div class="container_12">

    <div class="grid_7 content alpha"> <!--Nav Bar-->
    <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#about">About</a></li>
    </ul>
    </div>
    <div class="grid_12"> <!--Banner-->
    <img src="Images/banner.jpg" width="948" height="329" alt="Banner" /></div></div>

    <div class="container_12">
    <div class="grid_6 content alpha">
    <img src="Images/office.jpg" width="468" height="205" /></div>
    <div class="grid_4 content push_2 omega">
    <img src="Images/Meds1.jpg" width="308" height="190" /></div>
    </div>
    <div class="clear"></div>
    <div class="container_12"><!-- Text -->
    <div class="grid_6 alpha" id="text">Lorem ipsum dolor sit amet, ius nullam fastidii eloquentiam ad, id hinc scripta erroribus vel. Oblique assueverit qui te, an nam epicuri nominati, at sit wisi dicit temporibus. Pro te nobis mediocrem quaerendum, offendit mandamus ex sit, probo timeam ex nec. Usu in munere epicurei necessitatibus. Vim ei ubique interesset, sale impedit ex sit, sea an tollit vocent. Qui tota aliquip ne, animal verterem deseruisse eam at, eum id fugit legere.</div>

    <div class="grid_4 omega prefix_1"><img src="Images/meds2.jpg" width="308" height="190" /></div>
    </body>
    </html>


    [CSS --------------------------]


    [highlight=""]ul Nav Bar
    {
    list-style-type:none;
    margin:0;
    padding:0;
    padding-top:6px;
    padding-bottom:6px;
    }
    li
    {
    display:inline;
    }
    a:link,a:visited
    {
    font-weight:bold;
    color:#000000;
    background-color:#FFF;
    text-align:center;
    padding:6px;
    text-decoration:none;
    text-transform:uppercase;
    }
    a:hover,a:active
    {
    background-color:#000000;
    color:#FFF
    }

    .content {
    margin-top: 75px;
    }
    #text {
    height: 200px;
    width: 468px;
    padding: 15px;
    }

    .right {
    right:40px
    }

    body {
    min-width: 960px;
    }

    /* `Container
    ----------------------------------------------------------------------------------------------------*/

    .container_12,
    .container_16 {
    margin-left: auto;
    margin-right: auto;
    width: 960px;
    }

    /* `Grid >> Global
    ----------------------------------------------------------------------------------------------------*/

    .grid_1,
    .grid_2,
    .grid_3,
    .grid_4,
    .grid_5,
    .grid_6,
    .grid_7,
    .grid_8,
    .grid_9,
    .grid_10,
    .grid_11,
    .grid_12,
    .grid_13,
    .grid_14,
    .grid_15,
    .grid_16 {
    display: inline;
    float: left;
    margin-left: 10px;
    margin-right: 10px;
    }

    .push_1, .pull_1,
    .push_2, .pull_2,
    .push_3, .pull_3,
    .push_4, .pull_4,
    .push_5, .pull_5,
    .push_6, .pull_6,
    .push_7, .pull_7,
    .push_8, .pull_8,
    .push_9, .pull_9,
    .push_10, .pull_10,
    .push_11, .pull_11,
    .push_12, .pull_12,
    .push_13, .pull_13,
    .push_14, .pull_14,
    .push_15, .pull_15 {
    position: relative;
    }

    .container_12 .grid_3,
    .container_16 .grid_4 {
    width: 220px;
    }

    .container_12 .grid_6,
    .container_16 .grid_8 {
    width: 460px;
    }

    .container_12 .grid_9,
    .container_16 .grid_12 {
    width: 700px;
    }

    .container_12 .grid_12,
    .container_16 .grid_16 {
    width: 940px;
    }

    /* `Grid >> Children (Alpha ~ First, Omega ~ Last)
    ----------------------------------------------------------------------------------------------------*/

    .alpha {
    margin-left: 0;
    }

    .omega {
    margin-right: 0;
    }

    /* `Grid >> 12 Columns
    ----------------------------------------------------------------------------------------------------*/

    .container_12 .grid_1 {
    width: 60px;
    }

    .container_12 .grid_2 {
    width: 140px;
    }

    .container_12 .grid_4 {
    width: 300px;
    }

    .container_12 .grid_5 {
    width: 380px;
    }

    .container_12 .grid_7 {
    width: 540px;
    }

    .container_12 .grid_8 {
    width: 620px;
    }

    .container_12 .grid_10 {
    width: 780px;
    }

    .container_12 .grid_11 {
    width: 860px;
    }

    /* `Grid >> 16 Columns
    ----------------------------------------------------------------------------------------------------*/

    .container_16 .grid_1 {
    width: 40px;
    }

    .container_16 .grid_2 {
    width: 100px;
    }

    .container_16 .grid_3 {
    width: 160px;
    }

    .container_16 .grid_5 {
    width: 280px;
    }

    .container_16 .grid_6 {
    width: 340px;
    }

    .container_16 .grid_7 {
    width: 400px;
    }

    .container_16 .grid_9 {
    width: 520px;
    }

    .container_16 .grid_10 {
    width: 580px;
    }

    .container_16 .grid_11 {
    width: 640px;
    }

    .container_16 .grid_13 {
    width: 760px;
    }

    .container_16 .grid_14 {
    width: 820px;
    }

    .container_16 .grid_15 {
    width: 880px;
    }

    /* `Prefix Extra Space >> Global
    ----------------------------------------------------------------------------------------------------*/

    .container_12 .prefix_3,
    .container_16 .prefix_4 {
    padding-left: 240px;
    }

    .container_12 .prefix_6,
    .container_16 .prefix_8 {
    padding-left: 480px;
    }

    .container_12 .prefix_9,
    .container_16 .prefix_12 {
    padding-left: 720px;
    }

    /* `Prefix Extra Space >> 12 Columns
    ----------------------------------------------------------------------------------------------------*/

    .container_12 .prefix_1 {
    padding-left: 80px;
    }

    .container_12 .prefix_2 {
    padding-left: 160px;
    }

    .container_12 .prefix_4 {
    padding-left: 320px;
    }

    .container_12 .prefix_5 {
    padding-left: 400px;
    }

    .container_12 .prefix_7 {
    padding-left: 560px;
    }

    .container_12 .prefix_8 {
    padding-left: 640px;
    }

    .container_12 .prefix_10 {
    padding-left: 800px;
    }

    .container_12 .prefix_11 {
    padding-left: 880px;
    }

    /* `Prefix Extra Space >> 16 Columns
    ----------------------------------------------------------------------------------------------------*/

    .container_16 .prefix_1 {
    padding-left: 60px;
    }

    .container_16 .prefix_2 {
    padding-left: 120px;
    }

    .container_16 .prefix_3 {
    padding-left: 180px;
    }

    .container_16 .prefix_5 {
    padding-left: 300px;
    }

    .container_16 .prefix_6 {
    padding-left: 360px;
    }

    .container_16 .prefix_7 {
    padding-left: 420px;
    }

    .container_16 .prefix_9 {
    padding-left: 540px;
    }

    .container_16 .prefix_10 {
    padding-left: 600px;
    }

    .container_16 .prefix_11 {
    padding-left: 660px;
    }

    .container_16 .prefix_13 {
    padding-left: 780px;
    }

    .container_16 .prefix_14 {
    padding-left: 840px;
    }

    .container_16 .prefix_15 {
    padding-left: 900px;
    }

    /* `Suffix Extra Space >> Global
    ----------------------------------------------------------------------------------------------------*/

    .container_12 .suffix_3,
    .container_16 .suffix_4 {
    padding-right: 240px;
    }

    .container_12 .suffix_6,
    .container_16 .suffix_8 {
    padding-right: 480px;
    }

    .container_12 .suffix_9,
    .container_16 .suffix_12 {
    padding-right: 720px;
    }

    /* `Suffix Extra Space >> 12 Columns
    ----------------------------------------------------------------------------------------------------*/

    .container_12 .suffix_1 {
    padding-right: 80px;
    }

    .container_12 .suffix_2 {
    padding-right: 160px;
    }

    .container_12 .suffix_4 {
    padding-right: 320px;
    }

    .container_12 .suffix_5 {
    padding-right: 400px;
    }

    .container_12 .suffix_7 {
    padding-right: 560px;
    }

    .container_12 .suffix_8 {
    padding-right: 640px;
    }

    .container_12 .suffix_10 {
    padding-right: 800px;
    }

    .container_12 .suffix_11 {
    padding-right: 880px;
    }

    /* `Suffix Extra Space >> 16 Columns
    ----------------------------------------------------------------------------------------------------*/

    .container_16 .suffix_1 {
    padding-right: 60px;
    }

    .container_16 .suffix_2 {
    padding-right: 120px;
    }

    .container_16 .suffix_3 {
    padding-right: 180px;
    }

    .container_16 .suffix_5 {
    padding-right: 300px;
    }

    .container_16 .suffix_6 {
    padding-right: 360px;
    }

    .container_16 .suffix_7 {
    padding-right: 420px;
    }

    .container_16 .suffix_9 {
    padding-right: 540px;
    }

    .container_16 .suffix_10 {
    padding-right: 600px;
    }

    .container_16 .suffix_11 {
    padding-right: 660px;
    }

    .container_16 .suffix_13 {
    padding-right: 780px;
    }

    .container_16 .suffix_14 {
    padding-right: 840px;
    }

    .container_16 .suffix_15 {
    padding-right: 900px;
    }

    /* `Push Space >> Global
    ----------------------------------------------------------------------------------------------------*/

    .container_12 .push_3,
    .container_16 .push_4 {
    left: 240px;
    }

    .container_12 .push_6,
    .container_16 .push_8 {
    left: 480px;
    }

    .container_12 .push_9,
    .container_16 .push_12 {
    left: 720px;
    }

    /* `Push Space >> 12 Columns
    ----------------------------------------------------------------------------------------------------*/

    .container_12 .push_1 {
    left: 80px;
    }

    .container_12 .push_2 {
    left: 160px;
    }

    .container_12 .push_4 {
    left: 320px;
    }

    .container_12 .push_5 {
    left: 400px;
    }

    .container_12 .push_7 {
    left: 560px;
    }

    .container_12 .push_8 {
    left: 640px;
    }

    .container_12 .push_10 {
    left: 800px;
    }

    .container_12 .push_11 {
    left: 880px;
    }

    /* `Push Space >> 16 Columns
    ----------------------------------------------------------------------------------------------------*/

    .container_16 .push_1 {
    left: 60px;
    }

    .container_16 .push_2 {
    left: 120px;
    }

    .container_16 .push_3 {
    left: 180px;
    }

    .container_16 .push_5 {
    left: 300px;
    }

    .container_16 .push_6 {
    left: 360px;
    }

    .container_16 .push_7 {
    left: 420px;
    }

    .container_16 .push_9 {
    left: 540px;
    }

    .container_16 .push_10 {
    left: 600px;
    }

    .container_16 .push_11 {
    left: 660px;
    }

    .container_16 .push_13 {
    left: 780px;
    }

    .container_16 .push_14 {
    left: 840px;
    }

    .container_16 .push_15 {
    left: 900px;
    }

    /* `Pull Space >> Global
    ----------------------------------------------------------------------------------------------------*/

    .container_12 .pull_3,
    .container_16 .pull_4 {
    left: -240px;
    }

    .container_12 .pull_6,
    .container_16 .pull_8 {
    left: -480px;
    }

    .container_12 .pull_9,
    .container_16 .pull_12 {
    left: -720px;
    }

    /* `Pull Space >> 12 Columns
    ----------------------------------------------------------------------------------------------------*/

    .container_12 .pull_1 {
    left: -80px;
    }

    .container_12 .pull_2 {
    left: -160px;
    }

    .container_12 .pull_4 {
    left: -320px;
    }

    .container_12 .pull_5 {
    left: -400px;
    }

    .container_12 .pull_7 {
    left: -560px;
    }

    .container_12 .pull_8 {
    left: -640px;
    }

    .container_12 .pull_10 {
    left: -800px;
    }

    .container_12 .pull_11 {
    left: -880px;
    }

    /* `Pull Space >> 16 Columns
    ----------------------------------------------------------------------------------------------------*/

    .container_16 .pull_1 {
    left: -60px;
    }

    .container_16 .pull_2 {
    left: -120px;
    }

    .container_16 .pull_3 {
    left: -180px;
    }

    .container_16 .pull_5 {
    left: -300px;
    }

    .container_16 .pull_6 {
    left: -360px;
    }

    .container_16 .pull_7 {
    left: -420px;
    }

    .container_16 .pull_9 {
    left: -540px;
    }

    .container_16 .pull_10 {
    left: -600px;
    }

    .container_16 .pull_11 {
    left: -660px;
    }

    .container_16 .pull_13 {
    left: -780px;
    }

    .container_16 .pull_14 {
    left: -840px;
    }

    .container_16 .pull_15 {
    left: -900px;
    }

    /* `Clear Floated Elements
    ----------------------------------------------------------------------------------------------------*/

    /* (URL address blocked: See forum rules)/journal/clearing-floats */

    .clear {
    clear: both;
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
    }

    /* (URL address blocked: See forum rules) */

    .clearfix:before,
    .clearfix:after,
    .container_12:before,
    .container_12:after,
    .container_16:before,
    .container_16:after {
    content: '.';
    display: block;
    overflow: hidden;
    visibility: hidden;
    font-size: 0;
    line-height: 0;
    width: 0;
    height: 0;
    }

    .clearfix:after,
    .container_12:after,
    .container_16:after {
    clear: both;
    }

    /*
    The following zoom:1 rule is specifically for IE6 + IE7.
    Move to separate stylesheet if invalid CSS is a problem.
    */

    .clearfix,
    .container_12,
    .container_16 {
    zoom: 1;
    }[/highlight]
     
    Solved! View solution.
    Last edited by a moderator: Jul 25, 2013
    Darius Shojaei, Jul 25, 2013 IP
  2. Darius Shojaei

    Darius Shojaei Peon

    Messages:
    27
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #2
    Ignore the Highlight tag. That's not in my code.
     
    Darius Shojaei, Jul 25, 2013 IP
  3. ekim941

    ekim941 Member

    Messages:
    74
    Likes Received:
    7
    Best Answers:
    7
    Trophy Points:
    33
    #3
    Take a close look at your use of div class=container_12.
    The second time you use it, you have no closing tag.
    Also, the placement of your div class="clear" seems off to me. It seems like it should be inside your container or it's pointless. Clear is designed to clear your floats, pulling the container down.
     
    ekim941, Jul 25, 2013 IP
  4. #4
    Well, I hate to break it to you, but the only thing you can learn from CSS frameworks like Grid960, blueprint, yui, bootstrap, etc, etc. is how NOT to build a website. You will learn nothing of semantics and nothing of how to actually build a layout correctly. You will however learn decade out of date half-assed practices like presentational use of classes, basically defeating the entire point of using CSS in the first place you might as well go with Mr. Peabody and his boy Sherman back to 1997 and use HTML 3.2 with tables for layout instead.

    My advice? Forget that garbage entirely and learn CSS properly.
     
    deathshadow, Jul 25, 2013 IP
  5. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #5
    It appears to me that a couple of hours after my response (to which you didn't respond and which I'd guess you didn't like) to your post here, you've cross posted on this forum. Of course you got a strongly similar response from deathshadow.

    As regards grid systems in general, and specifically in this case, I agree completely with deathshadow's take.

    cheers,

    gary
     
    kk5st, Jul 25, 2013 IP
  6. Darius Shojaei

    Darius Shojaei Peon

    Messages:
    27
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #6
    I re-posted because i noticed there was a CSS forum that i assumed this thread belonged too, and after i posted my first post i could not find it in the listings to delete.
    Thanks for the advice. After taking courses on CSS alone i decided to pick up the 960 grid because of me using grid base designs while in school. But i agree that it seems as if it's taking what i learned and attempting to dumb it down in a over-complicated way.
     
    Darius Shojaei, Jul 25, 2013 IP
  7. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #7
    There's actually a term for it "False simplicity" -- making something look simple on the surface but once you dig into it, well... you find it to be more complex than what it replaces.

    ...and you you just summed up the situation correctly, it's taking something simple, trying to simplify it more, and instead making it harder, more complex, to the point of defeating the entire reason for doing things that way in the first place.

    CSS Frameworks on the whole defeat one of the entire reasons for using CSS in the first place: eliminating presentational markup. Idiocy like:

    <div class="columnThird">

    IS PRESENTATIONAL -- and stupid since it might not be a third of the width on all media targets. It might not even be a column. You might as well use a table based layout with <TD WIDTH="33%"> for all the 'improvement' that nonsense gives you over HTML 3.2! Even without frameworks people pull this type of asshattery with things like class="red" or class="bigFont" --- which again, is just that pesky presentational HTML 3 mindset in action.

    The reason it's stupid is simple -- it might not be red on all media targets... or larger... or a column... or a third the width. HTML should say what things ARE so you can do all those different targets with the MEDIA attribute and the new media queries. The question should be WHY is it red? WHY is it bigger? What is it that makes it be a column for your screen layout?

    Grids are equally silly in concept, much less execution. They most always go hand in hand with fixed width layouts, the pinnacle of steaming pile of manure inaccessible design. Even the ones that allegedly can do responsive layout are by their very nature presentational and work (as bootstrap proves time and time again) almost as poorly on the accessibility front as a Frontpage layout from a decade and a half ago.

    There's a reason the approach I advocate for building websites is to start with content of value, mark it up semantically -- so you have a non-styled baseline that makes sense -- basically what anyone OTHER than screen (screen readers, search engines, etc) gets... THEN you progressively enhance it with CSS for your screen and print targets; using a semi-fluid elastic responsive layout. (Which is FAR simpler than these idiotic frameworks would have you believe) -- then and only then do you start up your paint program of choice to make graphics to hang on the layout. (see why dicking around making goofy pictures in photoshop is NOT sane or practical web design! EVEN if it's become an industry standard practice way to impress people who know nothing and saddle them with inaccessible train wrecks)

    You say you had schooling on this? Did they cover the WCAG? Dynamic fonts? Semi-fluid and Elastic layouts? Semantic markup? Logical document structures and how to use numbered headings and horizontal rules properly? Progressive enhancement? Graceful degradation? Most everyone I've dealt with or talked to who went for formal education on the topic usually replies with "What are those?" -- which is why I consider it silly to waste money on listening to someone NOT qualified to open their mouth on the topic for months on end for a piece of paper that in reality isn't worth a sheet of bog roll.

    Except of course people who know nothing of the topic remain under the delusion a degree or certificate actually means something.

    Sorry, am I ranting?

    General, sometimes the men can't tell when you're joking. It's not important for them to know, it's only important for me to know...
     
    deathshadow, Jul 25, 2013 IP
  8. jahidbd284

    jahidbd284 Greenhorn

    Messages:
    6
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #8
    960 grid is a popular css framework for front-end web developer. But I prefer to use Bootstrap which also based on grid system with the variety of javascript and jquary. Lol you can check it and believe that you will love it.
     
    jahidbd284, Jul 26, 2013 IP
  9. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #9
    Both take something that is simple, straightforward, and compact and turn it into a complex, bloated pile of manure all in the name of simplicity. HTML and css are already simple, and css is powerful in its own right (assuming you bother to really learn it).
     
    kk5st, Jul 26, 2013 IP
    ryan_uk and deathshadow like this.
  10. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #10
    Based on grid, laden with scripting for nothing and the idiotic garbage jquery BS.... 'love it' in the same sentence.

    You may want to do the world a favor and back the **** away from the keyboard until you understand enough HTML and CSS to do things properly.
     
    deathshadow, Jul 26, 2013 IP
  11. Darius Shojaei

    Darius Shojaei Peon

    Messages:
    27
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #11
    Technically i went to school for Graphic Design. (Which is why i understand visual elements more than script). Only recently have i wanted to switch my career field over to UI/UX design for sites and apps. I'm more into the visual style of sites/apps than you could say code. But being that i want a job in the real world i know i have to learn the code as well. My degree is in Digital Art, and ive taken classes on Web Development. I'm preferring to self-teach myself through sources like Lynda.com , YouTube, and the Web. I'm choosing to teach myself because ive learned most of my design skills on my own while in school, and found out the hard way art school can only teach you fundamentals which are great, but not real skill. Real skill is learned at home with long hours behind your desk. I finally figured out the problem i was having with the grid template, and i at-least understand the basics of how to move elements around now. I started learning with HTML and then learning CSS (beginner).
     
    Darius Shojaei, Jul 26, 2013 IP
  12. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #12
    Keep in mind, and I've not seen the exception, that there are no schools that teach graphic design for the web. All are print oriented, and the web is not print. The really hard part for you will be to realize that content comes first, then the document structure. Even the layout is dependent on the content and the site's purpose. While the graphics guy needs to be in on the development from early on, graphics are the last bit to be done, and its job is to support everything else.

    cheers,

    gary
     
    kk5st, Jul 27, 2013 IP
  13. Darius Shojaei

    Darius Shojaei Peon

    Messages:
    27
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #13
    I think a happy medium would be someone with the visual design skills and the code skills. One thing ive noticed in the code world is that the people that are the best with code are the ones that are usually lacking creative or visual skills. But there are visual elements being done out there on popular software, apps, and sites that a coder could never do on his own without the help from a digital artist of some kind. The future of the web/apps/phones are a combination of coders and designers working together in a productive environment.
     
    Darius Shojaei, Jul 27, 2013 IP
  14. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #14
    My point is that content is the reason for being and that the site's purpose is to make it easy for the visitor to do what he came there to do. All else is in support. The primary developer should have wicked library science or information technology skills, because both are about organizing and retrieving information. They also encompass a knowledge of how people do things, e.g. what do they expect from a given menu text. How many menu items are optimal for your product? Dropdowns? If so, how many sub-menus? Where do their eyes travel as they finish viewing an element? What do you want them to see there? What are the elements of your content? How should it be presented? How is the site itself to be structured. I won't even go into the mid-tier and back-end architecture and coding. Nor will I dig into the collaboration between mid-tier programmers and the DBAs or the mid-tier guys and the front-end coders/programmers.

    Even the words you use in your headings and text are important, notwithstanding the efforts of the marketing dweebs to make things "unique". The vocabulary you use is critical. Many years ago, and I hope things are better now, Dell divided their product line by (if memory serves) home, small business, and large business. They further divided each of these by model series. Now, I didn't care which division or model series I bought; I was interested in the capabilities. I ended up getting on the telephone and letting their sales rep do the searching for me. I bought four machines plus monitors; 1 home, 2 small business, and 1 large business. But then, I had to place three orders, because they had created these artificial divides. You don't let market dweebs or bean counters determine how your site works. Would kewl graphic design have improved anything? Not an effing bit.

    Another example of vocabulary choice: A little over seven years ago I wrote a small article, Enclosing float elements (badly in need of updating), which placed at #5 on the first page of Google pretty quickly for the search terms enclosing+floats. A check of Google search terms showed that people who found me were more likely to have searched for containing+floats. So, I switched to "containing" in place of "enclosing" in my top level heading, and went to #1 for both. Synergy. Again, design had naught to do with getting folks to my page.

    Aside: I just searched using both search terms. "Containing" now ranks #10 and "enclosing" ranks #1. I presume "containing" augments "enclosing" but not vice versa.

    So where does graphic design fit the scheme of things? For starters, branding. The designer should be familiar with all the client's printed material; stationery, ads, catalogs, &c.. He should create or adapt the required images. He should determine the various branding colors (think IBM Blue, for example) and which font families to use. If the client doesn't own the web license(s) or isn't willing to buy one, he will search out a similar enough font from among the free web fonts.

    What about layout? Not so much. Layout is pretty much already determined by content and usability requirements. There is a place for input, but not now. His input would have been earlier to enhance affordance.

    And, there's a word with which all too few graphic designers are familiar: Affordance. If there is one skill the graphic designer should have it is the ability to provide affordance; all else could disappear but that with no great loss. Unfortunately it is usually the other way 'round.

    Along the whole chain, LibSci/IT guy, DBA, Mid-tier programmer, front-end coder/programmer, and graphic designer/artist, there is only one who is possibly redundant. That's not to say he isn't important, he's just not crucial to the success of any non-look-at-me site.

    cheers,

    gary
     
    kk5st, Jul 27, 2013 IP
  15. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #15
    Whereas I consider over three quarters that list redundant -- but then websites are NOT complex enough to warrant the presence of the majority of that -- and WORSE most of the folks who specialize in just what you listed don't know enough about the other people's jobs to be qualified to do their own.

    For example, back-end developers often seem to not know enough about front end code and design to have their back-end output jack **** for markup (really annoying when they CLAIM to be PHP experts). Most people who ONLY do HTML/CSS on the front end don't know enough about back-end code to make markup that has a rational relationship to the back end. Most graphics designers don't know enough about HTML/CSS much less accessible web development to be designing Jack ****.

    Maybe it's my military mindset, but to me if you put together a team to build something like a website, anyone involved in the technical aspect of it (DBA, back end code, front end code, design) should be qualified to do anyone else on the team's job. If not, the result is most always a train wreck... for a simple reason -- nobody understands what anyone else is doing!

    But to be fair, I'm one of those rare developers who honestly believes some people shouldn't have web sites, or be allowed to work on them.
     
    deathshadow, Jul 27, 2013 IP
  16. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #16
    ds, those are job descriptions required of any new website. For the vast majority of all sites, all the jobs may be done by one guy, but still, each job must be done for all but small static sites. For myself, for anything requiring other than a simple database solution, I have a go to guy, who knows dbms as well as anyone. It doesn't matter whether he's a programmer or not, as I separate the back-end db and queries from the mid-tier PHP programming so each is a black box to the other. I further separate the mid-tier from the front end structure through the use of a templating engine. The PHP guy simply exports the results as variables which the front end guy inserts into his template. Again, black boxes for each.

    As long as each receives what's expected, each will deliver as expected, and it doesn't matter how it got there.

    cheers,

    gary
     
    kk5st, Jul 27, 2013 IP