RWD - Articles

rwd

https://elsyms.com/how-to-make-your-responsive-mobile-website-hurt-my-heart/
https://dollarshaveclub.github.io/reframe.js/
https://alastairc.ac/2017/06/the-responsive-order-conflict/
https://www.sitepoint.com/taking-responsive-web-design-beyond-the-visual/
https://ethanmarcotte.com/wrote/on-container-queries/
https://www.sitepoint.com/responsive-css-patterns-without-media-queries/
http://allthingssmitty.com/2016/12/12/responsive-video-resizing/
https://ishadeed.com/article/vertical-media-queries/
https://www.sitepoint.com/google-launches-web-starter-kit/
http://webdesign.tutsplus.com/tutorials/building-a-responsive-layout-with-skeleton-widescreen--webdesign-7473
http://www.sitepoint.com/how-to-build-responsive-images-with-srcset/
http://www.sitepoint.com/what-do-super-high-res-displays-mean-for-your-website/
http://www.sitepoint.com/responsive-web-design-where-do-we-go-from-here/

http://www.sitepoint.com/5-responsive-design-pitfalls-and-how-to-avoid-them/
http://www.sitepoint.com/watch-responsive-images-with-picturefill-js/
http://www.sitepoint.com/5-responsive-design-pitfalls-and-how-to-avoid-them/
http://www.sitepoint.com/cutting-the-mustard-with-css-media-queries
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
http://www.sitepoint.com/improving-responsive-web-design-ress
http://www.sitepoint.com/responsive-images-wurfl-image-tailor
http://www.sitepoint.com/introduction-mobile-first-media-queries/
http://www.sitepoint.com/responsive-data-tables-comprehensive-list-solutions
http://www.sitepoint.com/device-detection-apps-wurfl-js
http://www.sitepoint.com/beyond-media-queries-time-get-elemental/
http://www.sitepoint.com/improving-responsive-images-picture-element
http://www.sitepoint.com/media-queries-width-vs-device-width
http://www.sitepoint.com/improving-responsive-images-picture-element/
http://nikolay.rocks/2015-06-19-responsive-sidebar

http://alistapart.com/article/responsive-web-design - done reading
http://webdesign.tutsplus.com/articles/life-beyond-960px-designing-for-large-screens--webdesign-7348 - done reading
http://alistapart.com/article/putyourcontentinmypocket - done reading
http://www.alistapart.com/articles/return-of-the-mobile-stylesheet - done reading

http://www.sitepoint.com/super-fast-responsive-layouts-jeet/
http://www.w3.org/TR/mobile-bp/
http://www.w3.org/blog/2008/06/about-the-love-w3org-redesign/
http://alistapart.com/article/pocket
http://www.sitepoint.com/best-size-website/ - There is No Best Size for a Website (we have to support multiple resolutions)
http://bradfrost.com/blog/post/the-top-25-responsive-design-tools/
http://www.sitepoint.com/title-css-simple-approach-css-class-naming/
https://www.codementor.io/css/tutorial/responsive-design-guidelines-always-design-mobile-first
http://line25.com/articles/responsive-web-design-articles-tutorials-guides - Responsive Web Design Articles, Tutorials & Guides
http://net.tutsplus.com/tutorials/html-css-techniques/responsive-web-design-a-visual-guide/ - Responsive Web Design: A Visual Guide

http://trentwalton.com/2012/06/19/fluid-type/
http://www.nngroup.com/articles/screen-resolution-and-page-layout/
http://www.webdesignerdepot.com/2011/05/big-vs-small-challenges-in-responsive-web-design/
http://www.hobo-web.co.uk/best-screen-size/
http://www.slideshare.net/theresaneil/all-the-screens-cross-platform-design-strategies
http://informationarchitects.net/blog/responsive-typography-the-basics/
http://stuffandnonsense.co.uk/projects/320andup/
http://gridsetapp.com/
http://www.lukew.com/ff/entry.asp?1514
http://www.thismanslife.co.uk/projects/lab/responsivewireframes/
http://www.maxdesign.com.au/articles/em/

