Tag Archives: mobile

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

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.

Getting in Shape: Using Geometry in Web Design

web design tips

Raise your hands if you recognize any of these notations; 2d10, 20d6, 2d20, 3d6. If you do, then I salute you gamemaster, but if you don’t, here’s a crash course on the beautiful world of tabletop role-playing game. These notations, referred to as the AdX, refer to dice notations. A 2d10 for example would mean that the players are required to roll a 10-sided dice twice, most usually used to calculate damage.

The reason I brought this up is because when I was rummaging through my desk looking for my nail clipper, I’ve lost at least 3 nail clippers this year alone so this was a pretty big deal, I stumbled across a pair of 10-sided dice that I haven’t seen in years. My affection for 10-sided dice doesn’t just stem from the fact that I love RPGs in general but also because I love the shape of a decahedron. Obviously, a decahedron doesn’t translate well to web design, not until VR is widespread anyway, but other geometric shapes still has a place in web design.

Geometry in web design

To sum up, geometry is the visual study of shapes and patterns. Shapes and patterns occur in pretty much all walks of life, not the least in the field of design. Architecture, art and design are all mingled with geometry and even Mother Nature itself is filled with geometric shapes. A honeycomb for example is simply an array of beautiful hexagonal wax cells arranged in a cluster by honey bees as their nest.

The beauty of geometric shapes is that they can be used both aesthetically and functionally. They can be used simply to inject some visual pizzaz on your website or used as visual cues to guide reader’s attention on to certain elements. It’s this exact versatility that makes them so attractive to use in web design and other user interfaces in general. The thing that people need to keep in mind when it comes to geometry is that it’s not just about the shape itself.

Geometry also deals with how those shapes are related to each other and how those shapes relate to the space around and between them. If that description strikes you as familiar, it’s because that is what functional design mostly concerns itself with. The screen the webpage is being displayed on has limited space and deciding what to communicate and how to communicate them best is pretty much the question every web designer should ask themselves.

Geometric shapes in web design

Quite possibly the most simplest shape there is, dots or a circle when it’s bigger in scope, is the most common shape you’re probably going to see. Circles are most commonly seen as standalone icons, such as on your phone for example, due to their shapes, which is an indicator of fullness. Circles are also widely used when dealing with a gauge of some sorts or when you wanted to display some statistics using a chart, especially of the pie kind.

The second common shape we’re dealing with is rectangles. Rectangles as a shape are foundational because they are used as the basis for the grid layout that is widespread in a lot of websites. Check out the homepage of the tech blog The Verge for an example. Headline contents are arranged on a rectangular grid at the top with other most recent articles spread out on a list below them. This grid layout is also quite commonly seen on booking websites such as Airbnb and Booking.com.

The third shape we’re dealing with is a collection of shapes referred to as polygon, which is any 2-dimensional shape formed from a collection of straight lines. Yes, rectangles technically fall under this definition but we’re focusing on less common polygons such as triangles and hexagons. Because of their sharpness, triangles are commonly used as navigational cues, guiding viewer’s attention into an element on the webpage.

How geometry is used

If you’ve ever used an Android device in the past 3 years or so, you should be familiar with the words Material Design. For those unaware (read: an Apple devotee), Material Design is the design language Google has been using on their mobile interfaces since the release of Android 5.0, Lollipop in Android parlance. Geometric shapes, the grid-based layout and the use of shadows to create an illusion of depth are the hallmarks of Material Design, creating simple, consistent yet attractive user interface across all of their devices and services.

I’ve stated before that geometric shapes is notable for their versatility, which is why they’re perfect for Material Design. Whether stuck in on the upper-right corner of a desktop screen or sitting right there on your phone screen, geometric shapes are universally relatable and customizable to a degree than you can use them for any goal you could think of. Recently, Google has updated this design language with softer colors and gentle curves in place of hard angles but I won’t be surprised to see this style to be used for many years to come.

One other use of geometric shapes I’m particularly fond of is isometric projection. For those of you who grew up with video games back at the dawn of the 21st century, you should no doubt be aware of isometric video games. Back then, 3D graphics was still very rough so video game developers played around with 2D video games to give players the illusion of depth using isometric projection.

Think back to classic strategy games such as Command & Conquer: Red Alert 2 or the first game in the Age of Empires series. By displaying elements in such an angle, you can create illusory depth even though the images are still flat. For something contemporary, check out the game Monument Valley and its Escher-like aesthetic. The isometric viewpoint isn’t just a stylistic choice in that game; they also form the basis for optical illusions central to the game puzzles.

The simplicity and versatility of geometry

Good design is simple, yet understandable. In a way, designing using geometry is no different than the approach taken by companies like Muji and Uniqlo with their products, taking a simple, minimalist approach that is borderline industrial but still pleasing to the eyes. In good design, form and functions lives in harmony and using that standard, there is no way to describe geometric shapes as anything other than good design.

