Month: August 2017

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.

 

Make More Sales with Social Selling

Posted on by Mario

How to Use Content Marketing to Generate Social Sales_YWF

Generating sales is the ultimate goal of all marketing. So, marketers should put their best effort. One of the ways is by promoting content marketing that can help you increase revenue. But, don’t you know that you can also leverage your content for social selling? Besides, one study found that social selling report a year-over-year sales growth. If you are interested to know more detail information about social selling, you can continue to read this article.

What is Social Selling?
Social selling is interpreted as using social media the way it was supposed to be used: being social. This technique is usually used by many SEO services to leverage the amount of real buyer. For instance, you provide useful content, answer questions, and have conversations with prospects. Furthermore, you should have one main goal: getting your potential customers to respond to your efforts. You can start your social selling by getting them to comment on a status update or reply to a post. Over the long run, this act will turn into getting them to respond to an email or schedule a call.

How to Use Content Marketing to Generate Social Sales
There’s no better example of the selling power of blogging than great content. The main idea is to answer the most common question in your social media customer service responses. Remember that you should provide solutions to their problems, not just push those articles out on social media.

What Kind of Content Helps with Social Selling?
Not every content can generate sales, but there are some content that can generate sales, such as:

  • How-to guides for common problems in your industry
  • Useful FAQ pages
  • Explainer content about how to use your product or service
  • Video content
  • Webinars
  • Shocking or surprising information that gets people to take action.

What to Do After You Generate Traffic
You understand how to use content and social media to generate traffic. Now it’s time to turn these leads into sales. It starts by understanding more about your leads. Google Analytics is great. But, it doesn’t reveal enough information about your individual prospects to help you nurture a relationship with them.

Enhance Your Analytics for Easier Outreach
You can install Lead feeder to enhance your social selling. It works on top of Google’s tools to reveal data related to your site’s anonymous visitors. Lead feeder will actually show you which companies your website visitors work for. To determine what offices they’re browsing from, it uses their IP addresses. You’ll get a lot more info about the company, including a list of LinkedIn connections you have that are associated with that company.

Moreover, it tracks which pages your anonymous audience members look at, which can help you segment them. Then, it automatically pushes this data to your CRM, where you can sort them by quality, regency, and other factors. As a result, you’ll get better insight into the traffic you’re already getting. So, you can follow with targeted outreach messaging via your social channels and land more clients.

Get Maximum Conversions by Setting Up your Content
Our main goal is not only driving traffic, but also to get more info about your visitors. Then, make sure that they will come back. That’s why it’s important to have strong, highly-relevant calls to action within your content. Using a simple “subscribe to get our updates” won’t cut it. You need to offer something better.

Email Outreach to Enhance Your Social Selling
When you get your visitor’s contact info, it’s time to make a deal. And the best way to reach them is via email or social media. This can be a good way to interact with them. Also, get them on the phone, or even lead them directly to a sales page on your website.

Summary
Both social selling and content marketing are the epitome of digital marketing. So, if  you can combine the two, you can drive traffic like crazy and turn them into prospective buyers.

What’s rel=”noopener” in WordPress & How to Remove It

Posted on by Mario

wordpress

When you upgrade your WordPress to 4.7.4 version or newer, you will notice a new tag rel=”noopener”. It is located alongside the target=”_blank” tag in the HTML editor. When you make them open in a new tab, the tag is automatically added to all internal and external links.

As a web developer, you may be wondering what this tag does? Does it affect your websites negatively in any way? So, in this article we will discuss what is rel=”noopener” in WordPress and how to remove it. If you curious about rel=”noopener”, you better check this out!

What is rel=”noopener”?
Even though, it may sound a bit suspicious, but it is actually a security fix that prevent malicious links from taking control over an opened tab. Usually, window.opener Javascript object is used to control a parent window using a child window. With this feature, hackers can switch user’s currently opened website with a fake one and steal information, such as login details. Therefore, to prevent this, rel=”noopener” blocks the use of the window.opener Javascript object. If window.opener does not work, then a tab can’t control another tab.

In fact, on 23rd November 2016, this security fix was added in TinyMCE plugin. Actually, WordPress uses TinyMCE as its text editor; it also got updated with this feature in WordPress version 4.7.4.

Is It Bad for your Website?
You may relieve as it doesn’t have any bad impact to your site. Some WordPress users may be making all internal and external links “nofollow”, which cause bad score for SEO. But, the fact is rel=”noopener”is just an instruction for the user’s browser to cease the use of the window.opener Javascript object.

This is because SEO relates to search engines and they don’t interact with rel=”noopener” tag. It works the same for analytics software that completely ignores this tag.

At first, this might have been a bit of a problem when WordPress added rel=”noopener noreferrer” tag before the fix was released with WordPress version 4.7.4. In the older version, “noreferrer” blocked the link from knowing where it actually came from.

Even though, it may not affect your SEO, but it may affect some of the analytics tools and affiliate programs. However, in WordPress latest version, “noreferrer” tag has been removed , so you should have no problem with rel=”noopener” tag. SYou only need to make sure you have updated to the latest version of WordPress.

How to remove rel=”noopener”
As it is stated above, rel=”noopener” doesn’t affect SEO. It also has no impact on analytics tools, and affiliate links also won’t break. It works to protect your users from any potential malicious links that could hijack their tabs. In fact, it only will stop when you want to use the window.opener Javascript object for any purpose.

As it is integrated into the WordPress text editor, removing rel=”noopener”can be a bit difficult. Moreover, it will be added back again when you save the document, Even if you manually remove it from the HTML code. So, the best solution is to disable this feature from the TinyMCE plugin itself.

However, you may need to add some lines of code in the functions.php file of your WordPress theme. In the functions.php file, copy and paste the below mentioned code and save it:

// Note that this intentionally disables a tinyMCE security feature.
// Use of this code is NOT

recommended.add_filter(‘tiny_mce_before_init’,’tinymce_allow_unsafe_link_target’);

function tinymce_allow_unsafe_link_target( $mceInit ) {
    $mceInit[‘allow_unsafe_link_target’]=true;
    return $mceInit;
}

This will stop WordPress from automatically adding rel=”noopener” tag in your posts. But, you may need to mannually remove the added tags from posts saved after WordPress 4.7.4 update.

 

In Summary
Even though, it may sound suspicious but you have nothing to be afraid of on the rel=”noopener’ tag. It will secure your website visitors. But, you should embrace this new edition of security feature, if you want to use the window.opener feature.