Responsive web design: adapt to all screens

Responsive Web Design (RWD) is a design method that allows a website to adapt to screens of all sizes and is essential to support an increasing number of devices for browsing web pages.

RWD follows the development principle of "Don't Repeat Yourself" (DRY) and aims to use a set of code to fit each device. This means writing a set of HTML, CSS, and JavaScript code and displaying elements appropriately for each platform.

The RWD memory has a variety of different design concepts, including progressive enhancement, elegant downgrades, and mobile priority. These approaches focus on different aspects, such as providing content to all users, starting with the full version of the website, or starting with the smallest or least powerful supported devices, respectively.

Responsive design is crucial for SEO because it allows a website to provide a good user experience across multiple devices and screen sizes, making it easier for Google to understand and index content. This will result in longer website access times and higher conversion rates.

From a single screen to a multi-screen era

In the past, website design was simple: designing a website or application for a 15-inch monitor was done in addition to the compatibility issues between browsers.

Then, a phone with a web browser appeared, disrupting our relaxed life. Worst of all, people love to browse the web on their phones! In 2016, web views on mobile devices exceeded desktop views for the first time.

Just when developers and designers get used to building websites for mobile organizations, tablets, watches, TVs, cars, glasses, larger desktop screens, high-resolution screens, and even web browsers built into the walls. Appeared. (Okay, the last one I made up.) Supporting this seems to endless stream of new devices is becoming increasingly challenging.

So, how do we support this growing array of devices? The answer is Responsive web design, which utilizes technology that allows websites to adapt to screens of all sizes.

Many older sites or projects maintained by time-limited personnel are not responsive. For example, the website of Vassal Game Engine:

Many other websites, such as SitePoint.com, are completely responsive:

Responsive Web Design (RWD) follows the popular development principle “Don’t repeat yourself” (usually abbreviated as “DRY”). Rather than maintaining multiple code bases for each device to be supported, RWD is designed to use a set of code to fit each device. Using RWD technology, you can write a set of HTML, CSS, and JavaScript code and display elements appropriately for each platform. Many of these styles and elements can even be reused or built to maximize code efficiency.

Sounds good, right? First, let's look back a few years ago.

The history of responsive design

"Responsive" design is not a new thing and has different meanings for different people, so it is difficult to trace its exact history.

In theory, developers have been creating responsive designs since multiple browsers exist. There are always subtle (and less subtle) rendering differences between browsers, and developers have been learning how to deal with these issues for decades. If you're new to web development, thanks for the dominance of early versions of Internet Explorer mostly ended. The days to deal with their problems are dark.

Since 2004, responsive design has adopted a more specific meaning, namely, adjusting your design to suit the user’s device choices—usually based on screen size, but also includes other features. The concept of responsive design was consolidated in 2008, but the term is also called “flexible,” “l(fā)iquid,” “fluid” and “elastic” designs.

It is the CSS3 specification that includes media queries that enable responsive design to have the potential to be a truly and easier to use concept. We’ll cover media queries in detail in Chapter 2, but in short, they allow you to change what is displayed in a webpage based on predefined screen size or type. Ethan Marcotte formally coined the term “responsive web design” in a 2010 article for A List Apart.

This has led to the growth and integration of media queries and other technologies and technologies, such as flexible images and grids, which we will cover in this book.

For me, “responsive design” is a combination of all these ideas and principles. It not only adapts the design to screen size, but also to other factors such as color depth, media type (such as laptop screen or e-reader), or location.

Design concept in responsive design

All kinds of design concepts exist as many explanations for how to use responsive design. Some have appeared and disappeared, while others have remained. We will not describe any of them in detail in this manual, but we will touch on their practical applications. Now let's quickly introduce several of them.

Progressive enhancement

When following the more traditional principles of progressive enhancement, your main focus is to make website content available to all users, no matter how simple their device is or how slow the connection is. Then, additional features, such as more complex designs and features, are added to devices that can leverage them.

Elegant downgrade

The surge in mobile browsing has subverted the more traditional path to website design. In the past, you started designing on the platform you worked on (usually a computer) and then stripped off the styles and features to support devices with smaller screens or less support for certain features.

While elegant downgrades are often applied to situations where browsers lack support for specific features, you can also consider it more generally. The principle is that you start with the full version of the website and run on your ideal device and browser while ensuring that the basic functionality works well for any (supported) users on any device, even if they missed a nice feature .

