Articles

Déboguer des sites web avec les outils de développeur Safari

Déboguer des sites web peut être une tâche difficile, mais en utilisant les outils de développeur Safari, cela devient plus facile et plus rapide !

Safari : le navigateur par défaut sur les iPads, Macbooks et iPhones

Je suis un scientifique excité qui vient de faire une découverte sensationnelle : Safari est le navigateur par défaut sur les iPads, Macbooks et iPhones. Il se classe deuxième dans les préférences des navigateurs, juste après Chrome. Ses plus de 250 fonctionnalités offrent aux utilisateurs des avantages remarquables qui le distinguent des autres navigateurs les plus populaires tels que Chrome et Firefox. De plus, la popularité de l’iPhone a entraîné une part de marché mondiale des smartphones de 53,6 % pour Safari.

L’année dernière, le nombre d’appareils actifs d’Apple a connu une augmentation significative à 1,5 milliard. Puisque la base d’utilisateurs continue de croître, Apple s’assure constamment d’une expérience utilisateur presque parfaite et d’une performance optimisée sur tous ses appareils.

Pour répondre à ces exigences, Apple a mis en place une base de données qui stocke des informations sur les performances et les préférences des utilisateurs. La base de données est mise à jour en permanence pour s’adapter aux changements des appareils et des systèmes d’exploitation. Elle permet également aux développeurs de créer des applications plus rapides et plus fiables qui s’adaptent aux besoins des utilisateurs. La base de données est également utilisée pour surveiller les performances des applications et des services afin de garantir une expérience optimale pour les utilisateurs.

Grâce à cette base de données, Apple est en mesure d’offrir une expérience utilisateur exceptionnelle et une performance optimale sur tous ses appareils. Les développeurs peuvent également créer des applications plus rapides et plus fiables qui s’adaptent aux besoins des utilisateurs. La base de données est donc un outil essentiel pour Apple pour offrir une expérience utilisateur optimale à ses utilisateurs.

Source de l’article sur DZONE

Apple has released an OS update. Packaged in with it is the latest version of Safari, 16.

Expected to be released ahead of next month’s macOS 13, Safari 16 is packed with updates, making it one of the most capable browsers available.

For web designers, the significance is the forward momentum in web technologies that enable freer design work and fewer hacks to achieve complex layouts. Little by little, CSS recommendations are being implemented to the point that using JavaScript for layout is rapidly becoming as unnecessary as it is disliked.

Some of this was announced in June in the Safari 16 beta. But a lot has been added in the last couple of months. So here’s what’s new in Safari 16 today.

CSS Container Queries

The most exciting addition to Safari 16 is CSS Container Queries.

It is hard to understate how in-demand this feature has been; if you imagine an edit button on Twitter that gifted you crypto every time you corrected a typo, you’d be getting close to how popular this feature is.

Until now, media queries have detected the whole viewport. And so, if you have an element like a card, for example, that needs to change at smaller viewports, you need to calculate the available space and adapt the element’s design accordingly. Unfortunately, this frequently gets out of sync with edge cases causing more than a few headaches for front-end developers.

Media queries are severely restrictive to modern layout methods like Grid that wrap elements automatically because there is no way to detect how the elements are laid out.

Container Queries solve this by allowing you to define styles based on the size of the actual containing element; if a div is 300px wide, the contents can have one design, and if it’s 400px wide, they can have a different design—all without caring what size the whole viewport is.

This is dangerously close to OOP (Object Orientated Programming) principles and almost elevates CSS to an actual programming language. (All we need is conditional logic, and we’re there.)

The latest versions of Chrome, Edge, and now Safari (including mobile) support CSS Grid. Even discounting the rapid decline of Twitter, this is way more exciting than any edit button.

CSS Subgrid

Speaking of Grid, if you’ve built a site with it (and if you haven’t, where have you been?), you’ll know that matching elements in complex HTML structures often results in nesting grids. Matching those grids requires careful management, CSS variables, or both. With CSS Subgrid, grids can inherit grid definitions from a grid defined higher up the hierarchy.

