Flexibility is everything
Peter Müller, one of Germany’s most prominent web design teachers, has published “Flexible Boxes” (Rheinwerk Computing, €24.90), an introduction to modern websites using HTML5, CSS3 and JavaScript.
When someone asks me how best to learn HTML and CSS, I almost traditionally refer them to Peter Müller’s introductory work “Little Boxes” – due to the events at Pearson Verlag, the book is hardly available anymore. The successor is published under the name “Einstieg in CSS” at Rheinwerk.
“Flexible Boxes” is not quite as basic – if you have never seen HTML or CSS before, you will definitely need a beginner’s book first. “Flexible Boxes” is aimed at web developers who have already created ‘classic’ websites and are now looking for a guide to more modern technologies – and it is perfectly suited for exactly this purpose.
Basics: “Change is the only constant”
The first chapter sets the scene and explains the paradigm shift in web design: ‘Nothing is certain’. Anyone building websites today can no longer rely on such mundane things as optimal screen sizes or a few browsers – flexibility is key, and this strength of the web is becoming increasingly obvious. The first chapter covers the important basics of this topic, before the book is divided into three parts.
Part 1: New Structures with HTML5
If you want to get into modern web design, you cannot avoid the new HTML5 standard – Peter Müller logically takes three chapters to describe the basics of the new HTML version. I particularly liked how the author manages to explain even the dry topics around the semantic elements such as and .
Ultimately, however, all this is just a preliminary step to finally getting down to business – and that is where it gets interesting. Peter Müller develops a sample page that runs like a red thread through the rest of the work. The rigor here is impressive – what has been learned is applied directly, and adaptive images are treated in a practical way almost in passing.
Credits: HTML5 Logo by W3C, CC BY
Part 2: Modern design with CSS3
From the second part onwards, the example page serves as a basic framework for learning CSS3. After helpful tools and scripts, chapters 8 to 11 are about learning various aspects of CSS3 step by step: selectors, fonts, boxes and options for mobile navigation.
I particularly liked the chapter on mobile navigation, because this topic is quite complex – Peter Müller succeeds in presenting a range of solutions that are both practical and easy to follow.
Part 3: Responsive Web Design
Modern web design can hardly do without the topic of “responsive web design” – consequently, it forms the last part of “Flexible Boxes”. First, it deals with the basic media queries and the meta viewport, without which nothing works in responsive web design, before two chapters are devoted to the important topic of “grids in web design” – first in the fixed, then in the flexible variant.
The fact that Peter Müller is a perfectionist who pays attention to detail is proven by the 15th chapter, which deals with the many subtleties: How do I create an optimal line length despite variable width? How do I implement flexible videos and sliders? And how do I allow my users to interact with the text, for example using the popular accordion effect?
The book concludes with a chapter that is one of my favorites: CSS frameworks, vividly explained using the popular representatives YAML4 and Foundation.
Useful additions in the second edition
In the second edition, Peter Müller has updated his work in many places and added useful developments – particularly the layout technology Flexbox and responsive images.
Conclusion: A good book for web developers
“Flexible Boxes” shows Peter Müller as a web developer at the cutting edge – the most important current developments in web technology are included, and the many link and tooltips alone make the purchase worthwhile. At the same time, “Flexible Boxes” proves why Peter Müller is considered one of the most important web design teachers in the German-speaking world: His work is didactically excellent. The example project runs like a red thread through the book, explaining various aspects of the technology and being flexibly varied without it seeming contrived. It is a pleasure to read and never gets boring.
The many code examples that run through “Flexible Boxes” are well solved – I have rarely seen a web development book that I could follow so well and without having my computer next to me. Numerous workshops structure what you have learned and make you want to copy code fragments directly into your own projects.
Of course, a review should also mention what Peter Müller’s book is not: it is not an introduction to HTML and CSS – basic knowledge of HTML and CSS is required. The author also does not cover any design aspects – he explains what and how something works; not when you should use something. But that is not a flaw – no book can cover all aspects of a broad topic like web design.
“Flexible Boxes” is a technical book about modern, flexible web design that taught me an enormous amount – it is a definite must-read for web developers who want to expand their knowledge of the latest technical challenges in an entertaining way.
Small update: There is a sample over at Peter’s website.