Hover Navigation: Yay or Nay?

You may have noticed that many websites utilizing a hover navigation system—this is when you “hover” over a navigation link with your mouse and this will usually result in some sort of animated transition or a drop-down list of subcategory links to appear. The question is: “Does using a hover-based navigation system do more harm than good?”

You’ll find that this a pretty divisive topic; some designers will swear that hover navigation is terrible and it’s use is on the decline, while others will defend its usefulness in high-content websites. Here are the pros and cons I see for using hover navigation in your website:

Pros

  • Hover navigation menus with drop-down subcategory links creates better website organization. Sometimes it’s very hard to narrow down the number of links in your main navigation, but you don’t want to have fifty links all vying for a spot at the top of your website. A great way to handle this is to have your main links on display while your subcategory links are hidden, discoverable with the user hover over the main category links. This allows you to keep all the links that you want, but display them in a more digestible and organized manner.
  • Another way to handle the organization issue is to have your main navigation link to a page with a list of your subcategory links. The drawback of this approach is that users are forced to load a new page, and this may increase time spent trying to find information in a not very positive way. Utilizing hover navigation reduces the amount of clicks a user has to do, allowing for quicker navigation to desired content.

Cons

  • It’s very easy to accidentally hover over your navigation, resulting in users opening up drop-down menus that may cover your content. This can surprise or disorient your visitor, confused as to why this navigation suddenly opened when they were trying to do something else.
  • Using hover navigation can force users into what is sometimes called a “hover tunnel”; this is the issue that is created when a user must navigate through a small space in order to reach a desired link. Accidentally moving away from the hover navigation can close up the drop-down menu, causing users to lose what they were looking for and having to repeat the process over again. Some drop-down menus are so small and tight that this is a very real issue, making clicking on a link a chore.
  • While hover navigation works well for desktop computers, it is nearly impossible to use for mobile devices. Tablets and smartphones rely on user touches and gestures; they don’t recognize “hovering”. Therefore, you’re forced to design an entirely new navigation for these mobile devices, which may mean you need to rework how you categorize your links.

So what do you think, which one is better? The best way to decide if hover navigation is right for your website is to test your website with real users before launching. When your website contains a large amount of information you may find that hover navigation is more beneficial, but never implement it at the cost of user satisfaction.

Sources: [ Why Hover Menus Do Users More Harm Than Good ], [ Hover is Dead, Long Live Hover ]

Basic Tips to Improve Your Website

Just by looking at a website’s home page you can tell if it was designed by an amateur or a professional. If you’re one of those that have a very amateur-looking website it’s hard to know where to start improving your design. You want a website that is clean, organized, optimized, and represents your brand.

While everyone has a different design process, here are some tips to help you get started in the right direction:

  1. Create Branding: Professional does not mean generic; while it’s true that some amateurish websites may have a bit too much personality, you certainly don’t want to lose your company’s identity. Create a sense of branding by having a unifying color scheme consistent throughout your website, complemented by a professional logo that represents your business visible on each page. You should also have this logo link back to your home page; not only is this expected by users, but it forces users to pay attention to your logo, helping to increase memorability.
  2. Invest in Professional Photos: Low-quality photographs can make your website look amateurish, so it’s best to try to find a professional photos for your website. While you may be tempted to take photos yourself in order to be cost-efficient, if you’re not a professional photography then it’s almost worse than having no photos at all. Either hire a professional photographer to take photos for you or try purchasing some stock photos from one of the many stock photography websites out there. If you invest in your website that investment will shine through, and visitors will read that as you caring about you business and product or service.
  3. Organize Your Navigation: There is nothing more frustrating for a user than not being able to find the information they’re searching for. When a website has confusing, unorganized, or hard-to-find navigation a visitor is almost guaranteed to hit the back button rather than waste anymore of their valuable time trying to figure out your problem. It’s best to provide clear navigation at the top of your page (this is where most users expect to find the navigation, so I don’t recommend straying from this pattern) that has no more than 7 or so main category links. If you have more sections than that, it’s best to have these as a secondary navigation lower down on the page or nested within a drop-down menu in the main navigation.
  4. Optimize Your Content: Another sign of a low-quality website is one where the information is cluttered, illegible, and out-of-date. Keep your content fresh by updating it at least once a week (once a month at the absolute minimum); not only does this encourage users to keep visiting your website for new information, but it also helps your website in search engine rankings. Be sure to use an adequate amount of whitespace and keep content concise and full of relevant information and keywords so that it’s easier for users to scan for the  information they want.
  5. Think About Responsive Design: Websites are not limited to your desktop computer anymore. So many users now own smartphones and almost all of these devices are used to look up quick information on the web. You’re possibly missing out on a large segment of your potential market if you don’t create a mobile-friendly version of your website. While mobile-friendly versions are not necessary for EVERY business, it’s worth looking into to see if it’s right for your company.

