Несколько примеров применения Responsive Web Design, или Ваш сайт может и должен быть резиновым
Доброго времени суток!
Несколько дней назад, гуляя по интернету, я наткнулся на достаточно интересную подборку [1] сайтов, которые следуют, если можно так сказать, практике под названием Responsive Web Design. В двух словах, эта практика подуразумевает создание «резинового» сайта, который будет тянуться в зависимости от размера окна вашего браузера, или же экрана вашего мобильного телефона. Итак, встречайте наших сегодняшних героев!
Fork CMS
Full view
[2]
Mobile view
[2]
SimpleBits
Full view
[3]
Mobile view
[3]
White Lotus Aromatics
Full view
[4]
Mobile view
[4]
1140px CSS Grid
Full view
[5]
Mobile view
[5]
Atlason
Full view
[6]
Mobile view
[6]
10K Apart
Full view
[7]
Mobile view
[7]
Cognition
Full view
[8]
Mobile view
[8]
Reverse Buro
Full view
[9]
Mobile view
[9]
Sunday Best
Full view
[10]
Mobile view
[10]
Dustin Senos
Full view
[11]
Mobile view
[11]
Clean Air Challenge
Full view
[12]
Mobile view
[12]
Owltastic
Full view
[13]
Mobile view
[13]
320 and up
Full view
[14]
Mobile view
[14]
Yaron Schoen
Full view
[15]
Mobile view
[15]
Build Guild
Full view
[16]
Mobile view
[16]
Do Lectures
Full view
[17]
Mobile view
[17]
Trent Walton
Full view
[18]
Mobile view
[18]
Food Sense
Full view
[19]
Mobile view
[19]
Sparkbox
Full view
[20]
Mobile view
[20]
ribot
Full view
[21]
Mobile view
[21]
Sweet Hat Club
Full view
[22]
Mobile view
[22]
A Different Design
Full view
[23]
Mobile view
[23]
Teixido
Full view
[24]
Mobile view
[24]
Sasquatch Music Festival
Full view
[25]
Mobile view
[25]
Electric Pulp
Full view
[26]
Mobile view
[26]
Stephen Caver
Full view
[27]
Mobile view
[27]
Social Marketer's Summit
Full view
[28]
Mobile view
[28]
Sleepstreet
Full view
[29]
Mobile view
[29]
Porcupine
Full view
[30]
Mobile view
[30]
Interim
Full view
[31]
Mobile view
[31]
Tileables
Full view
[32]
Mobile view
[32]
CalebAcuity
Full view
[33]
Mobile view
[33]
Simon Collision
Full view
[34]
Mobile view
[34]
Spigot Design
Full view
[35]
Mobile view
[35]
Forefathers Group
Full view
[36]
Mobile view
[36]
Deren Keskin
Full view
[37]
Mobile view
[37]
Robot… Or Not?
Full view
[38]
Mobile view
[38]
Arrcamp Conference
Full view
[39]
Mobile view
[39]
Thirst Studios
Full view
[40]
Mobile view
[40]
Visua Design
Full view
[41]
Mobile view
[41]
Made by Splendid
Full view
[42]
Mobile view
[42]
Five Simple Steps
Full view
[43]
Mobile view
[43]
Ryan O'Rourke
Full view
[44]
Mobile view
[44]
dConstruct 2011
Full view
[45]
Mobile view
[45]
Diablo Media
Full view
[46]
Mobile view
[46]
Asbury Agile Web Conference
Full view
[47]
Mobile view
[47]
Также хочу поделиться с вами несколькими ссылочками по данной теме:
- Как сделать один сайт для всех устройств (Responsive Web Design) / Хабрахабр [48]
- Responsive Web Design Book / A Book Apart [49]
- Неплохой русскоязычный блог по Responsive Web Design [50]
- Responsive Web Design / A List Apart [51]
- Responsive Web Design: What It Is and How To Use It / Smashing Magazine [52]
До скорых встреч!
Автор: krovatti
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/css3/4473
Ссылки в тексте:
[1] интересную подборку: http://speckyboy.com/2012/02/29/40-examples-of-brilliant-responsive-website-layouts/
[2] Image: http://www.fork-cms.com/
[3] Image: http://simplebits.com/
[4] Image: http://www.whitelotusaromatics.com/
[5] Image: http://cssgrid.net/
[6] Image: http://atlason.com/
[7] Image: http://10k.aneventapart.com/
[8] Image: http://cognition.happycog.com/
[9] Image: http://reverseburo.com/
[10] Image: http://sundaybestdesigns.com/
[11] Image: http://dustinsenos.com/
[12] Image: http://clearairchallenge.com/
[13] Image: http://owltastic.com/
[14] Image: http://stuffandnonsense.co.uk/projects/320andup/
[15] Image: http://yaronschoen.com/
[16] Image: http://buildguild.org/
[17] Image: http://www.dolectures.com/
[18] Image: http://trentwalton.com/
[19] Image: http://foodsense.is/
[20] Image: http://seesparkbox.com/
[21] Image: http://ribot.co.uk/
[22] Image: http://sweethatclub.org/
[23] Image: http://adifferentdesign.be/
[24] Image: http://teixido.co/
[25] Image: http://sasquatchfestival.com/
[26] Image: http://electricpulp.com/
[27] Image: http://stephencaver.com/
[28] Image: http://www.socialsummit.cz/en
[29] Image: http://www.sleepstreet.be/
[30] Image: http://porcupine.gr/
[31] Image: http://interim.it/
[32] Image: http://tileabl.es/
[33] Image: http://calebacuity.us/
[34] Image: http://colly.com/
[35] Image: http://spigotdesign.com/
[36] Image: http://forefathersgroup.com/
[37] Image: http://www.deren.me/
[38] Image: http://robot-or-not.com/
[39] Image: http://arrrrcamp.be/
[40] Image: http://thirststudios.com/
[41] Image: http://visuadesign.com/
[42] Image: http://www.madebysplendid.com/
[43] Image: http://www.fivesimplesteps.com/
[44] Image: http://rourkery.com/
[45] Image: http://2011.dconstruct.org/
[46] Image: http://diablomedia.com/
[47] Image: http://asburyagile.com/
[48] Как сделать один сайт для всех устройств (Responsive Web Design) / Хабрахабр: http://habrahabr.ru/post/125247/
[49] Responsive Web Design Book / A Book Apart: http://abookapart.com/articles/responsive-web-design
[50] Неплохой русскоязычный блог по Responsive Web Design: http://wedeal.ru
[51] Responsive Web Design / A List Apart: http://alistapart.com/articles/responsive-web-design/
[52] Responsive Web Design: What It Is and How To Use It / Smashing Magazine: http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
Нажмите здесь для печати.