Най-добри практики за отзивчив уеб дизайн

от Bradley Nice, мениджър на съдържание в ClickHelp.com - инструмент за документация за софтуер

Google официално препоръча отзивчивия уеб дизайн като техния предпочитан метод за изграждане на мобилни уебсайтове. Ако имате уебсайт или блог, време е да помислите да преминете към отзивчив дизайн, вместо да поддържате отделни уебсайтове, удобни за мобилни устройства и таблети.

Ако сте нови в концепцията за отзивчив уеб дизайн (RWD), ето най-често срещаните въпроси, които може да имате около тази техника.

Защо трябва да превключа уебсайта си към RWD?

Вашият уебсайт изглежда страхотно на екрана на работния плот, но може да не е вярно, когато вашият сайт се гледа на смартфон или таблет. След като направите дизайна отзивчив, уебсайтът ще изглежда добре (и четим) на всички екрани.

С отзивчив дизайн можете да създадете един дизайн и той автоматично ще се адаптира според размера на екрана на мобилното устройство. Този подход предлага множество предимства:

  • Това спестява време и пари, тъй като не е необходимо да поддържате отделни уебсайтове за настолни компютри и мобилни телефони.
  • Отзивчивият дизайн е подходящ за SEO на вашия уебсайт (класиране в търсенето), тъй като всяка страница на вашия сайт ще има един URL адрес и по този начин сокът от Google се запазва. Не е нужно да се притеснявате за ситуации, при които някои сайтове се свързват към вашия мобилен сайт, а други - към вашия работен плот.
  • Отчетите ви в Google Анализ ще нарисуват по-добра картина на използването на вашия сайт, тъй като данните от потребителите на мобилни устройства и настолни компютри ще бъдат консолидирани.
  • Същото ще бъде вярно и за статистическите данни за социалното споделяне (Facebook Likes, Tweets, +1), тъй като мобилните и настолните версии на вашите уеб страници ще имат същия URL адрес.
  • Чувствителните дизайни са по-лесни за поддръжка, тъй като не включват никакви компоненти от страна на сървъра. Просто трябва да промените основния CSS на дадена страница, за да промените нейния външен вид (или оформление) на определено устройство.

Какво трябва да знам, за да започна с отзивчив дизайн?

Отзивчивият дизайн е чист HTML и CSS. Създавате правила в CSS, които променят стила въз основа на размера на екрана на устройството на потребителя.

Например, можете да напишете правило, което гласи, ако размерът на екрана на потребителя е по-малък от 320 пиксела, не показвайте страничната лента или ако размерът на екрана е по-голям от 1920 пиксела (широкоекранен десктоп), увеличете размера на шрифта на тялото текст до 15px.

Как да проверя дали определен уебсайт използва отзивчив дизайн?

Това е лесно. Отворете този уебсайт във всеки браузър за настолни компютри и оразмерете него. Ако оформлението на сайта се промени при преоразмеряване, дизайнът е отзивчив.

Ако продължа с подхода на отзивчивия дизайн, дали уебсайтът ми ще работи с по-стари браузъри?

Най-вече да. RWD използва CSS3 медийни заявки и HTML5 (за по-добра семантика), които не се поддържат в по-старите версии на IE. Съществуват обаче базирани на JavaScript решения - respo.js и модернизиране например - които носят силата на CSS3 и HTML5 на по-стари браузъри, включително IE6.

Чувствителният дизайн играе ли добре с рекламни мрежи като Google AdSense?

Ако използвате реклами на уебсайта си, трябва внимателно да изберете форматите, тъй като широките единици (като 728 × 60 пиксела с класация) може да не се поберат на 320px мобилен екран. Предпочитам да използвам стандартни правоъгълни единици (като 300 × 250), тъй като те лесно се побират на екраните на смартфоните и широкоекранните настолни компютри.

Има хиляди мобилни устройства. Какви резолюции на екрана трябва да поддържам отзивчивия ми уебсайт?

Бих препоръчал да зададете точки на почивка за най-малко следните огледи във вашите CSS3 Mediaqueries - 320px (пейзаж на iPhone), 480 px (портрет на iPhone), 600px (Android таблети), 768px (iPad + ~ Galaxy Tabs) и 1024px (iPad пейзаж и настолни компютри).

Как да започна с отзивчив уеб дизайн? Някакви добри уроци?

Ето онлайн ресурси, които ще ви помогнат да започнете:

Уебсайтове: Net Magazine, Smashing Magazine, CSS Tricks и Уеб дизайнерска стена

Видео уроци: YouTube, Net Tuts

Презентации: Палуби PowerPoint

Подкасти: Shop Talk, 5by5 Web Show и The Industry

Twitter: @RWD, @NetMag и @SmashingMag

Какви са недостатъците при използването на отзивчив дизайн?

  • Допълнителни килобайти към вашата уеб страница, тъй като те ще трябва да изтеглят CSS стилове и JavaScript файлове, които иначе бяха ненужни.
  • Изображения. Не искате да показвате изображения с по-висока разделителна способност на мобилния си сайт, но това е трудно постижимо с отзивчив дизайн (освен ако не прибягвате до решение на страна на сървъра като Adaptive Images и Sencha.io).
  • Усилия да добавите отзивчив слой към съществуващия си уебсайт. Понякога има по-смисъл да започнете от нулата, а не да правите съществуващия уебсайт с фиксирана ширина.

Може също да ви харесат: Отзивчиви оформления Безплатна EBOOK

Приятен ден!

Брадли Ница,
Content Manager на ClickHelp.com - най-добрият онлайн инструмент за документация за доставчиците на SaaS