web developers

Beautiful Backdrop: 4 Tips on Using Fullscreen Images as Backgrounds

Posted on by Mario

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

Posted on by Mario

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.

Local Delicacy: The Best Ways to Make Your Website More Appealing to a Local Audience

Posted on by Mario

web development tips

There’s being famous and then there’s being ‘famous’, or infamous, for the proper word. The person who first said that any kind of publicity is good publicity has clearly never met Martin Shkreli, a man so hated that his own lawyer once said that they felt like punching him in the face from time to time as well. Fame isn’t just fame; there are actually several different layers to the term fame itself that you might want to know about.

In another example, there’s the term famous and ‘locally famous’. KFC is famous, almost everyone around the world knows about it while a place like the Seven Seeds might only be known to those with a familiarity to Melbourne. On the outset, being locally famous might seem like the lesser outcome but for small, homegrown businesses, being known by people in a 10-mile radius is better than being known by people across the Pacific, which is why in terms of web development, increasing your website’s local appeal is preferable for small businesses.

Locally famous in a globalized world

Yes, I know that it sounds slightly oxymoronic but trying to appeal to the widest audience possible might not always be in your best interest. Anyone who serves food and or beverages would have no use in attracting customers from a thousand miles away and professional services such as in the legal and financial field wouldn’t work beyond borders since each state, not to mention country, has their own specific laws.

Sure, we’ve now come to a point where say, Indonesian boots maker can garner customers and a write-up from a New York-based publication or how going to Hong Kong just to have a custom suit made are now actually a thing but the fact remains that for the majority of small businesses today, it’s the people around you that’s the most important. Appealing to the local audience then, should be your goal and your website should always reflect this intent.

Think of this as the difference between running an ad in your local newspaper and starting a marketing campaign in YouTube. Yes, YouTube’s global reach means that you have the potential to reach a much wider audience but you’d also be jostling for attention against the millions of videos that are uploaded to YouTube every day. By contrast, a local newspaper would limit the competition to just a handful and while your audience will be considerably smaller, it doesn’t really matter as that’s the kind of audience you were trying to court in the first place.

Search engines as of now are automatically tailored to the location of the user. A user in Melbourne typing the word weather into Google would be presented with a different result compared to a user in Darwin for example. This rise of location-based technology, combined with the reasons mentioned above, is why making your website more appealing to a local audience should be a priority and here are some things you could do to achieve that.

Get to know your audience

Darwin’s tropical climate and their population of merely 150,000 would present a vastly different challenge than Melbourne’s four seasons and their 5 million citizens. Each region would have their own quirks, personalities and stereotypes. If you’re willing to go deeper into the various available demographics, you can start differentiating by gender, age, economic status and even political views. All of that is just a roundabout way of saying that when trying to attract a local audience, you have to be specific.

Get to know what’s currently trending in the city or which aspect of the city they actually like or any other information that might help you in courting them. You know the saying, when in Rome, do as the Romans do and to do that, you actually have to figure out what it is the Romans actually do in the first place.

Add a local flavor to your website

Before people get to see what’s written in your website, their eyes would usually gravitate around the images first so it might be a good idea for you to consider adding images that properly represents your city. A landmark such as Sydney’s Opera House might seem like a good option but that’s actually a very generic choice and is more representative of what outsiders think of when they hear the word Sydney. Instead, dive into the local scene and try to come up with an image that would imply an insider’s knowledge of a particular city.

One of the things that we’ve learned about the internet is that instead of acting as a place where different ideas and viewpoints are exchanged, it actually acts more like an echo chamber, where users seek out information that reinforces their existing views. In other words, familiarity is an appealing trait in the internet and by highlighting the fact that you and your audience share a similar place of origin and/or residence, you can use this sense of familiarity to your advantage.

Incorporate locally-relevant trends and/or topics around your content

Say your local sports team just won something or a local politician might be embroiled in a scandal, anytime anything interesting happened where you run your business, try to insert yourself into the conversation whenever appropriate. Include winking references to those events or if it’s possible, try to tie your business with those stories. If there’s nothing interesting going on around even talking about the weather might do, Lord knows how big of a deal the recent drought was in some parts of Australia.

Get together with other local businesses or sponsor local events

Technically, this advice doesn’t actually relate to your website but if you are collaborating with other local businesses or partaking in a local event, you can include that information in the homepage of your website as some sort of a badge of honor so I’m including this anyway. Now, this might seem small but by connecting your business to other local institutions, you are indirectly adding credibility to your website. They’re not as good as genuine reviews but I’m sure I’m not alone when I say that I have more faith in businesses that are connected to others compared to those that seemingly exist in a vacuum.