http://www.smashingmagazine.com/2011/10/07/16-pixels-body-copy-anything-less-costly-mistake/
http://code.tutsplus.com/tutorials/diving-into-css-regions--net-25061

http://www.sitepoint.com/better-responsive-website-testing-google-chrome/

http://www.sitepoint.com/understanding-responsive-web-design-how-to-manage-fonts/
http://www.sitepoint.com/responsive-web-design-tips-and-notes/
http://www.sitepoint.com/responsive-web-design-fluid-layouts/
http://www.sitepoint.com/responsive-web-design-grid-layouts/
http://www.sitepoint.com/understanding-responsive-web-design-how-to-manage-images/
http://www.sitepoint.com/understanding-responsive-web-design-cross-browser-compatibility/

http://www.sitepoint.com/consensus-responsive-image-problem/
http://www.sitepoint.com/responsive-images-part-1-using-srcset
http://blog.crazyegg.com/2013/10/29/improve-performance-and-ux-in-responsive-web-design
http://www.sitepoint.com/ethical-dilemmas-web-accessibility
http://www.sitepoint.com/fix-chrome-animation-flash-bug
http://www.sitepoint.com/create-calendar-icon-html5-css3
http://www.sitepoint.com/contributing-open-source-dillinger-case-study
http://www.sitepoint.com/responsive-design-can-go-wrong
http://www.lukew.com/ff/entry.asp?1760
http://www.sitepoint.com/optimizing-responsive-design-websites-for-performance
http://www.sitepoint.com/4-common-responsive-web-design-pitfalls
http://designfestival.com/build-a-responsive-design-using-960-grid/
http://www.sitepoint.com/common-techniques-in-responsive-web-design
http://www.sitepoint.com/build-a-responsive-mobile-friendly-website-from-scratch-getting-mobile
http://www.sitepoint.com/viewport-resizer-bookmarklet/
http://alistapart.com/article/goingtoprint
http://alistapart.com/article/application-cache-is-a-douchebag
http://www.developer.nokia.com/Resources/Library/Web/#!nokia-browsers/nokia-browser-85-for-meego-12-harmattan/viewport-support.html
http://cubiq.org/add-to-home-screen
http://bradfrostweb.com/blog/web/responsive-nav-patterns/
http://stephanierieger.com/a-plea-for-progressive-enhancement/
http://bradfrostweb.com/blog/mobile/a-tel-tale-sign/
http://diveintohtml5.info/forms.html
http://www.sitepoint.com/build-a-responsive-mobile-friendly-website-from-scratch-responsive-rules/
http://www.sitepoint.com/7-responsive-web-design-tips/
http://adactio.com/journal/5429/ - Conditional CSS
http://css-tricks.com/css-media-queries/
http://css-tricks.com/content-folding/
http://bradfrostweb.com/blog/web/responsive-nav-patterns/
http://radiatingstar.com/remember-about-vertical-media-queries
http://alistapart.com/article/fluidgrids
http://zomigi.com/blog/hiding-and-revealing-portions-of-images/
http://zomigi.com/blog/creating-sliding-composite-images/
http://zomigi.com/blog/foreground-images-that-scale-with-the-layout/
http://zomigi.com/blog/essential-resources-for-creating-liquid-and-elastic-layouts/
http://www.quirksmode.org/blog/archives/2010/08/combining_media.html
http://www.webcredible.co.uk/user-friendly-resources/web-usability/mobile-guidelines.shtml
http://www.whatcreative.co.uk/blog/tips/designing-for-touch-screen/

http://www.sitepoint.com/rwd-its-not-desktop-vs-mobile/ - printed
http://www.sitepoint.com/rwd-scrollbars-is-chrome-better/ - printed
http://www.sitepoint.com/designing-experiences-for-responsive-web-sites/ - printed
http://www.sitepoint.com/building-a-responsive-website-introduction/ - printed
http://buildmobile.com/build-a-responsive-mobile-friendly-website-from-scratch-design-a-mockup/ - printed
http://buildmobile.com/build-a-responsive-mobile-friendly-website-from-scratch-dive-into-the-code/ - printed
http://www.sitepoint.com/build-a-responsive-mobile-friendly-website-from-scratch-css-stylesheet - printed

