Name: Responsive Web Design
ISBN: 9780984442577

Responsive Web Design

From the publisher's website: "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."

What Hacker News says

theeandthyMay 2024

Honestly it just boils down 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 unless building an app, a whole app, and nothing but a mobile app.

thread

runarbergMay 2021

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 should also familiarize your self with accessibility (A11Y). I would imagine A11Y and inclusive web development to be the front and center of a chapter 4 like SICP for web devs. Perhaps My Accessibility Journey: What I’ve Learned So Far[4] by Manuel Matuzović is a good one to start, i.e. opinionated while instructing, in the spirit of SICP.

1: https://alistapart.com/article/responsive-web-design/

2: https://www.smashingmagazine.com/2020/01/understanding-css-g...

3: https://abookapart.com/products/the-new-css-layout

4: https://alistapart.com/article/my-accessibility-journey-what...

thread

didgeoridooJun 2014

Much better.

Unfortunately, checking out the domcop.com site, I'm afraid you guys have a long way to go in making it "responsive". You've solved a lot of the "technical" HTML and CSS challenges — but the design and UX totally melts down at smaller screen sizes, and on devices that are touch-only (try figuring out what those nine menu icons mean without hover events).

Ultimately, there's a lot more to being "responsive" than basic UI acceptance testing on a range of devices. You have to do proper cross-device user testing to see if people can figure out how to move through your interface fluidly. If they can't, you need to redesign certain aspects of your UI.

There's also a strong argument in many cases for not going responsive at all. If your "phone" and "desktop" use cases don't line up well, you may be looking at a situation where an m. site (what is this, 2003?) is actually more appropriate. That way, you can serve a UI specifically optimized to the tasks your users are likely to be performing on a smaller screen.

tl;dr: "Responsiveness" is a UX problem as much as it is a technical problem. Don't ignore the user-facing side of the equation.

Addendum: regarding point 6, "Learn about how responsive design works 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

thread

saidajigumiNov 2013

Smartphones aren't portrait. They can be held in either orientation and the browser will comply. So it's we humans who mostly choose to hold the phone in portrait orientation. There's no single answer, but I'll offer pointers:

- Ergonomics. It's generally easier to hold and handle a smartphone one-handed in portrait.

- Readability. Speaking personally, it's mostly annoying to have wide text lines and a short display height. The exclusive reason I use landscape on the mobile web is when the site doesn't handle 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/

thread

siversOct 2011

"helped" as in "did everything". Andy gets FULL credit for this!

He 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

thread

hinkleyMar 2020

I was pitching responsive (or at least, fluid) design by 2011, and I was not blazing trails. I started using the iPad as an example but tiny laptops were an issue, and in a business setting, most production projectors were only 1024 pixels, hardly anyone had the 1280s, and the cheap ones were 800x600 native with terrible interpolation.

Wikipedia has this timeline:

> Cameron Adams created a demonstration in 2004 that is still online.[46] By 2008, a number of related terms such 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 titled Responsive Web Design. Responsive design was listed as #2 in Top Web Design Trends for 2012 by .net magazine after progressive enhancement at #1.

And while the Garden was indeed around long before that, IMO it didn’t get properly cool until maybe ‘07. And once fluid and responsive came in it wasn’t keeping up.

The point, I thought, was to be able to send people there to learn, and I was afraid of having to fix that kind of smoke and mirrors in our production code so I stopped telling people about it, other than other seasoned UI people fora particular design, and half the time it was to laugh at one, not learn from it.

thread