Sources: [ 5 Tips for Improving Your Web Designs ], [ 13 Simple Tips for Improving Your Web Design ]

Speeding Up Your Website

When you create a website the hope is that many users will visit your website and stay for a while, perhaps resulting in some sort of conversion like a product purchase or a newsletter sign-up. However, if your website doesn’t load quickly there’s a great chance that your visitors will immediately give up and hit the back button. In today’s technologically-advanced society users are expecting quick delivery of information and if your website doesn’t load within a couple of seconds you’re potentially losing sales. Studies from Amazon confirm this, reporting that a simple 100 millisecond improvement in speed increased their revenue by 1%.

With this information in mind, here are some simple tips to improve the speed of your website:

  1. Minimize HTTP Requests: With each piece that your website has to download (stylesheets, javascript, images, etc.) the more HTTP requests you have to make. Multiple HTTP requests result in longer render times, and so the best solution is to streamline all your content. Keep all your CSS styles in one stylesheet, reduce the amount of javascript your page uses and keep it at the bottom of the page (which allows for all your important HTML content to load first), and use CSS instead of images whenever you can.
  2. Enable Browser Caching: When someone visits your website, the elements of your webpage are stored temporarily on your hard drive in a process known as caching. Caching allows users to come back to your website without having to re-download those page elements, creating a much speedier experience. While this doesn’t speed up your user’s initial visit, it will certainly speed up any subsequent visits they may make to your site.
  3. Optimize Images: The easiest way to optimize images is to make sure your images are a reasonable size in the correct format. One of the quickest ways to have an unnecessarily large file size is to save a picture at 2000px by 2000px size when you’re only using it for a 500px by 500px space. Cut down on the file size by already exporting the image as the smaller pixel size. You can also make sure that your file is saved in the correct format; while the PNG format is my personal favorite it also exports at the largest file size, and so you’re better off sticking with the GIF format for small, flat graphics and the JPG format for your photographs.
  4. Optimize Stylesheets: There are two ways that you can implement CSS onto your website: 1) externally, through an external stylesheet dedicated to CSS code, or 2) internally, using inline CSS that is intermingled with your HTML code. Out of these two options, the best option is to use external stylesheets; it reduces the size of your code and you’ll avoid accidentally duplicating your code, especially if you keep all your CSS code in one stylesheet file.
  5. Reduce Redirects: There are at least three ways a redirect can occur: 1) you direct URL to a new, updated location, 2) you direct users to a mobile version of your website when on a mobile device, and 3) you leave off the trailing slash on directory-pointed links. Having too many redirects can greatly increase your website’s loading speed, so keep these redirects to an absolute minimum.

So is your website fast enough? You can get started by testing your website on WebSiteOptimization, which will give you a report on potential problems while giving you recommendations on what areas to improve on.

Sources: [ 10 Ways to Speed Up Your Website ], [ Speedy Web Pages – Tips for Fast Downloads ]

Book Review: Joomla! 3 Explained

Now that I’m wrapping up my second degree, I thought I’d share a book that I had to use for one of my classes that I thought was quite excellent. This book is “Joomla! 3 Explained: Your Step-by-Step Guide” by Stephen Burge, a book that discusses how to approach Joomla! (version 3) for the first time.

For those of you who are unaware of what Joomla! even is, it’s a free, open-source content management system (or CMS) for publishing web content. And just for a brush-up of what a CMS is, a CMS is a computer application that allows for the publishing, editing, and modifying of content all organized and maintained from within a central interface. A CMS that may be more familiar to you is WordPress; Joomla! is basically a CMS that is a bit more complex than WordPress, but not quite as complicated than Drupal.

What I really enjoyed about this book was how easy it was to read it. According to the preface, the author wrote the book as if he was writing for his own father (who I assume was also a first-time Joomla! user at the time this book was written), and I feel like this writing style made everything very easy to understand and straightforward. Difficult concepts are broken down into smaller steps, and concepts that are vital for you to understand are repeated quite often throughout the book so that you are sure to remember them. For example, the author introduces the CASh workflow (stands for “Categorize”, “Add”, and “Show”), which is a critical process to understand because it’s how you approach everything you do in Joomla! from adding articles to plugins to images to menus. This workflow is reintroduced almost every time that it’s used, and by the end of the book I was able to utilize the process without ever having to reference the book. In addition to the simple text, many images are used throughout the book that show screencaps of what the author is referring to in his steps, which is exceedingly helpful for a visual learner like myself.

In fact, there are very few negative things that I have to say about this book. There are a few typos and other small mistakes here and there, but I feel that’s pretty standard for any book and it certainly does not detract from the learning experience. Also, if you’re looking for a book that goes more into the coding aspects or other technical bits of Joomla! rather than the WYSIWYG side of the CMS, you might want to check out a different book. This book is pretty basic in those regards.

So if you’re wanting to learning Joomla! for the first time like myself, I highly recommend that you check out this book!