web developers

Rolling Out the Red Carpet: 4 Tips You Could Use to Make Your Homepage Better

Posted on by Mario

Rolling Out the Red Carpet- 4 Tips You Could Use to Make Your Homepage Better

Late last year, there was this interesting tidbit on the story of Playground Games, the company behind the popular open-world racing video game series Forza Horizon, and 2016’s Forza Horizon 3. It was revealed during a talk at the Nordic Games Conference that Playground spent 18 months of the two-year development cycle continually going over and polishing the first 10 minutes of the game. 18 months of work for only 10 minutes of playtime isn’t exactly proportional, is it?

Forza Horizon 3 isn’t the only video game to do this, 2009’s Uncharted 2 also pulled off a similar trick. Instead of easing players into the game, Uncharted 2 tasks you immediately tasks you to guide Nathan Drake, the main character of the series, to escape from a derailed train over a cliff in the Himalayas, which chronologically happens later in the game, a storytelling technique referred to as in medias res, dropping players literally in the middle of things. This practice of starting your video game with a bang is actually something the world of web development could definitely take a page out of.

The perfect opening salvo

What Playground Games did with Forza Horizon 3 might seem a little bit excessive but it works. Horizon 3 was my first entry into the series but I had a passing familiarity with the series so I had an idea of what I was getting into but the opening of the game still blew me away. I distinctly remember oohing and aahing and practically giggling to myself as I drove past some of Australia’s landmarks (the Maroondah Dam, the Glass House Mountains and the Twelve Apostles to name a few), first in an exotic Lamborghini and then literally off the beaten path in a trophy truck.

The reason Playground did what they did isn’t just because of some random quirk, it’s because the cliche of people judging book by their covers is for the most part true. Roger Ailes, former CEO of the television arm of Fox, who was responsible for turning the Fox News channel into little more than a mouthpiece for the current American administration once famously stated that you have seven seconds to make a good first impression.

The seven seconds is far from being a scientific truth but I do think it’s true that there’s only a very limited window of time that you could nail this impression. If we transplant this idea into the internet, then the burden of giving out this first impression lands on the shoulder of the homepage. Just like how Playground spent three-quarters of their allotted time into perfecting the 10 minutes of their game, you should also prioritize the development of your homepage as long as it doesn’t interfere with the rest of your website and here are 4 tips you could use as a guideline.

Emphasize your value offering

Instead of putting you on the seat of a crappy little hatchback, Horizon 3 gave you a taste of the Lamborghini Centenario right at the start of the game and gave you a route that takes you to some of the greatest vistas the game has to offer before switching into a trophy truck to show you that if the route isn’t to your liking, you’re free to make one of your own. In the first 10 minutes, the game managed to successfully convey how much fun I’d be having in the version of Australia that they’ve cooked up in their game, which is no small feat.

By the same token, your homepage should make it clear just what it is that sets you apart from similar companies in the industry and what your customers would be getting if they side with you. The start-up culture has what is referred to as the elevator pitch where companies need to have an idea that can be conveyed meaningfully over an elevator ride. That should be what your homepage is like.

Be original with your words and images

Your homepage should also clearly states what is it that makes you ‘you’. In practical terms, this would mean ditching the generic stock photos for something that is truly your own. Earlier this year, the internet had a little bit of fun when Nicole Paulk, an American biophysics professor posted a stock photo of a scientist that makes absolutely no sense, which started the whole trend of #BadStockPhotosOfMyJob. Stock photos and/or phrases are a plague to be avoided when it comes to your homepage.

Make use of whitespace to keep your homepage from being cluttered

You might think that because of the short time you’re given with to nail your first impression, the solution is to cram everything noteworthy into your homepage to make sure they’re not missing anything. This is not a good idea as it’s not just your time that is limited, their attention is also limited, which is why you need to figure out what part of your business you’d like to emphasize and focus your homepage around that idea.

One way of achieving this is by using whitespace, which results in a less cluttered and considerably friendlier website. Additionally, try to figure out a way to convey both your originality and value offering in the least amount of words and elements possible. Anyone could convince people with a 100-page manifesto but to do the same thing in 140 characters or less? Now that’s what I call art.

Make sure your homepage is as gorgeous on a mobile screen as it is on the desktop

Once you’re happy with the homepage design you’ve come up with, the next step is to see how it’d look like in a diminutive phone screen. Mobile internet traffic is now bigger than desktop internet traffic and your priorities should adapt accordingly. Check if your homepage looks and works as it was meant to on your phone in addition to on your computer. The easy way to do this is by using a responsive design, where the webpage adapts itself to the size and orientation of the device it’s being displayed in without you having to manually adjust every element of the page.

