Какво е отзивчив дизайн

Поздрави читатели на блога на SEOB >

Но трябва да сте наясно, че "мобилността" е много различна - BlackBerry, iPhone, iPad, нетбук и трябва сайтът да се показва правилно на всяко устройство. Какво да правя? Няма да създадете свой собствен уебсайт за всяко мобилно устройство. Има изход, по-точно има няколко от тях и затова предлагам да разгледаме всеки от тях.

Работейки много с дизайна на моите сайтове, разбрах, че осигуряването на правилна работа на сайтове с всички резолюции на екрана на всички възможни мобилни „устройства“ е неразрешимо условие. Затова беше създадено просто и елегантно решение за уеб дизайн, наречено "адаптивно".

Отзивчив и мобилен дизайн

Този дизайн се адаптира към поведението на потребителя и неговата операционна система въз основа на размера на екрана на потребителя, платформата, ориентацията на дисплея и т.н. Всичко тук е толкова сложно, че е по-добре да не навлизате в дебрите на термините, а да го приемете за даденост - работи, добре, това е добре. Да вземем този пример - потребител посещава вашия сайт от iPhone и сайтът автоматично се настройва към разделителната способност на екрана, намалява размера на снимките, премахва флаш елементи и банери. Както в примера по-долу:

Взех този пример от един от моите сайтове, който има инсталиран плъгин за WordPress Mobile Pack. Плъгинът е едно от възможните решения за прехвърляне на сайта към мобилен дисплей. Сайтът може да се превключва както ръчно, така и автоматично. Какво означава?

Друг вариант за адаптивно показване на сайтове е използването на адаптивен дизайн, който не само може да се адаптира към разделителната способност на екрана на вашето устройство. Това е нов подход към разработката на уеб дизайн. Какво е?

Резолюция на екрана

Днес (и вие го знаете много добре) има голямомного резолюции на екрана и ориентации на дисплея. Основните ориентации са портрет или пейзаж, понякога портрет. Но това не е всичко - мобилните устройства лесно променят ориентацията на страницата, когато превключват устройството от пейзаж в портрет.

И собствениците на монитори най-често използват безплатен размер, тоест не цял екран, а колкото е удобно. По този начин резолюцията на дисплея на компютъра може да бъде всякаква. Адаптивният дизайн прави страниците на вашия сайт да се показват правилно и красиво при всяка резолюция на екрана.

Динамични изображения в сайта

Но ако разделителната способност на екрана се промени, изображенията също трябва да се променят, в противен случай те просто няма да се поберат на екрана или ще се показват изкривени. Най-простото решение е да зададете CSS свойството max-width на 100% вместо пиксели.

Адаптивно оформление на сайта

Означава, че стилът ще се зареди и ще работи, ако:

показва се изцяло на екрана (не е за печат и т.н.);
ако максималната ширина на екрана е 480 px.

Можете да зададете произволна ширина на екрана.

Ние опростяваме показването на съдържанието на сайта

Следователно има само един изход - премахване на неосновни блокове и елементи. Така че, ако можете безопасно да поставите банер с размери 980 × 60 px на компютърен сайт, тогава трябва да го премахнете за таблет или мобилна версия. И при размер на екрана 320 px, като цяло ще изкриви целия екран, така че такъв голям банер може да бъде заменен с текстова връзка и т.н.

Сега можем да очертаем основните елементи, необходими за работата на сайта при намалена резолюция на екрана:

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

Например, сега винаги трябва да подчертавате връзки: ако нямате курсор, не можете да го поставите върху връзка и без подчертаване с някои css стилове не е ясно къде стои. Във всеки случай трябва да избягвате да използвате менюто за лявата ръка - десничарят ще държи устройството си в лявата си ръка и може да докосне навигацията с пръсти.

Като цяло има много такива дреболии, но сега не тъгувайте за живота на вашия уеб администратор - адаптивният дизайн все още няма да реши всички проблеми, той просто ще направи потребителя, който посещава вашия сайт, ВАШ потребител.

Примери за различни резолюции с адаптивен дизайн

Като пример, разгледайте този блог на SEOBID.NET. Помислете как ще се показва при различни разделителни способности. Ако знаете как да промените разделителната способност на вашия монитор, можете да се консултирате с мен.

Екран 1366x768 px:

Екран 1024x768 px:

Екран до 640 px:

Както можете да видите, този шаблон повече или по-малко решава проблемите с адаптирането на блога към различни резолюции и само в последния пример (тестван на таблет с вертикален екран) страничната лента не се вижда, но е изрязана толкова спретнато, че основното съдържание не се засяга и е напълно четливо.

Отзивчивото съдържание ще помогне за решаването на проблема с превъртането на много екрани и четенето на голямо съдържание чрез въвеждане на алтернативни заглавия и цитати от статии, които ще се показват правилно на екрана на всяко мобилно устройство (първата снимка в статията). Такава замяна ще ви позволи бързо и удобно да преглеждате съдържанието на блог или отделен запис. И за да направите тази адаптация, трябва да направите няколко промени - само трипрости стъпки.

Откриване на устройство чрез WP Mobile Detect плъгин

Плъгинът за създаване на адаптивно съдържание се адаптира към устройството, от което е направена заявката към вашия сайт.

Плъгинът WP Mobile Detect прави много полезни неща - изпълнява php функции, за да определи кое устройство иска сайтът, коя операционна система ще работи и ви позволява да работите със сайта с помощта на кратки кодове.

Мисля, че няма нужда да обяснявате какво е и колко е удобно. Ето всички примери за кратки кодове, които плъгинът прави. Той няма настройки и няма да видите тези кратки кодове в административния панел, така че ги включвам тук. В същото време функциите, които плъгинът изпълнява:

Какви кратки кодове могат да се използват с този плъгин

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

Като използвате тези персонализирани полета, можете да извлечете максимума от приставката WP-Mobile Detect и нейните кратки кодове. Както можете да видите от екранната снимка, плъгинът има много настройки. Добавете полето "Кратко заглавие" към новата група:

Щракнете върху „Добавяне на нова група полета“ и въведете заглавието „Адаптивно съдържание“. Сега можете да добавите група правила, така че новите полета да се показват на страницата в режим на редактиране.

Добавяме две полета:

Кратко заглавие (short_title) Текст - поле за заглавия, форматирането се задава в режим Без форматиране по-долу в падащите настройки.
Кратък откъс (short_excerpt) Textarea - поле за описания, форматирането се задава в Convert new lines into tags на същото място.

Кратките кодове заедно с плъгина WP Mobile Detect ще направят съдържанието на уебсайта ви еднакво четливо и лесно за навигация във всички видове съвременни уеб медии.сърфиране, от което потребителите могат да разглеждат вашия сайт.

Друга привлекателна функция е, че плъгинът може да добавя различни добавки:

Наистина много от тях са платени, но има и безплатни, които може да са ви полезни. Нека ви напомня: аддонът е допълнение в най-широкия смисъл на думата. Във връзка с приставката Advanced Custom Fields, добавките са разширения за приставката, които се осигуряват от основните му функции. Тоест, като просто вмъкнете кратък код, можете да приложите много допълнителни функции.

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