Адаптивният дизайн (отзивчив дизайн)

Потребителите, които имат достъп до Интернет чрез таблети и мобилни телефони, се увеличават. Това, както вече знаете, означава, че не е достатъчно просто да проектирате добра уеб страница, която изглежда добре на нашия компютър: тя също трябва да се вижда на всяко мобилно устройство. Проблемът? Различни размери на екрана и резолюции. Ето защо е толкова трудно да се направи дизайн, който да се адаптира правилно към всички медии (известните отзивчиви дизайн, преведено като адаптивен дизайн).

Ето няколко съвета, които трябва да имате предвид, когато правите дизайн с тези характеристики. Обърни внимание!

Съвети за адаптивен дизайн

1. Направете прост шаблонПод просто нямам предвид скучно. Говоря за структура HTML на вашия уебсайт: колкото по-ясен е, толкова по-добре. Имайте предвид, че компютърният екран може да побере три вертикални колони; на екрана на мобилен телефон, ще поставите само един. Помислете за това и как ще преместите елементите.
2. Премахнете всичко ненужноИзбягвайте jQuery ефекти, Flash анимации и всякакъв друг код, който забавя зареждането на страницата ви. Колкото по-малко съдържание от този тип имате, толкова по-бързо ще се зареди мрежата.
3. Определете стил css за всеки "размер"Създайте tiny.css, small.css и big.css (например), който се изпълнява въз основа на устройството, на което се гледа. Например:
   

   @import url (tiny.css) (минимална ширина: 300px);

   @import url (small.css) (мин. ширина: 600px);

   @import url (big.css) (min-width: 900px);

4. Най-използваните резолюции320px/480px/720px/768px/900px/1024px
5. Направете своя шаблон ГЪВКАВВинаги, когато можете, работете с проценти вместо с фиксирани суми. Ето някои референтни еквиваленти: 200px = 15'38% / 300px = 23'07% / 800px = 61'5384615384%
6. Типография По-важно е от всякога Понякога екранът на вашето устройство може да бъде толкова малък, че всичко, което виждате на него, е текст. Ето защо трябва да подбираме много внимателно най-добрите шрифтове на нашия сайт, така че когато те намаляват размера си, да не губят четливост. Освен това трябва да знаем как да комбинираме по-неутрални шрифтове с други с личност, която придава на мрежата необходимия характер. Следователно първият съвет е, че отделяте време за избор на шрифтовете, които ще използвате.
7. Употреба висококачествени изображенияС намаляването на пространството изображенията ще го придружават. Изберете тези, които не губят качество при намаление и които работят по същия начин, когато се мащабират. Изображение с ниско качество ще направи вашия уебсайт да изглежда зле.
8. Че изображенията ви винаги се виждат пъленПредотвратете отрязването на вашите снимки, като добавите кода img (width: 100%;) във вашия css. По този начин казвате на устройството да преизчисли височината, която трябва да даде на изображението, така че ширината му да може да се види сто процента.
9. Всички ниски същия URL адресЗабравете за поддомейни като www.mysite.com/mobile, тъй като един и същ файл index.html в основната папка ще работи за всички устройства (ако правите адаптивния дизайн правилно). Вече знаете предимството: колкото по-малко поддомейни, толкова по-бързо ще бъде зареждането на страницата.
10. Възползвайте се от опорите: Бъдете въображаеми Не е същото да получите достъп до уебсайт от настолен компютър, отколкото от iPad или мобилен телефон. С първата ще се ориентирате спокойно и спокойно. С последното ще го направите в празен час и ще затворите прозореца веднага щом ви омръзне. Възползвайте се от тези условия, за да забавлявате потребителя и да го накарате да се забавлява в тези няколко минути, които той ще ви посвети. Може би, когато се прибере, той ще реши да ви посети по-спокойно.
11. Вдъхновете се В дигиталните публикации ще се чудите защо този съвет. Много лесно: цифрови списания (добри) знаят как да се възползват от поддръжката и дизайнът им е много интелигентен. Вдъхновете се от тях и направете уебсайт, който е трудно да напуснете.

Повече информация - Цифрови списания

Източник - Сплио, 960.gs, колонен