Browsed by
Category: WordPress

Progressive Web Apps and Accelerated Mobile Pages – What is Holding WordPress Back?

Progressive Web Apps and Accelerated Mobile Pages – What is Holding WordPress Back?

Having been involved in building Progressive Web Apps from before they were even called Progressive Web Apps, we believe that everyone should use JavaScript to build amazing user experiences on the web. This has been our mantra in the last few years and we’re sticking to it :).

However, using Content Management Systems (and in particular WordPress) as backend / APIs has proven a challenge. This is mostly due to the clash between technologies (client vs. backend rendering) and the large ecosystem of plugins / themes that surround WordPress. The value of WordPress is not only its powerful core, but all those widgets that you can install and enhance the functionality of your WordPress site. Most of these are plug & play. At the same time, I have yet to see a plug & play PWA with a 100% score on Lighthouse. Wherever you see success stories (ex. Twitter app), they also involve a lot of custom work.

So, where does that leave us? We don’t pretend to have all the answers or a magic, silver bullet that can remodel your WordPress website into a 100% PWA. However, we believe that by taking a more detailed look at the technology behind WordPress, PWAs and AMP, we can come up with ideas on how to close the gap between them. Below, you’ll find a list of 5 key points that we believe should be addressed to get us moving in the right direction.

1. Server-side rendering vs. client-side rendering

WordPress themes & plugins use server-side rendering. If you’re not familiar with the differences between server-side and client-side rendering, you can read about it here. In short, WordPress themes / plugins need a server to run the code and produce an output (HTML & CSS code).

In contrast, the PWA standard doesn’t impose a particular use of technology for implementing such an application. Most PWAs are built on JavaScript libraries / frameworks and are thus Single Page Applications (SPAs). It’s also possible to build Multiple Page Applications as PWAs, however the architecture is heavily customized. Here you can find a presentation from Google I/O 2018, describing the architecture of such a PWA implemented using a NodeJS / Express.js server and service workers. This can be even more intimidating compared to SPAs and it still requires writing JavaScript code, at least for the service worker.

So, what happens when we combine WordPress’ server-side rendering with a SPA? Well, we don’t – we have to make the choice between generating the HTML & CSS code on the server (server-side rendering) or letting the browser render that code (client-side rendering). In WordPress Mobile Pack, we use a special WordPress theme that loads only on mobile browsers. It strips down any WordPress code besides the bare minimum required to load the PWA assets (bundled JavaScript and CSS). It then becomes the responsibility of the browser to fetch the content (posts, pages, categories and so on) from WordPress’ REST API.

2. Limitations of the REST API

We strongly believe that the inclusion of the REST API in the core has opened the door for building amazing apps on top of WordPress. However, as it stands today, the functionality of the REST API is limited compared to all other things that you can do from the WordPress admin area. Just think for example about customizing the menu for your WordPress site. You can go to Appearances > Menus and do just that, your responsive theme will easily adapt to the changes.

Yet, there is no endpoint that can help export those settings to a PWA. The REST API functionality is limited to retrieving posts, pages, categories, etc. and some basic settings. So, a trivial task that is available to all responsive themes is cumbersome for a PWA. One solution is to extend the functionality of the REST API and create new endpoints (there is some work being done in that direction here). This doesn’t change the fact that we’ll have to jump through some hoops to integrate our PWAs with basic WordPress features.

3. Page Builders & Widgets

Who doesn’t love an easy-to-use page builder? These plugins promise to make our lives easier and just by using drag-and-drop we can make our website look the way we want. It’s no wonder their popularity is increasing.

The majority of these plugins rely on server-side rendering. They also insert additional JavaScript & CSS code and heavily depend on the page’s context to properly render a layout. Well, adding JavaScript code (like a widget) inside other JavaScript code (PWA) is a recipe for disaster. The embedded JavaScript code will not be executed because it’s not loaded directly in the browser.

Not to mention that the REST API doesn’t even export some of the shortcode used by page builders – which is normal because that shortcode doesn’t make sense outside of a responsive theme’s context.

4. Service workers support

Service workers are a big part of implementing a PWA. They help provide all that fancy stuff – like caching / offline mode, add to homescreen and web push notifications.

One caveat? They must reside on the root domain of your website – even if your WordPress install exists at yourdomain.com/blog, the service worker must be hosted directly on yourdomain.com. And they are JavaScript files. You might think “what’s the big deal, I’ll just copy the service worker file to my theme folder”. Well, as I already mentioned, WordPress uses server-side rendering, which makes it possible to load content from a theme folder even when in the browser you’re accessing the home page. But JavaScript files are different – their path is not changed when they are loaded by the browser. And, for very good reasons (think security!), a theme or plugin doesn’t have access to write files in the root folder of your WordPress installation.

