Превод на изключително ценната статия “Responsive Web Design Techniques, Tools and Design Strategies” от популярното онлайн издание за разработчици Smashing Magazine.
Още през януари публикувахме статия за адаптивния дизайн, „Отзивчив уеб дизайн: какво представлява и как да го използваме“. Адаптивният уеб дизайн продължава да привлича много внимание, но имайки предвид колко различен е от... традиционни методиразработка на уебсайт, може да изглежда непосилно сложно за тези дизайнери и разработчици, които не са го опитвали.
Поради тази причина съставихме преглед на ресурси, полезни при създаването на адаптивни уебсайтове. Прегледът включва подробни ръководства, подходи, инструменти, статии, съдържащи практически съветинеобходими, за да създадете свой собствен адаптивен уебсайт.
Отзивчиви техники за уеб дизайн 1. CSS преходи и медийни заявкиCSS преходи и медийни заявки
Елиът Джей Стокс навлиза в подробности относно метода за комбиниране на CSS медийни заявки и CSS преходи. Основната идея е следната: разработване на адаптивен уебсайт с използване на MediaЗаявки, постоянно променяте ширината на браузъра си, за да видите как сайтът се държи с него. Но всеки път, когато се обработва една от вашите медийни заявки, се вижда твърд преход между стиловете (първият, например, за настолни компютри, вторият за таблети). Защо не използвате CSS преходи, за да изгладите тези трудни преходи с анимация?
Отзивчиви изображения и видеоклипове 5. Плавни изображенияГумени изображения (мащабиране на браузър)
Гумените изображения са една от централните теми в адаптивния уеб дизайн. Статията на Итън Маркот показва подробен прегледсъздавайки ги с помощта на класическия кодов фрагмент на img ( max-width: 100%; ), заедно с всички необходими подробности, от които се нуждаете, за да започнете.
Адаптивни имейли електронна поща 14. Оптимизиране на вашия имейл за мобилни устройства с медийната заявкаОптимизирайте имейла за мобилни устройства с Media Queries
Често е необходимо да видите големи имейли хоризонтално превъртане, особено когато е приложен към писмото голямо изображение. IN това учение Campaign Monitor обяснява как имейлиможе да се оптимизира за мобилни устройства с помощта на Media Queries и предлага няколко полезни методии кодови фрагменти за практическа употреба.
Инструменти за адаптивен уеб дизайн Можете да проектирате адаптивен дизайн от нулата или да използвате инструментите, изброени по-долу, за да направите процеса на създаване по-бърз и лесен.Това е бърз и лек Polyfill (част от код, която добавя функционалност, която не се поддържа от браузъра), създадена от Scott Jehl за поддържане на свойствата min-width и max-width от CSS3 Media Queries в IE6-IE8 и по-нови версии.
Използвайте информацията от този малък инструмент, за да създадете адаптивен уебсайт.
Инструмент за бързо прототипиране на адаптивен дизайн. Можете да проектирате CSS за различни популярни размери на екрана, ориентации и браузъри, било то телефони (BlackBerry Torch, Google NexusЕдно, iPhone, Motorola Droid), таблети (BlackBerry Playbook, iPad, Samsung Galaxy Tab, Dell Streak), монитори или телевизори (720p, 1080p).
Можете да видите резултатите от дизайна си директно в браузъра си и да използвате любимите си инструменти за разработка, като Firebug. Опитайте и алтернативния инструмент ScreenFly.
Инструментът 320 и нагоре се основава на подход на първо място за мобилни устройства, при който дизайните се създават първо за екрани на мобилни устройства и след това се разширяват за таблети, настолни компютри и големи екрани. Работи добре както като допълнение към HTML5 шаблона, така и самостоятелно.
Това са адаптивни шаблони за създаване на богати на функции и висока производителност мобилни уеб приложения. Ще получите съвместимост между различни браузъри за смартфони от клас A и добра поддръжказа стари BlackBerry, Symbian и IE Mobile. И голям бройразлични оптимизации за мобилни браузъри.
Рамки за адаптивен дизайн 33. 1140 CSS Grid1140 CSS мрежаоптимизиран за работа на екрани с размери от мобилни устройства до 1280px широки монитори. Това е проста и гъвкава мрежа, използваща Media Queries.
Тази CSS рамка е - добра основаза разработване на малки екрани (като телефони) и малки екрани (като таблети) направо от кутията с минимални усилия. Освен това има генератор за създаване на гъвкава CSS рамка за себе си.
Flurid е гумена мрежа с 6, 7, 8, 9, 10, 12 и 16 колони.
FluidGrids - генератор модулна решетка, което създава 6, 7, 8, 9, 10, 12 или 16 оформления на колони.
CSS рамка за създаване на адаптивни оформления. Съдържа 4 основни оформления и три комплекта типография.
Плавна рамка с фокус върху типографията.
Tiny Fluid Grid ще ви помогне да създадете своя собствена гумена решетка от 12, 16 или 24 колони, да зададете техния максимум и минимална ширинаи отстъп като процент.
Стратегии за адаптивен дизайн 40. Работният процес на адаптивния дизайнерОтзивчив работен процес за разработчици на уеб дизайн
Люк Вроблевски си взе бележки по презентацията на Итън Маркот относно прилагането на принципите на адаптивния уеб дизайн за модернизиране на уебсайта на един от водещите вестници. Наред с други неща, Итън обяснява как подхожда към методологията на адаптивния уеб дизайн и какъв е процесът на създаване на прототипи в контекста на адаптивния уеб дизайн.
Люк Вроблевски си водеше бележки на конференцията Breaking Development Conference по време на лекцията на Стивън Хей за реалностите на проектирането за различни устройства.
Дискусии и различни точкиоглед на адаптивен уеб дизайнТези статии, въпреки че не са учебници, могат да ви дадат ценна информациязащо трябва да използвате отзивчиви техники за уеб дизайн (и кога не).Отлично въведение в адаптивния дизайн като начин на мислене, а не като инструмент или техника. Джереми Кийт твърди, че адаптивният уеб дизайн не може просто да бъде добавен като стъпка към съществуващ работен процес. Вместо да се стремим към пикселно съвършенство, трябва да се стремим към пропорционално съвършенство.
Изданието е комбинация от философия и стратегия за натрупване най-добри практикив областта на адаптивния дизайн.
Редовно актуализирана колекция от уебсайтове, които използват Media Queries.
В епизод 9 на The Big Web Show Джефри Зелдман и Дан Бенджамин поканиха Итън Маркот да обсъдят адаптивния дизайн.
Отлично допълнение към статията би бил блог за отзивчив дизайн, в който разработчиците споделят своя опит и пишат рецензии на отзивчиви инструменти.
IN напоследъкВсе повече се развиват технологиите и различните устройства (таблети, смартфони, монитори), с които се разглеждат сайтове.
В тази област получаваме огромно разнообразие от различни резолюции на екрана, което от своя страна затруднява получаването на информация от сайтове. За да се гарантира, че информацията е лесна за четене и видима на повечето устройства, е разработена технология за адаптивен дизайн.
Целта на адаптивния дизайн е да се разработи универсален дизайн на уебсайт, който от своя страна да ви позволи да преглеждате и взаимодействате с ресурса от различни устройства.
И тази технологиявключва разработване на една версия на уебсайт за всички устройства, а не няколко.
Адаптивният уеб дизайн е дизайн на уеб страници, който гарантира правилното показване на сайта различни устройства, свързан с интернет и динамично адаптиращ се към дадени размерипрозорец на браузъра.
Основни принципи на адаптивния дизайн:
- Адаптивен шаблон на уебсайт, способността на шаблона да се адаптира към различни разделителни способности на екрана на устройството от компютърни монитори до смартфони;
- Адаптиране и движение на блокове със съдържание, способността на блоковете със съдържание да приемат в зависимост от разделителната способност на екрана на устройството изисквани размери, както и възможност за преместване на друга позиция в оформлението;
- Отзивчивост на изображението, способността на изображенията да променят размера си в зависимост от разделителната способност на екрана или да зареждат повече адаптирано изображениес по-малко тегло и размер;
- Използване гъвкава мрежа, ви позволява бързо да промените дизайна на оформлението;
- Скриване на по-малко важни блокове, на малки екрани някои блокове може да са скрити;
- Преработка на използваемостта на навигационните елементи, тъй като мобилни устройствапоради ниската разделителна способност, навигационните елементи стават по-малко кликаеми, те са преработени, което ги прави по-удобни за използване;
- Опростяване на редица елементи на уеб страницата, някои елементи са опростени за използване на мобилни устройства;
- Трябва да се вземе предвид и адаптирането на видео съдържание, видео адаптацията;
- Използването на медийни заявки ви позволява да създадете адаптивно оформление;
- Мобилният на първо място, адаптивният дизайн започва с мобилно оформление.
относно последна точкаправилно ли е или не сложен въпрос, от поне, мнозина твърдят, че е необходимо да започне разработването на оформление с версия за мобилни устройства. Имам малко по-различно мнение; за мен е по-лесно да разработя оформление максимална резолюцияс добре обмислена мрежа и пълна функционалност и едва след това да го адаптирате към други резолюции.
Имало едно време през 2012 г. писах кратка статияза това кои трябва да бъдат избрани при разработване на дизайн - оформление на фиксиран сайт. Оказва се, че тази статия предизвика голям интерес сред читателите този въпросинтересува много начинаещи дизайнери и разработчици. Във връзка с това реших да подчертая този въпрос в тази статия.
И така, чисто от моята визия, ще очертая принципа и размерите, за които трябва да се разработи оформлението.
Ако следвате принципа за мобилни устройства първо, тогава ще има размери на разделителната способност, за които трябва да разработите оформление 320px / 480px / 768px / 1024px / 1280px, може би повече зависи от задачите.
Картината изглежда така, но често няма нужда да създавате оформление за определени разделителни способности, например 480px. ако оформлението не се счупи в интервала 768 - 320px.
Разбира се, ние ще създадем платно във Photoshop, като вземем предвид подложката, лентата за превъртане и всичко останало, точно като обикновено оформление. за лесна разработка, както и за по-бърз дизайн на оформление. Много хора използват рамки в работата си и следователно разчитат на решетката на рамката, върху която разработват.
Благодарение на това ще можем да покажем на дизайнера на оформлението как ще се държи оформлението различни резолюцииекрани и устройства. Като пример скицирах малко оформление, можете да го видите на екранната снимка по-долу. 
Мета се използва, за да каже на браузъра как да показва размерите на страницата и да променя нейния мащаб. таг за прозорец за изглед. Този мета таг е записан в сайта. Тя позволява на разработчиците да задават ширината на екрана за устройства, която е написана на css.
Мета тагът на прозореца за изглед е написан по следния начин:
- Превъртете до съдържание
- У дома
- Купува
- Обслужване
- Контакти
История Историята на модела Mercedes SL датира от 1954 г. - тогава германците представиха Mercedes 190 SL с две врати на автомобилното изложение в Ню Йорк. Можете да си представите нивото на естетически шок сред посетителите на тогавашния автосалон. Под тялото на завладяващата красота имаше скъсена платформа от седана Mercedes W120 Ponton и стоманен монокок. Окачването беше напълно независимо - с двоен носач отпред и люлеещи се оси отзад. Дължина - 4290 мм, междуосово разстояние - 2400 мм.
Що се отнася до CSS, настройването на максимална ширина е добра идея, това ще спре сайта да се мащабира с огромни екрани, но няма да ви попречи да изрежете страници. Един от основните проблеми при преминаване от фиксирана ширина към плавна са изображенията. В CSS има просто решение на този проблем. Просто задайте ширината на изображението на 100%. Нека също добавим автоматично за височината на изображенията, за да избегнем смачкани изображения в Opera и Safari на малки екрани:
/* Оформление */ #wrapper (ширина: 96%; максимална ширина: 920px; марж: автоматично; подложка: 2%; ) #main (ширина: 60%; марж-дясно: 5%; плаващ: ляв; ) настрани (ширина: 35%; float: дясно; ) /* Лого H1 */ заглавка h1 (височина: 98px; ширина: 216px; float: ляво; display: block; background: url(images/sllogo.png) 0 0 no- repeat; text-indent: -9999px; ) /* Навигация */ header nav ( float: right; margin-top: 40px; ) header nav li ( display: inline; margin-left: 15px; ) header nav ul a ( text-decoration:none; color:#333;) #skipTo ( display: none; ) #skipTo li ( background: #ccc; ) /* Основно изображение*/ #banner (float: left; margin-bottom: 15px; width : 100%;) #banner img (ширина: 100%; височина: авто;)
Вашето изображение ще се появи на родителския си елемент в пълна ширина и ще се свие заедно с него. Просто се уверете, че максималната ширина на изображенията не надвишава максималната ширина на неговия контейнер.
Използване големи изображенияможе да повлияе на времето за зареждане. Следователно за малки екрани, има отзивчив метод за изображения, който открива размера на екрана на потребителя и произвежда по-малко/по-голямо изображение в зависимост от това, което е необходимо. Този метод все още е трудно да се нарече идеален, но все пак си струва да се обмисли.
Превключете основната навигация
Основната причина, поради която трябва да промените навигацията си, е поради минимизирането, което се случва, което може да направи бутоните нечетливи и трудни за щракване. Използването на този метод ще улесни живота на потребителя. Ще забележите също в кода, че сме направили промени в секциите #main и aside, за да ги комбинираме в една колона.
/* Медийни заявки */ @media screen and (max-width: 480px) ( #skipTo ( display: block; ) header nav, #main, aside ( float: left; clear: left; margin: 0 0 10px; width : 100%;) заглавна навигация (поле: 0; фон: #ccc; дисплей: блок; отдолу: 3px; ) заглавие навигация (показ: блок; подравняване: 10 пиксела; подравняване на текста: център;)
Ще забележите, че на някои мобилни устройства уебсайтът ви автоматично ще се свие, за да се побере. на този екран. Тази точка се превръща в проблем, когато трябва да увеличим размера на екрана, за да навигираме през неудобно съдържание.
За да разрешите въвеждането на медийни заявки пълен ефект, типичният оптимизиран за мобилни устройства, адаптивен сайт трябва да съдържа нещо като следното:
Свойството width отговаря за размера на прозореца за изглед. Може да бъде зададен на конкретен брой пиксели, ширина=960, или на стойността на ширината на устройството, която е ширината на екрана в пиксели при 100% мащаб. Свойството initial-scale контролира мащаба при първото зареждане на страницата. Свойствата за максимален мащаб, минимален мащаб и мащабируеми от потребителя свойства контролират как потребителите могат да мащабират страницата (по-голяма/по-малка).
