Преди да пристъпите практически към изпълнението на дизайна, трябва да разрешите някои основни неща. Първо трябва да решите за вида на дизайна. Основно съществуват три възможности.
• Фиксиран
• Гъвкав
• Еластичен
CSS позволява дизайни с фиксирани или гъвкави размери. При фиксираните дизайни обикновено се използват мерки в пиксели. Гъвкавите дизайни, от друга страна, се основават на процентни стойности. И двете варианти на дизайна имат своите предимства и недостатъци.
Фиксираните дизайни се използват най-често, когато графиките трябва да бъдат формиращи дизайна. (Въпреки че и тук с наложеното използване на фонови графики с CSS са възможни изключения). Ако е необходима пикселова позициониране на елементите в дизайна, често се прибягва също към фиксираното позициониране. При този вид дизайн обикновено широчината на дизайна се фиксира на определен брой пиксели. Тази ширина обикновено се насочва към определени екрани.
Ситуацията е различна при гъвкавите дизайни. Тук не се посочва фиксирана ширина. Дизайнът тогава се ориентира към широчината на прозореца на браузъра.
При такива дизайни например широчината се посочва в процентни стойности. Ако потребителят промени размера на прозореца на браузъра, размерът на дизайна също се променя.
Благодарение на съвременния CSS, има и друг вариант на дизайна, наречен отзивен дизайн. Тук дизайнът се променя така, че например на смартфон изглежда напълно различно от този на настолн компютър. Например, тук в PSD-Tutorials.de е работено с такъв дизайн. Когато посещавате страницата на настолн компютър с "нормален" размер на прозореца на браузъра, получавате следното изображение.
Предимства и недостатъци на вариантите
Преди да изпълните дизайна, трябва да решите кой от посочените видове дизайн искате да използвате. Бих искал бързо да ви покажа какви предимства и недостатъци имат фиксираните дизайни.
Фиксираните дизайни, които са лесни за разбиране. (Този преимущество е полезно, когато трябва да обясните дизайн на клиент като уеб разработчик).
Фиксираните дизайни обаче също имат недостатъци.
Гъвкавите дизайни също имат своите силни и слаби страни. Начертание на предимствата.
Гъвкавите дизайни имат надежда но и недостатъци.
Още един вид дизайн представлява среден път между фиксирани и гъвкави дизайни. Това са така наречените еластични дизайни. Главният им характеристич фактор е единицата за измерване em. (В последно време става все по-популярно използването на rem. За разлика от em, rem винаги се ориентира към основния елемент, а не към по-горния елемент).
При такива дизайни широчината и височината са гъвкави. Дизайнът на страницата се скалира пропорционално на размера на прозореца на браузъра. Този формат на оформяне е безспорно най-сложният от практическа гледна точка. Това се дължи на факта, че предварително трябва много точно да знаете как се държат елементите при променлиъм размер на прозореца на браузъра. Аластичните дизайни се използват главно за уебсайтове, където се предлагат много снимки и видеоклипове.
Предимствата на еластичните дизпйни са::
• Има оптимално използване на наличното пространство.
• Съдържанието се представя пропорционално възможно най-голямо.
Но разбира се, еластичните дизайни имат своите недостатъци.
• Дизайнирането на тези дизайни е много сложно.
• Доразвиването също се утруднява значително.
Изборът на варианта
Трябва да решите коя от посочените възможности искате да използвате. Ако все още сте напълно на първите стъпки на HTML/CSS разработката си, бих ви препоръчал да започнете със статичен дизайн. Ако вече притежавате напреднали познания в уеб разработката, трябва да работите директно с отзивни дизайни. Тук сте на правилното място, независимо от устройството, с което накрая се отваря уебсайтът ви.
