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

Адаптивен дизайн

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

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

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

  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, колонен


Съдържанието на статията се придържа към нашите принципи на редакторска етика. За да съобщите за грешка, щракнете върху тук.

3 коментара, оставете своя

Оставете вашия коментар

Вашият имейл адрес няма да бъде публикуван.

*

*

  1. Отговорен за данните: Мигел Анхел Гатон
  2. Предназначение на данните: Контрол на СПАМ, управление на коментари.
  3. Легитимация: Вашето съгласие
  4. Съобщаване на данните: Данните няма да бъдат съобщени на трети страни, освен по законово задължение.
  5. Съхранение на данни: База данни, хоствана от Occentus Networks (ЕС)
  6. Права: По всяко време можете да ограничите, възстановите и изтриете информацията си.

  1.   Дидак Риос каза той

    Има неща, с които не съм много съгласен.
    В точка 5 ... тъй като 200px = 15,38% и следващите ... това сравнение на референтите не може да се направи без родителска мярка, размерът на пиксели не е относителна мярка като проценти!

    Посочете изображенията с ширина: 100% грешно, не мисля, че трябва да е препоръка. Изображенията ги определят по-добре с тяхната ширина и височина, така че сървърът отнема по-малко време за обработка на информацията (не е необходимо да изчислява нейния размер) и подобряваме скоростта на зареждане на страницата (което е много важно в адаптивната или отзивчива мрежа дизайн).

    Вече бих включил, макар че става въпрос за нос ... изображенията за екрани на ретината. Ако искаме да направим реагиращ уеб дизайн, е задължително да използваме изображения за показване на ретината, тъй като висок% от изгледите на мобилни устройства и таблети използват тези екрани. Така че няма смисъл да полагаме усилия в дизайна им с половин газ.

    Добре за останалите

    1.    Дидак Риос каза той

      В точка 5 те ви поставят в контекст и ви разказват за общо оформление от 1300px с 3 колони, една от 200, 300 и 1000.

      Ако го предадете на проценти, в техния случай те са както казвате, 15,38% ((200 * 100) / 1300) (десетично отдолу, международна система: P)

      Но ако говорим за оформление 500px и имаме 3 колони, една от 200, друга от 200 и друга от 100px, процентите вече не са еднакви, в този случай 200px = 40% ((200 * 100) / 500)

      Те биха били: 200px = 40% и 100px = 10%

      Хайде, както казах, те не са препратка, каквато посочвате, те са само препратка към 1300px оформление.

      отношение на

      1.    Lua louro каза той

        Какъв провал, вие сте абсолютно прав в света! Благодаря отново ;)

bool(вярно)