search
HomeWeb Front-endFront-end Q&ACurrent status and trends of responsive design

From 2012 to 2014, everyone mentioned responsive design in their web design trend predictions; in 2015, responsiveness continues in their web design trend predictions. This responsive style, which has been popular for several years, has quickly consolidated its position in the past few years and set off a wave of new standards for web design. Here I will talk about some current status and trends of responsive design based on some documents and my own opinions.

Origin

In May 2010, Ethan Marcotte wrote a groundbreaking article (titled "Responsive Web Design") in "A List Apart". He used three existing Tools like fluid grids, media queries, and scalable images create a website that looks beautiful on screens of varying resolutions. Ethan Marcotte urges designers to take advantage of the unique features of the Web: "We can treat the many experiences on different Internet-connected devices as different aspects of the same website experience, rather than designing for each device. Separate tailoring to disconnect designs is the way forward. Although we have been able to design the best visual experience, we also need to embed standards-based technology into our designs so that we can make it happen. Our designs are not only flexible, but also adaptable to the various mediums in which they are rendered." Ethan Marcotte demonstrates that there is a way to deliver a great experience across multiple devices, and one that doesn't ignore the differences between devices. , will not emphasize the designer's control, but choose to let nature take its course and embrace the flexibility of the Web.

Here is a brief introduction to the three concepts mentioned above: fluid grids, media queries and scalable images originally refer to some existing technical means, but in response In the process of formula design research, these concepts still have broader meanings, and designers should also understand them:

Flow layout: originally refers to the implementation of layout technology with percentages as the unit of measurement. Various concepts such as fluid layout, elastic layout, fluid grid, etc. will not be explained one by one here. The author summarizes this into one big concept: in the layout of responsive design, pixels (px) are no longer used as the only unit, but percentages or mixed percentages and pixels are used as units to design a more flexible layout.

Media query: Media query allows you to decide what style to apply based on various attribute values ​​queried in a specific environment - such as device type, resolution, screen physical size and color, etc. By using media query, you can obtain the device and its characteristics, and provide solutions to seek common ground while reserving differences, thereby solving the problems left in the previous simple layout design.

Flexible pictures: With the flexibility of layout, pictures, as one of the important forms of information, must also have a more flexible way to adapt to layout changes. Personally, I think elastic pictures are a concept proposed by Ethan Marcotte when he proposed designing products. In subsequent research, we can use pictures as a model to expand the scope of research: in addition to pictures, we should also include research on the response methods of information content such as icons, charts, and videos.

Popular

The concept of responsive design has been spreading since it was proposed and has been recognized by all parties. The main reasons are:

External environment: The rapid growth and increasing diversification of Internet-connected devices have made today's There are also standard screen sizes;

Own features: Strictly defined responsiveness generally refers to responsive Web design, and the Web, with its unique flexibility and plasticity, can adapt to devices of various sizes and configurations and can be used everywhere .

Internal demand: As soon as the concept of responsive design was proposed, major websites and platforms hope to adopt this one-for-all model so that they can adapt to more devices more flexibly, especially in this era of overwhelming mobile devices.

Current status and trends of responsive design

Of course, not all situations should adopt responsive design. So under what circumstances is responsive design more suitable?

You want to adapt to more scenarios cost-effectively:> Resources are limited, but you always hope to use limited resources to obtain greater value. Although the manpower and time resources required to build a responsive site will increase compared to developing and designing an ordinary website, the cost is still much lower than building multiple versions for different devices; From a maintenance perspective, it will also be much easier.

You don’t know which scenario the new product you want to design and develop is more suitable for:> Instead of selecting core devices through prediction and then designing them separately, it is better to spend some time making the website more flexible so that it can be used on various devices All have the best possible experience. Because when all aspects are unknown, making predictions will increase process risks and make the results extremely challenging.

You want the website to be compatible with new devices in the future:> New devices are emerging in an endless stream. Instead of passively updating and maintaining them, it is better to proactively respond to changes and become responsive. Of course, this is just to say that it is more suitable. In fact, I personally think that as long as project resources and time allow, basically most websites can try to implement responsive design; and for those who are trying responsive design for the first time, they can also start with a "simple browsing page".