So, what we can do? Well, we can manually copy the service worker file using FTP. But I do hope that WordPress comes up with a better solution in the future. I don’t want to be stuck forever copying my service worker whenever WordPress code is updated.

5. Lack of transparency on how SEO works for SPAs

The lack of transparency when it comes to search engine optimization is one of the main reasons for the slow adoption of SPAs. Even though Google announced that its bots can crawl JavaScript code a few years back, this doesn’t change the fact that many people still look at their Google Webmasters Search Console and see all kinds of problems in there.

Some details surfaced last year, mainly the fact that the Googlebot uses Chrome 41 for rendering. Also, at this year’s Google I/O, we could take a sneak peak on how Google Search works and why SPAs are not as efficient as basic HTML/CSS websites when it comes to SEO. There was one very important insight that was shared:

“The rendering of JavaScript powered websites in Google Search is deferred until Googlebot has resources available to process to content.”

The recommended solution is to do server-side rendering only for bots, which if you ask me, sounds like a hassle because we end up maintaining two different versions of the same content. I do hope there’s a better solution in the making, because this one doesn’t sound good at all.

Conclusion

The good part about all of this is that Google is definitely making steps into closing the gap between its technologies and WordPress. There was another interesting presentation at Google I/O that you should definitely watch: “Make your WordPress site progressive“. The approach is very interesting – using AMP and the Gutenberg editor to build WordPress websites. It looks like the WP AMP plugin is getting a lot of love recently and there are some very cool use cases that can be built on top of it.

Even though there is no silver bullet for solving the issues I have mentioned in this article, I do hope we’ll see many more cool PWAs being built on top of WordPress, taking advantage of the CMS’s popularity and versatility.

Co-founder and CTO at Appticles.com. Likes to get involved in various activities to help women get into programming/coding, but also found their own businesses.
Is the new WordPress Gutenberg editor that good?

Is the new WordPress Gutenberg editor that good?

Over the past years, WordPress stuck to its good ol’ visual editor and didn’t introduce many changes. But hey, why fix something that is not broken? In most cases, this wouldn’t be a bad thing, but sometimes, a change is more than welcome, especially when competitors like Medium or Ghost come with a unique and refreshing experience for its users.

Apparently, WP ignored this aspect, so a group of contributors and volunteers started working at the WordPress Gutenberg editor for the past year, in their attempt to make adding rich content to the platform simpler and more enjoyable. But is the overall experience that good?

Let’s find out more about this editor and see if it’s actually worth it.

What is this Gutenberg editor?

Generally speaking, we can call it a new editor for WordPress, named after the man who invented the printing press with movable type, Johannes Gutenberg. Unlike the standard visual editor, which requires HTML and shortcodes in order to obtain the desired results, Gutenberg wants to make this easier, especially for first-time WordPress users.

Currently, the final version wasn’t released yet, so you can try the beta version. And it won’t get integrated into the platform until it gets 100,000 active installs. But believe us, it’s worth giving it a try, especially if you want to provide some feedback.

It’s available for installation in the WordPress repository and you can find it by searching it within the dashboard, under “Add New” plugins. You need WordPress version 4.8 or higher to run it, by the way.

After installing it, you should see links right under your posts that allow you to open up the WordPress Gutenberg editor. Once this will be merged with the Core, you will be able to access it by simply pressing the Edit links.

Besides this, it is also accessible from the new menu in the dashboard, which also includes a demo and the ability to create a new post using Gutenberg. It’s highly recommended to explore this option until you learn to get around with it.

What’s good about the WordPress Gutenberg editor?

Ok, now that we know what’s the whole deal with this editor, let’s take a few minutes and see what are some of its biggest pluses, which make it worth installing.

Pluses

It’s definitely a step forward for visual editing in WordPress. The classic editor is around for years and, despite being very easy to use, it’s not exactly the most amazing experience. Gutenberg brings a more intuitive interface for new users, helping them learn how to share the first posts faster and easier.

It uses HTML comments to store block info. Definitely one of the major advantages of this new editor is the fact that it stores information about blocks in HTML comments. Therefore, these are seen just on the back end of the site, without being rendered on live pages.

It won’t have side effects after disabling it. There are a lot of WordPress page editors already available, but some of them, after uninstalling, can have a negative impact on your site. Or, simply put, they will break your website. It won’t happen with Gutenberg.

It offers a solid HTML5 output. Technically speaking, Gutenberg blocks output content, like section and figure, through HTML 5 tags. Using them will help you future-proof all the content created in the new editor.

