50 фантастични инструмента за отзивчив уеб дизайн

Автор: Monica Porter
Дата На Създаване: 17 Март 2021
Дата На Актуализиране: 17 Може 2024
Anonim
Как заработать $ 15,328 Создание шаблонов БЕСПЛАТНО (зара...
Видео: Как заработать $ 15,328 Создание шаблонов БЕСПЛАТНО (зара...

Съдържание

Както е представен / измислен от Итън Маркот както в статията му „Отзивчив уеб дизайн“, така и в най-продаваната му книга, човек се нуждае от три елемента, за да направи сайта отзивчив:

  1. Гъвкава / течна мрежа
  2. Отзивчиви изображения
  3. Медийни заявки

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

Инструменти за започване

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

01. Отзивчиви скици за уеб дизайн

Този набор от отзивчиви листове за скици, дело на Джеръми П. Алфорд, е чудесна отправна точка, за да започнете да очертавате как ще се изместват разделите на страниците в различни резолюции.


02. Отзивчив дизайн на скицник

Ако предпочитате да съхранявате всичките си скици на едно място, тогава може да помислите за тази книга, обвързана с тел, от 50 отзивчиви листа със скици от компанията App Sketchbook.

03. Отзивчиви телени рамки

Една от трудностите при изграждането на адаптивни уебсайтове е използването на телени рамки, за да покаже как ще работи адаптивният дизайн. Джеймс Мелерс от Adobe е събрал този експериментален инструмент, за да покаже как може да работи отзивчивото изграждане на сложни оформления.


04. Модели на оформление на няколко устройства

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

05. Стил плочки

Samanatha Warren's Style Tiles предлага нова техника за дизайн в отзивчивата епоха; а не дизайнерски макети с фиксирана ширина, те са като мостри или дъски за настроение, които показват общия подход на дизайна, без да навлизат в подробни детайли.

Инструменти за гъвкава / течна мрежа

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


06. Система Golden Grid

Джони Корпи, който също разработи Less Framework, наскоро пусна тази нова версия на надеждна мрежа мрежа за отзивчив дизайн. Считана за „сгъваема“, тъй като лесно се адаптира от 16, до осем, до четири колони, системата Golden Grid също така разполага с малко наслагване на браузъра, което излага мрежата на вашите страници за тестване.

07. Foldy960

Талантливите мъже от Paravel, Inc. пуснаха модифицираната мрежа от 960.gs, която използват като основа за своите отзивчиви проекти.

08. SimpleGrid

SimpleGrid, от Conor Muirhead, е създаден с отзивчивост, така че е лесно да стартирате и да работите с вашия отзивчив проект за уебсайт.

09. CSS мрежата от 1140px

Друга страхотна система за отзивчиви мрежи е 1140px CSS Grid от дизайнера на Мелбърн Анди Тейлър, която преминава от широка десктоп резолюция до мобилна.

10. Колонна CSS мрежа мрежа

Системата Columnal grid, създадена от Pulp + Pixels, известен още като креативен директор Ник Горслайн, се основава на мрежата от 1140px, но с някои допълнителни екстри, като например комплект за дизайн с скици и шаблони за каркасни рамки, както и CSS стилове за отстраняване на грешки.

11. Семантична мрежа мрежа

Предварително обработените CSS разширения като Sass и LESS стават все по-популярни и системата Semantic grid на Tyler Tate ги използва за максимален ефект в тази мрежа мрежа, която твърди, че не използва ненужни класове или елементи. Прочетете повече на coding.smashingmagazine.com/2011/08/23/the-semantic-grid-system-page-layout-for-tomorrow/.

12. СУМНИ

Подобно на семантичната мрежова система, SUSY на Oddbird създаде мрежа, която не използва допълнителни маркировки или специални класове, но SUSY е насочена само към потребители на Sass (и нейното разширение, Compass).

13. Gridpak

Gridpak, от Erskine Design, е един от най-новите отзивчиви мрежови генератори наоколо. Позволява ви да зададете колоните и улуците си на множество точки на прекъсване, след което извежда CSS, JavaScript и PNG файлове, така че целият ви екип да работи от една и съща начална точка.

14. Решетка

Все още има лек загадъчен над Gridset, тъй като към момента, в който пиша това, той все още не е издаден. Но инструментът на Mark Boulton Design обещава поръчкови, непредписани, мрежови системи и начин за запазване и управление на вашите мрежи онлайн.

15. По-добра Photoshop мрежа за RWD

Elliot Jay Stocks предлага да се откаже от стария 960px де факто стандарт на мрежата и вместо това да се работи от база 1000px, което улеснява работата с всички процентни изчисления. Ако сте съгласни, той е направил PSD, с който да започнете да работите.

16. Течни решетки

Ако вашият дизайн е силно специализиран и трябва да създадете своя собствена мрежа, можете да го направите с калкулатора на течни мрежи на .net Awards, блестящ номиниран Хари Робъртс.

17. Отзивчив калкулатор

Калкулатор с още пиксели до проценти, но този на Стю Робсън отива стъпка по-далеч от останалите, като генерира всички CSS правила за вас, което означава, че можете просто да ги копирате и поставите във вашите таблици със стилове.

Инструменти за отзивчиви изображения (и текст)

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

18. Отзивчиви изображения

Filament Group измисли начин за изпращане на изображение с подходящ размер въз основа на разделителната способност на екрана. Този експеримент с първоначални изображения за мобилни устройства, които се мащабират отзивчиво и отговорно, изисква наличието на две изображения с различни размери за препратка.

19. Адаптивни изображения

Мат Уилкокс се вдъхнови от инструмента Responsive Images, за да създаде адаптивни изображения, който използва PHP и малко JavaScript, за да обслужва подходящи изображения на устройството на потребителя, без да изисква допълнителна маркировка.

20. Sencha.io Src (бивш Tinysrc)

Sencha предоставя услуга в облак, която изпраща оптимизирани версии на хоствани изображения за размера на устройството, което ги изисква. За да разберете как да го използвате, вижте docs.sencha.com/io/src/.

21. FitText

Още един скъпоценен камък от Paravel, Inc е FitText.js, плъгин jQuery, за да направи уеб типа на заглавието реагиращ на дизайна и устройството. За подробности вижте trentwalton.com/2011/05/10/fit-to-scale/.

22. плочаТекст

Вдъхновен от FitText и алгоритъма SlabType, slabText на Брайън Макалистър е плъгин jQuery, който прави удебелени блокове текст, които преоразмеряват реагиращо, като същевременно се придържат към определена ширина.

Инструменти за медийни заявки

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

23. Respond.js

Единственият проблем с отзивчивия дизайн е, че браузърите, които не могат да четат медийни заявки, остават назад. Това може да не е проблем с вашата целева аудитория, но все пак е добра практика да се настанят потребители в по-стари браузъри. Respond.js, от Scott Jehl, поддържа само свойства min-width и max-width.

За повече вижте filamentgroup.com/lab/respondjs_fast_css3_media_queries_for_internet_explorer_6_8_and_more/.

24. CSS3-Mediaqueries.js

CSS3-Mediaqueries.js, от Wouter van der Graaf, позволява на по-старите версии на IE и други браузъри ефективно да тестват и прилагат всички видове медийни заявки.

25. Adapt.js

Нейтън Смит, автор на оригиналната мрежова система 960.gs, е написал Adapt.js, скрипт, който открива размерите на браузъра и обслужва само необходимите таблици със стилове - като медийни заявки, но без медийни заявки, което означава, че работи и в по-стари браузъри.

26. Categorizr

Това е откриване на устройство, подхождано от обратния ъгъл - скриптът Categorizr на Брет Джанкорд предполага, че устройствата са мобилни, освен ако не е открито друго като настолен или таблет, което ви позволява да обслужвате ресурси на браузърите по симпатичен начин.

Отзивчив дизайн (и мобилни) бойлери

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

27. 320 и нагоре

Andy Clarke's 320 and Up е първият мобилен модел, който се интегрира с много други съвременни инструменти за уеб дизайн, като LESS и Bootstrap (вж. № 30). Това е лек и пъргав начин за бързо стартиране на сайта. Вижте и нашето интервю с Анди, в което той ни разказва повече за новата версия.

28. Без мрежа

Gridless е шаблон за HTML5 и CSS3, който може да служи като основа за вашите отзивчиви дизайни, с фокус върху типографията и съвместимостта на различни браузъри.

29. Скелет

За разлика от предишните две бойлерни плочи, чиято изходна точка е с най-малка резолюция, комплектът за разработка на Skeleton, създаден от Dave Gamache, е базиран на мрежата от 960.gs и се намалява до мобилен. Skeleton също така може да се похвали със страхотна рамка за стилове, която разработчиците да изграждат върху тях.

30. Bootstrap

Построен от Twitter и вече с отворен код, Bootstrap е рамка и поредица от компоненти за бързо влизане в даден сайт онлайн, а от версия две всичките му основни части работят адаптивно.

Приставки, подложки и полифилове

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

31. Адаптивна приставка

Мариос Люблински е написал приставка за WordPress, която обещава да превърне всяка текуща тема на WP в отзивчива. Все още не знам как работи това, тъй като не е публикувано по времето на това писане, но ако изпълни обещанието си, ще бъде много полезно.

32. Сваляне

Обработката на препълване на съдържание работи добре на настолни браузъри, но по-старите мобилни браузъри се справят непоследователно. Полифитът Overthrow от трудолюбивата Filament Group добавя последователно грациозно разграждане на всички устройства, като гарантира, че всички мобилни потребители получават възможно най-доброто изживяване.

33. MediaTable

Приставката jQuery на Marco Pegoraro, MediaTable, работи с Respond.js, за да ви помогне да заобиколите проблема как да показвате големи таблици с данни на устройства с малък екран, като правите отзивчиви колони и добавяте превключвател за показване / скриване, където е подходящо.

„Тестване, тестване: 1-2-3 ...“

Друг аспект на отзивчивия работен процес е да знаете вашите целеви устройства и резолюции и след това да тествате в тях.

34. resizeMyBrowser

resizeMyBrowser, от разработчика на интерфейс Chen Luo, има няколко предварително зададени измерения за прозореца на браузъра ви, за да тества адаптивно проектирани страници или да създаде нова предварителна настройка, ако не можете да намерите тази, която отговаря на вашите нужди.

35. responsivepx

Подобно на resizeMyBrowser, responsivepx, създаден от Remy Sharp, зарежда страниците ви в прозорец, където можете да тествате ширината и височината, за да определите колко добре се задействат вашите медийни заявки и къде са точките на прекъсване в дизайна.

36. Отзивчиво тестване на дизайн

Невероятно полезен инструмент от дизайнера и разработчика Мат Керсли: просто въведете URL адреса на вашия реагиращ сайт в Responsive Design Testing, за да видите как се изобразява при различни размери на браузъра.

37. Отговорникът

Въведете URL и Responsinator ще ви покаже как се показва в много често срещани размери на устройства - с безмилостна роботизирана ефективност. За това са отговорни Тама Пъгсли и Анди Хоуви.

38. Отзивчив.is

Друг емулатор на устройство на страница, Responsive.is ви позволява да въведете URL, след което бързо да го преоразмерите между редица различни предварителни настройки. Направен е от екипа, който стои зад предстоящото приложение Typecast.

39. Screenqueri.es

Още един инструмент за размери на браузъра, но Screenqueri.es от Mandar Shirke се отличава, като разполага с богат набор от предварително зададени настройки за мобилни устройства и таблети, както и решетка и линийки, които улесняват измерването много по-лесно.

40. Aptus

Друго приложение за тестване на сайтове с множество определени размери, но Aptus е роден за Mac. Това е достъпно чрез Mac App Store, а това, че сте роден, носи допълнителни функции като лесни скрийншотове и офлайн поддръжка.

41. Отзивчив букмарк за дизайн

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

42. Отзивчив тест за тестване на маркери

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

43. Screenfly

Screenfly, от QuirkTools, ви позволява да тествате сайт с различни резолюции на настолни компютри, таблети, мобилни устройства и телевизия. Понастоящем тестването на настолни компютри е ограничено до Safari, докато таблетът и мобилният телефон имат повече опции за устройства и браузъри. Телевизията е ограничена до Opera.

44. Индикатор за медийни заявки

Йохан Брук предлага чист CSS начин да тества кога медийна заявка е задействана от браузъра. Индикатор за медийни заявки е друг добър инструмент за тестване и игра с точки за пречупване на дизайна.

45. Шим

Един от инструментите, използвани при редизайна на Бостън Глоуб, момчето на плаката на движението RWD, Shim е приложение Node.js, което изпълнява уеб страница на множество устройства в една и съща Wifi мрежа, което прави тестването на кръстосани устройства много по-лесно .

46. ​​Drive-In

Ако нямате сървър Node.js, за да стартирате Shim, Скот Джел е направил по-опростена версия, наречена Drive-In, която работи по принцип по същия начин, но използвайки PHP, Apache и .htaccess файл.

47. Adobe Shadow

Adobe продължава да се стреми към уеб технологиите с този инструмент за дистанционно отстраняване на грешки. Инсталирайте Shadow и разширението за Chrome на Mac или Windows, плюс клиента Shadow на Android или iPhone и можете да споделяте уеб страници между много различни устройства.

48. Opera Mobile Emulator + Remote Debug

По-лесен начин за отстраняване на грешки в мобилните страници е инсталирането на Opera и Opera Mobile Emulator и свързването на двете с тяхната опция за отдалечено отстраняване на грешки. Лесна и бърза за настройка и има допълнителната полза от тестване на повече от WebKit.

По-нататъшно вдъхновение

Искате ли да получите представа за това как другите правят дизайна им отзивчив?

49. MediaQueri.es

Ако още не сте го виждали, сайтът Mediaqueri.es има постоянно нарастващ брой сайтове, които са преминали към отзивчивата страна.

50. @RWD

Итън Маркот има акаунт в Twitter, който носи най-новите новини, инструменти и витрини от света на RWD.

Дениз Джейкъбс обожава да бъде лектор, автор, обучител на уеб дизайн и евангелизатор на креативност, докато Питър Газстън е автор на „Книгата на CSS3“ и ветеран уеб разработчик, който води блогове в „Broken Links“.

Хареса ли ви това? Прочетете тези!

  • Професионални съвети за изграждане на мобилен уебсайт
  • Топ CSS и JavaScript техники
  • Как да създадете приложение
  • Най-добрите безплатни уеб шрифтове за дизайнери
  • Открийте какво следва за разширената реалност
  • Изтеглете безплатни текстури: висока разделителна способност и готов за използване сега
Предишна Статия

Най-добрите тракпадчета през 2021 година
Следваща Статия

Преглед на Photoshop за iPad
Интересен Днес
Тайните на мускулестото чудовище на самурайски филм
Допълнително

Тайните на мускулестото чудовище на самурайски филм

Може 2024
Сред епичното размахване на грандиозни фантастични пейзажи, съкровеното постижение на Moving Picture Company в самурайския епос 47 Ronin беше потрепващата мускулна анимация на своите Oni, демоничен ха...
Най-добрите дизайни на уебсайтове от 2021 г.
Допълнително

Най-добрите дизайни на уебсайтове от 2021 г.

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

6 съвета за илюстрация на храни от експертите

Може 2024
Разгледайте сега Има специално изкуство за илюстриране на храна. Защото не просто се опитвате да зарадвате окото и да грабнете вниманието на хората: вие в идеалния случай се опитвате да ангажирате се...