• Ultra Boost
  • Ultra Boost

8 Plugins to Turn Your WordPress Site to a Mobile App

For every major publication or business you see online, you might find a mobile version of the site. Be it a responsive mobile form of the desktop version or a native app, having mobile presence is an important aspect for many establishments seeking to have an online presence.

In fact, the after-effects of mobilegeddon warrants a real look at making sure your site render nicely for view on mobile devices.

How To Tackle The After-Effects of Mobilegeddon

How To Tackle The After-Effects of Mobilegeddon

Have your site managed to survive the recent Mobilegeddon? If you haven't even heard about it, don't panic…Read more

In other words, you site should be as mobile-friendly as possible. But what if you don’t have the means or ability to produce a mobile version of your site? Don’t worry, just use one of these plugins to give your site a mobile-friendly version for web, Android and iOS devices.

  1. Worona

    Worona converts WordPress site content into native Android and iOS mobile apps. The app builder is built in modular fashion and allows adding premium extensions for more features such as push notifications, rate my app, etc. Worona’s team is working to offer trendy themes and styles to customize your app and to support custom content and support-pages right in the apps.

  2. WordApp

    WordApp transforms your e-Commerce, forums or even dating website into a mobile app to help boost mobile traffic. It offers a number of customization options including the option to modify the theme & style of your mobile app. Some of its premium features include push notifications, a native iOS app, and much more. The premium apps can also include Adsense advertisements.

  3. WordPress Mobile Pack

    Web apps built using this plugin offers an almost native look & feel. You can also customize your mobile application with custom fonts and colors, and even add your own logo for custom branding. Its pro version allows creating Android & iOS apps, and brings more themes, monetization options, social features and more.

  4. Androapp

    Androapp is a flexible plugin to generate a mobile app for Android which loads faster and smoother compared to others. Among its features are infinte scrolling, dynamic settings, deep linking support, caching and if you’re looking or a white label option, you’ve found it. You can also monetize your mobile app with Admob and Appnext ads.

  5. Blappsta

    Blappsta turns your WordPress blog into a native Android or iOS app. A cool function it has is that it lets you test and preview the experiments using its ‘Blappsta Preview‘ apps. The resulting app can display popular articles, has support for video, displays your Facebook page (optional), has Contact form 7 support and more.

  6. appful

    appful is one for content creators and online publishers as it rehashes your online site content or YouTube channel into beautiful iOS and Android apps. You will only be charged once you are satisfied with the final look of the app and it has been published. It has support for comments, social media sharing, offline reading, logo placement, and anti-adblockers.

  7. MobiLoud

    MobiLoud helps you convert a desktop site into a native mobile app for iOS and Android devices. It supports mobile advertising and monetization efforts via MoPub, Google DFP, Admob, Adsense etc. Commenting and social sharing is made easy on top of RTL support and multi-lingual interfaces (20+ languages). Once installed, the plugin provides a free preview of the app and the trial lasts 21 days before switching to a premium plan.

  8. Wiziapp

    WiziApp lets you use your blog’s responsive theme or any of their mobile themes to generate an Android/iOS app for your site. Users can download an offline version of the website. Along with push notifications Wiziapps also can convert your site or blog to into an HTML5 web app. It displays AdMob ads to maximize monetization and boost revenues.

    Which is your favourite WordPress plugin to build mobile apps for your blog? Do you know any other such plugin? Don’t forget to tell us using the comments.

10 Important Accelerated Mobile Pages (AMP) Components You Should Know

Accelerated Mobile Pages or AMP is Google’s initiative to make the mobile web faster. To achieve this goal, the AMP standards restrict how you can use HTML, CSS, and JavaScript, and manages the loading of external resources, such as images, videos, and ads via its own runtime.

This entails that you cannot use either any custom (author-written or third-party) JavaScript or any resource-related HTML elements such as images and videos in your AMP documents.

Beginner’s Guide to Accelerated Mobile Pages (AMP)

Beginner’s Guide to Accelerated Mobile Pages (AMP)

Accelerated Mobile Pages is Google's initiative that intends to solve the biggest problem of the mobile web –…Read more

To bridge the gap between users’ needs and best performance practices, AMP has specific Components you can use in place of these excluded elements.

AMP Components are specific HTML tags. They behave similar to regular HTML tags: they have opening and closing tags, attributes, and most of them can be styled with CSS. They can be easily recognized, as they always start with the amp- prefix.

There are two types of AMP Components: built-in and extended Components.

Built-In AMP Components

Built-ins are built in to AMP’s JavaScript runtime, so you don’t have to separately include them.

1. amp-img

<amp-img>replaces the <img> tag in AMP HTML documents. You need to add the src and alt attributes just like when you work with the regular <img> element.

<amp-img> also has two other required attributes: you always need to specify the width and height attributes in integer pixel values, as this allows the AMP runtime to calculate the layout in advance.

If you want to make the image responsive, add the layout="responsive" attribute. The layout attribute controls the layout in AMP documents, and it can be added to any AMP Components (learn more about this on the AMP Layout System).

