Responsive Web Design
by Ethan Marcotte · first published 2011
71% recommend29% neutral
Why HN recommends it
A short, practical introduction to responsive web design that starts from the origins of the approach. It suits beginners and developers who want the fundamentals, and it serves as a classic starting point.
Summarised by Claude from recommending comments
From the publisher's [website][1]: "From mobile browsers to netbooks and tablets, users are visiting your sites from an increasing array of devices and browsers. Are your designs ready? Learn how to think beyond the desktop and craft beautiful designs that anticipate and respond to your users’ needs. Ethan Marcotte will explore CSS techniques and design principles, including fluid grids, flexible images, and media queries, demonstrating how you can deliver a quality experience to your users no matter how large (or small) their display." [1]: http://www.abookapart.com/products/responsiv
Affiliate links. As an Amazon Associate I earn from qualifying purchases.
For the front end there is more an assortment of articles, particularly from <https://alistapart.com/> and <https://www.smashingmagazine.com/>. A classic one is Responsive Web Design[1] by Ethan Marcotte. You can also familiarize your self with Rachel Andrew’s work[2] on CSS layout (and I recommend the book The New CSS Layout[3] as a good introduction to layout in modern CSS). You…
on “What’s the web dev equivalent of SICP?” ↗…before you start" — you're confusing learning responsive design with learning how to use Bootstrap. To actually learn responsive design from scratch, a good place to start is Ethan Marcotte's classic Responsive Web Design: http://www.abookapart.com/products/responsive-web-design
on “Lessons learnt making our web app responsive” ↗…used the HTML5 Boilerplate http://html5boilerplate.com/ and Golden Grid System http://goldengridsystem.com/ for the lovely resizable mobile-first design. We're both big fans of Ethan Marcotte's book Responsive Web Design : http://www.abookapart.com/products/responsive-web-design
on “A new responsive Sivers.org” ↗…mobile and the text is just too small even on a high PPI display. Switching to landscape generally increases the text size while keeping each line visible. If you haven't already, search for resources on Responsive Web Design. Ethan Marcotte's essay[1] at A List Apart was a big spark under this movement, and a LOT more has been written and implemented in this vein since that was written. [1] http://alistapart.com/article/responsive-web-design/
on “Why are smartphones portrait?” ↗…to one overhyped method of web design: MOBILE FIRST. Mobile-first designs create gargantuan gaps of information sparseness on any larger form-factor. Folks should go back and re-read ethan marcotte‘a Responsive Web Design. He goes from actually a desktop design and shrinks it down. No mention of mobile-first. So, start with a design, and consider how it works on both form factors EQUALLY. None of this mobile-first crap…
on “What UI density means and how to design for it” ↗…as "flexible", "liquid",[47] "fluid", and "elastic" were being used to describe layouts. CSS3 media queries were almost ready for prime time in late 2008/early 2009.[48] Ethan Marcotte coined the term responsive web design[49] (RWD)—and defined it to mean fluid grid/ flexible images/ media queries—in a May 2010 article in A List Apart.[2] He described the theory and practice of responsive web design in his brief 2011 book…
on “CSS Zen Garden” ↗Well, at that point, it's really just a matter of opinion. I don't have much interest in a lengthy argument about this, but FYI, the term "Responsive Web Design" was coined by Ethan Marcotte in an article for A List Apart in May 2010[1]. What it means is only a No True Scotsman type of argument if you choose to ignore the original source, or maybe if you want…
on “WebFlow” ↗