How should we design websites in the age of responsive design

Photoshop, CSS Design

Dreamweaver web creation software

In the 1990s, Web pages were 640 pixels wide, and in the early 2000s, they grew to 800 pixels wide. A few years ago, we adjusted it to 1024 pixels. But then, five years ago, something strange happened. Small screen devices enter the market. All of a sudden, the width we set for the Web no longer fits. Soon, tablet computers entered the market. The screen window is now taller than it is wide. Now we have no way of knowing the size of the form that the user is using. We can only assume that its width is a comfortable number for the user. These numbers are arbitrary, and there will always be some users who will see incomplete Web pages. We can ignore these users for now.

"Everyone has a mouse" We always default to every user having a mouse. Although we know that this is not always true. Most designers neglect to design interactions for users who don't use a mouse. For no reason, users who have to use a keyboard often find it difficult to interact with our site. However, since most users do use the mouse, many designers at the time thought that the design only needs to satisfy most people, so we designed the site is still a lot of people can not use. As it turns out, that number has been increasing. Many interactions that rely on a mouse simply don't work on a touch device. Because users love these devices, and even developers and designers use them, they are hard to ignore.

"Everyone has broadband Internet." Our other default is that everyone has super-fast Internet, at least as fast as ours. If they don't have it now, they will soon. Again, this seems to be true. Internet speeds are really getting faster. But today, more and more people are using poor, unreliable 3G networks. If you've ever been on a 3G network on a train, you know what I'm talking about. If you've ever used the free Wi-Fi it offers, you'll know that our assumption that the Internet is getting faster isn't true. This is a big change in our thinking, and we really should be thinking about these users. This will have a great impact on the appearance of our design.

"Everyone's computers are getting faster every year." Computers are getting faster. It used to be that way. If you wait another six months before buying a computer, you can buy a computer twice as fast for the same price. This is mainly for new desktops, but for mobile devices, there are more important things than processor speed. For example, the most important thing is battery life: you don't want to have to charge it after every session. There is another trend: manufacturers are now selling cheaper devices rather than faster ones. Many users care more about price and battery life than processor speed. What about your old computer? You could sell it, you could throw it away. But users still keep it and use it. Not everyone has the same hardware as our designers.

"All displays are calibrated." We know this is not true. Only the displays of visualization professionals are calibrated. Most of the other monitors didn't display colors correctly, and many were pretty bad. Most of the moves I've tested have pretty good displays. When used in sunlight, if you're lucky, you may still be able to see the content, but you won't be able to see the subtle gradients in the low-contrast design. People will always use those shitty monitors, and people who visit your site will often have poor eyesight. More and more people are looking at substandard color palettes. Instead of buying a professional art-type monitor, it's a better investment to buy a cheap monitor and a few low-end devices to test your work. The Web has changed in the last 5 years and the old way of creating websites no longer works. We need a new methodology.

The new default: activation method originally wanted to use the word "touch", but considering the different understanding of the word, it was changed to "activation". For all devices, no matter what type of input they need, the user needs to activate something in some way. With the mouse, it's clicking; For touch devices, it's sliding; For keyboards, it's tapping. There are also activation methods such as sound and waving your arms in the air. Many devices often offer multiple ways to interact. The common denominator for all kinds of devices is that something has to be done by activating an action. Recently, we've started to think about other ways of using user input. We used to assume that people used mice. The content is displayed when the mouse moves over it, and hidden when it moves away. Before touch devices entered the market, this method has been used by most people. When content can only be displayed through mouse action, what about touch devices without a mouse? Different devices need different solutions. When the mouse hover over the main course item, the submenu appears. In addition, you can click on it to open the link. Now, what happens when you tap that menu item on your touch device? Does the submenu appear? Is the link active? Both happened? Or is something else going on? On iOS, something else happened. The first time you click on the link, the submenu appears, triggering a mouse stop event on the main course item. But you need to tap the link again to open it. We can define different interactions for different input devices. But I think a better approach is to make sure that the default interaction works for all users. If you really want to do this, you can enhance this default experience for specific users. For example, if you are sure that someone is using a mouse, you need to make sure that mouse-based interaction is available. If you're sure someone has thick fingers, make the small button bigger. This can be done as long as there is no doubt about it, and as long as the improvement is conducive to interaction, except for the default interaction mode. Some of these assumptions, the use of a mouse, are difficult to remove - especially on devices that offer multiple ways of interacting, such as a mouse-capable laptop with a touch keyboard, camera, microphone, keyboard, and touch screen. Think hard about that. Do you really need to optimize for the mouse?

