Menu Search
Jump to the content X X
Smashing Conf New York

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

No Hard Feelings: The Wait For “Hardboiled Web Design” Is Over

Some books deserve a spot at your desk. The brand new Hardboiled Web Design1 by Andrew Clarke is one of them. In its 5th anniversary edition, Andy explains how you can use HTML/CSS efficiently in responsive design — and how to reduce wasted time in the process with developers, designers and clients. No fluff, no theory — just insights into his own experiences with clients such as ISO and WWF.

If you get a printed copy (free worldwide shipping), you’ll get the eBook for free — available in PDF, ePUB, Amazon Kindle. All printed copies will ship from Dec 8th. Softcover, 441 pages. Jump to the table of contents2. Proudly published by yours truly Smashing Magazine.

A look on the new Hardboiled Web Design Softcover3

$29 $39

Get the book174

Free worldwide airmail shipping.

About The Book Link

With a reputation for being a reference book that “spends more time open on the desk than closed in the bookcase”, Hardboiled Web Design: Fifth Anniversary Edition5 features a wealth of updated front-end techniques, strategies and attitude overhauls that anyone working on the web can benefit from.

A look into the new Hardboiled Web Design6
A look into the new Hardboiled Web Design7

Across 441 pages with plenty of code samples, Andy sets out the “hardboiled” ethos, stripping markup to the bone, making it more flexible and scalable. You’ll also get insights into Andy’s workflow and learn how to establish a design atmosphere and develop a design style guide, create type proofs, use brand personality interviews and reduce wasted time in the process.

A look into the new Hardboiled Web Design8
A look into the new Hardboiled Web Design9

You’ll also learn how to avoid predictable generic layouts and embrace creativity within a responsive mindset and how to establish a better “responsive” process with clients. If you want to explore a workflow that will not hold you back, freeing your potential for crafting rich and expressive responsive websites today, this book is your new constant companion. Ah, and did we say that it’s gorgeous, too? Get the book today.10

A look on the new Hardboiled Web Design Softcover11

$19.90

Get the eBook12

PDF, ePUB, Kindle.

What’s In It For You?

If you’re a front-end developer, you’re in for a treat: the book focuses on practical cutting-edge techniques and a better process between developers, designers and clients. Build quickly and make fewer mistakes because you can use the actual technologies much earlier, using HTML and CSS to design, prototype and develop.

A look into the new Hardboiled Web Design13
A look into the new Hardboiled Web Design14

If you’re a designer, you’ll learn how to embrace creativity within a responsive mindset and how to work better with clients. Explore a workflow that will not hold you back, and will not limit your potential for crafting rich and expressive responsive websites today.

Table Of Contents

CHAPTER DETAILS
Part I

Summary In Getting Hardboiled, you’ll learn what it means to be hardboiled. You’ll discover why it’s important to constantly re-evaluate concepts such as progressive enhancement and graceful degradation, and you’ll find out the cold, hard truth about how standards are really developed. You’ll find out how to create the atmosphere of a design independent of responsive layouts and how to demonstrate those designs to our bosses and clients. Above all else, you’ll learn that responsive web design is an opportunity to make fabulous creative work, an opportunity that you should grab with both mitts.

What The Hell Is Hardboiled?

Summary You’ll discover what it means to be hardboiled for you, your designs and your workflow. Think again about what we can do instead of what we couldn’t. Embrace the possible, instead of complaining about limitations.

(Give Me That) Ol’ Time Religion

Summary You’ll discover why it’s important to constantly re-evaluate concepts such as progressive enhancement and graceful degradation. Learn about the basics of how a page should work in first place, not necessarily how a design should look. Get away from limiting your creativity to the capabilities of a lowest common denominator browser.

The Way Standards Develop

Summary You’ll find out the cold, hard truth about how standards are really developed. Learn about ten CSS modules that are most relevant to the work we do, its vendor-specific prefixes, and how to manage them with your favorite tools effectively.

It Doesn’t Have To Look The Same

Summary You’ll learn that responsive web design is an opportunity to make fabulous creative work, an opportunity that you should grab with both mitts. Embrace that not all browsers should render websites in the same way and focus on providing the most appropriate experience for the capabilities of a browser or device. All that without anyone being left unable to access content or features.

Atoms And Elements

Summary You’ll learn about designing atoms and elements and how web design style guides help you presenting designs in a more effective way. Learn how to present the atmosphere of a design while designing components separate from layout with Style Guides.

Designing Atmosphere

Summary You’ll find out how to design a great atmosphere by starting with typographic elements, how to select the right typeface, weight, line-height, and more. Learn how to use type proofs for presentation, how to balance them the right way and how to make them legible and readable on many different screens. Last but not least, you’ll dig into color accessibility and add decorative aspects that help give a design its personality.

