user interface

Design Language: 4 Things to Consider when Choosing a WordPress Theme

Posted on by Mario

Design Language tips

As of 2018, WordPress remains far and away the most popular content management system in web development, with the platform capturing a sizable market share of 31%, far eclipsing the second-placed Joomla, coming in at a measly 3.1% market share. WordPress owes its popularity mainly because of two reasons, its sheer versatility and the simple fact that at its most basic version, it is available for free. There’s just no denying free stuff.

Technically though, WordPress works under the ‘freemium’ model, in which plugins and themes, the very reasons for WordPress’ versatility, are separated into free and premium ones, just like with mobile apps and games. These themes and plugins come for the most part from third-party developers, owing to WordPress’ open-sourced nature and as such, WordPress is an embarrassment of riches when it comes to the number of options available. Some might say there are way too many options.

Finding the right WordPress theme

Choosing a theme is usually one of the first and primary decisions you’ll have to make when starting out with WordPress. Themes aren’t just about looks. Basic functionality, layout, aesthetic impressions, the overall design language of your entire website is going to be heavily informed by the theme you’re going with. Apple didn’t merely stumble into their cohesive design language, shaping every piece of product in their lineup, both software and hardware, by accident. They did it through careful research.

Now, due to its open source nature, it is actually possible for you to design and develop a customized WordPress theme of your own, either from scratch or working from what’s already available but for most small businesses, this is usually unnecessary. The decision then, boils down to a choice between the plethoras of themes available for WordPress. In one marketplace alone, Themeforest from Melbourne-based Envato, there are over 10,000 themes available, packed like sardines in a crushed tin box.

To help you navigate and differentiate between this overly crowded market; here are some factors to consider when choosing a WordPress theme:

  • Choose between simple themes or a comprehensive framework

To put another wrinkle in your decision process, WordPress framework is the current trend in web development. Remember at the beginning when I said that WordPress themes also account for functionality? WordPress framework works by pushing all of those functionalities within the framework itself while themes consist solely of stylistical options. In a WordPress framework, you basically have two themes; parent themes dictate the functionality while child themes dictate the actual aesthetics.

The benefit of going with a framework is that it makes WordPress more in line with full-on web builders like Wix or Squarespace by allowing easy, drag-and-drop codeless customization and seamless theme switching but with the caveat that you can’t perform under-the-hood modifications as freely as you’d like. Usually though, framework already has a lot of functionalities and widgets built-in that you normally won’t have to add one yourself.

  • Just the right amount of functionality

First, consider what functionalities you’d like to have with your website right now and those you’re considering in the foreseeable future. Now, choose a theme that fulfills those needs with the minimum amount of baggage. A feature-rich theme might sound attractive but if it consist of features that are irrelevant, don’t bother. Those extra functionalities are just going to slow down your website and since load speed is now a Google ranking factor, a slow website isn’t something you want to be burdened with.

Technically, you can still add functionalities with plugins but again, adding more baggage is going to slow down your website, so try to go with a theme that already has the functionalities you need built-in to the theme.

  • Responsive web design and mobile-friendliness

Mobile web browsing has overtaken the conventional desktop experience in 2016 and you need to adapt your website for optimal viewing on diminutive displays and gesture-based navigation. The one method of solving this is by using responsive web design, in which the webpage detects the medium it is being displayed and adapts itself. Choosing a non-responsive theme in 2018 is akin to connecting to the internet with a 56k dial-up connection. It’s just too anachronistic of a choice.

  • Finding the right aesthetics

Take a glance at the selection available in Themeforest. On the left-hand side, there are a lots of different tags you could use to filter out just what exactly what kind of website you’re looking for. Food & beverage? Technology? A design portfolio or a resume? There are tons of themes available for various specific needs and choosing the one that fits the aesthetic you’re looking for should not be a problem. There are various considerations to factor in before you jump the gun, however.

First is the available color palette. Assuming you’ve already settled on a logo for your business, you need to find a theme with a color palette that could complement your logo. Some themes are available with unlimited color options while some, usually the free ones don’t. The second factor is legibility. If you’re working in the creative and/or visual industry, this might not be a primary consideration but for businesses working in professional services, you should always balance style with substance. Fussy, visual heavy design tends to not work with law and accounting firms.

Additional considerations

The example marketplace I gave here, Themeforest, deals exclusively with premium themes. If you’re looking for the free ones, the directory on WordPress website is a good place to get you started. Here’s my advice though, try to avoid themes that are made by an individual. Those tend to be extracurricular excursions and since there are no professional obligations, questions of supports and updates are always going to be on your mind.

