Fuse is not only used to describe the UI and layout; you can also use it to add effects and animation. In this article, Wern Ancheta will show you what Fuse is all about. He’ll show you how it works and how it compares to other platforms such as React Native and NativeScript. In the second half of the article, you will create your first Fuse app. Specifically, you will create a weather app that shows the weather based on the user’s current location. Towards the end of the article, you will consolidate your learning by looking at the advantages and disadvantages of using Fuse for your next mobile app project.
Read more…
Moving from one image for all kinds of devices to the common one-size-per-form-factor approach is definitely a step in the right direction. The downside is that, from a performance perspective, the approach is too general. There is more juice to be squeezed. However, from a development and maintenance perspective, it might make sense because three image sizes, or breakpoints, are manageable. In this article, Jon Arne Sæterås will look closely at how well the one-size-per-form-factor approach really works and how you can use smart content delivery networks to improve image performance.
Read more…
An e-commerce website can’t be 100% compliant with AMP, but there are benefits to adopting the format early on. The mobile search index will enable Google to run its ranking algorithm differently for purely mobile content. This means that mobile content won’t be extracted from desktop content to determine mobile rankings. That’s definitely something that retailers can leverage, thanks to AMP. In this article, Myriam Jessier outlines how to get started with AMP and how to gain an edge over the competition with your e-commerce website.
Read more…
Are you using progressive booting already? What about tree-shaking and code-splitting in React and Angular? Have you set up Brotli or Zopfli compression, OCSP stapling and HPACK compression? Also, how about resource hints, client hints and CSS containment — not to mention IPv6, HTTP/2 and service workers? A front-end performance checklist of things to keep in mind when optimizing for performance.
Read more…
After building several client websites, ranging from small cafés to growing startups, Stefan Judis figured out that the holy WYSIWYG editor is not always the silver bullet we’re all looking for. These interfaces aim to make building websites easy, but there are always more use cases for your content on different platforms. In this article Stefan Judis will show you what he built and how his website surprisingly turned out to be his daily companion.
Read more…
While an instant response from an app is the best, there are times when your app won’t be able to comply with the guidelines for speed. A slow response could be caused by a bad internet connection, or an operation itself can take a long time. For such cases, in order to minimize user tension, you must reassure users that the app is working on their request and that actual progress is being made. A wait-animation progress indicator is the most common form of providing a system status for users when something is happening or loading. It’s important to provide feedback to the user about what is happening with the app within a reasonable amount of time.
Read more…
Is your website on mobile devices friends with your users? As web designers, you could often treat your users the same way the “bad guys” treat The Little Mole, especially on mobile websites. In this article, Martin Michálek goes through them and suggests best practices to optimize the user experience on mobile devices. Be kind to mobile users. Do not be the wicked old man who tries to get rid of The Little Mole in his yard. Do you want to know how the fairy tale ends? The Little Mole survives, laughs at the old man and moves to another garden.
Read more…
For quite some time, the venerable gzip algorithm has been the go-to solution for reducing the size of page assets. A new kid on the block has been gaining support in modern browsers, and its name is Brotli. In this article, Jeremy Wagner will get hands-on with Brotli by writing a Node.js-powered HTTP server that implements this new algorithm, and will compare its performance to gzip.
Read more…
With a few additions, WordPress websites can accommodate a responsive image use case known as art direction. Art direction gives us the ability to design with images whose crop or composition changes at certain breakpoints. In this article, Laurie Laforest will show you how to set up a WordPress theme to support art direction in a simple manner. This method relies on WordPress’ standard administration interface as much as possible, and it requires only a single image to be uploaded.
Read more…
Every time the browser has to recalculate the positions and geometries of elements in the document, a reflow happens. This happens when new DOM elements are added to the page, images load or dimensions of elements change. There are many solutions for avoiding the jump effect on page load, and implementing all of these techniques would take some time, but it is totally worth it — until scroll anchoring is supported in more browsers. In this article, Michael Scharnagl will share techniques to minimize this content shifting.
Read more…
