The footer site, this is a slang term among Russian-speaking webmasters and developers. Like many others, it was borrowed from the English language. The word “footer” – translated as “foot, the bottom footnote, or basement. That is – it is the lowest part of the site.

If the header and the first screen, are the most important elements of the site, it does not mean that the basement is useless. Footer can be very functional and bring no less value than other sections.

What is usually written at the bottom of the site

The footer of the site may consist of a single block or several. They may be slightly different in color and have different content.

At the very bottom of the feed is usually located:

• logo, copyright and the name of the site
• Counters traditionally placed at the bottom of the site or make them invisible
• Name of developer or studio

This is the least interesting information for the average visitor. And it tries to put away from the reader’s eyes, because it does not carry any substantial benefit. In my case, there are duplicated buttons sots.net.

Second level basement

The next part of the basement a little more functional … It can be a technical links.

By such, I relate links to:

• affiliate program
• sitemap
• privacy policy
• agreement on processing of personal data

There may also be duplicate links to pages from the main menu, such as “Contact Us”.

Third level basement

The next level of the basement is even more informative and useful to the visitor. On it we will dwell in more detail. You can arrange there anything you like.

I will list all the various modules that can be placed there. And specify which of them are more suitable for different types of sites.

Navigation

Full-fledged navigation with a breakdown by headings. This kind of footer you can often see on the sites of online stores or large information portals.
An example of the basement of the site

If the site is small, and the main menu has only a few items, then it makes sense to sub it and the bottom. Firstly, it is an additional linking to the site, and secondly, a useful navigation convenience for users.

Map

Address and a full-fledged map is suitable for sites of small and medium-sized businesses. If you’re hard to find, place the map not only on a separate page, but also in the basement.

Contact form or sign up form

If you’re running a newsletter, a subscription form can be added to the footer.

And even if you have a full-fledged Contact Us page on your site, an additional form to send a message is often relegated to the basement so it’s accessible from any page on the site.

Company contacts

In the basement, you can place not only contacts, but also paint a full schedule of each branch.

Add-ons for mobile devices

These add-ons include a QR code or links to the AppStore and Google Play to install the official website app.

Social Media Buttons

Social buttons try to be placed in prominent places. They can be located almost anywhere and even be floating. But as practice shows, duplicating them in the basement is not superfluous.

Up arrow ↑

Previously you could see such an arrow in the basement of many sites. But now it’s not really relevant in terms of usability. According to the old logic, only those who made it to the end of the page will be able to comfortably move up.

We all know how long the pages of sites can be now … Or take sites with infinite scrolling (an example vkontakte feed). So, a person should be able to go back to the beginning from any point and at any time.

Therefore, arrows now do not place in the basement, but make them float around the page.

The pluses of the footer are that all the information located there will be through. That is, it will be displayed on all pages of your site.

So, just ask yourself… What do you think visitors should see when they reach the bottom of any of the pages on your site.

The post What is a website footer appeared first on Corlan.

Duration and speed of animation in UX

When elements change state or position, the duration of the animation should be slow enough that users have time to notice the change, but also fast enough to not cause anticipation.

Use the right animation duration. Do not make it too fast, but do not let the user to yawn.

Numerous studies have shown that the optimal speed of the interface animation is 200 to 500 ms . These figures are based on the specific properties of the human brain.
Any animation shorter than 100 ms is instantaneous and will not be recognized at all. And animations longer than 1 second will convey a sense of delay and therefore will be boring to the user.

Duration of the animation in seconds

The duration of the animation, which is correct to use in their interfaces.

On mobile devices, material.io also suggests limiting the duration of animations to 200-300 ms.

As for tablets, the duration should be longer by 30% – about 400-450 ms. The reason is simple: the size of the screen is larger, so objects take a longer path when they change their position.
On accessories, the duration should be correspondingly 30% shorter – about 150-200 ms, because on a smaller screen the distance to the end point is shorter.
animation on mobile devices

The size of mobile devices affects the duration of the animation

Web animations are handled differently. Since we’re used to web pages opening almost instantly in a browser, we naturally expect the same from animations.

Thus, the duration of web transitions should last about 2 times shorter than on mobile devices – from 150 to 200 ms. Otherwise, the user begins to think that the computer hangs or has problems with Internet connection.

But. Forget about these rules if you’re creating decorative animations on your website or trying to draw the user’s attention to certain elements. In those cases, the animation can be longer.

