10 tips for website developers and designers

Document directory

• 1. Use Firefox
• 2. maintain compatibility
• 3. less or more
• 4. JavaScript? Use jquery
• 5. Ajax should be tailored to local conditions
• 6. Search Engines like Structured code
• 7. Use Div instead of table for Layout
• 8. Less intra-row style
• 9. The code should consider the future
• 10. Understand standards, but don't worry
• Finished

10 tips for website developers and designers

Author: chrys Bader
Translation: htmlor

1. Use Firefox

Firefox is the most important platform at your fingertips and is essential for website development. It doesn't mean you have to use it as the default browser-you can use whatever you want to use when surfing the Internet.

Since the advent of Firefox, there have been some essential extensions for home travel. If you want to get twice the result with half the effort, use them quickly.

Required extension

Web Developer(Chris pederick)

This extension has many functions. Although most of them have been covered by firebug (as described below), they are still quite useful. Including:

• Zoom the browser window
  Simple and rapid Window Scaling, 800x600, 1024x768... Any specified size. This function allows you to view the performance of a website at various resolutions. Go to your Google Analytics account to see which resolution has the most visitors, and then focus on its design. (Firebug does not have this function)
  
• No need to refresh when editing CSS/html
  With this function, you do not have to refresh the page to modify CSS and display the results on the page in real time. It saves too much time. (Similar functions are provided in firebug, but not so convenient)
  (Htmlor Note: It's really bad because I haven't found this good thing for so long ~)
• View All JavaScript code loaded on the page
  With this function, you can view all loaded JS files on one page. It is convenient to view your own or others' JS Code. (Firebug can display all JS names, but the code is not put together, so it is not convenient to query)
• View generated source code
  If you use Ajax or JavaScript to change the page content, this function is absolutely practical. Because in the "View Source File" mode, dynamic HTML code cannot be found. (Firebug also has this function)

Firebug(Joe hewitt)

In the office, we often ask, "Do you still remember what happened when there was no firebug ?" It actually changes my life. Its main advantages are as follows:

• View dom
  Click "inspect" and place the cursor over the page component to view the HTML and CSS code of the component.
• Display style inherited real-time CSS editing
  It's just money-This greatly saves the layout design time. For example, you can select a div tag in firebug and click the margin attribute to manually adjust it. The up/down key is set to add or subtract 1 pixel, and the up/down flip key is set to add or remove 10 pixels. (Htmlor Note: any numeric attribute can be adjusted in this way) You can also add new attributes to the current style. After the results are satisfactory, paste the modified CSS code to the actual file.
• Detailed JavaScript debugging
  The JS console here is slightly better than Firefox's. It is a more detailed alternative to the default console.
• View All files loaded on the page and the total number of bytes
  This is critical for optimizing the loading time of a site. You can test how long a single file will be loaded, images, JS files, Ajax calls, and so on. In the last line of the "Net" section, you can see the total number of bytes of files loaded on the page.

2. maintain compatibility

It is important to maintain cross-browser compatibility. This is not a very interesting thing for me. I have said that it is best to develop it in Firefox, but don't forget to check the page performance in IE6, IE7, Safari (or opera. Also, go to Google Analytics to see what browsers your visitors use. You have to take care of what they use.

In my Google Analytics account on my website, I witnessed the decline in Internet Explorer 6's browser proportion, which continued to decline. When it falls below 5% one day, I will have a party to celebrate-because it will no longer be supported.

If you want to implement compatibility that is not so troublesome, it is simpler. For example, if you try to debug it in a browser for a certain effect, it may not be very good in another browser. The next suggestion is as follows: fewer or more.

3. less or more

Measure the size. Graphic design, programming, and page layout. A little simpler.

• Graphic Design
  There is a situation of misuse of gradient, oblique angle, and shadow. Sometimes, if things are not done well, it is likely that there are too many things. Simple and elegant.
• Fancy Javascript
  Using some cool JS effects to enhance the user interface is good, but on the other hand, it will create a burden on users, especially those who do not have a super computer like you. In addition, cross-browser incompatibility is troublesome. Once again, do not rely too much on JS. Everything depends on it. If you really want to use JS, I strongly recommend jquery.

4. JavaScript? Use jquery

Javascript is used to display/hide information. It makes the page space open and does not compress into a pile. Want to control Js in a cool and simpler way? Be sure to try jquery.

Jquery

One of the main advantages of jquery: compatibility has been widely tested by various browsers. That is to say, all the methods can ensure normal operation. Advantage 2: extremely easy to use.

Jquery uses the CSS selector to operate on objects, allowing you to control them as you like and keep everything under control. For example:

Hide all paragraphs in the DIV whose ID is mydiv