1
2
3
<amp-img src="img.jpg" width="350" height="200"
    layout="responsive" alt="My Image">
</amp-img>

You can also use the srcset attribute on the <amp-img> tag to specify different images for different viewports and pixel densities. It works the same way as with non-AMP images.

2. amp-video

<amp-video> can be used to directly embed HTML videos in AMP HTML documents. It replaces the <video> in AMP files. The <amp-video> tag lazy loads videos in order to optimize performance.

The source of the video must be served via the HTTPS protocol. You’re required to add the width and height attributes, just like with the <amp-img> component.

The <amp-video> tag has many optional attributes, such as autoplay and poster which you can specify to fine-tune how your HTML5 video is displayed.

<amp-video> supports mp4, webm, ogg, and all the other formats supported by the HTML5 <video> tag.

If you want, you can also add fallback videos for users with browsers that don’t support HTML5 videos, using the fallback attribute and the <source> HTML tag.

1
2
3
4
5
6
7
8
<amp-video width="350" height="250"
  src="https://example.com/video.mp4" layout="responsive" autoplay>
  <div fallback>
    <p>Your browser doesn't support HTML5 videos.</p>
  </div>
  <source type="video/mp4" src="myvideo.mp4">
  <source type="video/webm" src="myvideo.webm">
</amp-video>
3. amp-ad and amp-embed

<amp-ad> provides you with iframe sandboxes in which you can display your ads. You must serve your ads via the HTTPS protocol.

You cannot run scripts supplied by your ad network by yourself. Instead, the AMP runtime executes the JavaScript of the given network inside the sandbox. You only need to specify which network you use, and add your data.

The <amp-ad> component requires you to add the dimensions of the ad using the width and height attributes.

You can define the ad network you use with the type attribute. See the list of supported ad networks.

Each ad network has its own data-* attributes you also need to add. To see which one you need, click on your ad network in the above list.

1
2
3
4
5
<amp-ad width="300" height="250"
    layout="responsive" type="adsense"
    data-ad-client="ca-pub-2005682797531342"
    data-ad-slot="7046626912">
</amp-ad>

<amp-embed> is the alias of <amp-ad>, the documentation doesn’t say much about it other than it can be used instead of <amp-ad> when it’s semantically more accurate. As Google promises to evolve ad-related AMP components over time, this may change in the future.

4. amp-pixel

With <amp-pixel>, you can add a tracking pixel to your AMP HTML documents to count page views. It has only one attribute, the required src attribute, in which you need to specify the URL belonging to the tracking pixel.

The <amp-pixel> tag allows standard URL substitutions, which means you can generate a random URL value to track each impression.

See AMP’s URL Substitution Guide if you want to use this component. Note that you cannot style the <amp-pixel> component.

1
<amp-pixel src="https://example.com/pixel?RANDOM"></amp-pixel>

Extended AMP Components

As extended AMP components aren’t part of the JavaScript runtime, you always need to import them in the <head> section of the AMP page on which you want to use them.

Note: component versions may change in the future, so don’t forget to check the current version in the documentation.

5. amp-audio

<amp-audio> replaces the <audio> HTML5 tag, and makes it possible to directly embed HTML5 audio files in AMP pages.

To use it, you’re required to specify the src, width and height attributes, and you can also add three optional attributes: autoplay, loop and muted.

It can also be a good idea to add fallback audio files for users with browsers that don’t support HTML5. You can do this by using the fallback attribute and the <source> tag, just like with the aforementioned <amp-video> component.

The <amp-audio> AMP component supports the same audio formats as the <audio> HTML5 tag.

1
2
3
4
5
6
7
8
<amp-audio width="200" height="100"
  src="https://example.com/audio.mp3">
  <div fallback>
    <p>Your browser doesn't support HTML5 audio.</p>
  </div>
  <source type="audio/mpeg" src="mysong.mp3">
  <source type="audio/ogg" src="mysong.ogg">
</amp-audio>

To use <amp-audio>, include the following script in the <head> section of your AMP document:

1
2
3
<script async custom-element="amp-audio"
    src="https://cdn.ampproject.org/v0/amp-audio-0.1.js">
</script>
6. amp-iframe

<amp-iframe> displays an iframe in AMP documents. <amp-iframe> has been made to be more secure than regular HTML iframes. Therefore they are sandboxed by default.

There are some rules related to <amp-iframe> you must follow to pass validation.

How to Validate Accelerated Mobile Pages (AMP)

How to Validate Accelerated Mobile Pages (AMP)

In our last AMP tutorial, we have shown you how to adopt AMP (Accelerated Mobile Pages) to gain…Read more

You must specify the width, height, and sandbox attributes. The sandbox attribute is empty by default, but you can give it different values in order to modify the behaviour of the iframe, for instancesandbox="allow-scripts"lets the iframe run JavaScript. You can use attributes of standard iframes as well.

1
2
3
4
5
6
<amp-iframe width="350" height="250"
     layout="responsive"
     sandbox="allow-scripts allow-same-origin"
     allowfullscreen
     src="https://example.com/iframe">
 </amp-iframe>

