Vous devriez éviter d’utiliser minimum-scale , maximum-scale , et en particulier la définition de user-scalable sur no . Les utilisateurs devraient être autorisés à zoomer autant ou aussi peu que nécessaire; éviter cela entraîne des problèmes d’accessibilité.

Responsive design

Aux débuts de la conception Web, les pages étaient construites pour cibler une taille d’écran particulière. Si l’utilisateur avait un écran plus grand ou plus petit que celui du concepteur, les résultats attendus pouvaient aller de barres de défilement indésirables, à des longueurs de lignes trop longues, et à une mauvaise utilisation de l’espace. À mesure que des tailles d’écran plus variées devenaient disponibles, le concept de responsive web design (RWD) est apparu, un ensemble de pratiques qui permet aux pages Web de modifier leur disposition et leur apparence pour s’adapter à différentes largeurs d’écran, résolutions, etc. C’est une idée qui a changé notre façon de concevoir pour un web multi-périphériques, et dans cet article nous vous aiderons à comprendre les principales techniques que vous devez connaître pour la maîtriser.

Ces deux approches donnaient lieu à un site Web qui avait fière allure sur l’écran de la personne qui le concevait ! Les site liquides avaient pour résultat un design écrasé sur les petits écrans (comme on le voit ci-dessous) et des longueurs de lignes illisibles sur les plus grands.

Note : Voir cette simple mise en page "liquide" : exemple, code source. Lorsque vous regardez l’exemple, faites glisser la fenêtre de votre navigateur vers l’intérieur et vers l’extérieur pour voir comment cela se présente en fonction des différentes tailles.

Les sites à largeur fixe risquaient d’avoir une barre de défilement horizontale sur les écrans plus petits que la largeur du site (comme on le voit ci-dessous), et beaucoup d’espace blanc sur les bords sur les écrans plus grands.

Lorsque le web mobile a commencé à devenir une réalité avec les premiers téléphones à fonctions, les entreprises qui souhaitaient adopter le mobile créaient généralement une version mobile spéciale de leur site, avec une URL différente (souvent quelque chose comme m.example.com, ou example.mobi). Cela signifiait qu’il fallait développer deux versions distinctes du site et les tenir à jour.

De plus, ces sites mobiles offraient souvent une expérience très réduite. Les appareils mobiles devenant plus puissants et capables d’afficher des sites Web complets, cela était frustrant pour les utilisateurs mobiles qui se retrouvaient coincés dans la version mobile du site et incapables d’accéder à l’information qu’ils savaient disponible sur la version de bureau complète du site.

Responsive Design – The Technicalities

Fluid Grid System – Elements occupy the same percentage of space however large or small the screen becomes (i.e., users viewing designs on different devices). This means you choose where pixels should appear and define a layout size so the elements will scale up or down in a fixed way. It’s easier if you use a CSS (Cascading Style Sheets) grid system and generator for your design’s base (some are available for free). You need to calculate the target size divided by the context, as a percentage. This is your design feature’s maximum width divided by the maximum width of the users’ browser. When you apply these percentages of features to the required properties in CSS script, you’ll have a single design that expands or shrinks according to users’ screen size.

Fluid Image Use – Unlike text, images aren’t naturally fluid. That means they default to the same size and configuration from one device’s screen to the next. An obvious risk is that your design will appear inconsistent across devices as images can fail to adjust, and therefore show up out of proportion to other elements. So, you need to apply a CSS command—: img —to ensure an image shrinks for smaller screens. To include many images, you use another CSS command.

Media Queries – These are filters you use to detect the browsing device’s dimensions and make your design appear appropriately. With these, you probe to determine what size of screen a user is viewing your design on. These will alter the site layout to meet certain conditions. You also include these through CSS, and the most frequently used ones are min-width, max-width, min-height and max-height. So, based on a screen’s width, height, orientation, etc., you can accurately specify how your design will be rendered for different users to see.

The viewport meta tag

This meta tag tells mobile browsers that they should set the width of the viewport to the device width, and scale the document to 100% of its intended size, which shows the document at the mobile-optimized size that you intended.

This meta tag exists because when the original iPhone launched and people started to view websites on a small phone screen, most sites were not mobile optimized. The mobile browser would, therefore, set the viewport width to 980 pixels, render the page at that width, and show the result as a zoomed-out version of the desktop layout. Other mobile browsers (e.g. on Google Android) did the same thing. Users could zoom in and pan around the website to view the bits they were interested in, but it looked bad. You will still see this today if you have the misfortune to come across a site that does not have a responsive design.