http://www.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/ - Responsive Web Design: What It Is and How To Use It - printed
http://developers.facebook.com/blog/post/599/ - Responsive Design Essentials: Look Great on any Device - printed
Smarter Web Designs: Responsive and Customizable - printed
Understanding the Elements of Responsive Web Design - printed
http://www.sitepoint.com/7-things-your-desktop-envies-from-your-mobile-site/ - printed
http://css-tricks.com/notes-agency-starting-their-first-responsive-web-project/ - printed
http://coding.smashingmagazine.com/2012/08/20/towards-retina-web/ - printed
http://mobile.smashingmagazine.com/2012/07/19/do-mobile-desktop-interfaces-belong-together/ - printed
http://mobile.smashingmagazine.com/2012/08/22/separate-mobile-responsive-website-presidential-smackdown/ - printed

http://net.tutsplus.com/tutorials/html-css-techniques/responsive-grids-with-susy/ - no printing needed yet
http://coding.smashingmagazine.com/2011/10/25/rapid-prototyping-for-any-device-with-foundation/ - no printing needed yet
http://coding.smashingmagazine.com/2012/03/19/gridpak-the-responsive-grid-generator/ - no printing needed yet
http://techcrunch.com/2012/08/29/if-content-is-king-multiscreen-is-the-queen-says-new-google-study/ - no printing needed yet
http://www.alistapart.com/articles/fluidgrids/ - no printing needed yet
http://www.campaignmonitor.com/blog/post/3116/what-you-can-learn-from-panics-email-marketing/ - no printing needed yet

http://readwrite.com/2011/10/28/how_to_build_a_site_that_looks_great_on_every_scre - printed
http://uxdesign.smashingmagazine.com/2012/05/30/design-process-responsive-age/ - printed
http://css-tricks.com/which-responsive-images-solution-should-you-use/ - printed
http://alistapart.com/article/responsive-images-and-web-standards-at-the-turning-point - printed
http://www.webdesignerdepot.com/2012/07/adaptive-images-solving-the-responsive-image-problem/ - printed
http://coding.smashingmagazine.com/2012/08/13/coding-qa-with-chris-coyier-responsive-sprites-responsive-font-sizing-media-query-efficiency-more/ - printed
http://www.alistapart.com/articles/dao/ - printed
http://christianheilmann.com/2012/05/17/brvty/ - printed
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries - printed
http://css-tricks.com/css-media-queries/ - printed
http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/ - printed
http://www.techrepublic.com/blog/webmaster/how-to-create-media-queries-in-responsive-web-design/1789 - printed
http://www.webdesignerdepot.com/2012/07/insider-views-on-responsive-design-the-debate-continues/ - printed
http://alistapart.com/article/stop-forking-with-css3 - printed

http://www.lukew.com/ff/entry.asp?933
Device Classes & Responsive Design
Responsive questions
http://speckyboy.com/2012/05/10/responsive-design-101
http://adactio.com/journal/5474/
http://build.codepoet.com/2012/05/11/wordpress-meet-responsive-design/
http://speckyboy.com/2012/06/04/bing-google-recommend-responsive-web-design/
http://www.lukew.com/ff/entry.asp?1562
http://www.lukew.com/ff/entry.asp?1569
http://www.lukew.com/ff/entry.asp?1565
http://www.lukew.com/ff/entry.asp?1572
http://www.lukew.com/ff/entry.asp?1583
http://www.lukew.com/ff/entry.asp?1586
http://www.lukew.com/ff/entry.asp?1436
http://www.lukew.com/ff/entry.asp?1594
http://www.lukew.com/ff/entry.asp?1599
http://www.lukew.com/ff/entry.asp?1601

