Smashing Magazine

Summary • The world has changed and there is a new generation of empowered, connected consumers – consumers with higher expectations than ever before. If your company does not meet those expectations customers will go elsewhere. In fact, according to Customer Think, 89% of customers will stop doing business with a company after a single poor customer experience.

Keywords • Customer Relationship • Involving Customers Into The Product Design Process • Understanding Users’ Needs

Summary • Across all sectors, executives are more concerned with their agendas than fulfilling the needs of users. This makes convincing them of the value of user experience design very hard.

Keywords • Understand Customer Expectations • Users Have Limited Time and Tolerance • User Experience In The B2B Sector • User Experience Builds Brand • User Experience Cost Savings • User Experience And Increase Sales

Summary • Harry saw himself as the sole custodian of the user experience, a lone maverick trying to bring about change single-handedly. The more he met resistance, the more he saw himself as the only one who cared. Over time, he ended up bitter and angry at his management team and colleagues. He came to see them as the enemy.

Keywords • Find Colleagues Who Care • Reach Out To Your Potential Evangelists • Establish A Common Vision • User Experience Principles

Summary • Let’s imagine two employees at two different compa- nies. We’ll call one Nigel and the other Helen. The companies have been around for the same length of time, are of similar size, and operate in the same industry. Both Nigel and Helen work in legal. Their job is to make sure the companies meet their regulatory obligations and protect them from risk. Both are nice people whom you would enjoy an evening out with. But while Nigel is a constant roadblock to improving the experience of users, Helen is not.

Keywords • Pages • Humanise Your Customer • Tell The Customer’s Story • Communicate With Data • Ask Users For Feedback • Establish Regular Communication • Encourage Action •

Summary • The time will come when you will have done all you can behind the scenes. You will need permission to take the next big step. Where that line is and what that next big step will be will vary from company to company. The longer you leave it, the more momentum will be behind your cause and the more compelling your case will be. You will have more support, more statistics, more stories. In short, you will be better prepared. That will be important if you want management to take you seriously.

Keywords • Get The Attention Of Management • Apply Ux Design Principles To Management Needs • Frame Your Request Around Management’s Agenda • Validate Your Arguments • Get An External Perspective • Find Comparable Case Studies • Get Management’s Approval • Scare Your Management • Inspire Management • Give Management A Simple Next Step

Summary • The real barriers to implementing the principles of user experience design are external constraints: constraints of the technology; constraints around compliance and policies; constraints around requirements. These limitations have prevented you from ever showing what a great user experience looks like.

Keywords • An Experiment In User Experience Design • Delivering A Successful Pilot Project • Put Together The Right Team • The Three Rules Of Piloting • Find The Time For Your Pilot

Summary • Although Hannah and her team were experts in their field, they were constantly prevented from doing their best work by the organisational culture. They found themselves compromising their work just to get it out of the door in a difficult environment.

Keywords • Begin With User Needs • Enforcing Usability Testing • Collaborate Through Prototyping • Explore Alternative Approaches • Focus On Saving Users’ Time • Focus On Simplicity • Help Colleagues See Complexity • Making Legacy Simple

Summary • I was fortunate enough to work with an organisation whose senior management team sent out such an email. They made it clear that customer experience was their number one goal. Yet, a year on and little had changed, despite countless initiatives and training sessions. Any momentum gathered had stalled despite the best intentions of management. What had gone wrong?

Keywords • Work Across Silos • Address Organisational Structure • Break The Fear Of Failure • Make UX An Operational Expense • Update Policies And Procedures Establish • New Metrics At Every Level

Summary • Changing an organisation’s culture is a major undertaking. It will take years and you might not see the end. But it is a journey worth making. It won’t just help the business. It will help you, too. It will develop your skills and increase your employability. It will raise your profile in the business. Most of all, it will make a tangible difference here and now. Although some of what I have written about will take years to achieve, you can apply much of what I have covered today, things that will make a difference immediately.

Keywords • Work Across Silos • Address Organisational Structure • Break The Fear Of Failure • Make UX An Operational Expense • Update Policies And Procedures Establish • New Metrics At Every Level

