Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 8 of 8
Like Tree1Likes
  • 1 Post By Vapr_Arts

Thread: Web Design/HTML5 - Images as Navigation Bar Buttons: DO or DON'T?

  1. #1
    Junior Member lucky's Avatar
    Join Date
    Mar 2015
    Location
    Washington, DC
    Posts
    4
    Member #
    48115

    Question Web Design/HTML5 - Images as Navigation Bar Buttons: DO or DON'T?

    Hello,

    I have a very simple question, but I could not find an answer to it. I'm completely new in Web Design/Development and I don't have a mentor nor do I know any web designer I can ask basic questions to.

    So, for a website I'm designing, I have created some custom navigation bar buttons. These buttons (which are .png image files) already say within their design what they are about (e.g.: home, contact, portfolio...). My question is: is it normal/acceptable in professional Web Design to have images as navigation buttons instead of actual text or a combination of image+text?

    In terms of functionality, my navigation works. I guess my question would be more related to whether or not what I'm doing is normal in Web Design. Can anybody tell me?

    Here's how I setup my navigation:

    <nav>
    <ul>
    <li class="navHome"><a href="index.html"><img src="images/navButtonHome.png" alt="home" width="80px" height="auto"/></a></li>
    <li class="navAbout"><a href="about.html"><img src="images/navButtonAbout.png" alt="about me" width="80px" height="auto"/></a></li>
    <li class="navPortfolio"><a href="portfolio.html"><img src="images/navButtonPortfolio.png" alt="my portfolio" width="80px" height="auto"/></a></li>
    <li class="navContact"><a href="contact.html"><img src="images/navButtonContact.png" alt="contact me" width="80px" height="auto"/></a></li>
    </ul>
    </nav>

    Thanks!
    Yuri

  2.  

  3. #2
    Senior Member sasha_bolcina's Avatar
    Join Date
    Sep 2014
    Location
    Serbia
    Posts
    274
    Member #
    40099
    Liked
    47 times
    It is normal but not the best.
    - text on image is not sharp as real text
    - many languages = many images ++ time
    - longer maintenance
    ... etc

  4. #3
    Junior Member lucky's Avatar
    Join Date
    Mar 2015
    Location
    Washington, DC
    Posts
    4
    Member #
    48115
    Thanks, Sasha!

  5. #4
    Senior Member Vapr_Arts's Avatar
    Join Date
    Oct 2013
    Location
    California
    Posts
    1,930
    Member #
    37412
    Liked
    544 times
    More than likely you can accomplish the same thing using CSS. Unless your nav buttons are some crazy design you are better off using CSS. My biggest concern would be responsiveness. How well do those images scale down to mobile sizes?


    Regretfully sent from my iPhone using Tapatalk during lunch and other breaks

  6. #5
    Junior Member lucky's Avatar
    Join Date
    Mar 2015
    Location
    Washington, DC
    Posts
    4
    Member #
    48115
    Hello Vapr_Arts,

    Thanks for your reply. The buttons I created are actually very simple - they're just flat (no border) and they have the same color as the page background. I just created images because I wanted them to have a specific graphic on them. I just couldn't think of a different way to do it (I'm still learning as I go). I'm attaching a screen shot of what my vertical navigation looks like. It looks nice on the computer screen; but you bring up an excellent point about scalability for mobile sizes. I still need to check how well they scale down.

    2015-03-16_18-13-03.jpg
    Last edited by lucky; Mar 16th, 2015 at 05:36 PM. Reason: forgot to add the image in the original posting

  7. #6
    Senior Member Vapr_Arts's Avatar
    Join Date
    Oct 2013
    Location
    California
    Posts
    1,930
    Member #
    37412
    Liked
    544 times
    This can all be done in CSS. Not sure what you mean by wanting a specific graphic on them? Do you mean the partial border? This could still be done in CSS. The hover effect as well can be done with CSS.

    All you would do is add a rule that pushes the button to the side upon hover. For the example you showed you could just set it so on hover the buttons left margin increases by whatever you wanted.


    Regretfully sent from my iPhone using Tapatalk during lunch and other breaks
    sasha_bolcina likes this.

  8. #7
    Junior Member lucky's Avatar
    Join Date
    Mar 2015
    Location
    Washington, DC
    Posts
    4
    Member #
    48115
    Yep, I'm already using CSS for the hover effect; it works nicely. And, yes, I meant that partial border with the dot when I said "specific graphic".

    I guess by "This could still be done in CSS" you meant I could have added the graphic in the CSS versus in the source code, is that correct? I had not thought about that; let me try.

    Thanks!!

  9. #8
    Senior Member sasha_bolcina's Avatar
    Join Date
    Sep 2014
    Location
    Serbia
    Posts
    274
    Member #
    40099
    Liked
    47 times
    No graphics to css. You can make all of the menu in css without any graphic.

    Something like:
    html:
    <nav>
    <ul>
    <li>
    <div>
    <a href="index.html">home</a></li>
    </div>
    </li>
    ....
    </ul>
    </nav>



    css:

    Code:
    li div {
      float:left;
      background: #ffffff;
      width: 40px;
      height: 30px;
      overflow: visible;
      margin-top: 10px;
    }
    a {
      float:left;
      width: 100px;
      background: #000000;
      color: #ffffff;
      padding: 5px;
      margin-top: -5px;
      margin-left: 5px;
    }
    li:hover {
      margin-left: 5px;
    }

    I didn't test it. Use it as a starting point to experiment with margin and padding.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 06:10 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com