The trouble is that your responsive design with breakpoints and media queries won’t work as intended on mobile browsers. If you’ve got a narrow screen layout that kicks in at 480px viewport width or less, and the viewport is set at 980px, you’ll never see your narrow screen layout on mobile. By setting width=device-width you are overriding Apple’s default width=980px with the actual width of the device, so your media queries will work as intended.

You should avoid using minimum-scale , maximum-scale , and in particular setting user-scalable to no . Users should be allowed to zoom as much or as little as they need to; preventing this causes accessibility problems.

Summary

Responsive design refers to a site or application design that responds to the environment in which it is viewed. It encompasses a number of CSS and HTML features and techniques and is now essentially just how we build websites by default. Consider the sites that you visit on your phone — it is probably fairly unusual to come across a site that is the desktop version scaled down, or where you need to scroll sideways to find things. This is because the web has moved to this approach of designing responsively.

It has also become much easier to achieve responsive designs with the help of the layout methods you have learned in these lessons. If you are new to web development today you have many more tools at your disposal than in the early days of responsive design. It is therefore worth checking the age of any materials you are using. While the historical articles are still useful, modern use of CSS and HTML makes it far easier to create elegant and useful designs, no matter what device your visitor views the site with.

Sources:

https://developer.mozilla.org/fr/docs/Learn/CSS/CSS_layout/Responsive_Design
https://www.interaction-design.org/literature/topics/responsive-design
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design
Responsive design

People access the internet from all kinds of devices — be it mobile, laptop, desktop, tablet, or Kindle. Static websites no longer work as they don’t allow users the versatility to change devices and still have an enjoyable user experience .

Основы отзывчивого веб-дизайна

Итан Маркотт в своей статье на сайте «A List Apart» впервые дал определение отзывчивому веб-дизайну как такому, который отвечает потребностям пользователей и используемых ими устройств. Макет страницы меняется в зависимости от размера и возможностей устройства. Например, на телефоне пользователи будут видеть контент в виде одного столбца; а на планшете тот же контент может быть представлен уже в виде двух столбцов.

Существует множество различных размеров экранов телефонов, фаблетов, планшетов, настольных компьютеров, игровых приставок, телевизоров и даже носимых устройств. Размеры экранов постоянно меняются, поэтому важно, чтобы ваш сайт мог адаптироваться к любому размеру экрана, как сегодня, так и в будущем. Кроме того, устройства имеют различные функции, с помощью которых мы взаимодействуем с ними. Например, некоторые из ваших посетителей будут использовать сенсорный экран. Современный отзывчивый дизайн учитывает все эти особенности, чтобы сделать сайт удобным для каждого.

Установите область просмотра #

В попытке обеспечить максимальное удобство мобильные браузеры отображают страницу с шириной экрана рабочего стола (обычно около 980 пикселей , хотя это зависит от устройства), а затем пытаются улучшить внешний вид содержимого, увеличивая размер шрифта и масштабируя контент, чтобы он соответствовал ширине экрана. Это означает, что размер шрифта может казаться непоследовательным для пользователей, которым приходится использовать двойное нажатие или уменьшать масштаб, чтобы увидеть контент и взаимодействовать с ним.

Значение метатега viewport width=device-width предписывает странице соответствовать ширине экрана в аппаратно-независимых пикселях. Пиксель, независимый от устройства (или плотности), — это представление одного пикселя, который на экране с высоким разрешением может состоять из множества физических пикселей. Это позволяет странице пересчитывать положение элементов контента в соответствии с различными размерами экрана, как на маленьком экране мобильного телефона, так и на большом мониторе. Пример загрузки страницы на устройстве без метатега viewport. Посмотрите этот пример на Glitch. Пример загрузки страницы на устройстве с метатегом viewport. Посмотрите этот пример на Glitch.

Некоторые браузеры сохраняют ширину страницы постоянной при повороте в альбомный режим и масштабируют страницу, а не разворачивают ее для заполнения экрана. Добавление значения initial-scale=1 предписывает браузерам устанавливать соотношение 1:1 между пикселями CSS и аппаратно-независимыми пикселями, независимо от ориентации устройства, что позволяет странице использовать всю ширину альбомной ориентации.

Обеспечьте доступность области просмотра #

Why is Responsive Design Important?

