1. Enable Clean URLsThis article assumes Clean URLs are setup on the site. These can be enabled by selecting Administer -> Site Configuration -> Clean URLs from the Drupal side bar menu. The enable option will be blanked out until a test has been run. To run the test click Run the clean URL test: this will ensure Apache has mod_rewrite enabled: something the reader doesn’t need to understand, unless the test fails! If the test does fail, ensure there is a file named .htaccess in the directory where Drupal is installed. If that file is where it should be contact the hosting company, check whether they have mod_rewrite enabled. Alternatively post a question on mod_rewrite to our webmaster forums.The video is in Flash format; as this is a non-Free, and patent enclubered, format not all surfers are able to view it. For these users an OGG video is available.This is a Flash placeholder, please see above for alternate to Flash. Or download Flash from Adobe.
2. Enable the Path ModuleThe Path Module must be enabled next. This allows pages created in Drupal to have URLs of the authors choosing, e.g. http://www.example.com/newpage where newpage is chosen by the author. Like all modules, this is enabled via Administer -> Site Building -> Modules from the Drupal side bar menu. Under the group Core – optional search for Path. Check the box next to it and Save configuration to save the changes.As before, this video is in Flash format. An OGG video alternative is also available.This is a Flash placeholder, please see above for alternate to Flash. Or download Flash from Adobe.
3. Create a new PageIn this step a static page to hold the login block is created. Select Create Content -> Page from the Drupal side bar menu. Enter ‘Login’ as the title; optionally any text to appear on the page can be added to the Body text field. Expand the URL path settings, enter ‘login’ into the text box. Also expand the Publishing options, ensure Published is set but Promoted to front page is not. Finally click submit to save the changes (alternatively clicking preview shows how the page will look without saving it).As before, this video is in Flash format. An OGG video alternative is also available.This is a Flash placeholder, please see above for alternate to Flash. Or download Flash from Adobe.
4. Move the Login Block to newly Created PageAs the new page has been created the Login block may be moved to it. The block administration page can be found under Administer -> Site building-> Blocks. To move the login block to the page created in the previous step find User login in the list of blocks, then click configure.Under Page specific visibility settings select the Show on only the listed pages option, then enter ‘login’ into the Pages text box. ‘login’ is the name of the page where the block should be displayed; more than one page can be listed by pressing return between page names (see the instructions on the block configuration page, underneath the Pages text box for details). Click Save block to complete the changes.When the block is saved Drupal returns to the block listing page, finally the block should be moved from the side bar to the content area of the page. Under Region in the block list are a column of drop-down menus: using the drop-down for User login select Content, then click Save blocks. The login block should have successfully been moved, all that remains is to test the changes: particularly important as hiding the login block would be disastrous!As before, this video is in Flash format. An OGG video alternative is also available.This is a Flash placeholder, please see above for alternate to Flash. Or download Flash from Adobe.
5. Test the ChangesImportant: use a different browser for testing! Ensure at least one browser is logged in to Drupal as an administrator in case the setup is incorrect!If a different browser is used for testing, e.g. Opera is logged in as Administrator then use Firefox for testing, it will still be possible to correct any mistakes. The block will not appear for browsers that are logged in, so testing must be conducted using a browser which is not. To test enter the site URL followed by ‘login’, e.g. http://www.example.com/loginAs before, this video is in Flash format. An OGG video alternative is also available.This is a Flash placeholder, please see above for alternate to Flash. Or download Flash from Adobe.

Conclusion

This tutorial only covers moving the login block to its own page, also having a link to the page may also be desirable (amongst other things the reader can probably think of). This can be done by writing a link to /login manually or adding a new menu item (either via editing the login page or through the menu editor Administer -> Site building -> Menus). Unfortunately not everything can be covered in this article. Suggestions for future articles, corrections and comments for this article should be posted at: Webmaster Forums: Moving the Login Block to a Seperate Page in Drupal.

Simple centering of a DIV element on a page

This method will work fine in all browsers.

CSS

.center-div
{
margin: 0 auto;
width: 100px;
}

The auto value in the margin property sets the left and right indentation to all the space available on the page. It’s important to remember that the centered div element must be set to width.

Centering DIVinside DIV-element the old-fashioned way

This method of div centering will work in all browsers.

CSS

.outer-div
{
padding: 30px;
}
.inner-div
{
margin: 0 auto;
width: 100px;
}

HTML

<div class="outer-div"><div class="inner-div"></div></div>

The outer div can be placed as you like, but the inner div must have a specified width.

Centering a DIV inside a DIV element with inline-block

In this method of centering the div inside the div, you don’t have to specify the width of the inner element. It will work in all modern browsers, including IE8.

CSS

.outer-div
{
padding: 30px;
text-align: center;
}
.inner-div
{
display: inline-block;
padding: 50px;
}

HTML

<div class="outer-div"><div class="inner-div"></div></div>

The text-align property only works with inline elements. The inline-block value allows us to display the inner div as an inline element as well as a block (inline-block). Text-align in the external div element allows us to center the internal div.

Center the DIV inside the DIV element horizontally and vertically

Here, margin: auto is used to center the div in the center of the page. The example will work in all modern browsers.

CSS

.outer-div
{
padding: 30px;
}
.inner-div
{
margin: auto;
width: 100px;
height: 100px;
}

HTML

<div class="outer-div"><div class="inner-div"></div></div>

The internal div element must have a specified width and height. The method won’t work if the external div element has a fixed height.

Center the DIV at the bottom border of the page

Here we use margin: auto and absolute positioning for the external element to center the div vertically. The method will work in all modern browsers.

CSS

.outer-div
{
position: absolute;
bottom: 30px;
width: 100%;
}
.inner-div
{
margin: 0 auto;
width: 100px;
height: 100px;
background-color: #ccc;
}

HTML

<div class="outer-div"><div class="inner-div"></div></div>

The inner div must have its width set. The space at the bottom of the page is controlled by the bottom property of the outer div. You can also center the div at the top border of the page by replacing the bottom property with the top property.

Center the DIV on the page vertically and horizontally

Here again, to center the div, margin: auto and absolute positioning of the outer div are used. The method will work in all modern browsers.

CSS

.center-div
{
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100px;
height: 100px;
}

The div element must be set to width and height.

Making adaptive centering of DIV-element on the page

Here, to center the div using CSS, we make the width of the div element adaptive so that it responds to changes in the size of the window. This method works in all browsers.

CSS

.center-div
{
margin: 0 auto;
max-width: 700px;
}

The centered div element must have the max-width property set.

Center the DIV inside the element using the inner block

The inner div element here is adaptive. This method of centering the div inside the div will work in all browsers.properties

CSS

.outer-div
{
padding: 30px;
}
.inner-div
{
margin: 0 auto;
max-width: 700px;
}

HTML

<div class="outer-div"><div class="inner-div"></div></div>

The internal div must have the max-width property set.

Centering two adaptive divs next to each other

Here we have two adjacent adaptive div elements. This method of centering the div will work in all modern browsers.

CSS

.container
{
text-align: center;
}
.left-div
{
display: inline-block;
max-width: 300px;
vertical-align: top;
}
.right-div
{
display: inline-block;
max-width: 150px;
}
screen and (max-width: 600px)
{
.left-div, .right-div
{
lef max-width: 100%;
}
}

HTML

<div class="container"><div class="left-div"></div><div class="right-div"></div></div>

Here we have several elements with the inline-block property applied inside a centered container. This example also uses CSS media queries; that is, if the screen size is less than 600 pixels, then the max-width property for both the left and right div elements is set to 100%.

DIV element centered with Flexbox

Here we center the CSS div with a Flexbox. It is designed to make it easier to design user interfaces. This module is supported by Chrome 38+, IE11, Microsoft Edge, Firefox 38+, Safari 9+, Opera 30+, iOS Safari 9+, and Android Browser 40+.

CSS