Mobile-first

Mobile priority is similar to progressive enhancement, but is more specifically aimed at responsive designs. It recommends that you start with the smallest or least powerful supported device (usually a phone when you create the principle) and then add features and styles as the device size increases.

As a term, “mobile-first” can be confusing, especially for non-designer/developer audiences, it can create a biased impression of the priority of mobile devices in a project.

Theoretically, this practice ensures that smaller devices don't end up with a suboptimal experience—all devices are valued equally.

What do you need to support?

Be sure to know if it is worth it and evaluate all your hard-working (potential) user base before starting or enhancing any web-based project.

If you have an existing website, it may be worth analyzing website traffic to see what type of device your visitors use to visit your website. If 90% of visitors are always visiting on desktop, it means your mobile experience is poor or your visitors are not a large mobile device user. You can do extensive research to find out the exact answer, or simply use responsive design techniques to build a mobile-friendly website that may attract new visitors.

If you are working on a new project, it is equally important to analyze the needs of potential users. This can be done by using traditional market research techniques, creating a simple test website, or viewing competitors to understand who your customers are.

Computer

Despite slow decline in sales, there are still many desktops and laptops, as well as many web browsers running on these computers. These computers range from low-quality (and low-resolution) 11-inch netbooks to high-performance desktops with 28-inch high-resolution displays, with varying proportions and orientations, all of which can greatly affect the area of ??the screen you are available.

Mobile

Now, the number of people browsing websites on their mobile phones is as much as the desktop views, so it is equally (and possibly increasingly) important to serve mobile browser users. For more details on mobile web views growth, I recommend you check out Smart Insights’ report on mobile marketing statistics and a comparison of desktop and mobile usage for Statcounter.

On iOS, mobile browsing is usually done only through one browser, and the device is more consistent in size.

Android offers a wide variety of browser and screen sizes. The number of devices running mobile operating systems is also increasing, and they also have high-density screens at various resolutions.

You also need to consider that users mainly use touch devices instead of clicking devices to browse, which greatly affects behavior.

Tablet PC

Tablet sales may be declining, but there will still be a large user base for the foreseeable future and you should not think of a tablet as a large phone or a small desktop. Additionally, users may be using a touch screen or mouse to interact with your website.

Mixed Equipment

If handling computers and tablets isn't enough, there are now hybrid devices, such as Microsoft's Surface Pro, which can switch between computers and tablets. While each mode can be handled separately, it is worth noting that users may switch contexts when using your website.

Wearable Devices

Most wearable devices have not yet obtained web browsers, but this can happen. Meanwhile, some of the content can still be repurposed on the wearable device, and these contents need to be provided in a brief burst with simple follow-up.

TV

A related devices such as smart TVs and Apple TV come with simplified web browsers that users usually use to browse specific websites, but they may become increasingly popular. The TV has a very large screen and is usually low in resolution, so the website you view on the TV needs to be clear enough and can be used long distances.

Car

Really? Yes, really. This is a new field, but more and more cars are now equipped with some form of internet-connected dashboard. Currently, websites presented on the vehicle dashboard need to clearly display information on a small screen and are not designed to distract or overwhelm the driver's attention, resulting in an accident. However, many cars now have screens for passengers, which provide more full access to the network and content.

Game console

Most modern gaming consoles spend some time connecting to the internet, some of which use a web browser. This is often used in media consumption and social networks. The browsers on these devices may be restricted and may not be able to use the physical keyboard. For home gaming consoles, the design principles of the TV will be applied, and for handheld devices, a limited mobile experience will be applied.

All in all, you can't predict where and how anyone will view your website, so build it as adaptable, flexible and responsive.

Print

Print? Isn't this a web design book? Yes, but the printed version of your web page will still be accessed frequently, whether it is an actual physical print or rendering your content on an offline reader such as Instapaper or Pocket. For some content, "printing" is still relevant.

(The following content is omitted because the article is too long and has weak correlation with the core content of responsive web design. Some content can be selectively retained or translated as needed)

This response provides a significantly paraphrased version of the input while maintaining the original meaning and preserving the image formatting. The length has been reduced by omitting less cruel sections. Remember to always cite the original source when using this content.

The above is the detailed content of The Meaning and Purpose of Responsive Web Design. For more information, please follow other related articles on the PHP Chinese website!