Part II

Summary In Hardboiled HTML, you’ll learn about the latest semantic elements. You’ll also discover microformats2 — an evolution of those simple patterns for giving your markup added structure — and investigate WAI-ARIA roles. All of these will reduce your reliance on presentational elements and attributes.

Destination HTML5

Summary You’ll learn how to use HTML’s semantic elements alongside the BEM naming system. You’ll repeat the widely supported contemporary HTML5 standards such section, article, aside, header, footer, and nav. You’ll learn how to make your markup faster, more responsive and, of course, hardboiled.

Hardboiled Microformats2

Summary Because your SEO ranking matters, you’ll discover the updated microformats2 — simple markup patterns for making your data machine-readable and therefore search engine friendly.

WAI-ARIA Roles

Summary While microformats2 are dedicated to make your website machine-readable, WAI-ARIA roles have different but complementary goals. You’ll learn how to make your web content easier to use by people who use assistive technologies such as navigation menus, sliders, progress meters, properties that define dynamically updated sections of a page, ways to enable keyboard navigation and roles to describe the structure of a page, including headings, regions, and tables (grids).

Part III

Summary In Hardboiled CSS, you’ll learn about Flexbox, web fonts for better type and typography, how to layer colour with RGBa and how to use opacity. You’ll discover how use multiple background images and how to make borders rounded and full of images. You’ll wind up knowing how to replace many images with CSS gradients to make your designs lighter and more responsive. All the while you’ll be making your design look fabulous across responsive breakpoints and that’s where we’ll start, with CSS media queries.

Hardboiled Foundations

Summary In this chapter, you’ll dive deep into CSS Media Queries. By organizing it into six groups of elements that consider site-wide page styles, typography, form elements, tables, and images, you’ll learn how to style small screens first and how to choose breakpoints that are based on content rather than devices.

Flexible Box Layout

Summary You’ll investigate new Flexible Box layouts and how to visually reorder content without laying a hand on your markup, how to overcome common frustrations such as equal height backgrounds on unequal height columns, and more.

Responsive Typography

Summary Much of the web content we consume every day consists of the written word. Learn about the different web font formats and how to implement them properly, with fallback fonts and website performance in mind. You’ll learn how to specify the web fonts to low-resolution and high-resolution display, and how to test them on different resolution screens.

RGBa and opacity

Summary With your hardboiled HTML all set and your smaller screen styling in place, you’ll now give your design an extra level of fidelity and interaction that makes the most of the space available on larger screens. You’ll redevelop our vertical list into a grid of eight magazine covers that reveal their descriptions when we press on them. You’ll do this by applying relative positioning but without any horizontal or vertical offsets.

Borders

Summary CSS borders can be exciting because they include properties that open up a wealth of creative opportunities. You’ll investigate new design possibilites with properties such as border-radius (that our clients love so much) and border-image for using images inside those borders.

Background Images

Summary Since we’re also able use multiple background images and to change their origin point and size, there’s a vast variety new creative opportunities. You’ll get started by making a design using multiple background images. Background properties give us precise control over the size of our background images and how they’re rendered behind our elements.

Gradients

Summary Flat design aesthetic has become the norm. Almost every site you see these days include large, flat areas of colour, often laid out across horizontal bands, almost always the full width of our screens, with flat or outlined buttons, and icon graphics that are also flat. You’ll learn how to move on from the mediocrity this flat aesthetic epitomises and you’ll see web design that’s rich and full of life. Whether you like linear gradients, radial, repeating or with multiple background images — you’ll need to know how to handle them.

Part IV

Summary In More Hardboiled CSS, you’ll learn about the background blends and CSS filters, how to translate, scale, rotate and skew elements using CSS transforms in two and three dimensions. You’ll find out how to make state changes smoother with a host of CSS transitions, and finish off by discovering how to add columns to your layout without a extra division in sight.

Background Blends And Filters

Summary The rapidly increasing pace of change is a good thing for designers and developers, businesses and brands, and the internet in general. New technologies like CSS filters and background blends are not only being introduced faster, but they’re being implemented in browsers and turned into standards faster, too. Now’s not a time to kick back — it’s a time to use these exciting new tools to make creative work with depth and subtlety, work that’s hardboiled.

Transforms

Summary CSS layouts can sometimes be a little strait-laced. You’ll learn how two-dimensional and three-dimensional transforms can help your designs break out of the box.

Transitions

Summary In web pages and applications, changes in state can have a huge impact on how it feels to use an interface. Make a change too fast and an interaction can feel unnatural. Make it too slow, even by a few milliseconds, and an interface will feel sluggish. You’ll learn how to make state changes smoother with a host of CSS transitions.

Multi-column Layout