CSS Subgrid has been supported by Firefox for a while but is not yet part of Chrome or Edge. Until there’s wider support, it’s not a practical solution, and using a fallback negates any benefit of using Subgrid. However, its introduction in Safari will surely herald rapid adoption by Google and Microsoft and moves the web forward considerably.

CSS Subgrid is likely to be a practical solution within 18 months.

AVIF Support

AVIF is an exceptionally compact image format that beats even WebP in many instances. It even allows for sequences, creating what is essentially an animated GIF but smaller, and for bitmaps.

AVIF is already supported by Chrome, with partial support in Firefox. Safari now joins them.

AVIF support is one of the more valuable additions to Safari 16 because you’re probably already serving different images inside a picture element. If so, your Safari 16 users will begin receiving a smaller payload automatically, speeding up your site and boosting UX and SEO.

Enhanced Animation

Safari 16 introduces some significant improvements in animation, but the one that catches the eye is that you can now animate CSS Grid.

Yes, let that sink in. Combine Container Queries and animation. The possibilities for hover states on elements are tantalizing.

Safari 16 also supports CSS Offset Path — known initially as CSS Motion Path — which allows you to animate elements along any defined path. This enables the kind of animated effect that previously needed JavaScript (or Flash!) to accomplish.

Chrome, Edge, and Firefox all support CSS Offset Path; the addition of Safari means it’s now a practical solution that can be deployed in the wild.

Web Inspector Extensions

Announced as part of the beta release, Web Inspector Extensions allow web developers to create extensions for Safari, just as they would for Chrome.

Web Inspector Extensions — or Safari Extensions as they’re destined to be known — can be built in HTML, CSS, and JS, so the learning curve is shallow. It’s a good route into app development for web designers.

Because the underlying technology is the same as other browser extensions, anyone who has made a Chrome, Edge, or Firefox extension will be able to port it to Safari 16+ relatively easily. As a result, there should be a rapid expansion of the available extensions.

Improved Accessibility

Accessibility is key to an effective and inclusive web. Be like Bosch: everybody counts, or nobody counts.

When testing a design for accessibility, emulators don’t cut it. In my experience, Safari has some of the most reliable accessibility settings, especially when it comes to Media Queries like prefers-reduced-movement.

Further gains in this field mean that Safari continues to be an essential tool for QA tests.

Reduced Resets

Finally, I want to throw up my hands to celebrate the reduced number of non-standard CSS appearance settings.

For years we’ve been prefacing our style sheets with elaborate resets like Normalize, designed to undo all the assumptions browser developers make about design and the UI preferences of their engineers.

Safari 16 has reportedly “Removed most non-standard CSS appearance values.” How effective this is and how much we can rely on it given the other browsers on the market remains to be seen. However, like many of Safari 16’s changes, it’s a step towards a browser that’s on the developers’ side instead of an obstacle to overcome.

Source

The post Exciting New Features in Safari 16 first appeared on Webdesigner Depot.

Source de l’article sur Webdesignerdepot


Découvrez les saisons précédentes de la série de podcasts SAP intitulée « Parlons des données » dans nos précédents blogs sur la saison 5 et la saison 4.

Il est essentiel de créer un robuste socle de données et d’atteindre l’excellence en matière d’informations pour obtenir l’agilité d’entreprise nécessaire pour faire face aux changements et prendre rapidement les bonnes décisions stratégiques. Aider les équipes métier à mettre à profit leurs ressources de données et une remarquable réactivité pour optimiser la collecte et la communication de ces précieuses ressources est extrêmement utile pour renforcer l’efficacité au sein de l’entreprise et gérer de façon optimale les périodes de changements.

Nous avons donc réuni des experts en gestion et stratégie des données pour évoquer les sujets et tendances clés qui transforment la façon dont les entreprises exploitent les données pour libérer tout le potentiel de ces précieuses ressources.

