25-те най-добри отзивчиви уебсайта
През 2012 отзивчивият уеб дизайн наистина се превърна в мейнстрийм. Две години след това Основната статия на Итън Маркот за A List Apart , вече не беше просто концепция. Помолихме някои от водещите светлини отзивчив уеб дизайн - можете да намерите списъка в края на статията - за да изберете най-отзивчивите уебсайтове, стартирали през последните 12 месеца, и ето какво са измислили.
Това е впечатляващ микс, вариращ от лични проекти, които могат да се разхождат без клиент да им диша през врата, до иновативна работа на клиенти за Microsoft, Disney, Currys и Starbucks и някои удобни за бъдещето вътрешни работни места от BBC, The Следваща мрежа и време. Ето ги, по азбучен ред ...
01. Ableton
„Никога не съм виждал Футура да се използва толкова смело!“ - възкликва дизайнер, говорител и автор Elliot Jay Stocks на Edenspiekermann работи за базирания в Берлин разработчик на музикален софтуер Ableton . „Все пак работи, съчетано със смели изображения и жива цветова палитра.“
Стефани Ригер , дизайнер и съсобственик на Yiibu , малка консултантска компания за мобилен дизайн със седалище в Единбург, се съгласява: „Това [е] разкошен, забавен и възхитителен уебсайт. Части от сайта са малко тежки, но предвид публиката, естеството на марката и необходимостта да се включат музика и видео, мисля, че са свършили страхотна работа. Не забравяйте да търсите много малки творчески (и практични) дизайнерски щрихи - като въртящи се етикети на колони в таблица за сравнение на софтуера, за да се поберат по-добре по-малките екрани. '
02. Adobe & HTML
' Този сайт, който показва продуктите на Adobe, свързани с уеб , всъщност е по-скоро адаптивно оформление а не реален отзивчив дизайн “, обяснява дизайнерът и разработчикът Стивън Хей . „Ефективността може да бъде значително подобрена и не обичам навигацията да заема по-голямата част от мястото в горната част на страницата на мобилното устройство.
Причината, поради която споменавам този сайт тук, е, че както адаптивното оформление, така и съдържанието сигнализират, че Adobe, огромна част от софтуера за дизайн на печат, започва да признава съвременната мрежа и нуждите на своите дизайнери. Adobe, със своите дизайнерски корени, има възможност да превърне този сайт в графично привлекателен, изцяло реагиращ дизайн. '
03. Отделно събитие
„Прясно преработеният Отделно събитие е не само прекрасна, но и чудесно изработена “, казва Тим Кадлец , уеб разработчик и автор на Внедряване на отзивчив дизайн . „[Разработчиците] използват SVG икони, когато могат, и се връщат към PNG, ако трябва.
Изображенията се натоварват мързеливо, когато се появят. Например, докато превъртате надолу страница за събития можете да видите изображенията на високоговорителите, които леко избледняват. Всичко това плюс привлекателен и изчистен дизайн! '
04. BBC News
„Най-добрият отзивчив сайт за 2012 г. беше Мобилен уебсайт на BBC News , казва Пол Робърт Лойд , дизайнер в Clearleft и автор на месечната отзивчива колона .net. „Въпреки че все още не се разширява до настолни браузъри по отношение на оформлението, той е отзивчив в истинския смисъл на думата.
„Проектиран с манталитет на първо място за мобилни устройства, той се мащабира, за да отговори красиво на различни характеристики на устройството. Това е фантастичен пример за прогресивно подобрение. Има много дискусии около отзивчивите изображения, но подходът на BBC е откровено прагматичен. Маркировката препраща само към едно изображение, което за историята на заглавието и условното зареждане означава, че само по-способните устройства получават силно оптимизираните изображения за други истории. Сайтът е не само достъпен от всяко устройство, но и невероятно бърз.
„През следващата година бих искал да видя по-голям фокус върху представянето над визуалния дизайн и оформление. В това отношение мобилният сайт на BBC News е чудесен пример за подражание на другите. “
05. Изграждане 2012
„Една от любимите ми части на годината е да видя какво измислят Анди Макмилън и Кайл Майер за новия Изградете конферентен сайт , 'ентусиазира Рейгън Рей , водещ дизайнер и една трета от Паравел .
'Те се отзоваха за версията от 2012 г. и мисля, че това е най-доброто им усилие до момента.'
06. Съдържание
' Списание Съдържание може да има несправедливо предимство със самия Итън Маркот като техен креативен директор - но никой не каза, че изборът ми трябва да бъде справедлив “, казва Мат Маркиз , дизайнер / разработчик, работещ в Filament Group в Бостън и основател и председател на Група на общността за отзивчиви изображения за W3C.
„Съдържанието може да се похвали с красива типография и цялостен дизайн, който запазва съдържанието им - както може да се очаква - отпред и в центъра на всякакъв размер. Дизайнът е подкрепен от илюстрации по издание, които обгръщат копието по различни начини в зависимост от точката на прекъсване. Илюстрациите подобряват дизайна, но никога не служат като разсейване. Истинско удоволствие е да се чете и това всъщност е това, което представлява този „уеб дизайн“. “
07. CSS-трикове
„Отново: избор сайт с името на Крис Койер се чувства малко като изневяра, но справедливо честно - човекът е звяр и се справи адски добре с този редизайн - смее се Мат Маркиз. „Крис управлява безумно полезна информация на сайта си и го прави с дизайн, който не само е логичен и използваем при всеки размер на екрана, но има много индивидуалност.
„Почетно споменаване тук отива на Крис“ codepen.io (все още не реагира напълно при редактиране), което е изключително полезен инструмент за създаване на бързи демонстрации и тестови случаи. Има една невероятна работа там. '
08. Къри
' Къри може да няма това, което смятаме за ниво на дизайн, което имат много агенции и лични сайтове, но го избирам поради неговото значение за по-широкото възприемане на отзивчиви дизайнерски техники. Това е първият наистина мащабен сайт за електронна търговия, който съм виждал, който е прегърнал отзивчив дизайн “, обяснява Джеймс Йънг , креативен директор в Офроуд код .
„Предоставя добро изживяване на редица устройства, докато се занимава с огромно количество съдържание и продукти с всякакви форми и размери и включва лесен за използване процес на закупуване - всичко това в рамките на една кодова база, която очевидно е добре обмислена от Уеб екип на Кърис.
09. dConstruct 2012
„Освен невероятната гама от говорители, dConstruct самият сайт е красиво изработено отзивчиво изживяване “, казва Аз съм Калахан , президент на малка агенция, базирана в Охайо Sparkbox .
„Любимият ми детайл на сайта е навигацията. Обърнете внимание на добавената иконография за по-малко изживяване на изгледа. Това показва, че истинската грижа е била дадена на зоната на докосване и означава имплицитна стойност [поставена] на тези потребители, които разглеждат сайта на по-малки устройства - първоначално манталитет за мобилни устройства. Много добре @clearleft ! '
10. Disney.com
„Когато сайт с медийна сложност на Дисни реагира, наистина демонстрира валидността на подхода за доставяне на мултимедийно съдържание в мрежата “, спомня си Скот Джел , уеб дизайнер / разработчик във Filament Group. „Подценяваният, изчистен дизайн на сайта подчертава богатите изображения от филмите и телевизията на Дисни, които могат да се гледат в сайта на сайта, както и приятното използване на Ajax и history.pushState прави фини, неразболни преходи на страници.
„Сайтът също така наслагва приятна контекстуална интерактивност, като например въртящи се с въртене въртележки за сензорни устройства и навигация на странични бутони на малки екрани.“
11. Fray, брой 3
' Брой 3 на Fray , „оригиналното списание за разказване на истории в мрежата“, беше любимият ми отзивчив дизайн, който видях тази година, и може би най-любимият ми някога “, спомня си Скот Джел. „В допълнение към красивия си отзивчив дизайн на корицата, при който дизайнерските елементи от обложката се използват повторно в оформлението, всяка от статиите в изданието има свой уникален дизайн, насочен към изкуството, подобно на това, което виждаме в печатните списания, но по-рядко в мрежата.
„Много от оформленията включват фино настроен CSS с красив ефект, като изкривеното заглавие и реда на статията„ Брекети “и компенсиращи кавички навсякъде. Само предупреждение: темата на сайта е насочена към възрастни. '
12. Gov.uk
Стивън Хей казва: „The Gov.uk дизайнът е визуално лесен (практически няма изображения), но е ясно какво е неговото намерение: да ви помогне да намерите бързо информация. За правителствените уебсайтове това не е лесна задача. Харесва ми, че този сайт е не само отзивчив, но и идеален пример за това как добре обмисленото съдържание и структура могат да доведат до по-ясна практическа работа на потребителите, независимо от използваното устройство.
„Толкова е важно правителствата да представят информацията си достъпно; Сигурен съм, че простотата на този сайт ще бъде пример, който ще следват други правителствени организации. '
13. Статус на Heroku
„Heroku е услуга за внедряване на уеб приложения, така че този сайт се крие към много техническа аудитория“, казва Скот Джел от втория си избор. ' Сайтът със статуса на Heroku е просто място за наблюдение на времето за работа на услугата, с известия за състоянието на всички текущи инциденти и график на докладите.
„Презентацията на малкия екран е консервативна, но много функционална и семантично богата, с изчистена презентация на списъка. Въпреки това, в по-широките екрани за преглед, хронологията се превръща във вертикална визуализация на данни, където инцидентите се поставят в кутии и се свързват с точки през криви HTML5, изчертани с платно линии, което прави съдържанието по-ангажиращо.
14. Лота Ниеминен
' Умният сайт на Lotta насърчава изследването, тъй като лявата и дясната страна на екрана дразнят съдържанието от съседните секции “, ентусиазира Елиът Джей Стокс.
„Половината очаквах това да се счупи с различна ширина, но поведението остава постоянно през цялото време и комбинира медийни заявки с JavaScript, за да подрежда и оразмерява разумно отделни колони.“
15. Microsoft
'Новото Microsoft сайтът е вълнуващ за мен по толкова много причини “, разкрива Бен Калахан. „Виждането на гигант като Microsoft да застане зад отзивчивия уеб дизайн по този начин наистина показва колко далеч сме стигнали през последните две години. Дизайнът ясно възприема стила Metro и ни дава ниво на чистота и пространство, което липсва на повечето корпоративни сайтове. Съществува и значително количество навигация, което може да бъде истинско предизвикателство да се използва в широк спектър от изгледи и модели за взаимодействие. Обичам факта, че падащите менюта са назад щракнете или докосване [събития] за разлика от : задръжте . Вярвам, че ще видим много повече от това в близко бъдеще, дори при по-големи резолюции. Много добре @ paravelinc ! '
Рейгън Рей, който е работил на сайта, казва: „Трент и Дейв са твърде скромни, за да чуят рога на Паравел, така че ще го направя. С удоволствие изиграхме малка роля в толкова вълнуващо време за Microsoft. Мисля, че това е чудесен пример за голяма корпорация, възприемаща отзивчив дизайн. '
16. Многоъгълник
' Многоъгълник е безумно богат отзивчив сайт за игри, който поставя големите си братя ( IGN , Gamespot , и така нататък) за срам ', похвали Дейв Рупърт , водещ разработчик на Паравел и съ-домакин на ShopTalk с Крис Койер. „Големите графики карат геймърите ми да изтръпват. Интериорните стълбове са невероятна комбинация от художествена насока и отзивчива архитектура. '
17. Бунт
Elliot Jay Stocks коментира: „Простите, центрирани сайтове с една страница може да изглеждат така, сякаш лесно се превръщат в отзивчив дизайн, но са необходими умения, внимание и внимателно око, за да накарате всичко да се пренастрои безпроблемно. Бунт сайтът прави точно това. '
18. Кльощави връзки
- Докато не притежавам нито един кльощави вратовръзки , освен шепа остатъци от 80-те години, прибрани някъде в кош за съхранение, мисля, че този сайт е красиво изпълнен “, казва Бен Калахан. „Обнадеждаващо е също така да се види, че отзивчивите техники се използват на по-сложни сайтове: в този случай, опит за електронна търговия. Навигацията на този сайт е уникална за всички резолюции на прозореца за преглед, но работи изключително добре в малкия край на спектъра. Визуалната му природа е напълно разумна за магазин с такъв размер и остава използваема въпреки използването на : задръжте на сензорни устройства. Много добре @falkowski ! '
19. Starbucks
„Отзивчивият Starbucks.com е страхотно, но още по-вдъхновяващо за нас е уеб-базираното ръководство за стил което идва с него, ' Трент Уолтън , основател на Paravel, посочва. „Той предава мощността на течности / отзивчиво оформление много по-добре от .psd или .pdf кутия.“
20. Татли
„Току-що включих опасен момент в този списък“, предупреждава Мат Маркиз за този временен сайт за татуировки, „така че се извинявам предварително на вас и / или на вашия шеф. Изгорих неудобно време, разглеждайки дизайните Ужасно на различни устройства и никога не ме оставя да искам опит, който мога да получа само на определена точка на прекъсване. Свършиха страхотна работа, като се увериха, че техният сайт се превежда добре на огромен диапазон от размери на устройства / прозорци и може би дори по-важното е, че ми осигуряват сигурен начин да се направя да изглеждам като гадняр. Знаете, така или иначе за няколко дни. '
21. Следващата мрежа
„Въпреки че все още не съм фен на лепкавата странична лента, този сайт е доста невероятен“, признава Дейв Рупърт. „Пространството и типографията създават наистина спокойна среда. Приятно ми е облекчение, когато посетя TNW на таблет: има страхотно усещане и добро изживяване при четене. '
22. Формата на дизайна
„Възприемането на Франк Химеро с отзивчиво четене е вдъхновяващо на всички нива“, казва Трент Уолтън. - Неговата онлайн версия на Формата на дизайна е радост за четене. Ненатрапчивата навигация по глави работи добре и медийната заявка размер на шрифта мащабирането поддържа всичко чудесно пропорционално. '
23. Време
„Следвайки преднината на The Boston Globe, Време направи своя отпечатък в света на отзивчиви новинарски уебсайтове с прилагането му “, аплодира Стивън Хей. „Фактът, че има един по-малко уебсайт за новини в света, който ни предлага връзка към„ пълния уебсайт “на мобилни устройства, вече е достатъчен, но сайтът наистина изглежда добре на мобилни устройства: това е идентичността на времето през цялото време. Някои от текстовете може да са малко малки на някои устройства, но разработчиците са оставили мащабиране на: винаги добра идея. Може да се предприемат някои стъпки за подобряване на производителността, като например обслужване на мащабирани изображения [но] въпреки това, това е стъпка в правилната посока. '
24. Обединени пикселни работници
„Привърженик съм на смелата простота на Обединени пикселни работници а солидното оформление на мрежата и навигационната обработка за малки екрани работи добре “, казва Джеймс Йънг. „Както при сайта Currys, това е сайт за електронна търговия, който улеснява изпълнението на основната ми задача - закупуване на екстри - на всяко устройство.
„Жалко е да отскочите до Shopify, за да завършите покупката си и бих се радвал скоро да видя поне маркова страница за завършване на касата, но все пак е много лесно да си купите тениските.“
„Отзивчивата електронна търговия е трудна, но Pixelworkers изглежда са я разбрали“, добавя Дейв Рупърт. „Страхотна начална страница, страхотни продуктови страници, страхотен поток за плащане. Ако искате да създадете прекрасен отзивчив сайт за електронна търговия, това е вашият бар. '
25. Университет на Нотр Дам
„Обичам някои от нещата Университет на Нотр Дам се е случило под предния капак ', бълнува Тим Кадлец. „Използва RESS, за да намали теглото на страницата на малки екрани. Той също така използва геолокация, за да подобри функцията Campus Tour. Ако сайтът открие, че сте в кампуса, той определя кои места са най-близо и ви предлага упътвания за ходене. Това е полезен начин за използване на контекста на потребителя и възможностите на устройството за подобряване на преживяването. '
Много благодаря на всички наши сътрудници, че избраха техните много любими отзивчиви сайтове от 2012 г. за тази статия: Бен Калахан, Елиът Джей Стокс, Тим Кадлек, Пол Робърт Лойд, Мат Маркиз, Скот Джел, Стефани Ригер, Стефан Хей, Джеймс Йънг и цялото на Паравел: Трент Уолтън, Дейв Рупърт и Рейгън Рей.
Надяваме се, че сте се вдъхновили да разгледате някои от сайтовете. Кажете ни какво мислите за нашата селекция в коментарите и кои сайтове са били вашите любими тази година.
Хареса ли ви това? Прочетете тези!
- Брилянтно Урок за Wordpress подбор
- Крайното ръководство за проектиране на най-добрите лога
- Най-доброто безплатно уеб шрифтове за дизайнери
- Открийте какво следва Разширена реалност
- Изтегли безплатни текстури : висока разделителна способност и готов за използване сега
