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.

    Worona
  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.

    WordApp
  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.

    WordPress Mobile Pack
  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.

    Androapp
  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.

    Blappsta
  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.

    appful
  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.

    MobiLoud
  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.

    Wiziapp

    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.

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).

<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.

<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.

<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.

<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.

<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:

<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.

<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:

<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.

<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:

<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.

<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:

<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.

<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:

<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.

<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:

<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.

GIF animations are small compressed files of looping fun that are more often than not, used for memes. While you can create GIFs straight from a browser (here’s how you do it on Chrome) or from web apps like these, these days we prefer to have tools that can make or edit GIFS of our personal photos or videos.

If you are part of this group, you’re in luck, cause we have the iOS mobile apps to help you make, edit and share GIFs right from your iPhone.

Cinemagraph: 28 Still Photos With Subtle Motion

Cinemagraph: 28 Still Photos With Subtle Motion

So today we're going to showcase animated GIF artwork but there are not the regular GIF we use…Read more

These are the apps that can help you create GIFs easily and quickly — either from live shoots or photos/videos already in your gallery — as well as share them with your friends and family via social networks, messaging apps or via URL.

GifsArt

This is a powerful and comprehensive animated GIF generator made by Apple Inc. This application helps you capture images and videos with the in-app camera then lets you combine image, video, and GIF into one perfect animation. Without leaving the application, you can customize your GIF by using animated masks, effects, stickers and text.

GifsArt

Animated masks and stickers are imported through Giply. Users can also export different filters, effects, text and captions to their PicArt Gallery. One very good thing about this application is that users will not bothered by a watermark.

HipGif

With HipGif, you can choose many kinds of animated stickers to add to your GIF file. These stickers and popular GIFs can be mixed with your own, and the pile is updated multiple times a day. Speed up, slow down, draw on your GIFs, add a filter, text or frame to any of your GIF and share them on Instagram as a video.

HipGif

You can snap multiple photos, or use any of the meme background templates available. The app is also great for making photo slideshows but best of all you can share easily to Facebook, Messenger, Twitter, WhatsApp and even via SMS.

Gifo

Share animated GIFS, memes, reactions through Gifo with your iPhone or iPad camera. It makes it easy for you to make stunning animated collages, to speed up or slow down GIFs as what you want. Furthermore, you can make 4 GIFs in one go. It also comes with cool filters, frames, colorful text and fonts that you can add to your GIFs.

Gifo

Your Gifo results can be copied without saving it first into the camera roll. Just directly paste it into any application you want to share it to. If you do want to save it into the camera roll, you can, in GIF form or as a video file.

Lively

If you’re looking for a quick and easy way to trim, play backwards, have speed control and export your captured videos to GIF format, Lively can do all that and more. The catch is your exported GIFs will carry their watermark, which you can remove with a one-time purchase.

lively

Lively works with an iPhone 6S/6S Plus. The app comes with 3D Touch support. Its extensive editing features not only gives you full control of what to show and not to show others, but also lets you shrink the size of your GIF files, pick a single frame from a full video, and share to iMessage, Facebook Messenger, Twitter, Slack, Tumblr and many more.

Slowmographer

Slowmographer is aimed to mix the best feature of mobile photography and video making. Instead of a photo or regular video, Slowmographer helps you create 3-second loops of slowed down videos. It doesn’t seem like a cool thing to shout about until you figure out its use in capturing tricks in and more.sports like mountain biking, skateboarding, surfing, skiing

slowmographer

Not only is the video-taking easy, with this app you can also add image filters, transition effects, remove flickering effect which are a pain in slow motion shots, and easily share them on your favorite social network sites. Here are some examples on Instagram.

Kanvas Lab

Kanvas Lab lets you live life creatively, by allowing you to send GIF loops of your otherwise muundane everyday life. Apart from sending a GIF file, you can also send a message with a GIF looping in the background of your message. I’m sure you will be able to find ways to express yourself with these two combinations.

Kanvas Lab

Animated GIFs are recorded in 6 frames; if you need more, take a video message for up to 15 seconds instead. You can speed up or slow down the video message as you like. The app also has custom stickers, an artsy toolkit for additional sprucing up, and flipbook photo album that can be easily shared to your favorite social networks.

Video to GIF

Everything you can do with GIF, you can do with this app. Shoot in GIF, convert your own videos or YouTube videos to GIF, turn photos into GIF and add animated text or effects to it, all with this handy GIF-making tool.

Video to GIF

The app also lets you add animated text, save GIF as a video or share it to your favorite social networks. You can also get a URL for your GIF, to share with others. If you need a quick and easy way to make GIFs, you found it.

Vhoto

Vhoto will record your favorite moments on video and present them to you as a GIF. It will find the best highlight in your video before turning it into an awesome GIF. You can choose to record directly or choose an existing video to convert. For the best GIF loop result, trim your videos to find the best shot.

vhoto

After make your GIF, you can share to your friend on social media or send it within a text message. This free app overall gives you easiest way to convert video into GIF in a jiffy.

ImgPlay

ImgPlay brings to you who love to shoot in diferent modes – burst photos, iOS Live Photo or normal mode – as this app can turn your shots into GIF. You can edit your GIF before publishing it, by adding captions, editing frame sector/order, control speed/direction (forward, in reverse), and loop count.

IMGPlay

In the end you can export your creation into several GIF quality levels, or you can also export it into video to share easily on multiple social networks and messaging apps.

GifLab

GifLab allows to to create GIFs on your iOS device with plenty of customization options. The app makes it easy to trim, adjust quality and speed, add text with dozens of nice fontfaces, and beautify images with its range of filters. If you are a huge fans of Instagram, then GifLab can export GIFs into videos that are upload-ready.

GifLab

The GIFs can also be shared on social network sites, via messaging apps or group chats, and via URL. Previously a free app, now the app costs $1.99 to own. Watermarks and locks on filters and fonts have been removed.

GIF Toaster

GIF Toaster is handy app to convert photos or video into animated GIF. It works for both iPad and iPhone. Just select the photo or video you want to convert to GIF then set encoding options such as range (which part of the video), play back speeds, number of frames per second, size of video then click Start Encoding.

GIF Toaster

The app can convert GIF to video, photo, live photo or to new GIF. It can also do all that in batch mode (doing multiple at the same time). You can also share the resulting GIF via URL.

Gifx

If you are a creative person, then Gifx will give you space to create customized animated images. You can import photos and videos, and apply more than 200 GIF effects and over 100 masks to personalize your GIF. The files can be saved as a movie file or GIF file. You can share your GIF on popular social media you love later.

Gifx

There are other features available that are locked down by purchases, including being rid of the watermark, a graphics, pack, an export feature, high resolution feature and more. Check out their tumblr page to see what the app can do.

GIF Maker

GIF Maker allows you to shoot your moments and save them in animated GIF format. You can create GIFs from your video shots from as short as 5 seconds to a maximum of 25 seconds. Alternatively, one chan choose to take a minimum of 10 photos to a maximum of 50 photos to turn into GIFs.

GIF maker

Users can also create GIFS from pre-existing photos or videos in their camera gallery. The app also includes some effects that make your GIF look funny, bizarre or scary plus other cool effects.