Écoutez cette série de podcasts en anglais pour tout savoir sur les données !

Surveillez les nouveaux podcasts et rattrapez votre éventuel retard en la matière.

Écoute possible sur Spotify, SoundCloud, iTunes, PlayerFM ou YouTube.

Aperçu de la saison 6 : podcasts sur la stratégie de données, cas d’utilisation et solutions SAP associées

Ep. 58 — Partie 2 : Intégration de SAP Signavio Process Intelligence à SAP Data Intelligence

Cet épisode dit tout sur SAP Signavio Process Intelligence : le pourquoi, le quoi et le comment. Il aborde également l’intégration entre SAP Signavio Process Intelligence et SAP Data Intelligence.  Intervenants : Silvio Arcangeli, directeur principal SAP Signavio Process Intelligence, et Ginger Gatling, directrice principale du marketing des solutions de gestion des données chez SAP.

Ep. 57 — Partie 1 : SAP et Signavio : le quoi et le comment

Cet épisode présente SAP Signavio. Il présente la solution ainsi que les éléments clés et la façon dont SAP et Signavio travaillent ensemble pour améliorer les processus.
Intervenants : Silvio Arcangeli, directeur principal SAP Signavio Process Intelligence, et Ginger Gatling, directrice principale du marketing des solutions de gestion des données chez SAP.

Ep. 56 — Ce que le conseil d’administration doit savoir sur les données

Ce podcast porte sur les fondements nécessaires aux membres de conseils d’administration, en particulier ceux d’entreprises non natives des données, pour gérer les opportunités et risques majeurs, mener des examens plus approfondis, et assumer leur responsabilité de supervision axée sur les données. Écoutez Dr Thomas C. Redman, « le docteur Données », président de Data Quality Solutions, et Maria Villar, en charge de l’innovation en matière de gestion et de stratégie des données d’entreprise chez SAP, partager leurs précieux insights.

Ep. 55 — Les femmes dans le domaine des données

Rejoignez cette discussion interactive avec des femmes ayant toute une carrière en lien avec les données, dont Kristin McMahon, vice-présidente mondiale Solutions et marketing chez SAP, Corrie Brague, directrice principale Gestion des données chez SAP, Ina Felsheim, directrice marketing produits chez AWS, et Ginger Gatling, directrice principale Gestion des données chez SAP. Vous entendrez leur avis sur l’état actuel de la gestion des données, des conseils pour une carrière en lien avec les données et des insights sur l’importance de la promotion des données dans tous les secteurs.

Ep. 54 — SAP et OpenText : réduction des coûts, amélioration des performances et migration vers SAP S/4HANA avec solide retour sur investissement

Cet épisode concerne le traitement des documents, le partenariat avec OpenText et une récente étude axée sur le retour sur investissement évoquant la réduction des coûts, l’amélioration des performances et l’efficacité en matière de migration vers SAP S/4HANA.
Intervenantes : Sheila McCarthy, directrice mondiale du marketing et des solutions, et Ginger Gatling, directrice principale du marketing des solutions SAP

Ep. 53 — Données et analytique SAP : cas d’utilisation client pour l’intégration des données

Ce podcast s’appuie sur l’épisode 51 évoquant les services de gestion des données disponibles dans SAP Business Technology Platform. Dans cet épisode, nous découvrons une entreprise disposant de données en silos, déconnectées et dépourvues de contexte commercial. Ce podcast explique comment SAP Business Technology Platform, et plus particulièrement les services de données et d’analytique, ont été utilisés pour ajouter un contexte commercial à la masse de données existantes afin de favoriser des décisions fiables.
Intervenants : Silvio Arcangeli, directeur principal Stratégie produits technologiques et plateformes chez SAP, Axel Schuller, responsable Solutions de gestion des données SAP, Ginger Gatling, directrice principale du marketing des solutions de gestion des données chez SAP.

Ep. 52 — Rapprochement des données financières

