Category Archives: web developers

Hidden in Plain Sight: Best Uses of Hover Effects in Website

web development tips

There’s this certain trope from classic point-and-click graphic adventure games referred to as pixel hunting. The best way I could explain that trope is by using an example so here goes. Let’s say you’re playing a game in which you’re faced with a locked gate. To unlock this gate, you have to find the key stashed in a drawer with dozens of other keys and the only clue you have is that the key features a similar design to the gate you’re facing. The gist is that only the right key can be picked up but you have no way of knowing this until you’ve clicked on the right key.

It sounds like a terrible joke but a lot of games I played when growing up suffer from this problem. The classic Myst and the Indiana Jones games from LucasArts are some that I can name off the top of my head. Luckily, modern adventure games no longer suffer from this condition as usually, they include what is called a hover effect, in which the mouse pointer changes to indicate that a certain object can be interacted with or picked up, which makes life a whole lot easier. It’s not just in video games, hover effect also bring several things to the table when it comes to web development.

The trend of hover effects in websites

You know how when you’re reading something on Wikipedia you come across a name or a term you’re unfamiliar with that you feel like you have to click on the link only to close it again after reading the first paragraph? You no longer have to do that anymore. In the desktop version of Wikipedia, every time you hover over a link, a small box will pop giving users a general overview of what that particular link is about.

Let’s say that you opened the Wikipedia article on this year’s Oscar for a recap on all of this year’s nominees and while you’ve seen A Star is Born, you don’t exactly remember who Sam Elliott is. Instead of having to click on his name, all you have to do is hover over the link and you’ll be presented with a short information on the man and a photo of him with his trademark mustache and you’ll go, “Oh, I remember that guy!”

This feature from Wikipedia is just one example from how hover effects can be used in the internet. This one is purely functional, saving users from having to open a link if they’re only looking for short information but there are other decorative uses as well. If you’re thinking that hover effects seem too small of a feature to make a meaningful impact on your website, you’re not exactly wrong but as we’ve seen with Ariana Grande’s tattoo fiasco, it’s the little detail that counts. The following is some of the better uses of hover effects I’ve seen so far.

To provide users with additional information

The Wikipedia example is one and Amazon also uses hover effect in their homepage to provide users with a prompt for ‘Quick look’, in which can then click on the label to see more about the products on offer without leaving the page they’re currently in. Again, this application might seem minor but you have to remember that users normally spend their time in Wikipedia and Amazon opening multiple links and products and adding a feature that minimizes the work on the users’ part is no small feat.

To a lesser degree, the entertainment news website Vulture also uses the hover effect to provide users with contextual information where necessary in lieu of links. For example, in this piece detailing how the film Oscar nomination for the film Bohemian Rhapsody and Green Book has generated a backlash. In certain parts, some words and phrases in the piece is followed by a number written in superscript, akin to what you see in Wikipedia. Hovering on these words would reveal additional text on the left side of the piece providing contextual information.

To inform users of additional actions

This is somewhat similar to the Amazon example above, where users are given the prompt for ‘Quick look’ but more comprehensive. For example, in Netflix, whenever you hover over a film or a television series, a trailer for that particular film will play in the background while possible actions are showed on screen. The thumbs up and down icon allows user to like or dislike that content, the plus icon allows user to add that content into their queue while clicking on the arrow will reveal even more information about that content.

YouTube also does this on a much smaller scale. Hovering over a video would reveal the clock icon, which when clicked will add that video to the user’s queue. The news aggregator service Flipboard is more in line with Netflix’s approach where hovering over a story allows the user to add that story to their magazine, like that story or share that story with their contacts. In this case, hover effects simply add convenience to the user, allowing them to perform actions instantaneously without having to jump through unnecessary hoops.

To show off your creativity

Take for example, the website A Story about Trusts. Set up by the historical banking institution J.P. Morgan & Chase as a way of familiarizing new users with their investment trusts, the website cleverly and creatively uses the hover effect for users to manipulate certain elements on the screen while still delivering information on their services and investment in general in an attractive way. I’m not personally a fan of private financial institutions but even I have to admit that this was pretty brilliant.

When using hover effect as a creative outlet, the possibilities are endless. The typeface design company Font Smith went way above and beyond the call and duty when they launched the typeface FS Untitled, named so because it’s too flexible to pigeonholed to a single name. There’s quite literally nothing I could use to describe what they did so jump in and play around to see the kind of thing you could do with hover effects if you’re willing to go that far.