Sign of the Times: Considering the Best Time to Redesign Your Website

Posted on by Mario

Sign of the Times_ When Should You Redesign Your Website

It’s immensely hard to keep up with the rapid pace of development in technology. Moore’s law, the assertion made in the 70’s form Intel’s co-founder Gordon Moore that the number of transistors inside an integrated circuit would double every two years, has been proven true in the last 4 decades or so, with Intel themselves finally putting the brakes just a couple years ago. In layman’s terms, Moore’s law states that technology advances at an exponential rate, instead of going 1-2-3-4-5; it goes 1-2-4-8-16.

Here’s an illustration. Say a 20-year old college kid from 2018 is transported back to the 1998. See how well he could cope with a 56k dial-up connection, no WhatsApp, no Maps and music that only came in discs. Now take a 20-year old college kid from 1998 and transport him back to 1978 and see how he’d do. Sure, adapting to DOS instead of Windows might take some time but all-in-all; I’m willing to bet he’s coping much better compared to the one from 2018.

Moore’s law from the perspective of web development

In the world of web development, which hadn’t even properly existed 2 decades ago, the rate of progress is just as rapid. First, we’ve got simple static webpages, then as functionality get added into the web, the term web application entered our vernacular. Palm and other personal digital assistants included a native web browser in their repertoire but it wasn’t until iPhone 3G came out with Safari on board that mobile web browsing was finally considered seriously.

In the last few years, we’ve had responsive web design and progressive web apps emerging as more proof in how the mobile web experience has emerged as the primary platform. Even though the world hasn’t fully adapted to this trend yet, our tech overlords have begun implementing VR (virtual reality) and AR (augmented reality) into the web with the goal of further enhancing the mobile web experience. This begs the question, just how often companies have to redesign their website to keep up with this?

To update or to redesign?

What’s broken can always be fixed, but what’s fixed will always be broken. Very zen-like isn’t it? What this means is that even though you can update your website as often as you would to keep up with the latest development, at some point you’re going to have to pull the plug and start over from scratch. Some changes are so fundamental that it’s more efficient to head back to the drawing board instead of adding more things to your current website.

The problem is, knowing precisely when to redesign your website is somewhat of a puzzle. Website redesign takes an incredible amount of work and even if you have the best of intentions, it is rarely, if ever, taken well by the users. It can be slightly disheartening to see that your meticulously planned redesign is responded with a Change.org petition from your users asking you to reconsider your design.

Times you have to consider a redesign

While the word redesign itself implies an aesthetic rework, a web redesign isn’t exclusively about looks. Google for example still uses the same basic aesthetics they’ve used in the last 15 years or so but the results page have gone through a lot of changes, additions and other improvements compared to the one I used for homework in middle school. In fact, there are other times that signify when you should redesign your website, as detailed below:

  • Due to technological progress

Some technological advancement is mainstream enough for the public to recognize. Some, while bringing much-needed improvements into how website works, are strictly limited to lines of codes. VR and AR are examples of the former while things relating to Javascript, like React and Node, are examples of the former.

Just because they’re not immediately visible to the naked eye though, doesn’t mean they don’t warrant a redesign. The under-the-hood improvements they bring are usually useful enough to at least consider a redesign.

  • Your website pales in comparison to your competitor’s

Either aesthetically or functionally, if one or more of your competitors’ website has started to outshine your website, that’s your cue to start considering a redesign. If you’re not in the habit of checking your competitor’s website, then you might want to start now. I’ve heard cases of businesses not taking seriously the importance of checking your competition before it’s too late.

For an actual case study, look at what happened to car manufacturers in America. They haven’t paid much attention to Tesla in the early years and now Tesla’s network of electrical charging station, the aptly-named Supercharger, is the envy of the industry. Website redesign takes time so the cost of not realizing just how far ahead your competitors are in front of you is going to get amplified.

  • Due to increasingly critical feedback from users

If you’re not receiving any feedback at all, have the non-technical member of your team/company or anyone else you know who’s not as technologically savvy to test your website and act as some sort of a beta tester. It is important you hear some feedback from someone who isn’t part of the industry as they are a rough representative of the typical user.

  • Your website stops working properly

This is pretty obvious but if your website starts showing broken image icons instead of the actual images, then it’s time to consider a redesign. That’s the downside of constantly updating your website, the underlining code would just get stressed to a point that it would start to slow down and eventually stops working properly.

  • Your business has experienced some recent growth and/or changes