There are a lot of organizations dedicated to making WordPress themes and most usually offer free themes to go with the premium ones. The free ones are usually restricted in some ways, with less functionality and a limited color palette but if you can live with those restrictions, those free themes are a definite bargain because getting support will be much easier than from an individual designer.

How Creativity Can Be A Problem to Your Website

Posted on by Mario

creative design

Everyone wants to be creative in order to deliver the best works in their work. I used to think that being fully creative is the most important part in every design projects. While that may be partly true, it can be a problem sometimes, especially if you are dealing with web design. If you own a business, you know that in order for your business to be more recognised, you have to make your own website so that you can be more interactive with your customers or potential customers, and they can also feel familiar with your brand. A website also helps in building trust with your audience, because aside from always being informed and updated about what you’re up to, they can also trust that you are keeping it real and authentic. However, while having a website, you might want to be very creative in expressing yourself on your website, which can lead to a very beautifully designed website. That being said, will that website work well in the long run?

Well, as a person who wants to keep learning and learning more about design and creativity, I have come to a conclusion: it is not all about creativity. The more you design for people, the more you see that creativity is better if used for the people you design for, not for your own satisfaction. This means, you use your creativity to make the website easier to use and not only good in the eyes. Most of us start as visual designers, and then we grow and learn more about user interface, conversion, user experience, accessibility, or usability. That’s when you realise that it is not only about being creative.

While being creative is good for your website, using too much creativity without logically thinking will soon be a problem to your website. Why? Well, ever seen a website with cool introductions and creative animations before, but then when you stay on that website, you realise that the longer you stay there, the longer it takes to load and suddenly your PC starts to crash. Yes, that’s how creativity can be a problem to your website. The truth is that too-complicated layouts, too-creative solutions and reinventing wheels won’t make your users’ life easier. Therefore, a good balance between a creative, artistic, and original design while still making it intuitive, without losing usability yet still providing good results for the business is the right choice to be creative without having a problem. The question is; how? Well, this article will answer it for you! Keep reading to find out!

According to Google’s research, users prefer websites that look both simple (low complexity) and familiar (high prototypicality). While that doesn’t mean that your website should look boring, your website should be easy to access, especially in the navigation part where it can lead your visitors to every page easily as if they were being familiar with the website. Aside from that, your website should also look unique at the same time. One thing for sure, as unique as your website is, never ever make your visitors think hard just to access your website. There are many early established web conventions and standards like the placement of your logo, navigation, search bar or login link. There are even conventions on an icon’s meaning, website element names, (e.g. Home, Sitemap, or Contact), button styles, layout and visual hierarchy. All of these standards will help your users navigate and find what they need much faster and easier. Just stick to some of the most popular conventions but use your creativity elsewhere.

So, where should you put your creativity? You can use your imagination on visual design. You can always be creative when it comes to the visual design. That being said, that doesn’t mean you can put animation designs on every web pages. In the visual part of design, you can try to make over some colour with different colour schemes or interesting font combinations. You can also play with spacing, visual balance and hierarchy. Design original illustrations or clever hover and scrolling effects. Try to find creative ways to simplify your design. Minimalism is not about hiding features or content, but about doing less, which is better. Yes, actually simplifying design can very often need more creativity than making it complex.

That’s how you can balance between being creative while placing yourself in your visitors’ shoes – be them, and feel your own website. Put yourself in their perspective and that’s how you understand the unity between creativity and usability.

One Page to Rule Them All: The Pros and Cons of Single Page Websites

Posted on by Mario

Web Development Tips

Back in elementary school, I used to despise Goosebumps’ choose your own adventure books. It is excruciating having to flip through pages after pages at a whim only to follow a plot that ends up being ultimately unsatisfying. I don’t have a problem with the concept itself, mind you, as there are a lot of videogames that uses the same design principle that I greatly enjoy. I just don’t think the concept necessarily works on paperback form.

As such, I tend to not like pieces on the internet that requires me to jump through several different links to get the whole picture. It tends to break the flow of the piece itself and while switching between browser tabs is simply a minor inconvenience on desktop browsers, it’s quite a hassle on mobile browsers. Apparently, the world sort of understands my concern because currently, there’s a trend in web development called single page website that aims to rectify this.

One page is all we need

A single page website is exactly what it says in the title, it’s a website or a section of one that displays all of its content within a single page. As mobile internet traffic has finally overtaken traditional desktops, single page website emerges as one of the mobile-friendly solution for web developers. Consolidating your entire content inside a single page could do wonders to your internet experience, such as:

  • Helpful for the one-handed internet experience