It gives you the possibility to write your own blocks. In Gutenberg, developers can create their own blocks of customized content. Let that sink in for a while.

Minuses

The user interface isn’t the best. Sure, it may look revolutionary and relatively easy to use, but the truth is that performing some of the simples tasks require more clicks than in the standard WordPress editor. For example, in order to update a page, you need to make two clicks, instead of just pressing “Update”

And we’re not done yet. Gutenberg for WordPress has an admin menu consisting of three columns. All good until now but the editor and the sidebar will eventually get crowded and scrolling around on smaller display can be confusing.

Oh, and let’s not forget about meta boxes, essential for a well-optimized page. These are actually hidden somewhere under extended settings, underneath and beside the editor.

It has some accessibility issues. Since the WordPress Gutenberg editor is still in its beta version, such things are normal. Therefore, if you want to install it, you should be aware of its accessibility issues on using the back end, as well as the content output by it on the front end, like inline CSS.

Images don’t look so good. Well, this is a bit exaggerated, since the real problem is that you can’t wrap text around an image, like in the regular WordPress editor, as images have their own block. This shouldn’t be such a big issue, but if you care about the look of your pages, this is actually very important.

The same problem appears when you’re trying to embed audio or video, as these also require their own block.

There are no shortcodes in paragraphs. Unfortunately, you can execute shortcodes, neither in text columns or paragraphs blocks in the current version of the editor. In order to make them work, they much be placed in the shortcode block. And I bet that you aren’t fancying this.

This current situation can cause some problems, as long as your shortcodes produce inline content. However, they will work when Gutenberg is added to an existing site.

And this wraps it up. Overall, the WordPress Gutenberg editor looks like a promising project, even in its current state. We’re looking forward to seeing the final variant, ready to be used by everybody, as we’re convinced that it has the power to change the way we’re using the world’s most popular content management system.

What are your thoughts on Gutenberg? Would you use it instead of the current WP editor?

Big changes ahead: WordPress Design Trends 2018

Big changes ahead: WordPress Design Trends 2018

Forget about the past, it’s time to focus on the future! This statement should be generally available, but also when it comes to the newest WordPress design trends.

The world’s most popular content managing system is growing strong and more and more websites are being based on it. And I’m talking about some top-notch sites, used by reputable brands. Still, a new year automatically means a refresh, especially in terms of design.

Today we’re going to talk about both technological and design trends which will have a word to say in the upcoming months. And it’s highly recommended to be aware of this, no matter if you want to build your first website on WordPress or already have one and are looking forward to giving it a new look.

You will probably observe that some of them are just…updated trends since they are continuations of those which dominated 2017, while some of them are actually new. Combined, these will dictate the way WordPress sites will look in 2018.

Ok, it’s settled. Let’s get cracking!

Vivid colors all over the place

It was scientifically proven that colors can have a big impact on the way a website is perceived and they should be carefully chosen when designing a website. However, things can change a bit this year.

One of the most popular WordPress design trends will be the use of daring, vivid color palettes. A lot of brands are already doing this and more of them will follow the example.

Sure, this doesn’t mean that you should opt for the craziest things out there. Everything must be complementary and match perfectly, in order to be eye candy, but go a bit wild. Opt for some purple, some neon green, orange, pink! Find that perfect blend and throw it on your website. You will barely go unnoticed.

No more boring typography

Forget about those standard fonts, that came by default, as they will soon be history as well. Another one of the WordPress design trends we’re expecting to rise in 2018 is stand-out typography.

Obviously, traditional fonts in the main body will remain the number one choice, since nobody wants to make their content impossible to read, but header text will definitely go wild. Combine this with the vivid color combinations we were talking about a few moments ago and you will definitely have a landing page able to stand out with ease.

Just make sure everything is still readable. I’ve seen some pages trying to do something as wild as this in the past and they ended up with some headers I could barely understand…

Hand-drawn graphics elements, for a warmer feeling

You do want to make your visitors feel comfortable while visiting your website, right? In this case, you can try adding a personal note, with some hand-drawn graphics.

This will definitely bring your site to life and give visitors of what you’re capable of, not to mention that they will feel your personal implication in designing your website.

Minimalism, minimalism everywhere

Nobody likes a ton of design elements stuck in a small place. It just doesn’t look good. Over the past years, there was a tendency among designers to remove useless visual elements and stick just to what’s essential.

One of the WordPress design trends which will have a serious impact on websites will be minimalism. Over the next months, expect to see more and more websites transforming into portals focusing on readability and usability.

Parallax scrolling, a fine detail

