Factors affecting the html layout (Part 1: HTML coder operation)

Who is this article for?

Html coders - novice coders will help enhance

your professional level; evaluate the current situation

in projects, to warn the negative course of the project.

it is only determined to “be or not to be” to taste more

about the profession html coder. Those who are in the coding vryatle long

will find in the article something new for themselves, and some things

may not even seem worthy of attention. However worth

remember that the obvious things for one are unknown

the world for another, and your experience of good practice can be

way out of a difficult situation for someone.

Management - find out what events are worth holding

in the company to improve workflow, enhance

employee experience, cost reduction (by reducing

time overruns and accounting not calculated

earlier activities) and quality improvement.

Project managers will help

consider some of the project’s specific risks: learn about

previously unknown absorbers of project time and not

planned activities; learn about real work

for some activities; evaluate and improve the current level

project management.

Other participants of web development will help more

learn about the working life of their colleagues.



Initially, the article was in tabular form, which corresponded to

semantics of the material. However, having published an article in LJ and

having received a number of not only priceless comments (ala "non-violent", "many

bukaff "), but also practical advice to redo the material

Without tables I decided to follow him. Bug work

done - the article is given in blog-like (what words

generates our time) view and exposed to the habrasoobschestvu.

Grouped factors

HTML coder operation

1. Source data and material for layout.

1.1 Design Layout

Worst case:

The client sends substandard material for layout.

Material in pdf, ppt, jpg or psd with glued

layers, rasterized fonts, fonts with anti-aliasing;

fonts that are not included in the delivery of Windows. Requirements

described verbally (“make it red”, “make it like this”).

Good practice:

Layout material should be in PSD format (not excluded

another popular format that supports layers). In psd

used layers are named according to their content.

Fonts that are not included in the standard Windows distribution are used.

only for pictures.

Impact:

Glued layers, rasterized text and other unmet requirements for the source material lead to an increase in layout time.



Example: the design uses a button in the form of a picture. It is necessary to make similar by analogy. When designing what it should be, it will take about 10 minutes. With poor quality it may take 2 hours.



Actions:

1. PM: At the stage of clarifying the requirements to give the client

read the graphic requirements document

material. (Containing examples of requirements. Desirable

with screenshots and explanations for each item).

2. PM: Involve the customer in the compliance monitoring process

requirements for acceptance by third-party designers. Explain

that the quality of graphic material primarily affects

on the feeling of trust and the attitude of his future clients (users)

site, as well as the quality of the html coder. (Important

distinguish quality design and beautiful design: it is not

identical things).

1.2 Redesign

Worst case:

The client sends or reports links (which is even worse) to

pages with a curtailed design of poor quality (without

typical elements containing cross-browser problems,

invalid code).

Good practice:

The client sends a coded code. HTML coder, PM and others

participants check its quality and availability

items.

Impact:

If the fact of poor quality pages is not voiced to the client

or PM, then for all the resulting bugs responsibility is shifted

on HTML coder. This increases the unplanned time.

fixing bugs.

In the case of pages located on the Internet, before

than to proceed with the layout, the coder needs a retraining stage

to create a site locally. This time should be considered.

in assessing.

Example: To recreate a site locally where everything is

The pictures are written in CSS, the layout designer should be tracked.

the path of each, register it in the address bar to copy

every picture to local disk. Number of registered

in CSS images is not limited.

Actions:

1. PM: At the stage of clarifying the requirement to emphasize

the importance of the quality of the input material and the consequences of bad:

technical (bugs, time overrun, bad

extensibility) and a negative impact on a sense of trust

and the attitude of future customers (users).

2. PM: Ask the customer to send the code

instead of posting on the site (if there is no FTP access). it

allows the HTML encoder to immediately work with the code "as is"

without retraining. It is important to note that this

also prevents the client from silently adding

New items under the guise of the same work plan.

3. HTML Encoder: Notify PM of possible problems.

errors and quality of the material. Write which items

not missing in the new design. Ask for a comparative

analysis of new and old design (find out what is changing,

what is added, what is removed, etc.).

2. Layout requirements (DIV, table, mixed).

2.1 Layout on divas

Worst case:

Projects with block layout requirement (semantic layout

using DIV) are performed by encoders that do not have

necessary experience, or block layout is used there,

where it is not justified.

Good practice:

Block layout should be applied in places where it is

application is justified (subjective opinion) if:

- compliance with standards is required;

- This is the only possible way to implement;

- these are customer or platform requirements;

- this is a way to reduce the number of bugs for web-developers.

when working with HTML code;

- it is necessary to simplify the points of contact of the client with

by code

The ability to "impose divas" (and edit a sufficient number

non-trivial bugs) requires a similar experience

HTML coder.

A less elegant but stable tabular layout covers

basic requests for layout in 80% of typical tasks.

Mixed layout - a compromise and a way to absorb the best

of two options.

Impact:

Block layout introduces the probability of non-existent

tabular layout of bugs, such as:

- incorrect render by browser;

- incorrect or unpredictable typesetting behavior when

changing the window size, font, text size, etc .;

- complex cross-browser bugs.

Such bugs are fixed quite difficult, often using

hacks and undocumented features. No solutions

always cross-browser, extensible and reliable.

Actions:

1. PM and HTML coder: At the beginning of the project to discuss issues

concerning typesetting.

2 PM and HTML coder: Take advantage of a consultant

ask for advice from colleagues.

2.2 Requires tabular layout, and the source material on

block

Worst case:

For redesign of projects that were on the table layout

client provided version fully implemented in DIV

make-up

Good practice:

If the material provided by the customer is made on DIVs,

and the existing implementation is on the tables, it is necessary

use a mixed layout, and also consider possible

Adaptation problems in temporal assessment.

Impact:

If the type of the layout does not match then you need to understand that reworking

a new type is no longer a redesign, but actually a creation

the entire design from scratch, which in reality will lead to a huge

the number of bugs, inconsistencies and unforeseen situations.

')

The same result (creation almost from scratch, and not rework),

if the customer sent the layout is not suitable for use

platforms.

Actions:

1. HTML Encoder: Use Mixed Layout (Process

adaptations and bugs at the two types of joints cannot be avoided, however

this minimizes the time spent compared to creating

from scratch).

2. PM: Understand and take into account when assessing that in such

situation design is not taken as it is. Final result

is a symbiosis of past decision and client

option. Any innovation is fraught with bugs, multiplying

exponentially.

3. Knowledge of the project (folder structures, elements generating

design).

Worst case:

HTML coder does not know the project.

Good practice:

HTML coder knows the project.

Impact:

Ignorance of the project leads to the fact that

with the features of the implementation of the system, time is spent allocated

to perform the task itself. The next article is significant

time wasting - bugs and shortcomings that occurred because of ignorance

systems (unaccounted pages, different display at different

conditions, etc.).

Actions:

1. Workflow: Learning Platforms Used

in free time from projects. Task for familiarization with

system before the start of the project. Conduct mandatory

certification system knowledge.

2. Workflow: Use consultant in project

with the consultancy task (except for this task it is in the project

may not participate).

3. PM and HTML coder: Take advantage of a consultant

ask for advice from colleagues.

4. The degree of dependence on the software and hardware.

Worst case:

High dependence on software and hardware.

Good practice:

Autonomous, parallel work.

Impact:

Examples of dependencies that are reflected in time:

- Dependence on PC hardware (Photoshop (several

simultaneously open PSD), Dreamweaver (2-3 windows), TopStyle

(2-3 open files), explorer (or commander), 2-3 open

browser (FireFox, IE, Opera) and sometimes the program to work

c PHP is a very typical example work area).

- Dependence on hardware and Internet HTML encoder

in work it is required to see the instant result of their

action, because sometimes layout is built on the assumption

and the results of how the design behaves in certain

changing conditions. The waiting time is sometimes

exceeds the time to create it. When, even to see

the result of the smallest changes you need to wait

long reloading of the entire page (and reloads the page

coder for the project quite a few times).

- dependence on programmer actions and related programs

with a workflow. Although SVN (and others

version control system) is designed not only to keep

the code, but also the development of parallelization, sometimes it is necessary

instead of developing messing with upgrading svn and restoring

health of your host after the upgrade. It's related

with the fact that a parallel developer changes something radical,

hides or adds some of the functionality affecting

and to work HTML coder.

Actions:

1. Workflow (project team): Discuss

influence each other and on the basis of this suggest order

Tasks

2. Workflow: Acceptable PC power and speed

the Internet.

5. Stage of entry into the project.

Worst case:

The coder enters the project when the key part is not yet ready.

functionality or part that affects the visual display.

Interventions or rework in already worked out are possible.

pages. Remained not clarified until the end of the site.

Good practice:

The project runs in such a way that the coder and the developer work

either in parallel or coder after the developer.

Impact:

Regressions unreasonably take time that cannot

be calculated at the beginning.

Actions:

1. Workflow (project team): Discuss

influence each other and on the basis of this suggest order

Tasks

2. Workflow: Effective communication over

During the course of the project, you can avoid regressions or reduce

their number, avoid bugs.

3. PM: Controls the project at intermediate stages.

The lack of control by the PM during the project will pour out

in regression, remake and abruptly at the end. If at the beginning

there is a development, then coding and stretching, then before stretching

the development results should be checked for compliance

to requirements of the specification and the representations. As shown

practice, the absence of this leads to the following situations:

- time spent on development, and there is no possibility

attract resources for refinement. Have to distract employed

on another project of people.

- The normal HTML coding process is broken. Due to flaws

have to redo and finish pieces of the project, by

which, it seemed, the work was completed.

- emergency work, time overrun, bugs.

6. Communication and clarification of emerging issues along the way.

project with project participants.

Worst case:

Communication is difficult (between client and PM or participants

teams).

Good practice:

There are no problems with communications.

Impact:

Difficult discussion of operational issues leads to ambiguous

understanding of requirements. If you had a question that you

decided on their own, and his decision did not coincide with the vision

client, this will lead to alteration => loss of the project

of time.

Team communications also affect the process. For example,

using IM when discussing operational issues often

slows down communication, because some things are hard enough

and a long time to explain, and also have to do it right away

with several people in several windows.

Actions:

1. Workflow: One of the implicit improvements

communications - a working slang dictionary in the wiki. New employee

can easily read and understand the words used

from the lexicon of colleagues. Project team members should

be proactive in improving communications (use

both logical tools and technical means).

2. Workflow: Better for project team

general chat, where all project participants will be informed

project.

7. Conditions and limitations of the platform or project used.

Worst case:

The project team does not know the requirements of the system or work

components responsible for the design. Have to redo

under the newly recognized requirements.

Good practice:

Layout takes into account the requirements of the system during stretching.

Impact:

Emerging new requirements in the form of restrictions and conditions

systems lead to alterations and adaptations that entail

wasting unplanned time.

Example 1: It is not always possible to download the current one.

version of the client’s site, so to work locally

pull out some parts and put them on locale. More often

you have to do first locally, then after checking

do the same actions on the client. Unplanned

time is a repetition of the same actions on the client and time,

spent on eliminating the difference (download / jump on / s

customer).

Example 2: Open Source Strongly Restricted

and conditions. So in the OsCommerce system the category content

goods are generated hard in the code, which may entail

not just HTML rework, but even PHP rework.

Actions:

1. Workflow (project team): Discuss

bottlenecks, examine the system before starting the project.

2. PM and HTML coder: Take advantage of the consultant

ask for advice from colleagues.

3. Workflow: Outline Problem Solving

or the problems themselves in the wiki, creating a knowledge base.

8. Qualifications and experience. Ability to identify a problem

solve and “outline”.

Worst case:

HTML coder uses unstable solutions, not interested

in improving the quality of work, indifferent to trends and

technicians.

Good practice:

HTML coder improves technique, is interested in trends.

He meets others' experience and creates his own work.

Impact:

An experienced specialist - the key to solving any problem.

Actions:

1. Workflow: Promote base benefits

knowledge. Cultivate and centralize material. Light up

and bring to attention, engage.

2. HTML coder: Use read in practice

not afraid to experiment, to observe the result. Meet

and explore related areas of knowledge, accumulate and synthesize

knowledge. Propose the introduction of run-in and considered options.

3. HTML coder: 70% of problems you encounter

In the process of work, someone has already decided. Documented

the decision will allow not only not to recall frantically how

it was solved last time, but also to get rid of such thoughts

colleagues.

To be continued…

Source: Web Development Blog

and ways to improve it