A large computer screen does not equal slow animation!

You must remember that regardless of the platform, the duration of the animation should depend not only on the distance traveled, but also on the size of the object.

Smaller elements or animations with small changes should move faster. Accordingly, the animation with large and complex elements looks better when it lasts a little longer.

Among moving objects of the same size, the first object that has traveled the shortest distance stops
Small objects, compared to the large objects move slower, as they make more displacements.

The duration of the animation differs depending on the object size

When objects collide, the collision energy must be evenly distributed between them according to the laws of physics. Therefore, it is better to exclude the rebound effect. Use it only in exceptional cases, when it makes sense.

It is better not to use the effect of bouncing, because it is distracting.

The movement of objects should be clear and sharp, so do not use motion blur (an appeal to users of After Effects).

This effect is difficult to reproduce even on modern mobile devices, and is not used in interface animation at all.

Blur effect in animation

Do not use the blur effect in animation

List elements such as news cards, email lists, etc. should have very little delay between changes in their appearance.

Each appearance of a new element should last between 20 and 25 ms. Slower appearance of elements can irritate users.

The post A guide to the proper use of animation in UX appeared first on Corlan.

Quality

Let’s start with quality – the most important thing is the result. For quality people are willing to pay more and wait longer.
At this point, the market for web design on so much grown that to find a specialist in freelance is no longer a problem, as it was a couple of years ago. Former newbies are savvy, trained, have built up a portfolio and know how to create great products. Not worse than the web studios.
Enough to go to any freelance market and flip through the first few pages of rating. Or just type in a search engine phrase “to order a website design”.

Speed of execution

Deadlines (design time) – another important factor. A responsible freelancer, whose orders are the main source of income, is interested in deadlines no less than the customer. I know about it from my own experience.
For example, more than 2-3 orders at a time, I never take. And if this is a major project, it is better not to be distracted by small and medium ones. And I want to complete the project on time or earlier, to get full payment and move on.
In agencies, things work differently. Several specialists work on a project. And web design is only one stage of development. At best the deadlines are observed, at worst they increase. Depends on the banal organizational structure and the normalized schedule of employees.
Freelancers often work nights, and holidays, and weekends. Not all and not always… But the fact that we work more than 8 hours a day, that’s for sure.

Prices

You can find super expensive studios and very expensive designers on freelance. The same goes for the cheap ones. There are both new low-cost studios and freelancers with low prices.
But if we take a specific budget let’s say $1000, and start choosing, studio or freelancer. Then the choice will be between an average agency and a specialist with above average experience. I think you get the analogy.
Another advantage in our favor is transparency. The studios often sin by increasing the price in the process. And on the sites of agencies usually there is no indication of prices “from…”. And when it comes to calculating the project, the price rises by leaps and bounds for each modification and detail.
Phased payment can also be more flexible with a personal agreement.

Bonuses

When you negotiate a price with a specific person, it usually does not change. Well, with rare exceptions. And some small requests, freelancers often do for free, as a bonus.
Again, I do not claim, but judge by myself. In almost every turnkey project, I add some useful things for free, for which the customer would have to pay in the studio.

Edits

If, when working with the agency, you forgot to stipulate some details in the terms of reference, you may have problems with modifications. Studios are not always eager to make extracurricular edits and revisions. Freelancers are more loyal in this matter, too.

Friendship and further cooperation

You can only cooperate with the agency. After completing the work, even if everything went perfectly, it is difficult to be friends, because a whole team is working on the project, and all communication occurs through the art director. And the next time you call, there is a chance that the design will be handled by another employee.
With the same with a specific performer, you can establish a relationship of trust. And if the person did not let you down and did the job well, you can always go back to him. Especially if you plan to develop its project in the future.

Who order the design, a freelancer or a studio, you choose.
On the sites of agencies, I’ve often seen similar articles such as why it is better to order the design and development from them rather than from freelancers.
There are described moments about how deadlines are broken, how freelancers disappear with money, not finishing work and so on. But I want to say that such situations are possible both with unscrupulous individuals, and with web agencies.

The post 5 reasons why it is better to order design from freelancers appeared first on Corlan.

What is SEO

