Web Design ideas--progressive enhancement

Recently reading a Web experience related to the book "Progressive Enhancement-cross-platform user experience Design", read to do some summary, digest the essence of the book.

Before reading this article, you can think about the following questions first.

1. What is the purpose of browsing the Web?

2. What problems will you encounter when browsing the Web?

3. What are the ways to solve these problems?

4. What are the specific implementation steps of these methods?

First, the opportunity

1) Content

Content is the core of the Web page and the purpose of the user's browsing page. Content can be some information or a feature, and users browse the Web to get them. The next step is to make the content stand out, to convey clearer meaning to the user, to deliver more accurate and expressive information, and to adapt the content to more and newer devices. Content is the core of user experience, the structure is clear, the text is accrue, the content that organizes properly, is the foundation of a webpage. Without content, your pages are technically equivalent to non-existent.

2) Problems encountered

Although all users access to the same page, but in the browsing time, often encounter a variety of wonderful problems, such as the page can not open, the content can not be seen, the function can not be used, the layout of the disorder. This is due to the current fragmentation of devices and browsers, and the diversity of users ' use of the environment and interaction habits.

3) Progressive Enhancement

In the Web development time, need to consider more and more details, device screen size, memory, CPU, pixel density, operating system, browser, network, agent, user's level of literacy, cognitive impairment, internet purposes, habits, needs and so on. It is almost impossible to make a website that is consistent with everyone's experience. However, ensuring web accessibility ensures that users can access core content or use basic functionality in any environment, using any device, and provide them with the best experience under current conditions is the core idea of incremental enhancement.

Progressive enhancement is an idea that is compatible with unknown devices and balances the usability of various devices, and does not require technology to keep up with the new, but allows users to move away from device constraints and greatly improve web usability. The adoption of incremental enhancements takes more time to think before the project starts, but it can save a lot of time and resources for later design development, thus generating more value in a unit of time.

4) Layered Design

Implementation of progressive enhancement can be divided into document structure, perfect visual design and rich interaction design 3 levels, so as to achieve from basic to complex experience.

5) Fault Tolerance

HTML fault tolerance: when the browser renders the page, it ignores elements and attributes that are not recognized, and the contents of the document are preserved. Thanks to this design, the development of HTML does not hurt outdated browsers.

CSS fault tolerance: The browser encounters a CSS rule or property that it does not know, and the browser ignores the code around where the error occurred.

JavaScript's fault tolerance: Unlike HTML and CSS, JavaScript is less tolerant, and once part of the program is semantically ambiguous, the program cannot be executed.

Second, the structure of the document

If we can provide clear, easy-to-retrieve content, whether it's crawling the search engine, or the content recognition of some data-structure tools, it's useful to adapt your content to more and newer browsers.

1) Development in accordance with Web standards

Semantic elements organize the HTML structure, use CSS cascading style sheets to lay out, compress pictures, optimize the DOM, and use scripting to enhance the interactive experience, for structural and stylistic, logical separation. In the past, people like to use table layout for two reasons: First, compatibility is good, there will not be a particularly conspicuous problem; second, most practitioners have yet to form a sense of accessibility optimization. But then, Google took the lead in the HTML semantic analysis method to determine the content of a Web page and the relevance of keyword meaning, the major search engines also began to search for semantic tags, developed a similar ranking technology. The traffic of many websites is brought in from the search engine, which makes the semantic markup and CSS style layout method gradually accepted by everyone.

2) Use the appropriate label

When you use a semantically appropriate label in the right place, the meaning of the content is enhanced and the content structure of the page becomes clearer. If you use a different HTML element to emulate a control, it will show different characteristics in the browser. Even if we can achieve a full simulation of style-to-behavior, we get an unstable, code-bloated, hard-to-maintain component. Make use of layout elements (section, article, header, etc.) in the page, divide the page into each semantic explicit chunk, so that the content information of the webpage is better communicated to the user.

3) Name of class and ID

Some commonly used class and ID names have some complementary and suggested functions to HTML, such as #header, #nav和. Article, etc. Finally evolved into the HTML standard elements, header, Nav and article, and so on.