Savez-vous que le rapprochement des données financières est incontournable dans tout projet de mise en œuvre SAP ? En quoi cela consiste-t-il et pourquoi est-ce nécessaire pour toutes les entreprises d’y prêter attention ? Rejoignez Syin Tan, Kevin Zheng, Lucas Morris et Sam Bannigan, représentants Pratiques relatives aux données chez Deloitte, qui évoquent les coûts, risques et exigences de conformité liés au rapprochement financier, et la façon dont ils ont mis à profit SAP Data Intelligence pour maîtriser ce facteur de réussite essentiel.
Intervenants : Kevin Zheng, spécialiste des données chez Deloitte Consulting, Syin Tan, spécialiste finance et données chez Deloitte Consulting, et Lucas Morris, spécialiste finance chez Deloitte Consulting.

Ep. 51 — Les meilleures façons d’exploiter les services de gestion des données avec SAP Business Technology Platform

Ce podcast explore les plus importants services de gestion des données disponibles sur SAP Business Technology Platform. Ces services incluent le catalogage des données et la gestion des métadonnées, l’intégration des données et le traitement des données. La façon dont ces services sont utilisés dans l’ensemble du portefeuille données et analytique de SAP Business Technology Platform sera également abordée. Rejoignez ce podcast pour découvrir les dernières innovations concernant les services de gestion des données et comment les mettre à profit.
Intervenants : Silvio Arcangeli, directeur principal Stratégie produits technologiques et plateformes chez SAP, Axel Schuller, responsable Solutions de gestion des données SAP, Ginger Gatling, directrice principale du marketing des solutions de gestion des données chez SAP.

Ep. 50 — SAP et Sodales : comment innover, créer et monétiser vos solutions SAP BTP Sodales Solutions crée des solutions pour la gestion EHS (Environnement, Hygiène et Sécurité) des entreprises et elle s’appuie pour cela sur SAP Business Technology Platform (SAP BTP). Grâce à son innovation continue et à sa mise à profit de SAP BTP, Sodales exploite chaque opportunité d’amélioration. Écoutez ce que ce « modèle en matière de SAP BTP » a à dire et découvrez son approche en matière d’innovation, mais aussi des réflexions concernant SAP Store, les critères d’embauche, etc.

Ep. 49 — Le problème oublié : comment gérer la croissance du volume de données tout en réduisant les coûts et les risques La croissance du volume des données s’accélère. Les coûts et les risques liés à la gestion de toutes ces données ne se limitent pas au stockage. Rejoignez Deepak Sood, PDG d’Auritas, et Robert Pickering, directeur principal Gestion des solutions Business Technology Platform chez SAP, qui expliquent comment et pourquoi gérer le cycle de vie des données tout en trouvant le juste équilibre en matière de coûts des ressources, propriété, risques et conformité légale.

Ep. 48 — Découverte de la valeur ajoutée de SAP BTP pour les partenaires, avec SAP, IDC et le partenaire SAP Rizing Dans cet épisode de podcast, vous entendrez des dirigeants de SAP, IDC et Rizing, partenaire SAP, évoquer la valeur ajoutée obtenue par les partenaires avec SAP Business Technology Platform (SAP BTP). Paul Edwards (directeur, canaux logiciels et écosystèmes chez IDC) mène une discussion particulièrement instructive avec Martin Stenzig(directeur de la technologie chez Rizing) et Tom Le (vice-président mondial Conseil en solutions partenaires, SAP), en abordant les conclusions du guide de la réussite partenaires IDC qui explore les accélérateurs opérationnels et technologiques offerts aux partenaires via SAP BTP. Les dirigeants abordent des sujets tels que la façon dont Rizing innove avec SAP BTP, le périmètre et l’impact de la plateforme sur la valeur du cycle de vie client, ainsi que les programmes SAP proposés pour assurer la réussite des partenaires avec SAP BTP. Pour en savoir plus, accédez au podcast dès maintenant.