Beautiful Backdrop: 4 Tips on Using Fullscreen Images as Backgrounds

Tips on Using Fullscreen Images as Backgrounds

Last year, a story popped up on The New York Times about how the celebrated Japanese composer and musician Ryuichi Sakamoto ended up creating a playlist for a restaurant in New York. The gist is that Sakamoto frequented this particular restaurant and was so annoyed at the music that he finally went to the chef, gave him a piece of his mind and offered to curate the music himself, without pay of course, so that he could feel more comfortable eating there. Interestingly, none of the songs he picked are from his own composition.

What Sakamoto did there might seem a little bit fussy but Sakamoto, a noted film composer who’s won an Oscar for his work on The Last Emperor, knows just how essential background music is to the whole experience. It’s not just with film and food, background elements are essential in almost everywhere and in web development, this practice manifest in the use of website backgrounds. Plain backgrounds are simple and don’t involve much consideration other than color but if you’re using an image as a background, that’s where things might get a little bit tricky.

Choosing things for the background

In a very weird way, choosing things that could work well in the background might actually be trickier than when you’re choosing things for the foreground. I have a friend who sings in both a band and a chorus and I’ve been told that singing lead vocals on a band takes a very different approach compared to when you’re singing in a chorus or when part of an ensemble. In an ensemble, you actually have to make an effort to not stand out, to blend in with the rest of the group while being the lead vocals on abad carry much less restrictions, although you still have to make an effort to sync with the rest of the instruments.

The Sakamoto story I provided above sheds some light to this particular issue. Take a glance at the playlists Sakamoto provided and you’ll see that the included songs aren’t exactly something you’d want to listen on your free time. This is by design, a good song doesn’t necessarily make good background music and what makes good background music might not have the same effect when played in the foreground.

Unsurprisingly, these same considerations should be taken into account when you’re trying to choose an image as a background. It’s the same case whether you’re trying to use an illustration or a photo as a background, you can’t just simply pick what might be objectively considered the best image, you have to consider that image together with the foreground elements of your website. Before you start feeling overwhelmed, here are some general issues you might consider when using fullscreen images as your background.

Use only high-quality images

1080p is the standard resolution for most smartphones with some Android phones upping the ante to 1440p. The last few years have seen an increase in 4k screens mostly in the computer space but Sony has actually released phones with a 4K HDR screen although it remains to be seen whether other manufacturers would follow suit. Anyway, the point I’m making here is clear, make sure that the image you’re using is of a high-quality to ensure they won’t become pixelated.

Strike a perfect balance between the background and the foreground

Images in general are ‘noisier’, for a lack of a better word, than plain backgrounds. Taking this into account, it is advisable for you to use less foreground elements than you normally would when you’re using plain backgrounds. The noisier the image, the less room you could mess around with your foreground elements. The one approach I like to use is start with picking the image first and then to start adding elements into the image until it’s too crowded. If you feel like one image isn’t giving you enough room, it’s time to try a different image.

Make good use of color contrast

Now, here’s the elephant in the room. When you’re choosing images for your background, you need to make sure that the image you’re choosing won’t obscure the text in the foreground. Having a background that overwhelms the foreground is a cardinal sin and is the sole reason why you have to take a different approach compared to when you’re choosing images to use in the foreground. The most basic choice would be to use white text on a black background or vice versa but that would seriously limit the kind of image you could use.

Thankfully though, there are shortcuts you could use even if the image you’re using is tad bit too overwhelming. The first thing you could do is to limit text placement only on certain parts of the image. If there are parts of the image that are more uniformly darker or lighter than the others, you could place texts around that area. Alternatively, you could selectively alter parts of the image to make it more habitable for text. Other solutions include using a colored text box to make it more legible.

Make sure your layout works with both landscape and portrait orientation

Mobile internet traffic is now bigger than desktop internet traffic. This has been the case for several years and frankly, I don’t think it’s going to change anytime soon, if ever. As such, you need to take steps in ensuring that your website is just as accessible on a phone screen as it is on the computer. Now, I’ve talked a bit about how you could play around with layouts a bit to ensure texts on your website can still be legible even with an image as a background but now you have to make sure that that remains the same even if you switched from landscape to portrait orientation as smartphone users often do.

Balancing Act: How to Find the Equilibrium between Speed, Design and Content