4) Micro-format

The micro-format implements the extension of the web semantics by defining the attributes of the HTML (Rel or Class), which describes the relationship between the two Web pages or documents linked by the href attribute, and uses the name of the class to format the data. RDFa is another type of data formatting technique, but the syntax is stricter than the micro format.

5) Avoid redundant labels

The extra HTML structure is written dead on the page, which causes the page to have potential usability or maintainability problems. Since the interaction behavior is supported by JavaScript, the HTML structure on which these interactions are dependent should of course be generated dynamically on demand by JavaScript.

6) Aria Properties

If native HTML elements satisfy the need for semantics and default behavior, do not attempt to achieve the same purpose by changing the aria attribute. If the ARIA attribute is set appropriately, users who need assistive device tools to support the content will be able to locate it more quickly, and the experience of visually impaired is greatly improved.

Third, visual design

At present, there are some objective conditions, such as different resolution, varying support degree of the device to CSS, and different pixel density, which lead to a lot of problems related to visual design. In order to solve the problem, we need good design. Good design has three principles: simplification (Common), peers (consistency), static (flexibility).

1) Design a system, not a bunch of pages

Take a moment to analyze the content and choose between 10 and 12 pages to design (plus a bunch of widgets). We are designing the entire system rather than a separate page. You will find that there is an intrinsic link between the page and the page, the components, and the components. For users, the consistency of design between pages reduces the cognitive cost, and for developers, the improvement of component reusability reduces the difficulty of maintaining the system in the future. The design system is specifically divided into 3 steps:

1. Design liquidation (List of interface lists), you can master the design style of the whole website. From the angle of each module to consider, more systematic design.

2. Design style components, the Web site may appear on the interface elements, such as title, body, icons, buttons and other basic design style listed in a document, the formation of the site's most basic visual specifications. To facilitate the control of website design, and secondly when adjusting the theme of the website, will greatly save the workload.

3. Establish visual specifications and component libraries, visual specifications like a exhaustive style component library, including specific design annotations, such as the font size of the text, module spacing, image and ad position size, in the specific design to provide a yardstick. The component library category lists the HTML structure of the common modules in the site, and the front-end engineer extracts the required module code to form the desired page. Building a component library is like collecting a bunch of bricks, the more bricks, the more you can find the right components, which greatly improves the speed of website design and development.

2) Copy Content

The designer only learns the copy content, can use the design method to foil the content, the emphasis content, foil the content. Copywriting and visual designers sit together to brainstorm and design copywriting. Visual designers consider the extreme situations of copywriting, consider extreme situations early, and make your designs more robust; The copywriter considers whether the copy can be met by existing design specifications.

3) Responsive web Design

There are many media types on the market, including computer screens, print media, televisions, handheld devices, and assistive devices such as screen readers, Braille printers, and touch feedback. In order to render the proper style in different media and present the correct interface, a responsive web design was proposed. The basic methods of responsive web design include fluid grids, adaptable media, media queries, and browser ratings.

1. Fluid Grid: A raster system that specifies the width of a column based on a percentage unit.

2. Flexible media: images, videos and other media the placeholder width in the Web page does not allow for the width of its container to be exceeded.

3. Media query: By setting the criteria for media queries (width breakpoints), what structure should the layout be presented under different resolutions and screen sizes, as well as style information such as row height, font size, and so on.

4. Browser ratings: Distinguish between older browsers with poor technical support, browsers that are generally supported, and those that are highly supported.

4) Defensive Design

In older browsers, new CSS properties or values that you don't know are automatically ignored, and the new browser overwrites the old attributes in order of precedence, as shown in the following code.

Property:basic value;property:advanced value;

Manually writing degraded or compatible code can be cumbersome, using a preprocessor such as sass, less, which provides an automated method of CSS syntax compatibility that automatically generates downgrade code for old browsers and vendor prefixes for different browsers.

Four, interactive design