Summary • The first chapter gives you a compact overview of the most important features of the design app, as well as an introduction to the interface of Sketch. Mainly, you will get a short peek into its best features: Sketch is easy to learn, fast and lightweight, it has a clean, uncluttered UI, grids are built right in, it provides powerful export options, lets you easily adapt your design to different sizes, and most of all: Sketch is vector based. Everything you build is indefinitely scalable — a must with today’s vast array of devices.

Keywords • Interface basics • Sketch basics • Bitmaps vs. vectors

Summary • The first screen we tackle is the details page. Everything starts here with the artboards which give your design a defined space. After you have added the first elements and text layers, you can read how to style them and change their properties. This includes an overview of the available shapes and fill types, as well as the usage of images. With the first layers appearing in the layers list, it’s also important to learn the best way to organize them. Lastly, you will employ an 8-px-grid, that gives the design some structure and avoids random placement of the elements.

Keywords • Artboards, Designing at 1x, Shapes, Smart guides, Layer manipulation and organization, Fill types, 8-px-grid, Colors, Opening and closing shapes, Dashed and dotted lines

Summary • A design is never finished, so we will use artboards to evolve its elements and try out different ideas. You will learn about symbols and shared styles that allow you to reuse elements and keep them in sync. This chapter also comes with some advanced techniques, such as masks, shadows, gradients, and boolean operations. The latter are especially important, as they let you combine basic shapes to form complex objects. This is also the first touch point with plugins to enhance Sketch. To round things up, we will have a look at how easy it is to recreate an icon in the design app.

Keywords • Artboard organization • Image fills • Symbols • Customize the toolbar • Aligning layers • Custom shortcuts • Masking • Zooming • Shared styles • Undo and redo actions • Plugins • Icon creation • Shadows and blurs • Gradients • Fill types • Distribute content • Boolean operations • Pixel precision

Summary • In this chapter, you will not only learn how to create a logo but also how to generate ideas surrounding it. The logo creation process involves a great deal of vector manipulation. You’ll get an overview of the different point types and their specialties. Most of the time you don’t even need to create a vector from scratch, but you can manipulate a basic shape instead. Once the logo is done, we’ll also finish the details’ page.

Keywords • Pages • How to get inspired • Types of vector points • Vector point mode • Create custom vectors • Manipulate text • Kerning and tracking • Scale layers • Layer management

Summary • Now that we have a detail page and an overview page, let’s introduce a new options bar that contains a couple of different icons. We’ll create those icons all by ourselves, as this is the perfect way to apply all the skills you have already learned, such as nested symbols and the usage of rotation. Furthermore, you will also learn how to create the list of places to visit a card view.

Keywords • Nested symbols • Advanced icon creation • Layer styles • Black is never black • Rotations • Transformations • Duplicate content • Rulers and guides • Pasting • Design with real data (featuring the Craft plugin) • Create color variations

Summary • This chapter is all about one of the strongest features of Sketch: exporting assets. When doing the setup right, all you need to do to export all your different assets is press a button. We’ll walk you through a set of iOS and Android assets and you’ll learn how to preview your designs on real devices and how to make your design workflow more developer-friendly.

Keywords • Exporting options • File formats • Save space • Multiple export • Exporting iOS and Android assets • Device preview • Collaboration • What about Windows? • Printing • Alternatives • Prototyping tools

Summary • We’ll focus on how to work with grids and layouts and how to lay out the content in an ordered manner. While dealing with lots of text and images, we’ll also look at how to sync paragraph and character styles.

Keywords • Grids and layouts • Baseline grid • Text and borders • Adding content with the Craft plugin • Choosing font sizes • Text options • Tracking • kerning and ligatures • The optimal reading experience • Add a drop cap • Images • Image manipulation • Text styles • Maximize available space • Blending modes • Duplicate content with Craft • Nested symbols • Layer order

Summary • In this chapter, we look at a few different screen widths to figure out how any possible adaptations might look. Sketch will help us define how those elements react when they are being resized. With a little preparation, you just need to adapt the parent container and everything changes accordingly. Finally, this chapter will provide some important tips and tricks on how to best adapt the font sizes from one breakpoint to another.

