Responsive layout is gaining momentum (responsive), recently I did another project with adaptation for different screens. For your readers, who are already starting to move on to this wonderful and complex layout method, I decided to share some of the secrets and tricks that I found when building a site, think, would be helpful.

For those who have not yet heard of such a term as adaptive layout, I can say that such layout can be called obedient human language. This type of layout adapts to all possible device screens from which your visitor came., and lately there are a lot of them, to put it mildly (netbooks, tablets, iphone, Android based devices … ). All these devices have a feature, they work with different screens, but some of them even rebuild individual elements, so for example the iphone is very unhelpful, your design makes your own buttons and form fields on your site.

Adaptive layout – where to begin

Let's talk in order where to start making adaptive layout and what difficulties it can be.

What to use for layout:

I don't think I'm wrong if, I will say that you need to start by learning a simple browser definition using CSS3. That is, so that you can build different styles for different device screens, and your design when narrowing the browser window changed like this, to make it convenient for site visitors to work with it.
Here are actually these styles, they will be enough for you to start:

With the above code, you can set the settings for individual blocks and style them for different device screens., but apart from that you need, so that devices understand, that your site is made for them. This code can help us viewport.

The above code will prevent the user from zooming in or out of your site as they wish., the styles we talked about above should do it for him.

Responsive websites bonus

Search engines are already much better at recognizing adaptive sites and changing the results for them.. That is your site, made according to the rules of adaptive layout, most likely, will be higher for those, who searches for information from mobile devices, than simple and boring sites that need to be reduced and enlarged on the screen, to read something on them.. This conclusion came to me from the experience of developing a website for a law firm and analyzing its statistics. Google and Yandex love convenient sites, but considering, what such sites are 3 – 4 times more expensive, not everyone can afford to order adaptive design and development for this design. The cost is due to the fact that you need to draw a design under 3-4 devices and layout also for different devices, and such CSS frameworks as Bootstrap are far from always able to solve all the tasks that the client came up with ).

Let's talk a little about Bootstrap

The first thing I wanted to say about Bootstrap, do not look for documentation anywhere except the official site, they have documentation there how well described, that hardly anyone can describe better and step by step all the features of this mega-framework. The speed of layout increases significantly, but only if the client needs a simple site without fiction. But when the site is made according to all the requirements of the client, sometimes it's better to leave this framework and start doing everything just manually. The framework is perfect for those, who wants to learn how to make interfaces, e.g. for admin panels, where the uniqueness of the design does not play a greater role, but it has to be comfortable. The backend of the site made on bootstrap turns out to be very convenient and concise, highly recommend.

You can read more about the Bootstrap framework on their official website and you need to start reading from left to right on the main menu, there is nothing superfluous and everything you need.

Texts in adaptive layout

In order for the site to look good on all screens, it is not enough just to rearrange the blocks, change their size and purpose with css frameworks and JavaScript, you also need to remember how the text behaves on different screens. If on the small screen of the phone in 480 pixel text looks good on 12 pixels, then on a larger screen this text needs to be increased, since on large monitors no one looks at the text back to back, and read it from afar. A little digging on the Internet, i found a great plugin written in jqery. The plugin is called FitText and is located here. Все, what do you need to do, is to connect the plugin and call it for the required page elements.

The plugin has one feature, it only works with block elements (block, block-inline).

Problems with adaptive layout:

1. Your styles will look different on iphone, I advise you to get this device for testing when making layout.
2. On the iPhone, the transformation works differently., and different devices. When you expose the 3D rotation of an object in CSS3 = 0 degrees, then the object can mysteriously turn at a certain angle, instead of disappearing.
3. For adaptive layout, a web designer must be trained in all the subtleties and if you know Photoshop, I advise you to stock up on examples of high-quality responsive designs in PSD format, for examples of how to do or not to do. You will also need a mountain of patience and no excuses. (why a developer needs to learn Photoshop or SEO, which I hear more and more). My advice to you from experience, never work with famous designers, which have nothing to do with web design. Had a bad experience and frost on the part of the designer.
4. When working with Bootstrap, you will need to refine the framework if the client needs a layout larger than 1200 pixels wide. Although there is not much work, but there is a lot of trouble on complex projects, swam, we know…
5. Responsive design often needs to be tested in different browsers and even in different versions., the same applies to different devices. For example, on iphone3 and iphone4 the difference is big, less difference between iphone4 and iphone5. You'll need Android devices too, since there are some tricks when selecting a block or writing in a text form. If there is no money to buy a bunch of devices, then you can use special services like this one https://viewlike.us/, but it only resizes the screen and doesn't change the display of elements, how devices do it.

So far, I have not noticed any more difficulties on this, but if you know write I will check and add. Sometimes for some cases you need to determine the type of device before loading the page in the browser, in such cases, I advise you to use a class written in php. The script will help determine the screen size of the site visitor and the device, from which he came before loading the site, server side. Script to detect the user's browser in PHP.

If you need your blocks to change smoothly on the site, you can use CSS3 animation in your styles for all blocks.

If your design does not allow you to make a smooth transformation of all elements on the page, then you can just replace (*) on (any arc element) or disable animation for individual blocks as in the example below.

In this example cancels all possible animations in CSS for block with class .class-block and all its contents.

After reading the article, I think it becomes clear why adaptive design is so complicated and expensive for clients.. Do you want a perfectly tuned website?. Pay better by the hour, and not for a project, since it is difficult to assess the scale of work when it is so confusing and there are a lot of checks. Feel free to take money and know your worth, any work must be paid, so that you still have money left to relax after the project and calm your nerves :lol: .

I think that's enough, but if there is more interesting information on the topic, I will definitely write. If you have your own libraries or plugins for adaptive layout, write in the comments here or in the social. networks, we will add material.

*/