The history of the Web is a history of a JavaScript toss-up, or even a history of catastrophe. Using JavaScript to achieve progressive enhancement requires more rigor than using CSS or HTML. Familiarize yourself with all the features that may cause JavaScript to fail or affect the experience that is built on JavaScript. The extent to which this damage is mitigated depends on how familiar you are with the factors that affect your experience.

1) No JavaScript

Instead of pinning all of the user experience on JavaScript, there are a number of situations that prevent browsers from using JavaScript and, when this happens, at least make the page accessible and minimize the risk.

2) Characteristic detection

JavaScript is 0 fault tolerant, and feature detection is required to be strong enough for code. Feature detection is to encapsulate the code in a number of code blocks, for different compatible requirements of the browser to run different code, to avoid the risk of error. For example, use the property settings to see if the attribute is expected to be reached.

if (window.addeventlistener) {  // support AddEventListener Logic }elseif  (window.attachevent) {  // support attachevent Logic }

3) Establish a minimum code support

First, write a subset of common, minimally supported JavaScript (such as cookies), and then introduce advanced JavaScript code (such as Localstorag) that enhances the experience with additional feature detection methods.

4) Differentiated Treatment

Microsoft offers a proprietary technology called conditional annotations. All IE is recognizable

<!-- [If ie]><!  - <  href= ". /.. /assets/css/style.css "  rel=" stylesheet "/><!--<![ ENDIF] -

5) structure required to create the page

Using JavaScript to generate a strongly dependent HTML structure can make the page lighter and less difficult to maintain, because both HTML and JavaScript code are managed in the same place. In other words, a generic or complex function is encapsulated into a component or plug-in.

6) Custom Attributes

The Data property is a custom attribute, and a clear data property makes it easier to incrementally enhance the design of a page by reducing the cost of developing maintenance. In the form validation plug-in, validation rules and hints are defined directly within the Data property, allowing content and logic to decouple, reducing the file size of JavaScript code and making interface development easier.

7) Outside mouse events

Designers often overlook the need to use other input end users instead of using the mouse, and the progressive design idea requires attention in any place where the experience can be enhanced.

1. Play the role of the keyboard, the keyboard is still a very useful input medium, as a high standard of input tools, for the visually impaired users and some computers more skilled users, the importance of irreplaceable.

2. Enhance the touch screen experience, the mouse movement is continuous, and the touch screen above the finger movement is jumping, do not move the mouse-based design thinking to the touch screen.

8) Do not rely on network conditions

People's Internet environment in a day may be in the cellular network, WiFi connection, 4G, 3G at any time to switch between, and sometimes into a completely no signal, when there is no network, you can do some caching or offline processing.

1. Store the data on the client, capture the form data as a JSON object, and cache it, then remind the user to submit the data to the server when the network recovers.

2. Enrich the offline experience, if your site is more functional than content, offline technology will make the site easy to install.

Five, interface experience diagram

1) interface Experience diagram

The biggest challenge to progressive design is not coding, but a plan. Through the interface Experience diagram (also known as the IX graph) to solve this problem, this map will show the Web page encountered a variety of interface selection difficulties of each adaptive solution path, to ensure that each member of the team can have a deep understanding of the goals and results, so as to work for a common goal.

The best thing about this tool is that every adaptive solution to a Web page encounters a variety of difficult interface choices. This diagram is just a few nodes and arrows, which can be used to try different scenarios. This document is simple and clear and valuable to everyone on the team.

1. Content editing: see the different devices and status of the site display, according to the actual situation to determine the content exposed under the interface.

2. Designer: Observe each possible experience effect, thus producing different wireframes and visual effects according to the actual situation.

3. Engineer: What specific functions are provided under what conditions, and the performance testing of each device is clearly customized.

4. Test: To test the corresponding functions on specific devices and pages.

2) beneficiaries of progressive thinking

Using progressive enhancement ideas to design a website, everyone will benefit from it.

User: The product is able to provide the user with the best access experience in all circumstances.

yourself: Don't be obsessed with providing the exact same experience for every user.

Customers and bosses: the number of accessible user-driven products, the maintenance of visual and monetary costs have also been reduced.

Web Design ideas--progressive enhancement