On the thinking between design and layout

Source: Internet
Author: User
Tags range

Contradictions come out, like us, these small workshops, the basic design layout of a person to fix. There's even a background program. Assuming that the design is considered for layout, we all have the ability to adjust. But like large companies, the division of labor is strictly the case, if the designer does not understand CSS will not layout. or understand the error, the design of the draft will make the layout of the staff to spend a lot of time and effort. Because there are too many browsers!

Often see a netizen complained designer to the manuscript can not be restored. Because they understand the browser and the screen is not the same. Also some because the effect is too gorgeous, color too much. What's more, the use of flash production is too wasteful, and the HTML is chicken ... Well, let's put this last one aside and just talk about the screen and the effect and the design layout.

first on the screen :
Screen resolution, or mainly 1024x768. And the definition of Mansi is impossible to talk about. Why? Please take a look at the reason:
1: You can not determine the user's IE installed a few plug-ins! The more plug-ins, the lower the height of the browser display!
2: You are not sure whether the user's monitor is set correctly (crooked side, curved, truncated, zoom out)
3: You cannot determine whether the user's display resolution is the best resolution. It is typical of some widescreen or high screen display, some of which are reduced to white after the proportion. And even more so is the Mansi stretching. The proportion is wrong!

To make the page full screen. A lot of people say width 1003, also some say is 1004. And I don't think so.

Suppose the customer asks for a full screen. Then, you need to know the screen resolution of the user's display size. If the client has a low level of awareness of the gadget. Do not easily change the resolution of others. I 1440x900 the widescreen, I use 1024x768 resolution, I am happy! If this customer requirements must be full screen, then the problem arises, if the delivery of the customer changed a different size of the monitor it? The resolution becomes big, your webpage is narrow, the resolution is small, your webpage is wide! What do you do?

In fact, Mansi also divided into two, I give a name for the content of a full screen, a visual full screen!

The so-called content full screen, refers to the site of things, the left edge on the left edge of the monitor, the right side is in the monitor right border. The best solution is to use percentages. and the negative effect of the percentage:
1: Browser bug
2: The difficulty of design and production increase

The so-called visual full screen, in fact, is a tricky approach. And this method, I have tried. In fact, very simple, a site's head, nothing more than navigation and banner, if the navigation at the top, then, the navigation background is 100%, the navigation center. If banner at the top, then pay attention to handle the picture at both ends, or 100% wide + background!

OK, although the content width may be 1000, 1003, or even 900 or lower, the visual is still hundred width, as long as you avoid the minimum width is greater than the browser width, or the customer's display resolution width greater than your minimum width. Always OK.

To talk about layout and circulation :

Here's an article http://weilaixu.cn/read.php/174.htm

In fact, the Web page production, the right angle is the simplest, such as the old printing (q group number: 6903529), his things are all right angles. In his words, it's the same as a knife! For what? Simple and convenient fast content clear!

Layout to be standard according to the design draft. Or the use of HTML to restore the design, if the HTML screenshot can overlap with the design manuscript, and then the standard, I think is the highest state!

The biggest problem, in fact, in the design and restore effect! Although you can use CSS negative, floating, overlapping and other attributes of irregular layout, but the problem persists, the workload and difficulty may still be doubled. And, that abominable n kind of browser!

for complex design drafts, complex effects, and even excessive design, how to reduce the work and difficulty of using HTML to restore the design manuscript !


1: If you have the power to fine-tune the design, then you can fine-tune the "tolerable" range. This range, each company is not the same!
2: If you do not have the right to understand the design of anything, then, please contact the designer or supervisor, ask the designer to fine-tune. But you have to describe your difficult points clearly and make them understand!
3: No one agrees to change the manuscript, so congratulations. Work overtime!
4: Or, you can throw the detail work to flash!.

The problem is embodied in the design and effect!

first say design :

Web design, in addition to the embodiment of the effect, there are many indispensable things. This is not about websites that are purely for appreciation. After all, most sites need to be read in large quantities.
1: Grid system of the Web page
Read this article: http://ued.taobao.com/blog/2008/09/17/grid_systems/
2: Speed
Very important, very important! Reduces the number of HTTP connections by using a background image to reduce the picture. can use text as much as possible using words. So, still have to pay attention to AH!
3: Small map of the background map cycle and reuse
Big will not say, make a few radian up, almost will use big picture, like the Olympic time then the big background of the website.
Small background, small column background, and a background picture of a place on a child page. Let's try to be consistent! Small background loop, the effect of the width and height of a small, as far as possible in which direction to cycle! The aim is to ensure speed!
4: Effect
PNG, this can be said to be the effect of the typical! Transparent properties with no background. I believe a lot of people like it! But IE6 is flawed, OK, look at the dock: "IE6 Crazy II" IE6 PNG Alpha Transparent (complete)

I do design, the general site is not to consider the layout! But those artistic flavor is very strong, the effect of more than a strong station, eating their own loss after eating two times, began to take the initiative to consider the layout of the post, as far as possible to avoid making the layout difficult to increase!

If you design, consider reusing pictures, backgrounds, and so on. A lot of work is done to reduce layout slicing. Or I can say that the higher the page repetition rate, the faster! Although the homepage is the homepage, although the child page is simpler, but is it better to reuse what has already been downloaded on the homepage? What I want to say is, to have the overall thinking!

Of course, you must also think of the application of Flash. But Flash also seems to have browser compatibility issues!

If there is a problem in the design and layout that is delayed or one side does not concede, then the program, the interaction will be postponed, the date will be delayed.

If the producer does not make any changes, the design party will have a problem.

Alas, the problem can be big and small! It's not easy to make a Web page!



Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.