Layout of letters, a set of snippets

The author of the image MVBen

It finally dawned on Russian customers that the mobile web gained enough momentum to spend money on its support, including in newsletters. More and more people turn to me in order to make up a letter that would look adequately not only at the zoo of all kinds of email clients and webmords, but also on tablets and smartphones.

In the course of work, I have accumulated a few ready-made solutions that I myself now keep at my fingertips and very often use it, which I also want to share with you.

Wrapper

html

text

css

@media only screen and (max-width:600px) {
	#wrapper {
		width:100% !important;
	}
}

We get a letter wrapper at 600px, which will be stretched to 100% width on screens <600px wide.

Text Wrap

The point is simple. We create a plate with a picture cell and an indent cell, which will beat the text from the picture. On mobile platforms, we hide the beat, and we stretch the plate with the picture over the entire width of the container-wrapper.

One small remark. Gmail application on Android does not understand media_queries, and works on a little magic. It will independently stretch the wrapper of the letter across the width of the screen, and the table with the width specified in percent, too. The only cant will be that we cannot hide the beat. But this is not so terrible.

html

css

@media only screen and (max-width:320px) {
	.picture {
		width:100% !important;
		float:none !important;
		display:block !important;
	}	
	.float_fix {
		display:none !important;
	}
}

If you have a more elegant solution, please comment.

Full-width image

Everything is simple here. We set the image to 100% width and make it blocky, and add line breaks before and after the picture.

Centered picture

We do not use blocking, because in some mailers it breaks the alignment. We prescribe media queries to stretch the image on smaller screens.

html

css

@media only screen and (max-width:400px) {
	.picture {
		width:100% !important;
	}
}

Tile

Objective: place six blocks with goods (for example) so that they fall under each other on small screens and stretch depending on the size of the screen.

The original tile element, which we multiply by six elements:

Ссылка
							Текст
						

And CSS for it:

@media only screen and (max-width:480px) {
	.tile {
		width:50% !important;
	}
}
@media only screen and (max-width:320px) {
	.tile {
		width:100% !important;
	}
}

As a result, we get three elements by default, two elements per line at <480px the width of the screen. And a column of elements at a resolution of <320px;

In the end

I ’m sure to quote a badge from a wonderful badoo blog topic in order to understand what media queries you need to register for specific devices. Well, I strongly recommend that you read the material here for a more detailed study.