ui

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.

Creating a More Accessible Website

Posted on by Mario

In general, website accessibility is known as an attempt of removing online barriers faced by people with disabilities. The goal is to provide everyone with equal access to online information and functionality.

This website accessibility issue has been broken down by the W3C or World Wide Web Compliance organization into 12 points and the accessibility requirements will continue to evolve. But, don’t worry, as you can improve the accessibility of your website by following the best practices below for web design, development, and content management to improve the user experience on your website for all visitors. If you are a web developer, this article will suit you best, so keep on reading and learn how to create an accessible web today!

How to Design for all Users?

Below are ways that you can apply to make your user interface design and visual design more accessible. These tips can be applied both to a new website and to an existing site.

Applying the Right Color Contrast Ratio

Color contrast helps people see the text clearly as it gives sufficient contrast between the text color and background color. Therefore, it is important for you to provide a good color contrast ratio. As a best practice, your foreground text should have sufficient contrast from the background colors. A contrast ratio of 5:1 for normal text and 3:1 for large text are good standards to follow and also meet the minimum requirements for WCAG 2.0 Level AA.

Avoiding Sliders and Animations

Some studies reveal that user experiences and visitor engagement are not good for conversions and can cause low engagement. Therefore, it is better to avoid using any rotating slides and carousels on web pages because some website visitors may require more time to view and read a slide, besides, rotating and moving content will only create frustration for visitors.

Utilizing WordPress for Accessibility

Since February 2016, WordPress has released WordPress Accessibility Coding Standards which provide a compliant based on which custom themes can be built, most major themes and frameworks on WordPress, like Genesis or Avada.  Furthermore, all new or updated code released in WordPress must conform to the WCAG 2.0 guidelines.

Form Labels and Errors

Instead of using placeholder text, make sure all forms on your website have proper form labels. For example, the form pictured below has placeholder text for username and password, but once the form field is clicked, the user can no longer see what information should be entered into the field. This kind of form will create a hindrance for users that need extra time filling out a form.

Web Page Navigation

Another thing that you should bring to your attention is the accessibility in creating a website that can be navigated using a keyboard. This is because some website users with mobility impairments can’t use a mouse to navigate your website and rely on a keyword or keyboard-like device.

In fact, the better your page’s structure and semantics are, the more navigable and understandable it is for all users. Therefore, make sure that your WordPress developer is following the best practices in page structures by using proper heading hierarchies, enabling skip links, and using accurate semantic HTML.

How to Manage Content for All Users?

Don’t forget about content, because having an accessible website requires an adjustment in how you handle all website content going forward, so here are some of the ways that you can do.

Adding Alternative Text to Images

To describe the appearance of an image on a web page, alt text is used within an HTML. Visually impaired users rely on alt text to understand an image on a website. With WordPress interface, website administrators can easily update website content and add alternative text to images. In this case, alternative text is helpful for SEO, as search engines look for alternative text to identify and properly index an image.

Video & Audio Captions

Just like having captions on images, you should also put captions and transcripts on any video or audio. By giving captions, to multi-media, the visitors can easily enjoy and access the knowledge offered in the media. Furthermore, with captions, visitors can conveniently watch videos with the sound off. Today, it is easy to find numerous free tools available for adding and editing captions to your video and audio files.

So, whether you are creating a new website or upgrading it, it is important to protect all that work by ensuring the website is secure from hackers and security breaches. In fact, you may need to have a daily backup, not only for security, but also for breaking a component related to accessibility.

In summary, major online businesses are realizing on the importance of accessibility that is able to encourage closed captions on videos for users who are deaf and hard of hearing, so are you ready to start creating a more accessible website today? Remember that it is important to create a website that can be accessed by anyone, anytime, and anywhere.

How to Create a Design that Satisfies

Posted on by Mario

Two-Types-of-User-Motivation--Design-to-Satisfy-ywf

Believe it or not, working as a designer or web designer will require you to know your users and motivate them. You might think that designers sound like phycology, but this is actually important for designers to acknowledge a little knowledge of phycology, especially about motivation and how to apply a good motivation in their design, since by utilizing good motivation on your design, you will provide strong reasons for users to take an action for buying your product. Take a look further on how motivation can really affect your design, such as follows.

What is Motivation?

Motivation is famously known as something that can encourage people. It gives motives, needs or wants that drive behavior and explain why people do something. In design, motivation is also needed; it could help designers see the direct way to make the product correspondent to users’ expectations and solve user’s problems. However, before your product can help users, first you have to create a product that can motivate users to try it.

There are two types of motivation that we know, extrinsic motivation and intrinsic motivation:

Extrinsic motivation

These motives come from outer sources, such as family, professional environment, competitions, contests, etc. In most cases, people who have extrinsic motivation are usually seeking of reward, such as money, prizes, diplomas, certificates, trophies, medals, praise, support, recognition, or the desire to compete with others. As a designer, we can discover users’ extrinsic motives through research for UX designers. Once we know their extrinsic motivation, we can create a design that can stimulate them.

Intrinsic motivation

Oppositely, intrinsic motivations come from inner sources, such as the need of self-improvement. This type of motivation is stronger than extrinsic motivation. If you can nail this motivation from a user, it will become a significant factor for retaining users. Therefore, it is important to get to know more about target audience at the stage of user research; in this way, designers can discover what their motives are and what kind of designs that will work for the specific users.

Knowing the types of motivation will surely help designers in creating a design that will attract and serve users best. In fact, this knowledge is necessary for UI/UX designers for several reasons, such as follows:

  • Building navigation and call-to-action elements that can truly engage to users and motivate them to take action.
  • Designing better layouts that can demonstrate key benefits or rewards.
  • Creating a process that can motivate users to try the product and test its functions.
  • Presenting aesthetic satisfaction so that users feel comfortable with your product.
  • Providing the copy that can stimulate users through describing the benefits and achievements of your product.
  • Encourage users to share their experience via various social networks; this can be a powerful extrinsic motive for other people nowadays.

Now that you know motivation is terribly important in design, by understanding users’ motivation, you can build the right design that can reach many users. So, don’t forget to analyze your users’ motivation before designing for them.