Подходя к решению проблемы, дизайнер с неизбежностью придет к пониманию того, что весь существующий ныне "мобильный дизайн" основан отнюдь не на документированных стандартах, а целиком и полностью на системе обходных путей, "хаков" и наработок личного опыта. Мобильный дизайн, вместо того, чтобы принадлежать современности, анахроничнейшим образом возвращает нас на 15 лет назад (по уровню интерпретации элементарных элементов кода все мобильные браузеры соответствуют программному обеспечению 1995-97 гг - если вы пытались просмотреть стандартным браузером из дистрибьютива windows95 современные сайты, адаптированные для Netscape Navigator 2.0, то вас ожидал сюрприз), при этом умудряясь позиционироваться как подчеркнуто современное решение, каковым он на деле является не в большей мере, чем "потемкинская деревня", за фасадом коей набрякают горы беспорядочно сметенного мусора.
Это обстоятельство позволяет понять, почему универсальный или адаптированный как к стационарному, так и мобильному считыванию дизайн, стоит ему попытаться выразить что-то более или менее сложное, лавинообразно скатывается к перегруженности кодом и неповоротливости. Соблюсти равновесие между системой обходных маневров и современным стандартом оказывается непосильной задачей, что демонстрируется на примере служб корпорации гугле.
Качественно считываемый на мобильном устройстве сайт должен быть сайтом на редуцированном (желательно без таблиц) html с минимальным использованием каскадных стилей. Лишней трудозатратой, например, станет попытка прописывания в css фоновой картинки: поскольку "современные" мобильные браузеры в любом случае не умеют рендерить ее так, как предписано, рекомендуется забыть о дизайнерском прогрессе как о страшном сне.
Два примера справа на вышеприведенной иллюстрации демонстрируют сближение качества считывания текстовой информации с уровнем, обеспечиваемым распространенными моделями электронных книг или бук-ридеров.
В аспекте "имитации книжной страницы" заманчивым представляется использование печально известных "веб-шрифтов", однако, мы не рекомендуем этого делать. Дело в том, что веб-шрифты, в общем и целом лишенные дизайна, не могут конкурировать с "традиционными" гарнитурами (напр., Verdana или Palatino) и без антиалиасинга, о невозможности которого мы уже подробно писали, представляют собой нечитаемый мусор.
Итак, рассматривая разработанный для стационарного считывания веб-сайт на мобильном устройстве, мы, прежде всего, обратим внимание на общую миниатюризацию, в свете которой любой текст становится нечитаемым, а навигация по сайту невозможной. Чтобы этого избежать, в заголовке страниц вебмастер должен поставить мета-тэг <meta name="viewport" content="width=device-width,user-scalable=false">.
Вторым пунктом преткновения в дизайне сайта становятся графические файлы, габариты которых очень часто превышают размерность мобильного экрана. Здесь на выручку придет прописывание стиля для картинок: img { max-width: 100%; height: auto; }.
Все элементы верстки, для которых назначена ширина, должны быть дополнены стилем max-width, например, "width: 800px; max-width: 100%;".
Одновременно с этим следует переписать все абсолютные значения, например, расстояния до левого края, на относительные (в процентах).
Собственно говоря, если бы мобильные браузеры адекватно понимали html и css, этого было бы достаточно для того, чтобы веб-сайт заслуженно гордился оптимизацией под мобильные устройства. Любые модификации кода, помимо вышеперечисленных, являются компромиссными решениями, прибегая к которым, следует четко сознавать, что их работоспособность написана вилами по воде.
D.A.O. Rating
Комментариев нет:
Отправить комментарий
Примечание. Отправлять комментарии могут только участники этого блога.