Адаптивният дизайн на уебсайт е удобна система за показване на един и същ уебсайт на различни видове устройства онлайн. Казано с прости думи, това е възможността да видите една уеб страница на лаптоп, смартфон и други джаджи.
Отзивчивостта на мрежата се превърна в необходимост, откакто хората се сдобиха с джаджи с интернет в различни формати. Компаниите, онлайн магазините и дори просто информативните сайтове се стремят да угодят на аудиторията си, като се адаптират към нея по всякакъв възможен начин. Отзивчивият дизайн решава проблема с удобството, затова е незаменим работен елемент.
Характеристики на отзивчивия уеб дизайн
Удобството на дизайна се характеризира с няколко основни критерия.
- Размер. Отзивчивият дизайн на уебсайта трябва да има малки разлики при показване на страницата на различни устройства, така че размерите на изображенията, текста и другите разглеждани елементи трябва да съответстват на размерите на самите устройства. За да направят това, уеб разработчиците адаптират дизайна, така че да има множество версии на изглед.
- Адаптиране на съдържанието. Материал, който изпълва сайта (изображения, видеоклиповеи други мултимедийни елементи) също трябва да съответстват на необходимите разделителни способности на екрана, без да се губи качеството на дисплея.
- Гъвкавост на дизайна. Включване в разработката на елементи, които ви позволяват бързо да коригирате дизайна на сайта, когато промените уеб страницата, която разглеждате. Например, потребителят превърта страницата нагоре и надолу, навигира през различни секции или променя позицията на екрана от вертикална към хоризонтална и обратно.
- Опростете артикулите по устройство за по-добра използваемост.
- Скриване на маловажни блокове на по-малки екрани.
Основи
Изграждането на уеб сайт определено е свързано с езиците за програмиране, защото просто не можете без тях. Използвайки HTML и CSS, браузърът разпознава композицията и реда на обектите (текстове, илюстрации, видеоклипове) - така се формира сайтът.
CSS е отговорен за цветовете, стиловете, размерите, шрифтовете, подравняването, запълването, фоновите елементи, формите и т.н. HTML е отговорен за цялостното съдържание и структура на сайта. По този начин уеб ресурсът е изграден в съвкупността от двата най-важни метода за описание.
CSS, от друга страна, е незаменим инструмент за проектиране. Има голям набор от функции, които превъзхождат HTML:
- Осигурява последователност на дизайна на множество страници, външен вид на сайта и контролира показването на HTML документи.
- Дава ви възможност да правите дизайн и съдържание едновременно.
- Прилага множество стилове и възможност загледане на различни устройства.
- Взема сложни дизайнерски решения.
- Характеризира се с висока скорост.
За да разработите уебсайт, трябва да знаете някои основни концепции.
CSS селекторът се обозначава с името на стил, който дефинира свойства и опции за форматиране. Той казва на браузъра към кой конкретен елемент се прилагат свойствата.
Имотът е структурна единица. Той дефинира външни параметри (размер, местоположение, цвят, форма и т.н.) и се изразява в специфичен код.
Има набор от дефинирани CSS свойства, които описват един обект по външен вид и местоположение.
Заедно тези елементи образуват следната схема:
Селектор { свойство1: стойност; свойство2; стойност }.
Размери и резолюции на оформлението
Разработката на дизайна започва с подготовката на оформлението във Photoshop или други графични програми. За удобство в платното се въвеждат специални маркировки на модулната решетка, спазват се специални отстъпи. Така уеб дизайнерът показва на дизайнера за оформление принципите на структуриране на бъдещия сайт и правилното подреждане на уеб елементите.
Отзивчиви резолюции и размери за уеб дизайн за основните типове устройства:
- Този дизайн се придържа към принципа на започване на работа с мобилно разрешение. Оформлението за смартфона е създадено в размер 460 × 960 px.
- Размерът на оформлението на таблета е 768 × 1024.
- Размерът на бележника е 1280 × 802.
- Размерът на компютъра е 1600 × 992.
В мобилната версия на сайтатрябва да бъде възможно най-опростен, като същевременно се запазват всички основни функции. Ако оформлението се подготвя за онлайн магазин, с цялото опростяване в употреба, то трябва да има основно описание, продуктов каталог, опция за поръчка, пазарска количка и т.н. - всички необходими елементи за пълноценно функциониране, както при пълноформатно гледане на компютър. Удобството на мобилната версия е, че тук можете да избягвате допълнителни страници, за да спестите време при зареждане.
В адаптивното съдържание, използвайки html код, можете да скриете някои елементи, които всъщност не са необходими. Например, при висока разделителна способност, сайтът показва продуктова карта с нейното описание, цена, информация за доставка и възможност за добавяне в "Кошницата". В мобилна разделителна способност процесът е опростен до снимка, цена и бутон за покупка.
Средни и минимални разделителни способности за отзивчив дизайн трябва да вземат предвид лекотата на четене и гледане от потребителя.
Оформление
Целта на адаптивното оформление на дизайна е да създаде гъвкаво оформление, или както е обичайно да се казва: "гумен шаблон". Долният ред не е в едноцифрени размери на страницата, а в пропорционалната свиваемост на шаблона за лесно гледане на всички устройства.
Изграден е основно на CSS. По време на разработката се определят контролните точки на размерите на екрана. Така се определя ширината на останалите обекти. За да направите това, ширината на страницата се задава от свойството max-width на css, в зависимост от тези критерии, размерът на другите елементи се избира като процент. Например размерът на блока в главниястраницата е 600px, а ширината на блока на страничната лента (страничната лента на сайта) е 400px, съответно ширината на съдържанието ще бъде 60%, а ширината на страничната лента 40%.
Има няколко вида адаптивни оформления. Всеки се избира индивидуално, в зависимост от характеристиките и конструкцията.
Прегледи:
- Тип оформление, което позволява на блоковете да се обвиват, когато разделителната способност на екрана е намалена. На сайтове с няколко колони допълнителните блокове се преместват в долната част на екрана.
- Когато се разработи отделен модел за всяко разрешение. Този тип отзивчив дизайн отнема повече време, но е най-четлив.
- Прост тип дизайн, който има за цел да мащабира всички елементи. Не е гъвкав.
- Типът панел е удобен за използване в мобилни приложения, когато се появяват допълнителни функции при промяна на позицията на самия екран.
Създаването на отзивчиви слоеве е само една част от работата. Адаптивните изображения са отделен случай, който има свои проблеми и методи за решаването им.
Единично изображение трябва да се показва ясно при различни резолюции на екрана. Тук има проблем - как да се уверите, че картината винаги остава същата, независимо от промяната в резолюцията. Въвеждането на прост CSS код в този случай няма да е достатъчно.
Пример: img {max-width: 250px;} - тук трябва да приложите метод, при който размерът на контейнера, съдържащ изображението, е ограничен, а не самото изображение. Ще изглежда така: div img {max-width: 250px;}. Този метод решава проблемаоформление на малки изображения, но не е подходящо за големи илюстрации.
Ето защо много разработчици предпочитат да използват езици на JavaScript, които ви позволяват да адаптирате всяко изображение, без да претоварвате сървъра. Javascript предлага голям брой алтернативни скриптове.
Плюсове и минуси на адаптивното оформление
Положителни:
- Запазете местоположението на всички елементи. Това е удобно, когато потребителят е свикнал с пълната версия на сайта.
- Запазване на домейни и адреси.
- Пълно персонализиране за други формати на разрешения.
Отрицателни:
- Функционалната гъвкавост е загубена
- Всяко информационно претоварване е изпълнено с дълго стартиране на уеб ресурс, което принуждава много потребители да преминат към по-бързи опции.
Създаване на уебсайт
Структурата на сайта е разделена на няколко секции и блока. Традиционно оформлението се състои от горната част на сайта (хедър), лого, меню, блок със съдържание и крайната част на сайта (например подробна информация за контакт). Нека видим как да направим адаптивен дизайн на уебсайт от прост шаблон.
Допълнителни тагове за писане:
- wrapper - етикет, който комбинира всички елементи на шаблона;
- заглавка h1 - лого;
- header - заглавка за меню и други важни елементи;
- content - block;
- colLeft - размер на съдържанието;
- colRight - странична лента (странична колона);
- footer - последната част на сайта;
- медиен екран - комплектижеланата резолюция.
При писане на сайт тези елементи могат да се движат в различен ред, в зависимост от нуждата. Например, при висока разделителна способност менюто може да се показва вертикално. В мобилната версия оформлението може да бъде изградено по такъв начин, че менюто да се плъзга в хоризонтално положение.
- viewport - етикет, който ви позволява да запазите размера на текста в по-малка версия на дизайна. Намира се между етикетите.
- max-width - за оптимизиране на сайта, за да се избегне разтягане при резолюции над 1000 пиксела.
При внедряване на оформлението, библиотеката jQuery помага много, когато трябва да промените стила и структурата на блоковете.
Каква е разликата между отзивчив и мобилен дизайн
За пълно разбиране разгледайте няколко илюстративни примера, тъй като объркването между тези две понятия не е необичайно.
Трябва да разберете, че мобилната версия е аналог на основния сайт с поддомейн. Външното представяне на сайта напълно повтаря стила и функционалността, като структурата и съдържанието му може да се различават от основната версия, тъй като версията е съкратена до необходимите елементи.
Отзивчивият дизайн е оптимален за всички разделителни способности на устройството. Той е мащабируем и се изобразява правилно, независимо от условията на гледане.
Това са две различни презентации на сайта, около които неуморно бушуват спорове кое е по-добро. Трябва да се отбележи, че все още не е взето окончателно решение. Някой хвали този дизайн, изтъквайки модната тенденция и много предимства. Мобилната версия също има няколко предимства, които отзивчивият дизайн няма. Следователно, като начало, трябва да разберете основните нужди.
Предимства
С какво отзивчивият дизайн е по-добър от мобилния?
Универсалност. В наше време, с такъв неистов растеж на пазара, просто е необходимо информацията да се представи по различен начин, удовлетворявайки желанията на потребителите. Отзивчивият дизайн решава този проблем.
Ефективна промоция в търсачките. Това, което не може да се припише на основните предимства на адаптивното устройство. Търсачките предпочитат да предоставят на потребителите адаптивни уебсайтове.
Използваемост. Отзивчивият дизайн обикновено е проектиран в най-добрите дизайнерски решения, което е приятен подарък за визуалното възприятие на потребителите.
Лекота и простота както при изпълнението на проекта, така и при използването му.
Добри проценти на конверсия. Тъй като с адаптивния дизайн има повече възможности за показване, самата конверсия се увеличава.
Икономика. Това е относително по-евтино от създаването и популяризирането на отделна мобилна версия.
Плюсове и минуси на мобилната версия
Създаването на отзивчив мобилен дизайн изисква гъвкавост и последователност. На първо място, препоръчително е да напишете подробно заданието, което, разбира се, ще помогне да се избегне ненужна работа и да се спести време, както и да се вземат предвид характеристиките на сървъра, на който ще се хоства сайтът.
Има някои предимства и недостатъци на мобилния адаптивен дизайн.
Плюсове:
- Ако имате готов сайт, няма нужда да разработвате дизайн за мобилната версия от нулата. Могат да бъдат направени само няколко промени, освобождаващи това оформление от ненужна функционалност.
- Поради всички видове опростявания, мобилната версия се счита за по-бърза при изтегляне.
- Потребителят вижда най-важната информация в цялото съдържание.
- Бързо внедряване. Има плъгини, с които можете да внедрите мобилна адаптация, дори и да не знаете тагове и кодове.
- Изборите на търсачките предпочитат адаптивните версии, защото отнемат по-малко време за анализ.
Против:
- Не всички мобилни версии може да съответстват на резолюциите на мобилни устройства. Сайтът, разбира се, ще се отвори, но разделителната способност на екрана не винаги съответства на оформлението. Понякога добре проектиран дизайн на смартфон може да изглежда различно, когато се отвори като таблет.
- Мобилните версии изискват отделни платени домейни.
- Има някои дребни проблеми с публикуването на съдържание. Ако има няколко версии наведнъж, съдържанието трябва да се коригира за всички формати наведнъж. Изпращането на нов материал в основния сайт и копирането му в мобилната версия може да се счита за кражба. За да избегнете този проблем, може да се наложи да докажете връзката на ресурсите.
Методи на изпълнение
Основни методи за изпълнение:
- След създаването на дизайна на оформлението и оформлението, той се зарежда до необходимите размери с помощта насайт на оператора и основен код. Това е класически метод, използван при създаване на средни и малки версии (таблети, смартфони и др.).
- BootStrap е прост и ясен набор от инструменти за адаптация. Подходящ за създаване на версии за Landing Page и други не особено сложни уеб проекти. Това дава добра възможност за прилагане на много различни стилове във функциите на интерфейса.
- Responsive Grid System е популярен набор от универсални инструменти. Лесен за прилагане и не изисква задълбочени познания. Включва голямо разнообразие от инфографика.
- GUMBY - CSS рамка, която може да се похвали с гъвкава реакция и страхотни инструменти.
- Cookies - позволява ви да внедрявате отзивчиви изображения. Автоматично придружава файловете, поискани от браузъра.
- ExpressionEngine е друг начин за създаване на отзивчиви изображения. Определя дали устройството е мобилно, способно да променя изображенията до необходимата разделителна способност.
- ProtoFluid - Осигурява бързо прототипиране. Подходящ за всички видове устройства.