Mode

There are currently two main design modes that are chosen to be responsive in most websites:

Based on device: determine the layout break point (break point) through the type and size of mainstream devices, design multiple sets of styles, and then separate them Cast to the responding device.

Current status and trends of responsive design

Content first: The readability and legibility of the content are used as the criteria for determining break points, that is, when laying out the content, the device can be ignored, and the content determines when it is needed. Different

Current status and trends of responsive design

I still prefer the content-first approach. This is a model that truly conforms to the core strategy of responsive design and is also future-friendly. In the past, it was basically based on several PC sizes, choosing the best standard size to design the page; now mobile devices have become dazzling, and TVs and wearable devices have also slowly begun to use them, and there is no longer a fixed size; In the future, there will be an even more unpredictable equipment environment; so what is the right approach? ——It’s the content itself! Changes always come fast and hard, all we have to do is to grasp the thread that can connect the whole situation!

Current status and trends of responsive design

In the content-first strategy, there are three thinking modes that can run through the entire responsive design process:

Forget the device: Because we don’t know what kind of device users will use to access the website, therefore, we must try our best to Cover everything possible; everything (layouts, components, etc.) is compatible with different types of devices and platforms.

Elegant degradation: Although this concept was originally a compromise in technical implementation when new features could not be implemented well on old browsers, I only want to express here that when designing the layout flexibly, the content changes from The presentation of changes from wide to narrow must be carefully screened to retain the core content blocks. This mode is very suitable for responsive design transformation of existing PC page products.

Progressive Enhancement: This concept was proposed by Steven at the SXSW event in 2003. In essence, it is the reverse of graceful degradation: first create a basic experience, focusing on presenting the content in a brief way; then, while ensuring the basic experience, start working on the layout and interaction of the display. Here, it is also used to illustrate the content strategy of responsive design. The content changes from narrow to wide, which can increase the richness of the content accordingly. This pattern is consistent with a mobile-first strategy.

Of course, there are various debates about responsiveness at present. Maybe you have a good reason not to use responsive web design? But I don’t think anyone is saying, “Let’s get rid of responsive design,” when in fact, more and more websites are choosing to become responsive. This was the case in 2014, and it will continue to be the case in 2015, because this is no longer a trend, but joy is the norm.

The road ahead

Although the advantages and trends of responsive design have been generally recognized, there are still many problems that need to be overcome in the popularization of the current responsive design model:

Responsive images: The current practice of elastic images is mainly: Implementation methods such as scaling, cropping, and conditional loading are essentially just techniques. They only address the symptoms rather than the local area and cover up the problem, and do not truly realize the flexibility of the image perfectly.

Cross-end interaction: In responsive design, we not only need to consider the usage habits of desktop users, but also take into account handheld devices of different sizes. For example, Hover, which is endlessly elegant on the desktop, is an extremely poor experience on the mobile terminal. How to "seek common ground while reserving differences" to optimize the experience on all terminals still needs to be further explored.

Performance: Performance estimation is the biggest pain in responsive development. Loading, hiding or displaying content based on conditions will be more cumbersome than the code structure judged by a single condition, and will affect the experience and maintenance. Especially in terms of mobile performance, more and more devices have more complex usage environments. How to identify the device and enable the device to have a good experience in different environments is also a hard nut.

Collaboration process: Responsive design is far more than a simple design strategy. It brings a new and complete set of methods to web projects. It should also include a new approach that can better utilize this One-mode workflow.

Finally, I would like to say that responsiveness embodies a highly adaptable design thinking model. On the road of exploring responsive design, responsiveness itself is not the only purpose. Design strategies and workflows for perfectly planning page content based on any device should be our bigger topic~


Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
7款实用响应式Bootstrap电商源码模板(快来下载)7款实用响应式Bootstrap电商源码模板(快来下载)Aug 31, 2021 pm 02:13 PM

