treehouse : what would you like to learn today?
Web Design Web Development iOS Development

[Solved] site redesign critique & suggestions please

  • I did a major redesign of our company website and have it live since last Saturday.
    www.thecableconnection.com
    I wished to go “Liquid” really bad, but due to large amount of tabular data which require considerable
    width I gave up and went with Fixed Width :(
    Any suggestions please, how that tabular data could be handled in liquid design?
    Looking forward to all the opinions and suggestions.
    Thank you!
  • First, you're using the HTML5 doctype but not taking advantage of any of its features. Ditch the id="header, footer, article", etc and use the newer, semantic tags like , , etc.

  • @theacefes
    dont' have much experience with HTML5 elements
    we still have a lot of traffic to our website with IE6 &7 and have no clue how it would behave

    thanx for suggestion tho
  • @jurotek

    for IE you can "enable" proper rendering of new HMTL5 tags using this
    http://code.google.com/p/html5shiv/

    so you can have cleaner code
    <div class="header">text</div>
    <div class="article">text</div>
    <div class="footer">text</div>

    vs.

    <header>text</header>
    <article>text</article>
    <footer>text</footer>

    but honestly 1st fix basic problems on your web before thinking about some fluid stuff and more advanced things

    this part almost killed me
    http://www.thecableconnection.com/ultra-tec.html

    .GIF that has 2.25 MB !?

    instead of going "1991 oldskool syle"
    use this solution for changing images
    http://webdesignfan.com/jquery-slider-tutorials-and-plugins/
  • thank you @krysak
    I'll take your suggestions for sure
  • @theacefes You can still use the doctype without using the HTML5 elements. I do the same thing.
  • @krysak4ever
    So I take this?
    https://github.com/aFarkas/html5shiv/blob/master/src/html5shiv.js
    compress it, put it on the server root directory and link to it on each page
    in head section like this?


    Is this going to cover all IE versions?

  • @krysak4ever
    So I take this?
    https://github.com/aFarkas/html5shiv/blob/master/src/html5shiv.js
    compress it, put it on the server root directory and link to it on each page
    in head section like this?

    <!--[if lt IE 9]>
    <script src="html5shiv.js"></script>
    <![endif]-->

    Is this going to cover all IE versions?
  • thanx for the link
  • @ChristopherBurton Yes, but that wasn't my point. Obviously his site still renders and works. My suggestion (though now that I look back it may have come off a bit ultimatum-like) was made in an effort to help him clean up his markup a bit.
  • @theacefes I see. The way I read it made it seem that you were stating there was no reason to use the HTML5 doctype without the new elements. The divs used in @krysak4ever's post look okay to me.
  • Nah, I'm just saying that he has the opportunity to take advantage of some of the nifty features it has.
  • @krysak4ever
    Great suggestion for that slide show going with jquery instead ani gif
    Transision is lot nicer and it is so much lighter than that 2.5MB ani gif.
    I used better quality pics for it instead of over optimized pics like I had before.
    Thanx a lot
  • @jurotek
    have 3 questions:

    1.] are you still working on this company website of yours?
    2.] do you have there any deadline until you need to redesign it?
    3.] can you alter only code or you also have say in design of the web ?

    I can provide you with some more feedback far more deeper
    if you want to
  • @krysak4ever
    1.] are you still working on this company website of yours?
    I am currently tweaking this latest redesign what's live now cause I learned some more stuff since then. I am also getting rid of drop downs cause I am not a big fan of them (Just my pet-peeve).
    I came up with something lot more user friendly than that.

    2.] do you have there any deadline until you need to redesign it?
    No deadline

    3.] can you alter only code or you also have say in design of the web ?
    I have complete control over entire design and content.
    (That's my problem. I am not a designer) :)

    As soon as it'll be done I am going to post it and notify you.
    I'll sure appreciate your feedback a lot my country man :)

    My primary job here is development and administration of 11 different databases I built,
    automation of MS Office suite with VBA and other stuff.

    Web is something new to me. I convinced the company about 2 years ago and offer to redesign table based layout website after I learned CSS and HTML for couple of months. I realized about 3 months ago how terrible I've done so I redesigned it about a months ago but I am still not happy with it as I learn more and more stuff.

  • ok
    I am kinda busy this week but by the end or during its course I will have a look at some stuff from time to tima and post it gradually here or at once on Sunday


    for start here
    http://thecableconnection.com/wire-rope.html

    embed the video in the page :)
    no pop up window
  • Cool
    I am looking forward to collaborate on this with you cause I feel I know just enough to be dangerous.
    Thanx.
  • quote:
    "embed the video in the page :)"
    Company hated all 3 thumbnails what Google provided so I came up with that solution of pop-up.
    I would like to preserve that image and after clicking the image expose the embedded video behind it. How would I handle that? With opacity of 0 and that image active state?
    Will it work in all browsers?
    Or is there a better solution to this?
    Thanx.
  • video, again you cvan use jquery, will post how soon
  • ligthbox for video

    example
    http://weby.krsiak.cz/klient/501st/video.php

    I have web I did with what you say
    custom image for video
    + when you click on it on the same page appears overlay with new content (video)

    same stuff can be done as gallery for images
    like I have here
    http://weby.krsiak.cz/reference.php

    in general the technique is called LightBox

    get it here
    http://fancybox.net/

    under Various examples is ... Youtube (iframe)
    the same you can use

    learn on how to do it
    http://fancybox.net/howto
  • I am already using lightbox on this page. Never mind the quality of img's in LB. I screwed up by over optimizing them.
    So I guess I could use it to pop the video same way?
    Is there any advantage using LB over sized pop-up browser window at top left?
    Just curious.


  • pop up, do not really use it these days:
    - does not work when Javascript is turned off
    - lots of users have this feature (pop up windows) turned off in their browsers
    - most of the time it is used for irritating commercials or spam messages (popin' out everywhere)

    + not aware of any cons at all

    ! at the top left ... no man, no, sorry = we all look at the center of the monitor not its corners

    ... versus ...

    LightBox is modern:
    - does not work when Javascript is turned off

    + keeps user on the same page
    + work just fine
    + easy to implement (photo galleries)
    + can be used on any type of content

    ! it is centered
    image
  • Got it.
    I'll use LB then. I guess it will add to more consistency also instead having some with popup browser and some with LB.
    Thanx.
  • no problem

    today I reviewed most of your site
    to be honest = to much to write here by hand

    no worries I know you said you are new to web design, nothing personal ok ?
    I am trying to put here constructive critique only

    I will record video screencast which I will put on my youtube channel and share it here with you
    so we do not post here 100 posts :)

    I will show you there some erroros and stuff and comment on it
    what you will want to discuss you can comment on here later

    will be back, once recorder

    cya till then
  • Hi
    Just got to work.
    I have no problem with constructive criticism whatsoever.
    Even tho I started learning css and html about 2 years ago, I am just now really serious about it in a last 2-3 months. I really want to learn it the right way and I appreciate all the effort on your side.
    I am even thinking to take some design classes at the local college cause I've notice that everything I do in web is too boxy and not enough white space. That comes from 10+ years of developing DB back ends and front ends (UI) data entry forms.
    Dekuji.
    Have a dobry den :)
  • I will post you some screenshots to support my comments frrom time to time

    starts here
    http://krsiakdaniel.minus.com/mbl0wzun4i/15

    put the main MENU in list items
    http://krsiakdaniel.minus.com/mbl0wzun4i/16

    save yourself the pain, list can be moved around ans styled easier
    as you have the submenu in list
  • VOLUME turn it down by half for sure !

    @jurotek
    sry my mic is just bad, only laptop inbuilt
    I have no proper audio recording setup here

    1st screencast comments on "navigation" = 08:49
    http://youtu.be/BWXeMhvqH4U
  • Hi.
    Thanx for the post
    Here's the markup for that menu you refering to:

    .main {
    font-size:2em;
    margin-bottom:1.6em;
    }
    .main a {
    padding:.417em 0;
    opacity:.6;
    width:14em;
    border-bottom-left-radius:12px;
    border-bottom-right-radius:12px;
    display:inline-block;text-align:center
    }
    .main a:hover {opacity:1}
    .main a.active,
    .main a.active:hover {opacity:1;}


    I did that on purpose that minimal markup for that main menu.
    1) Less code
    2) That main menu will never ever change or will be messed with.

    Now, the question is, is it semantically correct?
    Not sure. I read about semantics often but don't have quite good understanding of it and why it matters.

    I use notepad for development and if I change it in CSS, I am looking at updating 65 pages manually.
    Doesn't sound like a good idea to me, even tho it wouldn't be a really big deal for me to do that.

    What do you think my friend?
  • Just finished watching the first screen cast.
    You have some nice great points on it.
    I already mentioned that I will be getting rid of dropdowns in a next release.
    I don't find them user friendly at all.
    I will replace dropdowns which is the 3rd level of navigation to visible crumbs style links.
    Those 3 home buttons. You are right on.
    I will rename them to a actual product lines like:
    Ultra-tec and Wire Rope.
    I will also implement Go to top, that was good idea and I've seen it many times when browsing sites.
    As you probably noticed, I got rid of popup windows for videos and instead embedded them in pages. Some customers who were behind some corporate firewalls were not able to see them and by embedding them on page it solved that issue.

    Thank you for your time, I appreciate that.
  • well semantics
    that would need someone better than me to explain

    I saw a lot of basic HTML tutorials where guys are deleting mere A tags in divs as you have and putting them inside of a list

    here is basic example why it is better to use list for menu, easy to move with CSS only
    http://codepen.io/krsiakdaniel/pen/mpBeG
  • I think, I see what you mean. So by simply setting up classes you can reuse that base navigation somewhere else?
  • yes

    HTML is mere skeleton that sets the core
    CSS is like paint with which you can change every bone :D
  • It was funny here in the office. Friend of mine heard that screen cast and said:
    That guy sounds like you. And I go, he lives in Czech . And friend says. Damn, you been here 30 years and you don't sound any different than him as far as accent. So, don't know how should I feel about that. Just kidding. Take care.
  • no problem :)

    sorry again for the audio quality (not the accent :D)
    not setup for recording audio + voice here

    P.S.: curious what time you have there on your side (being in office now), here is 09:45 PM
  • I will send you tomorrow 2nd video about updating 65 pages
    some theory of using PHP

    you say you use notepad for development
    hope you mean this one
    http://notepad-plus-plus.org/

    NOT this one
    http://krsiakdaniel.minus.com/mbl0wzun4i/17f

    if you are serious about web coding stuff, get this editor (is for ... Win, Mac, Linux)
    http://www.sublimetext.com/
  • Just a regular Windows Notepad which you can find under Start/All Programs/Accessories.
    I am just downloading the Sublimetext.
  • Damn, this Sublimetext is very cool.
    I went to File, Open Folder, selected the folder where my website is and I got everything available on the left side nav. Very cool.
  • to enjoy it even more give this 30mins
    read following

    what you need from here is ... 7 – Package Control !
    http://net.tutsplus.com/tutorials/tools-and-tips/sublime-text-2-tips-and-tricks/

    here = Zen Coding + Sublime CodeIntel
    http://net.tutsplus.com/tutorials/tools-and-tips/essential-sublime-text-2-plugins-and-extensions/

    good post as well (general info)
    http://robdodson.me/blog/2012/06/23/sublime-text-2-tips-and-shortcuts/

    + once you installed package control > go ahead and install package called "SideBarEnhancements"

    info what is what:
    SideBarEnhancements
    Zen Coding

    do things I point out here now
    the rest you will need later, once more advanced, so ignore it for now

    get back to me if having any questions
  • @jurotek
    since we will be "coworking" as it seems :)

    you can add me if you want to (in case you use any of these)
    http://facebook.com/krsiak
    http://twitter.com/krsiakdaniel
    https://plus.google.com/103683273055670815184/posts


    and I am Daniel by the way ;)
  • Hi Daniel,
    I sent you friend request on FB
    Thanx.
    I'll be busy today with analytics reporting and creating some email blasts so I catch up with you later.
    Jiri
  • ok

    you said the company web has 65 pages and in HTML ?
    man I do NOT envy you :)

    if you can and have the "power" to change it, you should gradually but eventually, page by page, switch from HTML and convert it to PHP

    HTML is hard to maintain during time and on so many pages

    PHP will save you a 75 % of the time
  • why to use PHP
    basics explained and live example in 06:45

    http://youtu.be/FJNzLLLE-RM