Як зробити мобільний сайт

maque.org.ua - Українською про мобільні сайти

Нещодавно я отримав прохання зробити допис про те, як створити мобільний сайт. Тобто сайт для мобільного Вебу. Чесно кажучи, я й сам подумував щось таке утнути. А тут ще й як раз прохання відповідне. Саме про те, як зробити мобільний сайт і йтиметься у сьогоднішньому дописі.

Цікаво те, що усе дещо складніше, ніж може здатися на перший погляд. Особисто у мене було дещо спрощене розуміння того, як робляться сайти для Всемережжя (Вебу). Річ у тім, що є дуже багато особливостей, на які треба зважати, коли робите мобільний сайт. На жаль, формат, у якому я пишу дописи не дозволяє розглянути усі ці особливості, але я надам усі посилання, за яким можна буде знайти відповідну інформацію. Якщо цей допис буде популярним і існуватиме попит на подібного типу інфу, то я або доповнюватиму цей допис, або ж зроблю інший, де цю тему буде розглянуто докладніше.

Мобільні сайти
Мобільні сайти

Я просто покажу, як зробити найпростіший шаблон для мобільного сайту, та поясню основні принципи створення мобільних сайтів. Цей допис не претендує на вичерпність.

Аби братись за створення мобільного сайту, потрібні основи HTML, бо без них буде дещо важко зрозуміти, про що йдеться. Щоб процес створення шаблону був простим та доступним, я раджу використовувати Adobe Dreamweaver.

Створення найпростішого шаблону для мобільного сайту

  1. Запускаємо Дримвівер
  2. Вибираємо HTM документ
  3. Тепер йдемо до випадного меню «Modify» і вибираємо «Page Properties»
  4. Тут йдемо до вкладки «Title/Encoding» і вибираємо опцію «XHTML Mobile 1.0»
  5. Зберігаємо документ (ctrl-S)

Тепер перемикаємось у Дримвівері на режим «Code» і пройдемось по коду, що там з’явився .

Вгорі першими двома рядками у нас є:

[code lang=”HTML”]


[/code]

Тут слід зауважити наступну частину скрипту «XHTML Mobile 1.0». Вона означає, що документ створюватиметься для версії XHTML Mobile 1.0. Оскільки сучасна версія XHTML Mobile вже 1.2, то ми відповідно маємо вказати її замість XHTML Mobile 1.0. Отже, скрипт має бути таким:

[code lang=”HTML”]


[/code]

Решта коду на цих двох рядках виходить за межі поставленої мети допису, тому про нього говорити не буду. У корисних посиланнях знайдете кілька цікавих джерел з цього приводу.

Далі йде стандартний код для HTML документів:

[code lang=”HTML”]


Untitled Document




[/code]

Про http-equiv можна почитати ось тут тиць.

У title вказуємо назву документа. Наприклад:

[code lang=”HTML”]
Моя мобільна сторінка
[/code]

Ну і тепер між мітками body можна писати свій скрипт для мобільного сайту.

Як вже згадувалось, ми просто зробимо спрощений шаблон, на який можна буде згодом чіпляти усілякі «іграшки» (зображення, CSS тощо).

Пишемо заголовок для нашої сторінки (заголовки та підзаголовки повинні бути у теґах h1, h2 тощо).

[code lang=”HTML”]

Вітаю на сайті

[/code]

Можна також зробити підзаголовок

[code lang=”HTML”]

(це мобільна версія сайту)

[/code]

І тепер можна розміщувати текст між мітками p:

[code lang=”HTML”]

Це простий шаблон для мобільного сайту.

[/code]

Для створення меню використовуємо нумерований список , куди вставляємо відповідні посилання:

[code lang=”HTML”]

  1. Yahoo!
  2. Google
  3. Bing

[/code]

Також використовується атрибут accesskey, який дозволяє приладам з клавіатурою вибирати опцію меню, натиснувши на відповідну клавішу. Для приладів з сенсорним екраном цей атрибут втрачає сенс, але наразі не усі смартфони та мобільні телефони загалом з сенсорними екранами.

Ось так можна вставити зображення:

[code lang=”HTML”]

uatemplates.com лого

[/code]

Зауважте, що для нашого зображення вказано, як висоту , так і ширину. Також потрібно обов’язково вказувати альтернативний текст (alt).

Остаточний код повинен виглядати так:

[code lang=”HTML”]




Моя мобільна сторінка

Вітаю на сайті

(це мобільна версія сайту)

Це простий шаблон для мобільного сайту.

  1. Yahoo!
  2. Google
  3. Bing

uatemplates.com лого


[/code]

Отже, використані у цьому шаблоні основні принципи:

  • використовуємо XHTML MP DOCTYPE
  • заголовки та підзаголовки у теґах h1, h2 тощо
  • текст між мітками p
  • для створення меню використовуємо нумерований список з атрибутом accesskey
  • для зображення вказано, як висоту , так і ширину. Також потрібно обов’язково вказувати альтернативний текст (alt).

Ось такі основні принципи та підходи у цій царині. Чекаю на Ваші зауваження та питання.

Корисні посилання та використані джерела:

1.How to Design and Build a Mobile Website
2.How To Build A Mobile Website
3.How To Make Your Website Mobile
4.How to Simply Create Your Own Mobile Website
5.How To Create a Mobile Website
6.Create a Mobile Site
7.How to Make a Web Page Mobile
8.How to make a mobile version of any website or blog with mobify

Поставить пластиковые окна Киев. Приобрести металлопластиковые окна Киев по сходственной цене. Продажа металлопластиковых и алюминиевых окон REHAU (Рехау) в Киеве.

You may also like