Отстранен гума или гъвкава шаблон, който е най-добре за вас, iteye
Фиксирана гума или еластични модел: Кое е по-добре за вас?
Източник: smashingmagazine.com
Проблемът за уеб дизайнери и програмисти, свързани с вида на модела е около продължение на няколко години: фиксирани, каучук, еластични или хибриден шаблон? Всеки вид има своите предимства и
недостатъци. Но окончателното решение зависи от използваемостта. Грешен избор на типа модел може да убие всички предимства на вашата услуга.
Така че, защо всичко това обсъждане? Фактът, че проектът се свежда до лекота на използване и достатъчно силно, за да го балансира така че всички потребители да се чувстват удобно в не в зависимост от това, което те използват оборудване, когато посещавате сайта.
На етапа на проектиране на шаблона на сайта, която ще бъде насочена към широка аудитория, дизайнерът трябва да вземе предвид всички посетители, както и да се вземат предвид разликите между тях:
- разделителна способност на екрана,
- браузър,
- Максимизиране на прозореца на браузъра
- Допълнителна панел на браузъра на потребителя,
- Както и на операционната система и потребителски платформата.
Без специфични стандарти в проектирането, дизайнерите са изправени пред проблема в момент, когато почти всичко е готово.
1. Различията между неподвижната и тип шаблон каучук / течност
Повечето от програмисти и дизайнери са добре запознати с тези различия и те са елементарни за тях. Но ние все още се над тези дефиниции.
фиксиран модел
Фиксиран модел има постоянен тип ширина, както и всички компоненти вътре в нея има някакъв процент от ширината или по-горе в пиксели (пиксели).
Важно е да се помни, че един определен модел остава фиксиран в неговата широчина, независимо от вида на браузъра и потребителското разрешение.
На екранната можем да видим пример за фиксирана ширина оформление.
Блокове с ясно определена ширина на 520, 200 и 200 пиксела. Широчината на основната единица е равна на 960 пиксела, което е стандарт в модерен дизайн, като потребителите използват bolshenstvo 1024 × 768 или по-висока.
каучук шаблон
При използване на гумени шаблон включително всички блокове вътре в основната работа проценти описание ширина, която позволява разтягане ширина модел в съответствие с резолюцията на екрана на потребителя.
Снимката показва, че ширината на всички елементи, посочени в процент. Това се използва от някои дизайнери да се простират на ширината на шаблона.
2. Фиксирана ширина шаблон
Много разработчици предпочитат да фиксира размера на гума, защото смятат, че е по-лесно. И след това, което вижда на дизайнера и потребителят вижда.
Има много "за" и "против" гумени шаблони и фиксирана ширина шаблон
"За"
"Против"
- Налагане на фиксирана ширина може да създаде голям празно пространство за потребителите с по-големи резолюции на екрана, като по този начин се измъкна от "златното сечение", "правилото на третините", както и други принципи на проектиране.
- Малък резолюция на екрана може да се отрази на външния вид на хоризонтална лента за превъртане, което не е особено красива.
- Безпроблемна текстура, и дълго pratterny изображения изискват висока резолюция.
- В фиксирана ширина модели обикновено губят, когато става въпрос за използваемост.
Примери на модели с фиксирана ширина
Предложени по-долу пет примера за дизайнери, които предпочитат фиксирана широчина модели.
Тези сайтове са много модули и елементи от дизайна. Това е добър подход, когато се използва фиксирана ширина. Така Дизайнерът има по-голям контрол и поставяне на допълнителни единици не се страхува да направи грешка.
Между другото, във всички тези примери, дизайнерът използва повтарящи се, ширина, фоново изображение за възприемането на красотата при високи резолюции.
3. заобикаляйки Аргументи "против" ширина определен уеб-страница
Ако използвате фиксирана ширина на шаблона в собствените си проекти, трябва да знаете, че има начини за създаване на висококачествен дизайн надминавайки всички "против".
статистика
Както можете да видите 640? 480 не се появяват в статистиката. Но това не променя факта, че такова разрешение в края на краищата все още има някои потребители, но им Menge един процент, а това позволява на дизайнерите да игнорират тези посетители.
Дори и хора, които не използват това разрешение, те вероятно ще го използват главно за лаптопи и няма да го използват на компютър.
Всичките четири места са се променили шаблоните за резолюция най-често. Дори и най-големите компании в мрежата, вярват, че техните посетители висока резолюция дисплеи.
За друго проучване по отношение на разделителната способност на екрана, да разгледаме източниците по-долу:
960 пкс или 760px?
Всичко това, което казва е, че голямата част от дизайнерите използват ширина от 960 или 760 пиксела. Ширината на 960 пиксела изглежда добре от потребителите, с разделителна способност от
1024 × 768 или по-висока, и има място от двете страни. Dezaynery, които искат да се грижат за потребителя 800 × 600 резолюция, ширина на модела е настроен на 790 пиксела. Той също така изглежда добре на по-високи резолюции.
Винаги центриране на модела
Работа с шаблони фиксирани ширина можете да се обзаложите, че центърът на основния модул се намира възможно най-близо до центъра на прозореца на браузъра. Това създава добър баланс и често се постига чрез използването на (марж. 0 автомобил, в противен случай потребителите с голяма разделителна способност на екрана ще видите лепкава лявата основния модул.
4. Гумени страница дизайн
Дизайнерите могат да елиминират използването на гумени шаблон по няколко причини, както и предимствата на този подход често не се вземат под внимание. След това ще разгледаме плюсовете и минусите на каучук шаблон.
"За"
- Гумени модел е по-привлекателни за потребителите, тъй като се адаптира към своята резолюция.
- Допълване на ръбовете на прозореца на браузъра и други подложка винаги изглежда по същия начин във всички браузъри, както и всички резолюции.
- Ако шаблонът е създаден и работи и с добър дизайн, който ви позволява да се отървете от хоризонтална лента prokrtki при по-ниски резолюции.
"Против"
Примери за каучук дизайн
По-долу може да видите два примера в различни резолюции на екрана. В първия пример, резолюцията е по-голям, съответно, ние виждаме повече бяло пространство. Втората резолюция е по-малко.
Развитие 5. Гумени Шаблон
В развитието на каучук шаблон, може да изпитате няколко проблема, някои от тях може да бъде решен с помощта на така наречените трикове.
Създаване на прост дизайн
Колкото по-малка графика шаблон и предизвикателна оформление. толкова по-лесно да работи. Това също ще помогне, когато bolshenstve разрешителни.
С изчистен дизайн и код, проблеми със съвместимостта по-лесно се решават.
Smashing Magazine, например, използва гумени шаблон, който се разтяга и стеснени менюто в заглавието на страницата и блок съдържание. А правилното използване на CSS правило от ситуацията, при потока на съдържанието се влива в страничната колона.
Мин-ширина и Max ширина
Двете CSS параметър (мин ширина / макс ширина), може да се използва за определяне на широчината на страница при много висока резолюция и малък.
В случай на малка резолюция, хоризонтална лента за превъртане, като че ли ние сме с помощта на шаблон с фиксирана ширина. Представените по-долу са два примера, които демонстрират тези параметри
:
Съжаляваме, но в интернет-изследовател не разбира мин ширина и максимална ширина. Ето защо, ние трябва да използвате CSS «израз» на IE имота.
* Ширина Html # разделяне: експресия (document.body.clientWidth> 776. "776px" "автоматично".); / * Определя макс ширина за IE * /
макс ширина: 33em; / * Това е за всички други нормални браузъри * /
>
6. Гъвкав дизайн
Гъвкав дизайн е третата част от нашия преглед. Този тип конструкция включва както фиксирани елементи на ширина и каучук.
Тя работи чрез определяне на количеството в единици за тях. Цитатът по-долу обяснява какво ЕМ и защо е полезно.
"Pixel - непроменен мащаб този момент на екрана на компютъра, когато« ги »е квадрата на размера на шрифта. Като промените размера на шрифта, «ги» е относителна единица, която отговаря на личните настройки на размера на текста на потребителя. "
- Патрик Грифитс, A List Apart
Докато гъвкав дизайн изглежда най-добрият вариант, то е все едно има своя собствена "за" и "против", тъй като същите като предишните два вида шаблони.
"За"
- Ако шаблонът е проектиран правилно, този тип модел може да бъде много удобен за потребителя. Целта е да се мащабира всички елементи в съответствие с предпочитанията на потребителя.
- Гъвкави шаблони съчетава предимствата на два вида обсъдени по-горе.
"Против"
- Дори и като се вземат предвид по-горе, този тип модел все още може да създаде голям проблем за предприемача. Тя изисква отлично познаване на принципите на оформление и тестване на различни браузъри и резолюции.
- Този тип модел е по-трудно да се създаде от посоченото по-горе, както и допълнително yuzabilnost за вашия уеб сайт може да бъде безсмислена.
- В зависимост от използването на CSS и HTML, някои модели от този тип могат да potrebyvat допълнителни CSS стилове и трикове за IE6
Примери на гъвкав дизайн
Еластични и гумени видове модели са подобни на външен вид, така че те могат да бъдат объркани. Така гъвкави шаблони ги използват вместо проценти и зависят преди всичко от размера на шрифта. Така чрез увеличаване увеличаване на размера на шрифта на потребителя и всички елементи на дизайна.
7. Как да изберем правилният подход?
Изборът на вида на шаблон трябва да зависи от конкретното място. Тя трябва да се оценят всички плюсове и минуси.
Портфолио, най-добре е да се избере фиксирана ширина шаблон, така че ще имате повече контрол върху целостта на дизайна.
В допълнение, ще бъде възможно да се контролира ширината на предложеното съдържание. Много дизайнери избират определен модел, защото е по-лесно и по-удобно.
Въпреки това, тези, които искат да се постигне 100% съвместимост да прекарват повече време в разработване на каучук шаблон. В този случай, важното не е празното пространство около краищата на модела, както и процента на потребителите, които следят резолюция spasobnost малък. За сайтове с голяма аудитория, дори и малък процент от потребителите е важно. В допълнение, тези проекти трябва да бъде изчистен дизайн за по-добро да се побере на каучук шаблон.
Все още не мога да реша? Гъвкав шаблон може да се възпроизвежда. Ако правилно ispolzovat гъвкав шаблон, той може да реши проблема на избор. Дизайнерите могат да се използват принципите на еластична дизайн с ем за шрифта и блокове, както и да се комбинират определянето на ширината в пиксели и процент. (Прибл Юджийн Che :. По мое мнение това е най-добрият вариант)
Какво правят дизайнери
Този дизайнерски прави отличен бележки за работата с тези, които искат да работят с шаблони и познават в достатъчна степен дизайна като цяло:
"Връщайки се към проблема. Ние използваме case.edu фиксирана ширина кауза ":
- Гумени модел е сложен, и ние предлагаме на хората с различни модели на готовност, и те могат да се счупят legkostb гумени шаблони.
(Обикновен HTML файлове, а не на Dreamweaver шаблони.) - Ние искаме да бъдем сигурни, че хората няма да използват дълги линии, които водят до лошо четливост и сълзотворен шаблон.
- Ние се опитваме да ограничи потребителите, защото хората са склонни да използват всички наличното пространство.
Ако те имат големи монитори, които ще се оправят, но ако matenkie - това ще доведе до лоши последствия.
Както можете да видите, нашите сайтове са широко разпространени сред хората с различни нива на познание. Ако работех на един сайт като дизайнер, аз ще направя така, както се изисква от съдържанието на сайта. "
Няколко предимства по отношение на определен модел:
Много браузъри като Safari 3 или по-висока (Safari 4 по пътя), Firefox 2 по-горе IE6 и по-горе (което трябва да се разглеждат като остарели)
размер на страницата може да бъде намалена в съответствие с размера на шрифта. вземане на оформлението на гума или еластични шаблон доста сложно и bolshestvo потребителите не обръщат внимание на това. "
Две забележки в подкрепа на каучук шаблон:
"Моделите Гумените се показват правилно в различни резолюции. Няма смисъл в дебата по този въпрос. В допълнение, статистическите данни във връзка с резолюцията на монитора - това е мит; Някои използват браузъра на цял екран, някои ленти с инструменти за използване, ленти и други джаджи. го прави прозореца на браузъра не е стандартна.
Очевидните случаи, в които трябва да се използват гъвкави шаблони:
"Мисля, че по-еластични" шаблони. - е най-добрият вариант. За гъвкави шаблони, трябва да определите максимална ширина. да се уверите, че линията няма да бъде прекалено дълго.
Аз съм потребител на Windows, а аз се развива прозореца на браузъра, по цялата повърхност на екрана.
Какво ще кажеш за ползваемост, каучук дизайн е по-подходящ за хора. които искат да се контролира ширината на съдържанието, ширината на отворен браузър. За по-малко опитни потребители вероятно ще ви подхождат гъвкаво опция. Тъй като шаблон контролира максималната ширина. "
Обяснение за това как дизайнер да комбинирате всичките три опции, за да постигнем най-доброто:
"Основната част от каучук, фиксирана лента и (може би) някои части еластична. Тук Предпочитаният метод за мен.
Винаги ispoolzuyu 600 пиксела като ограничител текстови блокове (макс ширина / или рана IE).
Използвайки мин / макс за всички, след това съдържанието е в рамките на 600 - 1200px и всички центрирано. Не и без хакове за IE / спечели.
Всички тествани от 600 до 2400 пиксела в ширина (отнася до разделителна способност). Текст от максимум 600px, а страницата се разтяга до ширината на съдържанието.
Посетителите могат да видят точно какво искат. Тя се прави по-лесно да се чете. Мисля, че това е компромис.
Ако оформлението на сайта е добър, а след това дори и хора с лошо зрение ще имат възможност да се увеличи masshtal текст и няма да имат проблеми с дизайна на дисплея, тъй като моделът ще се увеличи в ширина се дължи на факта, че тя не е фиксирана ширина. И няма никакви проблеми. "