Адаптивни уеб оформления за мобилни екрани Въведение, съвети и примери

Тази статия е част от нашата "Серия за уеб реагиращ дизайн" - състоящи се от инструменти, ресурси и ръководства, които да ви помогнат да създадете уебсайтове за потребителите на всички платформи. Натисни тук за да видите повече статии от същата серия.

Дизайнерите са по-строги от преди. Ние не само трябва да проектираме за стационарни устройства, но също така и за мобилни устройства като таблета и смартфоните, и тъй като тук говорим за много различни размери на екрана и резолюции, това е огромна задача. В светлината на това, отзивчив уеб дизайн може да бъде най-доброто решение. Той предлага повече от обикновен мобилен шаблон; вместо това, цялото ви оформление на сайта е проектирано така, че да е достатъчно гъвкаво, за да се вмести във всяка възможна разделителна способност на екрана.

При такава схема за проектиране на течности има очевидни ползи и недостатъци. Помислете за моите примери по-долу за това как отзивчивият уеб дизайн може да направи прехода към мобилни устройства по-гладък.

Как действа отзивчивия дизайн

Когато използвам думата “отзивчив” от гледна точка на уеб дизайна, имам предвид, че цялото оформление отговаря на екранната резолюция на потребителя. Представете си този сценарий: четете уебсайт на една таблетка, след което преминавате към друго устройство по една или друга причина. Прозорецът на браузъра вече е променен. Реагиращото оформление на уеб дизайна ще включва схеми и оформление, което грациозно се разрушава и преоткрива. От гледна точка на използваемостта това е брилянтна техника.

Отзивчивият дизайн е свързан с създаването на хомогенен опит, независимо от размера на екрана на браузъра или устройството. Открих идеалния пример от „A List Apart“, за да илюстрирам моята гледна точка, която включва и динамични изображения. Ширината се задава в CSS, като се използват проценти за повечето от вътрешните елементи на контейнера. По-големите уебсайтове също реагират добре на премахването на динамично съдържание, като JavaScript, когато не се поддържат.

Защо дизайн за мобилни устройства?

Стана очевидно, че все повече потребители стават мобилни, а не само за уеб браузър в движение. Таблетните компютри започнаха да се променят в контекста, когато потребителите са онлайн в класната стая. Проектирането за мобилни устройства със сигурност е изискване в съвременните уеб стандарти. Единственият проблем е да избереш метода на развитие и да насочиш целевата си аудитория по подходящ начин.

Когато започнете да кодирате конкретни разделителни способности на екрана, ще получите твърде много стилове, с които да се справите. Медийните заявки в CSS3 могат да се използват за изграждане на специфични за iPhone оформления за портретен и пейзажен изглед. Тъй като можете да предопределите плътността на пикселите е лесно да обновите всеки HTML шаблон за мобилни устройства.

(Източник на изображението: bradfrostweb)

Но когато кодирате оформление за отзивчив дизайн, мобилните аспекти се поемат по подразбиране. Както настолните, така и мобилните потребители ще получат подобен опит и няма нужда да се притеснявате за външните CSS свойства. Единственото изследване, което трябва да извършите, е планирането на възможно най-малкия екран. Данните за трафика от Google Анализ могат да бъдат много полезни за това.

Най-вероятно няма да получите уебсайта си на 100% за всяко устройство, изпълняващо всеки браузър. Но можете да се насочите към мнозинство въз основа на средната ширина на екрана. По-старите модели на iPhone използват резолюция от 320 × 480, която не е толкова невероятна. Бих стрелял с минимална ширина от 240 пиксела, или дори по-малък, ако можете да го поставите.

Премахване на мащаба по подразбиране

Ако сте прекарали всяко време в браузъра в интернет на смартфон, ще забележите как уеб сайтовете са мащабирани, за да се показват изцяло на екрана. Това е за удобство на потребителя, тъй като повечето уебсайтове нямат мобилен партньор, така че пълното оформление е най-сигурният залог.

