The Author Online Book Forums are Moving

The Author Online Book Forums will soon redirect to Manning's liveBook and liveVideo. All book forum content will migrate to liveBook's discussion forum and all video forum content will migrate to liveVideo. Log in to liveBook or liveVideo with your Manning credentials to join the discussion!

Thank you for your engagement in the AoF over the years! We look forward to offering you a more enhanced forum experience.

mdonahue (20) [Avatar] Offline
There are a lot of things to cover so I'm going to add them one section at a time.

section 1.1.1

“What exactly is “the responsive web”?” - there is no “the responsive web” there is responsive web design.

“…so the responsive web strives to standardize development patterns through a flexible and adaptive experience to accommodate users with screens of all sizes.” - standardization would imply there’s a governing body to oversee and define standards which there is not for responsive design. All that responsive intends to do is make content more flexible.

“Bandwidth and screen resolutions have stabilized,…” - it would be better to say “Bandwidth and screen resolutions were relatively stable compared to today,…” They never were truly stable.

“These expectations gave us an anticipated standard,…” - No, we all agreed to what Jeremy Keith calls a consensual hallucination.

“Mobile-optimized websites have been around for over a decade.” - Not really. They only really came about after 2007 and the introduction of iPhones. Before that they were extremely rare and incredibly basic.

“With about 10% of traffic (and more all the time)” - this statistic is highly dependent and can vary significantly from site to site. Also it would read better with “growing” instead of “more”

“Because responsive web design relies on media queries to adjust to page width, the responsive web requires CSS3 support and will require updating to HTML5.” - what is required is browser that understands media queries. You can use media queries with HTML4

“A responsive site delivers faster and heightens user experience. By developing mobile sites first, an emphasis is placed on efficiency.” - this is completely wrong. faster than what? heighten compared to what? Mobile first doesn’t emphasize efficiency, it’s about the users context and playing to the strengths and avoiding the weaknesses of the mobile platform.

“Traditional web development takes a waterfall approach.” rresponsive can be done in a waterfall approach. what needs to change is the design approach. using tools that better reflect the fluid nature of responsive or even designing in the browser.

Figure 1.3 - I think I mentioned this before, clockwise arrows indicate going forward while counter-clockwise indicating going backwards.

“By optimizing for mobile first, you prioritize load times from the beginning of development. Faster sites are always better.” again, mobile first is about more than performance, a lot more. You’re short changing the benefits of mobile first by focusing on this one aspect.

“Cross-browser layout issues can actually be easier to resolve with fluid CSS.” - How? Easier compared to what?

Message was edited by: Mike Donahue
mdonahue (20) [Avatar] Offline
Re: Chapter 1, MEAP v13
section 1.1.2

“The responsive web couldn’t exist as it is without a few key components: media queries and breakpoints.” You only mention 2 keys, so “couple” would be correct, not “few”.

“These features are what create cross-browser support…” - media queries and breakpoints don’t actually create cross-browser support. You need a browser that support them. The second half of the sentence is all they do.

“Media queries come from a specification in the 2001 working draft of the W3C CSS3 proposal…” - while true, this doesn’t really add anything to the story. You don’t lose anything by removing it.

“…and they’re the life and spirit of the responsive web.” - it’s more on target to say they’re the magic sauce than life and spirit. Flexibility and One Web are the life and spirit, media queries just help us get there.

“(because of how vague it is, in practice this particular media query is pretty useless, but it’s simplicity makes it helpful in getting the idea across).” - showing useless examples to new users will only confuse them. Use a practical example and break it down for them.

“The biggest difference between these two methods is that by serving the separate stylesheet for mobile, you have additional HTTP requests for each stylesheet. The browser will only load the stylesheets that pass the media query, so this can be used strategically to limitthe total amount of CSS used on a page.” - Actually all css files get loaded because browsers pre-fetch them. Also a typo “limitthe” should be 2 words.

“These media queries are what are called “expressions,” and they’re the parameters that the browser checks.” - no, the part in the parentheses is the expression, actually I believe the correct term is attribute

“browser agent,” - it’s the browser’s user agent string

“…you need to set bars…” - why call this a bar here while referring to breakpoints earlier?

“…where you alter your layout to fit the needs of the changing context.” - it’s not about the context changing. You add a break point when your content looks bad. You basically say this later so why say something different here?

Figure 1.4 - this is too abstract to be useful. show some common sizes 320, 768, 1024 make it more clear.

“This is what is called a “breakpoint”…” - you’ve already mentioned breakpoints so you might rephrase this to “This is what we mean by a breakpoint…”

“In my method,…” - Your are referring to working mobile first and that was coined and defined by Luke Wroblewski. You’re not saying anything new here, this is not “your” method. Actually nothing up to this point is new, it’s all a restating of ideas that can be found all over the web. I’d be real careful calling anything so far “your method.”
mdonahue (20) [Avatar] Offline
Re: Chapter 1, MEAP v13
section 1.2

“Unlike general prototyping, rapid prototyping is written in HTML, so it renders in mobile and tablet browsers as well as desktop browsers.” - creating a prototype in HTML is not what defines rapid prototyping, speed of creation is. You are simply prototyping in HTML, that’s all.

“Then we’ll discuss how to interpret a traditional layout,…” this feels a little like putting the cart in from of the horse. Not to mention that to truly embrace responsive means rethinking how we design. If what you’re trying to say here is “Then we’ll see how to convert static pixel based designs into flexible percentage based designs.”, then you this needs some work.

“Rapid prototyping is the process of building a site for exploratory purposes,…” - it’s more accurate to say “The purpose of rapid prototyping is design exploration and testing.” or something along those lines.

“When I first wrote this chapter Foundation 3 since then the Foundation library has been updated.” - this is broken. Question: are the examples based on 3? if so then they won’t reinforce the mobile first approach you’ve talking about and you’ll have to over come the bad examples later. I know you started this chapter over a year and half ago, because I read the first draft, but you really should rewrite this section using a newer version of Foundation. Using painfully out of date serves does no one any good.

“…and every element on the page needs to be agile enough to refactor itself,…” - they need to be flexible and moveable, not agile.

Moving into the coding section there are a lot of confusing things going on, especially for newbies.
1. You don’t begin by showing what’s required for a page, opening html declaration, followed by head and body tags. If you’re assuming they know this you might at least state that. I’ve mentioned to you before that the book has personality disorder, it can’t decide if it’s aimed at the beginner or the intermediate designer/developer.

2. You’re adding the #A, #B, etc within the code. Again, this could be very confusing to newbies.

3. You’re throwing the class names that change the appearance but you’re not making it clear that these are tied to Foundation classes. Newbies are going to struggle to understand this and intermediates will likely be looking for Foundation 5 code.

4. Is there something you can do with the appearance of the # references so they don’t look like they are code? Maybe use show them within a comment block. If newbies include those in their code they’re going to have all kinds of issues.