It is tempting to rely on closed platforms and their native apps: They integrate well with your device’s capabilities and offer easy-to-use features for improved social engagement with your audience – however at the cost of locking you into their proprietary infrastructure and owning your content.
But the open web has been catching up: A myriad of capabilities has been made available in the past few years through new standardized browser APIs which enable you and your audience to leverage the modern features they expect while remaining decentralized and under your control. To name a few:
- Add to Home screen: You and your audience can add your website to their device’s home screen so that it shows up there with an icon, the same way they can install a native app, but without all the extra implications of that installation. Enable Add to Home screen in WordPress
- Offline browsing: No longer will you see your browser’s ugly “Offline” page when losing the network connection, but you remain within the website’s / web app’s UI and can keep browsing content that was previously downloaded. Get offline browsing in WordPress
- Engaging and replying to content from other websites: What closed social networks have been offering for seemingly ages has now finally come to the open web as well – with the difference that the data remains under your authority. Use webmentions in WordPress
- Sharing content from your website: You can share content from your website to any other application, relying on your device’s integrated sharing UI – with the extra benefit of not requiring privacy-invasive sharing scripts from other platforms for it. Share content in WordPress
Another capability which you are probably used to from native apps is sharing content from one app to another. While the last bullet point above covers sharing content from your website (via the Web Share API), it is now also possible to share content to your website (via the Web Share Target API) in the same integrated way, which is what we’re gonna focus on in this post.
Continue reading “Sharing content from your device directly into a new WordPress post”
If you are a WordPress theme developer, chances are high that you’re working with the Customizer to provide certain design options to your themes’ users – whether it is for colors, fonts, spacing or else. Providing customization opportunities is crucial for a theme’s adoption as you will never be able to please every user with your theme’s out-of-the-box design. As widely known, most WordPress users look for feature-rich solutions when assembling their site. They may find your theme’s base design very appealing, but if they cannot modify it to e.g. use their brand colors, they’ll quickly move on to something else. Long story short: Allowing users to customize your theme is crucial for adoption.
Now there’s an issue with that though: Most of these design options affect the site’s CSS, and CSS is a largely static resource. Therefore the typical approach to integrate these Customizer controls with the theme’s actual appearance is to copy the pieces of CSS that would be affected by the respective options from the stylesheet into a PHP file, and from there generate that stylesheet on the fly. This results in three major problems:
- You are most likely sending a whole bunch of duplicate CSS down the line, negatively affecting performance of the site.
- Because you are duplicating CSS, the approach is quite error-prone. For example when modifying CSS later, you need to remember to also make the exact same change in the Customizer CSS, if it applies there too.
- This also affects the WYSIWYG experience in the editor, as you also need to manually maintain the CSS for the editor (Gutenberg / classic) in the same way.
There is a solution to all of these problems though, and its name is “CSS Custom Properties”. In this post we will look at how to use this CSS feature to improve UX for both website visitors and content creators, all at once.
Continue reading “Using CSS Custom Properties for better UX in Frontend and Gutenberg”
A few weeks ago, it was announced that Google Chrome started supporting the new
If you have a WordPress site, our team at Google has just released a new plugin “Native Lazyload” which you can install, activate, and your site will support native lazy-loading instantly.
Continue reading “Native Lazy-Loading for WordPress”
This is essentially a written version of the talk of the same name that I gave at WordCamp Europe 2019 (see the related slide deck).
As I’m sure we can all confirm, WordPress provides a strong toolset for creating awesome content. Particularly with the availability of the Gutenberg editor, publishers can now implement more interesting layouts and take their content quality to the next level. However, while the content itself is certainly the most important part of a website, there are a few other supporting pillars to ensure delightful content experiences for users consuming that content. Websites should be:
For more details on these four pillars, see the “Progressive WordPress Themes” talk by my colleagues Alberto Medina and Thierry Muller.
Unfortunately, satisfying each of these four requirements is anything but trivial. You might already know that just installing a performance or a security plugin is not actually going to magically solve these respective points.
Technologies and best practices on the web are constantly evolving: Regularly new APIs are introduced, new standards being established, former best practices being overruled. Add in all the popular frameworks that have come and gone over the years, and it becomes even more evident: Even the most senior rockstar full-stack developer cannot keep up with this technology complexity on their own.
Fortunately, there are ways to reduce and work around both of these complexities. In this post we will look at a component-based approach and a relatively new technology called “Custom Elements” and how they address the aforementioned problems.
Continue reading “Leveraging the Power of Custom Elements in Gutenberg”
The web has been constantly evolving. Over the years we have seen milestones such as the introduction of responsive images, AJAX requests, or location access for some examples. More recently features like Add to Home Screen, which allows you to make websites easily accessible on your phone or desktop, or Web Payments, a standardized way of processing payments on the web, have been made available. Even lazy-loading media is likely to come natively to the web soon.
While all these features are very powerful, they also pose the challenge of using them responsibly, and making sure to not abuse them, which could harm user experience. For example, asking the user to grant location access to a website without making it obvious what this would be used for and without providing a clear user benefit, the resulting pop-up can be more of a distraction than the purpose would justify it. I’m sure you have seen websites where you had to go through way too many pop-ups and consent requests before getting to the content you actually intended to see.
Keeping track of all these web features can be a tedious task, especially in the context of a CMS like WordPress, where much of the codebase (probably even most of it) comes from third parties on many sites. Even if you yourself are a responsible citizen of the web, third-party plugins and themes might have flaws or might be misusing features in ways you aren’t aware of.
This is where two new proposed web standards, Feature Policy and Reporting API, come into play.
Continue reading “Introducing Feature Policy & Reporting API for WordPress”
I’ve been developing for WordPress over a few years now. I love the simplicity of the system (compared to other content management systems) and that it is nevertheless as powerful as all of its competitors. However, one thing always annoyed me, and I bet everyone else too: Setting it up is just a pain. Not because it is in any way hard, but because it costs some time. It’s only about 10 minutes maximum, but I didn’t want to invest this time doing the exact same thing for any web site I set up. Yeah, it’s just 10 minutes – but you probably heard that developers are lazy. You probably set up WordPress sites as well, so I don’t need to tell you this. But there is another way which I’ll illustrate in this tutorial. I will explain how you can set up your WordPress installation by executing just one single script in Terminal (you should have a basic understanding of how to use it before reading this article). Furthermore you will learn how to include a WordPress starter theme that has all the important tools built-in. But now let’s get started in kickstarting your projects!
Continue reading “Improving WordPress workflow with YeoPress, Grunt and Bower”
Schema.org provides you a good way to optimize your website for search engines. SEO surely means much more than that, but the usage of Schema.org will improve your visibility to Google & Co. a lot. Have you ever, for example, checked out movie search results at a website like IMDB.com or Wikipedia.org? They will mostly show you additional information for that particular movie, such as a trailer link, a link to release dates, maybe user ratings for this movie (check out the tiny yellow stars there!) and sometimes information about the actors, the director and much more, depending on your search query – and the website’s markup with Schema.org. So Google is not that intelligent that they know what the website is about – you gotta ensure this yourself by adding Schema.org microdata. While it does not directly improve your website’s rankings, the search results for your page will certainly look more appealing to users since additional information will be included.
Continue reading “How To Improve WordPress SEO with Schema.org”