$ ('# Mydiv p '). hide (); $ ('# mydiv p '). hide ('low'); // hide the animation effect $ ('# mydiv p '). toggle (); // Click Show, and then click hide

Learn more about jquery here.

There are many other similar JavaScript libraries, such as mootools, prototype, and script. aculo. Us.

5. Ajax should be tailored to local conditions

Ajax is a hot topic in the Web 2.0 tide. Many people ask me, "Do you know Ajax ?", It seems like it is an independent programming language. To put it bluntly, Ajax is just a means. It can obtain and update data by interacting with the server without refreshing the page.

I have noticed a recent trend: Ajax is used for whatever purpose. This is not always a wise choice. Why?

• Traffic.The full application of Ajax will result in loss of valuable PV.
• Availability.This is controversial, but I think most users (maybe not including you) still have the habit of using page refresh as some events (such as form submission and page Jump) signs of occurrence.

Ajax is definitely useful, and in some cases it cannot. But I will reapply it again. Measure the test taker's knowledge about JavaScript and Ajax.

6. Search Engines like Structured code

There is a new trend. People try their best to make their keywords rank top in the search results. As a developer, you have the responsibility to use structured code to optimize your website as much as possible to adapt to search engines.

Below are some importantStructured tag:

• H1-The most important title, which is most important to search engines.
• H2, H3, H4, H5-Title with descending importance. With them, the search engine will take care of the appropriate information based on the font size.
• A-Link. Generally, it is better to give a title attribute.

  <a href="http://blog.htmlor.com/" title="htmlor's blog">htmlor's blog</a>

• IMG-Old image tags. It is better to give it an ALT attribute. The search engine regards its attribute value as a keyword. In addition, when the image cannot be displayed, the visitor will see the alternative text.

There are also some important labels:

• Title-This tag is displayed as the title of the search engine query result and should be taken seriously.
• Meta-It is best to improve the keywords and description. The search engine will still read the old two items.

  <Meta name = "keywords" content = "programming, design, martial arts, novels, football"/> <meta name = "Description" content = "focus on new technologies, interesting articles, occasionally, it is lyrical, funny, and deeply loaded. "/>

7. Use Div instead of table for Layout

As a matter of fact, we are all used to this Article. Now we still use the table layout to be despised. It is used to list table-type data.

There is a lot of practice to deal with Div layout, but once you have mastered the tricks, it will become a whisper. This gives you more flexibility than you can think.

In fact, it is very simple, just like float and width.

I wrote a very simple two-column layout tutorial in virb. If you are interested, let's take a look.

8. Less intra-row style

When writing code, you usually add several styles directly to the component tag, which is easier than adding a class or attribute to the CSS file. However, it is best not to do this because the Code requiresMaintainability.

In some cases, you will have to face the code you have previously written. Your bed has to go to bed, and you are lazy and suffering. In the past 10 years, I have come to realize the principle that it takes additional time to save a lot of time in the future. This introduces the next suggestion: the code should consider the future.

Bad

<P style = "font-size: 14px; margin-bottom: 0; "> first title </P> <p> body content </P> <P style =" font-size: 14px; margin-bottom: 0; "> second title </P>

Okay.

<Style type = "text/CSS" Media = "screen"> P. header {font-size: 14px; margin-bottom: 0 ;} </style> <P class = "Header"> first title </P> <p> body content </P> <P class = "Header"> second title </P>

9. The code should consider the future

Write comments to the code. Clean and orderly. Do not be lazy. If you feel that you are in a hurry, take a rest and try again.

In some cases (for example, your website will succeed in the future), others will read the code. Sometimes, this person will be you.

A few years later, you must have regretted seeing that you didn't comment or make a group of code. To avoid future complaints, comment out the complicated code.

Do not comment too much. There is no need to describe the code that is simple to be clear at all. Otherwise, useful comments will be drowned in many texts.

10. Understand standards, but don't worry

Do not use small, center, Font, and other unrecommended tags, which makes people feel bad.

I heard that the small mark has not been discarded-but I'm sorry, I'm sure it will take a few days.

The valid XHTML and CSS symbols on the website tell people that you have followed certain rules. This may make you feel different, but the quality of your website is irrelevant. Check which of the following successful websites can pass the HTML standard verification? The so-called standards cannot keep up with the development of new methods and technologies.

When developing a website, follow the HTML standard as much as possible. However, sometimes you may need to jump out of the standard to implement a function so that it can be compatible with all browsers. You don't have to worry about this. In the end, functions are the foundation of your website.

If you really want to, you can use the W3 HTML validator to check your code.

Finished

Consider the above suggestions. The recommended tool can be used.Good good develop, day up!