Conducting a technical audit of the site, identifying errors, make up terms of reference for developers and monitor performance. There are specialists who correct deficiencies (usually webmasters and SEO in one person).
They work with the reference mass. This reviews, forums, press releases and so on.
They do usability analysis. This includes the ability to analyze the top of the competitors’ sites. Then, taking into account the analysis, a plan is made to develop the client site.

This is just the third point – about usability and overlaps with the designer and SEO.

Algorithms are now sharpened on the analysis of behavioral factors. It all comes down to what sites should be as user-friendly.

The site is slow to load – catch a warning. Fonts are too small on mobile – catch a warning. High bounce rate? So there are problems with the structure, navigation or content – lower your site in prominence. And so on down the list…

Does the designer should know SEO

Of course, a designer who has an idea of all of the above, earns extra points in the eyes of the client, as can give advice and advice on key points. But to know and understand it he should not. Website promotion – a completely different service. And such work is carried out when the site is already loaded onto the hosting, but certainly not at the design stage.

Most sites do not have H1. Others have it, but comes after H2, and so on… It seems that the designers of basic optimization in general has not heard.

Proper title tags – a very important thing for indexing and ranking pages. I’m not going to dwell on it, because the subject is too long and it won’t fit into one article.

Texts

The designer should not be able to write texts for the banding and especially optimized for key queries, articles on the blog.
You should be able to distinguish good text from bad, if we are talking about a landing page or the text for the main page of a multi-page site. This is enough.
Will be a plus ability to edit sent texts. I, for example, often do this. I can paraphrase something, reduce something, something to write more, swap places. But it is not a question of writing a text from scratch with 1000+ characters.
Working with the text, the designer works on the structure of the page, the ease of perception of the information, the presentation of content. Visual plus text improves behavioral factors, which means it will affect the site’s ranking in search results. This is your area of responsibility for seo.

What are seo texts and seo copywriting

SEO-text is a text material that is designed according to the rules of search engine marketing: the keys are inserted, the structure is followed and the quality criteria for the content are fulfilled.

The semantic core is often made for large sites. News sites, thematic blogs, online stores and information portals. Semantics can be collected as before the creation of the site, and after. It depends on the owner and the severity of the project.

If the designer was given such data, he is obliged to take into account the frequency when designing the navigation of the site design. Sections, categories, levels of nesting pages.

The basic idea – HF sections in the site hierarchy should be above the BF, and so on. Again, this applies mainly to online stores, thematic portals / blogs and news sites. Or for corporate sites with a deep branching structure.

The post What should a designer know besides design appeared first on Corlan.

The brief

The work begins with a study of the brief. I have it drafted in a way that closes all the basic questions needed to start the work.

Some customers think that the brief is either a formality or unnecessary bureaucracy. And approach it as a formality. In fact, every question is extremely important to me. Therefore, if the brief is not filled out completely, I have to correspond more with the customer to find out the missing details.

Competitors

After reviewing the brief, I start looking at competitors’ sites. Analyze them in terms of design, presentation of information, usability, etc. If I am familiar with the niche superficially, I try to study the subject deeper. It is necessary to understand how to present information taking into account the niche and the target audience.

The text

Without a ready-made text to work on a one-page can not. And often, even in the finished text you have to make changes as you work on the site.

This happens because not every copywriter, provides for all the nuances. For example, the bullet points on the volume of text should be about the same. The block “facts” should be concise.

Design

Next, the references and color palette are selected. Then we decide on the stylistics. Fonts are chosen and the appearance of UI elements.

And only after all this, we start working on the design in the program Figma. It can take place in two ways.

First. From top to bottom. This is when the design is rendered on-screen, starting with the header. That is, first carefully thought out and drawn one screen, then the next, and so on.
The second. From a larger to a smaller. In this case, the largest elements and text blocks are thrown over the entire banding first. This background, headings, buttons. We’re going from more to less, adding more and more detail. In this case, we see at once, as it will look like a landing page. It turns out at first, a kind of prototype (wireframe), where we can clearly see how the site will be easy to perceive by visitors.

At the end, a bonus, I always draw a favicon for the site. This is a small icon in a browser tab.

Adaptive

When the design is finished in the main size, work begins on the adaptive. Rendered it is also on the principle of “from more to less. At this stage, you need to think about how each element will look on a small screen smartphone and tablet. Provide for what will happen to the text. How it will change size, indentation, and so on.

If there is an anchor menu on the landing, be sure to think through and change it. Will it be minimized in a burger button, or should it be removed altogether.

