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” />
QR code payment is an alternative form of mobile payment that requires no card chip or NFC technology: just a camera and an internet connection Payments with a QR code are increasingly popular among younger consumers and tourists, as well as one of the most demanded forms of payment, especially by Chinese visitors to Spain. […]
Digital banking or electronic banking is the future of the banking sector, with more and more functionalities and possibilities Digital banking, the virtual and infrastructure transformation of banking telecommunications, is increasingly used. Its ubiquity, accessibility, speed, availability, security and the diversity of available functionalities have clearly attracted users. What is digital banking? What are its […]
ST APIs are an example of an API development architecture increasingly used within companies, partly due to the separation between client and server, the process scalability and reliability, and the low number of resources required by the system. What is a REST API and what architecture examples are available to companies? What can an API […]