7 Рад по якісної верстки шаблону сайту
Я вже писав про основні правила дизайну сайту для дизайнерів, тобто яким повинен бути дизайн з точки зору верстки. Тепер прийшов час підкрутити гайки і верстальщикам.
Будь-верстальник, коли бере роботу під свою відповідальність повинен дотримуватися деяких правил, щоб шаблон був якісним як з точки зору відвідувачів, так і з точки зору пошукових систем.
Отже, які ж ці правила? Розберемо їх за сім кроків.
1. Макет сайту.
Мінімальна ширина макета 1000 пікс, не залежно, від того який тип макета у нас - фіксований або гумовий. Чому саме 1000 пікс? Ширина макета повинна підлаштовуватися під популярне дозвіл монітора і бажано без появи смуги горизонтальної прокрутки (особисто я її не люблю). На сьогоднішній день це - 1024 x 768 пікс. Віднімаємо з ширини вікна браузера смугу вертикальної прокрутки і отримуємо шириною 1000 пікс. При зменшенні або збільшенні вікна браузера все повинно виглядати також красиво, тобто елементи сайту не повинні ні куди розпливатися або наїжджати один на одного. Макет сайту повинен бути гнучким - легким рухом руки перетворюємо фіксований макет в гумовий і навпаки. Робиться це приблизно так: створюється загальний каркас (контейнер) і всередину нього кладуться вже інші блоки (шапка сайту, ліва і / або права колонки, меню і т.д.). Далі через файл стилів оперуємо вже мінімальною шириною основного контейнера.
Нижній блок (підвал) сайту з лічильниками і копірайтами завжди повинен бути притиснутий до низу. Перевірити це можна, натиснувши на кнопку навігації Ctrl + прокручуючи вниз коліщатко миші. Дозвіл макета буде збільшуватися так, як на моніторі з високою роздільною здатністю екрану. Щоб повернутися в звичайний режим натисніть комбінацію клавіш Ctrl + 0.
Що стосується коду, то верстка повинна бути повністю на дівах або як кажуть блокова верстка. Даний пункт взагалі треба було поставити на перше місце, тому що на мій погляд, верстка на таблицях давно вже канула в минуле.
Читайте також: Enquire.js - створюємо адаптивні сайти легко
3. Кросбраузерність.
Зверстаний макет повинен однаково виглядати у всіх популярних браузерах і не забуваємо про старі версії. Основні браузери, під які я «заточую» свої макети це - Firefox, Opera, Google Chrome, Safari, Internet Explorer 7, 8, 9. Для 6-го ИЕ (Internet Explorer) ставлю заглушку. Коли користувач заходить на сайт, за допомогою ІЕ 6.0, то для нього відкривається сторінка з інформацією про те, що даний браузер застарів і що пора оновлюватися до більш сучасних і нижче пропонуються посилання на скачування популярних браузерів.
Взагалі, цього кроку я пропоную приділити належну увагу, тому що користувачів багато і багато з них користуються різними версіями, а виглядати має всі однаково. Крива верстка може стати однією з причин, по якій відвідувач може покинути сайт.
4. Графіка.
Читайте також: Основи семантичної верстки на HTML5
Перевірити скільки у вас важить сторінка після верстки ви можете, скориставшись плагіном Firebug для Mozilla Firefox. Відкрийте Firebug, перейдіть у вкладку «Мережа» і обновіть сторінку. В самому кінці списку ви побачите кількість запитів і загальний обсяг сторінки.
5. Суворе відповідність макету PSD.
Ваш зверстаний шаблон, повинен строго відповідати psd-ісходнику. Дизайнер можливо на промальовування одного елемента витратив якийсь n-ну кількість часу, а ви взяли і все зіпсували - зробили як вам зручно. В крайньому випадку, якщо у вас щось не виходить ви можете проконсультуватися з цього приводу з дизайнером, а також з менеджером проекту або з самим замовником.
6. Відповідність стандартам W3C.
Верстка сайту виконується відповідно до деякими стандартами, випущеної консорціумом Всесвітньої павутини (W3C). Дана організація займається розробкою і впровадженням технічних стандартів web-розробок. Так ось, ваш зверстаний дизайн повинен дотримуватися цих стандартів або як ще кажуть пройти валідацію. Перевірити шаблон на відповідність допоможе спеціальне програмне забезпечення, яке називається валідатор.
Чому так важливо, щоб код сайту був дійсним?
По-перше, валідний і красивий код, який відповідає всім стандартам, швидше обробляється браузером і верстка буде відображатися однаково в усіх браузерах. Адже розробники браузерів дотримуються стандартів W3C при розробці свого продукту. Уявіть, що кожен розробник буде писати коди по своєму. Тоді точно буде творитися повний хаос.
По-друге, пошукові системи можуть негативно ставиться до сайтів, код яких містить помилки. Чим більше ваш код відповідає політиці консорціуму W3C, тим лояльніше до вас будуть ставитися пошуковики. Тому приділіть цьому аспекту увагу для просування сайту в пошукових системах.
Найбільше валідатор може «лаятися» на старі теги, незакриті, неправильно оформлені і т.д.
Що хотілося б додати з приводу стандартів W3C, так це те, що дотримуватися строго цим правилам вас ніхто не примушує. Дані стандарти носять рекомендаційний характер. Але наслідки від їх недотримання будуть висіти на вашій совісті.
7. Перевірка на наявність помилок.
Перед здачею шаблону замовнику обов'язково перевірте його на наявність помилок. Помилки можуть бути різні. Зазвичай користувач їх може не помітити, а ось якщо озброїтися плагіном Firebug, то їх все можна відстежити, перейшовши у вкладку «Консоль».
У мене бувало часто, наприклад, створю таблицю стилів, підключу її через імпорт, а потім в ході розробки виявиться що вона не потрібна. Взяв, та видалив її, а підключення то залишилося. Користувач це не бачить, втім, як і розробник, а ось браузер і пошукові системи все бачать. Так, що стежите, щоб у вас не було битих шляхів до файлів.
Ну ось в принципі і все що хотів сказати. Всім удачі! Бувайте усі!
Заур Магомедов
У мене ви можете:
Замовити верстку Замовити сайт під ключ