While the dimensions of <amp-iframe> are predefined by the width and height attributes, there’s a way to resize it in runtime. To use the <amp-iframe> component, add the following script to your AMP page:

1
2
3
<script async custom-element="amp-iframe"
    src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js">
</script>
7. amp-accordion

Accordions constitute a frequent UI pattern in mobile design, as they save space, but still displays the content in an accessible way. <amp-accordion> makes it possible to quickly add accordions to AMP pages.

Sections of the accordion must use the <section> HTML5 tag, and need to be the direct children of the <amp-accordion> tag.

Each section must have two direct children:

  1. one for the heading
  2. one for the content (the content can also be an image)

Use the expanded attribute on any section you want to expand by default.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<amp-accordion>
  <section expanded>
    <h3>Section 1</h3>
    <div>Content of Section 1</div>
  </section>
  <section>
    <h3>Section 2</h3>
    <p>Content of Section 2</p>
  </section>
  <section>
    <h3>Section 3</h3>
    <figure>
      <amp-img src="image.jpg" width="350" height="200"
          layout="responsive" alt="Image for Section 3">
      </amp-img>
      <figcaption>Image for Section 3</figcaption>
    </figure>
  </section>
</amp-accordion>

To use the <amp-accordion> component in your AMP document, include the following script:

1
2
3
<script async custom-element="amp-accordion"
    src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js">
</script>
8. amp-lightbox

<amp-lightbox> adds a lightbox to different elements (in most cases, images) on Accelerated Mobile Pages.

When the user interacts with the element, for example taps on it, the lightbox expands and fills the whole viewport. You need to add a button or another control which the user can tap on.

Note that amp-lightbox can only be used with the nodisplay layout.

1
2
3
4
5
6
7
8
9
10
11
<button on="tap:mylightbox" role="button" tabindex="0">
  Expand
</button>
 
<amp-lightbox id="mylightbox" layout="nodisplay">
  <div class="lightbox" on="tap:mylightbox.close"
      role="button" tabindex="0">
      <amp-img src="full-image.jpg" width="375" height="667"
      on="tap:my-lightbox.close">
  </div>
</amp-lightbox>

To use the <amp-lightbox> component, you need to import it with the following code:

1
2
3
<script async custom-element="amp-lightbox"
    src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js">
</script>
9. amp-carousel

Carousels are frequently used in mobile design, as they allow to display numerous similar elements (most frequently images) along the horizontal axis. AMP results are also presented in a carousel format in Google Search.

The <amp-carousel> component enables you to add carousels to your site. The direct children of the <amp-carousel> component will be regarded as the items of the carousel. You must define the dimensions of the carousel with the width and height attributes.

You can use the optional type attribute to determine how to display the carousel items. If the type attribute takes the "carousel" value, the items will be shown as a continuous strip (this is the default), while the "slides" value will display the items in slides format.

The <amp-carousel> tag also has other optional attributes that can help you fine-tune the result.

In the example below, notice that both the carousel and all of its items use the same width and height values.

1
2
3
4
5
6
<amp-carousel width="300" height="400" layout="responsive"
  type="slides">
  <amp-img src="image1.jpg" width="300" height="400"></amp-img>
  <amp-img src="image2.jpg" width="300" height="400"></amp-img>
  <amp-img src="image3.jpg" width="300" height="400"></amp-img>
</amp-carousel>

The <amp-carousel> component requires the addition of the following script:

1
2
3
<script async custom-element="amp-carousel"
    src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js">
</script>
10. amp-analytics

<amp-analytics> can be used to collect analytics data on AMP pages. Currently, <amp-analytics> supports four types of tracking events, however this can change in the future:

  1. Pageview
  2. Anchor Clicks
  3. Timer
  4. Scrolling

To use <amp-analytics>, you need to add a JSON configuration object inside a <script> tag, in which you can configure what you want to track.

Luckily, Google teamed up with many analytics vendors who provide pre-configured JSON scripts you only need to copy-paste into your site. See the list of available analytics vendors.

To use the pre-configured scripts, you need to add the name of the analytics vendor in the type attribute.

The <amp-analytics> tag also has some optional attributes you can use to further configure how you track your site.

1
2
3
4
5
6
7
<amp-analytics>
  <script type="application/json">
  {
    // ...
  }
  </script>
</amp-analytics>

Add the following script to the <head> section of your AMP HTML page to import the <amp-analytics> component:

1
2
3
<script async custom-element="amp-analytics"
    src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js">
</script>

Final Words

In this post, we had a look at all built-in AMP components, and some of the extended ones. As Accelerated Mobile Pages is still new, many things can change in the future, so it’s worth to keep an eye on the documentation either on Github or on the official AMP site.

As these AMP components are open source, you can also contribute to the development, even creating your own component. If you want to see how a complete AMP page looks like with different components, you can check out these few examples on Github.

Share facebookShare facebook

Facebook Comments

Bạn đã đọc tin này chưa ?

Go Top