Category Archives: web developers

Point of Contact: 4 Reasons Why Having a Website is Essential for Small Businesses in 2019

why website is important

I have what I call a low-profile Instagram account. I use this mostly to keep myself in the loop of what people I admire (mostly musicians) is up to and for the endless stream of jokes. I still set my profile to public and used my real name for the account but I’ve never told a single soul about my profile and yet, barely a week after I set up the account, people I went to high school and college with began following my account. It can be really easy to find people or businesses you’re looking for online.

Given this, it’s common to see businesses forgoing website entirely and simply limit their presence to the various social media platforms available. With the sheer amount of social media platforms available, you can bet that each slice of the population is properly served by at least one platform and on a purely technical level; businesses don’t need a website for customer’s reference. Then again, I don’t technically need Spotify to listen to music but there’s no way I’m cancelling my Premium subscription. In a way, website and web development occupies that same position in that they’re vital to the success of your business.

Having a place to call your own

For me personally, having my own personal space is important, both metaphorically and physically. Every month, I always try to dedicate a single weekend where I can be in a place where no one I know will ever find me. Even if it’s technically a public place, it’s always nice to carve your own corner of the world that just for a moment belongs to you. There’s this unassuming coffee shop near where I live for example that even on the weekends is never full that I regularly use if I don’t feel like making a trip.

In a way, this is what I consider websites to be, your own little corner of the internet that belongs to you. Your business’ website is your business’ personal space while by comparison; your Instagram or Facebook page is like your seat in the theater. Yes, technically it’s your space but it’s also cramped and you’re still very much in close proximity with the other patrons. Websites could offer your business the kind of freedom and flexibility that social media platforms couldn’t, and this freedom could help your business in 4 different ways.

Websites help lend a sense of professionalism

Anyone can open Instagram/Facebook/Twitter/(Insert social media platform here) and open an account there but to set up a website and everything that goes with a website requires considerably more commitment. Of course, there’s an ocean of difference between a well-thought-out and properly designed website and something that looks like as if it’s been assembled together in less than 10 minutes so having a website for the sake of having website won’t be enough. Think of having a website as going to a job interview wearing your best clothes and you won’t be too far off the mark.

Websites give you the freedom on contents

For example, many moons ago Instagram requires every image uploaded on the platform to have the shape of a square. That restriction no longer applies but there are still some limitations on what you could post on Instagram, like video lengths and how you can’t include external links on your post. Yes, you could argue that for videos, you have access to YouTube and Vimeo but those platforms have limitations of their own and there’s not a single social media that could reliably accommodate everything you’ll ever need.

Websites aren’t perfect, especially if you’re sticking to a pre-existing theme, but they have much less restrictions on what you could do compared to social media platforms and you could still include contents from your social media feed to your website if you want to. Dedicated websites are especially useful if you have the capability to create interactive contents. For those working in the creative industry, the restrictions on social media platforms can be particularly suffocating.

They’re practically required for businesses dealing in e-commerce

Have you ever tried ordering stuff online through e-mails or texts? I have and it was a bit annoying. There was this boutique watchmaker I’m interested in but it turns out that one of the items they have on display on their Instagram account isn’t available on their website. I asked them about this over text and it turns out they do have that particular item available, just not on their website. I ended up having to order it through text where I have to write the detailed specification of the item, my personal details, etc.

If you’re in the business of selling things, you are practically required to have a website and regularly updates said website when you have new things in stock or when a particular product is sold out. Having to go through that laborious process of ordering through text over and over again is just annoying. For example, take a look at what Undone Watches have done, where customers and potential customers could customize their watches through their website and see how it’d look like in real time instead of having to list their preferred specifications.

They’re now made easier with website builders

There’s the ubiquitous WordPress for one but if you’re looking for something more minimalist and classy, take a look at what Squarespace or Wix is capable of. Squarespace and Wix highly values simplicity and accessibility while being aesthetically pleasing. Both Squarespace and Wix are very easy to use but you’re going to have to sacrifice some degree of customization, which is somewhat similar to how Apple controls their platforms. These platforms also comes equipped with a tool to help with the more complex idea of SEO or to set up an e-commerce site, which can be a boon for business owners that have a limited understanding of web development.

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.