development tips

Not many people know this, but I can be ridiculously indecisive. Back when I first planned my first solo trip a couple years ago, I could’ve sworn I spent more time browsing through hotels and places I planned to visit than the time I spent on my actual trip. I mean, I know that preparation is key when it comes to like, everything, but I think we can all agree that I’m being excessive when even after I booked the hotel room, I still spend time looking at other hotels to see if there are better alternatives.

It’s not so bad if I’m traveling with other people since I can leave any decision-making to them and just simply use my veto power on things that are questionable but when left to my own devices, I could spend days pondering on even the smallest decision. Decision-making is always tough, especially when you’re presented with two equally valid choices as things normally are when it comes to web development in which choosing between speed, design and/or content is a universal dilemma.

Striking the perfect website balance

Style over substance, form over function; similar debates have been raging for decades if not centuries and honestly, I don’t think we’ve ever come to a definite conclusion. Sure, people would like to say that they prioritize substance over style and function over form lest they be called superficial and perhaps this is my cynicism seeping through but I think people care much more about looks than they are willing to admit.

For example, I’m the kind of guy that literally judges a book by its cover. Whenever I’m itching for a new book to read, I walk into a bookstore and just browse through the shelves for books that look interesting. If it had a cute cover or blurbs that I found to be interesting, I’m probably going to pick it up. It hasn’t actually failed me yet, I’ve fallen in love with some genuinely good writers with this principle, notably David Nicholls and Nick Hornby, and I’m probably going to keep this up until all of the bookstores around me have been closed.

The moral of the story here is that people are hopelessly superficial; the only difference is to what degree. Looks then are undoubtedly important but when it comes to website, where attractive and eye-catching designs can sometimes get in the way of speed, reining in some of your design team’s ambition might be necessary. This is made more complicated by the fact that there’s still one other subject to be considered when we’re dealing with websites; content.

So yeah, it’s not exactly a question of style or substance but perhaps style and substance or speed? Things can be quite complicated, to say the least, and finding the ideal balance between all three could be tough. If you maximize on speed, you won’t have much room to play with design and content. Maximize speed and your website would be slow while lacking in content. Maximize content and your website will both be slow and unattractive. Although, depending on the purpose of your website, it might not be necessary for you to actually optimize for all three.

Properly using images and videos on your website

To start with, there are a lot of tools out there that would enable you to compress an image with little-to-no noticeable loss in quality for your website. Full size, high-res images are great but only include them if it’s a necessary component of your business. If it’s a yes on that question, use a separate image gallery so that those images wouldn’t have to be loaded together with the actual page.

For videos, you might want to consider embedding them from video sharing sites such as YouTube. Generally, you’d want to minimize third-party scripts as much as possible but because of the complexity in videos, you can offload the work to them while you focus on optimizing your website first. Additionally, make sure that embedded videos are loaded only when they’re requested by the user. A preview image for the video will be loaded first and only users who’ve clicked on the video will be able to see the actual video.

Other technical considerations

The practice of lazy loading, in which contents are loaded only when they’re scrolled into view, should be considered if you’re considering single-page websites. I’ve mentioned that web developers should minimize the use of third-party scripts and I would like to add plugins to that idea, especially when we’re talking about WordPress. For example, including your Twitter and Instagram feed on your website used to be novel but I now think that simply including links to your social media account would be enough.

One other change you might want to consider is dropping support for older browsers. Backward compatibility tends to require certain scripts and/or files, which would just add unnecessary bloat for other users. If you’re unsure, try checking what browser your visitors are using in Google Analytics. Adding in to that, it’s a good idea to just simply minimize the use of CSS and JavaScript in general and use them only when necessary.

When to optimize and when not to optimize

The question you might want to ask yourself is the purpose of your website. For example, a law or an accounting firm would probably see little need in the high-quality images and rich contents so a focus on speed would be preferable. On the other hand, any business working in visual design would need to up their game in the design front while blogs would want their content to be as rich and attractive as possible.

The first option would be easy but it’s the latter two that would be tricky since they still have to ensure that their websites would still load properly on those without a high-speed fiber-optic connection. As a compromise, try to create a landing page for SEO purposes that isn’t as heavy as the actual main page that would offer visitors a taste of your website but without the extra baggage. By taking this compromise, you could focus your speed optimization only on the landing page without sacrificing your rich content pages, which is the closest thing you could have to a win-win situation.