.container
{
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.item
{
background-color: #f3f2ef;
border-radius: 3px;
width: 200px;
height: 100px;
}

HTML

<div class="container"><div class="item"></div><div>

The value of the height property can be anything, but only larger than the size of the centered div element.

The Color module is standard, you don’t need to download it, just turn it on in the list of modules if it’s off.

Why is it called Color Handling? This module also supports slicing png files, creating gradients on them, as well as the ability to create a preview of what is done, I will just look at the basic work with changing colors.

Preparing

So, from introduction to business. For this guide we will need the Color module (from the kernel) as well as some sort of design theme. I made a very simple theme, you can use it or you can make your own, there is no difference.

Create basic files

• Step 1 – In the theme folder create a folder named “color”. If you use the theme from the guide, then it goes like this: sites/all/themes/color_theme/color.
• Step 2 – create, in the newly created color folder, an empty file named “color.inc”.
• Step 3 – in the same folder (color) add a file called “base.png”. It does not matter what it will be, just a file with that name is mandatory, and necessarily a picture.
• Step 4 – create, all in the same folder, a styles file named “color.css”.

The result should be as follows.

Integrate with the theme.

It’s time to add functionality to the theme. Let’s start by customizing the “color.inc”.

• Step 1 – first add the basic settings of the module. This contains all the variables for colors that you will be able to change. The file starts with <?php, but doesn’t close!

// An array with all the settings.
$info = array();

// Declare all color variables.
// Each variable is a field for choosing a color.
// Have the form: // 'key' => 'label'.
// You can use the t() function.
$info['fields'] = array(
    'bg' => 'Site background',
    'page_bg' => 'Page background',
    'link_color' => 'Link color',
    'menu_bg_color' => 'Background color of menu items',
    'menu_link_color' => 'Menu item link color',
);

• Step 2 – we’ll create some base color schemes.

// Declare base color schemes (pre-defined).
$info['schemes'] = array(
//declare a mandatory scheme, which will be used by default, and
// which will be used as the default one // by the Color module.
'default' => array(
//name of the color scheme. Will be displayed in the list of all schemes.
'title' => 'Default color scheme',
// Set colors for each key ($info['fields']).
// I take all the default values from CSS.
// The color must be in HEX format, starting with a grid and be in lower
// case.
'colors' => array(
'bg' => '#f1f1f1',
'page_bg' => '#ffffffff',
'link_color' => '#2158ce',
'menu_bg_color' => '#ecececec',
'menu_link_color' => '#000000',
),
),
//Add another color scheme but with the colors we need.
'example' => array(
'title' => 'Example extra scheme',
// Make it completely white.
'colors' => array(
'bg' => '#ffffffff',
'page_bg' => '#ffffffff',
'link_color' => '#ffffffff',
'menu_bg_color' => '#ffffffff',
'menu_link_color' => '#ffffffff',
),
),
);

• Step 3 – connect color.css.

First of all let’s specify that this file will be used by the Color module. To do this, add the following in the same file color.inc:

// The path is relative to the theme's root.
$info['css'] = array('color/color.css');

Next we need to connect color.css to the theme so that it is loaded with the page. To do this, add a line in the color_theme.info file with the style connection.

; Styles
stylesheets[all][] = css/style.css
stylesheets[all][] = color/color.css

It’s important that color.css is plugged in somewhere at the end. Because if we include it before style, nothing will work. Who doesn’t understand what the trick is, google CSS priority.

• Step 4 – we need to add all the elements, classes, identifiers in color.css that will change. The values must be as in “default”. The principle is simple. It takes the first color from the default – it is #f1f1f1, then opens the file color.css, looking for it there and replacing it with what is specified in this field now (the color). I.e. if you have matching colors, but they must be different afterwards, you will have to change the color a bit, for example #f1f1ff2.

/* bg */
body {
background: #f1f1f1f1;
}

/* bg */
body {
background: #f1f1f1f1;
}
/* link_color */
a {
  color: #2158ce;
}

/* page_bg */
#page-wrapper {
    background: #ffffffff; 
}

/* menu_bg_color && menu_link_color */
#navigation ul.menu li a {
  background: #ececec; 
  color: #000000;
}

• Step 5 – add the settings to our theme. The code is added to the theme’s template.php

/**
* Use template_preprocess_html().
*/
function color_theme_process_html(&$variables) {
if (module_exists('color')) {
_color_html_alter($variables);
}
}
/**
 * Use template_process_page().
 */
function color_theme_process_page(&$variables, $hook) {
 if (module_exists('color')) {
 _color_page_alter($variables);
 }
}

• Step 6 – To avoid a bunch of errors, we need to specify default values for features that we don’t use. To do this, go back to color.inc and add the following lines:

/**
 * The settings below are empty. The color module needs them even if we don't
 * use them in our theme.
 */

// The path is specified relative to the theme root.
$info['css'] = array('color/color.css');

// Files to copy. (color.css is copied automatically)
$info['copy'] = array();

// files to be used in the preview.
$info['preview_css'] = 'color/preview.css';
$info['preview_js'] = 'color/preview.js';
$info['preview_html'] = 'color/preview.html';

//declaration of gradients.
$info['gradients'] = array();

// Coordinates for filling.
$info['fill'] = array();

// Coordinates for slicing the image.
$info['slices'] = array();

// base picture.
$info['base_image'] = 'color/base.png';

That’s it. Now reset the site cache, and then go into the theme settings. You will see the color settings section.

If you want to set the colors yourself, don’t forget to select in Color set: Custom.

Then save the settings and see the result.

P.s. If you get berrores about preview.html or preview.js, just create files with those names in the color folder.

The statistics are useful in determining how users are visiting and navigating your site. It provides a customisable “Popular content” block that can be added to your theme.

Use

Configuring statistics

In Drupal 9, configure statistics via Configuration > System > Statistics.

To enable collection of statistics, check the Count content views checkbox on the Statistics settings page.

Display popular content

The module includes a Popular content block that displays the most viewed pages today and for all time, and the last content viewed. To use the block:

1. Enable Count content views on the statistics settings page (Configuration > System > Statistics)
2. Add the Popular Content block from the Block Layout page (Structure > Block Layout)
3. Configure how many results to show for each statistics list.
4. Choose which roles to show the statistics to

Page view counter

The Statistics module includes a counter for each page that increases whenever the page is viewed. To use the counter, enable Count content views on the statistics settings page, and set the necessary permissions (View content hits) so that the counter is visible to the users.

• image transformation: changing sizes, colors, rotation
• creation of labels on images and comments
• taking snapshots of the screen, window or selection area
• adding special effects for distorting images
• viewing and saving images in all popular formats TIFF, JPEG, PNG, PDF, PhotoCD, GIF, etc.
• image browsing specified in URLs
• histogram construction of image components

There are a number of interfaces between ImageMagick and programming languages such as C/C++, Perl, Java, Python. With ImageMagick you can create dynamic images for Web pages.

Installing

The package is present in the debian package repository.
To install the package

• at the command line: # apt-get install imagemagick
• In graphical mode you can use a specialized package management program

Once installed the package is ready to use.

Frequently used commands are

# man ImageMagick - view program-specific tooltips
# man convert - see help about a specific utility

The package contains the following utilities

• display – displays images, a simple picture editor
• convert – converts the image
• identify – getting information about the image parameters
• import – writing the image of a window or a screen region to a file
• animate – viewing a group of images, displaying a slide show from files
• montage – making an image of several images
• mogrify – image transformation or image sequence
• composite – combine and overlay images
• display utility

The display utility

allows viewing and processing images on all workstations with an active X server.
For example, it can load, view, record, zoom in/out, rotate and transform, change colors, contrast, remove image defects, make slides.

The format of the program call

# display [options] input-file
where
[options] …

Usage examples

# display - display file
# display -update 1 - display the file and redraw it after 1 second
# display "vid:*.jpg" - view graphical files as a "visual directory

The convert utility

The convert utility converts images on the command line.
For example, it can convert formats, create animations, manipulate images: rotate, change size, colors, resolution in dots per inch, etc.

Program call format