The new default: A small screen is like a compact car, more beautiful, but less practical. The same goes for websites, where a site on the desktop is compressed and used on a small screen device, which does not necessarily provide the same user experience. To build a responsive website that works on all screens, it's easiest to design for small screens first. It forces you to focus on what's really important: what doesn't work on the small screen is probably not important. It forces you to think better about layout, about the order in which the content is displayed on the page. The same approach to interaction design mentioned above applies to graphic design -- design the activation event first, then improve it. We start by designing something that everyone can see, which is content. No matter the size of the screen, no matter how much the browser functions, it can display characters. That was the only thing we knew for sure, so it was a rule to start with text (most Kindles don't support color, older browsers don't support many features in newer CSS, and layout takes a backseat on small-screen devices). We can start by designing the layout between different font sizes. No matter what device everyone has, they can see the layout. Once the layout is designed, you can design the layout for a larger screen. Think of it as an improvement for users with larger screens. Later, when the different layouts are complete, you can add other "touches" to the site, such as colors, gradients, borders, etc. You can't think about other things at the same time. I'm also trying to find common ground between all the different devices (with different screen sizes, different features). It makes sense to design for these commonalities first. Amazingly, this point is often overlooked: Web professionals tend to view their work on highly configured devices running the latest version of a browser. They see only the improvements, but ignore these commonalities that provide the basic experience.

New default: Content Until recently, we designed our websites this way: with a Logo Banner and navigation at the top, subnavigation on the left, widgets on the right, and footer on the bottom. When all this is done, we then cram the content into a small space in the middle. It's as if we're not confident in our content and try to offer something else that users might like. Focus on the middle, make sure it works, looks good, and is readable. Make sure everyone understands it and finds it useful. Once you've finished the content section, you can ask yourself, does this content really need a Banner? Logo? Subnavigation? Does it have to have a navigation? Does it really need all these widgets? The answer to that last question is clearly "no." I don't understand the use of these widgets. In my opinion, no widget is more beautiful than a blank space. Starting with the content can help us find a lot of interesting solutions. For example, does a Logo really need to be at the top of every page? In many web pages, the footer section may work better, such as in a numeric type of navigation, or in the registration page. Many of the links in the subnavigation may be better placed in the relevant part of the main content area. When looking at page layout, is primary navigation more important than primary content? In most cases, no. I usually think of navigation as footer content. Placing a "jump" link at the top of the page can take visitors to the navigation, or get the navigation and display it at the top. In the age of responsive Web design, we need a lot of new, smart solutions.

After reading the above, you probably understand that this is just process improvement. Start with text, design the text, optimize it for different screen sizes and devices, and then further optimize it for special properties, such as mouse use, design for fat fingers. Many Web developers build websites based on this principle. They turned beautiful Photoshop drawings into the different layers mentioned above. This can work well if the developer has a good sense of design and attention to detail. But if they're not, which they are in most cases, it's easy to design poorly usable, crude products. I'm not saying that designers should not use Photoshop. If that's your tool, keep using it. But remember, you're designing different layers of the Web, not layers in Photoshop. There is more to a Web than a single beautiful image. People look at our designs in a variety of ways, and we're designing for all of them. Remember, we're not just designing for ceos using laptops, but for people on trains or using free Wi-Fi.

As mentioned above, Photoshop has been overused in designing the Web. The lack of good design tools is one of the reasons why process improvement is difficult to carry out. Most of the tools we use are to help us add "polish" to our website, not design its core. Fortunately, there are more and more small design tools for specific functions. For example, Gridset helps us design grids for different screen sizes. Good design tools can help define typography. By incorporating these design tools into our design process, we can design better works.