Но когато влезете в изграждането на отзивчив мобилен дизайн, автоматичното мащабиране наистина може да обърка елементите на оформлението ви. По-конкретно, изображенията и навигационното съдържание може да изглеждат малки или прекалено големи във вашето оформление. Има специален мета маркер, който можете да добавите в заглавието на документа, който го нулира в повечето устройства с Android и iPhone.

Това е известно като мета маркер на изглед който задава някои потребителски променливи в съдържанието. Apple има страница с документация относно няколко други мета тагове, които трябва да разглеждате, въпреки че те са насочени специално към уебсайтове на iOS. Най- Първоначалната мащаб стойността е важна, тъй като по подразбиране вашият уебсайт е с 100% увеличение.

Последната стойност за потребителя мащабируема ще премахне изцяло тази функция за увеличение, така че потребителят да не може да променя размера на оформлението. Това ще заключи дизайна в един размер на базата на пълната ширина на устройството. Имайте предвид, че дори и да забраните функцията за мащабиране, добрият отзивчив дизайн ще се адаптира при преминаване от портрет към пейзаж на всяко устройство! Но има смисъл да заключите отзивчивия дизайн и да премахнете общите опции за мащабиране.

Мащабиране на динамично изображение

Изображенията са друг важен аспект на практически всеки уебсайт. Потребителите на мобилни устройства може да не търсят поточно видео, но снимките са съвсем друга история. Това са и най-големите виновници, когато става дума за излизане от модела на кутията.

img max-width: 100%;

Стандартното правило за CSS е да се приложи свойство max-width към всички изображения. Тъй като те винаги ще бъдат зададени на 100%, никога няма да забележите изкривявания. Когато потребителят преоразмери прозореца на браузъра си по-малък от изображението, което може да обработи, той автоматично ще се коригира отново до 100% ширина. Проблемът е, че Internet Explorer не може да разбере това свойство, така че ще трябва да съберете специална таблица за стилове, използваща IE ширина: 100%;.

Гъвкави изображения също са възможни, ако използвате JavaScript или jQuery плъгини. Има някои наистина интелигентни разработчици, които са поставили време за изграждане на невероятно отзивчиво съдържание. Тази нишка е само една от многото в Stack Overflow, която се отличава с необичаен, но удобен подход за решаване на IE6 / 7 грешки.

Аз лично бих препоръчал да се придържам към естествената промяна на размера на CSS изображението. Ако уебсайтът Ви се изпълнява в мобилен браузър с активиран JavaScript, той най-вероятно ще поддържа и CSS. Ако наистина искате да копаете по-дълбоко, разгледайте тези 24 статии в статията Изображения за адаптивни проекти ...

Докосващи се дизайни

Уеб разработчиците може да забравят, че мобилните потребители вече не са на клавиатурата като BlackBerrys. Повечето смартфони днес използват интерфейси с тъчскрийн, които правят сценарий, различен от настройките на мишката и клавиатурата.

Като такъв ще трябва да разгледате алтернативни решения в мобилните елементи. Падащите менюта могат да работят по-добре, когато се показват като едно меню от дясната страна. Повечето потребители могат да докосват връзки от дясната страна по-лесно от лявата, но и двете колони работят, за да облекчат пространството. С помощта на отстъпки за маржове е лесно да се идентифицира йерархията на връзките, без да се изисква никакъв jQuery код.

Също така е добра практика да се увеличи размерът на тези навигационни връзки. Потребителите на мобилни устройства нямат лукса на големите екрани, предоставяни на настолни компютри или дори на преносими компютри. Трябва да държите текста голям, предварителен, да можете да го четете и да го четете на всяка цена. Може дори да искате да преоразмерите, ако потребителят превключва между портретен и пейзажен изглед - доста често срещано явление при сърфиране в мобилната мрежа.

Персонализирани CSS оформления

Като цяло най-добре е да адаптирате оформлението и да осигурите естествено влошаване на съдържанието ви. Ако имате странична лента и област на съдържанието, трябва да ги зададете в проценти или емс, всичко, което ще промени размера на прозореца на браузъра. Ако приложите a мин ширина това в крайна сметка ще прекъсне част от оформлението; така че съдържанието на страничната ви лента се показва над съдържанието на страницата.