Domestic SEO: The Value of Internal Linking in SEO

SEO tips

If you’re ever feeling masochistic, try to look up someone famous who is younger than you on Wikipedia and marvel at how much they’ve achieved compared to you. I did that when I was reading about the tennis prodigy Alexander ‘Sascha’ Zverev, who at the age of 21 and ranked fifth in the world is the youngest player in the top 10. Even at such a young age, his Wikipedia entry is longer than mine ever would, assuming that I would even have a Wikipedia entry of my own, which is not very likely.

To further cement the point, Sascha’s Wikipedia entry also has a link to a page containing the details of his career so far. If I’d like to, I could actually spend the entire day tracking his entire career from his Wikipedia page, made possible by the generous amount of links Wikipedia has kindly provided. This is what is referred to as internal linking, in which links to pages from the same website are spread throughout a certain page, enticing users to click through those various links to catch up on the whole story, so to speak. For marketers and SEO services, internal linking is an essential process in optimizing a website.

SEO and internal linking

Links, specifically backlinks, are an integral part of SEO. In fact, the first algorithm that Google use to evaluate pages for their search engine, PageRank, named after co-founder Larry Page, uses the number and quality of backlinks as a primary criteria. Now that the ubiquitous search engine has two decades of progress on its back, links are just one of many, yet still important, part of the equation.

By comparison, internal links don’t directly impact how certain websites might rank in a given search engine results page, which is why sometimes, they are overlooked in the whole SEO process. In reality, internal links do have a direct effect on SEO, but not in the same way that backlinks do. Rather, internal links are integral during the process of web crawling and indexing, in which search engines identify and evaluate websites to be included in their search results.

Determining how link values are distributed across your website

Link value is closely related to the issue of information architecture but they’re not completely interchangeable. When search engines crawl and index your website, they look to your website’s sitemap for information on how your site is organized, its topology for a lack of a better word. For the most part, this topology will closely correlate to the link of value of your website pages, the homepage sitting at the top and the various contents at the bottom.

This is partly because in most cases, links to your homepage will be almost always included in every single page of your website. By the same token, contents that are linked only within the category page will carry less link value and therefore ranked less prominently. This idea can be manipulated by having sections for most recent and/or popular contents within your main page to boost the link value of those contents.

Content structure and the relationships between content

By now, you should be aware of the use of ‘tags’ within various sections of the internet. These tags are what web admins use to categorize pages based on the type of contents. Navigate to the ‘Royal Family’ section on the Sydney Morning Herald for example and you’ll be taken to a page featuring a collection of stories from the Duke and Duchess of Sussex’ ongoing visit to Australia. These section pages occupy the middle ground between the main page of your website and your main contents.

When search engine crawls through your website, these tags help them understand how pages within your website are related to each other. As with most things in life, few things are ever simply one thing, so a post about the dress the Duchess wore on a particular day would be tagged as both ‘Fashion’ and ‘Royal Family’. In each of the articles within the ‘Royal Family’ section, there would be a link to the section page itself, which acts as a signpost to web crawlers which pages that cover similar subject matter.

These tags could also be used to establish content structure by working hand in hand with the link values described above. Normally, websites operate under a pyramid-esque structure. At the top is the main page of the website itself, linked from every page of the website. Underneath that, we have the section pages, linked from every page of the related section. At the bottom sit the actual contents, linked from the section page and often other related contents but not as much as the section pages.

The recent trend is that websites are no longer using section pages simply as a collection of links, rather we’re now seeing more and more of what I like to call headlining contents or what the internet refers to as cornerstone contents. This type of content serves as a more-focused section page but with the added touch of a narrative. Instead of simply listing articles within that section, cornerstone contents attempt to create a narrative that binds those articles together.

For example, say you’re trying to do a piece on the history of electric car development from its infancy in the early 20th century to the now infamous General Motors EV1 and the burgeoning industry of electric cars in the current climate thanks to Tesla and the Nissan Leaf. Instead of presenting this as one article, you can divide this piece into several articles but with one overarching outline serving as the cornerstone content. As such, when search engines crawl and index your website, this cornerstone will be given more prominence above the other smaller articles.

The phenomenon of Wikipedia wormhole

Other than for the purpose of crawling and indexing, internal linking can also be used to the purpose of making your website more attractive to readers by this thing we call Wikipedia wormhole. For those unaware, Wikipedia wormhole is the phenomenon in which an unsuspecting reader begins his day reading about Nick Kyrgios only to end up on the page for Kosovo War solely through Wikipedia’s internal links.

By using internal links and recommendations on your contents, you can entice your visitors to an extended stay in your website. Always keep in mind that while SEO is for search engines, it’s your actual human visitors that should serve as the ultimate goal and proper use of internal linking works on both counts.