A
A
Artem Grachev2014-12-21 23:01:08
css
Artem Grachev, 2014-12-21 23:01:08

What requirements should a design layout meet for an adaptive website layout?

UPD:
Source for screen width 1920, laid out one to one. If you open it on a 1440 screen, it looks wrong, because it did not adapt to this resolution.
The question is: is it necessary to draw the source for each resolution, as my layout designer says, or can I lay out all the resolutions in one layout?
We are not talking about layout for mobile devices, that is, the page retains its appearance, only the scale should change.

Answer the question

In order to leave comments, you need to log in

3 answer(s)
A
Alexander Florinsky, 2014-12-21
@flor_master

1 - To make sure that the layout designer made the layout correctly - just put a screenshot of the layout page (scale 100%) to the layout in Photoshop (scale 100%) and give the screenshot 50% transparency.
If everything matches, then the layout designer made it right and the designer drew the wrong scale.
2 - Usually in 80% of cases there is no need to draw different designs for each of the resolutions. Exceptions are when the design is on the mob. versions are very different.
3 - it can be difficult to zoom out if the design has a bunch of pictures that the layout designer cut out and used in the layout.
For example, he cut out the magnifying glass icon for the search button. Its size corresponds to the design in the layout. You are asking to reduce the layout scale by 10%.
The layout designer can reduce the size of the button by 10%, but the icon will remain the same large. To do this, he asked you to redraw the layout.
4 - I would most likely reduce the layout myself, and re-cut the pictures, but of course for extra. fee.
5 - And finally answering your question,
It must be drawn on a grid (bootstrap or foundation or any other grid that the layout designer will use).

I
Ivan Goncharenko, 2014-12-21
@lutsyi

We are making a grid-based website for Bootstrap (framework for adaptive layout). For us, the designer specially customized the elements of the layout according to the grid. Bootstrap has 12 stripes, look here - bootstrap-3.ru/css.php
Due to the grid, we saw how we need to make an adaptive without involving a designer to render layouts for mobile and tablet. I personally make up a site for adaptive and I'm far from a designer. And if according to technology, then each view should be drawn, again according to the grid. You also need to look at your layout to finally understand whether you need a design for a tablet and mobile, or you can get by with basic compression, by analogy with most sites. After all, it is not clear what kind of site it is - an online store, a landing page, a blog or a corporate one.

D
Denis Smirnov, 2014-12-22
@Groov3

1. I will correct why drag screenshots to Photoshop, save design.jpg, throw it in the root of the page, go to it, download Crosspixel in Chrome and click on its icon once - voila.
2. If your design is 960px wide, then everything is fine and you are satisfied with all desktops. But in your case, as I understand it, the width is 1920px. This means that you either forget about the most popular resolutions on the Internet (1366px), or redo the layout. Separately - under the forgotten part of desktops, and, perhaps, one more under mobile phones.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question