(Източник на изображението: Pepperson)

Когато обмисляте как това влияе върху цялостния дизайн, е много по-лесно да се разработят външни стилове. Въпреки това е вероятно да се сблъскате с разделителни способности на екрана, които са твърде малки за визуализиране на оформлението ви. Това е идеалният сценарий за добавяне на персонализирани CSS свойства за премахване на части от страницата или за преформатиране на съдържанието.

Включване / изключване на допълнително съдържание

Примерите за блокове с голямо съдържание включват уеб форми, динамични менюта, плъзгачи за изображения и други подобни идеи. Вместо да премахнете напълно тези елементи, тъй като оформлението става по-малко, защо не просто да ги скриете в a “сведени до минимум” съдържание div? Можете да използвате CSS или JavaScript за извършване на редакциите, но в крайна сметка вероятно ще ви е необходим някой JS код, за да създадете бутон за превключване.

Тази алтернатива е идеална за поддържане на динамиката на домашната ви страница и пълна с богати уеб медии. Вместо да премахнете напълно падащото меню или да пренаредите структурата на страницата, можете да я скриете в рамките на съдържанието div. Ако потребителят иска да покаже връзките си, те натискат бутон за превключване, за да отворят / затворят менюто.

Това форматиране е просто, интуитивно и лесно за работа с устройства с тъчскрийн. Вътре в div можете да поставите всяко от падащите менюта един до друг в формат на колона. Тъй като размерът на прозореца е още по-малък, те естествено ще паднат един под друг и ще увеличат височината на страницата. И все пак възможността за разрушаване на цялото меню е лесно постижима и само с едно натискане. Това превключващо устройство div също е идеално за плъзгачи на изображения в сътрудничество с динамично оразмеряване на снимки.

Използване на заявки за носители

Ако мобилен екран прекъсне вашата 2 или 3 колона оформление, ще свършите с всяка от областите на съдържанието, подредени един над друг. Целият обект би изглеждал кървящ и може да бъде много объркващ, без да се различават блокови области. По-добра идея е да се добави долна граница на всяка колона, само за мобилни устройства, като се използва външен стилов лист mobile.css.

С тези нови стилове съдържанието ви се разделя на делими секции. Атрибутът носител по-горе е специално проектиран да се насочва към по-стари устройства на iPhone в пейзажен изглед. Но това ще се отнася и за устройства с екрани, по-малки от 480 пиксела. Използвайте това в своя полза, за да можете да определите в коя точка на оформлението “разпада”.

Има още няколко опции, които можете да използвате за откриване на ориентацията на устройството. Това фантастично ръководство за CSS медии може да ви даде няколко идеи. Освен това новият мобилен проект 320 и нагоре предлага шаблон за мобилен CSS @media стилове. Те могат да бъдат включени директно в същия файл на mobile.css и да се прилагат правила за много различни устройства.

 / * Смартфони (портрет и пейзаж) ----------- * / @media само екран и (min-device-width: 320px) и (max-device-width: 480px) / * Styles * / / * Смартфони (пейзаж) ----------- * / @media само екран и (мин-ширина: 321px) / * Стилове * / / * Смартфони (портрет) ---- ------- * / @media само екран и (макс-ширина: 320px) / * Стилове * / / * iPads (портрет и пейзаж) ----------- * / @ екран само за носители и (min-device-width: 768px) и (max-device-width: 1024px) / * Styles * /

(Източник: твърдосвързани заявки за медийни CSS3)

Полезни инструменти

Скелет - красив шаблон за отзивчив мобилен дизайн
Преминаване от адаптивна към пълна отзивчивост

Витрина: Красиви отзивчиви дизайни

Надявам се, че тези съвети и техники за проектиране ще ви насърчат да се насочите към изграждане на вълнуващи отзивчиви оформления не само за мобилни екрани, но и за всяко общо устройство с уеб браузър. За да запазим творческите си сокове, съм събрал малка витрина от отзивчиви мобилни уеб дизайни. Не забравяйте да проверите някои от по-уникалните функции и да споделите мислите си за дизайна или темата в дискусионната област.

затваряне на луната