BBVA API Market
The great battle, not only within the media but other sectors such as retail, banking or technology, is on mobile devices. To be able to understand how to adapt the consumer experience of products to the needs of users on smartphones, for now the device that has the greatest degree of intimacy with end customers. One of the latest on the market is Progressive Web Apps, a Google-sponsored alternative that is a mix between the mobile web consumed by the browser and native apps installed on the phone.
In a single sentence, the ultimate goal of the PWA is to get a native app user experience on the web, today it is mainly consumed by the mobile device. For product teams, the final idea is to develop once and deploy on all possible devices, from both a hardware and software standpoint. What is ultimately sought is that it has a number of common elements that closely resemble the great features that a native app usually has and keep some great advantages of traditional websites:
● Progressive apps are designed to have access to all users: most browsers support these types of web apps.
● Very fast loading and interaction.
● Perfectly adapted to all screens: the Google PWA have the capacity to adapt to desktop, mobile, tablet, Smart TV … any device. The principle is developed once, it accesses any device.
● Consumption without WiFi or 3G/4G data: you don’t need a high quality connection to browse them. Not even connection.
● Navigation and own interactions of a native app: a progressive app must be designed for the user’s touch.
● Quick access on a mobile or tablet from the main view. Shortcut icon on the phone without having to download in an app store. This is possible thanks to the incorporation of metadata, not just downloading this shortcut, but launching splash screens.
● Visible to search engines.
● Ability to send push notifications like any native app.
● HTTPS secure protocol applications: there is much talk of the future of HTTPS; this avoids content from being manipulated by third parties.
● Guaranteed recirculation through the typical hyperlink on the web.
Design and User Experience in Progressive Web Apps
The treatment that product teams must give to Progressive Web Apps is very different from developing native apps. Although there are common elements, some factors such as design and user experience incorporates different elements in apps and PWA.
Responsive layouts: in the end of the wide variety of devices (with screens in different sizes: desktop, mobile, tablet, phablets and smart TV) have led to the need to implement designs that are able to adapt to different screens. That is what is known as responsive design and it is what Progressive Web Apps are gunning for. In the end everything is based on traditional patterns of this type of adaptive design: Mostly Fluid, Column Drop, Layout Shifter, Tiny Tweaks and Off Canvas. In each, the different columns fall down and are positioned vertically or horizontally as the screen becomes smaller, except in theOff Canvas pattern, that leverages the invisible part to hide and remove columns.
● Image, video and audio are three of the data elements that often suffer to a great extent in responsive designs if you are not careful with images and videos. In the case of images, the use of the img element is the best possible solution, especially if relative sizes are used, even marking specific sizes and densities for each type of display, and also indicating the size of those images based on the cuts that will be implemented in the design as the screen gets smaller.
<img src = “faro”-200.jpg tamaños = “50vw”
srcset = “faro-100.jpg 100w, 200w faro-200.jpg,
faro-400.jpg 400w, 800w faro-800.jpg,
faro-1000 .jpg 1000w, 1400w faro-1400.jpg,
faro-1800.jpg 1800w ” >
Relative sizes of images based on design cuts:
<img src = “” 400.png
tamaños = “(min-width: 600px) 25vw, (min-width: 500px) 50vw, 100vw”
srcset = “100.png 100w, 200w 200.png, 400.png 400w,
800.png 800w, 1600.png 1600w, 2000w 2000.png ” >
SEO, social media and making money in Progressive Web Apps
The positioning conditions vary greatly between a native app and a Progressive Web App. The former compete for a position in app stores. Optimization of all factors that enable better positioning in these app stores are known by ASO (App Store Optimization). Progressive Web Apps play in another league: in the end they compete on the same stage as other traditional websites, with elements which condition SEO optimization or searches.
As in the traditional web, adding a few lines of HTML to develop a PWA will make it possible to control messages and pictures that are disseminated with our content when users share it on social networks. Google also adds the recommendation to use the protocol schema and microdata to enrich the content that is shared on its Google + social network. This is a practical example of code inserted into each content page:
<div itemscope itemtype = “http://schema.org/Article” >
<h1 itemprop = “nombre” > Enjoy fireworks </ h1>
<p itemprop = “description” > Fireworks are beautiful.
This article explains how beautiful fireworks are. </ P>
<img itemprop = “imagen” src = “//developers.google.com/web/imgs/fireworks.jpg” />
2022 is a year characterized by a veritable explosion of open banking apps, and we have selected the most outstanding ones Open banking apps have been growing along with this new ecosystem for years. New regulations and new layers of technology, focusing, have led thousands of startups to launch new products. Some of them are […]
If you want to finance a car, you must analyze all the options: how does financing work, and when should it be done? How to finance a car is a very frequent question both from individuals with mobility needs and from companies that need a vehicle to use. Is it better to make a conventional […]
The difference between leasing and renting can bring competitive advantages to companies, so it is worth understanding each of these models. The difference between leasing and renting can be critical for the economic model of an SME or a self-employed person. Renting and leasing are different models for using a car, as are buying, carsharing […]