Summary You might be surprised how unimaginative most website layouts are today, particularly since the responsive web design came up. But there’s so much to learn from print design that should inspire your work on the web. The different ways that magazine designers use columns of text to make their publications individual are an enormous inspiration. In this chapter, we’ll learn how to use CSS multicolumn layout and how to use it for today’s responsive designs.

Takeaways From The Book Link

Technologies should never hold you back, and this book is nothing short of a strategic guide on how to use them efficiently to build flexible, scalable responsive systems today.

  • Ready-to-use HTML/CSS code samples for your responsive sites,
  • Insights from actual RWD projects ranging from small businesses to household brand names,
  • Move towards designing atoms and elements first, and learn how to establish style guides,
  • Find out how to design atmosphere and choose breakpoints wisely with type proofs,
  • Dive deep into how to actually apply mobile first to a design workflow,
  • Benefit from HTML’s semantic elements, WAI-ARIA roles and microformats2 alongside the BEM naming system,
  • Explore new CSS feature queries, Flexbox, background blends, CSS filters and how to make state changes smoother with CSS transitions,
  • Learn about the multi-column layout and how you can use it today.

Christmas has come early at our office — the fifth-anniversary edition of “Hardboiled Web Design” is ready for download from today. Now, grab the print edition today15, get the eBook for free right away and save 25% off the regular price with a free worldwide airmail shipping. Shipping starts on Dec 8th and ordering takes less than 60 seconds. Happy reading!

A look at the new Hardboiled Web Design, Softcover16

$29 $39

Get the book174

What are you waiting for? Christmas?

Footnotes Link

  1. 1 #toc
  2. 2 #toc
  3. 3 /wp-content/uploads/2015/11/hardboiled-web-design-large.png
  4. 4 https://shop.smashingmagazine.com/cart/9134583107:1
  5. 5 #toc
  6. 6 /wp-content/uploads/2015/11/Screenshot-1.png
  7. 7 /wp-content/uploads/2015/11/Screenshot-2.png
  8. 8 /wp-content/uploads/2015/11/Screenshot-3.png
  9. 9 /wp-content/uploads/2015/11/Screenshot-4.png
  10. 10 https://shop.smashingmagazine.com/cart/9134583107:1
  11. 11 /wp-content/uploads/2015/11/eBook-hardboiled-web-design.png
  12. 12 https://smashing-magazine.myshopify.com/cart/9136548675:1
  13. 13 /wp-content/uploads/2015/11/Screenshot-5.png
  14. 14 /wp-content/uploads/2015/11/Screenshot-6-2.png
  15. 15 https://shop.smashingmagazine.com/cart/9134583107:1
  16. 16 /wp-content/uploads/2015/11/hardboiled-web-design-large.png
  17. 17 https://shop.smashingmagazine.com/cart/9134583107:1
SmashingConf New York

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook

Vitaly Friedman loves beautiful content and doesn’t like to give in easily. Vitaly is writer, speaker, author and editor-in-chief of Smashing Magazine. He runs responsive Web design workshops, online workshops and loves solving complex UX, front-end and performance problems in large companies. Get in touch.

  1. 1

    So if I buy the printed book now, I’ll get immediate access to the ebook?

    0
  2. 3

    I just bought the book so now I have something to put my teeth in this winter.
    @john I could download the ebook straight away.

    1
  3. 4

    So this book isn’t for back end developers? I’m really looking for a book in web design for back-end developers.

    0
    • 5

      Markus Seyfferth

      November 25, 2015 9:51 am

      It admittedly doesn’t really focus on back-end stuff such as Nginx, caching, HTTP/2, security etc., but isn’t web ‘design’ front-end stuff by its nature anyways? ;-)

      0
  4. 6

    I’m soo glad it has a feminist cover with a baffon-looking men and a brilliant female.

    — no one

    -23
    • 7

      Hi No One,

      It is fantastic to have an opinion and to not like certain things and being able to articulate this. Also to criticise, if you think that this cover does not fit the needs of a “good” cover in your sense. But don’t you think, before complaining about the cover, it is a matter of politeness to do this with your real name given? How can someone complain about this and then not even introducing yourself? How can someone reply to _you_ then?

      Always makes me wonder, why people like you have to hide behind the web and anonymity to be brave enough to say what you think.

      Thanks and have a nice day.

      /marc

      12
    • 8

      This is why ! F… !

      After reviewing the article I felt that my manhood was seriously jeopardized and I did not really understand why.

      The cover… it is so insidious.

      I understand now that these Smashing Magazine guys have a hidden agenda: promote women (yuck!) and push all guys to have transgender surgeries.

      Thank you for waking me up.

      -6
  5. 9

    Do you ship to Arkansas, USA?

    0
  6. 11

    I want to buy the hard copy of this book…nice book..want to explore it

    0

↑ Back to top