# convert [input-options] input-file [output-options] output-file
где [options] can take values
-adaptive-blur geometry adaptively blur pixels; decrease effect near edges
-adaptive-resize geometry adaptively resize image with data dependent triangulation.
-adaptive-sharpen geometry adaptively sharpen pixels; increase effect near edges
-adjoin join images into a single multi-image file
-affine matrix affine transform matrix
-alpha on, activate, off, deactivate, set, opaque, copy", transparent, extract, background, or shape the alpha channel
-annotate geometry text annotate the image with text
-antialias remove pixel-aliasing
-append merging the image sequence (+ - from right to left, - from top to bottom)
-authenticate value decipher image with this password
-auto-gamma automagically adjust gamma level of image
-auto-level automagically adjust color levels of image
-auto-orient automagically orient image
-background colorbackground color
-bench iterations measure performance
-bias value add bias when convolving an image
-black-threshold value force all pixels below the threshold into black
-blue-primary point chromaticity blue primary point
-blue-shift factor simulate a scene at nighttime in the moonlight
-blur geometry attenuation of image noise and level of detail (Gaussian blur ?)
-border geometry surround image with a border of color
-bordercolor color border color
-brightness-contrast geometry improve brightness / contrast of the image
-caption string assign a caption to an image
-cdl filename color correct with a color decision list
-channel type apply option to select image channels
-charcoal radius simulate a charcoal drawing
-chop geometry remove pixels from the image interior
-clamp set each pixel whose value is below zero to zero and any the pixel whose value is above the quantum range to the quantum range (e.g. 65535) otherwise the pixel value remains unchanged.
-clip clip along the first path from the 8BIM profile
-clip-mask filename associate clip mask with the image
-clip-path id clip along a named path from the 8BIM profile
-clone index image cloning
-clut apply a color lookup table to the image
-contrast-stretch geometry improve the contrast in an image by `stretching' the range of intensity value
-coalesce merge a sequence of images
-colorize value colorize the image with the fill color
-color-matrix matrix apply color correction to the image.
-colors value preferred number of colors in the image
-colorspace type setting the color space of the image
-combine combine a sequence of images
-comment string annotate image with comment
-compare compare image
-compose operator set image composite operator
-composite composite image
-compress type image compression type
-contrast enhance or reduce the image contrast
-convolve coefficients apply a convolution kernel to the image
-crop geometry image cropping
-cycle amount cycle the image colormap
-decipher filename convert cipher pixels to plain
-debug events display copious debugging information
-define format:option define one or more image format options
-deconstruct break down an image sequence into constituent parts
-delay value display the next image after a delay
-delete index delete the image from the image sequence
-density geometry horizontal and vertical density of the image
-depth value image size
-despeckle reduce the speckles within an image
-direction type render text right-to-left or left-to-right
-display server get image or font from this X server
-dispose method layer disposal method
-distribute-cache port launch a distributed pixel cache server
-distort type coefficients distort image
-dither method apply error diffusion to image
-draw string annotate the image with a graphic primitive
-duplicate count,indexes duplicate an image one or more times
-edge radius apply a filter to detect edges in the image
-emboss radius emboss an image
-encipher filename convert plain pixels to cipher pixels
-encoding type text encoding type
-endian type endianness (MSB or LSB) of the image
-enhance apply a digital filter to enhance a noisy image
-equalize perform histogram equalization to an image
-evaluate operator value evaluate an arithmetic, relational, or logical expression
-evaluate-sequence operator evaluate an arithmetic, relational, or logical expression for an image sequence
-extent geometry image size setting
-extract geometryextracting an area from an image
-family name render text with this font family
-features distance analyze image features (e.g. contract, correlations, etc.).
-fft implments the discrete Fourier transform (DFT)
-fill color color to use when filling a graphic primitive
-filter type to use the filter when the image is resized
-flatten flatten a sequence of images
-flip flip the image in the vertical plane (vertical reflection)
-floodfill geometry color floodfill the image with color
-flop flip the image horizontally (horizontal reflection)
-font name render text with this font
-format string output formatted image characteristics
-frame geometry surround image with an ornamental border
-function name apply a function to the image
-fuzz distance colors within this distance are considered equal
-fx expression apply mathematical expression to an image channel(s)
-gamma value уровень гамма-коррекции
-gaussian-blur geometry reduce image noise and reduce detail levels
-geometry geometry preferred size or location of the image
-gravity type horizontal and vertical text placement
-grayscale method convert image to grayscale
-green-primary point chromaticity green primary point
-help display the program startup parameters
-identify identify the format and characteristics of the image
-ift implements the inverse discrete Fourier transform (DFT)
-implode amount implode image pixels about the center
-insert index insert last image into the image sequence
-intensity method method to generate an intensity value from a pixel
-intent type type of rendering intent when managing the image color
-interlace type type of image interlacing scheme
-interline-spacing value the space between two text lines
-interpolate method pixel color interpolation method
-interword-spacing value the space between two words
-kerning value the space between two characters
-label string assign a label to an image
-lat geometry local adaptive thresholding
-layers method optimize or compare image layers
-level value adjust the level of image contrast
-limit type value pixel cache resource limit
-linear-stretch geometry linear with saturation histogram stretch
-liquid-rescale geometry rescale image with seam-carving
-list type Color, Configure, Delegate, Format, Magic, Module, Resource, or Type
-log format format of debugging information
-loop iterations add Netscape loop extension to your GIF animation
-mask filename associate a mask with the image
-mattecolor color frame color
-median radius apply a median filter to the image
-metric type measure differences between images with this metric
-mode radius make each pixel the 'predominant color' of the neighborhood
-modulate value vary the brightness, saturation, and hue
-monitor monitor progress
-monochrome transform image to black and white
-morph value morph an image sequence
-morphology method kernel apply a morphology method to the image
-motion-blur geometry simulate motion blur
-negate replacing each pixel of the image with the opposite one (color inversion)
-noise radius add or reduce noise in an image
-normalize transform image to span the full range of colors
-opaque color change this color to the fill color
-ordered-dither NxN ordered dither the image
-orient type image orientation
-page geometry size and location of an image canvas (setting)
-paint radius simulate an oil painting
-perceptible set each pixel whose value is less than |epsilon| to -epsilon or epsilon (whichever is closer) otherwise the pixel value remains unchanged.
-ping efficiently determine image attributes
-pointsize value font point size
-polaroid angle simulate a Polaroid picture
-poly terms build a polynomial from the image sequence and the corresponding terms (coefficients and degree pairs).
-posterize levels reduce the image to a limited number of color levels
-precision value set the maximum number of significant digits to be printed
-preview type image preview type
-print string interpret string and print to console
-process image-filter process the image with a custom image filter
-profile filename add, delete, or apply an image profile
-quality valuecompression level JPEG/MIFF/PNG(picture quality)
-quantize colorspace reduce image colors in this colorspace
-quiet suppress all warning messages
-radial-blur angle radial blur the image
-raise value lighten/darken image edges to create a 3-D effect
-random-threshold low,high random threshold the image
-red-primary point chromaticity red primary point
-regard-warnings pay attention to warning messages.
-region geometry apply options to a portion of the image
-remap filename transform image colors to match this set of colors
-render render vector graphics
-repage geometry size and location of an image canvas
-resample geometry change the resolution of an image
-resize geometryresizing
-respect-parentheses settings remain in effect until parenthesis boundary
-roll geometry roll an image vertically or horizontally
-rotate degrees image rotation
-sample geometry scale image with pixel sampling
-sampling-factor geometry horizontal and vertical sampling factor
-scale geometry image scaling
-scene value image scene number
-seed value seed a new sequence of pseudo-random numbers
-segment values segment an image
-selective-blur geometry selectively blur pixels within a contrast threshold
-separate separate an image channel into a grayscale image
-sepia-tone threshold simulate a sepia-toned photo
-set attribute value set an image attribute
-shade degrees shade the image using a distant light source
-shadow geometry simulate an image shadow
-sharpen geometry sharpen the image
-shave geometry shave pixels from the image edges
-shear geometry slide one edge of the image along the X or Y axis
-sigmoidal-contrast geometry increase the contrast without saturating highlights or shadows
-smush offset smush an image sequence together
-size geometry image width and height
-sketch geometry simulate a pencil sketch
-solarize threshold negate all pixels above the threshold level
-splice geometry splice the background color into the image
-spread radius displace image pixels by a random amount
-statistic type geometry replace each pixel with corresponding statistic from the neighborhood
-strip strip image of all profiles and comments
-stroke color graphic primitive stroke color
-strokewidth value graphic primitive stroke width
-stretch type render text with this font stretch
-style type render text with this font style
-swap indexes swap two images in the image sequence
-swirl degrees swirl image pixels about the center
-synchronize synchronize image to storage device
-taint mark the image as modified
-texture filename name of texture to tile onto the image background
-threshold value threshold the image
-thumbnail geometry create a thumbnail of the image
-tile filename tile image when filling a graphic primitive
-tile-offset geometry set the image tile offset
-tint value tint the image with the fill color
-transform affine transform image
-transparent color make this color transparent within the image
-transparent-color color transparent color
-transpose flip image in the vertical direction and rotate 90 degrees
-transverse flop image in the horizontal direction and rotate 270 degrees
-treedepth value color tree depth
-trim trim image edges
-type type image type
-undercolor color annotation bounding box color
-unique-colors discard all but one of any pixel color.
-units type the units of image resolution
-unsharp geometry sharpen the image
-verbose print detailed information about the image
-version print version information
-view FlashPix viewing transforms
-vignette geometry soften the edges of the image in vignette style
-virtual-pixel method access method for pixels outside the boundaries of the image
-wave geometry alter an image along a sine wave
-weight type render text with this font weight
-white-point point chromaticity white point
-white-threshold value force all pixels above the threshold into white
-write filename write images to this file

Examples of use

# convert imageIn -resize "800x600" imageOut - converts the image with the exact size
# convert imageIn -resize 50% imageOut - shrink the image by 50% of the original image
# convert imageIn -resize x480 imageOut - converting the image with proportional compression by width

example of double conversion through a channel with transformation into the "album" format and filling of the empty area
# mediainfo DSC00005.JPG - original file
Complete name : DSC00005.JPG
Format : JPEG
File size : 865 KiB
Width : 1 536 pixels
Height : 2,048 pixels
# convert DSC00005.JPG -resize "1600x1200" - | convert -background "#000000" -extent "1600x1200" d5.jpg
# mediainfo d5.jpg is the output file
Complete name : d5.jpg
Format : JPEG
File size : 380 KiB
Width : 1 600 pixels
Height : 1 200 pixels

# convert file_name.pdf file_name.jpg - convert PDF->JPG
Note:
When converting a multi-page document, files of the form ''file_name-*.jpg'' will be created by the number of pages.
# convert *.jpg file_name.pdf - converting JPG->PDF file

People have always intuitively used the sense of proportion. It is easy to confirm, because since the earliest civilizations we can see the connection of proportions with measurement and construction, the placement of objects relative to each other in space.

Grids, as a markup, a system of reference lines, were used to make construction plans and break down the territory, Renaissance artists used it to enlarge their sketches, and in cartography grids were the coordinate basis on which military plans were made.
In the designer’s work, when layouts consist of different elements, the grid helps to organize them. The grid allows, without calculating each distance and size separately, laying the key patterns in its construction only once, then simply reuse them.

For example, the grid allows you to observe the rule of proximity theory (you can also find this rule among the Gestalt principles of perception) and, in particular, the rule of external and internal, according to which internal distances must be smaller than external ones.

Once you start using the grid, it is hard not to notice its advantages:

• the grid defines a unified design style, rules for the arrangement of elements, alignment, adding new elements to the layout;
• speeds up work with the layout, because when you follow common rules, the time to decide where, what, and how it will be located is minimal, and also allows you to get a predictable result when working in a team
• reduces the likelihood of errors in the overuse of components layout. Component-based approach is used by developers in their work, so components allow the team to work in sync, easily maintain changes and save time;
• layout looks more aesthetically pleasing, elements are proportional and structured. In addition, if a grid is used in the design, it helps the user read the information faster. The grid creates visual order and orientation becomes easier.

What grids are.

Depending on what is taken as the basis for the grid, we can distinguish the following types: block (based on a block), column (columns), modular (module), hierarchical (visual weight and location of elements relative to each other).

Block or manuscript grid

is the simplest type of grid, which is usually used in print publications. Typically, such a grid is a standardized rectangle that contains the content on the page or screen.

A column grid

is a grid that has columns in its structure. The width of the intercolumn (gutter) is determined by his purpose, if he simply separates the elements from each other, it is reasonable to make his width the minimum necessary, but it should be in any case, noticeably larger than the line spacing, so that the lines in adjacent columns not look like extensions of each other.

A modular grid

is characterized by having both a vertical termination and a horizontal termination. What is formed at the intersections is a module – a rectangle with a given height and width that underlies the composition. The grid determines how the layout will look like as a whole and where individual elements will be located: text blocks, headings, images.

Hierarchical

a grid with intuitive placement of blocks, which focuses on the proportions and visual weight of elements in the design. This type of grid is often used when content is not standardized and uniform. Often found for business domains related to fashion, photography, art.

The most difficult to build is a modular grid, it includes the construction of columns. So let’s look at the principles of its creation.

Principles of constructing a modular grid

Modular grid is a tool, but not a method, so before you create a grid, you should make a rough page layout, think through the elements that can be used, and only then proceed to create it. To build a modular grid, you must first build a base grid, then apply a column grid to it, and by setting the module size, we will get a designer grid, i.e. your designed for a particular project.

So, let’s start with the base grid. It resembles millimeter paper. It will allow you to move the smallest elements of the layout, keeping all the distances between them equal and uniform. The pitch of the grid depends on the indivisible elements (atoms) of the layout. They can be a base font and line height, a radio button, a checkbox, the minimum distance between visible blocks of content, for example, between photos in the gallery or product cards.

Why 8-pixel?

A block of 8×8 pixels was chosen as the step for this grid because most popular devices have a multiple of eight pixels screen size, therefore it would be easier to design interfaces for them with this system. In addition, if all numerical values are even, it becomes easier to scale sizes and distances for a wide range of devices, keeping the design in its original form.
For example, devices with a resolution one and a half times larger than the original will have problems rendering odd values. Increasing an element five pixels in size by a factor and a half will result in a half pixel offset.

There is also a recommendation to use an 8-pixel grid in Apple’s Human Interface Guidelines.

Why not 10?

Because, again, most devices have a multiple of eight in pixel size, and the 10-pixel grid introduces more restrictions on element sizes.
8,16,24,32,40,48,56,64,72,80,88,96,104,112,120 15 dimensions
10,20,30,40,50,60,70,80,90,100,110,120 12 sizes
Eventually you may decide to use both the 10 and 6 pixel grids as your base grids. The main argument for choosing them should be the convenience of working, following the chosen rules and their support for you and your team.

The concepts of Hard and Soft grids

There are two approaches to using a basic grid.

• When using a hard grid, all elements are a multiple of the base grid block, for example 8 if we are talking about an 8 pixel grid, and are placed strictly on the grid.
• The second approach is the soft-grid, which boils down to using distances between elements that are multiples of 8 in our case.

The main advantage of using a hard grid is that no matter how you group the elements together, you can always control the inner and outer indentations and move the containers of elements around like bricks. Material Design, where everything is designed using a 4-pixel grid (typography, icons, and some other elements are designed using a 4x pixel grid, and other components using an 8 pixel grid) is usually fully consistent with this method.

The good thing about a soft grid is that when it comes time to layout your layout, using a grid is more likely to cause difficulties because programming languages do not use the same structure to specify meshes. When speed of implementation comes first, soft grids are more flexible and minimalist in their code structure. It will also be preferred for iOS design, where most system graphical elements are not defined by a hard grid.

Vertical rhythm.

When choosing a base grid, it is important to remember that the pitch of the grid must fit evenly with the height of the main text line. Let’s say you’ve chosen a font with a font size of 16 pixels as your base font, then according to the recommendations of modern typography the interlineage will be 150-200% of the size (sometimes more). In order for the 8-pixel block of the base grid to fit evenly into the height of the line, you can choose a value of 24 pixels as the interlineage. Based on this line height of the main text, you can vary the layout and follow the vertical rhythm.

Which approach to take will depend on the skills and experience of the team, because native mobile apps have the ability to work with a baseline of text, but it’s harder with a browser. You’ll have to work from a baseline and then use very specific intervals to make your content align.

This means that each design element will now occupy a certain number of lines in height. Rhythm is easy to work with, you measure everything in lines, not pixels. For example, the first level menu and header are 2 lines, the image is 8 lines, the button is 1 line, the indent is 1 line, etc.

Column grid

The column grid is responsible for horizontal rhythm, which you can get by choosing a column width to indentation ratio that makes it easy to change the position of larger blocks.

Why is the 12-column grid so popular?

Because the number 12 is divided into: 12, 6, 4, 3, 2, 1. Therefore, the grid is flexible and allows you to layout blocks of almost any number or width. Moreover, by discarding 1 or 2 columns as margins on the edges of the layout, you get a block in the center that is also divided by 10, 5 or 8.

What to consider when building a column grid

• Breakpoints

In adaptive design you need to keep the layout structure and neatness of information for all resolutions, so layouts should be made for all control points. Columns of the grid can remain static and be added as the screen width increases, and elements can change their position by obeying the column rhythm and breakpoints. These can be 480, 600, 840, 960, 1280 and 1440. And for each screen resolution, respectively, will be a different number of columns. As a detailed example, we recommend reading the Material Design responsive layout grid. With a hard deadline, you can choose the most popular 2-3 transition points using your resource’s or your competitors’ web analytics.

Or you can keep the number of columns for all the transition points and change the size of the columns and inter-columns between them proportionally.

For a better understanding of how responsive layout works, where, when and how it is used, as well as the concept of responsive design, see our video about designing websites and pages for different devices

An example of calculating a grid for a transition point of 1280 pixels.

Determine the number of columns. For example, there will be a gallery of six photos with text descriptions, two large graphics and three paragraphs of text. Then the number of columns should be a multiple of 2, 3 and 6. A number of 12 will do. Dividing the grid area of 1280 pixels into 12 columns with gutters of 20 pixels would produce 85 columns of width while leaving an indentation of 20 pixels to the left and right edges. So you have 12 columns of 85 pixels, 11 gutters of 20 pixels, and 20 pixels left and right margins.
1280px = (85px12)+(20px11)+(20px+20px)
This distribution gives combinations of elements of different sizes.

The concept of Fluid Grid or “rubber” grid is also used in the web. Its peculiarity is that its distances are not specified in pixels, but in percent. For 100% is taken content area. Below is a simplified example for a 1000 pixel wide layout with 6 columns.

Designer Grid

Having constructed the base grid, and having defined the column grid, we get the intersection of columns and rows, which forms a module – the basic unit of the modular grid. When choosing a module size, you should keep in mind that a module that is too large will produce an inflexible grid, a module that is too small will be meaningless. Modules can and should be combined into groups, so we get a design grid – the final version of a modular grid designed for a specific project.
As a rule, you are practically limited to a combination of a base grid and a column grid, since development and maintenance of a designer grid is rather labor-intensive.

The designer’s (final modular) grid may consist of two narrow columns on each side and one wide one in the center. It can be of identical columns with wide indents, or it can consist of “floating” columns (when two, when five), but so that it becomes visible by repeating the layout of materials and nesting “less in more”.

Grid within a grid

If the project is complex and multi-component, it is possible to use several nested grids. For example: the layout uses columns with large text, and inside one of them lies a calculator form with a bunch of controls, laid out on a square 4-pixel grid. In addition, some of the content can be extraneous and embedded at all: players, online cards, widgets, payment frames, etc. These elements will have their own internal grids that you have no control over. What you can do is follow the inside-outside rule for containers containing these blocks, give enough air (including vertically) around them so they don’t stick to the rest of the content, look detached and drag extraneous elements into their visual zone.

In lieu of a conclusion…

Don’t start your search for a design solution by building a grid. First you need to:

• decide on the structure of the page and make a rough sketch of it, even on paper;
• get the high-priority blocks into a consistent layout;
• then build a rough grid of your design ideas;
• Grid in blocks whose location is not crucial.

Only now can you begin to work through the grid:

• Choose a base grid pitch based on the typography you’ll use and the size of the basic elements: buttons, input fields, checkboxes, etc. You can limit your support to vertical rhythm only, based on the line height of the base font;
• determine the optimal number of columns depending on the content structure;
• choose the number of transition points you will support;
• build a column grid and try to arrange the key elements of the interface;
• determine the module size that will allow you to create content blocks (you can omit this step, in practice it is rarely used due to the labor-intensive support).

Important! The grid should not dictate, but help in the design. Therefore, you can deviate from the grid! There is no need to align everything unconditionally on the grid. If some block does not fit into your grid in any way, you don’t have to adjust it.

Try it and you will succeed!

The Short Answer

Usability is a measure of how easy a system is to use.

Accessibility means access to all, regardless of technological and physical means. This ranges from people with screen readers to those with mobile phones, PDAs or slow modems.

The Long Answer

Usability

Usability is the quality that determines how user interfaces are clear and easy to use. This could be expounded in more detail as follows:

“Usability is the extent to which a product, designed for a particular use scenario by a particular user, contributes to their bottom line in the most efficient and comfortable way possible.”

Or in short:

“Usability is design from the user’s point of view.”

The term itself also refers to various methods of improving and easing interfaces. This concept focuses more on functionality and ergonomics than on visual and aesthetic aspects. Usability is interested in the result of the client’s interaction with the system and the construction of the path to it.

What is usability consist of

One of the founders of this direction, interface specialist Jakob Nielsen, defined the following usability components from a user’s point of view:

• Usability – how easy it is for users to perform basic tasks, usage scenarios, when they encounter an interface for the first time;
• Efficiency – how quickly users can perform tasks when they are already familiar with the design;
• Memorability – how easy it is for users to regain proficiency with the interface when they return to it after a long period;
• Errors – the frequency of usage errors, how serious they are, and how easy it is for the user to recover from them;
• Satisfaction – how pleasant the design is to use.

Nielsen also suggests evaluating the Usability of interfaces and defining Usability using the formula:

Usability = Usability + Functionality, where

Functionality – whether the interface gives you what you need;

Usability – how easy and pleasant it is to work with.

Nielsen also described 10 principles of good usability:

• Visibility of system status;
• Consistency between the system and the real world;
• Control and freedom of choice in the user;
• Consistency and standardization;
• Error prevention;
• Recognition is better than recall;
• Flexibility and efficiency of use;
• Aesthetics and minimalist design;
• Helps users recognize, diagnose and recover from errors;
• Help and documentation.

Why usability is important

Advances in technology have made the principles of building and using systems more and more complex. Nowadays many things can seem trivial, but historically simple and familiar to us tasks were not so easy to perform in the past.

For example, working with a word processor or interacting with web pages. The ease and accessibility of working with these things is in no small part the merit not only of technical progress, but also of interface optimization. Specialists adapt the interfaces to the end user, including and above all the one who has no special knowledge.

As a consequence, this facilitates and accelerates training, expands the list of available skills, simplifies a number of tasks, or allows you to solve completely new ones, and increases labor productivity.

In terms of perception, the importance of usability is as follows:

• Users can concentrate on completing their tasks in a normal workflow. They do not need to understand the menus of the interface or understand the internal architecture of the software, the structure of controls, the meaning of icons and buttons. In other words, they don’t have to think about how to convert a task into an “input” command for the computer and how to complete a full cycle of operations.
• Users do not need to thoroughly understand the functioning of computer hardware and software.
• Users can’t be distracted or confused by the interface as they interact with it. All work steps and specific operations are simple, straightforward, and reproducible with expected results.
• Users can work normally with the interface in most conditions and scenarios.

From the user’s point of view, he can calmly and productively work with the program and not feel incompetent.

From the developer’s point of view, usability is an important aspect of the demand and popularity of the system as a whole, because it is created for someone.

From a manager’s point of view, products with poor usability will take more time and energy to learn from the user, and this is a very bad competitive “advantage.

Apple, for example, has built its strategy almost entirely on the following grounds since its founding by Steve Jobs and Steve Wozniak. Products, both software and devices, had to be more user-friendly. As a result, users became willing to pay more for everything to be simple, understandable and work “out of the box” – out of the box.

Finally, in terms of interfaces participating in sales – online stores, cash registers and self-service terminals – a person can’t buy what they can’t find.

This is the first rule of e-commerce.

On the Internet, if a user can’t find something, he goes away. Even if a page doesn’t load for more than 2 seconds a huge percentage of users refuse to view it.

• If the user doesn’t understand what exactly the company offers, what it does and what can be useful for him, if its site is inconvenient to use, he leaves.
• If the information is not presented clearly, it is difficult to read, and its content does not answer his key questions – he leaves.

What is web accessibility?

In fact, the term accessibility is a subset of the more general and well-known term usability.

Usability is the efficiency and satisfaction with which a user achieves their goals.

Accessibility – equal access to content for all users, including those with any impairments.

Thus, increasing the accessibility of the product, we also increase its usability. Achieving 100% accessibility means the ability to use the full functionality of the product by absolutely any user (including those with disabilities). It is important to understand that “limited capabilities” when using applications can occur both in chronic health conditions (according to the UN statistics, ~15% of the world’s population has some form of disability) and in temporary life circumstances.
Let’s talk about limitations in more detail.

About “disabilities”

The main types of chronic disabilities:

• Vision.
  Total/partial blindness/daltonism.

• Hearing.
  Total/partial deafness.

• Musculoskeletal system.
  Various types of paralysis/tremor/absence of limbs.

• Mental development.
  Impairments related to information perception/remembering.

In addition to permanent impairments, impediments to using apps can be temporary and situational. Let’s look at examples of impediments when a person can only use a product with one arm:

Even factors such as bad Internet connection, screen sharing on a projector with low contrast or a lost mouse (and thus interaction with the interface using the keyboard) are situational barriers for using applications, and one of the important tasks of IT professionals is to mitigate their impact on user experience.

And of course, over time, each of us will face some limitations – as we get older our motor reactions, eyesight and hearing become weaker, and the level of automation and functionality of applications increases. So by making interfaces accessible now, we are also taking care of ourselves in the future.

Who and why should implement accessibility?

There is no special person who will implement accessibility in your product. It requires the involvement of the entire team:

• UX/UI designers – designing interfaces, following accessibility guidelines
• Programmers write proper page layout, make sure that all elements have the required tags and attributes
• Testers – do accessibility testing.

The main motivation for implementing accessibility:

1. Empathy: we can minimize barriers between users and content, thereby making their lives better. But if you’re not as sensitive and receptive, there are other pretty compelling motivations.
2. Competitive advantage: increasing the percentage of satisfied users.
   As I mentioned earlier, up to 15% of users have permanent, temporary or situational barriers to interacting with the Internet. No matter what your company focuses on – websites, mobile or desktop apps and services – when you implement accessibility, you achieve an increase in the percentage of users who can successfully interact with your resource.
   Among other things, accessibility is one of the modern trends in the IT world, the use of which improves the image of your company.
3. Law: a prerequisite for product development for large international projects. In most EU countries, as well as in the UK, USA, Canada, Australia, Brazil, and India, accessibility standards are set by law.

How to implement it?

Spoiler alert: it’s enough to follow existing standards!

Most of the work has already been done for us. There are standards with guidelines that can be followed to make any content accessible:

• WCAG (Web Content accessibility guidelines) by the W3C
  https://www.w3.org/WAI/standards-guidelines/wcag/
• Section 508 (applies to territories in the US)
  https://www.access-board.gov/guidelines-and-standards/communications-and-it/about-the-ict-refresh

What is a website layout

A website layout is a realistic prototype created in a graphics program like Photoshop. It looks like a ready-made website: with all the blocks of text and images, buttons, wallpaper, and so on. The only difference is that the layout has no functional content: for example, the product page is filled with description templates.

Why do we need a website layout?

Site layout – is the result of the designer’s work on behalf of the customer. Then the layout is transferred to a codifier and programmer, these professionals have converted a graphic file into a real site.

Ideally, the creation of a site layout involves many professionals, except the designer and layout designer: copywriter, user interface designer, backend programmer, and even a marketer.

Layout is needed so that the whole process went quickly: the performers had to make minimum changes, and the customer saved time and money.

Layout helps in this whole process:

• See in advance how the customer’s wishes will look like in practice, including the mobile version of the site and animation elements.
• To develop a unified design for all pages of the site and all of its typical elements.
• Thinking over the content elements – text and images.
• Coordinate the entire project team, set a clear framework for the work.

Layout development site: we work step by step.

Let’s understand in detail how a layout comes into being and what to take into account during the creation process.

The terms of reference

Always start “on the shore”, with the drawing up of the terms of reference. Even if you make your own layout, the task will come in handy: when you caught the designer’s courage and have been playing with fonts for three hours, the task will get you back on track. What should be in it:

• The goals of the site – what it will specifically do for your business.
• A brief analysis of the target audience – who you’re making the site for, what those people’s needs are.
• User scenarios – how your visitors will use the site, how you plan to bring them to the action you want.
• The number and approximate content pages of the site. Just in case, do not forget to draw and page 404.
• Deadline – it is worth prescribing, if you involve outside experts.

Prototype

When the job is prescribed, you can make a block structure of the site layout, that is, a prototype. This is a schematic drawing, which shows the location of the main elements: the header, footer, content blocks on the page, the approximate ratio of their sizes.

Color matching

Select no more than five colors – a couple for the font, a couple of base colors for the background and one accent color. If you have a logo or brand book, refer to it.

Those who find it difficult to choose colors can use a special service. There are a lot of them, here are some free ones:

• Adobe Color
• ColorCode
• ColrD
• Cohensive Colors
• ColorHunter

Font selection

For the layout of the site you also need a couple of fonts – one for titles, the other for the main text. At most, you can pick up a third if you really need to. What you need to keep in mind when choosing a font:

• Copyright. You either have to buy the font or find one you can use for free. Look for free fonts on Google Fonts, Font Space, 1001 free fonts.
• The right characters and fonts. Sometimes a font doesn’t have italics or bold, or special characters like currencies or the letter “e” are missing. Of course, you can style the font with the built-in tools of Photoshop and add signs from the other, but this violates the integrity of the font and the overall look of the page, and add prosthetics.

Working out

Now you can start directly creating the layout of the site.

1. Create a grid of guides, which will adjust the objects on the page.
2. Partition the page according to the prototype – determine the place for the header, footer, main content blocks.
3. Create some basic elements – an example button, description, header and others you need, and put them outside the workspace. Be able to copy and paste them where you want them.
4. Start working out each area in detail.
5. Don’t forget to draw interactive elements in different states. For example, if a button changes state when you click it or a font increases when you hover it, create separate layers for both states.
6. In one of the next sections, I’ll show you step by step how to create a website layout in Photoshop according to this scheme.

Important! Draw each element on a separate layer and name it logically. Button – button, product name – item name and so on. Don’t forget to group layers logically and give groups names.

Creating a guide

It is a good idea to make a description of the layout of the site for the codifier. In the description you can fix all the main characteristics of the layout:

• colors chosen,
• the size of the grid,
• descriptions of basic elements and so on.

Also add to the description of the elements that may cause doubt in the codifier, such as screenshots of the states of interactive elements with a description of the animation. Describe the typography used: fonts, their colors and sizes, line spacing.

How to create a website layout in Photoshop

I will quickly show you how to create a site layout in Photoshop. We will make the main page of the online store of mugs, it will have a header, blocks with categories of products and footer – everything is simple. The images for the site I will take from the free photobank Unsplash, and you can find somewhere else – for example, in one of the free photobanks in our selection.

Look at what devices people are more likely to come to your site from – phones, tablets or computers. The first thing you need to do is make a version for the most popular version and work out the rest from that.

Create a new file in Photoshop. You can customize it yourself or go to the “For the Web” tab. By default, the program offers a “Custom” layout with a size of 1366 by 4000 pixels, I’ll round up the width a bit to 1380 pixels. This is a common size, fitting the size of your computer or laptop screen. The color model is RGB, the resolution is 72 pixels per inch, and the background is transparent.

Now we set the modular grid. Go to the “View” tab of the top menu and choose “New Guide Layout” there. By default, the program offers to create eight columns with margins and internal indents, but we will make 12 – so it will be more convenient to divide the page into 2, 3, 4 or 6 blocks.

Also set the middle value of 15 pixels (this is the internal gap between columns), the top and bottom field will be set to zero, right and left – 30 pixels. You can choose your own values, but remember that the indents and margins must be a multiple of one digit, such as 5.

Now let’s fill in the background. To do this, use the adjustment layer – it will be easier to change its color if necessary, so you don’t have to fill it all over again. In the “Layers” panel, we choose the circle icon, click on it and choose the “Color” option and specify the desired shade. Now all that’s left is to remove the mask from this layer so that only the color remains.

Don’t forget to rename the layer, preferably in Latin characters, and you can lock it immediately with the lock icon button in the Layers panel.

The next step is to choose the colors. I have already chosen the background image, so we will use the Adobe Color service as a starting point. Go into the service, choose “Extract Theme” in the menu, load the picture and get a few ready combinations. The resulting color codes can be copied.

Done, you can start rendering directly. I’m going to have a small and simple landing page, so I’m not going to work through the block structure, but I’m going to start creating elements right away. If you’re doing something more complicated, it’s better to sketch a schematic first.

The first thing we’ll do is create a header with the company logo and links to other sections of the site. The basis will be a rectangle filled with one of the selected colors. I do not have a logo, so I’ll just write an invented name in the header and create headers for other sections of the site.

Now I will add the main image of the page and write a little slogan on it. Container for the banner, the banner and the text on it grouped in a folder Banner. If you will be placing an image as in my example, leaving no field on one side – be sure to make a mark for the codifier, as the picture should behave when stretching the page width. For example, that it should remain “glued” and the right side will be an empty field, or it should increase with the page.

It’s time to make category blocks, and I’m going to have six of them. In order not to make them too small, I will place them in two rows of three blocks. Given that the layout has 12 columns, one block will take up exactly four columns. I will not work out each block at once, but I will create a template with a gray bar and multiply it into the necessary positions:

Fill the blocks with their pictures and change the text. In parallel, we group the elements so that the picture box, the picture itself, and the caption are in the same subgroup.

At this point, I don’t really like the margins between the blocks – they’re quite narrow, and the photos blend together. To fix this, I will reduce each block by 10 pixels on the left and right. Note that the header elements have also moved to fit the categories: the logo 10 pixels to the right, the “About Us” element 10 pixels to the left.

The only thing left is the footer. Let’s put a form here to collect mail and contact information. To avoid the usual colored background, I found another picture and put it in the footer. And note that the footer elements are also indented 10 pixels from the guide, as are the categories above them. Don’t forget – be sure to group the layers and give them normal names, so that it’s easier for the layout designer to figure it out later.

The remaining height of the canvas can be trimmed and enjoy the result. I’m sure your website layout will come out much cooler :).

How to create a website layout online or in a program

Picked for you five services where you can create a layout of the site online, and one convenient free desktop program.

Wilda

Russian-language online designer, where you can create a layout of the site, document, brochure, banner, and so on. The user chooses one of the templates (for sites there are 16) or works from scratch.

The service has a very simple editor: layouts are built from just six types of elements. There is a picture, a background block, a free-form figure, a logo, text and a line. The editor is connected to a photobank with free images, so you can upload pictures directly when creating a layout.

Price: layouts are created free of charge. You should pay from 150 rubles for one download, or 50 rubles for publishing online. When buying a package plan will be cheaper.

Mockflow

A tool for rapid prototyping sites, designed for UI/UX design. The site layout is composed of ready-made blocks, such as header, product card, banner or “These products were recently searched…” block. These blocks can only be resized, their color or content cannot be edited. Before creating the layout, you need to choose which interface you are going to prototype, this will affect the set of blocks.

Price: There is a free rate for one project of no more than three pages. Then from $15 per month.

iPlotz

A handy, though slightly outdated, online site layout builder. Works on Flash Player, so it can lag, especially on weak computers.

The sense is similar to the Mockflow – there is a set of ready-made elements of the site, which should be dragged over to the work panel, changing only their size. Almost all elements are made in grayscale, color is very little.

There are also two sets of icons, bitmapped and vector, and a set of cursors in the form of “pointing fingers” – apparently, it is designed to create cues coder and programmer, how to click or move a certain element.

Price: free for one five-page project, then from $ 15 per month.

Moqups

In this online layout builder you can make a website, diagram or chart, prepare a business report.

There are 24 website layout templates and the ability to create a layout from scratch. The user is offered to assemble his site from ready-made blocks: text, button, link, radio switch, text entry field, page scrolling, banner and so on. All elements can be customized: change color, size and text on them. If you create a project of several pages, you can link them together to make the site more realistic.

Price: one project with a maximum of 200 elements is available free of charge, then from $16 a month.

Marvel

Another service for creating a website layout online. A nice modern interface, a few tools, but enough to work. There are already ready elements of the site with the ability to edit, shapes – rectangle, ellipse, line, and images with built-in photobank.

And Marvel will also help you simulate a working site even before the layout. How it works: you upload ready-made page layouts to the service and set up their links – for example, select the button area on one page and select another page to go to when you click on that button. As a result you get a simulation of the site or application, where you can “tap” and evaluate the convenience and logic of communication pages.

Price: free for one project without the ability to download the created files. After that, from $12 per month.

Justinmind

A desktop program with extensive features. In the beginning, the user chooses which interface the design will be created for: mobile on Android or iPhone, desktop or tablet. Then the user mixes the page with ready-made components, which can be flexibly customized: change the color, size, text and pictures.

The program compares favorably with similar online services the number of features, even in the free version. You can see a simulation of how the page will look on your device, and export the result in HTML format. The interface is reminiscent of Photoshop – it will be easy for designers to understand. The program accepts files from Photoshop, Sketch and Adobe XD for input.

Price: unlimited free version. The paid ones start at $19 per month and feature teamwork, expanded feature sets, enhanced support, and other bonuses.
Price: there is a free rate for one project of no more than three pages. Then from $15 per month.

Mistakes in the creation of site layout

The most common mistakes in the layout can be divided into two groups – mistakes that affect the perception and the overall “beauty” of the site, and errors due to which the codifier creates the site incorrectly for the ready-made layout.

Errors in design.

When the site economize, they hire a cheap designer or even entrust the case to a non-professional. Then there are the typical mistakes in design that spoil the look of the layout of the site.

Avoid these mistakes:

• Unbalanced color scheme or mismatched fonts.
• The excess of elements – too many blocks, buttons, labels. The visitor is lost on the page and will not perform the desired action.
• Absence of a mobile version of the site.

Errors critical to the layout.

Sometimes the layout of the site is all good, but with the layout of the flaws come out. This happens because there are some unnoticeable mistakes which the codifier doesn’t understand and carries over “as is”. That’s what you should avoid to make a layout perfect:

• Clutter in layers. You need to remove unnecessary layers – hidden, empty. Normalize naming all the remaining ones and grouping them logically. Ideally you should do this at the design stage of the layout of the site, not when handing over, otherwise you will get confused.
• Effects of transparency and overlay. To make a color lighter, just use a different color, but in no case transparency. Don’t apply blend effects – they display unpredictably in different browsers.
• Elements will wander back and forth by a couple of pixels. Align everything strictly to the grid, otherwise the layout designer can simply cut the object, which protrudes beyond the guideline.
• Confusion with indents. Check the indents – they should be expressed in whole even numbers to make it easier for the caster to move them.
• Incomplete files. Attach fonts and all images to the layout – separate archive for fonts, separate for images. If the fonts are on Google Fonts, you can provide links to them.

Creating a layout of the site: what is worth remembering

Layout – a complete model of the future site. It is needed to coordinate the work of the designer, layout designer and programmer, as well as to clearly show the customer the course of the work.

Creating a layout is as follows:

• Terms of Reference
• Drawing a block scheme – a prototype
• Color matching
• Font selection
• Drawing a layout
• A guide on the layout for the codifier

What mistakes should be avoided to make the site layout look good and it was easy to cobble together:

1. Mismatched colors or fonts.
2. The excess of colors, fonts, elements.
3. The lack of a mobile version of the site.
4. Confusion in the layers – in the names, grouping.
5. Presence of transparency and overlay effects.
6. Non-compliance with the modular grid.
7. Random indent sizes, especially fractional.
8. Images and fonts are not attached to the layout in separate files.

To make a layout, you can hire a designer or spend time on your own – there are many free services and programs, just find the right one for you. And when the site is ready, be sure to connect to SendPulse – with us it is easy to collect leads and do the mailing via email, SMS, push, Viber and chat-bots.

Long time ago (about fifteen years ago) almost everybody was making web sites and didn’t care what was under the hood. We designed them with tables and we used all kinds of stuff (div and span in particular) and didn’t care too much about accessibility. And then HTML5 came along, and lo and behold, we were hooked.

Semantic markup – an approach to markup that is based not on the content of the site, but on the semantic purpose of each block and the logical structure of the document. Even in this article has different levels of headings – it helps the reader to build the structure of the document in his head. It’s the same on a website page – only the readers will be a little different.

Why semantics are important

To make the site accessible.

Sighted users can easily figure out at a glance where which part of the page is located – where the header, lists or images are. For the blind or partially sighted, it’s more complicated. The main tool for browsing websites is not the browser, which draws the page, but the screen reader, which reads the text from the page out loud.

This tool “reads” the content of the page, and the semantic structure helps it better determine which block it is now, and the user understands what it’s about. In this way, semantic markup helps more users interact with your site. For example, having headers helps the blind navigate the page. Screen readers have a headline navigation feature, which speeds up familiarity with the information on the site.

To get the site higher in the search engines.

Search engine companies don’t divulge ranking rules, but it is known that having semantic page markup helps search bots better understand what’s on the page and rank sites in search results based on that.

A classic example is the Sapsan train schedule on Google.

The developers of tutu.ru have made a table with the tag table instead of div, and their snippet ended up in the Google search for an important commercial query.

Semantics is prescribed in the standards. Many developers in the old fashioned way use constructs like <div id=”nav”> to denote navigation or other structural elements of the page. Meanwhile, there are several semantic tags in the HTML standard that are recommended for page markup instead of <div> и span. The specification describes the role of each semantic element.

Imagine how much easier it is to read <nav></nav> Instead of <div class="nav"></div>. Or this code. See it and you’ll immediately understand what’s here and why.

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Page Title</title>
  </head>
  <body>
    <header class="main-header">
      <!— Site cap —>
    </header>
    <main>
      <!— Main content of the page —>
    </main>
    <footer class="main-footer">
      <!— Site basement —>
    </footer>
  </body>
</html>

How to mark up a page in terms of semantics

The marking process can be divided into several steps with varying degrees of detail.

• Large meaningful blocks on every page of the site. Tags: <header>, <main>, <footer>.
• Large semantic sections in blocks. Tags: <nav>, <section>, <article>, <aside>.
• The title of the whole document and the headings of the meaningful sections. Tags: <h1>-<h6>.
• Small elements in meaningful sections. Lists, tables, demos, paragraphs and hyphenation, forms, quotes, contact information, and progress.
• Phrase elements. Images, links, buttons, videos, time and small text elements.

I’m not sure what tags to use

There are simple rules for choosing the right tags.

Found the most appropriate meaningful tag – use it.

• For streaming containers — <div>.
• For small phrase elements (word or phrase) — <span>.
• The rule for determining <article>, <section> и <div>:

1. Can you name the section and move it to another site? — <article>
2. Can you name a section, but you can’t put it on another site?— <section>
3. Can’t give you a name? Is it something like “news and photo gallery” or “right column”? — <div>

Exactly what not to do

Don’t use semantic tags for embellishments. That’s what CSS is for.

It may seem that some tags are appropriate to make the page prettier, to move the text around, or to add spacing to it. But just because the browser defaults to displaying tags the way you want them doesn’t mean you have to use them. Let’s look at an example.

There are several mistakes here at once:

1. Tag <blockquote> should be used to highlight citations in text, not just random text selection. It just so happens that browsers have this block highlighted by default, but that doesn’t mean you have to use it that way.
2. Tag <ul> is also used to visually “shift” the text. This is incorrect, because this tag should only be used to denote lists, and second, the tag <ul> only tags can be inserted <li> and nothing else.
3. Tag <p> is used to visually expand the text. This tag is actually used to highlight paragraphs.

And any selection, shift or other transformation of text can be done with CSS.

So use semantic tags for their intended purpose.

Directly design a stylish appearance of the page will do in the second part of the article.

Usually the FAQ page is a long text with lots of questions and answers. This page is looked for when you need more information on how the site works. In this tutorial we will make a stylish FAQ page using CSS3 only, without using JavaScript.

Idea

Help Center Facebook uses a great effect to preview the answer to a question. It displays an excerpt in small, darkened font. And when the visitor clicks on the question, the answer text is enlarged and displayed in full.

In our tutorial, we will create a similar effect using only CSS3.

HTML

Let’s start by marking up the structure of the document:

<section class="faq-section">

    <input type="checkbox" id="q1">
    <label for="q1">Question?</label>
    <p>... An introductory paragraph that will be trimmed ...</p>
    <p>... Additional Information ...</p>
</section>

In the figure above you can see that the label will be the header of the section. But you can put the label in h1 if you want to follow the rules of semantics.

Use label::before to create the triangle on the right.

The first paragraph of each section will be converted into a descriptive answer passage to the question.

Principle of operation

No rocket technology is used here. There is a checkbox trick involved here to bind the elements  <input type="checkbox" id="abc"> и <label for="abc">. And the checkbox itself is hidden from the eyes of the page reader.

CSS

/*Adding fields*/
.faq-section{
        margin: 40px 0;
}
/*Hiding checkboxes and paragraphs*/
.faq-section input,
.faq-section p{
        display: none;
}
/*Showing only the trimmed introduction */
.faq-section label+p{
        display: block;
        color: #999;
        font-size: .85em;
        transition: all .15s ease-out;
        /* Clipping text */
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
}

/*If the checkbox is checked, we show all paragraphs*/
.faq-section input[type=checkbox]:checked~p{
        display: block;
        color: #444;
        font-size: 1em;
        /* Restoring the default clipping */
        text-overflow: clip;
        white-space: normal;
        overflow: visible;
}
/*Styles for the label*/
.faq-section label{
        font-size: 1.2em;
        cursor: pointer;
        background: #eee;
        display: block;
        position: relative;
        padding: 7px 10px;
        font-weight: bold;
        border: 1px solid #ddd;
        border-left: 3px solid #888;
        text-shadow: 0 1px 0 rgba(255,255,255,.5);
        transition: all .15s ease-out;
}
/*Removing text selection when switching*/
.faq-section label::selection{
        background: none;
}
.faq-section label:hover{
        background: #f5f5f5;
}
/*If the checkbox is checked, set the styles accordingly*/
.faq-section input[type=checkbox]:checked~label{
        border-color: #ff7f50;
        background: #f5deb4;
        background-image: linear-gradient(to bottom, #fff, #f5deb4);
        box-shadow: 0 0 1px rgba(0,0,0,.4);
}
/*Label arrow - default state*/
.faq-section label::before{
        content: '';
        position: absolute;
        right: 4px;
        top: 50%;
        margin-top: -6px;
        border: 6px solid transparent;
        border-left-color: inherit;
}
/*Update the arrow on the right*/
.faq-section input[type=checkbox]:checked~label::before{
        border: 6px solid transparent;
        border-top-color: inherit;
        margin-top: -3px;
        right: 10px;
}

Browser support

How about displaying our page in older browsers? That’s a great question. And the answer is an acceptable degradation in appearance:

With the following code, we take care of browsers IE8 and older to preserve our page content for visitors using older tools.

<!--[if lt IE 9]>
02
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
03
    <style>
04
                .faq-section label,
05
                .faq-section label:hover{
06
                        cursor: default;
07
                        background: #eee;
08
                }
09
                body .faq-section p{ /* Increase specificity */
10
                        display: block;
11
                        color: #444;
12
                        font-size: 1em;
13
                        text-overflow: clip;
14
                        white-space: normal;
15
                        overflow: visible;
16
                }
17
    </style>
18
<![endif]-->

Toggling content on and off using JavaScript

Another way to do this would be to keep the answers (dd’s) hidden until the user clicks on the question (dt). Clicking on the dt would dynamically show the answer to the question. Using JavaScript is always a little bit risky, but this would provide a much cleaner interface. Let’s try it.

First we need a script that will hide and show stuff. We could wrap all of our questions in links that would call a JavaScript function to show the answer. But we don’t want to have to go through the whole document and add those in. It could get messy, and there are many opportunities to make mistakes. Instead, what we want to do is call a function when the dt tags are clicked on that would display the dd’s.

The first thing we are going to do is create some classes in our CSS to make things turn on and off. We could do this directly in the JavaScript but this way we won’t have to repeat it and we can re-use the class whenever we want. Put this into your CSS:

.hide {display: none;}
.show {display: block;}

Now we can start the JavaScript. In a new .js file, we will start by finding our questions and answers and puting them into two variables. To do this we will use the getElementsByTagName property. This will put all of the elements in an array (remember that, we’ll need to know that later).

var questions = document.getElementsByTagName('dt');
var answers = document.getElementsByTagName('dd');

Before we forget, we need to put in a link to our new .js file from our HTML page:

<script type="text/JavaScript" src="faq/toggle.js"></script>

Next we will write a function to go through the questions and turn the corresponding answer on when the question is clicked. The function will loop through all the questions (from the questions array variable we already defined), set an onclick handler for each question, and apply a function that will apply the .hide and .show classes to toggle the answer on and off. I have modified this code from BonRouge’s Unobtrusive javascript toggle scripts. It looks like this:

function displayToggle(){
     for (i=0; i<questions.length; i++) { // loops through the questions

        questions[i].onclick=function() { // displays the question 
            on clickvar next = this.nextSibling;
            // if it gets to a non-element node, go to the next 
            while(next.nodeType != 1) next=next.nextSibling; 
            onenext.className=((next.className=="hide") ? "show" : "hide");
         }
      }
}

We want to call this function when the page loads, so we need to add in the following code:

window.onload=function() {displayToggle();}

Great, this does almost everything we need it to. The problem we have now is that all the answers are displayed at the start, and we want them to be hidden. We also want to add some links to display all the answers and hide them all again. I’m mentioning this now because we are going to use the same functions to do both.

The functions we need will take all the answers and turn them on and off all at once. To do this, we will use the answers variable we defined earlier, loop through the array, and set some functions to put in our .show and .hide classes.

Here is the code:

// function for the link that turns them all off
function toggleAllOff(){
     for (var i = 0; i < answers.length; i++) {
        answers[i].className = 'hide';
     }
}
        
// function for the link that turns them all on
function toggleAllOn(){
     for (var i = 0; i < answers.length; i++) {
        answers[i].className = 'show';
     }
}

Now we can put two links in our faq page to turn all the definitions on and off:

<a href="#" onclick="JavaScript:toggleAllOn();">Show all answers</a>
<a href="#" onclick="JavaScript:toggleAllOff();">Hide all answers</a>

Check it out! Hide all the answers, show all the answers. To start the page with all answers turned off, we just need to call the toggleAllOff function in the displayToggle funcction that we’re calling when the page loads, so we need to add one more line to our displayToggle function:

function displayToggle(){
     // calls the toggle all off function 
     // to turn all the answers off when the page is loaded     
     toggleAllOff(); 

     for (i=0; i<questions.length; i++) {  // loops through the questions
         questions[i].onclick=function() {  // shows the answers onclick
             var next = this.nextSibling;
             // if it gets to a non-element node, go to the next one
             while(next.nodeType != 1) next=next.nextSibling; 
             next.className=((next.className=="hide") ? "show" : "hide");
          }
      }
}

Ta-da! A collapsible FAQ page that degrades gracefully and uses proper web standards!

There are just a few more things I need to do to the CSS to make this page look a little nicer. I’ll make my letter smaller, and add some padding around the section headings so they don’t run into the definition lists.

Here is the final result and here is the page in actual use. In the latter example I modified the JavaScript to make the list sections collapsible rather than just the individual questions.