html

Designer’s Ego: Benefits and Dangers

Posted on by Mario

The Benefits and Dangers of a Designer’s Ego-ywf

Most of us certainly have an ego, some  like to be praised, and some  think that their choice is absolutely right. As a web designer, it is not a sin to have ego, for it is a human nature. However, how far an ego should take you? You can discover the good side and the bad side of an ego that may affect a designer’s work by reading the points below.

The Good Side

  • Confidence

Having a good amount of ego will produce you a good confidence, because you know that you have talents; it gives you a good start to set a level of expectation. With a good amount of confidence, you can stay focused and work hard, this is all for the sake of living up to expectations.

  • Moving Forward

Another benefit of having a healthy ego is that it can lead you to make decisions. On the other hand, getting overconfident may lead to biting off more than you can chew. However, a balance of confidence and awareness will help you decide which projects to jump on and which to let go.  Besides, you will know when to wait for the right one.

  • How to Get There

For some people, they might have a good ego naturally. Therefore, it is not difficult for them to have a balanced view of themselves and their abilities. However, some may have to work a bit harder to achieve the balance. If you find yourself in difficulties in handling your ego, you can start balancing it by realizing that you are human and that you’re going to make mistakes. However, once you make mistakes, do everything you can to correct it. You can take your mistake as a lesson to learn from and then move on.

When your confidence is low, you can remember things that can elevate your sense of pride. For example, you can recall your thoughts of the first websites you created or other good memories that can make you feel good.

The Dark Side

  • Stop Listening

One of the biggest disadvantages when you have a bad case of ego is to stop listening. Your client wants a result to be like what they expected, sometimes they demand something that are fraught with problems or make little sense which surely will make designers confuse, lose their patience, and start tuning people out. However, we suggest you to be patient.

This is because when you reach the point where you simply know better and refuse to take other people’s opinions seriously, you start creating things only to please yourself while your client is the one that you should please. Therefore, listening to others and working to understand their point of view is critical to a successful project, even though it is okay to gently argue and compromise for what you believe is best.

  •  Stop Learning

It is common to stop learning, especially when you get to a high level of proficiency with a skill (HTML, CSS, graphics, etc.). You might think that somehow you don’t need to keep up with the times as you know everything. However, soon you will realize that your skill isn’t sufficient, especially when you are working with WordPress and the old static HTML sites.

  • You Operate on Instinct Alone

Gut feelings can mean so much, but without proper research, your gut feelings will only lead to a wrong choice. Therefore, put in the required effort to ensure it’s the right one. That doesn’t mean you have to toil for hours just for doing research, but use research as a media that can facilitate our gut feeling whether it is right or not.

The overall point is that an ego should be managed very well as it can creep up and hurt any one of us. However, we believe that most of us can conquer the dark side of our ego and play it very well for the success of our project.

How to Fix the Common Magento SEO Issues

Posted on by Mario

In a mobile and SEO service world, site speed becomes one of the most important elements. However, Magento is a slow platform, which, in some cases, can negatively give impact on organic search performance because of its slow load speed.

Not only do users hate slow website, but a slow website will also impact on the crawlability of the website. Therefore, speeding up your Magento installation becomes necessary. There are several common fixes that can be applied prior to, and after setup:

  • Use a server with sufficient RAM and configure it correctly.
  • Disable Magento logs(default) and enable log cleaning in the back-end
  • Utilize a content delivery network like Cloudflare, and if you have a high-traffic website it could be worthwhile to use their Argo product.
  • Compress front-end assets and images using a compression service. Even though it won’t compromise on quality, to make a big difference, especially on mobile devices, you can reduce the weight of assets to load it.

Aside from the points above, you can find more site speed, and we would recommend that you work toward making your store load as quickly as possible on all devices.

Product SEO Issues

Simple and Configurable Products: Canonical Fixes

Mostly, e-commerce vendors prefer to use simple products alongside configurable products. Since a lot of products are configurable, Magento users will create the same sweater as a simple product to show the different variations on the product listing page.  By taking this approach, you won’t need to rewrite the content on each of these pages.

Therefore, to resolve this duplication issue, you can use the canonical tag – linking back to the core configurable canonical tag-linking back to the core configurable product to keep your product listing pages looking full and to indicate to Google that they are duplicate variants of one item.

Product Title Tags and Headers

By default, Magento tends to create under-optimized title tags and misuses page header tags, while Magento title tag is just the product name that can be both ambiguous and unhelpful. Besides, using title tag will help you manage all of your products. However, if there are hundreds of product’s names, then using tags won’t be an effective use of their time. Therefore, you may need to set a convention which includes product variables such as product type, color, and gender or even brand. Then, manually optimize their little tags for key products within the range.

Moreover, you can also use header tags to make sure that you follow the correct hierarchy for your product-listing pages.

Product URLs

There is a duplication issue that will appear when you use the hierarchical URLs, since you will have multiple variations of the product on individual URLs. Moreover, this issue isn’t only faced by Magento, but by many e-commerce platforms. Furthermore, this approach also helps reduce indexation bloat and allows you to have a single version of a product that can be nested under different categories.

Make sure that you’re using canonicals to identify the main version of each product, if you’re already utilizing category paths in your URL strings.

Moreover, you also need to ensure that you update all internal links and have your developer write the necessary rules of redirecting and that they are implemented when the switchover happens.

Faceted Navigations & Parameter URLs