You can forget about single, unresponsive pages, since people – apparently – prefer a one-page design, with responsive features. As for parallax, it gives the feature of depth and creates an interactive aspect for a website.

Expect to see designers asking for this feature for WordPress websites in 2018 and developers doing their best in order to implement it. And we can totally understand this since it’s a really nice visual effect.

Video headers everywhere!

You’re seeing videos everywhere on social media, so you shouldn’t be surprised to start seeing them on websites as well. One of the most popular WordPress design trends, which will dominate 2018, will be the presence of video headers in websites.

Currently, there are several themes which allow including video headers easily and we’re expecting their number to increase. And expect to see an increased on-page time if you decide to implement this feature as well, especially if you opt for some catchy visuals.

Push notifications almost on every site

Calling push notifications as a design element is a bit forced, but hey, it’s part of a lot of websites and we should expect this number to grow in the upcoming months.

Technically speaking, we’re talking about an extremely important marketing channel, since, through notifications, webmasters make sure that past visitors know when something new was posted and try to get them back on the site.

A shot at virtual reality?

Virtual reality is currently taking the world by storm and we’re looking forward to seeing integrated into WordPress-based websites. Of course, you shouldn’t expect totally immersive experiences hidden somewhere in the page, but a couple of awesome gimmicks, showing the potential of the platform.

Currently, there are already a few plugins available, able to display 360 photos and videos on WordPress sites, but their number will significantly grow. This is one of the design trends on which you should keep an eye since you might be missing a lot of opportunities to attract new visitors!

A whole new WordPress!

Finally, let’s not forget about the WordPress platform itself. According to its official development cycle page, we’re going to see version 5.0 being released this year, with a completely new look.

Specifically, we’re expecting a brand new editor, significant improvements to the Admin UI, a new writing editor and a much-needed shift toward SaaS.

And this wraps up our list with some of the most expected WordPress design trends for 2018. Which are those you are the most curious about? Let us know your thoughts, using the comments section below!

Your mobile pages need to be fast in 2018, says the Google Speed Update

Your mobile pages need to be fast in 2018, says the Google Speed Update

We’re living in the age of speed and people want to do things as fast as possible. And they’re not alone, since Google wants pretty much the same thing, especially when it comes to your mobile browsing experience.

This week, the search engine giant announced a new ranking algorithm, tailored for smartphones. To be more specific, we’re talking about mobile search. Because, in case you still don’t know this, the number of searches made on mobile devices has surpassed searches made on PCs. Let that sink in for a while.

Read More Read More

Year in Review and What to Expect from 2018

Year in Review and What to Expect from 2018

2017 was the year we doubled down on Progressive Web Applications and we did that by concentrating our efforts on building more PWA themes for our WordPress Mobile Pack plugin and also launching 3 new related WordPress plugins: Progressive Web Apps, PWACommerce and WP AMP Themes.

As for our flagship product, WordPress Mobile Pack, here are some 2017 numbers:

  • 6 major releases: January, March, April, May, August and September.
  • ~100,000 downloads
  • v2.0 has 35,3% active installs, v3.0+ has 9,7% active installs; there’s also a legacy of 31,8% active installs still on v1.0+
  • Approximately 2,500 support conversation over e-mail, Intercom.io (the customer support system we use), via GitHub or WordPress public repositories
  • A total of 23 posts on our blog
  • Our tweets earned 180,000 impressions last year

We’re also proud that we had the opportunity to give talks at WordCamp Bucharest and Athens, evangelizing Progressive Web Apps in the WordPress community. You can watch below the “Building an E-commerce Progressive Web App with React and WooCommerce” presentation, delivered by our CTO, Alexandra Anghel:

In terms of technology advancements, a big question mark last year gravitated around Apple and the support of service workers on Safari. With the introduction of Safari Technology Preview 46 for macOS Sierra and macOS High Sierra that seems to be heading in the right direction.

Service workers could find their way onto iOS devices in 2018, opening up the web for a whole new range of possibilities. Already available on Android, some sites have begun to take advantage of service workers to provide browser-based push notifications.

As far as we’re concerned, we’re dedicated to helping developers out there built awesome Progressive Web Applications, whether that’s on top of a popular CMS (WordPress, Drupal or Joomla), eCommerce platforms (WooCommerce, Magento or Shopify) or any other 3rd party API and with that in mind we’ve already planned some interesting partnership throughout 2018. More to come soon.

Here’s to a productive 2018 for all of us! 💪

Tech-Biz in between guy. CEO at WPMobilePack.com. Organizer at BucharestJS & JSHacks. Passionate about entrepreneurship. Love to play 🎾, squash and 🏓.