So why exactly is having a responsive web design important? It sure requires a more complicated development process and affects the web design cost , but will the return be worth the effort? The answer is a definite yes unless you’re targeting one specific device with your website.

Most online searches come from mobile phones, but 41.5% of users still use desktops, and 2.7% use tablets to browse online. Putting all focus on just one of the gadgets and ignoring the rest would mean you’re passing up on a large segment of web traffic.

Source: Statcounter

A responsive web design makes sure your site is equally practical on all types of devices and doesn’t lose its usability when a new hot gadget is introduced to the market. It ensures you’re prepared for future technology, helping you avoid going through a redesign process every time the hierarchy of devices changes.

In addition to this, a responsive web design makes it easier for bots to crawl a website through a single URL rather than crawling through multiple versions of the same web content. This helps Google properly index the web page, giving the letter a better chance of ranking high.

Aside from device types, there are also varying web browsers to account for when building a truly responsive website. It’s helpful to know which browser your target audience likes to use, and if there’s a split between browser preferences, you’ll need to make sure your website is compatible with all used browsers.

Source: Statcounter

Sur certains appareils, les éléments interactifs et animés vont être difficiles à charger, d’où le risque d’une mauvaise expérience utilisateur. Il s’agit alors de se demander s’il vaut mieux concevoir initialement pour un ordinateur de bureau (« desktop first ») ou pour un appareil mobile (« mobile first »).

On entend en général par mobile first aussi bien une stratégie donnant la primauté aux investissements à destination des utilisateurs et usages mobiles, qu’une méthode de développement qui aborde la conception par la version mobile, avant d’envisager les versions desktop ou autres. C’est cette dernière définition que nous retenons ici.

Responsive dégradation ou Responsive retrofitting

Au tout début du Responsive Design, il était évident de partir d’une conception pour Desktop, puis de la « dégrader » pour mobile. La « Responsive degradation », dite aussi « Responsive retrofitting » (« rétro-ajustement ») consiste à partir du site web conçu pour un ordinateur de bureau (desktop), puis de l’adapter pour le mobile. À mesure que la résolution et la taille de l’écran diminue, le contenu du site est modifié. C’est une stratégie assez logique.

Néanmoins, les deux versions (bureaux et mobile) sont chargées sur le smartphone même si certains contenus sont devenus inutiles. Les images, en particulier, peuvent être lourdes à charger. Or les utilisateurs, sur mobile, disposent de débits variables selon leur emplacement et sont aussi exigeants (voire plus) en termes de temps d’affichage. Par ailleurs, le mobinaute dans les transports en commun n’a pas les mêmes attentes que l’internaute assis devant son ordinateur de bureau. Bien qu’on ne puisse préjuger des usages, particulièrement sur les appareils mobiles. Seuls les tests utilisateurs et les études ethnographiques permettent de déterminer quels seront les usages réels (ou probables).

Design mobile first

La philosophie « Mobile First » a été proposée en 2009 par Luke Wroblewski, expert en conception d’interface. Le Design Mobile First a très vite rencontré un grand succès, même s’il n’est pas toujours la solution à tous les projets, en raison de l’importance des accès mobiles aux contenus. Dans la démarche mobile first, comme son nom l’indique, la méthode de conception aborde dans un premier temps l’affichage pour les terminaux mobiles, puis progresse par étapes en disposant les éléments pour des écrans plus grands. À partir de cette version mobile de la maquette, des déclinaisons sont donc effectuées pour adapter l’interface à des résolutions toujours plus grandes. La stratégie mobile first met l’accent sur les contenus.

Cette présentation de Stéphanie Walter ne laisse aucun doute sur la primauté du Mobile First Responsive Design selon elle. Attention au contenu qui peut « déborder » (comme l’eau), s’il n’a pas été pensé en amont pour les appareils mobiles !

« Graceful Degradation » et « Progressive enhancement »

Dans le même esprit, on oppose fréquemment la « dégradation gracieuse » / « dégradation élégante » (« Graceful degradation ») et « l’enrichissement progressif » / « amélioration progressive » (« Progressive enhancement »). Chaque approche a ses amateurs et ses détracteurs.

En dégradation élégante (ou Graceful degradation), le design et les fonctionnalités sont prévues pour les navigateurs les plus récents et on « dégrade » le contenu afin qu’il s’adapte aux navigateurs plus anciens.

Au contraire, la technique de l’amélioration progressive (ou progressive Enhancement) consiste à prévoir un design compatible avec tous les navigateurs, avant « d’améliorer » l’affichage selon l’équipement de l’internaute. La méthode de l’enrichissement progressif s’est précisément développée avec l’essor des appareils mobiles.

