Layout for mobile devices

general information

Since there are a great many mobile devices, one model can support any HTML / CSS capabilities, and the other way around - either not support or support incorrectly.

But most of the devices of average and even more so hi-end class support HTML / CSS to one degree or another. Thus, the WML language for the development of sites for mobile devices is outdated and almost never used. It is gradually replaced by the generally accepted standard in the development of websites - XHTML / CSS. Encoding is strictly UTF-8 (No BOM).

')

Mobile doctype

Practically everywhere on well-known mobile sites, such as Google , Yandex , DOCTYPE XHTML Mobile 1.0 is used :

     <? 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">

Also, sometimes there are sites with DOCTYPE XHTML Basic 1.1 :

     <? xml version = "1.0" encoding = "utf-8"?>
     <! DOCTYPE html PUBLIC "- // W3C // DTD XHTML Basic 1.1 // EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">

In my opinion, it is preferable to use the first option.

Layout Features

CSS connection

Some devices do not support styles that are included from external files, so there is a recommendation to describe all the styles inside the document itself:

     <style type = "text / css">
         body {
             background-color: # E9E9CC;
             font-family: sans-serif;
             font-size: small;
             }
    </ style>

I’m not sure about this, but it’s possible that compatibility with some outdated mobile devices can be achieved this way. At the same time, for example, the Opera Mini browser copes with this. Layout should be organized in such a way that, if necessary, the content remains readable even if the device cannot connect the styles.

Abbreviated Property Record

There is an opinion that styles like padding and margin should be registered separately, using padding-left , padding-top , margin-right , etc. Similarly, you should do with all the properties that have a short record. For example, the red background color should be better written as background-color: #ff0000; , not background-color: #f00; and certainly not background: #f00; .

Elements Background

It is undesirable to use images as backgrounds, because many devices may simply not support them. If they are still used, then it is necessary to set a suitable color for the background and check how the site will look without an image.

Images

It is advisable to enclose all the images on the <img> and do not forget to add the alt attribute, because loading images on the device can be disabled, and instead you need to output the replacement with text, and finally, we use XHTML. ;-) When preparing images, it is advisable to compress them to the minimum size. When you add an image to a document, you must specify its size with the width and height attributes.

As a result, each image inserted into the document should look like:

     <img src = "image.gif" width = "40" height = "20" alt = "Text replacement" />

Tables

Try to avoid complex, including nested tables, because Some browsers may not cope with their rendering and display porridge instead of a table. Also, the cellpadding and cellspacing attributes cannot be used; they are not included in the DOCTYPE. And in no case should you use tables for page layout. Tables are not convenient to use on small screens: to read a three-dimensional table, you have to use horizontal scrolling, which should also be avoided given that the resolution of the screens of mobile devices is incomparably smaller than that of a desktop monitor.

Lists

On the Internet, I stumbled upon the mention of the fact that some browsers, in particular, the built-in browser on Nokia phones incorrectly display numbered and bulleted lists. Perhaps this is so, but I believe that the use of lists is possible and necessary, because when you turn off styles, the information remains strictly structured and is well perceived by the user.

Fonts

Mobile devices for the most part have very poor font support, so relying on the fact that the text will be displayed exactly the font that was specified in the styles is not worth it. But to indicate at least a headset ( serif or sans-serif ) is still needed. It is advisable to set the font size in relative units or, better yet, specify the font-size property arguments in small , medium , or large values.

Floating elements

Cannot use floating elements. Most browsers simply do not know how to handle them. Those. when creating the layout, try not to use such properties as float , clear , overflow , clip .

Testing

Testing must be done in several modes:

with loading images and styles
without loading images
no loading styles
with completely disabled styles and images

For testing sites, it is convenient to use the Opera Mini emulator, as well as the built-in function in Opera (for the desktop) in the “View” -> “Small screen” menu.

Mobile browsers

Links

Source: https://habr.com/ru/post/40128/

All Articles