Case in point, Netflix. Netflix started in the late 90’s as a DVD rental business but then pivoted into a video streaming service back in 2007 and now regularly makes their own films and series on top of acquired programming. Obviously, when you switched from mailing DVDs out to your customer to a YouTube-like service, your website is going to need rebuilding from the ground up, which they duly did.

One last thing to note, a website redesign has to be properly planned. Even after the design and development process is done, do not implement this right away, publish it locally first and have your team works out all the kinks before going publicly live. Take note of the case of Microsoft and their problematic Windows updates. One of their recent updates apparently bricked some customer’s PC, forcing users to rollback to previous version of Windows.

Perpetual Development: 4 Reasons Why You Should Consider Continuous Integration

Posted on by Mario

Perpetual Development: 4 Reasons Why You Should Consider Continuous Integration

When it comes to software and web development, the conventional wisdom usually goes like this. Each team, or each member depending on the size and complexity of the software in question, work on their codes and continually test their own codes until whatever feature they were supposed to be working on actually works and submit their codes to their manager. Once every member have submitted their codes, all of them gets integrated and run for a final test, where there’s probably at least a 50% chance that that particular software is going to break. Why? That’s because integration error is the bane for any software and web developers.

The problem with that development practice is that it neglects to account for the other codes and features that makes up the entirety of the codebase. In software development, this is perfectly fine as having several standalone teams taking full responsibility of their own codes is much more preferable than having one single large team responsible for the entire codebase. In fact, the micro frontends approach to web development is built on this very same principle. The problem lies in the possibility that those codes might not play well with each other, leading to errors and faults occurring during integration. One of the more novel ways of avoiding this is with the practice of what is called continuous integration.

Great things are done by a series of small things brought together.

Continuous integration (CI) is exactly what it says in the title, it is basically a development process in which the integration process perpetually happens every time small alterations and/or additions are made to the codebase. ThoughtWorks’ Martin Fowler defines the process as “a software development practice where members of a team integrate their work frequently, usually each person integrates at least daily – leading to multiple integrations per day. Each integration is verified by an automated build (including test) to detect integration errors as quickly as possible. Many teams find that this approach leads to significantly reduced integration problems and allows a team to develop cohesive software more rapidly”. As you might’ve guessed, this development process brings with it several benefits compared to the standard development process, such as:

  • Less debugging and troubleshooting.

Instead of implementing changes thousands of lines of code at the same time, CI breaks that down into much smaller steps, with only several lines of code changes and additions being integrated at a time but performed several times during the day. The benefit is two-fold, you have less risk of encountering any errors and when you do run into one, finding out what went wrong is much easier as you don’t have to perform the sisyphean task of checking over several thousands of lines of code.

  • It’s integrated in an agnostic environment

Software development can be somewhat esoteric. There are weird instances in which a code may work just fine in one environment but fail once it’s moved to a different one. With a centralized CI server, tests and integration can be run in an environment mimicking a real world setting so that when your boss tells you that your code doesn’t work when he tested it, you can confidently tell them that the problem is on their end and not on your code.

  • Reduce conflict between teams and/or members

In the standard development practice, the first thing that always happens whenever integration errors occur is mudslinging. If their code runs well in isolation, it’s not like anyone is going to voluntarily sacrifice themselves to the altar which would eventually result in mudslinging, only passive-aggressively. I’ve actually seen this happens once so using a completely unbiased third party like a CI server for independent review could keep this internal conflict from happening.

  • Keeps the sanctity of your code

The CI server will only merge the changes and additions into the existing codebase if, and only if said changes pass the prerequisite tests. There is absolutely nothing worse than deploying a set of broken codes and having to rollback updates because of that. Take a look at this case with the video game Sea of Thieves. They took down the server for the game to implement an update for the game, and after several hours of players reporting problems with the update, they took down the server again for an emergency maintenance. That still didn’t fix things and they took down the server again for the third time in 24 hours for another maintenance and even then, the game is still apparently suffering from certain issues.

It used to be that updates are implemented rather infrequently, but if you’ve ever paid any attention to how often a mobile app gets updated in the past few years the you should’ve noticed already how often small updates and bugfixes are deployed. The same thing applies to websites. Now that static websites are nearing the point of extinction, web apps with varying levels of interactivity is the norm. Even browser games are now massively popular, with hits like Agar.io, Slither.io, 2048 etc beginning their life as a web app before being launched as a native mobile app. While major updates to a web app is still relatively infrequent, perpetual improvements are always happening in the background, making practices like continuous integration a necessity for web developers around the world.