5 of 8 people found the following review helpful
Verified Purchase(What is this?)
This review is from: Responsive Web Design with Html5 and Css3 (Community Experience Distilled) (Paperback)
This book is an easy read but it is marred by the fact that the many large illustrations are meaningless in back and white. In one case the author specifically chooses to illustrate colour styling which is totally pointless. I also found that one of the code examples did not work. I also thought it perverse to change an element so that it was a table element by using CSS - you might as well be honest and use an HTML table in the first place with the problems it imposes.
If you already have the RWD mindset the evangelical opening chapters will ne tedious and the book is more of a coffee table book than a serious reference book or tutorial. However, this book does stimulate one to research new ways of doing things for oneself.
Tracked by 2 customers
Sort: Oldest first | Newest first
Showing 1-9 of 9 posts in this discussion
Initial post: 13 Apr 2013 12:17:49 BDT
Just to address your points. I'm afraid the publishers only print hard copies in black and white. The e-book versions are in full colour so that section obviously makes more sense there.
If you email me regarding the code sample that doesn't work maybe we can figure out the problem. Obviously I can't help much if you don't get in touch with either Packt or myself. I'm keen to ensure that my work is supported so just drop me a mail and I'll see what I can do.
On the final point, the whole benefit of using CSS based tables in that example is that it is purely presentational. You get all the benefit of a table layout (simple vertical alignment, self spacing elements) with non of the messy un-semantic markup. CSS tables are great for responsive work as you can have that style when you need it, and a different (block and float for example) method elsewhere. It doesn't impose any problems as it is only CSS, the markup is unaffected.
I'm sad to hear you haven't found it useful, I haven't come across many people that can hold all the CSS3 trickery and HTML5 semantics in their head.
Thanks for the feedback and be sure to get in touch if you want me to take a look at the code problem.
Ben (book author)
In reply to an earlier post on 14 Apr 2013 17:30:28 BDT
On pages 78-80: `max-width:100%' could be replaced by `width:100%;height:auto'. This would also override the HTML values. `max-width' will only scale down so if the images are smaller it will have no effect.
On page 191: It is the code
`background: radial-gradient (20px 20px, circle cover,
that does not work.
Just an initial reply as I am a bit under the weather at the moment.
In reply to an earlier post on 14 Apr 2013 19:00:24 BDT
In the first instance (the page 78-80 reference) you don't (usually) want 'width: 100%;height: auto' as it will mean any images that are natively smaller than the space they are filling will interpolate and the image quality will significantly deteriorate. For example, with your code, a 500px space with an image that is natively only 150px will mean that 150px image will be stretched beyond its native dimensions to fill the 500px space (and usually look terrible).
That's the reason I don't opt for (or recommend using) 'width: 100%; height: auto;'.
Your second point (pg. 191) references the radial-gradient syntax. Sadly, since the time of authoring the book (2011/early 2012 with the book published April 2012) the W3C has revised both the linear and radial gradient syntaxes. Unfortunately there's not a lot I can do about that, it's just a risk with using (and documenting!) experimental CSS properties. So, whilst the example given will work on some browsers (older versions typically), recent builds of Chrome, Firefox etc will be using the newer syntax.
It's also one of the reasons that where possible I included a link to the official W3C pages for the specification (at the bottom of the page you actually reference) - that way readers can always go and see the most recent version of the syntax.
Hope you're feeling better soon. Feel free to let me know about any further issues you encounter. If and when I get to do a second edition obviously these syntaxes changes will be rolled in.
In reply to an earlier post on 14 Apr 2013 22:56:19 BDT
In your book example you are apparently doing what you do not recommend - sizing up. That is exactly why max-width has no effect. If your HTML markup had specified a width value greater than that 100% then max-width would have scaled it down. I agree no one should conside scaling up by a large amount but the differences in user screen sizes are now so great that small compromises sometimes have to be made.
In reply to an earlier post on 15 Apr 2013 07:41:29 BDT
Last edited by the author on 15 Apr 2013 07:42:24 BDT
Hi Malcolm, in this instance you are incorrect. 'max-width' does not scale an image down if the containing element is greater than it's inherent size. That's the whole point of using it in the manner I describe. I even provide an image and demonstration of this on Pg 81. It allows the element to grow to it's native size and no larger (the maximum width of 100%). That prevents the visual degradation caused by interpolation in the method you describe (an image exceeding it's native size). Max-width works the other way around however, and will scale the image down nicely (without any visual degradation, except maybe Firefox 2 if I remember correctly). So, I stand by it as the better technique to employ.
Obviously, if you are happy with the possibility of degraded images there's no reason not to use your example but I don't feel it's the better 'fit and forget' option for most people. My preference and recommendation is to only let images scale as large as they are natively. That way, it's obvious to spot when an image isn't suitable for its location, rather than wondering why an image looks so poor at a certain size.
In reply to an earlier post on 15 Apr 2013 14:38:51 BDT
We might be at cross purposes but it does scale down when I do it.
<img alt="" height="600" src="Water%20lilies.jpg" width="800">
<p>Hi Malcolm, 'max-width' does not scale an image down if the containing element is greater than it's inherent size. </p>
Here the HTML sizes are the actual image dimensions.
I would normally use 'width' and not 'max-width' to scale up as well.
In reply to an earlier post on 16 Apr 2013 20:54:37 BDT
I think we are speaking at cross purposes! That's exactly what I'm saying - using max-width will let the image scale upto but not beyond the value set as the max-width.
This means if you know the native size of an image is 300px and you set max-width to 300px on the image (or its container) it will only go up to 300px and no wider (even if you have set width: 100% before). This is to stop the image visually degrading if it wouldn't be big enough (natively) to fill the containing element. It will still scale down though (which is OK as that won't introduce artefacts).
If you only have width 100% & height auto though, the image will always scale to fill the space, even though it may not be big enough natively to fill the space - this is what leads to interpolation of the image and a visual degradation. Like everything web, it won't make the sky fall down but you should be aware that it's an imperfect solution. I favour what I suggest in the book for these reasons.
Again, sorry you were so disappointed. A lot of the responsive stuff has now been talked about ad infinitum so in the next edition I'll perhaps curtail the RWD explanatory talk of the first chapters (written nearly 18 months ago) you found tedious.
In reply to an earlier post on 1 May 2013 11:41:16 BDT
Amazon Customer says:
Ben - Do you have a date for when the next edition you speak of will be available?
I'm interested in purchasing this book, but as you mention, it was written 18 months ago. I'm in to rush to purchase this edition if an updated version is soon to be released.
In reply to an earlier post on 1 May 2013 11:50:28 BDT
Last edited by the author on 1 May 2013 12:24:17 BDT
Hi. It will be at least a year. Although some of the syntaxes have changed I don't think it's 'out of date' yet. All the essentials still hold true and as there are links to all the W3C specs it should be easy enough to know if something has changed. Not many CSS3 syntaxes have changed since writing it - the gradients one being a notable exception. Hope that helps.
‹ Previous 1 Next ›