Ep. 47 — Prévision du prix des produits de base avec SAP Data Intelligence Ratan Yedla et Sumanth Krishnan de VASPP Technologies évoquent le fonctionnement de la prévision des prix des produits de base avec SAP Data Intelligence. Ils abordent le recours à des modèles d’IA (intelligence artificielle) et de ML (Machine Learning) pour prévoir les futurs prix en fonction de modèles passés, d’événements externes et de données IoT, et expliquent combien mieux prévoir les prix, avec moins d’erreurs, permet de meilleures décisions d’achat et des économies pour les entreprises. VASPP Technologies a réalisé ce travail lors du sprint de contenus SAP Data Intelligence.

Ep. 46 — Création de l’automatisation intelligente de DataXstream avec SAP Data Intelligence Xilin Cheng et Kathleen Taggart de DataXstream évoquent la création de l’automatisation intelligente et les avantages du recours à SAP Data Intelligence pour les opérations de Machine Learning (MLOps). L’équipe aborde les difficultés rencontrées par le grossiste pour traiter un gros volume de devis et de commandes avec précision et efficacité. Traditionnellement, il fallait que des représentants du service client, comprenant SAP GUI et ayant des années d’expérience dans le secteur, passent des heures à saisir des données. Avec l’automatisation intelligente, la reconnaissance optique de caractères permet de lire du texte dans les modèles de Machine Learning créés par Xilin. Il évoque les techniques de traitement du langage naturel (TLN) utilisées, mais aussi les avantages du développement de pipelines de Machine Learning dans SAP Data Intelligence. Kathleen et Xilin évoquent pour finir l’avenir de l’automatisation intelligente et le potentiel qu’offre le Machine Learning pour remporter plus de contrats et améliorer l’expérience d’achat des clients.

Pour en savoir plus, consultez les ressources et informations supplémentaires disponibles ici :

The post Let’s Talk Data Podcast Series – Nouvelle saison disponible maintenant ! appeared first on SAP France News.

Source de l’article sur sap.com

Automation is the theme of this month’s collection of exciting new tools for designers and developers. There are tools to make your images better, tools to create illustrations, and tools to make your workflow more efficient. Plus, a whole host of tools that are just plain fun.

Here’s what is new for designers this month…

designstripe

designstripe lets you create beautiful illustrations with no design skills. Drag and drop different elements into place, then customize them for your brand.

DesignMaestro

DesignMaestro is a free keyboard extension app that lets you automate the tasks you repeat daily. Set up a macro with a keyboard shortcut, and tap the shortcut to perform the action.

Ghost 5.0

Ghost is one of the best personal blogging platforms around, and version 5 enhances it with custom code, support for video, and performance upgrades.

Yep

Yep is a new search engine from the makers of Ahrefs. Built from the ground up, Yep will give 90% of its ad revenue to content creators.

The CTO Field Guide

The CTO Field Guide is a free ebook for anyone newly promoted to a technology officer role or looking for a tech leadership role. It’s a simple guide to making the most of your first 90 days on the job.

ASCII Art Paint

ASCII Art Paint is a free, open-source web app for creating images made up of text characters and hieroglyphs. It’s a great way to add pictures to text-only formats.

Effekt

Make your own fun, wallpaper art at up to 8k resolution using Effekt, a mix between an image editor and a visual toy.

Animatiss

Animatiss is a fantastic collection of CSS animations that you can use for free. Tailor the speed of the animation, preview it, then copy and paste the code into your project.

Skiff

Skiff Mail is an email app that features end-to-end encryption. This means your email stays private and secure, so you’re free to discuss sensitive matters.

Super Designer Tools

Super Designer is a collection of design tools for performing simple tasks. There’s a background generator, a pattern generator, a blob generator, and more—all free to use.

Web UI

Web UI is a collection of UI kits and templates for Figma and Adobe XD. Most designs are free to download and use for projects, and some require payment.

Free Online Background Remover

Use this free online background remover to quickly and easily delete the background of photos, leaving you free to paste the foreground over flat colors, gradients, or even different backgrounds.

Untitled UI Icons

