Features of mobile site design
We will talk about mobile devices, which currently occupy a large% of the WAP market (non-OS phones, Symbian and others), we will not talk about Android and iPhone today
Let's look at the phone models and screen resolutions of visitors of one large WAP-portal. As seen among the browsers, Opera Mini leads by a large margin (it needs to devote a whole topic, now we will not consider it), and then ordinary mobile phones with or without an OS. Android and iPhone are not there because of very low%
')
Let's look at the screens. The first two positions are enough: 240x320, 128x160. What does this tell us?
This is the site header:
The third line from the bottom is sometimes not written, but the entire css is copied onto the page into the <style> tag. Why? I learned from the owner of one large portal that the old Nokia cannot handle css as a separate file (but the% of them are very small).
The second below, as you understand, is responsible for the icon of the site. The usual PNG icon of 16x16 pixels is made and renamed to favicon.ico
Have you noticed the word XHTML in the header? This means that you must strictly follow the rules for marking this language, otherwise the consequences will be sad.
All the information that is displayed on the <body> tag must be contained inside the <div>, otherwise we will get a validator error (I recommend this one), of course. It is worth remembering that it is better not to use <div id = "">, the validator will again swear. It should replace the id with class. There may be several classes, which is very convenient for large projects. Why did I talk about the validator? If the site has errors, then be prepared that a certain% of mobile phones will not be able to get to the site
Error example:
Now it is fashionable to make the site a “strip” (200-700px on average), it is possible, but you will not see it from the phone on the 128x160 screen. This is done for beauty, which only the computer will appreciate, but still let's see how to do it correctly (there are sites where the design goes in a strip and aligns with the left edge - it looks wretched):
But it is better to stick to the classic style, because the site is for mobile devices, not computers.
Try not to touch the input properties in css, and if necessary, do it wisely (with the parameter type = text, for example, they make a nice input field, and checkboxes, radio boxes look terrible)
About the combination of colors. Most large projects try to make designs in 2-3 colors. Many colors never spoil the design, if they are well combined. We must remember that on the screen of a mobile phone the design does not look like on a computer. Sometimes it’s very beautiful to see divas who smoothly change color (picture 15-30px high), but the key word, as you already understood, is “smooth”. A lot of browsers themselves “compress” images (even background ones). Imagine what a 20-pixel-high picture looks like with a gradient from #aaa to # 222 in such browsers. I'll tell you - there will be a few lines a couple of pixels high. This spoils the impression about the site design.
In the continuation of the colors and backgrounds. A lot of "craftsmen" do this:
The picture itself is a gradient from #ccc to #bbb. Diva's height is 12 pixels (for example, divs with the “login, registration, forgot password?” Links), but this is how it looks on the computer. What is the second screen expansion?
Perhaps this is obvious, but very often it happens.
In the next topic I will consider real designs and analyze them, because in practice (examples) the material is much better perceived :)
UPD: On account of the fact that css is inserted into the page itself, one person wrote me in ICQ: “CSS inside the page is inserted so that there are as few new connections as possible. Because it takes more time to create a connection than to draw a page. ”
Let's look at the phone models and screen resolutions of visitors of one large WAP-portal. As seen among the browsers, Opera Mini leads by a large margin (it needs to devote a whole topic, now we will not consider it), and then ordinary mobile phones with or without an OS. Android and iPhone are not there because of very low%
')
Let's look at the screens. The first two positions are enough: 240x320, 128x160. What does this tell us?
- logo must be up to 120 pixels wide
- padding and margin should be used within reason (40 pixels from the left is something)
- not a lot of graphics (do you think a phone with a screen resolution of 128x160 will pull a heavy page?)
This is the site header:
<? xml version ="1.0" encoding ="UTF-8" ? >
<! DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd" >
< html xmlns ="http://www.w3.org/1999/xhtml" xml:lang ="ru" >
< head >< title > Domain.com </ title >
< meta http-equiv ="Content-Type" content ="application/xhtml+xml; charset=UTF-8" />
< link rel ="stylesheet" href ="style.css" type ="text/css" />
< link rel ="shortcut icon" href ="favicon.ico" />
</ head >The third line from the bottom is sometimes not written, but the entire css is copied onto the page into the <style> tag. Why? I learned from the owner of one large portal that the old Nokia cannot handle css as a separate file (but the% of them are very small).
The second below, as you understand, is responsible for the icon of the site. The usual PNG icon of 16x16 pixels is made and renamed to favicon.ico
Have you noticed the word XHTML in the header? This means that you must strictly follow the rules for marking this language, otherwise the consequences will be sad.
All the information that is displayed on the <body> tag must be contained inside the <div>, otherwise we will get a validator error (I recommend this one), of course. It is worth remembering that it is better not to use <div id = "">, the validator will again swear. It should replace the id with class. There may be several classes, which is very convenient for large projects. Why did I talk about the validator? If the site has errors, then be prepared that a certain% of mobile phones will not be able to get to the site
Error example:
- not closed <br />, <hr />, <input />, etc.
- the <img> tag is spelled that way <img src = "" alt = "" />
- All information that is displayed inside the <form> tag must be placed in the <div> tag, even if the <form> itself is already inside the diva.
< form action ="" method ="post" > < div > … </ div > </ form >
Now it is fashionable to make the site a “strip” (200-700px on average), it is possible, but you will not see it from the phone on the 128x160 screen. This is done for beauty, which only the computer will appreciate, but still let's see how to do it correctly (there are sites where the design goes in a strip and aligns with the left edge - it looks wretched):
body { margin: 0 auto; max-width: 600px; }But it is better to stick to the classic style, because the site is for mobile devices, not computers.
Try not to touch the input properties in css, and if necessary, do it wisely (with the parameter type = text, for example, they make a nice input field, and checkboxes, radio boxes look terrible)
About the combination of colors. Most large projects try to make designs in 2-3 colors. Many colors never spoil the design, if they are well combined. We must remember that on the screen of a mobile phone the design does not look like on a computer. Sometimes it’s very beautiful to see divas who smoothly change color (picture 15-30px high), but the key word, as you already understood, is “smooth”. A lot of browsers themselves “compress” images (even background ones). Imagine what a 20-pixel-high picture looks like with a gradient from #aaa to # 222 in such browsers. I'll tell you - there will be a few lines a couple of pixels high. This spoils the impression about the site design.
In the continuation of the colors and backgrounds. A lot of "craftsmen" do this:
background: url(img.gif) repeat-x top left #ccc;The picture itself is a gradient from #ccc to #bbb. Diva's height is 12 pixels (for example, divs with the “login, registration, forgot password?” Links), but this is how it looks on the computer. What is the second screen expansion?
Perhaps this is obvious, but very often it happens.
In the next topic I will consider real designs and analyze them, because in practice (examples) the material is much better perceived :)
UPD: On account of the fact that css is inserted into the page itself, one person wrote me in ICQ: “CSS inside the page is inserted so that there are as few new connections as possible. Because it takes more time to create a connection than to draw a page. ”
Source: https://habr.com/ru/post/108498/
All Articles