En résumé : Responsive degradation, Graceful Degradation, progressive enhancement et Mobile First sont des approches, voire des philosophies différentes pour concevoir des sites web adaptatifs. Elles ont chacunes leur partisans et leurs détracteurs.

On résume tout : trois alternatives au responsive Design

1. Site en responsive Design

• Avantages: on conserve les mêmes contenus qui s’adaptent à tous les appareils mobiles, on dispose d’urls pour pointer vers une page (SEO)
• Inconvénients: pour certains sites ayant besoin de performance ou de fonctionnalités spécifiques, le responsive Web Design est limité

1. Site mobile dédié

• Avantages: c’est un site dédié, donc fonctionnalités et contenu spécifiques au mobile : optimisation 100 % sur mesure
• Inconvénients: le coût de développement et de maintenance (c’est un second site à maintenir !) et problèmes avec des appareils hors norme (tablettes par exemple)

1. Application mobile

• Avantages: cette solution tire parti de l’OS (iOS, Android, Microsoft), donc très intéressant pour les sites e-commerce par exemple (notifications, rapidité, visibilité sur l’App Store et Google Play)
• Inconvénients: le coût de développement et de maintenance (1 site web desktop + 1 appli mobile iOS + 1 appli mobile Android + 1 appli Windows !) et il faut passer par le store/market (commissions prises sur les ventes). Attention aussi au téléchargement qui demande un effort.

1. Progressive Web Apps

• Avantages: possibilité d’utiliser les fonctions natives de l’appareil mobile (caméra, microphone, GPS, notifications push etc.). Permet de basculer en mode hors connexion, bénéficier de la dernière version du programme grâce à la connexion au serveur PWA et bien entendu l’économie de temps de développement et de maintenance !
• Inconvénients: très peu, sinon la nouveauté de cette solution qui doit encore faire ses preuves, mais très prometteuse !

« Responsive Web Design » de Ethan Marcotte (A book Apart)

Depuis sa publication révolutionnaire en 2011, « Responsive Web Design » de Ethan Marcotte demeure une ressource fondamentale. Il s’agit d’apprendre à penser au-delà des versions Desktop pour créer des conceptions qui répondent aux besoins des utilisateurs. Dans la seconde édition, Ethan Marcotte développe les principes de conception de grilles fluides, d’images flexibles et des Media Queries. Basé sur de nouveaux exemples et des données chiffrées, vous apprendrez comment offrir une expérience de qualité, peu importe la taille de l’écran.

Cet ouvrage propose de nouveaux conseils et astuces pour la prise en charge des navigateurs, les solutions de diffusion d’images, le rôle de « l’amélioration progressive » dans la conception Web, de meilleures méthodes de gestion de la bande passante, etc.

“ Adaptive Web Design ” (Seconde édition) de Aaron Gustafson (2011)

Cette nouvelle édition encadre encore plus le processus de conception web dans l’optique de « l’amélioration progressive ». L’ouvrage présente comment la stratégie de contenu, UX, HTML, CSS, le responsive Web Design, JavaScript, la programmation côté serveur et l’optimisation des performances sont au service des utilisateurs, quel que soit le périphérique utilisé pour accéder au Web.

“Responsive Web Design, mises en page et grilles – Les techniques modernes de conception web” (Seconde édition) de Christophe AUBRY (Editions ENI)

Cet ouvrage dédié aux techniques de mise en page des sites web fait le tour de la question du Responsive Web Design, ses méthodologies et applications, tout en prenant en compte les innovations techniques en matière de mise en page responsive basées sur l’utilisation de tableaux, grilles et modules du W3C.

“Design web responsive et responsable” de Scott Jehl (Editions Eyrolles)

Scott JEHL est un Webdesigner et développeur travaillant au sein de la brillante équipe du Filament Group. Il participe activement à la communauté open source sur GitHub en publiant ses travaux de recherche et d’innovation sur le développement multiplateforme.

Son dernier ouvrage intitulé “Design web responsive et responsable” traite du Webdesign. Il aborde plus particulièrement la manière dont le Responsive Design l’a considérablement amélioré. Il invite chaque webdesigner à garder un esprit critique sur ses créations afin de leur apporter de nouveaux contextes et de nouvelles fonctionnalités. Les techniques ainsi proposées visent à aller plus loin dans la conception de sites « responsables ». Le but étant de concevoir des « plateformes de plus en plus responsables » sachant s’adapter aussi bien aux réseaux rapides qu’aux réseaux plus lents, pouvant ainsi toucher un public véritablement global.

