We care about quality content and work hard to support and spread best practices, innovative techniques and forward-thinking ideas. Our printed Smashing Books are crafted to deliver in-depth knowledge and expertise shared by experts and practitioners from the industry. They are our editorial flagships—and they look damn good on a coffee table!
Hardboiled Web Design: Fifth Anniversary Edition
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.
About The Book
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 Edition6 features a wealth of updated front-end techniques, strategies and attitude overhauls that anyone working on the web can benefit from.
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.
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.11
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.
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
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.
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.
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.
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
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.
Summary • While microformats2 are dedicated to make you 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).
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.
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.
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.
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
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.
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.
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.
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.
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.
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
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 today16, 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!
Smashing Book #5: Real-Life Responsive Web Design
Responsive design is a default these days, but we are all still figuring out just the right process and techniques to better craft responsive websites. That’s why we created a new book — to gather practical techniques and strategies from people who have learned how to get things done right, in actual projects with actual real-world challenges.
Neatly packaged in a gorgeous hardcover, the book features practical front-end techniques and patterns from well-respected designers and developers. The book isn’t concerned with trends or short-lived workarounds — it should stand the test of time and as such, it’s focused on actual techniques used today in real-life projects. The techniques that you could apply to your websites today, too.
About the book
Smashing Book 5: Real-Life Responsive Web Design is our brand new, upcoming book with smart front-end techniques and design patterns derived from real-life responsive projects. With 13 chapters on responsive workflow, SVG, Flexbox, Web fonts, responsive images, responsive email, content strategy, debugging, performance and offline experience, this is just the book you need to master all the tricky facets and hurdles of responsive design.
Once again, the book is going to be quite thick, and obviously both hardcover or digital editions (eBook in PDF, ePUB and Kindle) will be available. So if you want to get your hands on the book, you better don’t wait too long. We know it — you’ll love the book as much as we do. Free worldwide shipping.
Table Of Contents
We invited respected designers and developers who know a thing or two about responsive websites. The chapters have also been reviewed by active members of the community such as Jake Archibald, Dmitry Baranovsky—just to name a few.
As designers and developers, we solve problems for a living. Yet, these problems are often quite tricky and complex, and the context of these problems requires us to be creative and flexible in our workflows. With responsive design, we are prompted to create scalable design systems that work well in unpredictable environments. To do that, we need to be pragmatic and find solutions that work well within given constraints. That’s why we created this book: to find techniques that have actually worked in real-life projects with real-world challenges.
Keywords • design systems • scalability • bulletproof solutions • front-end techniques • real-world challenges
|Daniel Mall||Responsive Designer’s Workflow|
Summary • In practice, responsive projects usually require more time, more skills, more testing and hence more flexibility in budgets. Addings changes late delays projects immensely, and process involving designers, developers and clients is usually tiring to say the least.
In this chapter, Daniel shares insights into his responsive design workflow from projects such as TechCrunch, Entertainment Weekly and Radio Liberty, with techniques and strategies that help him get things done well, within budget and on time (most of the time), while achieving the highest level of fidelity in shortest amount of time.
Keywords • responsive workflow • element collage • style tiles • tools • deliverables • performance budget • interface inventory • sketching • planning • manifestos • hypothesis • atomic design • designing in the browser • Photoshop
|Vitaly Friedman||Responsive Design Patterns and Components|
Summary • So, how do we deal with complex tables when building responsive websites? What about advanced interface components? Dashboards? What about the behaviour of web forms, navigation, mega-drop down menus, filters? Can we utilize vertical media queries and portrait/landscape orientation change? In this chapter, Vitaly will provide an overview of clever practical techniques for improving UX of responsive sites, with innovative approaches to designing “responsive modules” such as mega-drop downs, tables, calendars, accordions, maps, sliders, responsive PDF and responsive iconography — and a dash of anti-patterns to avoid as well.
Keywords • design patterns • navigation • smart front-end techniques • priority+ pattern • improved off-canvas • lazy loading • autocomplete • filters • responsive PDF • portrait/landscape mode • sliders • country selector • responsive iconography.
|Eileen Webb||Structured Content For RWD|
Summary • Content created by one department is never updated by the next. Services get renamed in the navigation, but are still referenced by the old name in the body text. Important information is buried in the murky depths of flowery prose.
Sounds familiar? Many issues in responsive projects aren’t related to technology, but to content: it’s either ill-formatted or priorities get lost across screen resolutions. Let’s fix it. In this chapter, Eileen shows how structured content can help refocus on what matters, and how we as designers can use the structure intelligently to provide users with information that they need, when they need it.
Keywords • structured content • content consistency • content models • structural audit • editorial content • content types • content relationships • data-driven gaps • feature-driven gaps • authors and editors • CMS • content maintenance
|Sara Soueidan||Mastering SVG For RWD And Beyond|
Summary • This chapter has hands down on everything you need to know in order to start designing and building flexible components and visual assets with SVG. Sara will take you on a journey through SVG syntax, SVG accessibility, SVG viewport and viewBox, creating and exporting SVGs, embedding SVGs, building SVG sprites, creating SVG icon systems, using SVG Data URIs, optimizing SVG for performance, SVG conditional processing, clever SVG tricks and techniques and making SVG cross-browser responsive with CSS. Yep, everything you need to know about SVG, as promised.
Keywords • SVG • syntax • accessibility • viewport • viewBox • exporting • embedding • sprites • icon systems • data URIs • performance • smart SVG techniques • responsive iconography • cross-browser fallbacks
|Zoe M. Gillenwater||Building Responsive Components With Flexbox|
Summary • We can use Flexbox for a while now.25 In fact, Flexbox solves a lot of CSS shortcomings and makes building responsive layouts much easier than with floats or positioning. It gives you more control over the things you care about in a responsive layout (such as order, alignment, and proportional sizes of your boxes) and lets the browser figure out the rest; the math-y stuff that computers are good at, like the exact dimensions that are needed on the boxes to perfectly fill the available space.
Zoe shares insights from her work at Booking.com, showing practical Flexbox-based techniques which make responsive sites much easier to build and maintain — even without media queries.
Keywords • syntax variants •
|Bram Stein||Web Fonts Performance|
Summary • By default, web fonts block rendering, hiding content from the user. The only way to make content accessible as soon as possible is by treating web fonts as a progressive enhancement. This doesn’t mean web font performance is not an issue. You still need to load web fonts as quickly as possible so that users experience your site exactly how you designed and built it. Let’s fix this.
In this chapter, Bram shares insights that he has learned from working at Typekit, covering web fonts and formats, font loading and font rendering, CSS Font Loading API, fallback fonts, caching, compression, inlining, subsetting and font loading strategies.
Keywords • font formats • font loading • font-rendering • FOIT and FOUT • Font Loading API • fallback fonts • inlining fonts • simulating swapping • promises • asynchronous loading and caching • prioritized loading
|Yoav Weiss||Using Responsive Images, Today|
Summary • So you want to serve different images to different screens. Perhaps a Retina image (only) to Retina screens, or an art-directed image to small screens, or a portrait image for portrait orientation, or perhaps .webp to browsers supporting the format — without performance hits. Since images are the heaviest assets on the web, dealing with them intelligently is both our responsibility and opportunity for more dynamic layouts. That’s what native responsive images are for.
In this chapter, Yoav discusses the different responsive images use cases and how we can use the native solution today to create performant responsive websites. We will also look at ways to make these solutions easier to deploy and maintain in real projects, with Picturefill and CMS plugins for Drupal and WordPress.
Keywords • CSS pixel and DPR • Retina displays • fixed-width images • variable-width images • srcset and sizes • art direction • <picture> element • separation of concerns • image format fallback • accessibility • background images • image optimization • WebP and JPEG-XR • compressive images • deployment • common pitfalls
|Fabio Carneiro||The Dark Side Of Responsive HTML Email|
Summary • Explaining responsive HTML email is always an uphill battle, because just about every single designer and developer hates it. But there’s a lot of great, forward-looking innovation going on in the email design world. In fact, melding of responsive design techniques is absolutely possible.
In this chapter, Fabio, the technical email maestro from Mailchimp, explores what you can achieve with media queries in responsive HTML email to ensure that your emails look just fine on major email clients across different devices, and looks even better in clients that do not support media queries (such as Gmail).
Keywords • email landscape • CSS in email • market share • navigation and CTA buttons • foundational markup • reset and client-specific CSS • fluid containers • pattern-based development • layout techniques • Microsoft Outlook • Windows Live Mail • Apple Mail • Mozilla Thunderbird • Outlook.com • Yahoo! Mail • AOL • iOS Mail • Gmail
|Tom Maslen||Testing, Maintaining And Debugging RWD|
Summary • We talk a lot about designing and building responsive websites, but not so much about maintaining and testing them. Speaking from his experience at BBC, Tom has built up a way of working that minimizes the pain points that responsive web design has.
The chapter shows how you can build future-friendly CSS that will scale up to support large responsive websites; get you to take testing seriously, but not overcomplicate your workflow; and finally, how to sanely prioritize and debug common problems (layout, images, complex UI components like tables) in all kinds of devices and browsers.
Keywords • “cutting the mustard” • predictable, simple CSS • naming conventions • BEM and class names • Sass organization • debugging media queries • lazy loading • content-out media queries • separation of concerns • exploratory testing • functional testing • visual regression testing • automated testing • dealing with false positives • common dependencies • troubleshooting bugs on mobile
|Andrew Clarke||Counting Stars: Creativity Over Predictability In RWD|
Summary • Our responsive designs lack soul. You can think of many websites that are well presented, easy to use, triumphs of UX and technically competent, but few that might be remembered for years to come. Why do you think this is? Why are so few websites memorable? Could the design processes we’ve come to rely on, particularly in relation to responsive design, have hindered our creativity? Our modern web design magazines are full of advice about process, techniques and tools, but little about creativity, about humanity, or about ideas.
In this chapter, Andrew takes a closer look at how we can combine creativity with predictable design systems to create unpredictable, dynamic and memorable responsive websites — with a framework and a mindset that will challenge you to think differently about crafting websites today.
Keywords • advertising • user experience design • creative hijinks • allergic to research • process and predictability • building blocks of creativity • intoxicated by process • platform for creativity • creative brief • line between control and chaos • buying creativity • copywriting • creative teams • creative direction
|John Allsopp, Matt Gaunt||Beyond Responsive: Optimizing For Offline|
Summary • What if we told you that as a user, you don’t have to be online to use the web, and a website or a web application would respond to this accordingly? Think Offline First26: “We can’t keep building apps with the desktop mindset of permanent, fast connectivity, where a temporary disconnection or slow service is regarded as a problem and communicated as an error.”
John and Matt cover main technologies and practices that you’ll need to use to make your apps work as well offline, as they do online. We’ll discuss how to detect if we are online or not, HTML5 Application Cache, WebStorage and offline events, but most importantly Service Workers and how we can use them today to not only make content available offline, but also significantly improve performance and create snappy, fast experiences in (almost) no time.
Keywords • navigator.onLine • online and offline events • HTML5 Application Cache • cache manifest • fallbacks • AppCache gotchas • Web Storage • localStorage • Service Workers
|Ben Callahan||Efficient Responsive Process With Clients|
Summary • Design deliverable is one thing, an efficient collaboration between teams and stakeholders is a different beast entirely. This chapter provides strategies for keeping this collaboration sane and focused.
You’ll learn how to build a good and efficient team, how to establish good pricing/time estimates for responsive projects, how to establish priorities with content priority guides and how to shift away from linear handoffs with multidisciplinary teams. A detailed chapter on getting things done, with clients, the proper way.
Keywords • collaboration • estimates • spiraling • “one-deliverable” workflow • efficiency • content priority guide • style comparisons • testing the aggregate • content prototype • wireframes • style prototypes • pattern libraries • happy teams
|Vitaly Friedman||Performance Optimization Roadmap|
Summary • If somebody tells you that responsive websites are bloated, heavy and slow by default, and that it’s very difficult to make them fast, don’t believe them — they are liars. If you set the priorities right and build the website with progressive enhancement in mind, you can create extremely fast responsive websites that work well across devices: with one code base working everywhere.
In this chapter, yours truly will be sharing what we’ve learned over the last year about the performance challenges of this very website and about the work we’ve done in-house in big and small companies. If you want to craft a fast responsive website, you might find a few interesting nuggets worth considering.
Add your name into the book!
The Smashing Book 5 is being written and will be published in the spirit of our fantastic community — written by designers and developers for people like you, designers and developers who care about their craft. This book wouldn’t exist without your kind support. That’s why, just like with our previous Smashing books, we kindly invite(d) you to
submit your name into the book27. All slots have been reserved — thanks for joining in!
Just about 1,500 names will fit properly on the two dedicated pages, so please don’t wait too long. First come, first served! Please also avoid grammar mistakes or blatant advertising. Thank you again for your kind support throughout the years, our dearest readers!
Mobile Web Handbook
We have all been there. With Responsive Web Design (RWD) becoming a convenient strategy for device-agnostic design, we keep running into annoying technical issues that all those quirky (and not so quirky) mobile browsers are raising so very often. However, fixing these issues can be quite easy — once you understand exactly why they come up.
The book is useful to mobile strategists, developers, designers, and everyone willing to better understand the intricacies of mobile — both technical and market-related. Whether you want to get a better picture or dive deep into common browser bugs on mobile, this is just the book you need.
Why This Book Is For You
Developing websites for mobile is pretty much the same as it has always been, but it does require you to learn a few new things, and some of them are quite confusing. In Mobile Web Handbook, you’ll learn to:
- Make sense of the mobile value chain of operators and device/OS vendors,
- Distinguish between different mobile/proxy browsers and ongoing browser developments,
- See through the complicated browser situation on Android devices,
- Understand CSS pixels, physical pixels, device pixels,
- Make sense of layout viewport, visual viewport and ideal viewport,
- How zooming works and why page zoom is different than pinch zoom,
- The intricacies of the meta viewport and related CSS/JS properties,
- How to deal with technical issues of touch events in JS,
- Understand the touch event cascade and its bugs,
- Handle 300ms delay, pointer events and the click event,
- Fix common bugs caused by
- Set up a device testing lab and test on mobile,
- Reconsider outdated development practices,
- Adjust expectations for mobile networks and latency.
Table Of Contents
|Chapter 1||The Mobile World|
Summary • The mobile world is a complicated, highly fragmented environment. The mobile value chain involves operators, device vendors and OS vendors—all having their own interests and goals that shape the device market and complicate things for us, web developers. If you read The Mobile Book35 already, this chapter is a revised and extended version of the chapter. It’s been updated with the latest figures and developments, though, and contains a few new sections.
Keywords • operators • networks • mobile value chain • device vendors • hardware • fragmented market • phone’s production cycle • global device market • OS vendors and sales • developer relations • identity management • payments.
Summary • If you’re used to the simple five-browser ecosystem that exists on the desktop, you’re in for a rough surprise in the mobile market. There are 30 mobile browsers, ranging from lousy to great. Besides, there are also proxy browsers, default browsers, downloadable ones, confusing Android ones, and of course WebViews. What do you need to know about prevailing browsers and prevailing platforms? A comprehensive overview of the browser market, worldwide market shares and ongoing developments—and a few browser stats.
Keywords • browser ecosystem • rendering engines • WebKits • WebViews • Android browsers • platforms • proxy browsers • statistics.
Summary • The most complex part of the mobile world is Android. With Android now spanning about three quarters of the smartphone market, it has a few problems and oddities that are uniquely its own. In this chapter we’ll look at Google’s wishes and actions, the reactions of the device vendors, and the complicated browser situation caused by the gradual replacement of Android WebKit by Chrome.
Keywords • differentiation • Android updates • Android WebKit • Chrome.
Summary • There are a few CSS declarations that are harder to implement in mobile browsers than in desktop ones. Some, such as
Keywords • position: fixed • overflow: auto • overflow-scrolling • background-attachment • vw and vh units • :active and :hover.
|Chapter 6||Touch Events|
Summary • Mobile devices generally use touchscreens, and support a new set of touch events to monitor user actions. At first sight, touch events seem to be roughly the same as mouse events. What are the differences? How do they work? Do we need separate events for each interaction mode, or can we merge mouse and touch into one, as Microsoft wants? It is quite likely that future new web-enabled device classes such as TVs, cars, or even fridges, will bring new interaction modes and a new set of events. How do we prepare for them? That’s exactly what this chapter is all about.
Keywords • touchcancel • gesture events • dropdown menu • drag and drop • scrolling layer • event equivalencies • merging touch and mouse • detecting interaction modes • touch event cascade • the tap action • anatomy of a click • 300 ms delay • touchLists • pointer events.
|Chapter 7||Becoming a Mobile Web developer|
Summary • This last chapter gives you practical details about how to become a mobile web developer, or to be more precise, how to set up a device library and conduct mobile tests. Which devices do you need? How do you run tests? What would an ideal device lab look like? And what should you keep in mind in terms of the improvements of the mobile networks in the future?
About The Author
Peter-Paul Koch37 (PPK) has been around for quite some time. Known for his browser compatibility tables on Quirksmode.org, he is a mobile platform strategist, browser researcher, consultant, and trainer in Amsterdam, the Netherlands. He specializes in the mobile web, and especially mobile browser research, advising mobile and desktop browser vendors on their implementation of web standards.
- 224 pages, 16.5 × 24.0 cm (6.5 × 9.5 inches).
- Quality hardcover with stitched binding and a ribbon page marker.
- The eBook contains PDF, EPUB, and Kindle.
- Free worldwide airmail shipping5138 from Germany.
- ISBN: 978-3-94454093-1.
Nothing is more frustrating than stubborn management entangled in dated workflows and inefficient processes. That’s why we created Digital Adaptation, a new practical book on how to help senior management understand the Web and adapt the business, culture, team structure and workflows accordingly. No fluff, no theory — just techniques and strategies that worked in practice, and showed results.
The book will help traditional businesses and organizations to overcome their legacy, and help you plant the seeds of change with very little power. If you do want to finally see changes happening, this is the book to grab.
Why This Book Is For You
If you’ve got enough of your co-workers not understanding the Web, Digital Adaptation is just what you need — ideas and concepts that you can put in front of senior management to make real changes. You’ll learn to:
- Tackle bureaucracy and overcome legacy culture,
- Develop a flexible and effective digital strategy,
- Use responsibility matrix to minimize delays and costs,
- Adopt a digital culture and become digital by default,
- Apply techniques from mid-sized and large organizations,
- Avoid toxic practices and improve internal processes,
- Organize teams and boost their efficiency,
- Embrace social media and use them effectively,
- Understand the value of digital team and invest in them,
- Break down the walls and nourish collaboration, ownership and innovation.
Table Of Contents
|Foreword||A Message for Web Professionals|
Summary • The foreword introduces the purpose of the book and explains why we decided to choose you as the audience for it. In fact, the book is written primarily for you as web professionals. A book you can quote to senior management and make real, lasting changes in your organization. Your job is to take the concepts covered in this book and put them in front of senior management.
Keywords • audience • strategy • video.
|Chapter 1||The Digital Divide|
Summary • The core problem with digital, faced by many large organizations, is that they were formed before the web as we know it today existed. Their systems, processes, and (in many cases) people are not configured to support it. In this chapter, Paul discusses warning signs of digital incompatibility in your company, organizational and cultural barriers and changes that the new digital landscape has brought. This is a chapter of how most organizations struggle with their digital strategy and what you have to know to avoid the problems in a long run.
Keywords • pre-web organizations • legacy systems • digital incompatibility • structure • fragmented web presence • culture • customer needs • shifting digital landscape • digital strategy.
|Chapter 2||Setting Your Digital Direction|
Summary • As Richard Rumelt said, “good strategy works by focusing energy and resources on one or a very few pivotal objectives whose accomplishment will lead to a cascade of favorable outcomes.” In this chapter, you’ll learn how to select the right digital direction and how to deal with prioritization paralysis. Backed up by case studies and real-world examples, you’ll also learn how to form a digital strategy and how to use guiding principles, digital policies, and a responsibility matrix to complement the strategy. The chapter also explains how reorganizing teams and processes will help tackle dated, inefficient departmental structures.
Keywords • business objectives • digital team • defining priorities • problem diagnosis • guiding principles • web steering committees • responsibility assignment matrix • digital policy • remote work.
|Chapter 3||Adopting A Digital Culture|
Summary • Forming a digital strategy is one thing, but making it work requires changes in the digital culture. This chapter discusses main components of a digital culture, including collaboration, agile development, digital by default, innovation and service-oriented culture. The web can’t be neatly separated from the rest of organization; what’s necessary is a single organizational strategy that is heavily influenced by online. This chapter explains just how such a strategy can be established in practice.
Keywords • Gov.uk redesign • digital by default • aspects of digital • Business Model Canvas • innovation and failure • service culture • user testing • customer engagement.
|Chapter 4||Digital Teams: Agents of Change|
Summary • There are various ways in which digital teams can be organised, but some approaches are more effective than others. This chapter discusses how to build an effective team and what role it should have, as well as how to find a good digital lead and attract and retain appropriate digital staff. Sometimes the digital team can feel like a Ping-Pong ball that ricochets around the organization—you are never quite sure where it will end up. This chapter explains the place, the position and the working environment of an effective digital team.
Keywords • team structure • roles and responsibilities • digital leads • attracting good staff • light leadership • working environment • skills, not roles • hiring digital workers.
|Chapter 5||Digital Demands Another Way Of Working|
Summary • There is no shortage of big digital failures, from the London Olympics website to the Healthcare.gov website. The costs are staggering and the impacts devastating. The more complex and ambitious a digital project, the more traditional management approaches will struggle to scale. This chapter explores why digital projects fail and how you can minimize the risk of this happening by identifying and prioritizing user needs and involving the entire digital team in the conversation. Of course, this would work best within an iterative and collaborative context in which failure, prototyping and experimentation are deeply rooted within the digital culture.
Keywords • failures • the boom-bust cycle • usability testing • user needs • prototyping • iterative, incremental process.
|Chapter 6||Grassroots Change|
Summary • Anybody can instigate change. As somebody working at the grassroots level of your organization’s digital strategy, you are a key catalyst of change. That work begins in your own team. You can plant the seeds of change by establishing good team-working relationships and atmosphere, enforcing good working practices, building bridges with colleagues and educating them, approaching management strategically, and being disruptive. If you don’t take action to change it, nobody else will. But if you do take action, there is a real opportunity to make your work more enjoyable and to have a real impact on your company.
Keywords • down-top change • transforming a team • wartime mentality • work environment • work practices • convincing management • SWOT analysis • disruption.
About The Author
Paul Boag49 is quite a character. With over 35 articles published on Smashing Magazine, he is not really an author that requires an introduction. Paul has been working on the web since 1994. He is web strategist at Headscape Ltd, a web design agency that he co-founded back in 2002. Paul also produces and hosts the longest-running web design podcast at boagworld.com50. He is a regular speaker at conferences and author of Client-Centric Web Design.
- 176 pages, 16.5 × 24.0 cm (6.5 × 9.5 inches).
- Quality hardcover with stitched binding and a ribbon page marker.
- The eBook contains PDF, EPUB, and Kindle.
- Free worldwide airmail shipping5138 from Germany.
- ISBN: 978-3-94454064-1.
Smashing Book #4: New Perspectives on Web Design
It’s done: our brand new Smashing Book, full of smart, time-saving tips for crafting fine websites. Neatly packaged in a gorgeous hardcover, the book features practical front-end techniques from well-respected Web designers. It isn’t concerned with trends or short-lived workarounds. It’s focused on the actual design process—the why of the decisions we make as we craft websites.
With New Perspectives, we look into lessons learned from mid-size and large projects and explore new, uncharted territories in Web design: mainly front-end, but also back-end, responsive design, typography, psychology, customer support, and content strategy.
Written by well-respected designers and developers, the book contains lots of actionable takeaways that will help you improve your workflow. Think of it as a reliable playbook for issues that keep following you in every project. No, this book won’t change your life forever, but it will challenge you to look differently at how you build websites today.
Table Of Contents
We invited respected designers and developers who have a story to tell and experiences to share. The chapters have also been reviewed by active members of the community such as Jonathan Snook, Inayaili de León, Tim Brown and Sean Coates—just to name a few.
Summary • The Web is dynamic and versatile—coding techniques aren’t black and white, and so our decisions always emerge from those shady gray areas. In the preface, Vitaly argues why Web design today requires new, pragmatic, open-minded approaches and why it’s so important to look at our craft from new, unconventional perspectives.
Keywords • best practices • strategy • trends • perspectives.
|Harry Roberts||Modern CSS Architecture and Front-End|
Summary • With websites getting bigger, their dev teams growing larger, and their goals becoming more tightly defined and, I dare say, more important, we need to take another look at how we actually build them. It’s no longer practical to spend days and days thoroughly hand-crafting code; a much more rapid, powerful and pragmatic approach is needed. In this chapter we are going to take a whirlwind tour of a new approach to building more powerful front-ends for the Web today.
Keywords • semantics • misconceptions • Object-Oriented CSS • code structure • file organization • CSS selectors • portability • naming conventions.
|Nicholas C. Zakas||Writing Maintainable, Future-Friendly Code|
Summary • Code is code no matter where you go, and code has a tendency to get messy as it gets large and old. Things start to break, you find it hard to figure out why bugs are occurring, and there are parts of the codebase that seem to be “magic”. On a large project with many developers, the problem is magnified. How can everyone work in the same codebase in such a way that making changes in the future are easy? That’s what this chapter seeks to answer.
Keywords • code smell • conventions • code style • comments • architecture • SMACCS • documentation • design document.
|Christian Heilmann||The Vanilla Web Diet|
Keywords • legacy browsers • browser-specific code • jQuery • frameworks • consistency • conditional loading • lack of support is an opportunity.
|Tim Kadlec||Culture of Performance|
Summary • Websites are getting fatter and fatter at an alarming rate. The issue is not the competence of Web developers. The issue is also not just technological: a lot of smart optimizations are usually implemented to get the weight down. Instead, the issue is the lack of a well-established culture of performance—a total commitment to performance from the entire team that would drive and influence decisions during the project cycle. Given the incredibly important role performance plays in the user experience, this is a disastrous mistake to make.
Keywords • performance • case studies • visualizing performance • performance budget • the 20% rule • testing • atomic design • perceived performance • optimistic interfaces • preloading content.
|Mat Marquis||Robust, Responsible, Responsive Web Design|
Summary • Responsive Web design is starting to get a reputation—and not the kind of reputation that it rightfully deserves. The most common death knell we’ve heard ringing out is that every page of a responsive site is fated to weigh in at a couple dozen megabytes and there isn’t a single thing that any of us can do about it. This trend is on us, and you don’t see any carpenters writing blog posts about how hammers are a failed methodology because of the times they dropped one on their feet. We can do better than blaming our tools for our mistakes.
Keywords • Responsive Web design • presumptive enhancement • progressive enhancement • accessibility • Ajax-Include pattern • conditional loading • responsive images and video.
|Addy Osmani||Finding and Fixing Mobile Web Rendering Issues|
Keywords • performance • 60fps • rendering jank • faster animations • hardware acceleration • diagnosing slow paint times • workflow • remote debugging.
|Aaron Gustafson||Designing Adaptive Interfaces|
Summary • Design, as a concept, is a tricky little beast. Design does not exist in a vacuum. Each step in the process of building an interface should add to the experience. In the end, independent users may have differing experiences of the interface, but no one is denied access to a good experience. To create truly exceptional designs, we must not only reduce the friction inherent in completing a task, but we should make it (dare I say it) fun! We must reconcile aesthetics with usability.
|Paul Tero||Obscure Back-end Techniques and Terminal Secrets|
Summary • You wake up one morning, look at the browser window, check the Widget 3000, click on a button and there’s nothing. What happened? Help! The Internet is gone! We’re going to cover a lot of ground in this chapter, from routers to servers, from error logs to PHP hacks. I’ll start with the worst case scenario and work inwards, exploring the infrastructure of the Internet and the make-up of a Web server, imparting lots of little tips and commands along the way, opening up a new perspective on how websites can stop working — and be fixed.
Keywords • back-end techniques • networking • router • DNS • traceroute • servers • firewalls • Denial of Service • HTTP • administration • error management • PHP errors •.
|Marko Dugonjić||The Next Steps For Web Typography|
Summary • In this chapter, we’ll cover the big picture first — with not too frightening context models and a list of actors that participate in content creation and publishing — and continue with practical details, with plenty of code examples and tips. Among other things, we’ll cover typefaces and Web typography in general, organization and performance, typesetting and advanced CSS techniques.
Keywords • universal typography • multifaceted model • structured content • responsive Web typography • font delivery and distribution • rendering engines • macrotypography • combining typefaces • type library • CSS organization • fonts as progressive enhancement • subsetting • Base64 encoding • white space hierarchy • modular scales • subhead styles • advanced CSS techniques.
|Corey Vilhauer||The Two Faces of Content Strategy|
Summary • There are two faces to content strategy: the people we’re targeting (our users), and the people who are doing the targeting (our editors). We’re responsible for making great websites. But we’re also responsible for making websites that are usable from the editor’s standpoint. We are the people who make the Web; we are also those responsible for helping those who sustain it.
Keywords • editors • content workflow • content discovery • auditing • strategy • assigning roles • execution • governance • editorial triggers.
|Rachel Andrew||Supporting Your Product|
Summary • Providing a good customer experience is really important in support. The customer may make that initial contact feeling annoyed about your product. They have an issue, and it isn’t doing what they wanted it to. Your aim should be not only to solve their problem, but to leave them feeling more positive about your product than they would if they hadn’t had the issue that brought them into support in the first place.
Keywords • support as a marketing tool • feature requests • core use case • difficult customers • the end client problem • pricing models • minimizing support • tools • no FAQs policy • support statistics • social media • future-friendly support.
|Nishant Kothary||The Design of People|
Summary • The goal of this chapter is to introduce you to the human being as the center of every success or failure in our lives. But not in that tired way we’re all guilty of where we commiserate and vent on Twitter. Or the way where we publish blog posts about the bureaucratic deadweights that are the true bottlenecks to innovation. Let’s resist the convenient cover of insanity. Let’s stop putting more lipstick on the pig, and instead explore why the pig is so darn ugly in the first place. That is, let’s talk about the root of the problem instead of the symptoms.
Keywords • psychology • communication • design reviews • the Sally-Anne test • theory of mind • cognitive bias • illusions of mind • strategy.
|Christopher Murphy||On Creative Spirit|
Summary • So, how do you establish an idea generation culture? How do you open the proverbial floodgates and unleash an endless supply of new and original ideas? Is it possible to adopt strategies that allow us to reliably generate meaningful ideas, which we can then execute skillfully? I believe, by adopting a simple mental framework and embracing a core set of strategies, it is.
Keywords • idea-generation techniques • priming the brain • digital toolbelt • sketchbooks • strategy • centralized office • café culture • the Lego office.
- 498 pages.
- The eBook contains PDF, EPUB, and Kindle.
- The printed book is sold out, but you can still get the eBook.54
The Mobile Book + Addendum
Our printed Mobile Book55 features the most important things that you need to know as a designer, developer or mobile strategist to create beautiful and rich mobile experiences. You’ll dive deep into the peculiarities of the mobile industry, explore responsive design strategy, design patterns and optimization techniques, learn about wireframing and prototyping for mobile as well as the guidelines for designing with gestures and touch.
The Mobile Book Addendum provides insights into the popular platforms such as iOS and Windows Phone and also introduces developing and debugging techniques for advanced HTML5 Web applications. Image credit for the photo below: Trent Walton56.
Well-known experts such as Peter-Paul Koch, Stephanie Rieger, Trent Walton, Brad Frost, Dave Olsen, Josh Clark and Remy Sharp have contributed to the book to present the most relevant and valuable insights. To ensure the quality of the material, the chapters have been reviewed by Scott Jenson, Bryan Rieger, Tim Kadlec, Bruce Lawson and other active members of the mobile design community. The foreword was written by Jeremy Keith. The result is a fantastic, valuable quality book that every designer should have on her bookshelf.
We’ve prepared a couple of complete bundles with all our books for your convenience. Even though the first two books were published a couple of years ago, they remain relevant and valuable, because they were designed by our editorial team to be timeless. Save 20% off the price and get yourself the Smashing Anthology, a collection of all of our Smashing Books as of today.
We sincerely appreciate your support and trust.
- 1 #toc
- 2 #toc
- 3 /wp-content/uploads/2015/11/hardboiled-web-design-large.png
- 4 https://shop.smashingmagazine.com/cart/9134583107:1
- 5 https://shop.smashingmagazine.com/cart/9134583107:1
- 6 #toc
- 7 /wp-content/uploads/2015/11/Screenshot-1.png
- 8 /wp-content/uploads/2015/11/Screenshot-2.png
- 9 /wp-content/uploads/2015/11/Screenshot-3.png
- 10 /wp-content/uploads/2015/11/Screenshot-4.png
- 11 https://shop.smashingmagazine.com/cart/9134583107:1
- 12 /wp-content/uploads/2015/11/eBook-hardboiled-web-design.png
- 13 https://smashing-magazine.myshopify.com/cart/9136548675:1
- 14 /wp-content/uploads/2015/11/Screenshot-5.png
- 15 /wp-content/uploads/2015/11/Screenshot-6.png
- 16 https://shop.smashingmagazine.com/cart/9134583107:1
- 17 /wp-content/uploads/2015/11/hardboiled-web-design-large.png
- 18 https://shop.smashingmagazine.com/cart/9134583107:1
- 19 /wp-content/uploads/2013/04/Smashing-Book-5-1200px1.jpg
- 20 https://smashing-magazine.myshopify.com/cart/1194620755:1
- 21 http://www.smashingmagazine.com/wp-content/uploads/2015/03/11-Andrew-Clarke-the-way-forward-large.png
- 22 https://guillaumekurkdjian.com/
- 23 https://jessicahische.is/
- 24 http://www.smashingmagazine.com/wp-content/uploads/2015/03/ebook-ipad-counting-stars-large-view.png
- 25 http://caniuse.com/#search=flexbox
- 26 http://hood.ie/blog/say-hello-to-offline-first.html
- 27 https://smashingcoding.wufoo.com/forms/smashing-book-5-add-your-name-into-the-book/
- 28 /wp-content/uploads/2014/04/mobile-web-handbook-opt.png
- 29 https://smashing-magazine.myshopify.com/cart/936948127:1
- 30 https://smashing-magazine.myshopify.com/cart/936948127:1
- 31 /wp-content/uploads/2014/04/large-view-opt.png
- 32 /wp-content/uploads/2014/04/large-view-opt.png
- 33 /wp-content/uploads/2013/04/mobile-web-handbook-cover-opt.jpg
- 34 https://smashing-magazine.myshopify.com/cart/988033639:1
- 35 https://shop.smashingmagazine.com/the-mobile-book-digital-edition.html
- 36 http://www.quirksmode.org/about/
- 37 http://www.quirksmode.org/about/
- 38 https://shop.smashingmagazine.com/delivery-times/
- 39 /wp-content/uploads/2014/02/mailing-image-Digital-Adaptation-standing-hardcover-v5-opt1.png
- 40 https://smashing-magazine.myshopify.com/cart/936923003:1
- 41 https://smashing-magazine.myshopify.com/cart/936923003:1
- 42 /wp-content/uploads/2014/03/Digital-Adaptation-large-preview-1.jpg
- 43 /wp-content/uploads/2014/03/Digital-Adaptation-large-preview-1.jpg
- 44 /wp-content/uploads/2014/03/Digital-Adaptation-large-preview-2.jpg
- 45 /wp-content/uploads/2014/03/Digital-Adaptation-large-preview-2.jpg
- 46 /wp-content/uploads/2014/03/Digital-Adaptation-9b-1000px-opt.png
- 47 https://smashing-magazine.myshopify.com/cart/988057883:1
- 48 https://www.boagworld.com
- 49 https://www.smashingmagazine.com/author/paul-boag/
- 50 https://www.boagworld.com
- 51 https://shop.smashingmagazine.com/delivery-times/
- 52 https://shop.smashingmagazine.com/products/smashing-book-4-ebooks
- 53 https://smashing-magazine.myshopify.com/cart/988141675:1
- 54 https://shop.smashingmagazine.com/products/the-mobile-web-ebook
- 55 https://shop.smashingmagazine.com/the-mobile-book-deluxe-bundle.html
- 56 http://trentwalton.com/2013/02/11/the-mobile-book/
- 57 https://shop.smashingmagazine.com/the-mobile-book-digital-edition.html
- 58 https://smashing-magazine.myshopify.com/cart/1113523227:1