With the launch of google’s new technology called Portals, loading, and navigating through web pages will be a new experience for the users. Google Portals is the whole new concept of web designing, SEO, especially for mobiles, and this project will surely redefine the navigation process through websites.
Why Google Portals?
Portals by Google has been launched to serve both the developers and the users. Ideally, it provides the developers with a unique way with new tools to redesign the overall web experience, and on another side, users will get a smooth transition in a way the content will be preloaded while the users’ scrolls through the webpage, the features that are important for SEO.
- Google Portals an Upgraded Technology
Portals are the upgraded technology to its predecessors’ iFrame. The difference between Google Portals and iFrame is:
- iFrame used to work with HTML tags <iframe>
- ·While Google Portals will work with new HTML tags <portal>
Launched at the beginning of the year 2019 in developer conference Google tags will allow the developers to embed the remote content on their web page.
Portals are just similar to the iFrames rather more advanced version of its predecessor, when the user opens up the webpage it will become a top-level transformed webpage.
As an example, you can think about your favorite sports news website. While you are reading the whole stuff and reached the bottom of the site then here comes the related links embedded as Portals which when clicked upon, takes you to a new webpage with a seamless transition.
- Supporting Operating systems
Many of the advanced operating systems are supporting Google Portals. The features of Portals can easily be accessed through the latest versions of Chrome Canary of Android, Windows, Linux, Mac, and the Chrome Operating system.
Google Portals Benefits and concerns
Benefits
Until now you would have got an idea as to how important this upgrade is going to be for new overall web experience. Below have been presented with some of the quick benefits of Google Portals.
a) As a user, you will feel a smooth transition while surfing from one webpage to another.
b) Due to the advanced Google Portals, the users can navigate inside the content they have embedded which iFrame doesn’t allow.
c) The page loading is too quick, rather the user scrolls through the page, and the content is preloaded simultaneously.
d) Google Portals assures privacy and security thus making it useful for SEO services.
e) A top-level browsing context is used in Portals.
Concerns
Apart from the benefits discussed till now it has a few concerns as well which might need be addressed to make it better.
a) The usage of Portals increases data consumption.
b) The backward transition from the existing page to the parent web page.
Rather, these small challenges are much less as compared to the benefits mentioned above.
Why not iFrame?
Although iFrame has been widely used due to some of the major problems there is a need to switch now. Let’s discuss a few of them:
- Using iFrame in websites makes it a malicious web form which can result in a cross-site attack.
- Your website may be vulnerable to phishing your user’s personal information.
- In-fact the malicious user can perform any unauthorized activity on your website such as running a plugin, hijacking the user’s keystrokes and clicks, or change the source URL.
- iFrame causes usability errors as well such as canceling the user’s back button resulting in frustration.
- At times you might feel the content within iFrame is missing or doesn’t fit well or it might look odd as well.
- Sometimes to open an iFrame content the users are navigated a new browser window, hence creating a lot of confusion.
- Using iFrame impacts the device storage as it requires more memory and extra supported computing sources as well.
- If you will switch to a new source URL then there are severe chances of the missing iFrame content.
- This impacts the site navigation.
- And finally, it creates the problems in SEO services because the content is not indexed properly thus unavailable to appear on the Google search result.
These were some of the reasons to upgrade from iFrame to Google Portals.
Benefits of Switching to <Portals> from <iFrame>
a) Google Portals vanishes the risk of phishing attacks as compared to the malicious web form of iFrame thus securing the data of users.
b) Portals create a safe and secure surfing environment for website users.
c) This creates a user-friendly interface so that the users can easily navigate through your website content while iFrame is prone to malicious cross-site attacks.
d) Google Portals can overwrite the URL in the main address bar hence there is no chance of missing website content which improves the site navigation.
e) Google Portal pre-renders the content this creating a seamless transition between the webpages while in iFrame the users have to wait for the browser to finish the rendering hence creating an annoying experience.
f) A website structured in Portals allows you to watch or listen to any embedded video and then go back to its origin seamlessly to leave any comment. Rather going back to another media is also effortless with Google Portal.
g) For cross-reference sites as well the transition is seamless and within a few seconds, you can land from one page to another.
How to use Google Portals effectively for your Websites?
To get benefited from Portals you need to use it on your website. Ultimately seeing is believing.
- Portal in HTML
At first, you need to start with the compatible latest experimental version of chrome called Chrome Canary which is designed by Google for techies and experienced developers.
The latest and experimental version available is chrome://flags/#enable-portals that you can try on Chrome Canary.
Now as this is an experimental version hence the confirmation of DevTools is important after getting confirmation from Portals. The reason for confirmation is to verify that you have access to the new version of HTMLPortalElement.
- Embedding Google Portals in WordPress
Now as we know that the Google Portals are available to use in Chrome Canary also it is expected that the embedding process of Google Portals to the website will be identical to that of iFrame.
Hence let’s understand first how the embedding is done in iFrame to get a rough idea of how the embedding will going to be in Google Portals.
Here is how the embedding of iFrame tags is done in WordPress sites, just add the HTML attribute <iFrame>, that’s it…
Let’s understand with an example, suppose you want to embed your webpage URL, you can use it as a source of the tag and the code will be like this:
<iframe src = “your_webpage_url” iframe>
Additional parameters that can embed in the code
a) Height and weight: To embed this parameter in iFrame you need to define the values in Px.
b) Alignment: You can use the values such as left, right, bottom, and top to embed the alignment parameters.
c) Border Frame: You can use the binary values “0” to hide and “1” to display the Frame Borders.
d) Scroll through Page: The feature can be enabled using the value “Yes” or disabled using the value “No”.
Further, you can use the text editor to post the values which will help you in displaying the page quickly. In the same way, you can embed any page in WordPress using the elements discussed above. The same way YouTube videos are embedded which makes the sharing of videos easy.
Styling in Google Portals
Because Google Portals is an advanced version of iFrame technology hence the styling platform will remain the same. CSS styles are used for embedding, rather you have two choices either to style the page in an iFrame or to style an iFrame as a whole. Let’s dive deeper into CSS styles:
a) Height
b) Width
c) Border
d) Margins
e) Padding
You can use the above-mentioned styles to add Shadows, Scrolling Border, Rotation, Corners.
You can also use the CSS margin attribute to align the iFrame to the center. Alternatively to set the iFrame to the left margin use attribute “margin-left: auto” and to align the iFrame to right use attribute “margin-right: auto”. And this process needs you to describe the width of an element as well.
iFrame upgraded HTML attributes
After the introduction of HTML5 up-gradation, 3 new features have been brought up for iFrame attributes to create more secures experience:
Sandbox Elements
This attribute will enhance the security element which was a big concern with the traditional iFrame. These features will disable all the factors causing a security threat to your website.
Srcdoc Element
This attribute provides more control over iFrame and security to the website designers. With the srcdoc attribute, the designers can place the HTML inside the iFrame instead of webpage linking at different URLs.
Seamless Element
This attribute adds a Boolean element to the browser, hence it interacts with the browser to display the source or parent document. As the name itself says you can add this element for a seamless display.
Conclusion
Google Portals carries immense potential for great user experience in terms of seamless transitions between the pages and security as well. It is capable enough to replace the iFrames and covers the disadvantages of the latter technology making it highly useful while structuring the SEO services.
Moreover, the Portals has made the embedding of content or videos smooth and hassle-free, users can easily watch and listen to them and go back to its source page to review or comment. Right now the setup is available on experimental platform Chrome Canary for feedback from developer or techies and soon can be launched full-fledged after further improvements.
You might also like…
You can Lose your Customers without Good Web Design
Making Your Website Work for You
——————————————————————————————————————————————
Author Bio
Sanjeev is a Digital Marketing Expert at PNJ Sharp Tech. We utilize her spare time by composing informative and quality content for her audience.