Sources:

https://web.dev/responsive-web-design-basics/
https://www.renderforest.com/blog/responsive-website-design
https://www.usabilis.com/responsive-web-design-site-web-adaptatif/
Responsive design

Quando oltre la metà dei vostri potenziali visitatori utilizza un dispositivo mobile per navigare in internet, non potete servire loro una pagina progettata solo per il desktop. Sarebbe difficile da leggere e da usare e genererebbe una cattiva esperienza utente.

Responsive Web Design – What It Is And How To Use It

Quick summary ↬ Almost every new client these days wants a mobile version of their website. It’s practically essential after all: one design for the BlackBerry, another for the iPhone, the iPad, netbook, Kindle — and all screen resolutions must be compatible, too. In the next five years, we’ll likely need to design for a number of additional inventions. When will the madness stop? It won’t, of course.

Almost every new client these days wants a mobile version of their website. It’s practically essential after all: one design for the BlackBerry, another for the iPhone, the iPad, netbook, Kindle — and all screen resolutions must be compatible, too. In the next five years, we’ll likely need to design for a number of additional inventions. When will the madness stop? It won’t, of course.

In the field of Web design and development, we’re quickly getting to the point of being unable to keep up with the endless new resolutions and devices. For many websites, creating a website version for each resolution and new device would be impossible, or at least impractical. Should we just suffer the consequences of losing visitors from one device, for the benefit of gaining visitors from another? Or is there another option?

I Siti WordPress Sono Reattivi?

CSS e HTML

Media Query

Funziona in modo simile ad una “clausola if” di alcuni linguaggi di programmazione, controllando fondamentalmente se la finestra di visualizzazione di uno schermo è abbastanza larga o troppo larga prima di eseguire il codice appropriato.

Layout Fluidi

Layout Flexbox

Mentre un layout basato sulle percentuali è fluido, molti designer e sviluppatori web hanno ritenuto che non fosse abbastanza dinamico o flessibile. Flexbox è un modulo CSS progettato come per essere più efficiente nel disporre più elementi, anche quando la dimensione del contenuto all’interno del contenitore è sconosciuta.

Un contenitore flessibile espande gli elementi in modo che riempiano lo spazio libero disponibile o li restringe per evitare che trabordino. Questi contenitori flessibili hanno una serie di proprietà uniche, come justify-content, che non è possibile modificare con un normale elemento HTML.

Immagini Reattive

L’iterazione più elementare delle immagini reattive segue lo stesso concetto di layout fluido, utilizzando un’unità dinamica per controllare la larghezza o l’altezza. Il codice CSS di esempio di cui abbiamo parlato prima realizza già questo risultato:

Velocità

Come Rendere Reattivo il Vostro Sito Web

Impostare gli Intervalli delle Media Query (Breakpoint Responsive)

Impostate gli intervalli delle vostre media query in base alle esigenze specifiche del vostro design. Ad esempio, se volessimo seguire gli standard di Bootstrap per il nostro design, utilizzeremmo le seguenti media query:

Dimensione Elementi di Layout con Percentuali o Creazione di un Layout CSS a Griglia

Hai bisogno di un hosting veloce, sicuro e adatto agli sviluppatori per i siti dei tuoi clienti? Kinsta è stata progettata con gli sviluppatori di WordPress in mente e fornisce un sacco di strumenti e un cruscotto potente. Scopri i nostri piani

Implementare Immagini Reattive

Tipografia Reattiva per il Testo del Vostro Sito Web

Punti di dispersione della Dimensione del carattere rispetto alla dimensione della vista

Test di Reattività

Premete CTRL + Shift + I su Windows, o Command + Option + I su Mac per aprire la relativa vista del dispositivo. Da qui, potete selezionare il dispositivo mobile o il tablet di vostra scelta per testare la reattività del vostro progetto.

How to Design a Responsive Website

Having covered the basics of responsive web design, now we can get to the how-to part and discuss the best practices for a responsive website. A well-built site is flexible, functional across different devices, and pleasant to interact with. Here’s how to achieve it.

How to Achieve Responsive Design?

Have Responsive Typography

Typography is one of the cornerstones of web design and, as such, can make the website impractical when ignored. Adjusting typography to several screen layouts is essential to end up with text that’s legible and organized.