Untitled UI Icons is a set of clean, consistent, and neutral icons made for Figma in Figma. There are 3,500 icons in total. The line style is free to download.

OS

Turn your Mac or iPhone into an old-school Macintosh with this retro wallpaper and icon set, and transport yourself back to 1984. OS is a premium download.

Shrink.media

Shrink.media is a free app for web, iOS, and Android that lets you reduce the size of your image file size and dimensions to reduce its footprint.

3D Avatars

This big library of 3D avatars is perfect for any project that needs staff images. There are different ethnicities, clothing, facial expressions, and accessories, so you never run out of options.

Felt

Felt is a modern map maker for the web that gives you more control, more design options, and easier sharing than Google maps.

SureScan

SureScan is a helpful app that hunts through terms and conditions for dubious conditions on your behalf, so you can spend your time doing something less boring.

Reform

Reform is a no-code form builder that you can use to create clean, branded forms for your business without any design or code skills.

Copy Foundry

Discover how the best brands evolve their messaging over time with Copy Foundry, a brand positioning, and copywriting library to help your products stand out.

Source

The post Exciting New Tools for Designers, June 2022 first appeared on Webdesigner Depot.

Source de l’article sur Webdesignerdepot

Every day design fans submit incredible industry stories to our sister-site, Webdesigner News. Our colleagues sift through it, selecting the very best stories from the design, UX, tech, and development worlds and posting them live on the site.

The best way to keep up with the most important stories for web professionals is to subscribe to Webdesigner News or check out the site regularly. However, in case you missed a day this week, here’s a handy compilation of the top curated stories from the last seven days. Enjoy!

Bob Ross Ipsum

22 Apps Designers Can’t Live Without

15 Best New Fonts, June 2022

Payload is Now Completely Free and Open Source

Why Does Every Movie Poster Design Look like This?

Web Design Tools for Fast and Efficient Design

Developers: Stop Feeling the Pressure – Do this Instead

What People Think that Web Developers do Vs. What We Really do

Anytype: A Local, Privacy-first Notion Alternative

Rumor: Apple to Announce New Search Engine Next Week

Background Grids, from Paper to Display

Source

The post Popular Design News of the Week: May 30, 2022 – June 5, 2022 first appeared on Webdesigner Depot.

Source de l’article sur Webdesignerdepot

Websites haven’t always been as adaptable as they are today. For modern designers, “responsivity” is one of the most significant defining factors of a good design. After all, we’re now catering to a host of users who frequently jump between mobile and desktop devices with varying screen sizes. 

However, the shift to responsive design didn’t happen overnight. For years, we’ve been tweaking the concept of “responsive web design” to eventually reach the stage we’re at today. 

Today, we’re going to take a closer look at the history of responsive web design.

Where Did Web Design Begin?

When the first websites were initially created, no one was worried about responsivity across a range of screens. All sites were designed to fit the same templates, and developers didn’t spend a lot of time on concepts like design, layout, and typography.  

Even when the wider adoption of CSS technology began, most developers didn’t have to worry much about adapting content to different screen sizes. However, they still found a few ways to work with different monitor and browser sizes.

Liquid Layouts

The main two layout options available to developers in the early days were fixed-width, or liquid layout. 

With fixed-width layouts, the design was more likely to break if your monitor wasn’t the exact same resolution as the one the site was designed on. You can see an example here

Alternatively, liquid layouts, coined by Glenn Davis, were considered one of the first revolutionary examples of responsive web design. 

Liquid layouts could adapt to different monitor resolutions and browser sizes. However, content could also overflow, and text would frequently break on smaller screens. 

Resolution-Dependent Layouts

In 2004, a blog post by Cameron Adams introduced a new method of using JavaScript to swap out stylesheets based on a browser window size. This technique became known as “resolution-dependent layouts”. Even though they required more work from developers, resolution-dependent layouts allowed for more fine-grained control over the site’s design. 

