Продолжаем рассматривать тему «Макет сайта» и сегодня, прежде чем перейти к практике создания макета сайта, мы поговорим об основных требованиях, которые предъявляются к макету сайта. Почему я об этом хочу поговорить? Многие скажут, например, если я создаю макет сайта для себя, для своего сайта, зачем мне какие-то правила и тем более требования?
Ответ очень простой. Выполненная работа, если она выполнена хорошо, должна отвечать установленным для этого вида деятельности правилам и стандартам, в противном случае это приводит к бардаку и полной неразберихи. Именно поэтому правилом хорошего тона является факт соблюдения установленных правил и требований. Приучайтесь с самого начала все делать хорошо, как того требуют определенные стандарты и тогда в дальнейшем вам не придется переучиваться.
А теперь подробней остановимся на основных требованиях, которые предъявляются к макету сайта:
1. Файл макета сайта должен соответствовать установленному формату. Основными форматами макета сайта принято считать файлы с расширением PSD (Photoshop Document) или TIFF (Tagged Image File Format). Если предоставленный макет – это файл другого формата, то соответственно это не макет сайта, а скорей всего миниатюра или превью.
2. Каждый элемент макета должен располагаться на своем отдельном слое. Выполнение такого требования повысит эффективность и скорость верстки сайта, а так же обеспечит независимость при редактировании отдельных элементов уже готового макета сайта.
Основные требования к макету сайта
3. При создании макета обязательно указывается возможность дальнейшего способа верстки. Так при создании макета сайта с фиксированной шириной разрабатывается отдельно фон «подложки» сайта и указывается место расположения сайта относительно краев браузера.
При создании макета «резинового» сайта уже отдельно и по определенным правилам готовятся как фоновые изображения, так и определенные блоки макета сайта. Что в дальнейшем позволит сайту растягиваться в зависимости от разрешения экрана.
4. При создании макета обязательно должны учитываться особенности всех основных браузеров. Яркий пример – это ширина макета. Так, к примеру, при ширине сайта 1024рх и при разрешении монитора те же 1024рх в браузере мы получаем горизонтальную полосу прокрутки, так как ширина окна основных браузеров, при таком разрешении экрана, не превышает 1002 рх.
5. Создавайте правильно фон сайта. Используйте для фона «бесшовные» изображения, которые при многократном повторении создают однородный фон, без разрывов и видимых переходов. Избегайте использования в качестве фона полноразмерных фотографий и изображений – это ухудшит скорость загрузки сайта, а так же очередность загрузки отдельных его элементов.
6. При создании макета сайта используйте направляющие. Использование направляющих не только упростит позиционирование отдельных элементов сайта, но так, же облегчит процесс верстки сайта. Именно поэтому, по окончанию работ по созданию макета сайта не удаляйте направляющие. Их достаточно просто скрыть.
7. При создании макета старайтесь использовать стандартные шрифты. Внедрение в разрабатываемый макет нестандартных шрифтов, очень часто приводит к проблемам при работе уже готового сайта. Даже существующая возможность подгружать извне шрифты не всегда справляется с этим, и мы наблюдаем не совсем лицеприятную картинку открывающегося сайта.
8. Старайтесь избегать специальных эффектов с текстом. Так эффекты выгибания текста, текста «волны» или текст «рыбий глаз» приводит к тому, что при верстке сайта вместо текста приходится прибегать к изображениям, а это соответственно только утяжеляет сайт. Поэтому минимизируйте применение специальных эффектов к тексту.
Основные требования к макету сайта
9. Осторожно экспериментируйте с формами. На мой взгляд, не стоит увлекаться изменением дизайна стандартных элементов форм. Как правило, это часто приводит к тому, что форма или вообще перестает работать, или работает не совсем корректно, что приводит к появлению ошибок при обработке информации формой.
10. Создавайте дизайнерские сборки для разрабатываемого макета. Мелкие элементы макета, особенно которые повторяются, как правило, должны храниться в отдельном файле или файле сборке. Такими элементами могут быть: иконки, стрелки, буллеты, маркеры, кнопки и т.д. На самом же макете такие элементы объединяются в один слой, что упрощает работу с ними, а так же уменьшает размет файла макета сайта.
11. При создании макета прописывайте графику и текстовое наполнение меню. Для простоты верстки, а так же соответствия графики разработанного меню стоит указывать возможные изменения элементов меню при наведении курсора при клике на пункт меню и т.д. Многоуровневые меню необходимо прорисовывать в нескольких положениях (наведение, нажатие, активное положение).
12. При создании макета прописывайте оформление ссылок. В случае с ссылками придерживайтесь правил предыдущего пункта, а то есть прописывайте порядок изменения внешнего вида ссылки при наведении, нажатии и активном положении ссылки.
Вот мы и рассмотрели основные правила и требования, которые предъявляются к макету сайта. Соблюдение данных пунктов позволит вам правильно создать макет будущего сайта и упростить работу при его верстке. На этом на сегодня все читайте материалы моего блога дальше будет еще интересней.
Виды макетов сайта. Часть 2 Резиновый макет сайта.
Продолжаем рассматривать тему «Виды макетов сайта». В прошлой статье мы разобрали макет сайта с фиксированной шириной, ну а сегодня подробней остановимся на резиновом макете сайта.
Сленговое название резиновый макет сайта говорит само за себя. Резиновый макет сайта – это прототип сайта, ширина которого напрямую зависит от ширины окна браузера. То есть в конечном итоге мы получаем сайт, который, как бы подстраивается под разрешение монитора пользователя и занимает все свободное место в окне браузера.
При создании макета сайта добиться эффекта «резинового» сайта не возможно, все это достигается уже при верстке сайта, но при создании макета должны выполняться определенные условия создания макета для резинового сайта. Остановимся подробней на некоторых из них.
И так первое на что я хотел обратить внимание, это использование графики для «резиновых» сайтов. В процессе создания макета рекомендуется осторожно использовать изображения для фона определенных модулей. Дело в том, что форматы изображений, используемые в веб разработке, не поддерживают изменение их размеров без потери качества. При изменении ширины модуля соответственно должна меняться ширина изображения, которое определяет фон модуля.
Резиновый макет сайта
Если ширина изображения изменяется, то мы наблюдаем искажения форм на изображении или явную потерю качества. Если же изображение не меняет своих размеров, то при изменении размеров модуля будут появляться просветы на фоне модуля, что никак не предусмотрено дизайном и просто сделает сайт безобразным.
Таким образом, применение графических изображений в качестве фона должно сопровождаться определенной подготовкой таких изображений к их использованию в качестве фона модуля. Ярким примером такой подготовки являются бесшовные фоновые изображения, которые за счет повторения по горизонтали и вертикали способны создавать фон в модулях с изменяемыми размерами, то есть в модулях «резинового сайта».
Так же стоит правильно располагать изображения на самом макете. Дело в том, что минимальная ширина «резинового» сайт составляет 560рх и изображения расположенные так, что их обтекает текст, при минимальных размерах ширины сайта могут перекрывать текст. То есть посетитель не получает то зачем он пришел на сайта, а это не просто минус сайта, это просто катастрофа. Поэтому при создании макета для «резинового сайта» необходимо все это учитывать и располагать изображения отдельно от текста с возможностью их выравнивания посередине.
Так же стоит учитывать расположение контента. Если при максимальном разрешении экрана длина строки составляет 1000рх и более, то это будет неудобным для посетителя и информация, предоставляемая вами, воспримется не на должном уровне. Именно поэтому, стоит это учитывать и продумывать при разработке макета сайта. выходом может служить расположение контента в несколько колонок, как это используется в печатных изданиях.
Резиновый макет сайта
Вообще на практике сайтов с классическим резиновым макетом достаточно мало. Как правило, мы имеем дело с гибридами, где в процессе верстки вводятся ограничения, как на минимальную ширину сайта, так и на его максимальную ширину. При таком положении дел гораздо проще готовить изображения к расположению на сайте, а так же учитывать много других нюансов и дазайнерских задумок.
Таким образом, создание макета для резинового сайта – это сложный процесс, который требует не только скрупулезного отношения ко всем, даже самым мельчайшим моментам в дизайне сайта, но и определенных навыков в верстке сайта, что бы в один прекрасный момент не возникла проблема, которую решить будет невозможно.
Опираясь на все выше изложенное, я бы не рекомендовал новичкам идти по пути создания «резинового сайта». Поймите, создать функциональный со всех сторон резиновый сайт, который имеет сложный дизайн, бывает не под силу даже опытным web-разработчикам. Для этого стоит досконально знать, как CSS так и HTML.
Ну и на этом на сегодня, пожалуй, все. Читайте следующие статьи темы «Виды макетов сайта» и я уверен, что вы подберете для себя подходящий вариант для создания макета сайта.
Виды макетов сайта. Часть 3 Эластичный макет сайта
Продолжаем рассматривать тему «Виды макетов сайта». В предыдущих статьях мы уже познакомились с макетом для сайта с фиксированной шириной и резиновым макетом сайта. Сегодня вашему вниманию я предоставляю эластичный макет сайта.
Как я уже отмечал макет сайта это всего лишь эскиз, используя который в процессе верстки, мы получаем каркас будущего сайта. Именно поэтому больших отличий при создании такого макета нет, и на первый взгляд он практически ни чем не отличается от резинового макета и макета с фиксированной шириной. Все отличия и особенности данного макета, как и резинового макета, это способ верстки.
Но не стоит думать, что из любого макета можно сверстать эластичный сайт. По-моему это заблуждение. Почему я считаю, что это заблуждение я постараюсь объяснить далее. И так начнем с определения, в чем же особенность эластичного макета сайта.
Эластичный макет сайта
И так небольшой пример. Разброс разрешений монитора, посетителей вашего будущего сайта будет достаточно большим. Как показывает практика это от 800×600рх до 1920×1080. То есть изменение размеров монитора происходит более чем в два раза. А теперь представьте себе, что основной шрифт вашего сайта установлен 12рх и как он будет смотреться на экране с разрешением 1920×1080, а может быть и более. Как говорится впору покупать очки.
И это не смешно. Вы же не можете определить, каким зрением обладает ваш посетитель. А посетитель, если у него недостаточное зрение, получил возможность от разработчиков современных браузеров изменять размер шрифта. И это изменение может происходить даже на среднестатистическом разрешении экрана. Не редко при таких изменениях, вроде бы хорошо разработанный макет сайта и сверстанный по всем правилам разваливается просто на глазах. Что происходит с посетителем? Он закрывает вашу страничку и ищет необходимую ему информацию уже на другом сайте.
Вот мы и подошли к особенностям эластичного макета сайта. А основной особенностью является тот факт, что эластичность сайта строится вокруг изменения размера шрифта. Как говорится, отправной точкой во всем этом деле является шрифт. Причем исходный размер шрифта определяется не в пикселях, а в em. ЕМ — это относительная единица длины, равная размеру текущего шрифта. По умолчанию 1еm равняется 16рх, соответственно 10рх = 0,625em. В em устанавливаются так же и размеры модулей сайта. Таким образом, разработчик получает эластичную систему изменения размеров сайта при изменении размера шрифта.
Эластичный макет сайта
На практике классические эластичные сайты, как и классические резиновые сайты, встречаются довольно редко. Дело в том, что создание такого сайта это довольно сложное в математическом смысле занятие. Определить размеры всех модулей в em, не говоря уже о графике, задача для сверх усидчивых разработчиков. И к тому же пресловутая графика, которая при изменении размера теряет в качестве, и мы наблюдаем деформацию и искажение отдельных элементов на изображении.
Именно поэтому, чаще можно встретить применение признаков эластичности в совокупности с элементами резинового макета и сохранением неизменными размеры отдельных модулей.
Таким образом, подводя итоги сегодняшней статьи, хочется отметить, что если вы серьезно решили заняться веб разработкой, то понятие эластичный макет сайта для вас должно быть знакомо, должны быть знакомы основы построения такого макета, а так же что такое относительная единица длины em и как с ней работать. На практике с этим всем возможно вам придется столкнуться. А на этом на сегодня все. Читайте мой блог, дальше будет еще много интересного и полезного.
Виды макетов сайта. Часть 4 Адаптивный макет сайта
Продолжаем рассматривать тему «Виды макетов сайта». В предыдущих статьях нами были рассмотрены такие виды макетов сайта, как макет сайта с фиксированной шириной, резиновый макет сайта и эластичный макет сайта. В сегодняшней статье я представляю вашему вниманию адаптивный макет сайта, это уже четвертый вид макета сайта, который мы затрагиваем.
И так адаптивный макет сайта. Если говорить коротко, то адаптивный макет сайта – это подборка нескольких эскизов для различных разрешений экрана монитора. То есть при разработке макета сайта создается не один psd файл, а несколько, которые соответственно адаптированы под определенное разрешение экрана монитора и соответственно имеют различную ширину, но выполнены в одном стиле, имеют одинаковый перечень модулей, но иногда различное их расположение.
В процессе верстки и кодинга сайта создаются определенные правила и скрипты, которые в свою очередь и определяют разрешение экрана устройства, на котором просматривается сайт и подключают для просмотра решение, адаптированное под такое разрешение. В свете развития технологий и перечня устройств, с помощью которых возможен выход в интернет, адаптивный макет сайта становится наиболее актуальным для решения проблем возникающих при изменении разрешения экрана.
Скрипты
Каждый веб-мастер хочет, чтобы его сайт был популярным и интересным. Нередко в таких случаях на сайте мы можем увидеть форумы, статьи, чаты и так далее. Как сделать все эти инструменты? Некомпетентный мастер задумается. Ведь все эти продукты — творение программиста. На выручку приходят готовые скрипты. Благо их количество велико в сети.
Достаточно забить запрос в Яндексе и вы обнаружите богатый выбор готовых скриптов. Но на этом еще не все. Не так просто разобраться в установке этих скриптов. Понадобится время, чтобы мастер смог научиться их правильно устанавливать. К тому же множество скриптов являются недоработанными или, как их еще называют, сырыми.
Поэтому, веб-мастеру предстоит нелегкий путь выбора работающего правильно скрипта. Но рано или поздно все усилия приносят свой плод.
Адаптивный макет сайта
Вы спросите, зачем городить огород, ведь есть резиновая верстка, которая выполняет задачи адаптации ширины сайта при изменении разрешения экрана. Я уже отмечал, что одним из правил создания успешного дизайна сайта, является вопрос соблюдения композиции. То есть при разработке модулей сайта, а именно их размеров, необходимо, как минимум придерживаться правила золотого сечения и многих других способов, которые определяют и поддерживают композицию в размерах и размещении модулей, графики и других элементов сайта.
Что же мы наблюдаем при резиновой верстке. Если изменяются размеры модулей, то шрифты при этом остаются неизменными. Поэтому в огромном блоке у нас появляется малюсенький текст. Или, наоборот, в небольшом по ширине блоке нам предоставляется растянутый по вертикали огромный текс, который и читать не хочется. Опираясь на все это, можно сделать вывод, что адаптивный макет сайта практически решает проблемы в поведении сайта при изменении разрешения экрана, что касается соблюдения композиции сайта и его дизайна в целом.
Еще одним положительным моментом адаптивного макета сайта является тот факт, что на основе такого решения в дальнейшем будет не сложно сделать полный редизайн сайта. То есть при сохранении информационной и программной части сайта на него будет не сложно надеть новое одеяние, которое будет соответствовать текущему моменту.
Ведь не зря в современных web разработках, львиная доля отведена созданию сайтов на CMS (системах управления контентом). Где готовая система управления сайтом нуждается лишь в подключении к ней разработанного макета сайта.
Однако с якобы убийственными преимуществами адаптивный макет сайта имеет и свои недостатки. Во-первых, это сложность в его разработке. Понятно, что создавать придется не один макет, а несколько. Соответственно все это ведет к увеличению затраченного времени, как на проведение подготовительных работ, так и на самое исполнение макета. Больше времени придется поработать с графикой, что бы подобрать необходимые изображения и в дальнейшем подготовить их для размещения на макете адаптированном под то или иное разрешение экрана.
Адаптивный макет сайта
Еще одним недостатком при создании адаптивного макет сайта, является сложность в подборе шрифтов. Как известно шрифты при увеличении или уменьшении своих размеров меняют и свой внешний вид. Иногда это происходит не в лучшую сторону. А соответственно замена шрифта, это фактическое нарушение структуры дизайна, что при правилах хорошего тона в web-разработке крайне не допустимо. Именно поэтому при создании адаптивного макета сайта стоит особое внимание уделять подбору шрифтов для сайта.
И последнее на чем я хотел остановиться, это очередной недостаток адаптивного макет сайта, но который проявляется уже на стадии тестирования сверстанного и программно адаптированного макета. В случаях с адаптивным макетом сайта довольно сложно учесть все поведенческие моменты сайта при просмотре его на том или ином устройстве, в том или ином браузере. Вариантов просмотра множество и учесть необходимо каждый, поэтому работа по тестированию может занять довольно продолжительное время.
На этом на сегодня все. Мы познакомились с адаптивным макетом сайта, разобрали порядок его разработки, осветили основные его плюсы и минусы, а выводы по его использованию я думаю, вы сделаете сами. Читайте мой блог дальше будет еще много интересной информации.
Виды макетов сайта. Часть 5 Комбинированный макет сайта
Продолжаем рассмотрение темы «Виды макетов сайта». В сегодняшней статье вашему вниманию я представлю информацию о последнем виде макетов сайта – это комбинированный макет сайта.
Как видно из названия комбинированный макет сайта – это некий гибрид, который получается в процесс использования плюсов всех макетов, которые мы рассмотрели в четырех предыдущих статьях. То есть у каждого классического макета есть своя фишка, объединение всех этих фишек в единое целое приводит к тому, что в результате мы получаем макет сайта, который обеспечивает, как сохранение дизайна сайта со всеми пропорциями, так и удобство в его восприятии при различных разрешениях монитора. Причем все эти сохранения не требуют дополнительных настроек.
И так с чего начать создание комбинированного макета сайта. Прежде всего, это размеры ширины и высоты сайта. Начнем с простого, а это высота макета сайта. Высота макета сайта, как правило, не имеет фиксированного значения. А это самое значение во многом зависит от наполняемости информацией страницы сайта, поэтому наличие вертикальной полосы прокрутки не критично для сайта и воспринимается посетителями, как правило, без излишнего недовольства.
Бесконечные размеры высоты страницы регулируются в основном программно. То есть, что бы ни допускать слишком больших размеров высоты страницы, из-за большого объема информации, эту информацию делят на несколько страниц. В результате получается приемлемая высота страницы с приемлемым объемом предоставленной информации.
Комбинированный макет сайта
Сложнее с шириной. Из-за довольно большого количества устройств, на которых просматривается ваш сайт, а соответственно и различных разрешений экрана монитора, комбинированный макет сайта приходится выполнять на основе адаптивного макета сайта, где вы имеете дело с созданием сразу нескольких макетов. В случае с комбинированным макетом сайта таких макетов придется создавать два. Это макет для устройств с минимальными разрешениями, то есть для мобильных телефонов и планшетов и соответственно макет сайта для стационарных компьютеров и ноутбуков.
Ширина каждого из макетов тоже не однозначная и должна варьировать в определенных пределах. Так для первого макета ширина должна быть от 220 до 800рх. В случае со стационарными компьютерами и ноутбуками ширина уже различается от 1024 до 1920рх, как минимум. Что же со всем этим делать и как удовлетворить амбиции всех посетителей.
Здесь уже на помощь приходят все плюсы резинового макета сайта. Что бы добиться этого достаточно при верстке уже созданного макета, установить минимальную и максимальную ширину будущего сайта. Современные браузеры поддерживают это правило, а вы в итоге получаете результат, когда сайт заполняет все свободное место окна браузера и не смотрится «куцым» посередине экрана монитора.
Ну и здесь не все так однозначно. Допустим, вы делаете комбинированный макет для сайта, ширина которого будет изменяться от 1000 до 1900рх. Макет, я повторяюсь, это всего лишь картинка, которая не изменяет размеры в зависимости от изменений разрешения экрана монитора, и какую ширину взять за основу не ясно. Это минимальное значение 1000рх, или максимальные 1900рх, а может среднее значение 1450рх. В общем, вопрос вопросов и конкретного ответа на него нет.
Комбинированный макет сайта
Каждый разработчик придерживается своих принципов и правил в этом вопросе. Кому то удобней брать за основу максимальную ширину, потому что тогда легче работать с изображениями и пропорциональными размерами. Кому то легче создать макет с минимальными размерами и уже при верстке растягивать его.
Я же придерживаюсь иного правила. Создавать макет необходимо под ширину, которая берется из статистики. То есть наибольшее число посетителей, у которых разрешение экрана составляет, к примеру, 1366×768 (это ноутбук) на моем сайте 29.7%. Именно поэтому я бы взял за основу ширину макета 1300рх.
Но у вас, как у разработчика разрешение монитора допустим 1280×1024рх. В результате при создании макета вы не можете наблюдать его реальную ширину, соответственно возникают сложности визуального восприятия целого макета. Отсюда можно сделать простой и очень важный вывод. Определение ширины комбинированного макет сайта в первую очередь зависит от технических возможностей вашего оборудования, а далее от всех остальных.
Именно поэтому при выборе размеров макета сайта стоит максимально продумывать все нюансы, который могут стать преградой в разработке макета. На этом сегодня прервемся, продолжение в следующей статье.
