We’ve written a comprehensive guide to Google Portals – an ambitious
new concept for mobile web design. A new page transition experience for
Chrome, this seems to be Google’s attempt at rethinking navigation. The
goal is to help developers create web experiences with links that feel
as seamless and fluid as a native app. In the world of cross-domain
experiences, this is exciting news!
“Portals are like iFrames that you can navigate to,” explained Barb Palsar, who leads Google’s global product partnerships. “When a user opens a Portal, the Portal becomes the top-level page. Portal enables fluid, composed journeys within a site or across multiple sites.”
Portals are only supported in the latest version of Chrome Canary for Android, Mac, Windows, Linux, and Chrome OS.
See Portals in Action:
A simple example is showcased on web.dev. If you want to quickly experience what Portals feel like, try using uskay-portals-demo.glitch.me.on Chrome Canary.
There are 3 features you must be familiar with:
Embedding WordPress iFrame is easier than you imagine. The traditional way to do it is by using the HTML attributes <IFrame>.To do this, simply take the URL of the page you want to embed, and use it as the source for the Tag. Then, your code becomes:
<iframe src=”your_webpage_url” iframe>
You can add more parameters to your tag:
Following this process, you should be able to easily embed any page on your posts. Furthermore, content websites such as Youtube have an in-built embedding feature for you to share the content. Simply click on Share and Embed and copy the given URL.
You can also use plugins such as Advanced iFrame plugin by Michael Dempfle to embed cross-domain content.
You can style the IFRAME itself or you can style the page inside the IFRAME. Here are some CSS styles we should include on iframes:
To center align an ‘IFrame’ or any other HTML element you can use CSS ‘margin’ property. To achieve this you should have to define the width of the element. You can set ‘margin-left: auto;’ and ‘margin-right: auto;’ to center align our iframe block.
To improve your content optimisation, try the following alternatives to IFrames for common used cases:
Google has announced that it has now launched the Portals API as an experimental feature behind a flag in Chrome Canary and is looking for developer community feedback.
Have you tried using them yet? Comment below and let us know your experience!
What are Portals and how do they work?
In May 2019, Google announced a new upgrade to iFrame technology – Portals are a new web platform API that aim to provide a new way of loading and navigating through web pages. Similar to classic < iframe> tags, portals will work with a new HTML tag < portal >, allowing web developers to embed remote content in their pages.“Portals are like iFrames that you can navigate to,” explained Barb Palsar, who leads Google’s global product partnerships. “When a user opens a Portal, the Portal becomes the top-level page. Portal enables fluid, composed journeys within a site or across multiple sites.”
Portals are only supported in the latest version of Chrome Canary for Android, Mac, Windows, Linux, and Chrome OS.
Benefits of Portals
- Seamless Transitions
- Faster Page Loading Time
- Increased Security and Privacy
Concerns Surrounding Portals:
- Data Usage
- Backward transition to the parent page
Why Did IFrames Need an Upgrade?
Issues that are commonly seen with IFrames include:- Your site becomes vulnerable to malicious sites and cross-site attacks
- They can lead to phishing your user’s data
- They can be confusing and causes usability issues
- They are bad for SEO
- They are slow to load, resulting in terrible user experience
- Cookie support is limited
Why are portals better than using iframe or classic links?
- Portals allow users to navigate inside the content they are embedding – something that iframes do not allow for security reasons.
- Portals can also overwrite the main URL address bar, meaning they are useful as a navigation system, and more than embedding content – the most common way in which iframes are used today.
- Portals have the potential to provide protection against potential phishing attacks by changing the URL bar without forcing the user to break into an entirely new popup window or tab.
- The content inside portals can be pre-loaded while the user scrolls through a page, and be ready to expand into a new page without having the user wait for it to load.
- Portals support speedier and better transitions between web pages and could be used to improve web page navigation on mobile devices, where touch gestures make using portals a seamless experience.
- Portals allow a user to watch/listen to embedded content and then transition seamlessly to its origin page, where they could leave comments or open other media.
- If you have multiple websites that cross-reference one another, you can also use Portals to create seamless navigations between two different websites.
How to use Google Portals with Your Website or Blog?
Portals are slated to be the standard way in which websites transition between links. For e.g., when a user is navigating a news site and they reach the bottom of a story, related links for other stories are embedded as portals, which the user can click and seamlessly transition to a new page.See Portals in Action:
Portals in HTML
If you’re not using it yet, start using Chrome Canary – an experimental version of the Chrome browser aimed at developers, experienced techies, and browser enthusiasts. Try out Portals in Chrome Canary by flipping an experimental flag: chrome://flags/#enable-portals. Once Portals are enabled, confirm in DevTools that you have the new shiny HTMLPortalElement.A simple example is showcased on web.dev. If you want to quickly experience what Portals feel like, try using uskay-portals-demo.glitch.me.on Chrome Canary.
There are 3 features you must be familiar with:
- The <portal> element: The HTML element itself. The API is very simple. It consists of the src attribute, the activate function and an interface for messaging (postMessage). activate takes an optional argument to pass data to the upon activation.
- The portalHost interface: Adds a portalHost object to the window object. This lets you check if the page is embedded as a element. It also provides an interface for messaging (postMessage) back to the host.
- The PortalActivateEvent interface: An event that fires when the is activated. There is a neat function called adoptPredecessor which you can use to retrieve the previous page as a element. This allows you to create seamless navigations and composed experiences between two pages.
How to embed Google Portals in WordPress
Since Google Portals are only available on Chrome Canary right now, we will talk through how to embed iFrame in WordPress. Embedding portals in WordPress is expected to be similar once the feature is rolled out in its entirety.Embedding WordPress iFrame is easier than you imagine. The traditional way to do it is by using the HTML attributes <IFrame>.To do this, simply take the URL of the page you want to embed, and use it as the source for the Tag. Then, your code becomes:
<iframe src=”your_webpage_url” iframe>
You can add more parameters to your tag:
- Width/Height– For height and Width of the iFrame window, define values in Px
- Frameborder – For displaying or hiding the Frameborder, use values ‘0’ or ‘1.’
- Align – For defining the window’s page alignment, Use values “left” “right” “right” “top” “bottom.”
- Scrolling – For disabling or enabling Scrolling inside the Window. Use values “yes,” “no”
Following this process, you should be able to easily embed any page on your posts. Furthermore, content websites such as Youtube have an in-built embedding feature for you to share the content. Simply click on Share and Embed and copy the given URL.
You can also use plugins such as Advanced iFrame plugin by Michael Dempfle to embed cross-domain content.
How can you style Google Portals? How can you center Google Portals?
Once again, we’ll take the example of IFrames since Google Portals will tend to work similarly. When you embed an element in your HTML, you have two opportunities to add CSS styles to it:You can style the IFRAME itself or you can style the page inside the IFRAME. Here are some CSS styles we should include on iframes:
- margin
- padding
- border
- Width
- height
To center align an ‘IFrame’ or any other HTML element you can use CSS ‘margin’ property. To achieve this you should have to define the width of the element. You can set ‘margin-left: auto;’ and ‘margin-right: auto;’ to center align our iframe block.
New HTML Attributes of IFrame
HTML5 brought three new elements to the IFrame element to address certain security and design issues.- Sandbox Element: The “sandbox” attribute of the “IFrame” element is a very useful security feature of iframes. When you place it in an IFrame element, you are instructing the user agent to disallow features that might cause a security risk to the site and its users. You can also use it to re-enable some features.
- srcdoc Attribute: The “srcdoc” attribute is an attribute that gives the web designer more control over the iframes as well as more security. Instead of linking to a Web page at a different URL, the web designer places the HTML that is to display in an IFeame inside the “srcdoc” attribute.
- Seamless attribute: The “seamless” attribute is a boolean attribute that tells the browser to display the IFrameas though it were a part of the parent document. If you want your IFrame to display seamlessly, just include this attribute in the element.
Alternatives to IFrames
One of the important things to note here is that IFrames can hold back your SEO efforts. This is because anything within a <iframe> cannot be indexed and Google credits the page where the embed code was grabbed and not the page where it is embedded.To improve your content optimisation, try the following alternatives to IFrames for common used cases:
- Instead of Google Maps embed, try Google Maps API that generates a JavaScript code.
- When it comes to Youtube videos, use the old embed code. You can also use a tool like Wistia.
- Make sure to add closed captions or subtitles on videos by using a .srt file
- Encourage reviews and ratings on site instead of embedding a widget from a third-party site
- Use AJAX to update a container on your web page.
- Use elements like <object> and <embed>
- Use tools like Zoid
Conclusion
While it is early days for Google Portals, it has potential. It could become the standard technology for embedding content, replacing IFrames. Portals allow a user to watch/listen to embedded content and then transition seamlessly to its origin page, where they could leave comments or open other media.Google has announced that it has now launched the Portals API as an experimental feature behind a flag in Chrome Canary and is looking for developer community feedback.
Have you tried using them yet? Comment below and let us know your experience!
