Web Design

Meet Phase - Why And How Do They Reinvent Digital Design Software?

Digital design and marketing have been in a love affair for many years - and are now practically inseparable. Marketers, designers and developers work hand in hand building web and mobile products. And the ultimate success is impossible without a close alignment and collaboration between all three.

There has been however a huge gap between the three parties. Designers draw pictures. Developers write tons of code.

And marketers? They often sit idle waiting for the former two working. And when finally they have a look at the product - it often turns out being not exactly what the consumers wanted. It may look “right” - but it’s not how it works. Repeat the process.

Reason? - Our Design Tools Are Inadequate

Our design tools were built to create print images. Back in the times when feedback loop was fast and a single “product” took just hours, not days and weeks to create.

Modern, digital products no longer work this way. Developers need to know exactly how the product works and “feels” - not just how it looks. Designers must not write code and transform into the mystical “unicorns” - it’s not what they do best. And marketers must understand and be able to market the products before they’re even finished.

Phase - Reinventing Digital Design.

We got a chance to chat with Vlad, a co-founder of Phase - the new digital design tool that got announced last month. Phase aims to bridge that gap in the creation of digital products.

Vlad, so could you please tell us more about what Phase is?

Phase is a digital design tool. It enables you to create advanced interactions visually, without any limitations or writing code. We want to destroy the division between developers and designers, allowing the latter to create whole working digital products themselves.

Why is it so different?

All the previous design tools tried to “patch” some isolated problems in our design process. The result is that designers must now use 2, 3 or even 5 separate tools in their workflow.

In the dynamic digital world, it’s no longer enough to just design an image. Designers are tasked with designing how exactly the products must work. Code is one way to do that. Code is powerful and flexible - so let’s write code? In the creative process, however - code slows everything down. A lot.

Phase is all visual, and lets designers design fully working products. Phase 1.0 is going to let you import Sketch files and create advanced interactions. In the future versions, we will build full app previews, visual version control, real data, and export to code API (any platform and language/framework).  

So when is Phase getting released?

Phase 1.0 is going to see the world early this summer. We’ve now opened the beta waitlist. If you want to lay your hands on Phase beta - welcome to sign up on our website.

Finally, what are the people that stand behind Phase?

We are a small team still: six people, coming from five different countries and three continents. What unites us is the passion for design and software.

Thank you, Vlad! We’ll be looking forward to the release of Phase and further news on the product.

https://youtu.be/E5xeEXewW9o

by Nick Loggie

How to improve your AMP pages by using Google Search console

The recent statistic shows that there are over 1.3 billion websites hosted on the internet today. And, this number is increasing every single day. What this means is that more and more information is being transferred via the information superhighway or the internet.

Due to this increase in the volume of information, the problem of the slow internet is also arising. The demand for higher speed has led to an invention of 2G, 3G, and so on.

As an internet provider can’t limit the flow of information on the internet, the only thing they can do is upgrade the technology for a better internet speed. Despite all the efforts, there are still the issues of slow internet faced by many people all over the world.

For e-commerce businesses, a slow internet is equivalent to the loss of dollars. It’s crucial for an e-commerce business for their pages to load fast for a better conversion. Today, more than 50% of shipping conducted on the internet is done using a mobile device. Therefore, any e-tailer hoping to be successful will need to ensure a smooth customer experience when viewing products on a mobile phone. Due to the problem of the slow page load, the Google and Twitter came up with AMP pages.

The full form of AMP pages is Accelerated Mobile Pages. In simple words, AMP pages are simply the stripped-down form of HTML. These pages are designed to be super lightweight for significantly improving the page load speed.

Talking about social media platforms this project is kind of a response to the Facebook Instant Article introduced by Facebook. One of the great things about AMP pages is that it’s an open source, which means all kinds of designs are open to changes.

Why AMP Pages load faster than normal pages?

The AMP pages are also known as the diet HTML pages. There is a restriction to use certain HTML tags like forms when preparing AMP pages. Furthermore, the full version of CSS is now allowed to use in AMP pages.

The users are asked to use a streamlined version of CSS while creating AMPs. And, the use of Javascript is completely banned in AMPs. The off-shelf JavaScript library is provided to the users who want to use some Javascript.

The whole idea of AMP is readability and pure speed. The images on the AMPs are also not loaded until and unless the user scroll and view the images.

Factors to consider before using Google Console for optimizing AMPs

Currently, the AMPs are only for mobile searches. According to the statistic, around 125 million American consumers use smartphones, and the usage of the smartphone is rapidly increasing over the period of time.

The use of AMPs will help to improve Google ranking in mobile search. However, it’s important for webmasters to optimize their AMPs. We will discuss how to use Google Console for optimizing AMPs in the next section of this article.

Let’s first discuss the factors to consider before using Google Console for optimizing AMPs.

