Month: November 2016

4 Modern Background Tricks to Try Out

Posted on by Mario

4-modern-background-tricks-to-try-out

Sometimes, as a web designer, you find that it is difficult to find fresh inspiration, if you happen to face this problem, you can search new techniques and play around with the CSS3, HTML5, and JavaScript. Actually, there is a discernible trend of going for these options. But at least, you can find four different modern dynamic backgrounds that can help to inspire you, such as follows:

  1. Particle Animation

Particle animation is maybe one of the most popular choices right now. Many websites has successfully applied this elegant cosmos-inspired as their solution. Particle animation work best in combination with plain solid color canvas, illustration, vector drawings, and even photos.

You can also select vary animation that it offers. Range from a bundle of chaotically moving dots that are scattered throughout the entire page to imitate starry sky or rain of stars, or constellation-themed solution where you can connect circles with thin lines. Besides, some effects are paired with the effects triggered by mouse hover events. It aims to enable you drive the particles away, form swirls from them, attach them to cursor as a trail, etc.

  1. Waves of Particles

Different from the above example which mostly all the effects come from HTML5 and CSS3 and a pinch of JavaScript magic, waves of particles is an ingenious experiment with Three.js library. It easily reminds one of small tides, with its arched forms and smooth ripple-like movements and gives a feeling of a breathing canvas. To explore it horizontally and vertically, you can move the mouse cursor to rotate it in different directions.

  1. Mouse Hover Parallax

Another flourishing trend that you should know is Layered Parallax. It has a surprising way to transform a dull static background into a composition with a subtle 3D feeling along with particle animation. In fact, you only need to spruce it up a bit instead of ditch your favorite image choice.

It is pretty beneficial when you need to liven up the title, logotype, surreal scene, or illustration. It is also suitable for various abstract animations. This not only adds another dimension, but also allows the users to play with the environment which is triggered by standard mouse hover event.

  1. WEBGL Experiments

If you have pretty amount of money, you can choose WebGL experiments as your inspiration. It can be brilliant, awe-inspiring, and a bit pompous. You may find it is a bit expensive, but it worth every penny. However, you should adapt with the amount of resources that it consumes, and the lack of full browser compatibility.

When can You Use Canonical or 301 Redirect?

Posted on by Mario

when-should-you-choose-canonical-vs-301-redirect

At some cases, you may find you have no opt unless applying a duplicate content which is quite a problem that every web developers will be confronted with. But don’t worry as you can choose to either make use of canonical tags or 301 redirects to avoid any duplicate content. But when you can use the right method between the two of them? Below are several scenarios that you can choose.

Scenario 1: Similar Products with Similar Descriptions in an Online Shop

If you are online shop owners, you may often face a situation where you have similar or almost identical products (e.g. same color or model number). Hence, these products will have similar product descriptions but will be indexed with differing URLs.

Providing an indication of the product in the URLs also will let users know what to expect when clicking on the link. Moreover, multiple URLs for similar products also lead to duplicate content in search engines.

Due to this, you need to avoid having any duplicate content since it is important that only one URL is indexed by Google and canonical tag is the easiest way to do this. With Canonical tag, Google will know which URL to index.

Scenario 2: Conversion of the Website from HTTP to HTTPs

Since the increase of user’s security, many websites are being converted to the encrypted https version. However, this change will lead to much duplicate content, as Google indexes both the http and the https version. In this case, a 301 redirect can be used to avoid this problem since it will redirect the http version of the website to the https version.  By permanently redirecting those sites, you will increase the loading time significantly.

  • The solution for smaller websites: All web pages are redirected to the https version via the 301 redirect.
  • The solution for very large websites: The rel=canonical refers to the https version as the original URL. This way, crawlers are encouraged to index the https version.

Scenario 3: Relaunch of a Website with an URL Alteration

Another case, if your website has reached a top place in Google Page, but because of several reasons you need to turn it down temporarily, and relaunch it again, a search engine indexes the exact URL of an individual web page, and if the structure of the website is changed, almost none of the web pages will keep their URL.

To help you minimize the risk for having any domain transfer, you can forward the old domain URL to the new domain URL via a 301 redirect. By this way, users can find the new URL without have to cope with error pages or receiving browser messages that the complete website is unavailable.

Knowing 3 UX Mistakes that Almost Every Designer Makes

Posted on by Mario

knowing-4-ux-mistakes-that-almost-every-designer-makes

It’s in every designer’s DNA to make the impossible mission happens to be easy, simple, and beautiful. This makes many designers tend to be perfectionists which terrible critics would make their world fall apart and beautiful praise makes them fly. However, everyone will make mistakes and this also works for designers, especially web designers who should cope with user interfaces design. Therefore, every web designers should accept that mistakes is part of learning process since only by accepting it that way, they will learn and grow.

UX Mistake 1: Thinking users will understand what designers understand about.

Since designer will often deal with user interfaces, they use their common sense in everything they do. Their intuitive knowledge about how things work on the web is trained already, and sometimes this situation makes them think that it is a usual thing for people to think the same common sense like they did which cause further problems such as assuming that users: understand the controls, know which questions to ask, know what their icons, symbols and logos mean, will read or follow the instructions we give them, and know how to find what they want.

However, the fact is many users know nothing about design world at all since they come from different work background or etc., some even find that your visuals are confusing them. So, it is designer’s job to explain your design in varied points of view and lead their thought into yours.

UX Mistake 2: Do not know who Your Target Audiences actually are

There are many types of users, and not all users are your target audience, sometimes designers who do not understand about this will create wrong design which in the end may disappoint their target audience. Google’s designers seem to understand the difference between users and target audiences, instead of creating design that would please all users, they create user experience designs that would cause conflict with their goals, and in this case, if you are advertisers, bots, fraudsters, and searchers, you are removed from their user experience goals. They only create design that would please searchers, regular people searching for something.

UX Mistake 3: Not Enough Friction

Not many designers see the importance of having the right friction in their web design. In fact, some designers still believe user friction is bad. But, the truth is all websites need friction. Friction will help you manage things to adjust the users you attract.

There are many kind of good friction that you can use as examples, one of them is Quora, a Q&A site which have simple policy. Quora requires its users to be nice and respectful, unless they will be blocked or banned. Thus system is designed to maximize the user experience and make Quora a safe place for others.

The main point about friction is to know how to adjust the dial to attract the users they want, if you don’t then you will potentially overreacting it or you are chronically abused it. Below are some examples of bad friction:

  • Using captcha forms on a contact form with three or four fields.
  • Applying too many steps which are unnecessary
  • Not using enough form fields so everyone can easily gain access to whatever your design is offering.
  • Asking for privacy information in a matter where you should keep it as privacy.