web| Standard | error | design
confusing document type (DOCTYPE)
Don't write, write incorrectly, or put the wrong place. I've seen HTML 4.0 transitional used in XHTML Web pages and frames pages, and I've seen the DOCTYPE and some incomplete statements written after the opening Why? There are two reasons. First, document declarations are required, as illustrated in the 4.01 spec and the 1.0 spec for the PDF of the consortium. Second, the browser displays and renders the Web page according to the specified document type. That is, "DOCTYPE switching (DOCTYPE switching)". In order to maintain the consistency of the Web pages, especially if you use CSS, you will want the browser to use them "standards compliance mode". About DOCTYPE switching, you can look at the correct layout by using the correct doctype! and correct document type declarations.
<span> Addiction
A common way of styling is to surround a piece of stuff with a <span> tag and bring a class to set the style. I'm sure you can often see code such as <span class= "heading" > and <span class= "BodyText" >.
Why? In many cases this is completely unnecessary, and doing so will only confuse the label and have no semantics. The title is labeled with the title (H1~H6), the paragraph is labeled with paragraph (P), and the list is labeled with the list (UL, OL, and DL). Then use CSS to style, if necessary, can also add class and ID attributes.
too much visualization thinking
To think that the Web is WYSIWYG (WYSIWYG) – Start thinking about how these things behave, rather than thinking about the logical structure first.
Why? Although most netizens are normal eyesight, there are still people with disabilities on the Internet. Netizens may use different browsers, different systems, different sizes of displays and resolutions, different window sizes, different color standards and text sizes, so you shouldn't make your pages WYSIWYG. Web pages are not printed or television programs. Let your design be flexible.
Lack of semantics
A label with semantics is not used. Take for granted the HTML style rendered by the graphics browser to write code, rather than referencing the meaning of these tags.
Why? Rather than the "<span>" mentioned above, there is no good use of existing HTML tags to express the semantics it should express. There is no semantic HTML, which is difficult to understand for those non-visual user agents (UA). and semantic HTML is easy for CSS styling.
inconsistent encoding
The default encoding that is sent to the server is one and the other is used in the document, which may cause the browser to be garbled (not displayed properly).
Why? Because you have to make sure that all your visitors can read your content.
Incorrect alt attribute
It doesn't make sense to write or write. There are very many tags on the network that do not have the ALT attribute. Meaningless alt attributes are not as common as the former, such as "spacer GIF used to make" layout looks good, "Blue Origin with Shadows", and "JPEG pictures, 123 KB". Keep in mind that the ALT attribute is required in and <area>.
Why? This is necessary, without ALT, the information in any picture will be ignored by screen readers, text browsers, search engine bots, or the user will turn off the picture display as X. Note that the alt text of the picture is related, do not give the decorative picture or the picture used for layout alt attribute value, specify a null value can be, such as alt= "".
Invalid ID and class attribute
The same ID is used multiple times on the same page, and illegal characters are used in IDs, class, and CSS selectors.
For CSS (CSS 2.1 syntax and basic data types):
In CSS 2.1, identifiers (including the element name, class, and ID) can only be made up of numbers, letters, ISO 10646 Universal Character Set u+00a1 and higher, connectors ("-"), Underscores ("_"), and cannot begin with numbers.
For HTML (HTML base data type):
IDs and name must start with uppercase or lowercase letters, followed by any letter, number, connector ("-") and underscore ("_"), colon (":"), and semicolon (".").
Why? Browsers that follow these standards may not be as realistic as you might expect. If you have multiple, reusable ID values in a page, any JS that uses that value may be invalidated or incorrect.
Browser Probes
Test the visitor's browser using a server-side or client script, and then send or execute the code for a particular browser. This is for the latest browsers, newer browsers, or UA with deceptive features (such as opera default masquerading as IE).
Why? Add unnecessary problems and eventually become ineffective.
CSS Missing units
Length values (horizontal and vertical) require units, unless the value is zero. Unlike in HTML, you can enter Width= "10". In CSS, you must write width:10px (or other units).
Why? is ignored in browsers that follow the specification.
Browser-specific CSS
Styling scroll bars, expressions, and filters can only work under IE. It's not legal.
Why? Normal in a specific browser only. If you really have to use IE-specific CSS, you can write a separate CSS file and use conditional annotations, or make sure that only IE can see the illegal CSS.
JavaScript dependency syndrome
The site relies entirely on JavaScript. Many people are willing to use browsers that do not support JS or disable JS. The current situation (W3Schools browser statistics, thecounter.com) indicates that at least 8%-10% of the user's browser does not support JS. Search engine robot Treats JS is also not very friendly, although there are reports that Google is developing a robot to support JS. If your site needs to open JS to navigate, then do not expect to have a very high search engine rankings.
Why? Not friendly to search engines, it is difficult to improve rankings.
Flash dependency syndrome
In fact, not everyone has the Flash Player plugin installed. And most search engine bots don't support Flash (Google has reports that they're already trying to index flash files, but they're still asking for your content and navigation to be written in HTML), so if your entire site or navigation part is flash, Your site generally will not get very high PageRank.
Why? Search engines are unfriendly, but that's not to say you should give up flash, but you should use a more skillful one.
Junchen Note: To create a search index for Flash, you can refer to Flash 8 swf metadate application.
text to make a picture
Make the text into a diagram without providing more information. This not only increases the visitor downloading time, also is not advantageous for the visitor to choose and copy the text, but also unfavorable to the text enlargement.
Why? Not cordial, increase download time, not friendly to search engine.
a form that is not friendly
No semantics, difficult to use forms. To learn to use <label> tags,<fieldset> and <legend> tags, do not use the "Reset" button.
Why? Not semantically and difficult to use. Read Design easy-to-use forms, excellent, easy-to-use forms, and reset and Cancel buttons to see how to design friendly and easy-to-use labels. (Junchen Note: Use the reset button will increase the user's thinking time, and error according to the situation occurs frequently)
Outdated HTML
Multilayer nested table, transparent spacer Picture,<font> label, Presentation Layer label. In fact, this is already known to everyone.
Why? Increase the complexity, so that the entire page code bloated redundancy, difficult to understand, not friendly to the search engine.
everything to IE on par
IE preferred, finished and then see how other browsers, there are problems to adjust.
Why? Waste of time, and this habit is not good. IE will default to accept many wrong code, the so-called "fault tolerance." In fact, IE also accept good structure of HTML, and in other browsers are normal, this will not waste a lot of time. See the IE truth for more information.
Illegal HTML Properties
Use properties that are not recommended or that can only be applied in a particular browser, such as Marginwidth,leftmargin,language, <table> add height, add border, and so on.
Why? Not legal and not necessary. You can use CSS. For <script> tags, use type instead of language to indicate the scripting language (typically JavaScript).
no coded "&"
Many URIs have variables and "&" symbols that are not encoded. This is incorrect and can cause a lot of problems. The "&" symbol must be written in &.
Why? An explanation and an example of an error can be found in the "&" symbol and validation article.
Framework
Use frames to split the browser window and load several separate files.
Why? The first thing I'd like to say is that the framework may be more practical, provided you use it correctly, for example in the intranet and some Web applications. For a Web site, the framework has a lot of usability and usability problems. For example, the problem of adding favorites, printing problems and link problems, and not friendly to search engines. Because robots work in multiple frames pages are problematic.
Misuse of data tables
Table is used to place tabular data, not as a layout table to write, but can use a lot of their own tags and attributes to make the table structured and semantic.
Why? Screen readers and other assistive technologies may have problems reading these wrong data tables. Many articles describe how to write structured data tables, such as Web standards Project a table, s ' Il vous plaît
Divitis and Classitis
Compared with <span>, Divitis and Classitis use too many unnecessary div and class.
Why? See the "<span> fetish" and "lack of semantics" section.
too wide fixed width
If you are using a fixed-width layout, please do not set too wide. Description: Here I am not saying that fixed layout and floating layout are superior or inferior.
Why? If you specify a width wider than the viewer's screen, it is tantamount to forcing the horizontal scroll bar to appear, which is extremely unfriendly.
ambiguous and with expressive class, id name
How to name a class or ID depends on what it does rather than what it looks like and where it is.
Why? In order to avoid the confusion that you easily create when you redesign. For example, a class called Largeblue, you used to make the word "small" and "Red", a name of Leftcol ID you are used to display on the right.
No background color
No background color is specified for the body.
Why? Many users will set the browser to a different background color if you do not specify it.
Non-good structure (well-formed) XHTML
XHTML with a non-good structure (well-formed).
Why? If XHTML is server-application/xhtml+xml, strict browsers, such as the Mozilla series, will not show XHTML that is not well structured. To illustrate, this site does not put all look also servo for application/xhtml+xml, the reason I in another article explains: Content negotiation.
text input color setting omission
Specify only the background color or text color for the form area, especially if the row or multiline text field (input type= "text" and textarea).
Why? Some people have their browser or operating system set to reverse color, by default, a text input will be displayed as black background white, rather than the black word you want.
If you set the color of the text to dark gray, and do not indicate the background color, in the inverted color of the browser, it will appear as a black background dark gray word, a mess. Vice versa.
Always remember to set foreground and background colors, or remember to set text entry fields.
These are the problems you should pay attention to, very long? If you have avoided these mistakes, you have done a good job. If you've made one or more of these mistakes, well, I feel a little guilty about it. Finally, I hope this article will help you make fewer mistakes in your future work.
Original: Web development mistakes, redux
http://www.456bereastreet.com/lab/web_development_mistakes/
Translation: Junchen