When the iPhone first came out in 2007, it comes with a diagonal screen size of 3.5 inches. For a time, the world continues along like that until Android phones began to tinker with larger screen sizes. When Dell arrived on the scene with the at-the-time gargantuan Streak 5 that came with a 5-inch screen, the late Steve Jobs famously stated that ‘no one’s going to buy that’. Then the Galaxy Note came along, popularizing the term ‘phablet’, a portmanteau of the word phone and tablet and the rest, as they say, is history.

In 2014, a study came out that the average screen size of smartphones stood at 5 inches, well above the average of 3 inches in 2007 and that it’s still on the rise. The current data is a bit skewed considering smartphones now comes with taller, but not wider, displays but let’s just say that they’re just as wide as 5.5-inch 16:9 smartphones. This has resulted in smartphone companies adding a one-handed mode for easier multitasking, which mitigates the problem. Single page websites aims to solve it completely.

Because scrolling is easy to do on a smartphone, single page websites effectively utilizes the gesture capabilities of smartphone while at the same time eliminating its biggest problem, tedious tab switching. To accommodate the conventional desktop experience, usually a table of content is added onto the page, like what you’d see on Wikipedia so that quick navigation is still possible. It’s not a compromise; it’s the best of both worlds.

  • It’s ideal for longform and/or detailed contents

Remember when newspaper displays a story on the front page only to force you to open another page to read the rest? Annoying isn’t it? Websites also suffer from the same mistakes, especially when it comes to hardware reviews where several different pages are dedicated to specific parts of the hardware. This is annoying as again, you’re required to switch between tabs to take in the whole picture.

Imagine if they work like this story on Cape Town’s drought problem from the Huffington Post. Like the point above, going with a single page website doesn’t mean you have to give up on quick navigation as Wikipedia has been utilizing table of contents and quick links for more than a decade. As a compromise, web developers could also use multi page design while still adding a view as a single page option, as used by several different websites.

  • They can offer a great multimedia experience

Check out this excellent story from SBS Australia on the 2003 Sydney student murders. That is probably one of the best presentation I’ve ever seen when it comes to longform journalism. First is obviously the excellent animation, which I believe employs a technique called rotoscoping, a technique I’ve always loved since I first saw A Scanner Darkly. Second is the seamless mixture of images and videos interspersed within the piece itself, which enhances the main text instead of distracting users from them.

Third, and my personal favorite, is how the piece differentiates between the perspective of Ram Tiwary, who was falsely suspected and then charged for the murders before being ultimately acquitted and Malcolm Knox, the journalist who set out to explore the issue in the first place. To switch between the two perspectives, the page uses a swiping (or drag for desktop) gesture and display the face of the man you’re reading from in the bottom. It’s admittedly slightly gimnicky but I personally think it’s brilliant.

The burden of carrying an entire page alone

Here comes the bad part, single page website has limitations inherent to its solitary nature. They’re not gamebreaking and you can actually mitigate some of these limitations but they are always there. Some of these limitations include:

  • They are relatively slow and might take up ample resources

Obviously if your single page website consists solely of text, this won’t be a problem but chances are that it will include other things so how fast it will load should always be taken into consideration. One of the ways you could mitigate this is by using trigger scrolling where more contents are loaded only when specific conditions are triggered. There are automatic triggers and manual triggers.

Automatic triggers can be seen with Buzzfeed’s main page, where if you scroll down, the website will automatically loads more content at the bottom of the page. Manual triggers can be seen with Techcrunch’s main page, where if you scroll down, you’ll see a button that says load more and only if you tap or click that button will the website loads more content. This way, users can still load the main page quickly but the more contents are loaded, the page will take up more and more resources.

  • It’s not going to work for or with everything

To start with, an e-commerce website simply won’t work with this approach and even then, truly single page website is pretty rare. The Buzzfeed example above only uses the single page approach on its main page with each content transporting you to a different page. Techcrunch is close to being a purely single page website, with most contents being loaded within the same page but some, like the Events section, still takes you to a different page.

Still, this doesn’t mean that you shouldn’t use the single page approach; you just have to be rather smart on where to use it. The main page of your blog and any longform contents will work with this approach. Additionally, resumes and portfolios also work well with single page designs.

Final thoughts

Even though I greatly appreciate what single page design brings to the table, I also realize that it’s not good enough to actually replace what’s on the table. The multi page approach, even with its mobile-unfriendliness, still serves an important role in today’s internet. Instead of being the electric car of web development, single page website is more like a diesel engine. It has its own advantage over petrol but its drawbacks limits its usage and it’s now in a peaceful coexistence with petrol engines.