• The AMPs must be designed, according to the AMP HTML guidelines.
• In case you have both AMP and non-AMP webpage version, you must use “<link rel="amphtml" href="https://www.example.com/url/to/amp-version.html" />” for letting Google know about AMP versions.
• Validate your AMPs.
• Make use of structured data markup to observe a better visibility on Search Engine Ranking Position (SERPs).

How to use Google Console for enhancing AMPs?

After you’re done with taking care of the factors that I’ve mentioned below, you’re all ready to use the power of Google Console for enhancing AMPs. Here are some of the ways to use Google Console for enhancing AMPs.

1. Make use of AMP-experiment for optimizing AMPs

The first way to use Google Console is to make use of AMP-experiment <amp-experiment>. This feature offered by Google Console can be used by the webmasters for testing AMPs on the basis of user experience.

There are plenty of ways offered to the users for using AMP-experiment. The users can add more than 1 URLs for the experiment purpose. And, there are ways for users to test several components as well with the AMP-experiment feature. (https://github.com/ampproject/amphtml/blob/master/spec/amp-var-substitutions.md)

This experiment allows the users to collect data while diverting the traffic they receive.

• <amp-pixel>: This behaves similar to the pixel that is used for the tracking purpose. It can be used by the user for the purpose of counting the page views.
• <amp-analytics>: This is a pixel that helps in getting the hold of analytics data that are associated with the AMP document.

In order to carry out an experiment on AMPs, the user should first configure the experiment. The user is required to use the tag <amp-experiment> for specifying experiment behaviors. The JSON configuration comes into play for specifying experiment behaviors.

Here are some of the attributes that can be specified with JSON configuration.

• This allows the users to know whether it is a compulsion to assign users to experiment variables or not. The JSON configuration allows you to know if it is necessary or not to always use same users for the experiment purpose or not for the specific attributes.
• The users can know the amount of traffic required to be sent to specific experiment variants.

In addition to these features, the users also have an option to make use of VARIANT substitution for seeking out the variants that are assigned to the specific users. This substitution can be extremely useful, especially when there is a need of multiple experiments.

2. Make use of AMP-analytics

The second way to use Google Console for optimizing AMPS is by making the use of AMP-analytics. The amp-analytics components make it possible for the users to keep track of the user interactions in the forms of traffic, page impressions, and so on.

This feature is quite useful for collecting specific metrics that may make an impact on events. The AMP-analytics is supported by multiple analytics providers.

In case the users decide to make use of multiple amp-analytics for configuring data sets and endpoints, the AMP controls and shares all the specified data to the analytics providers. This is the script that is used below the <head> tag. <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

However, you must keep one important thing in your mind. It’s a must to use your own account number, not the account number of a placeholder while utilizing the feature of amp-analytics.

With the help of JSON configuration, it’s also possible for users to include various events in their experiments. The Javascript is missing in JSON format, which may increase the chance of making mistakes.

The AMP-analytics is a very dynamic platform. It offers the users with useful new developments and features for acquiring insights to add to the AMPs performance. For the purpose of improving the user performance, it’s recommended for the users to include a tab AMP roadmap.

The inclusion of the tab AMP roadmap allows the users to keep track of the latest developments.

3. Test the AMPs validity with the help of AMP Plug Validator

The final way to use Google Console is via the use of AMP Plug Validator. This feature is necessary for the validation of AMPs. You can keep track of the performance of AMPs with the use of AMP Plug Validator.

Keeping track of the AMPs performance helps in ensuring that your pages are loaded as fast as possible. If there are faulty HTML pages, the AMP Plug Validator shows the prompt message, which offers the tips to resolve the issues.

Here is the step-by-step instruction to use AMP Plug Validator via Google Chrome.

• Open Google Chrome at first and load AMPs.
• Go to Developer’s tool and choose console
• Make #development=1 to the URL and refresh the page

After doing this, the console will automatically show the status of your AMP pages. The console will automatically show the error message in case there is an error on the page.

Here are the validation indicators provided by the console.

• If there are errors within AMPs, the console shows the red signal.
• The green signal is shown by the console when the AMPs are free of errors.
• If the current page is not AMP, but there is an AMP, the console shows blue signal and redirects the user to AMP.

The use of these features allows you to keep track of errors and it also provides tips to resolve the issues.

Final Thoughts

The task of optimizing AMP pages with Google Console is not really a difficult task, and you might have understood it by now. However, it does take some work to optimize AMP pages via Google Search Console.

According to the statistic, there are over 199k websites that are actively using AMP pages. According to the study, the majority of the publishers using AMP pages have experienced higher view-ability rates after the use of AMP pages.

Make use of the AMP pages; optimize them via Google Search Console and experience the amazing power of this technology. Just use the features that I have mentioned to begin with. I hope this article has helped you out.

by Stevan Mcgrath