How to draw a website for mobile devices?

Question

Design

Good day.
I am a beginner web designer. Today, my leadership, I was given the task of drawing a mobile version of the site. But I don't even know where to start. I sketched on paper what I want to see there, but I have no idea how to implement it in photoshop. I want to ask for your help and advice.
1. With what width to create a layout for mobile devices.
2. With what width to draw, if I want the site to look good on retina screens.
3. Can someone share the PSD layout of the mobile version of the site so that I can refer to it.
There is a lot of information on the Internet about mobile versions of the site for layout designers and programmers. But I still haven't found detailed recommendations on how to draw a layout for web designers.

Answer 1

I’ll give my two cents…
Don’t start from the resolution of the target screen - decide what kind of screen your future audience has (for example, you can consider 3.5 "and above). Then choose such a size on your monitor (so that 1: 1 corresponds to the physical screen). Then draw taking into account that the proportions of the screens can change, i.e. immediately calculate which blocks will “stretch" and which will not. Tie the sizes to percentages and not to pixels (half of the screen will remain half on the tablet, but 320 px on the retina display can become sooo small) in
general…
1. Make a normal site assuming that the monitor is very small
2. Don't use pixels (replacing them with ratios, percentages, etc.)
3. Keep in mind that they are clicking with a finger and not with a mouse (read the physical area for pressing a finger)
4. Do not use smooth gradients and too close colors (the gradient is likely to “stripe”, and a gamma made in blue, a little blue will be difficult to read in different lighting conditions )
5. Think over the navigation very well (a beautiful menu on the floor of the screen is unlikely to please anyone).
All IMHO :)
ps You can see design examples on various sites selling templates, both mobile and regular versions are already presented everywhere.

Answer 2

Look at jquerymobile.com

Answer 3

Do you have access to visitor statistics? The same GA, at least - to see what resolution they visit most often from mobile devices and, based on this, start drawing the main design. Most likely it will be resolutions 320px wide or so.

Answer 4

Take the iPhone screen as a basis. It is easy to find a PSD with a ready-made frame on the web.
For inspiration, for example, look at the mobile version of VKontakte.

Answer 5

Go to the bootstrap templates, and shrink the window of any template - when it is narrow enough, you get a mobile version) I drew my first mobile layout according to this principle.