Illustration. Layout of pages using CSS frameworks. Types of layout: basics of classification
Number of sections and headings, speaking in professional language, - the composition of the issue is the foundation that underlies the formation of a corporate identity and guarantees the publication recognition among the broad masses. Layout of newspapers and magazines is an integral part of the production process. She is responsible for optimization specific page and for the overall design of the issue, that is, for the competent combination of text and graphic elements, for the ease of perception of fonts, for ease of navigation...
Advantages of a stable composition
Systematic circulation sooner or later leads to the fact that a newspaper or magazine develops its own unique composition. From issue to issue, all significant pages, basic sections and thematic headings are retained certain type and structure. This is not done by chance: a product made according to a template is easier to perceive by the reader, and subsequently develops a certain model of expectation among the target audience.
However, the layout of newspapers according to pre-established standards does not at all imply the inviolability of the schemes. On the contrary, compositions that can easily be transformed are a sign of high-quality implementation of creative ideas.
In other words, the stylistic bias and format of the newspaper/magazine should not depend on spot corrections and adjustments. If the executive editor falls into a stupor every time, a few hours before the issue goes to press, the need arises to retype individual pages or even pages, then the basic composition does not justify itself, and it needs to be changed.
What is the fundamental difference between layout and layout?
Compositional preparation and layout of a newspaper are two interrelated processes with similar algorithms of actions. However, the tasks facing designers and layout designers cannot be called the same type - the differences lie in the plane of subject development (optimization) of already edited materials. Priority direction layout is a detailed study of the content structure: the order of stripes, the configuration of publications, the “embeddedness” of images, and the like. The goal of competent layout is to make sure that the arrangement of material on the pages not only does not cause difficulties for the reader, but also in the most natural way focuses his attention on the most significant information messages.
The material that has been assembled has a common thematic core. However, this is not enough to form a full issue of the publication. A kind of finishing line is the layout, which organizes the content and organizes individual elements (publications) into a single whole.
Newspaper layout: norms and patterns
The main guideline for choosing a standard layout structure is the content of the issue. All techniques and options technical design to one degree or another dictated by the content. The term “material for the front page” perfectly reflects the essence of the above: it is used when they want to emphasize the importance of the article (that is, it is the information load of such a note that plays the role of a “stencil” for the entire issue).
However, you need to understand that the so-called general layout standards are quite conditional. Each publication has its own specific one. Therefore, if all newspapers look the same, demanding readers will not be able to find the product they are interested in, which will certainly lead to a drop in sales with the ensuing consequences.
And most importantly: the specifics of the layout are largely predetermined by the history of periodicals, the stages of its development, the traditions of the working team, national preferences and other factors that are not directly related to
A3 format: computer prototyping
A layout designer is a specialist who operates with ready-made text and already selected graphics. His professional responsibilities include posting material based on approved templates. At the dawn of “typographic evolution,” the work of a specialized worker was difficult, and the time spent on completing the assigned tasks was colossal. Modern computer prototyping is a completely different matter...
The typographic formats used today are derivatives of the DIN A0 standard. The most popular in printing are A5, A4 and A3.
Standard layout of an A3-format newspaper is carried out using the template wizard ( shell may be different, but the functional set of utilities is comparable). Among the undoubted advantages of computer prototyping is the availability of adjustments to the contents of the issue at any stage of its preparation, as well as minimizing the number of errors.
Software Brief: PageMaker and QuarkXPress
Pre-press preparation of an issue on a PC involves the installation of a certain software product. Initially, there were few proposals worthy of the attention of professional layout designers. In fact, there were only two of them - PageMaker from the world-famous company Adobe (a reincarnation of the assembly of the same name from Aldus) and a functional analogue called QuarkXPress from the modest organization Quark Ink.
For a long period of time, the developers of both programs walked, so to speak, side by side, so the computer layout of newspapers - meaning its final result - was practically independent of the batch script being implemented. The release of updates disrupted the established balance, but did not determine the leader. Thus, QuarkXPress demonstrated a phenomenal architecture of auxiliary modules (extensions), but was unable to get rid of the clumsiness in the area table editing. And PageMaker relied on universalization, but lost several positions in the functionality ranking (the arsenal of special effects suffered especially).
To help layout designers: introduction to Adobe InDesign
Adobe had no intention of losing in the area of creating software development products. The appearance of a fundamentally new package was only a matter of time...
The InDesign application is a much more serious competitor to QuarkXPress than the outdated PageMaker. More precisely, the question of rivalry is no longer an issue - it all comes down to how many users the utility will “steal” from Quark.
So, how does newspaper layout in InDesign differ from the previously described scenarios?
The completely redesigned one, which is “tailored” for the average user, is intriguing. Here, in order to annoy competitors, there is even an option to activate hotkeys used by default in similar programs- layout designers who worked on Quark will not have to rebuild! The functionality is also impressive. In this regard, InDesign is a viable hybrid that allows you to solve complex tasks pre-press by simply pressing 5 - 6 key combinations. And finally, layout in InDesign is justified from the point of view of the natural development of printed publications: the updates released to the package simplify the process of arranging material as much as possible, reduce the time for preparing publications, and offer options ready-made templates and layouts depending on the stylistic reference of the number...
Competent layout of newspapers: three rules of paramount importance
Modern layout has computer basis. But this does not mean that programs in automatic mode fulfill all requirements regarding proper layout. Much still depends on the specialist master.
So, what does a classic newspaper layout look like?
Example correct algorithm action is as follows:
- When preparing an issue for printing, uniformity of pages must be ensured. If the standard structure is violated (headings and page impositions differ from each other, or there is non-compliance with font design, graphic imbalances, etc.), then, consequently, the composition of the collected material is chosen incorrectly.
- The layout of the output (title) sheet excludes the use of headers, footers and signatures; full information about the publication is provided in the front page.
- Based on the results of the layout, there must be a mandatory coincidence of the lines of the main text located on the front page of the newspaper with the lines on the back (even if a variable font size scenario was implemented, and the basic content of the publication was diluted with materials of secondary importance: footnotes, comments, clarifications, etc. .).
Magazine layout: some nuances
The rules for newspaper layout are somewhat different from those requirements that are imposed on specialists responsible for submitting magazine products to print.
Multi-page publications often consist of columns different formats, while the number of illustrations in them is measured in dozens. It is much more difficult to ensure consistency between the “face” and “back” lines in such conditions. Therefore, magazine designers, as a rule, operate with functional additions (applications) to the main ones. software packages, and the compiled numbers are printed on higher-class printing equipment.
Types of layout: basics of classification
Attempts to create unified classification Many types of layout have been undertaken. However, almost all of them were unsuccessful because they ignored the geometry of placing the finished material on the strip.
For this reason, it was decided to separate the types of newspaper layout not by style, but on the basis three groups characteristics: the first included those identified by the configuration of text and graphics, the criterion for the second was the direction of layout (vertical / horizontal), for the third - the degree of symmetry on the strip.
In newspapers, regardless of the topic, simple block layout is used more often than others (information is presented in structured horizontal rectangles - “blocks”). Much less often they resort to a “broken” layout - when columns with ledges are formed by rectangles of variable height.
Type of layout and target audience. Is there a connection?
It is a well-known fact in professional circles that newspaper layout is not just a search for optimal forms for content. The final compositions must first of all meet the requests target audiences. If you look at printed publications, aimed at young people, you can find examples of lively and bright design, implemented through the use of “broken” layout. The bar scheme dominates in newspapers, whose readers are mainly mature people. But purely informational publications are distinguished by an original (usually complicated) form of presentation of material: many columns of different geometries, plus a “dynamic” font.
Website layout is the process of combining HTML code and CSS tables based on previously selected design solution. The primary sign of the quality of the final result is the correct display of the resource in all popular browsers, and on .
There is no point in reminding that a successful web project is characterized by stable functioning and provision of constant access to its content. This can only be achieved if the HTML layout is:
Cross-browser;
- adaptive;
- contain a minimum amount of code;
- contribute high speed loading web pages;
- be based on the use of HTML tags solely according to their purpose (consistency and hierarchy of the system for introducing elements is also considered an integral requirement);
- valid (compliance of the site code with generally accepted technical standards W3C).
Kinds
Now let's start looking at the types of HTML layout.
1. Static (fixed) layout. The specifics of the application differ in that the width of the web pages will be identical when operating the site as on mobile gadget, and on a desktop PC. In the case when the monitor resolution is high and the Internet browser window is maximized to fill the entire screen, then you can see free (non-functional) space on both sides. As for portable devices, then with static layout the user sees a scroll bar at the bottom of the page.
2. The fluid type of HTML layout involves filling the entire screen of the device with the page. And here it doesn’t really matter where exactly you view the content. The initial page parameters (size, for example) also do not affect anything. Since web elements take up all the free space, the process of developing a user-friendly design becomes much more complicated.
3. Tabular layout involves creating HTML code by creating a set of tables. It looks something like this: first, a main table is produced, in which there are many cells. They contain the following package of tables (if necessary). And so on ad infinitum. As a result, the code turns out to be quite voluminous, making it difficult for the webmaster to subsequently correct or change it.
HTML tabular layout is, as a rule, rarely used these days. Main disadvantage– slow indexing of the site by search engines. In principle, it is possible to place several tables on a page, but we would not recommend using them as part of building the structure of the components of a web project.
4. Layout with web blocks (or div layout). It is believed that this is the most common way of constructing websites today. The grid is formed using tags
5. Adaptive type of layout. The main advantage is the ability to technically adapt the resource to all popular user devices (PCs, laptops, tablets, smartphones, and so on). Comfortable use is achieved by grouping several style sheets.
6. Flexible layout(flex). In web design circles they say that behind this type of layout lie unlimited possibilities and prospects in the field of programming. In order not to be unfounded, we present to you a list of the key advantages of flexible layout:
All blocks are subject to compression and expansion necessary to effectively fill the available space;
- there are resources for aligning text materials horizontally and vertically;
- there is no need for clear placement of components in HTML;
- it is possible to write languages both from right to left and from left to right (although in in this case the concepts “beginning” and “end” would be more appropriate);
- mastering CSS requires minimal time investment.
7. Semantic HTML layout is positioned as an extension of block layout. You can analyze the functionality on the HTML5 platform. Note that the updated set of tags allows us to improve the structure of the web page ( search engines prefer portals with semantic code).
In conclusion, let us remind you that a high-quality website is a platform whose pages (first of all) are designed taking into account the criteria of cross-browser compatibility and adaptability. Select the type of layout, focusing on the type of resource, as well as the range of tasks and goals that will be solved with its help in the future. Good luck to you.
Why not one?
A fair question is why it was impossible to come up with one single way and develop it? But people are different creatures, so they came up with different ways. In fact, there are not many of them, and some are outdated today. Let's look at the basic layout methods.
Table
Creating a framework using tables. In the past, the most basic and popular method. Today it becomes outdated every year, although there are sites that are made this way. The entire method is tied to the table tag and its child elements, such as rows and cells. The entire site structure is laid out as a large table.
Advantages. This approach makes it quite easy to create many columns and columns. Layouts with a complex structure can be easily laid out using a table. Also, the table tag and all associated elements are supported exactly the same in all browsers.
Flaws. Very cumbersome code is the main disadvantage of table layout. It should be noted that you can insert another table into one table, that is, a nested one. This leads to a lot of nesting and a bunch of tags. And there is no escape from this, because all these tags are needed for the functionality of our table. Understanding such code is not very easy.
Tabular data is very difficult to adapt for viewing on various devices. It is much easier to do this with blocks (block layout, which we will definitely consider too).
Alternative. Not long ago, CSS introduced special meanings display properties, which allow you to simulate a table using actual blocks. For example, display: table, display: table-row, display: table-cell. Elements to which these properties are applied will begin to behave like a table, table row, and cell, respectively. You need to remember that this method is also imperfect, because it is not supported equally in all browsers. If you use these properties, you need to test carefully for cross-browser compatibility.
Frames
Once upon a time there was another typesetting method, but today it is almost forgotten. The essence of layout using frames is that the browser window is divided into a certain number of independent blocks (frames), which are formed by the frameset tag. It indicates the path to the html page that will be loaded into the frame.
Each frame is an independent element. That is, scroll bars appear separately for each block. It must be said that frames were never officially adopted, so today they are practically not used and are generally considered a bad way of layout.
Rice. 1. I found this example of a site on frames on the Internet. As you understand, no aesthetics.
Blocks
Here we come to the most popular website layout technology today. It has a number of advantages and is generally recognized as the most convenient. Each block is an independent element into which you can nest an unlimited number of elements. The block can be positioned, resized, and stylized. All this is done with using CSS.
Advantages. Extremely compact code that is perfectly readable, even if you didn’t do the layout. It is easier to attach different styles to blocks than to tables. Such a site loads faster and is better indexed.
Block Elements can be layered on top of each other, like layers in Photoshop. Given the support for transparency, many things can be achieved interesting effects, select a certain area or use a script to load different contents in the same place.
Flaws. There are practically none. Blocks are easy to adapt, easy to hide and change. The div and span containers display correctly even in older browsers. If we talk about new semantic blocks, they do not have full support. However, this problem will probably be solved soon. Today there are files whose inclusion solves the problem of supporting new elements in older browsers. The block layout method will exist for a long time due to its exceptional convenience and simplicity.
Flexbox (flex)
Most new method layouts. It received normal support in browsers for the first time since 2014. Now many developers adhere to this method. Its essence is that display: flex is assigned to structural elements. These are also a kind of blocks, only more flexible and functional.
Many people still consider flexboxes to be not a very good solution for building a website grid. For example, it has long been recommended to use flexbox for small elements on a page, but many still use float for the page frame.
Most likely, in the future, flexbox will finally establish itself as a new website layout technique, so it’s worth studying the properties of this element now.
Rice. 2. The properties of flex elements make them more flexible than blocks.
The advantages of Flexbox include new CSS properties that allow you to build a variety of grids and columns without special effort. It also supports vertical alignment, which a conventional unit does not support.
Conclusion
The simplest and most popular layout method today continues to be the block approach. In some places tables will also be useful to you, because tabular data is completely inconvenient to type out in blocks.
Frames have long been discarded as an unsuccessful way to create structure, but the iframe tag may well come in handy if you suddenly need to insert another site into an article.
Finally, today we have absolutely new way layout - the flex element and its properties that make it more flexible and modern than the usual block. That's all for today. Don't forget to read new articles on the blog to know everything about website building.
The question often arises, what is layout? In simple terms, layout is the arrangement of constituent elements (text, headings, images, tables) on a document page. Layout is of the following types:
- Book
- Newspaper and magazine
- Layout of web documents
We will omit the description of the first two and go straight to the layout of web pages. To better understand what it is, let’s consider the process of creating a website. First, they create a design layout: they draw each page and all its elements. As a result, they get an image of the site, but it’s just a “picture”.
Next, the resulting layout needs to be displayed in the browser, so that all the elements “come to life” and respond to user actions. At this stage the layout designer comes into work. Using the tongue html markup, it creates documents that the browser understands and displays them with familiar web pages.
Layout methods
When designing web pages, there are two main methods:
- Table layout
- Block layout
Table layout used to be the main one. The advantage of layout using tables is its simple execution and almost identical display in different browsers. Disadvantages - a complex and voluminous structure, which significantly increases the amount of code (compared to a block structure). To change the table layout you need to spend a large number of time and effort, it takes a long time to delve into an existing structure.
Today, websites continue to be laid out using tabular layout, but professionals have long switched to a more flexible one - block layout. Tabular layout It is recommended to use it only for displaying tables.
Block layout is a staple among web developers. IN block layout the document frame consists of tags
A small code example:
Table layout
A cap
Content Menu Basement
Block layout code
A cap
Content
The result is the same:
Even for the simplest layout, the difference in the code is already visible, and as the elements increase, the difference will grow exponentially.
Layout programs
To create a simple web page, you can use a regular notepad. For more complex projects, you cannot do without special html editors. They highlight the code, which greatly simplifies the layout process. The following programs are used in a professional environment:
- Notepad++
- Macromedia Dreamweaver
- Microsoft FrontPage
- CoffeeCup HTML Editor
- NetBeans
HTML page editors are divided into regular and visual. Using visual editor, even can make up a page inexperienced user. But you should understand that the visual editor adds a lot of extra code (garbage) and deprives the layout designer of the opportunity to use flexibility html language 100%
What problems arise during layout?
The main problem when designing websites is that the same document does not display the same way in different browsers. Having created a high-quality page for Firefox, it may be displayed a little differently in Opera, and completely disperse in Internet Explorer.
The reason is that each browser is developed different companies and use various technologies and rules. Attempts to come to unified standard are already being done, but the final result is still far away.
Layout is often not given due attention. With this approach, you can ruin even the most creative design and complex functionality of the site. If your visitors personal blog You will be forgiven for this, but a collapsing layout of a corporate website or store will seriously affect the company’s image. The best decision is to entrust the work to professionals.
For professional design sites you need to know not only CSS basics, but also understand how the browser works, know the rules it follows. They determine the main methods and techniques of layout.
Only with this understanding can you choose the most suitable way solving a problem from several possible ones, taking into account their advantages and limitations. This is the only way to make full use of the browser’s capabilities and prevent potential errors.
There are many descriptions of various techniques. This article attempts to bring together the most important techniques and systematize them to give an idea of both the main capabilities and CSS limitations, currently relevant.
The article is intended for people who are familiar with HTML basics and CSS and have an understanding of the basic properties and basic principles cascading style sheets work.
Table
Historically, the first and only way to lay out a page was through tables. A whole chapter in the CSS 2.1 specification is devoted to describing the behavior of tables. Despite this volume, some points are described sparsely or not at all and are left to the discretion of browsers.
Advantages and disadvantages
A table is used to display ordered data in rows and columns that have a semantic connection horizontally or vertically. This leads to the main advantage: table cells are aligned to a grid, which allows you to create in a simple and obvious way modular grid.
This inherent property of tables allows you to fill the plane of the browser window and create “fluid sites”. But, both for small and large sizes browser window, the structure of the table does not change; it cannot flexibly adapt to the available space.
When using a table for layout, that is, placing data in a grid that does not have a semantic connection, semantics is violated. The use of such tables impairs accessibility for people using special programs, and reduces the position in search results, because the search engine, presumably, it is more difficult to understand the page structure. As a result, the site works less efficiently.
Peculiarities
Table cells appear in the code strictly one after another, from left to right or from right to left, depending on the direction of the language, specified by the direction CSS property or its analogue in HTML, the dir attribute.
If, for example, you want the main content in the center column to go first, before the content of other columns in source HTML code, the table is not a suitable solution.
The structure of the table is quite complex, it is described big amount tags, which leads to complication of the source code. Negative effect It becomes even more pronounced when several tables are nested inside each other.
Imitation
The display: table-* property group introduced in CSS 2.1 allows you to create a table from arbitrary elements that have the appropriate structure.
According to the specification, only one declaration like display: table or display: table-cell is enough - the missing elements should be automatically completed by the browser.
However, it will be more reliable to create a minimal structure table > row > cell, similarly required tags
| , with corresponding display property values: table , table-row and table-cell .
Otherwise, you may experience the intermittent bug seen in Firefox and Webkit-based browsers when a table row without an element with display: table-cell randomly is divided into several cells. A possible explanation could be that the boundary is hit network packets among cells when passing HTML code. Thus, block markup with display: table-* is almost no different from a regular HTML table in anything other than tag names, but a regular table is better supported by browsers (namely Internet Explorer 7 and below) and has more features, such as merging cells. It is worth noting that, despite the optional tag |