Layout

After the design for all the basic permissions is finished, the landing page is made up. We do not make the HTML version, and immediately pull the site on the engine (in our case WordPress). In this case, the customer will be able to independently change the texts and images on the site, if necessary.

Optimization and customization

During the layout takes into account all the nuances. Prescribed all the Title and Description, titles are made in tags H1-H3, a microdistribution.

After the layout is carried out basic setup and SEO optimization of the landing. A robots.txt file is created, xml sitemap. Set the counter statistics.

Of course nobody will give you a guarantee that free traffic to your one-page site will flow like a river, but believe me, SEO is paying off.

Even if not immediately, but say, a few months, there is a chance that the site (thanks to the literate text and proper optimization) will rise in SERP. This means it will be stable, and most importantly free to bring you more visitors.

Thus, the landing is thoughtful in structure, technically properly configured and easy to use.

I’m by no means against designers. It’s just not our approach. And what to choose as a tool – it’s up to you to decide.

The post Developing a landing page appeared first on Corlan.

In English it sounds like – bounce rate. Based on how long the visitor is on the site and how many pages he looks at. It is on this data is based on statistics calculations.

In Google Analytics, a bounce rate is defined as a session in which the user has viewed only one page of the site and left. And it does not matter how much time he spent on that page, 10 seconds or two hours.

Is a high bounce rate always a bad thing?

In fact, not always. It all depends on the type of site and its goals.

Here’s a simple example. On a landing page to view more than one page is not possible. This means that Google Analytics will show a bounce rate of 100%. Is this a large bounce rate? As much as possible! But this will be considered a normal figure in this situation.

And if the concept of the site is to give simple answers to questions, then get hung up on the bounce rate is not worth it.

However, even on sites of this type, if you try, you can reduce the bounce rate by involving users. This can be, competent relinking, additional recommendations on the most interesting questions, etc.

What is the normal bounce rate of the site?

Conclusion. There are no clear criteria for assessing “normality”. Each site is different. The ratio of sources of traffic is different for everyone. For one site 50% bounce rate will be normal or even low. And for another – a disaster.

It is important to be able to analyze the statistics and find problematic places…

For example: the average bounce rate on the site of the online store can be 25%, but a separate page with a specific product 90%.

We are looking for the reason. Check the page itself first. Is everything working, whether the product photo is displayed, whether the description is correct, whether the buttons work, etc.

If everything is fine, go to the statistics check the sources of traffic. Need to find out where people are coming from and for what queries. Maybe the contextual advertising is not relevant ads. People come to an ad which says about a red dress for one thousand, and go to the page where the dress costs 10t.r. They feel cheated and leave. Here you have the reason for such a high bounce rate. Enough to fix the ad, and the issue is resolved.

Another example. The site provides certain services. The bounce rate on the main page has become too high. Figuring it out, it turns out…. The site began to pour motivated traffic. Began to attract users from social networks, previously acquainting them with the service.

And people began to come to the site, ready to buy it. So they come only to see the phone number or to specify the address. And since this information is in the header of the site, people leave quickly enough.

How to check the bounce rate

To see this data, you need to have statistical counters installed on your site. This is obvious.

In Google Analytics, the indicator is under “Reports” – “Audience” – “Overview

It is important not to evaluate the average performance of the entire site, but to identify sections and individual problem pages of the site with a high percentage. Analytics services have all the necessary tools for this.
What affects the bounce rate

Page load speed

One of the important factors that make a user leave a page. If the site does not load, a person will not wait, but simply close the tab.

Inconvenient navigation

I can’t stop saying that sites should have convenient navigation. The user should not be confused in the wilds of content. Although… Sometimes it’s the confusing navigation that makes users browse more than one page, wanting to find what they came for. And the bounce rate in Google Analytics will not be negatively affected by such visits.

But if people make 2-3 clicks and go look for the same thing on other sites, then Google will still realize that the site for the user was useless.

Poor design

Some user, of course, will put up with a nuclear design in the style of “take your eye out” if the information he needs is only on your site. But, that’s more of an exception.
horror

Therefore, the site should look “Let’s poor, but clean. In other words, if there is no money for an expensive design, it will be enough to neat aesthetically pleasing template.

You want the design on the site to attract people, but do not know how? For starters, make sure that the design just does not repel them.

The post How to reduce the bounce rate appeared first on Corlan.