How to draw a website for mobile devices?

Good time of day.


I'm an aspiring web designer. Today, my leadership, I was tasked to draw a mobile version of the site. But I don't even know where to start. I sketched out on paper that I want to see it, but how to implement it in photoshope — I have no idea. I would like to ask for your help and advice.


1. What width to create a layout for mobile devices.

2. What width to draw, if I want to look good on retina screens.

3. Can someone share a PSD mockup version of the website for mobile devices, so I relied on him.


On the Internet a lot of information about mobile versions of your website for web designers and programmers. But detailed recommendations for drawing layout for web designers I found.

October 3rd 19 at 02:37
6 answers
October 3rd 19 at 02:39
Will give my five cents...
Start not from the resolution of the target screen - decide what kind of screen your future audience (for example it is possible to consider the 3.5" and above). Then pick a size on your monitor (that 1:1 corresponds to a physical screen). Then draw given that the proportions of the screens can vary, i.e., immediately calculate which blocks will be "reaching" and which are not. The dimensions of the tie to the percentage and not to pixels (half of the screen and the tablet will remain a half but 320 px on a retina display can become very small).
in General...
1. Make regular site considering that the monitor is very small
2. Do not use pixels (replacing them with ratios, percentages, etc.)
3. Consider that clicked a finger and not a mouse (read physical clicking finger)
4. Do not use smooth gradients, and are too close colors (gradient likely "zaprosit" and gamma blue, a little blue is difficult to read in different lighting)
5. Very well-designed navigation (beautiful menu screen on the floor is unlikely someone will appreciate).
All IMHO :)
p.s. You can see the design examples on various sites that sell templates have always represented both mobile and normal version.
What is the technical side of the issue? As Myshko led on a canvas? Like all painted the man clearly. Again, you need to make such a design, the behavior of which will be normal on all the devices that you want to reach (whether it's PDA or not PDA). Take and begin to draw, take the 2 extreme options — and 320x480 2048x1536 (+ landscape/portrait orientation), imagining how it will look one or another element with these permissions/conditions. If you've never done this before, work together with your designer that it will impose. - Uriel.Kilback commented on October 3rd 19 at 02:42
October 3rd 19 at 02:41
Look at jquerymobile.com
October 3rd 19 at 02:43
And access the statistics of visits You have? The same GA at least, to see which come most often from mobile devices and, based on this, start drawing the basic design. Most likely it will be resolution with a width of 320px or so.
October 3rd 19 at 02:45
Use the screen of the iPhone. The web is easy to find the PSD with the finished frame.

For inspiration, for example, view the mobile version of Facebook.
Screen iPhone quietly keeps 1024пх. And then the conversation about the wap / pda version. - Uriel.Kilback commented on October 3rd 19 at 02:48
October 3rd 19 at 02:47
Go to templates bootstrap, and compress the window of any template when it is narrow enough, it turns out the mobile version ) I according to this principle drew its first mobile layout.
October 3rd 19 at 02:49
On the website - to-door is very well made mobile version of the site, view it. I did on the basis of this website. And you can read also htmlbook.ru about how to create such designs websites

Find more questions by tags Design