好看又实用的Bootstrap电商源码模板可以提高建站效率,下面本文给大家分享7款实用响应式Bootstrap电商源码,均可免费下载,欢迎大家使用!更多电商源码模板,请关注php中文网电商源码​栏目!

如何在Java 9中使用JavaFX来构建响应式UI界面如何在Java 9中使用JavaFX来构建响应式UI界面Jul 30, 2023 pm 06:36 PM

如何在Java9中使用JavaFX来构建响应式UI界面引言:在计算机应用程序的开发过程中,用户界面(UI)是非常重要的一部分。一个好的UI能够提升用户体验,使应用程序更具吸引力。JavaFX是Java平台上的一个图形用户界面(GUI)框架,它提供了一套丰富的工具和API来快速构建富有交互性的UI界面。在Java9中,JavaFX已经成为了JavaSE的

如何使用HTML和CSS创建一个响应式轮播图布局如何使用HTML和CSS创建一个响应式轮播图布局Oct 20, 2023 pm 04:24 PM

如何使用HTML和CSS创建一个响应式轮播图布局在现代的网页设计中,轮播图是一个常见的元素。它能够吸引用户的注意力,展示多个内容或图片,并且能够自动切换。在本文中,我们将介绍如何使用HTML和CSS创建一个响应式的轮播图布局。首先,我们需要创建一个基本的HTML结构,并添加所需的CSS样式。以下是一个简单的HTML结构:<!DOCTYPEhtml&g

手把手带你了解VUE响应式原理手把手带你了解VUE响应式原理Aug 26, 2022 pm 08:41 PM

本篇文章我们来了解 Vue2.X 响应式原理,然后我们来实现一个 vue 响应式原理(写的内容简单)实现步骤和注释写的很清晰,大家有兴趣可以耐心观看,希望对大家有所帮助!

使用Webman进行响应式网站开发的秘诀使用Webman进行响应式网站开发的秘诀Aug 14, 2023 pm 12:27 PM

使用Webman进行响应式网站开发的秘诀在当今数字化时代,人们越来越依赖于移动设备来访问互联网。为了提供更好的用户体验和适配不同尺寸的屏幕,响应式网站开发已经成为了一个重要的趋势。而Webman作为一个功能强大的框架,为我们提供了许多工具和技术来实现响应式网站的开发。在这篇文章中,我们将分享一些使用Webman进行响应式网站开发的秘诀,包括如何设置媒体查询、

如何用Vue实现响应式UI设计?如何用Vue实现响应式UI设计?Jun 27, 2023 pm 02:35 PM

随着当今Web前端开发技术的快速发展,许多前端框架也随之迅速崛起。而Vue.js作为其中的一员,因其轻量、易上手、灵活、高效、响应式等特点,越来越被广大前端开发者所青睐。在Vue的帮助下,我们可以很方便地实现响应式UI设计,提升用户交互体验,下面我们来详细介绍一下。一、什么是响应式UI设计?响应式UI设计是一种页面设计方法,其主要目的是根据不同设备的屏幕大小

如何使用Vue和Element-UI实现移动端响应式设计如何使用Vue和Element-UI实现移动端响应式设计Jul 21, 2023 am 10:49 AM

如何使用Vue和Element-UI实现移动端响应式设计随着移动设备的普及,移动端响应式设计变得越来越重要。Vue和Element-UI是两个非常流行的前端开发工具,可以帮助我们快速实现移动端响应式设计。本文将带领大家学习如何使用Vue和Element-UI来开发移动端响应式设计,并提供代码示例。一、搭建项目环境在开始之前,我们需要先搭建一个使用Vue和El

详解Vue3响应式的两大利器:ref与reactive详解Vue3响应式的两大利器:ref与reactiveJan 09, 2023 pm 06:32 PM

相对于Vue2的defineProperty实现的数据响应式,Vue3对数据响应的处理分工更加明确,通过组合式api中ref与reactive两个暴露给开发者的函数对数据进行包装,从而实现了数据响应式

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

DVWA

DVWA

Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

PhpStorm Mac version

PhpStorm Mac version

The latest (2018.2.1) professional PHP integrated development tool

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment