|
Общее Веб-разработка в целом, идеи, проекты... |
26.11.2012, 23:51
|
#1
|
.
Регистрация: 05.08.2006
Сообщений: 10,429
Написано 3,454 полезных сообщений (для 6,863 пользователей)
|
Responsive Design
Responsive Design - это техника при разработке веб-сайтов для адоптации дизайна под разные разрешения экранов и платформ, без необходимости производить разные страницы для разных платформ.
Тот же HTML, тот же JS, всё то же, только разное отображение контента.
Это весьма популярное движение в последнее время, и многие сейчас смотрят в направлении разработки Responsive Design вебсайтов. Стоимость конечно выше, и сложность тоже выше, но результат того стоит.
Почитать можно в гугле более детально если нужно.
Также вот отличные примеры:
1. http://www.bostonglobe.com/
2. http://www.smashingmagazine.com/
3. http://foodsense.is/ (non-Fluid контент не адаптируется под всю ширину экрана, а только меняет стейты CSS)
4. http://css-tricks.com/
5. http://oliverrussell.com/
И куча других в гугле.
Я сейчас работаю над Template'ом для дальнейшего использования, без media-query, т.к. он не везде держится. Использую JS и небольшой хак с пустым div'ом и шириной 100% для стабильного детекта реальной ширины экрана как на десктопах так и на мобильных.
Вот пример страницы: http://moka.co/responsive/
Также вот ещё делаю Tool'зу http://moka.co/restest/ , которых и так полно, но для само-образования написал свою, тем более могу её улучшать под свои нужды. По сути это "мини-броузер", с возможностью изменять размер окна.
Сверху можно выбрать популярные платформы. Также задать своё разрешение.
Если есть вопросы, спрашивайте, я эту теми исследую уже вторую неделю, перепробовал не мало техник..
Последний раз редактировалось moka, 27.11.2012 в 19:08.
|
(Offline)
|
|
Сообщение было полезно следующим пользователям:
|
|
27.11.2012, 02:07
|
#2
|
|
Ответ: Responsive Design
пришел, увидел .Simpliste, сказал "ГОСПОДА, ЭТО ВИН", ушел
ps. думаю на этот шаблон накрутить histone.js и highlight.js, странички будут в json'е, и подсветка синтаксиса на ура
|
|
|
Сообщение было полезно следующим пользователям:
|
|
02.12.2012, 02:34
|
#3
|
ПроЭктировщик
Регистрация: 19.02.2011
Сообщений: 134
Написано 81 полезных сообщений (для 219 пользователей)
|
Ответ: Responsive Design
Ранее уже видел данные вещи;
Некоторые источники говорят, что из типичных браузеров media query не поддерживаются лишь на IE <= 8, и, как следовало бы ожидать, кто-то уже написал скрипт для возмещения этого.
С моей точки зрения, лучше оставлять данные вещи на совесть браузера, нежели на JavaScript, который может оказаться выключенным или неработоспособным по какой-либо причине.
Не предавая традиции стандартных шаблонов WordPress, на моем сайте так же реализована подстройка под размер экрана, заключающаяся в слиянии обоих "столбиков" (содержимое и меню) для <= 800px и в дополнительной корректировке размера текста для <= 650px.
Порой становится интересным вопросом, что будет более неприятно для пользователя - прокрутить страницу горизонтально вправо\влево на один экран для неуместившегося меню, или прокрутить ее вертикально на большее количество экранов ради съехавшего вниз\вверх содержимого.
Относительно
Сообщение от MoKa
Я сейчас работаю над Template'ом для дальнейшего использования, без media-query, т.к. он не везде держится. Использую JS и небольшой хак с пустым div'ом и шириной 100% для стабильного детекта реальной ширины экрана как на десктопах так и на мобильных.
Вот пример страницы: http://moka.co/responsive/
|
* Для CSS свойств без префикса дефис в начале не ставится ("transform", не "-transform").
* Не знаю, как будет позже, но пока что использование jQuery выглядит немного необоснованным, в меру включения ради лишь нескольких вызовов (создание <div>, нахождение элемента по индексу, установка стиля). Вспоминается эта шутка с StackOverflow:
Так же стоит заметить что представленный инструмент,
Сообщение от MoKa
Также вот ещё делаю Tool'зу http://moka.co/restest/ , которых и так полно, но для само-образования написал свою, тем более могу её улучшать под свои нужды. По сути это "мини-броузер", с возможностью изменять размер окна.
Сверху можно выбрать популярные платформы. Также задать своё разрешение.
|
уже довольно интересен. В определенной степени даже опережает стандартный отладчик в Chrome. Единственный замеченный минус заключается в том, что в зависимости от стиля рисования шрифта текст может не влезать в форму "информации". Добавил в закладки.
Так же, как мне кажется, в первом предложении должно быть слово "ад аптация".
Сообщение от jimon
пришел, увидел .Simpliste, сказал "ГОСПОДА, ЭТО ВИН", ушел
|
Довольно знаменательный дизайн. Некоторые вариации выглядят для меня гораздо более практичными чем иные, но, думаю, это дело вкуса.
Каким-то образом, за последнюю неделю я наткнулся на большее количество творческого использования border и border-radius чем за предшествующие полгода.
__________________
Мой сайт-блог. Игры, обновления, примеры для Haxe, JavaScript(+HTML5), GameMaker, Love2d...
|
(Offline)
|
|
Сообщение было полезно следующим пользователям:
|
|
02.12.2012, 05:51
|
#4
|
[object Object]
Регистрация: 01.08.2008
Адрес: В России
Сообщений: 4,360
Написано 2,473 полезных сообщений (для 6,856 пользователей)
|
Ответ: Responsive Design
Сообщение от jimon
пришел, увидел .Simpliste, сказал "ГОСПОДА, ЭТО ВИН", ушел
ps. думаю на этот шаблон накрутить histone.js и highlight.js, странички будут в json'е, и подсветка синтаксиса на ура
|
Причём тут это?
И что нам предлагает автор этого .Simpliste?
__________________
Retry, Abort, Ignore? █
Intel Core i7-9700 4.70 Ghz; 64Gb; Nvidia RTX 3070
AMD Ryzen 7 3800X 4.3Ghz; 64Gb; Nvidia 1070Ti
AMD Ryzen 7 1700X 3.4Ghz; 8Gb; AMD RX 570
AMD Athlon II 2.6Ghz; 8Gb; Nvidia GTX 750 Ti
|
(Online)
|
|
02.12.2012, 06:59
|
#5
|
|
Ответ: Responsive Design
Сообщение от Randomize
Причём тут это?
И что нам предлагает автор этого .Simpliste?
|
мм, а прочитать не судьба ?
Clean code
HTML5 and CSS3 made live of web developers easier than ever. Welcome to the world where less code and less files required. “Simpliste” has different skins and all of them are created with no images for styling at all.
Template contains CSS-reset based on the reset file from HTML5 boilerplate which makes appearens of “Simpliste” skins consistent in different browsers.
Print styles and styles for mobile devices are already included in the stylesheet.
|
Responsive markup
You know that now it's time to think more about your users with mobile devices. This template will make your site respond to your client's browser with no effort on your part.
Multi-column layout becomes one column for viewers with tablets, navigation elements become bigger for users with smartphones. And your desktop browser users will see just a normal web site.
Try changing the width of your browser window and you'll see how “Simpliste” works.
|
|
|
|
02.12.2012, 08:57
|
#6
|
Ференька
Регистрация: 26.01.2007
Адрес: улица Пушкина дом Колотушкина
Сообщений: 10,742
Написано 5,461 полезных сообщений (для 15,675 пользователей)
|
Ответ: Responsive Design
> Clean code
Само собой разумеется
> with no effort on your part
Враньё. Как я вижу, там всё построено на процентах: Сделал в ряд три col_33 - получил три респонсив блока на 1/3 ширины и далее по такому же принципу. А у меня в дизайне нарисованы блоки ширины не 33/50%, а другой. Или вовсе не колоночная вёрстка. И что тогда, куда прибыть, какой кабинет? В-общем накладывает ограничения.
Вот такое хочу сделать responsive и with no effort: http://centralcityopera.org/calendar при помощи этого щячла, возможно?
|
(Offline)
|
|
02.12.2012, 08:58
|
#7
|
[object Object]
Регистрация: 01.08.2008
Адрес: В России
Сообщений: 4,360
Написано 2,473 полезных сообщений (для 6,856 пользователей)
|
Ответ: Responsive Design
Сообщение от jimon
мм, а прочитать не судьба ?
|
Я то прочёл. Видать ты тоже прочитал, но смысл истолковал неправильно.
Автор предлагает на 1 респонсивно-свёрстанную страницу и пачку css к ней с разными стилями! Ой спасибо! Респонсивную вёрстку для какой-либо одной страницы любой сделает. Попробуй построить принципиально другую страницу и всё - приехали.
А на счёт винов из коропки: http://twitter.github.com/bootstrap/
Куда более продуманная вещь чем симплсайт "от Вована".
__________________
Retry, Abort, Ignore? █
Intel Core i7-9700 4.70 Ghz; 64Gb; Nvidia RTX 3070
AMD Ryzen 7 3800X 4.3Ghz; 64Gb; Nvidia 1070Ti
AMD Ryzen 7 1700X 3.4Ghz; 8Gb; AMD RX 570
AMD Athlon II 2.6Ghz; 8Gb; Nvidia GTX 750 Ti
|
(Online)
|
|
02.12.2012, 15:28
|
#8
|
|
Ответ: Responsive Design
Враньё. Как я вижу, там всё построено на процентах: Сделал в ряд три col_33 - получил три респонсив блока на 1/3 ширины и далее по такому же принципу. А у меня в дизайне нарисованы блоки ширины не 33/50%, а другой. Или вовсе не колоночная вёрстка. И что тогда, куда прибыть, какой кабинет? В-общем накладывает ограничения.
|
ограничения позволяют делать вещи быстрее, готовы колонки на 33% и 50% значит сверстать такое займет 2 минуты, а верстать новую разметку будет занимать больше времени
ох*енные сайты господа, оба безбожно тормозят на компе 4 летней давности, я смотрю у вас прогресс
|
|
|
02.12.2012, 19:24
|
#9
|
Ференька
Регистрация: 26.01.2007
Адрес: улица Пушкина дом Колотушкина
Сообщений: 10,742
Написано 5,461 полезных сообщений (для 15,675 пользователей)
|
Ответ: Responsive Design
Сообщение от jimon
ограничения позволяют делать вещи быстрее, готовы колонки на 33% и 50% значит сверстать такое займет 2 минуты, а верстать новую разметку будет занимать больше времени
|
Ты по дизаену верстал хоть раз, может быть?
|
(Offline)
|
|
02.12.2012, 19:31
|
#10
|
|
Ответ: Responsive Design
Сообщение от ABTOMAT
Ты по дизаену верстал хоть раз, может быть?
|
ну если говорить про обычные будни верстальщика "на макет, сделай сайт" то нет и не хочу, а если дизайнер рисует при мне то говорю как быстрее всего будет сделать, таким же способом интерфейс в играх делают
|
|
|
02.12.2012, 23:36
|
#11
|
Ференька
Регистрация: 26.01.2007
Адрес: улица Пушкина дом Колотушкина
Сообщений: 10,742
Написано 5,461 полезных сообщений (для 15,675 пользователей)
|
Ответ: Responsive Design
Тогда почему у тебя свой игровой движок? Бери юнити же, так быстрее, там есть плугин, который делает %действиенейм%!
|
(Offline)
|
|
Ваши права в разделе
|
Вы не можете создавать темы
Вы не можете отвечать на сообщения
Вы не можете прикреплять файлы
Вы не можете редактировать сообщения
HTML код Выкл.
|
|
|
Часовой пояс GMT +4, время: 10:57.
|