Set a base value for your font size and scale it to fit each major breakpoint. The standard width for text columns on desktops is 70-80 characters per line and even shorter on mobile, so be mindful of line lengths. Pay close attention to your site’s headings to make sure they are properly sized on large and small displays.

Ensure Smooth Navigation

A big part of user experience is website navigation — how easy, intuitive, and enjoyable is your site to browse through? If a large 24-inch desktop screen has the capacity to incorporate a hefty navigation menu, sideboards, and other bulky elements, things get a lot more complicated on a small mobile screen.

There are numerous techniques to shrink larger components into fingertip-sized icons, such as a hamburger menu (shown in the image below), expandable lists, etc. Be sure to plan the navigation flow of your website to guide users seamlessly from one page to the next.

Source: UX Collective

Design Around Your Content

When creating the blueprint for your website, design around the content of your site, not around the most popular gadget in the market. Technology changes quickly, and the coolest, newest device will surely go out of style at some point.

It’s crucial to prioritize the essence of your website in the design process — the content. What is the most important piece you want visitors to take away from your website? Portray it right at the top of your page and distance it from distractions or secondary information to stress its importance.

For example, a short introductory passage that conveys the purpose of your website should be placed near the top — in most cases, closely followed by a call-to-action (CTA) button. Make your CTA text large enough to read effortlessly and the button easy to click on.

Prioritize User Experience

It hardly makes any difference how beautiful or informative your website is if it’s uncomfortable to use. Take the time to understand your users’ needs, technical abilities, and preferences. Keeping those insights top of mind, design a site that enables pleasant interactions with users.

In general, mobile users expect short and straightforward experiences with a website, while personal computer users might be willing to dedicate a bit more time. Take visitor expectations into account to create a site they’ll want to interact with.

Use Tools to Test Responsiveness

There are a ton of online tools available to quickly check how responsive your website is, and we recommend you take full advantage of them! Tools like Test My Site , Mobile-Friendly Test , and many others allow you to test your site by just inserting the URL link and get suggestions on how to improve its performance.

Source: Test My Site by Google

5 Responsive Website Examples That Nailed it

1. Shopify

Shopify allows users to have a similar experience with its website regardless of the device in use. The text columns get narrower, as does the screen, and the images are well resized for each device type. Another noticeable difference involves the main call-to-action button: it gets wider on mobile to make it easy for the guest to click.

2. Walmart

Walmart’s website easily adjusts to any display with properly sized images and copy. Notice how each section is clean, minimal, and takes up very little space — even on desktop — to avoid making the site overwhelming on smaller gadgets. Walmart also uses a carousel design, which is an effective technique to save space without sacrificing information.

3. Netflix

The Netflix website fluidly adapts its headlines, paragraphs, and background image to fit the width of any screen without distorting the overall design. The desktop version comes with a large email address field and a CTA button right next to it. The arrangement changes on the mobile version, where the button moves underneath the email field.

Netflix was intentional with its compact FAQ section that expands and collapses to show the visitor the precise answer they need. It’s a smart technique to encourage guests to interact with their website.

4. Dribbble

Dribbble uses a flexible grid to contract its multi-column layout into one with 1-2 columns on phones and tablets. The main menu bar is replaced by a hamburger menu, and several secondary elements such as views and likes are hidden to minimize the design for smaller screens. The flexible background image has also been neatly tailored to avoid awkward crops.

5. GitHub

GitHub demonstrates another great example of a fluid grid that stacks blocks on top of each other in a single column on smaller devices. The search field and top navigation bar hide behind the hamburger menu icon, and the text elements take precedence over illustrations to form a logical content hierarchy.

Bonus: Responsive Website Templates

There’s a lot more to be learned from studying existing responsive web designs, which is why we’re going to give you an extra tool — responsive website templates . These templates are created by professional designers with the best practices of web design and SEO in mind.

You can customize the content of any template as you wish to set up your site in less than an hour. If you already have a website, you can benefit from the templates by studying how their design changes from one device to the next.

In Summary

Responsive web design implements a number of techniques to adjust the website layout to different screen sizes, allowing guests to use the site comfortably on any type of device. This flexibility is achieved through media queries, flexible images, and fluid grids.

Sources:

https://www.smashingmagazine.com/2011/01/guidelines-for-responsive-web-design/
https://kinsta.com/it/blog/responsive-web-design/
https://www.renderforest.com/blog/responsive-website-design