http://www.lukew.com/ff/entry.asp?1392 - RESS: Responsive Design + Server Side Components - done reading
http://www.creativebloq.com/responsive-web-design/getting-started-ress-5122956 - Getting started with RESS
http://www.slideshare.net/dmolsenwvu/ress-an-evolution-of-responsive-web-design
http://dmolsen.com/2012/02/21/ress-and-the-evolution-of-responsive-web-design/
http://detector.dmolsen.com/demo/mustache/
http://www.lukew.com/ff/entry.asp?1509 - Which One: Responsive Design, Device Experiences, or RESS?
http://www.lukew.com/ff/entry.asp?1436 - Multi-Device Web Design: An Evolution
http://blog.cloudfour.com/other-mobile-first-responsive-web-design-challenges/
http://fitvidsjs.com/
http://webdesignerwall.com/tutorials/css-elastic-videos
http://css-tricks.com/responsive-data-tables/
https://speakerdeck.com/scottjehl/responsive-responsible
http://alistapart.com/article/responsive-images-how-they-almost-worked-and-what-we-need
http://www.slideshare.net/4nd3rsen/ress-responsive-design-server-side-components-10084972
http://erikrunyon.com/2012/05/a-case-for-ress/
http://www.mstoner.com/blog/uncategorized/reinventing_the_wheel_the_innovation_behind_notre_dames_unique_new_homepage/
http://www.lukew.com/presos/preso.asp?21 - First Person User Interfaces
http://www.lukew.com/ff/entry.asp?967 - Why Care About First Person User Interfaces?
http://www.lukew.com/ff/entry.asp?965 - First Person User Interfaces from Google
http://www.lukew.com/ff/entry.asp?1320 - Video: First-Person User Interfaces
http://www.lukew.com/ff/entry.asp?1112 - An Event Apart: Hardboiled Web Design
http://www.lukew.com/ff/entry.asp?1111 - An Event Apart: Message and Medium
http://www.lukew.com/ff/entry.asp?1108 - An Event Apart: Anatomy of a Design Decision
http://www.lukew.com/ff/entry.asp?1105 - An Event Apart: The CSS3 Experience
http://www.lukew.com/ff/entry.asp?1107 - An Event Apart: Emotional Interface Design
http://www.lukew.com/ff/entry.asp?1106 - An Event Apart: Object Oriented CSS
http://www.lukew.com/ff/entry.asp?1117 - Mobile First Helps with Big Issues
http://www.lukew.com/ff/entry.asp?1120 - Video: Mobile First Interview
http://www.lukew.com/ff/entry.asp?1115 - Two Key Screens in Social Apps
http://www.lukew.com/ff/entry.asp?1130 - More on Gradual Engagement
http://www.lukew.com/ff/entry.asp?1147 - Web App Masters: Backstage with 37signals
http://www.lukew.com/ff/entry.asp?1148 - Web App Masters: Designing the Social In
http://www.lukew.com/ff/entry.asp?1146 -Web App Masters: Escaping Navigation Hell
http://www.lukew.com/ff/entry.asp?1145 - Web App Masters: Serious Play
http://www.lukew.com/ff/entry.asp?1144 - Web App Masters: Where Worlds Collide
http://www.lukew.com/ff/entry.asp?1152 - Input: Moving Beyond Forms
http://www.lukew.com/ff/entry.asp?1151 - Web App Masters: A Simple Ladder of Engagement
http://www.lukew.com/ff/entry.asp?1150 - Web App Masters: Care of a Corporate Cash Cow
http://www.lukew.com/ff/entry.asp?1149 - Web App Masters: Designing for Interesting Moments
http://www.lukew.com/ff/entry.asp?1153 - Web App Masters Tour Summary
http://www.lukew.com/ff/entry.asp?1169 - Sketch Notes for Recent Talks
http://www.lukew.com/ff/entry.asp?1173 - Event: The Conversation
http://www.lukew.com/ff/entry.asp?1175 - Video: Designing with Keynote?
http://www.lukew.com/ff/entry.asp?1176 - Fast and Real
http://www.lukew.com/ff/entry.asp?1177 - Mobile First in .net Magazine
http://www.lukew.com/ff/entry.asp?1393 - Breaking Dev: There Is No Mobile Web
http://www.lukew.com/ff/entry.asp?1394 - Breaking Dev: Pragmatic Responsive Design
http://www.lukew.com/ff/entry.asp?1395 - Breaking Dev: Breaking the Mobile Web
http://www.lukew.com/ff/entry.asp?1396 - Breaking Dev: Buttons are a Hack
http://www.lukew.com/ff/entry.asp?1397 - Breaking Dev: Casting Off Desktop Shackles
http://www.lukew.com/ff/entry.asp?1398 - Breaking Dev: Faster Mobile Anyone?
http://www.lukew.com/ff/entry.asp?1399 - Breaking Dev: Mobile Apps Must Die
http://www.lukew.com/ff/entry.asp?1400 - Breaking Dev: The Cross-Channel Experience
http://www.lukew.com/ff/entry.asp?1402 - Breaking Dev: Selling the Mobile Web
http://www.lukew.com/ff/entry.asp?1401 - Breaking Dev: Client-Side Adaptation
http://www.lukew.com/ff/entry.asp?1404 - Breaking Dev: Responsible & Responsive
http://www.lukew.com/ff/entry.asp?1403 - Breaking Dev: Adaptation
http://www.lukew.com/ff/entry.asp?1181 - Event: Washington DC UPA
http://www.lukew.com/ff/entry.asp?1182 - Event: An Event Apart, Washington DC
http://www.lukew.com/ff/entry.asp?1187 - Text Input on Mobile is Hard But…
http://www.lukew.com/ff/entry.asp?1259 - Mobile UX Essentials
http://www.lukew.com/ff/entry.asp?1535 - An Event Apart: Properties of Intuitive Web Pages
http://www.lukew.com/ff/entry.asp?1431 - An Event Apart: Design Principles
http://www.lukew.com/ff/entry.asp?1433 - The Responsive Designer's Workflow
http://www.lukew.com/ff/entry.asp?1434 - Adaptive Web Content
http://www.lukew.com/ff/entry.asp?1035 - Web App Masters: Designing The Social In
http://www.lukew.com/ff/entry.asp?1043 - Application Maps
http://www.lukew.com/ff/entry.asp?1044 - More Design Principles at Microsoft
http://www.lukew.com/ff/entry.asp?1031 - Web App Masters: When Worlds Collide
http://www.lukew.com/ff/entry.asp?1048 - An Event Apart: Put Your Worst Foot Forward
http://www.lukew.com/ff/entry.asp?1049 - An Event Apart: Object Oriented CSS
http://www.lukew.com/ff/entry.asp?1052 - An Event Apart: Anatomy of a Design Decision
http://www.lukew.com/ff/entry.asp?1050 - An Event Apart: The CSS3 Experience
http://www.lukew.com/ff/entry.asp?1051 - An Event Apart: Emotional Interface Design
http://www.lukew.com/ff/entry.asp?1066 -IA Summit: The Human Interface
http://www.lukew.com/ff/entry.asp?1067 - IA Summit: From Here to Experience
http://www.lukew.com/ff/entry.asp?1064 - IA Summit: The Mobile Question
http://www.lukew.com/ff/entry.asp?1065 - IA Summit: The Future of Wayfinding
http://www.lukew.com/ff/entry.asp?1061 - IA Summit: Online & Real Life Social Networks
http://www.lukew.com/ff/entry.asp?1063 - IA Summit: The Future of Search
http://www.lukew.com/ff/entry.asp?1062 - IA Summit: Designing Influence in Organizations
http://www.boxesandarrows.com/view/ia-summit-10-day-2 - IA Summit 10 - Day 2
http://www.boxesandarrows.com/view/ia-summit-10-day-3 - IA Summit 10 - Day 3
http://www.lukew.com/ff/entry.asp?1060 - IA Summit: Richard Saul Wurman Keynote
http://www.lukew.com/ff/entry.asp?1059 - IA Summit: This Is Your Brain On Design
http://www.lukew.com/ff/entry.asp?1058 - IA Summit: Conversion Rates
http://www.lukew.com/ff/entry.asp?1057 - IA Summit: An IA in Business School
http://www.lukew.com/ff/entry.asp?1056 - IA Summit: Pervasive Information Architecture
http://www.boxesandarrows.com/view/ia-summit-10-whitney - IA Summit 10 - Whitney Hess Keynote
http://www.boxesandarrows.com/view/ia-summit-10-richard - IA Summit 10 - Richard Saul Wurman Keynote
http://www.boxesandarrows.com/view/ia-summit-10-dan - IA Summit 10 - Dan Roam Keynote
http://www.boxesandarrows.com/view/ia-summit-10-day-1
http://adactio.com/journal/1691/ - dConstruct 2010
http://adactio.com/journal/1692/ - OAuthypocrisy and the Passwordpocalypse
http://adactio.com/journal/4860/ - The Language of the Web
http://adactio.com/journal/1657/ - Audionicity
http://adactio.com/journal/1671/ - Tools of a different trade
http://adactio.com/journal/1670/ - Sketchleft
http://adactio.com/journal/1679/ - dConstructable
http://adactio.com/journal/5272/ - Prix Fixe
http://adactio.com/journal/5253/ - Webstocked
http://adactio.com/journal/5256/ - Getting ahead in advertising
http://adactio.com/journal/5405/ - AudioGO
http://adactio.com/journal/5414/ - Conditionally loading content
http://www.smashingmagazine.com/2010/04/10/holistic-web-browsing-4-trends-of-the-future/ - Holistic Web Browsing: Trends Of The Future
http://www.wait-till-i.com/2010/04/21/always-outnumbered-never-outgunned-speaking-out-event-at-london-city-hall/
http://www.wait-till-i.com/2010/05/18/building-a-mashup-with-government-data-warwickshire-info/ - Building a mashup with Government Data
http://www.wait-till-i.com/2010/05/27/speaking-at-barcamps-its-not-that-complicated/
http://www.wait-till-i.com/2010/05/21/ttmmhtm-google-delivers-guardian-delivers-and-some-more-developer-goodies/
http://www.wait-till-i.com/2010/06/03/progressing-and-enhancing-my-talk-at-swdc-2010/
http://www.wait-till-i.com/2010/06/04/scaling-ideas-and-principles-my-talk-at-launch48/
http://www.wait-till-i.com/2010/06/18/apps-for-good-an-it-for-good-programme-with-an-educational-edge/
http://www.wait-till-i.com/2010/07/01/mozilla-add-on-workshop-and-firefox4-with-html5-css3-and-svg/
http://www.wait-till-i.com/2010/08/06/ttmmhtm-apps-competitions-libraries-how-to-run-a-company-and-more/
http://www.wait-till-i.com/2010/09/07/google-goes-bubbly-interactive-logo-today-on-the-uk-homepage-plus-source/
http://www.wait-till-i.com/2010/11/25/talk-nerdy-to-me-how-to-talk-to-tech-audiences-speaking-out

Viewport / Device pixels / CSS pixels:

http://www.quirksmode.org/blog/archives/2010/12/the_fifth_posit.html
http://hacks.mozilla.org/2010/05/upcoming-changes-to-the-viewport-meta-tag-for-firefox-mobile/
http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html
https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag

http://www.quirksmode.org/mobile/viewports.html - done reading
http://www.quirksmode.org/mobile/viewports2.html - done reading
http://www.quirksmode.org/blog/archives/2010/05/a_tale_of_two_v.html - done reading

Media Queries:

http://www.sitepoint.com/media-queries-look-different-media-features/
http://www.sitepoint.com/5-uses-vertical-media-queries/
http://www.w3.org/TR/css3-mediaqueries/

http://www.alistapart.com/articles/responsive-web-design/ - Responsive Web Design - done reading
http://blog.bloop.co/the-practicalities-of-css-media-queries-lesso - The practicalities of CSS Media Queries, lessons learned - done reading

CSS Units:
http://www.sitepoint.com/look-at-length-units-in-css/ - done reading

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License