BBVA API Market
In fact, many professionals think they are making responsive designs when they are actually working with an adaptive architecture. Both designs are actually very similar; however, they have some key differences that should definitely be taken into account.
Adaptive design forms steps depending on the screen size. As the screen size of the device changes, different CSS files or a single CSS file are provided and certain classes and different styles are applied. Traditionally designers use three or four different steps: small (typically centered on a smartphone), medium (tablets and small desktop monitors) large (large tablets or desktop browser window in full screen mode) and finally, in some cases, even extra large (for desktop monitors with much greater resolution than usual).
Another key to adaptive design is that it tries to figure out an appropriate structure by default through external elements such as JavaScript, regardless of the screen in which it is being played, for example, when a desktop browser displays a design for 1000 pixels wide as a minimum, even though the window has been moved to one side of the user’s monitor with 500 pixels in total.
Responsive design, in contrast, gets rid of these fixed steps and creates a fluid and in a certain respect agnostic structure of the screen in which it is being played. Percentages are used to specify the width of the elements of a structure, and sometimes the height, on the screen. For units that are the size of fonts, margins and other key attributes, in responsive design relative units are used as percentages, the em and ex.
Being fluid, breakpoints are used for certain elements to be repositioned on the screen, and even hidden, when their size becomes an aberration. For example, a menu that should cover 20% of the width of a screen would be reduced to 64 pixels wide in a 320 pixels window. In that case, the best thing will be to move it to the bottom, change its contents, or hide it.
If you are working with a project that has already been completed to maintain but adapt to new situations, choosing adaptive design elements can save work and resources. If the structure is not very complex, many designers will have little trouble knowing what key point of their design to change with media queries or using different style sheets depending on the browser; however, if the basis of a new project is being considered from scratch, using the key aspects of responsive design ends up being a better option not just to start, but also in the long term.
Actually, the smartest thing is to always use the best tool for the job. This means that sometimes the best, fastest or most suitable solution is using adaptive and responsive elements simultaneously. By combining the efficiencies of both methods, a designer or professional design team may create a more robust project with less effort.
With a catalog of devices that are more varied each day from which visitors view websites from around the world, it becomes imperative to master a design that scales, adjusts and mutes to satisfy not only its screen, but also its connection and processor capabilities.
It is important not to provide more design assets than necessary to the user, and make smart decisions from the point that the first pieces of a new web structure is placed. Providing icons that are not going to be seen or uploading fonts that are not supported are some of the most obvious, but uploading specific textures of elements that a particular device is not going to be able to show should also be avoided.
Using responsive or adaptive design is one of the most important decisions of an established or new web project, and knowing the strengths and weaknesses of both methods will allow the design team to work more efficiently.
Are you interested in financial APIs? Discover all the APIs we can offer you at BBVA
Open finance is expected to be regulated over the next few years, leading to a new open data ecosystem Open finance is making its way into the legal system through the consolidation of several initiatives that will lend it legal protection. Once this is complete, customers will have an open finance framework that protects their data […]
Ecommerce has continued to grow steadily in Spain, except during the pandemic, which has already been overcome in terms of online shopping. Ecommerce has been making inroads among the Spanish for over two decades. In 2000, it was a marginal and niche activity. Now it is almost universal. Almost all Spaniards with internet access shop online […]
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. […]