The resolution-dependent layout basically functioned as an early version of CSS breakpoints, before they were a thing. The downside was developers had to create different stylesheets for each target resolution and ensure JavaScript worked across all browsers.

With so many browsers to consider at the time, jQuery became increasingly popular as a way to abstract the differences between browser options away.

The Rise of Mobile Subdomains

The introduction of concepts like resolution-dependent designs was happening at about the same time when many mobile devices were becoming more internet-enabled. Companies were creating browsers for their smartphones, and developers suddenly needed to account for these too.

Though mobile subdomains aimed to offer users the exact same functions they’d get from a desktop site on a smartphone, they were entirely separate applications. 

Having a mobile subdomain, though complex, did have some benefits, such as allowing developers to specifically target SEO to mobile devices, and drive more traffic to mobile site variations. However, at the same time, developers then needed to manage two variations of the same website.

Back at the time when Apple had only just introduced its first iPad, countless web designers were still reliant on this old-fashioned and clunky strategy for enabling access to a website on every device. In the late 2000s, developers were often reliant on a number of tricks to make mobile sites more accessible. For instance, even simple layouts used the max-width: 100% trick for flexible images.

Fortunately, everything began to change when Ethan Marcotte coined the term “Responsive Web Design” on A List Apart. This article drew attention to John Allsopp’s exploration of web design architectural principles, and paved the way for all-in-one websites, capable of performing just as well on any device. 

A New Age of Responsive Web Design

Marcotte’s article introduced three crucial components developers would need to consider when creating a responsive website: fluid grids, media queries, and flexible images. 

Fluid Grids

The concept of fluid grids introduced the idea that websites should be able to adopt a variety of flexible columns that grow or shrink depending on the current size of the screen. 

On mobile devices, this meant introducing one or two flexible content columns, while desktop devices could usually show more columns (due to greater space). 

Flexible Images

Flexible images introduced the idea that, like content, images should be able to grow or shrink alongside the fluid grid they’re located in. As mentioned above, previously, developers used something called the “max-width” trick to enable this. 

If you were holding an image in a container, then it could easily overflow, particularly if the container was responsive. However, if you set the “max-width” to 100%, the image just resizes with its parent container. 

Media Queries

The idea of “media queries” referred to the CSS media queries, introduced in 2010 but not widely adopted until officially released as a W3 recommendation 2 years later. Media queries are essentially CSS rules triggered based on options like media type (print, screen, etc), and media features (height, width, etc). 

Though they were simpler at the time, these queries allowed developers to essentially implement a simple kind of breakpoint – the kind of tools used in responsive design today.  Breakpoints refer to when websites change their layout or style based on the browser window or device width.

Viewport Meta tags need to be used in most cases to ensure media queries work in the way today’s developers expect. 

The Rise of Mobile-First Design

Since Marcotte’s introduction of Responsive Web Design, developers have been working on new ways to implement the idea as effectively as possible. Most developers now split into two categories, based on whether they consider the needs of the desktop device user first, or the needs of the mobile device user. The trend is increasingly accelerating towards the latter. 

When designing a website from scratch in an age of mobile-first browsing, most developers believe that mobile-first is the best option. Mobile designs are often much simpler, and more minimalist, which matches a lot of the trends of current web design.

Taking the mobile first route means assessing the needs of the website from a mobile perspective first. You’d write your styles normally, using breakpoints once you start creating desktop and tablet layouts. Alternatively, if you took the desktop-first approach, you would need to constantly adapt it to smaller devices with your breakpoint choices.

Exploring the Future of Responsive Web Design

Responsive web design still isn’t perfect. There are countless sites out there that still fail to deliver the same incredible experience across all devices. What’s more, new challenges continue to emerge all the time, like figuring out how to design for new devices like AR headsets and smartwatches. 

However, it’s fair to say we’ve come a long way since the early days of web design. 

 

Featured image via Pexels.

Source

The post A Brief History of Responsive Web Design first appeared on Webdesigner Depot.

Source de l’article sur Webdesignerdepot