Regardless of the platform, faceted navigations are notorious for creating duplicate content issues and indexation bloat. Magento is no different, so the parameter URls generated by the faceted navigation are often indexed. As Google only crawls into a portion of your website at a time and you want it to focus on the core pages that provide user value, so Indexation bloat is an issue. You aren’t optimized for crawling if there are hundreds or thousands of URL parameters for it to contend with.

Handling Parameters in Google Search Console

Amending how Google handles the URL within Google search console is a quick win to resolve indexation bloat caused by the URL parameters.

Hence, you can prevent the issue by declaring how the parameter changes the content for the user and by telling Google bot not to crawl into any of the content. Another way is to block the parameter in the robots.txt file but this can cause issues with PPC and other programmatic campaigns, so you’d better check before doing so.

Nofollow Faceted Navigation Links

Nofollow the links behind the faceted navigation might be one of the good strategies. Google won’t crawl into your links if you’re adding a no follow to these links. However, the URLs can still be discovered and can still appear in Google’s index, if they are linked to from the sitemap or from other areas of the website.

AJAX Navigation

Make sure you have an experienced Magento developer on call to avoid you from a nightmare. With AJAX navigation, you can allow users to change the content on the category/product listing page without changing the URL. Besides, you can find many technical issues caused by AJAX, such as creating excess JavaScript, as well as impacting the site speed.

Magento URL Rewrites

A common problem is that Magento can produce category or product URLs that revert back to the original/catalog/path, and duplicate the URLs produced based on the title of the page. Since some URLs can revert back without reason and no 3xx redirect will be applied, these URLs should be blocked and monitored.

Number Appendages

Platform’s habit to add a number to the end of the URL is another common issue with Magento’s rewrites. However, this can happen when the URL is already being used and the rewrites are replacing the old URL without changing it. If these happen, it can cause a number of duplicate URLs and can, in some cases, be a big issue if undetected and unresolved.

Pagination

Product listing pages broken up into pages; this is good for the user but can lead to duplicate blocks of text. To allow webmasters to indicate paginated pages, Google introduced the rel=”next” and rel=”prev” tags in 2011. To add your knowledge, we also introduce robots=”noindex,follow” tag to the paginated pages.

In conclusion, remember that every Magento implementation is different. Then, custom templates will cause new SEO challenges, but don’t worry as it can be identified on a case by case basis. To make sure that every aspect of the Magento site is optimized, a technical SEO should be included at the earliest stage of the site build process and remain involved throughout the development and post launch.

Myths and Realities of Replaced elements in HTML

Posted on by Mario

Replaced Elements in HTML Myths and Realities - YWF (2)

According to official specs, replaced elements are content outside the scope of the CSS formatting model, such as an image, embedded document, or applet. For instance, the content of the HTML IMG element is often replaced by the image that its src attribute designates. Besides, replaced elements often have intrinsic dimensions, such as an intrinsic width, an intrinsic height, and an intrinsic height specified in absolute units. Now, you may have a general description of what a replaced element is, but as a web developer, you have to look deeper about replaced elements.

Replaced Elements in the Real World
To discuss in a full description about the replaced elements, we need to go to a different resource, namely the Rendering section of the HTML Living Standard document. But, when you look deeper, the specs can be confusing. This is because some HTML elements operate as replaced elements all the time, while other do it only in specific circumstances.

Embedded Content
Embedded content is the first category of replaced elements. Embedded content means any element that imports another resource into the document, or content from another vocabulary that is inserted into the document. While these external resources have the intrinsic dimensions that match the requirements of the definition.

Embed, iframe, and video are the main elements in this category. Since they always import external content into your document, these elements are always treated as replaced elements. There are more elements that a bit more complicated that fall into this category only in special circumstances, such as:

  • applet – Treated as a replaced element when it represents a plugin, otherwise it’s treated as an ordinary element.
  • audio – Treated as a replaced element only when it is “exposing a user interface element”. Will render about one line high, as wide as is necessary to expose the user agent’s user interface features.
  • object – Treated as a replaced element when it represents an image, plugin, or nested browsing context (similar to an iframe).
  • canvas – Treated as a replaced element when it represents embedded content. That is, it contains the element’s bitmap, if any, or else a transparent black bitmap with the same intrinsic dimensions as the element.

Images
Images are others elements that treated as a replaced element with the intrinsic dimensions of the image. This category also includes the input elements with a type=”image” attribute.

When the image is not rendered on the page, things get a bit more complicated for several reasons. The <input type=”image”> will be displayed as a normal button.

Default Size of Replaced Elements
We can understand this elements by these three basic rules:

  • if the object has explicit width, height and ratio values, use them;
  • if the object only has ratio, use auto for both width and height while maintaining the said ratio;
  • if none of these dimensions are available:
    – use width: 300px; height: 150px when the viewport is larger than 300px
    – use “auto” for both width and height and a ratio of 2:1 when the viewport is smaller than 300px;

What About the Other Types of Form Controls?
There are many misconceptions about other types of form controls are replaced elements too. After all, these elements are also rendered with a default width and height. In fact, most people consider intrinsic dimensions actually comes from the following line:

Each kind of form control is also described in the widgets section, which describes the look and feel of the control. Another reason why form control looks different from one browser to the next and from one OS to another:

The elements defined in this section can be rendered in a variety of manners, within the guidelines provided below. User agents are encouraged to set the ‘appearance’ CSS property appropriately to achieve platform-native appearances for widgets, and are expected to implement any relevant animations,etc, that are appropriate for the platform.

Conclusion
It is easy to get confused about replaced elements and form controls. But, they are different categories of HTML elements, with <input type=”image”> being the only form control that is a replaced element.