Keywords • Designing with constraints (group resizing) • Responsive grid • How to go from one breakpoint to another • Adapt content with Craft

Summary • After we’ve finished the first two breakpoints, we’ll look at how the available information can be arranged on a widescreen display. Therefore, we’ll adjust the grid and adapt most of the article elements to this new grid.

Keywords • Designing with constraints (group resizing) • Responsive grid • How to go from one breakpoint to another • Adapt content with Craft • Make the app responsive

Summary • We’ll create four different icons to reuse them as often as possible and to combine them into complex shapes with boolean operations. We’ll use keyboard shortcuts whenever possible. Also, we’ll learn how to use these icons with a grid.

Keywords • Advanced icon creation • Icon creation workflow • Grids • Pixel perfection • Efficiency with keyboard shortcuts • Vector manipulation • Boolean operations • Pixel preview • Layer duplication

Summary • The category icons are finished, but the work isn’t done yet. This chapter focuses on their optimization. These optimizations include adapting to borders wherever possible to keep the file size down when exporting these assets.

Keywords • Icon export workflow • Which format to choose: SVG or PNG • Optimize icons for small file size

Summary • In this course we will recap some of the topics we already have touched, but in a less formal way. Consider these as “design snacks” of sorts: fun projects that let you play around in Sketch. You will learn how to create a realistic clock, five different versions of pie charts, textured type, a round progress bar, and some logos. If you are already an intermediate user of Sketch, this is the chapter for you.

Keywords • Create a realistic clock • Create textured type • Create pie charts (five different methods) • Create a round progress bar • Create some logos • Advanced shadows • Multiple borders and gradients • Rotations • Rotate copies • Masks • Image and pattern fills • Blending modes • Advanced vector manipulation • Advanced border options • Text on a path • Create branding assets • How to account for missing fonts

There’s no shipping costs for the The Sketch Handbook or any other order with the total cost above $20 — wherever you are in the world! We ship everywhere worldwide via airmail.

We pay a share of the shipping costs ourselves to make it possible for anyone to purchase the book. Our prices are transparent: we don’t have any hidden costs, and we won’t confuse you with tricky calculations. What you see is what you pay. Also, check estimated delivery times⁴⁸.

All books will be shipped via airmail to keep delivery times as short as possible. You can find the anticipated delivery time for your country in the delivery times overview⁴⁹.

Yep, sure is! The book is available in PDF, ePUB and Amazon Kindle formats. You can get the eBook right away!⁵⁰

We accept PayPal, VISA, MasterCard and American Express. Of course, we use a secure connection, with 256-bit AES encryption and a green GeoTrust Extended Validation SSL CA certificate. And no, we don’t store your credit card data on our servers.

Yes, absolutely! No risk is involved. Our 100-day full money-back guarantee keeps you safe. Don’t hesitate to return your purchase. You’ll get your money back with no ifs, ands, or buts!

Please leave a comment below, or get in touch with us via the contact form⁵¹ or via @SmashingSupport on Twitter⁵². We would love to help you in any way we can — you know that!

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.

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.

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.

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.

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.

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 section, article, aside, header, footer, and nav. You’ll learn how to make your markup faster, more responsive and, of course, hardboiled.

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.

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.

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 border-radius (that our clients love so much) and border-image for using images inside those borders.

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.

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.

Summary •

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

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

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.

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

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

Summary • We can use Flexbox for a while now.⁶⁹ 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 • flex container • orientation • wrapping • sizing boxes • flex property • forms with Flexbox • advanced alignment • magical margins • reordering boxes • order property • Flexbox as progressive enhancement

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

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

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

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

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

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 First⁷⁰: “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

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

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.

Keywords • mobile first • jQuery dependence • dealing with IE8 • advertising • refactoring • code inventory • front-end optimization • performance budget • SpeedIndex • deferring web fonts • critical CSS • smart font fallback • dealing with JavaScript • asynchronous loading • SPDY/HTTP 2.0 • core content/functionality priority lists • responsive images

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.

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.

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.

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.

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.

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.

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.