The Smashing Library (68 eBooks)

About The ebook Bundle

Since over 12 years, Smashing Magazine is where thousands of designers and developers go to learn about design trends and advanced coding techniques.

That is why we have developed the Smashing Library, a comprehensive access to 68 valuable eBooks. The Library includes our latest releases Success at Scale, Understanding Privacy, Touch Design for Mobile Interfaces, Image Optimization, and TypeScript in 50 Lessons, too!

This eBook bundle contains all of the following eBooks, each of which are downloadable in all formats: ePub, Kindle, and PDF:

Smashing Print #1: Ethics & Privacy +

For a long time, we wanted to create a printed magazine that hasn’t existed before. Not a magazine about fleeting design trends or ever-changing frameworks, but topics that would make us all think, and remain useful as time passes by. A magazine exploring topics that often get lost in a myriad of blog posts out there. Written by the community for the community. Jump to table of contents.

We kick off with an issue exploring topics very close to our hearts — ethics, privacy and security, because these issues reach into all our lives, from our personal use of the web through to the advanced applications we develop. We look into tracking, advertising, GDPR and privacy law, data protection and addictive interfaces. We explore how to integrate privacy-driven decisions into our workflows by default and abandon dark UI patterns for good. Download a free PDF preview (3 MB).

• Editor’s Note
• Towards Ethics By Default, One Step At A Time
• Designing For Addiction
• It’s Not About You
• This One Weird Trick Tells Us Everything About You
• Quieting Disquiet
• Advertising Is Not The Problem

Click! How to Encourage Clicks Without Shady Tricks (eBook) +

The web has become a noisy place with millions of companies trying to get users’ attention. No wonder many of them apply increasingly desperate techniques to encourage users to act on their websites. We’ve seen an explosion of dark patterns attempting to manipulate users into handing over personal data or make a purchase. Jump to table of contents.

However, these manipulative techniques come with hidden costs in customer service, maintenance, support, return processing fees, and social media backlash. They cost a fortune and hurt business irrevocably. Download a free PDF sample (17.3 MB) (ePUB, Kindle).

How, then, do we encourage users to act? If dark patterns are not the answer, then what is? How do we increase clicks without shady tricks? These are the questions that Click! answers.

• Avoid the Dangers of Persuasion — Paul begins your journey towards improved conversion with a rock-solid business case you can take to management or clients to avoid the more manipulative techniques you see online.
• Measure Conversion Effectively — You cannot improve what you are not measuring. That is why, in Paul’s second chapter, he explores how to measure your conversion rate effectively. Only then can you start to improve it.
• Get to Know Your Users — If you want to persuade people to act, you need to understand how they think and what they want. To do that you need to carry out at least some user research. In this chapter, Paul introduces you to easy to use techniques that will get the job done with the minimum of investment.
• Build a User-Centric Sales Funnel — The decision to act doesn’t take place in isolation and is part of the broader user journey. In this chapter, Paul explains how to understand that journey and build a sales funnel that supports the user’s experience, rather than seeking to interrupt it.
• Address Objections and Reduce Risks — This chapter explores one of the most important aspects of encouraging users to act — addressing their concerns. Paul shows you how to identify user’s objections and then overcome them, so reducing the risk of taking action in the minds of users.
• Establish Trust and Overcome Scepticism — People will not hand over money or personal information if they do not trust you. To make matters worse users have learned to be sceptical online. In this chapter, you will learn how to build a connection with your audience and help them learn to trust you.
• Defeat Cognitive Overload — In this chapter, you will discover how to reach an audience who is distracted and time-poor. You will learn the importance of not making users think and learn valuable techniques for making taking action an effortless experience.
• Overcoming the Problem With Perception — Are your users taking away the right message from your website? Do they understand what you offer or that it is relevant to them? It is easy to leave a website without acting because you had the wrong impression. This chapter shows you how to address this genuine danger.
• Never Stop Testing and Iterating — While <em>Click!</em> is packed with great tips and techniques, the real key to success is a programme of ongoing testing and iteration. In this chapter, Paul shows you how to put in place a methodology that will keep your conversion rate growing for years to come.
• Address the Whole Experience — While marketers and UX designers have an enormous impact on conversion, they are only a part of the story. That is why in this chapter, Paul shows you how to address the whole user experience and start encouraging colleagues to help improve the conversion rate too.
• Where to Go From Here — With a book this packed with advice, it can be overwhelming. Fortunately, Paul concludes the book with some practical next steps that you can take, wherever you are on your journey to improve conversion.

Image Optimization (eBook) +

Images have always been a key part of the web. Our brains are able to interpret images much faster than text, which is why high-quality visuals drive conversions and user engagement.

That said, loading images efficiently at scale isn’t a little project for a quiet afternoon. It requires understanding of compression techniques, loading behavior, image decoding and image CDNs, adaptive media loading and caching.

This book will equip you with everything you need to know to optimize how you compress, serve and maintain images — boosting performance along the way.

• The Humble <img> Element — The humble <code>&lt;img&gt;</code> element has gained some superpowers over the years. Given how central it is to image optimization on the web, let’s catch up on what it can do.
• Optimizing Image Quality — Most optimization tools allow you to set the level of quality you’re happy with. Lower quality reduces file size but can introduce artifacts, halos, or blocky degrading.
• Comparing Image Formats — Each new image format has a range of effectiveness if you compare and align on a consistent “quality” of experience. In this chapter, we will explore the challenge of defining quality and setting expectations when converting between formats.
• Color Management — Ideally, every screen and web browser in the world would display color in exactly the same way. Unfortunately, they don’t. Color management allows us to reach a compromise on displaying color through color models, spaces, and profiles.
• Image Decoding Performance — How quickly an image can be decoded determines how soon browsers can show it to the user. Keeping this efficient helps ensure a good user experience. Let’s dig deeper into image decoding to understand how browsers perform behind the scenes and how you can control decoding.
• Measuring Image Performance — In this chapter, we will look into how to use Lighthouse to audit for unoptimized images and how to monitor a web performance budget for images.
• JPEG — The JPEG may well be the world’s most widely used image format. Let’s examine JPEG’s compression modes as these can have a significant impact on perceived performance.
• PNG — From the very basics to palette modes, index and alpha transparency, and compression tips, in this chapter we’ll take an in-depth look at PNGs.
• WebP — WebP is a relatively recent image format developed with the aim of offering lower file sizes for lossless and lossy compression at an acceptable visual quality. Let’s explore how to use WebP images in production today.
• SVG — There are a number of ways to implement SVGs in a web page. In this chapter, we’ll take a look at different approaches and at how to keep your SVGs lean and performant.
• Responsive Images — Using responsive images is a key part of delivering fully responsive web design. This chapter covers techniques for defining responsive images.
• Progressive Rendering Techniques — There are many progressive image loading techniques that can shorten perceived load time. In this chapter, we’ll look at different ways of progressively loading images to improve performance and the user experience.
• Optimizing Network Requests with Caching and Preloading — Downloading files such as images or videos over the network can be slow and costly. HTTP caching, service workers, image spriting, and preloading help optimize network requests. Let’s explore how they work.
• Lazy-Loading Offscreen Images — Web pages often contain a large number of images, contributing to page bloat, data costs, and how fast a page can load. Let’s take a look at how lazy-loading offscreen images can help improve the situation.
• Replacing Animated GIFs — If you’re aiming to improve the loading performance of your pages, animated GIFs aren’t very compatible with that goal. But this is an area of loading performance where, without a lot of work, you can get significant gains without a loss of content quality.
• Image Content Delivery Networks — For sites with large traffic and a global reach, basic optimizations at build time are usually not enough. CDNs help teams to handle known static assets ahead of time as well as dynamic assets to improve load times and site reliability.
• HEIF and HEIC — While other image formats may offer broader compatibility, HEIF is worth being familiar with as you may have users wishing to work with this format on iOS.
• AVIF — AVIF aims to produce high-quality compressed images that lose as little quality as possible during compression. Let’s dive deeper into its features, browser support, and performance.
• JPEG XL — JPEG XL is an advanced image format aiming to deliver very significant compression benefits over JPEG. In this chapter, we’ll take a closer look at what it has to offer.
• Comparing New Image File Formats — While the new image formats support roughly the same sets of capabilities, the strength of each differentiates between them. The tables in this chapter aim to offer a summary of some of the more important features and how well each format handles various image types.
• Delivering Light Media Experiences with Data Saver — Browsers with Data Saver features give users a chance to explicitly tell us that they want to use a site without consuming so much data. Let’s see how to make use of Data Saver to deliver light media experiences.
• Optimize Images for Core Web Vitals — Which metrics should you focus on to improve the user experience? Core Web Vitals focuses on three key aspects of user experience: page loading experience, interaction readiness, and the visual stability of the page. Let’s take a look at each one of them.
• Twitter’s Image Pipeline (Case Study) — Tweets are often accompanied by images to illustrate, amuse, and increase user engagement. That is why Twitter places so much emphasis on a strong image optimization process. This case study focuses on the different steps that Twitter has taken to load images faster while ensuring they are as impactful as intended.

Touch Design for Mobile Interfaces (eBook) +

Mobile and touch are the new normal for computing, but there remain a lot of myths, rumors, errors, bias, and out-of-date information on how portable touchscreens are used. Let’s change that!

In our brand-new book Touch Design for Mobile Interfaces, Steven Hoober shares his in-depth research about designing for touch as well as tips, tricks, trends, tendencies, guidelines, and heuristics you can apply to your work immediately to create human-centered mobile interfaces.

• Defining Mobile Devices — The first chapter describes different devices in the context of their unique attributes of portability, connectivity, and awareness. We’ll come to understand how important it is to understand mobile technology and use patterns, and become aware that mobile paradigms are influencing more traditional computing platforms.
• The History and Technology of Touch — Chapter 2 reviews the evolution of direct screen interaction dating back to the 1950s, and the development of commercialized touch since the 1980s. Today’s devices can be better understood by learning how touch technology advanced before achieving ubiquity through capacitive touch.
• Capacitive Touch — Chapter 3 addresses how capacitive touch intersects with human behavior and impacts our design work.
• Standards, Assumptions, and Problems — We’ll learn how various standards, assumptions, and problems can be problematic for designers of today’s mobile touchscreens. The specifications, norms, and principles of earlier times are sometimes not to be trusted as they are too often based on technological assumptions that no longer apply.
• Finding Out How People Hold and Touch — Chapter 5 covers the observational research Stevn Hoober conducted to discover how people actually manipulate their mobile phones and tablets in everyday use. Through debunking some widely accepted but incorrect assumptions, we’ll learn most of all to change the way we think about designing for touch, because while there are many ways to hold a device, everyone uses them all, constantly shifting from one to another.
• Touch Accuracy and the Center-Out Preference — To understand touchscreen performance, Steven undertook several studies and found that popular notions of touch accuracy and preferred touch regions are wrong. He discusses this in chapter 6 and shows that people favor the middle of the screen for both reading and touching.
• How Fingers Get In the Way — Every mobile device user has experienced how fingers get in the way, and in chapter 7, you’ll learn how our designs can take into account the ways people adapt their touch to perform different actions like tapping and scrolling, and to overcome problems of visibility and interactivity.
• Imprecision and Probability — Chapter 8 covers the issues around imprecision and probability and shows how we need to design systems, interactions, and processes that prevent mistakes — especially avoiding catastrophe when mistaken taps are made.
• Phones Are Not Flat — Mobile devices are used in all kinds of locations and people handle them constantly. People and their environments can be confusing, confounding, and unpredictable. Chapter 9 describes ways we can consider likely problems when planning the design of our apps and websites.
• People Only Touch What They See — We start to move into tactics — with a little less theory, data, research, and background info. Chapter 10 covers best practices in how the UIs of interactive elements are designed to attract the eye, afford action, be readable, and inspire confidence that they can be safely tapped.
• 1, 2, 3 — Designing by Zones — In chapter 11, Steven introduces the concept of information design, describes how human vision is not what it appears to be, and then turns all that we’ve learned so far into a simple formula we can all use to create well-organized, usable templates for touchscreen design.
• Progressive Disclosure — Shifting from template theory to template creation practice, in Chapter 12, we’ll review the pros and cons of some of the most important page design elements, such as menus, lists, floating bars, and tabs, to see how they can integrate with the concept of information design for center-out touchscreen products.
• Practical Mobile Touchscreen Design — We’ll finish off by skimming lightly over more or less the entire process of designing digital touchscreen products, from teams to strategy and onward. From these resources we can start building a reference library of how to pursue each aspect of the design process.

TypeScript in 50 Lessons (eBook) +

In TypeScript in 50 Lessons, Stefan Baumgartner breaks down the quirks of TypeScript into short, manageable lessons. You’ll make sense of TypeScript concepts, tooling for TypeScript and how to get most out of it without learning a new language. Everything TypeScript explained, from start to finish.

Written for seasoned and not-so-seasoned developers who know enough JavaScript to be dangerous, or want to dive deeper into TypeScript. With code walkthroughs, hands-on examples and common gotchas, that’s a book you might want to keep close.

You’ll learn:

• TypeScript concepts, and how to make sense of them all.
• TypeScript tooling, needed to use the language effectively.
• How to get most out of TypeScript without learning a new language.
• Structural type systems, their semantics, and why they matter.
• Low-maintenance types and how to write types once, and let them grow automatically as code evolves.
• How to bend the type system to make it fit the needs of your projects.
• TypeScript culture and how the language is evolving.

• TypeScript for Smashing People — In this chapter, we want to debunk myths. TypeScript can be so many things, and many people have different views on this programming language that has become so popular in recent years. What is TypeScript actually about? Let’s see what TypeScript has in store for us.
• Working with Types — Now that we are acquainted with TypeScript and feel more comfortable using it, it’s time to dig a bit deeper into the eponymous types.
• Functions — We’ll take a good look at functions. Functions are essential in JavaScript, and there are lots of different typing scenarios available to us. To make functions tangible, we’ll look at a website’s search field: a search field with type-ahead, that shows some results the moment a user types a search query.
• Union and Intersection Types — Starting with this chapter, we’ll go deep into TypeScript’s type system. We will learn about the set theory behind TypeScript, and how thinking in unions and intersections will help us get even more comprehensible and clearer type support.
• Generics — Generics offer us a way to prepare for the unknown. They let us define types that describe a certain piece of the type system where the details are filled out later. This is the land where utility functions and utility types are born.
• Conditional Types — With conditional types, we get the last tool in our tool belt to make most sense out of JavaScript code. Conditional types allow us to validate an input type’s set, and decide on an output type. To be sure, some conditional types can be mind-blowingly hard to understand, and their potential is sometimes hard to grasp. But this is what we want to clear up!
• Thinking in Types — In the final chapter, we’ll work to strengthen our knowledge by seeing solutions to problems you might encounter every day in your TypeScript life. Our goal is to write just a couple of types to make our life easier, so we can focus on coding more JavaScript.

Understanding Privacy (eBook) +

Privacy is a scary topic? It doesn’t have to be. Our new book Understanding Privacy helps you understand what data privacy is really about beyond scary headlines. It is an introduction to the beliefs, concepts, and ideas that inform privacy as it exists — or has failed to exist — on the open web that we build. Whether you’re a designer, developer, or project manager, this book will equip you with the knowledge you need to put your users first in everything you do and build a better web for tomorrow.

• Privacy and You — In the book’s first section, “Privacy and You,” Heather reviews the fundamental concepts, definitions, and frameworks behind privacy and data protection.
• Privacy and Your Work — In the second section, “Privacy and Your Work,” Heather discusses how to integrate a healthy approach to user privacy into everything you do, whether you are a designer, a developer, or a project manager.
• Privacy and Your Users — “Privacy and Your Users” covers issues around user privacy where you can make a difference.
• Privacy and Your Future — In “Privacy and Your Future,” Heather suggests a few critical areas that make the web a better place and lay the ground for future developers, designers, and project managers to build a better web for tomorrow’s users.
• Privacy and Health Data — In the final section, “Privacy and Health Data,” Heather addresses an even more pressing recent issue: the obligations we have to safeguard user privacy and health data, and how to do it as best we can.

Art Direction for the Web (eBook) +

The web can be more than plain rectangles and perfect circles. Art Direction for the Web exists because we wanted to explore how we all, designers and front-end developers alike, can break out of generic web experiences prevailing today.

In the book, Andy explores original compositions, unexpected layouts, critical design thinking and front-end techniques that will help you create something that stands out.

To achieve this, the book applies art direction to examine a new approach to designing for the web. This book is supposed to make you think, and ask questions, and polish every pixel with clear intent and purpose. It will show you how art direction will:

• Connect your brand with customers
• Create connected experiences
• Improve engagement and conversions
• Bring personas and user stories to life
• Take design beyond frameworks

• What Art Direction Means
• One Hundred Years Of Art Direction
• Art-directing Experiences
• Art Direction And Creative Teams
• Principles Of Design
• Directing Grids
• Directing Type
• Directing Pictures
• Developing Layouts With CSS Grids
• Developing Components With Flexbox
• Developing Typography
• Developing With Images

Design Systems (eBook) +

As the web continues to become more complex, designing static pages has become untenable, so that many of us have started to approach design in a more systematic way. In this book, Alla Kholmatova sets out to identify what makes an effective design system that can empower teams to create great digital products.

• Design Systems — There isn’t a standard definition of “design system” within the web community and people use the term in different ways. In this chapter, we’ll define what a design system is and what it consists of.
• Design Principles — Solid principles are the foundation for any well-functioning system. In this chapter we’ll discuss the qualities of effective design principles and look at some of the ways of defining them.
• Functional Patterns — In this chapter we’ll discuss the role of functional patterns and why they should be defined early in the design process.
• Perceptual Patterns — In this chapter we’ll discuss how perceptual patterns work and their role in a design system.
• Shared Language — This chapter describes how to establish a shared language, which allows a group of people to create and use patterns cohesively for a particular product.
• Parameters of Your System — This chapter introduces some of the qualities a design system can have, and the ways in which risks and downsides can be managed.
• Planning And Practicalities — In this chapter we’ll look at finding support for establishing a design system in your organization, and planning and starting the work.
• Systemizing Functional Patterns — The exercise in this chapter describes an approach to systemizing functional patterns, starting with a product’s purpose.
• Systemizing Perceptual Patterns — The exercise in this chapter describes how to conduct an inventory of styles, define perceptual patterns, and integrate them into the system.
• Pattern Libraries — In this chapter we’ll look at some of the practical techniques to set up a simple, useful, and multidisciplinary pattern library.

Smashing Book 6: New Frontiers In Web Design (eBook) +

Meet Smashing Book 6 with everything from accessibility to CSS Custom Properties, Grid, Service Workers, performance patterns, AR/VR, conversational UIs and responsive art direction.

• Making Design Systems Work in the Real World
• Accessibility in Times of Single-Page Apps
• Production-Ready CSS Grid Layouts
• A Strategy Guide to CSS Custom Properties
• Building an Advanced Service Worker
• Loading Assets on the Web
• On Designing Conversations
• UX Design of Chatbots and Virtual Assistants
• Crafting Experiences for AR/VR/XR
• Bringing Personality Back to the Web

User Experience Revolution (eBook) +

Many companies try to create a great experience for customers. But few are willing to make the changes required to deliver on that promise. In fact most don’t even realize just how bad their experience can be.

• Getting Real About User Experience Design
• How To Sell The Benefits Of User Experience Design
• Create Customer Experience Evangelists
• Raise The Profile Of The Customer
• Get Managerial Support
• Develop A Proof Of Concept
• Establish Better Working Practices

Apps For All: Coding Accessible Web Applications +

Accessibility is not just about addressing specific disabilities, but making sure as many people as possible have access to the same information.

Written by Heydon Pickering and reviewed by Steve Faulkner.

• This Is For Everyone — Though we shall encounter visual design challenges, deal with performance issues, and adopt progressive enhancement — all of which are accessibility concerns — the underlying theme of this book is about making the interactivity of web applications include keyboard and screen reader users.
• It’s All About Buttons — For many years, the World Wide Web was defined almost entirely by a peculiar type of button called a hyperlink which, when pressed, would take a reader from one location to another in a continuum of in- terconnected documents. First alphabetically and first in importance, only the &lt;a&gt; element could be said to truly define the web: it’s the glue which holds all our shared knowledge together.
• The WAI Forward — Even when we branched out to do something a little more radical with CSS transitions, we made sure our technique was a progressive enhancement, built on robust foundations. This way, older browsers and other technologies still had something to fall back on.
• Getting Around — The structure of webpages which many people consume visually, set to a grid, is no structure at all to those who are not looking. To screen reader users, grids do not exist. The extra time it takes the page to load your perfect golden ratio grid system framework is all for nothing to them. Even keyboard users (who can at least adjust their gaze to a new item) are not really helped by a multiple column layout. They still have to cover the same distance, just sideways.
• Peekaboo — Looking at JavaScript-driven web interfaces, by far the most common interaction style is based on showing stuff or hiding it or... oh, that’s pretty much it. Strip away the idiosyncratic design, the transition type, scaling, and all the other nuances and — underneath — you’re left with one of:
• It’s Alive! — To ensure users get the message, ARIA provides live regions. As their name suggests, live regions are elements whose contents may change in the course of the application’s use. They are living things, so don’t always stand still. By adorning them with the appropriate ARIA attributes, these regions will interrupt the user to announce their changes as they happen.
• Welcome To The Community — To conclude this introduction to web application accessibility, I’d like to introduce you to the accessibility community and many of the fantastic free tools and resources available to help you build accessible applications.

Digital Adaptation (eBook) +

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.

• A Message for Web Professionals
• The Digital Divide
• Setting Your Digital Direction
• Adopting A Digital Culture
• Digital Teams: Agents Of Change
• Digital Demands A Different Way Of Working
• Grassroots Change

Inclusive Design Patterns (eBook) +

We make inaccessible and unusable websites and apps all the time, but it’s not for lack of skill or talent. It’s just a case of doing things the wrong way. We try to build the best experiences we can, but we only make them for ourselves and for people like us.

• 0. Introduction — We will look at an interactive element, a button, from the perspective of three types of designers. The purpose of this example is to show you how a little bit of knowledge about the medium can lead to a simpler and (therefore) more inclusive solution.
• 1. The Document — We will look into discrete interface patterns; modules, components, widgets, conventions, whatever-you-want-to-call-thems. It would be foolhardy not to first acknowledge that each will ultimately belong to a web document. HTML pages vary dramatically in shape and size and can include any combination of patterns, but there are a handful of 'document level' best practices to which we should adhere. The aim here is not to go in search of the ultimate 'boilerplate' but to configure a parent web page to support inclusive design.
• 2. A Paragraph — We'll be looking at typefaces, leading, measure, justification, contrast, focus indication and more, to help you design paragraphs suited for a hugely diverse audience. We'll also tackle specific issues for folks with limited vision, dyslexia, Irlen syndrome, low literacy and limited technical knowledge.
• 3. A Blog Post — We'll show how to incorporate accessible landmarks and a sound section structure to make the content more navigable and interoperable to a diversity of users and parsers. This will be bolstered by giving well-written and context independent structural as well asand context independent structural and navigational cues.
• 4. Navigation — We'll progressively enhance HTML's primitives to create the inclusive means to navigate within and between web pages. We will also cover design provisions transferable to many other patterns, including logical source order and the virtue of eliminating redundancy. We will also tackle how to progressively enhance the navigation with JavaScript.
• 5. A Menu Button — In this chapter, we'll ensure our menu button and the content it reveals are inclusive of differing user settings, circumstances, devices, and assistive technology software.
• 6. Inclusive Prototyping — By going straight from paper to HTML, we lay the foundations for efficient code and inclusive experiences.
• 7. A List Of Products — In this chapter, we'll practice our inclusive design chops. As in previous patterns, the organization and structure of content is paramount. We'll look deeply into image accessibility, from both the perspectives of alternative text composition and performance. In catering to blind consumers, to those who cannot afford generous data contracts, and anyone accessing your content from outside your interface, this is a chance to really push the limits of inclusive design.
• 8. A Filter Widget — We'll explore the importance of giving users choice and control over how their content is arranged. We'll also use some techniques to make sure our design was tolerant of dynamic and fluctuating content. Inclusive design also means a visual design which is not too strict about the nature of the content imparted to it.
• 9. A Registration Form — This chapter will give you everything you need to develop inclusive forms. By using standard form elements, effective labeling and facilitating the correction of errors, users of all walks are able to access and contribute to your websites and apps. By keeping the form simple and avoiding irritating experiences like disappearing labels and passwords that you cannot check, we've made sure using the form isn't just possible but pleasurable.
• 10. Test-driven Markup — Test-driven development allows developers working with frequent iterations to move forward with confidence. By writing tests first, to prescribe outcomes, then creating the functionality to achieve them, you can ensure successful builds behave in a predictable and reliable fashion.

Making It Right: Product Management For A Startup World +

This eBook will empower product managers who work in digital and help them to build better products that make their companies and users more successful.

• Roles And Responsibilities Of The Product Manager
• Uncovering Needs
• Product Discovery
• The User Experience Of kalahari.com
• Product Roadmaps
• Defining A Product
• User-Centered Design And Workflows
• What About Responsive Design?
• Specifications
• Build And Release
• Assess And Iterate
• Product Management In Agile Methodologies
• Getting Started

The New Hardboiled Web Design +

If you’re hungry to learn about how the latest techniques will make your websites more creative, flexible and adaptable, then “Harboiled Web Design” is for you.

• What The Hell Is Hardboiled? — 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 — 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 — 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 — 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 — You’ll learn about designing atoms and elements and how web design style guides help you presenting designs in a more effective way. Learn how to present the atmosphere of a design while designing components separate from layout with Style Guides.
• Designing Atmosphere — 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.
• Destination HTML5 — 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 as section, article, aside, header, footer, and nav. You’ll learn how to make your markup faster, more responsive and, of course, hardboiled.
• Hardboiled Microformats2 — Because your SEO ranking matters, you’ll discover the updated microformats2 — simple markup patterns for making your data machine-readable and therefore search engine friendly.
• WAI-ARIA Roles — 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).
• Hardboiled Foundations — 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 — You’ll investigate new Flexible Box layouts and how to visually reorder content without laying a hand on your markup, how to overcome common frustrations such as equal height backgrounds on unequal height columns, and more.
• Responsive Typography — 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 — With your hardboiled HTML all set and your smaller screen styling in place, you’ll now give your design an extra level of fidelity and interaction that makes the most of the space available on larger screens. You’ll redevelop our vertical list into a grid of eight magazine covers that reveal their descriptions when we press on them. You’ll do this by applying relative positioning but without any horizontal or vertical offsets.
• Borders — CSS borders can be exciting because they include properties that open up a wealth of creative opportunities. You’ll investigate new design possibilites with properties such as border-radius (that our clients love so much) and border-image for using images inside those borders.
• Background Images — Since we’re also able use multiple background images and to change their origin point and size, there’s a vast variety new creative opportunities. You’ll get started by making a design using multiple background images. Background properties give us precise control over the size of our background images and how they’re rendered behind our elements.
• Gradients — 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.
• Background Blends And Filters — The rapidly increasing pace of change is a good thing for designers and developers, businesses and brands, and the internet in general. New technologies like CSS filters and background blends are not only being introduced faster, but they’re being implemented in browsers and turned into standards faster, too. Now’s not a time to kick back — it’s a time to use these exciting new tools to make creative work with depth and subtlety, work that’s hardboiled.
• Transforms — CSS layouts can sometimes be a little strait-laced. You’ll learn how two-dimensional and three-dimensional transforms can help your designs break out of the box.
• Transitions — In web pages and applications, changes in state can have a huge impact on how it feels to use an interface. Make a change too fast and an interaction can feel unnatural. Make it too slow, even by a few milliseconds, and an interface will feel sluggish. You’ll learn how to make state changes smoother with a host of CSS transitions.
• Multi-column Layout — 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.

The Sketch Handbook (eBook) +

If you’re designing for the web today, you are probably using Sketch. We do, too, so we created “The Sketch Handbook”, filled with many practical examples and tutorials in 12 jam-packed chapters.

• An Introduction To Sketch
• Designing An App
• The Power Of Iterations And Artboards
• Creating A Logo For The App
• Creating The Overview Page
• Exporting
• Design The Article Page
• Going Responsive
• The Final Breakpoint: Desktop Widescreen
• Designing The Category Icons
• Export The Category Icons
• Mini Projects

The WebP Manual +

In this ebook, you’ll learn all about WebP: what it’s capable of, how it performs, how to convert images to the format in a variety of ways, and most importantly, how to use it.

• Foreword
• WebP Basics — Depending on your site’s audience and the browsers they use, using WebP images is an opportunity to deliver less data-intensive user experiences for a significant segment of your audience.
• Performance — We’ll cover how both lossy and lossless WebP compare to JPEGs and PNGs exported by a number of image encoders.
• Converting Images To WebP — This can be done in a myriad of ways, from something as simple as exporting from your preferred design program, by using Cloudinary and similar services, and even in Node.js-based build systems. Here, we’ll cover all avenues.
• Using WebP Images — Because WebP isn’t supported in all browsers, you’ll need to learn how to use it that sites and applications gracefully fall back to established formats when WebP support is lacking.
• In Closing — WebP does offer potential benefits to a large portion of internet users. In my experience, WebP has substantially improved loading performance for many of my clients, and continues to be a tool I reach for when I want to make pages as lean as possible.
• Appendix

A Career On The Web: Assuming Leadership +

Fresh ideas and practical advice to help you improve your leadership skills and foster a passionate and agile team.

Taking the step from being a member of a digital team to becoming a leader can be quite overwhelming. Having proven that you excel in the technical aspects of your job is most probably beyond question, but a leadership position will naturally confront you with entirely new challenges which also call for new skills. After all, a team is as good as its leader, right?

• Assuming Leadership In Your Design Agency
• Lessons Learned From Leading New Web Professionals
• How And Why To Make Side Projects Work At A Digital Agency
• Internal Developer Training: Doing It Right
• How To Build An Agile UX Team: The Culture
• How To Build An Agile UX Team: Hiring
• How To Build An Agile UX Team: Integration
• How To Recruit A UX Designer

A Career On The Web: On The Road To Success +

There comes a time in everyone’s career when changing jobs is the natural next step. But how can you make the most of this situation and find a job you’ll love?

There comes a time in everyone’s career when changing jobs is the natural next step. Perhaps you’re looking for a new challenge or you feel like you’ve hit a wall in your current company? Either way, you’re standing at a crossroad, with an overwhelming amount of possibilities in front of you. But how can you make the most of this situation? How can you find a job you will truly love?

• How A Designer Can Find A Job They Will Truly Love
• The Difference Between Good And Bad Job Requirements
• Preparing For A Front-End Job Interview
• Land Your Next Web Development Job: The Interview Process
• Career Advice For Graduating Web Design Students
• The Habits Of Successful New Web Professionals
• How To Maintain Your Brand As A Corporate Employee

A Field Guide To Usability Testing +

Testing usability is vital to creating a successful website — even more so if it’s an e-commerce website, a complex app or any other complicated project.

Testing usability is vital to creating a successful website — even more so if it’s an e-commerce website, a complex app or any other complicated project. Unlike interviews and focus groups, a well-designed user test measures actual performance.

• The Ultimate Guide to A/B Testing
• Multivariate Testing in Action: Five Simple Steps To Increase Conversion Rates
• 15 Essential Checks Before Launching Your Website
• Test Usability By Embracing Other Viewpoints
• Multivariate Testing 101: A Scientific Method Of Optimizing Design
• Comprehensive Review Of Usability And User Experience Testing Tools

A Field Guide To User Research +

With this eBook, you will learn to take the guesswork out of your design decisions and base them on real-life experiences and user needs instead.

User research is an effective strategy to gain a deeper understanding of your target audience — a crucial step in order to choose efficient design solutions and build smart products. But what has to be considered when conducting user research? What methods have proven themselves in practice? And how do you finally integrate your findings into the design process? With this eBook, you will learn to take the guesswork out of your design decisions and base them on real-life experiences and user needs instead.

• A Five-Step Process For Conducting User Research
• A Closer Look At Personas: What They Are And How They Work
• A Closer Look At Personas: A Guide To Developing The Right Ones
• All You Need To Know About Customer Journey Mapping
• Facing Your Fears: Approaching People For Research
• Considerations When Conducting User Research In Other Countries: A Brazilian Case Study
• How To Run User Tests At A Conference

Behind The Scenes Of Real-Life Projects +

The eBook “Behind the Scenes of Real-Life Projects” takes a closer look at the techniques and stories of some folks behind real-life Web projects.

• Building The New Financial Times Web App
• Bringing Angry Birds To Facebook
• Behind The Scenes Of Nike Better World
• Behind The Scenes Of Tourism New Zealand
• Tale Of A Top-10 App, Part 1: Idea And Design
• Tale Of A Top-10 App, Part 2: Marketing And Launch
• Gone In 60 Frames Per Second: A Pinterest Paint Performance Case Study
• Inside Google’s User Experience Lab: An Interview With Google’s Marcin Wichary
• Mistakes I’ve Made (And Lessons Learned Along The Way)

Clients: Friends You Never Had +

The eBook “Clients: Friends You Never Had” provides valuable advice to foster stable relationships and a fruitful cooperation with your clients.

• Getting Engaged
• How To Build Long-Term Client Relationships
• Keys To Better Communication With Clients
• Guidelines For Successful Communication With Clients
• Effective User Research And Transforming The Minds Of Clients
• Why Account Managers Shouldn't Prevent Designers From Speaking To Clients
• How Do You Deal With Overstressed, Irrational Clients? An Entrepreneur's View
• How To Sell The Value Of Mobile To Clients
• Encouraging Better Client Participation In Responsive Design Projects

Content Strategy +

This eBook delves into the world of content, providing beginners as well as communications pros with a fundamental understanding of how content strategy works.

• The Immersive Web And Design Writing
• Content: A Blessing, A Bubble, A Burden
• Make Your Content Make a Difference
• Content Strategy Within The Design Process
• Content Strategy: Optimizing Your Efforts For Success
• Finding Your Tone Of Voice
• Fluidity Of Content And Design: Learning From Where The Wild Things Are
• The Role Of Design In The Kingdom Of Content
• How Disregarding Design Limits The Power Of Content

Content Strategy, Vol. 2: Planning, Producing And Maintaining Quality … +

This eBook is your guide through the critical phases of content planning, production and maintenance, your partner in crime to develop a sound content strategy.

• Editing Tips For Business Web Content
• Framing Effective Messages To Motivate Your Users
• Ways To Avoid Overwhelming Users: Lessons Learned From My High-School Teachers
• How To Run A Content-Planning Workshop
• Help Your Content Go Anywhere With A Mobile Content Strategy
• Improving Your Information Architecture With Card-Sorting: A Beginner’s Guide
• Content Knowledge Is Power
• Dealing With Redundant, Out-Of-Date And Trivial (ROT) Content

Creating Meaningful Websites +

What is it that makes a website stand out from the crowd? What makes it memorable and meaningful? This eBook wants to explore these questions.

• A Comprehensive Website Planning Guide
• A Fun Approach To Creating More Successful Websites
• Defending The Generalists In The Web Design Industry
• Breaking Down Silos: The Consequences Of Working In Isolation
• MUD: Minimum Usable Design
• A Craft Of Consequences: Reader, Writer And Emotional Design
• Easier Is Better Than Better
• Designing Engaging And Enjoyable Long-Form Reading Experiences
• Symptoms Of An Epidemic: Web Design Trends

Creativity Lessons For Web Designers +

The infamous creative spark isn’t as random as we might think. The creativity lessons in this eBook may help you overcome a creative trough.

• The Process Of Creativity
• Work, Life And Side Projects
• “I Draw Pictures All Day”
• Ignorance Is Bliss For A Creative Mind
• The Big Think: Breaking The Deliverables Habit
• Changing Perspective: A New Look At Old Problems
• Collaging: Getting Answers To The Questions You Don't Know To Ask
• Creating A Lasting Impression

Customizing WordPress +

If WordPress got you hooked, and you want to tailor your site more to your needs and ideas, then this eBook is for you.

• A Detailed Guide To WordPress Custom Page Templates
• Extending WordPress With Custom Content Types
• Building A Custom Archive Page For WordPress
• Customizing Tree-Like Data Structures In WordPress With The Walker Class
• Extending Advanced Custom Fields With Your Own Controls
• Building An Advanced Notification System For WordPress
• How To Use Autoloading And A Plugin Container In WordPress Plugins
• How To Deploy WordPress Plugins With GitHub Using Transients

Designing Better UX +

“Designing Better UX” raises awareness for those little things that add up to an ideal user experience. A valuable resource for your daily UX routine.

• When You Shouldn’t Use Fitt’s Law To Measure User Experience
• Five Ways To Prevent Bad Microcopy
• Infinite Scrolling: Let's Get To The Bottom Of This
• Designing Great Feedback Loops
• Sketching For Better Mobile Experiences
• Converting Our Stories Into Multi-Screen Experiences
• Creating An Adaptive System To Enhance UX

Designing For Email +

“Designing For Email” offers practical advice to cater for a flawless and engaging experience on web, desktop, and mobile email clients.

• What 22 Billion Email Newsletters Tell Us About Designing For Email
• From Monitor To Mobile: Optimizing Email Newsletters With CSS
• Improve Your Email Workflow With Modular Design
• Size Matters: Balancing Line Length And Font Size In Responsive Web Design
• How To Raise Your Email Above Inbox Noise
• Designing The Words: Why Copy Is A Design Issue
• How To Use Email To Alienate Your Users
• Email Marketing For Mobile App Creators
• How To Create A Self-Paced Email Course

Effective Copywriting +

From avoiding pitfalls to optimizing content and turning words into marketing tools, this eBook highlights the real-word copywriting experiences of Smashing’s authors.

• Quick Course On Effective Website Copywriting
• Five Copywriting Errors That Can Ruin A Company’s Website
• Design With Dissonance
• How Content Creators Benefit From The New SEO
• How To Improve Your Branding With Your Content
• The Art Of Content Marketing
• Content Meaning
• 10 Ways To Put Your Content In Front Of More People

Emotional Design Elements +

Find out how to integrate emotional appeal into your website — a personal touch can make all the difference, if you know how to design it.

• Inclusive Design
• The Personality Layer
• Give Your Website Soul With Emotionally Intelligent Interactions
• Not Just Pretty: Building Emotion Into Your Websites
• Playful UX Design: Building A Better Game
• Gamification And UX: Where Users Win Or Lose
• Adding A Personal Touch To Your Web Design

Form Design Patterns (eBook) +

Without forms, the web is a passive experience where content is just consumed. But with forms the web can be collaborative, creative and productive. Forms are at the center of every meaningful interaction, so they’re worth getting a firm handle on. Jump to table of contents.

On first glance, forms are simple to learn. Made up of just a handful of inputs, you can create a form in little time. But when we consider the journeys we need to design, the users we need to design for, the browsers and devices of varying sizes, capabilities and bugs being used; and ensuring that the result is simple and inclusive, form design becomes a far more interesting and bigger challenge.

• A Registration Form — We’ll start with a basic registration form and take a look at the foundational qualities of a well-designed form and how to think about them. By applying something called a question protocol, we’ll look at how to reduce friction without even touching the interface. Then we’ll look at some crucial patterns, including validation, that we’ll want to use for every form.
• A Checkout Form — The one thing per page design pattern is a cornerstone of creating well-designed forms. We’ll look at why that is before applying it to a checkout flow. After that, we’ll consider flow and order with a view to breaking down each step of the checkout flow. Then we’ll look at several input types and how they affect the user experience on mobile and desktop browsers, all the while looking at ways to help both first-time and returning customers order quickly and simply.
• A Flight Booking Form — We’ll dive into the world of progressively enhanced, custom form components using ARIA. We’ll do this by exploring the best way to let users select destinations, pick dates, add passengers, and choose seats. We’ll analyze native form controls at length, and look at breaking away from convention when it becomes necessary.
• A Login Form — We’ll look at the ubiquitous login form. Despite its simple appearance, there’s a bunch of usability failures that so many sites suffer from. Social media login hasn’t necessarily helped matters so we’ll cover that too.
• An Inbox — We’ll design ways to manage and action email in bulk, our first look at administrative interfaces. As such, this comes with its own set of challenges and patterns, including a responsive ARIA-described action menu, multiple selection, and same-page messaging.
• A Search Form — We’ll create a responsive search form that is readily available to users on all pages, and we’ll also consider the importance of the search mechanism that powers it. Together, they can make search discoverable, simple, and useful.
• A Filter Form — Users often need to filter a large set of unwieldy search results. Without a well-designed filter, users are bound to give up. Filters pose a number of interesting and unique design problems that may force us to challenge best practice to give users a better experience.
• An Upload Form — Many services, like photo sharing, messaging, and many back-office applications, let users upload images and documents. We’ll study the file input and how we can use it to upload multiple files at once. Then we’ll look at the intricacies of a drag-and-drop, Ajax-enhanced interface that is inclusive of keyboard and screen reader users.
• An Expense Form — We’ll investigate the special problem of needing to create and add lots of expenses (or anything else) into a system. This is really an excuse to cover the add another pattern, which is often useful in administrative interfaces.
• A Really Long And Complicated Form — Some forms are very long and take hours to complete. We’ll look at some of the patterns we can use to make long forms easier to manage.

How To Create Selling E-Commerce Websites, Vol. 2 +

This eBook takes a look at the challenges that crafting online shopping experiences bring along, and equips you with the necessary know-how on how to deal with them effectively.

• How To Plan Your Next Mobile E-Commerce Website
• Exploring Ten Fundamental Aspects Of M-Commerce Usability
• An E-Commerce Study: Guidelines For Better Navigation And Categories
• The Current State Of E-Commerce Search
• Better Product Pages: Turn Visitors Into Customers
• Designing A Better Mobile Checkout Process
• Creating A Client-Side Shopping Cart
• Reducing Abandoned Shopping Carts In E-Commerce

HTML Semantics +

You won’t get far without the foundational understanding of HTML semantics. This eBook addresses the importance of semantics in our code.

• HTML5 Semantics
• When One Word Is More Meaningful Than A Thousand
• HTML5 And The Document Outlining Algorithm
• Our Pointless Pursuit Of Semantic Value
• Pursuing Semantic Value
• The Semantic Grid System: Page Layout For Tomorrow

Inside Creative Minds: Workflows, Habits And Strategies +

In “Inside Creative Minds” experienced influencers and successful designers provide first-hand insights into their workflows, habits and strategies.

• How I Work: Doug Crockford on JavaScript
• How I Work: IDEO's Duane Bray On Creating Great Digital Experiences
• How I Work: Meetup's Andres Glusman On The Power Of UX And Lean Startup Methods
• Copying Others Is Not The Answer
• “Be Careful: Trends Come And Go”
• “Be Humble, Be Honest, Don't Be Afraid To Fail”
• WordPress: How It Came To Be And Where It’s Heading
• Interview With Nadine Chahine: The Art And Craft Of Arabic Type Design
• Ask The Expert — A Chat About Art, Design, Computers And Education With Milton Glaser

Legacy Of Typography +

Typography is everywhere. This eBook introduces historical and cultural aspects of type and how they relate to the web industry.

• Japanese, A Beautifully Complex Writing System
• Respect Thy Typography
• Typography Carved In Stone
• Industrial-Strength Types
• Legitima Typeface: An Experience Of Fossils And Revivals
• When Typography Speaks Louder Than Words
• Weird And Wonderful, Yet Still Illegible
• Font Wars: A Story On Rivalry Between Type Foundries
• Hands-On Experience: The Rehabilitation Of The Script

Marketing Secrets For Web Designers +

Marketing is an essential part of web design and knowing its 101 helps you see your design decisions in a broader context.

• Stop Shouting. Start Teaching
• If You Love Your Brand, Set It Free
• What Successful Products Teach Us About Web Design
• Social Media Is A Part Of The User Experience
• How To Use Email To Alienate Your Users
• How Metrics Can Make You A Better Designer
• Keep Your Analytics Data Safe And Clean
• It Works For “You”: A User-Centric Guideline To Product Pages
• How To Launch Anything

Navigation & Interaction +

The foundations of good UX design lie in transparent navigation and interaction patterns and systems. A solid understanding of the rules is as important as knowing when to break them.

• The Elements Of Navigation
• Sticky Menus Are Quicker To Navigate
• Design Patterns: When Breaking The Rules Is OK
• Navigation Patterns: Exploration Of Single-Page Websites
• Redefining Hick’s Law
• What Web Designers Can Learn From Video Games
• Motion & Animation: A New Mobile UX Design Material
• Mission Transition
• Designing With Audio: What Is Sound Good For?

Navigation & Interaction, Vol. 2 +

The foundation of a solid, frustration-free user experience lies in a well-considered navigation system. But which design decisions have proven themselves in practice?

• The Line Of Least Resistance
• Efficiently Simplifying Navigation, Part 1: Information Architecture
• Efficiently Simplifying Navigation, Part 2: Navigation Systems
• Navigation For Mega-Sites
• Responsive Navigation On Complex Websites
• Off The Beaten Canvas: Exploring The Potential Of The Off-Canvas Pattern
• Smart Transitions In User Experience Design
• How Do You Design Interaction?

Performance Optimization: Techniques And Strategies +

Tracking down performance bottlenecks does not only improve loading times but also results in a much snappier experience and a higher user engagement.

• Improving Smashing Magazine’s Performance: A Case Study
• How To Speed Up Your WordPress Website
• You May Be Losing Users If Responsive Web Design Is Your Only Mobile Strategy
• How To Make Your Websites Faster On Mobile Devices
• Creating High-Performance Mobile Websites
• Don’t Get Crushed By The Load: Optimization Techniques And Strategies
• Speed Up Your Mobile Website With Varnish
• Cache Invalidation Strategies With Varnish Cache
• Gone In 60 Frames Per Second: A Pinterest Paint Performance Case Study

Practical Approaches For Designing Accessible Websites +

With the help of this eBook, you will gain a deeper understanding of common accessibility pitfalls and learn to circumvent them to create a better experience for everyone.

• Accessibility APIs: A Key To Web Accessibility
• Accessibility Originates With UX: A BBC iPlayer Case Study
• Mobile And Accessibility: Why You Should Care And What You Can Do About It
• Making Modal Windows Better For Everyone
• Notes On Client-Rendered Accessibility
• Design Accessibly, See Differently: Color Contrast Tips And Tools
• Designing For The Elderly: Ways Older People Use Digital Technology Differently

Practical Approaches For Designing Usable Websites +

Put your users in the focus and learn about designing flows, optimizing emotional engagement and performing heuristic website reviews.

• Evolve Your User Interface To Educate Your Users
• Optimizing Emotional Engagement In Web Design Through Metrics
• Enhancing User Interaction With First Person User Interface
• A Guide To Heuristic Website Reviews
• Stop Designing Pages And Start Designing Flows
• The Data-Pixel Approach To Improving User Experience

Psychology Of Web Design +

“Psychology Of Web Design” gives you insights on how the human brain deals with different elements, colors, contrast, symmetry and balance.

• Designing For The Mind
• Persuasion Triggers In Web Design
• Designing For A Hierarchy Of Needs
• 10 Useful Usability Findings And Guidelines
• 30 Usability Issues To Be Aware Of
• Designing For Start-Ups: How To Deliver The Message Across
• Color Teory For Designers, Part 1: The Meaning Of Color
• Color Theory For Designers, Part 2: Understanding Concepts And Terminology
• Color Theory For Designer, Part 3: Creating Your Own Color Palettes

Rethinking UX +

Rethinking UX is a springboard for developing a new perspective and for creating future-proof user experiences.

• Thirteen Tenets Of User Experience Design
• Improving Your Website Usability Test
• Designing For The Multifaceted User
• 50 Design Problems In 50 Days: Real Empathy For Innovation
• Beyond The Button: Embracing The Gesture-Driven Interface
• What Leap Motion And Google Glass Mean For Future User Experience

Smashing Book #5: Real-Life Responsive Web Design (eBook) +

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.

• Preface — Front-end techniques. Scalability. Design systems. Bullet-proof solutions. Real-world challenges.
• Responsive Designer's Workflow — Responsive workflow. Element collage. Style tiles. Tools. Deliverables. Performance budget. Interface inventory. Sketching. Planning. Manifestos. Hypothesis. Atomic design. Designing in the browser. Photoshop.
• Responsive Design Patterns & Components — 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.
• Structured Content for RWD — 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.
• Mastering SVG For RWD And Beyond — SVG. Syntax. Accessibility. Viewport. ViewBox. Exporting. Embedding. Sprites. Icon systems. Data URIs. Performance. Smart SVG techniques. Responsive iconography. Cross-browser fallbacks.
• Building Responsive Components With Flexbox — 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.
• Web Fonts Performance — 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.
• Using Responsive Images, Today — CSS pixel and DPR. Retina displays. Fixed-width images. Variable-width images. Srcset and sizes. Art direction. &lt;picture&gt; element. Separation of concerns. Image format fallback. Accessibility. Background images. Image optimization. WebP and JPEG-XR. Compressive images. Deployment. Common pitfalls.
• The Dark Side Of Responsive HTML Email — 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.
• Testing, Maintaining And Debugging RWD — “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.
• Counting Stars: Creativity Over Predictability In RWD — 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
• Beyond Responsive: Optimizing For Offline — navigator.onLine. Online and offline events. HTML5 Application Cache. Cache manifest. Fallbacks. AppCache gotchas. Web Storage. localStorage. Service Workers.
• Efficient Responsive Process With Clients — Collaboration. Estimates. Spiraling. “One-deliverable” workflow. Efficiency. Content priority guide. Style comparisons. Testing the aggregate. Content prototype. Wireframes. Style prototypes. Pattern libraries. Happy teams.
• Performance Optimization Roadmap — 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.

Success At Scale (eBook) +

Success at Scale is a curated collection of best-practice case studies capturing how production sites of different sizes tackle performance, accessibility, capabilities, and developer experience at scale. Case studies are from industry experts from teams at Instagram, Shopify, Netflix, eBay, Figma, Spotify, Wix, Lyft, LinkedIn, and many more. Guidance that stands the test of time.

• Performance — Includes examples of measuring, budgeting, optimizing, and monitoring performance, in addition to tips for building a performance culture. With insights from teams at Instagram, Shopify, The Telegraph, Wix, Smashing Magazine, Tinder, Figma, Netflix, eBay, Yahoo Japan News, and Instant Domain Search.
• Capabilities — This section is about bridging the gap between native capabilities and the modern web. You’ll explore web apps, native apps, and progressive web applications. With insights from teams at Photoshop, Tinder, Ele.me, OYO Lite, Pinterest, Spotify, and Mainline Menswear.
• Accessibility — Accessibility makes web apps viable for diverse users, including people with temporary or permanent disabilities. Most of us will have a disability at some point in our lives, and these case studies show how we can make the web work for all of us. With insights from teams at Wix, The Understood, Pinafore, LinkedIn, Stack Overflow, Intercom, Shopify, and YouTube.
• Developer Experience — This section is about building a project environment and culture that encourage support, growth, and problem-solving within teams. Strong teams build great projects! With insights from teams at Apideck, Facebook, Lyft, Notion, Bloomberg, Zoover, Vox News, Wix, and Auto Trader.

Successful Freelancing For Web Designers +

Read up on how to pitch like a pro and handle your finances properly and get precious tips on communicating with clients and partners.

• Basic Skills Of Freelance Web Designers
• Communication With Clients & Partners
• Marketing — Convincing Strategies For Freelancers
• Contracts & Pricing

The Ethical Design Handbook (eBook) +

Over the past 20 years, user privacy has become merely a commodity on the web: there, but hardly ever respected — and often swiftly discarded. No wonder ad-blockers and tracking-blockers have gained traction, and in times when ad-blocking, browsers and new legislation (e.g. GDPR/CCPA) introduce constraints on data collection, we need alternative business models that companies can rely on. Models that respect customer choices and are built and designed with ethics in mind. Jump to table of contents.

But how do we get there? Meet The Ethical Design Handbook, our new guide on ethical design for digital products, with practical guidelines on how to help companies leave dark patterns behind and boost business KPIs along the way. 368 pages. Download a free PDF excerpt (5.9 MB) (also as ePUB, Kindle).

You'll learn how to:

• explain what ethical design is
• justify and prove a business case for ethical design
• grow a sustainable business built on ethical design principles
• strike the balance between data collection and ethics
• embed ethical design into your workflow
• get started with ethical transformation

• Introduction — The chapter describes the necessity of incorporating ethical design in the way digital businesses run. It also defines some key terms used throughout the book.
• The need for ethics in design — This section outlines some core consequences of unethical design, and it also explores some of the existing ethical design frameworks and introduces the notion of ethical transformation. #safety #darkpatterns #gdpr #ethicaltransformation
• Creating positive change — This chapter explores how a positive change can be introduced in companies, teams and processes, including how to challenge decisions, ethical team governance and bridging ethics with risk assessment. #culturalchange #ethicalgovernance #decisions
• Respect-driven design — This chapter discusses and challenges how to involve users in projects, and it includes guidelines on how to design for the must vulnerable. #hcd #accessibility #children
• The business of ethical design — Let’s dive into business. We establish why ethical design works as a business concept, and how we can use the traditional ways of measuring success to measure the impact of ethical design. #roadmap #KPI #ROIofethics
• Ethical design best practices — This chapter provides a set of practical guidelines on how to design good cookie disclaimers, and terms and conditions and how to handle data collection ethically. It also provides a set of specific examples of how to design user interfaces with ethical design in mind. #ethicalUI #cookies #data #datamodels
• Getting started — We wrap up the content of the book by offering a set of practical tips and specific blueprints to help you get started on your first ethical design project.

Typography Best Practices +

Web design is not just about a flamboyant or simply beautiful website appearance. This eBook is about small — but crucial — typographic details.

• The Perfect Paragraph
• Mind Your En And Em Dashes: Typographic Etiquette
• How To Choose The Right Face For A Beautiful Body
• Why Subtle Typographic Choices Make All The Difference
• The Creative Way To Maximize Design Ideas With Type
• Applying Macrotypography For A More Readable Web Page
• Avoiding Faux Weights And Styles With Google Web Fonts
• Setting Weights And Styles With The @font-face Declaration

Typography: Practical Considerations And Design Patterns +

Learn how to train and sharpen your eyes to recognize specific typographic details which will be sure to guide you in your own projects.

• Understanding The Difference Between Type And Lettering
• Making Sense Of Type Classification, Part 1
• Making Sense Of Type Classification, Part 2
• A Critical Approach To Typefaces
• Taking A Second Look At Free Fonts
• Dear Web Font Providers
• Typographic Design Patterns And Current Practices (2013 Edition)
• Creating Exciting And Unusual Visual Hierarchies
• Type Makes A Difference: An Exploration Of Type-Focused Websites

Unlocking Innovation: How To Generate And Realize Great Ideas +

“Unlocking Innovation” goes beyond the mere process of generating ideas and looks at how we can actually bring them to life.

• On Creative Leadership
• Examining The Design Process: Clichés And Idea Generation
• Using Brainwriting For Rapid Ideas Generation
• Up On The Wall: How Working Walls Unlock Creative Insight
• Design Better And Faster With Rapid Prototyping
• The Skeptic’s Guide To Low-Fidelity Prototyping
• Five Tips For Making Ideas Happen
• How To Make Innovative Ideas Happen

User Experience Design +

“User Experience Design” provides you with insights on how to improve your website based on the most important UX principles.

• A Design Is Only As Deep As It Is Usable
• Why User Experience Cannot Be Designed
• Design Is About Solving Problems
• Designing The Well-Tempered Web
• Better User Experience With Storytelling – Part I
• Better User Experience With Storytelling – Part II
• Taking A Customer From Like To Love: The UX Of Long-Term Relationships
• Idiots, Drama Queens And Scammers: Improving Customer Service With UX
• Relationship Engineering: Designing Attraction – Part I
• Relationship Engineering: Designing The Happily Ever After – Part II

UX Design Process +

User Experience design isn’t a new field. But sometimes new approaches lead to new perspectives.

• Interaction Design In The Cloud
• Lean Startup Is Great UX Packaging
• Fitting Big-Picture UX Into Agile Development
• You Already Know How To Use It
• Fixing A Broken User Experience
• Beyond Wireframing: The Real-Life UX Design Process
• Stop Redesigning And Start Tuning Your Site Instead
• Designer Myopia: How To Stop Designing For Ourselves
• The UX Research Plan That Stakeholders Love

Latest Additions To The Smashing Library

Success at Scale

— by Addy Osmani

Success at Scale is a curated collection of best-practice case studies capturing how production sites of different sizes tackle performance, accessibility, capabilities, and developer experience at scale. Case studies are from industry experts from teams at Instagram, Shopify, Netflix, eBay, Figma, Spotify, Wix, Lyft, LinkedIn, and many more. Guidance that stands the test of time.

Understanding Privacy

— by Heather Burns

Privacy is a scary topic? It doesn’t have to be. Understanding Privacy helps you understand what data privacy is really about beyond scary headlines. It is an introduction to the beliefs, concepts, and ideas that inform privacy as it exists — or has failed to exist — on the open web that we build.

Touch Design for Mobile Interfaces

— by Steven Hoober

In Touch Design for Mobile Interfaces, Steven Hoober shares his in-depth research about designing for touch as well as tips, tricks, trends, tendencies, guidelines, and heuristics you can apply to your work immediately to create human-centered mobile interfaces.

Image Optimization

— by Addy Osmani

Loading images efficiently at scale isn’t a little project for a quiet afternoon. It requires understanding of compression techniques, loading behavior, image decoding and image CDNs, adaptive media loading and caching. Image Optimization will equip you with everything you need to know to optimize how you compress, serve and maintain images — boosting performance along the way.

TypeScript in 50 Lessons

— by Stefan Baumgartner

In TypeScript in 50 Lessons, Stefan Baumgartner breaks down the quirks of TypeScript into short, manageable lessons. You’ll make sense of TypeScript concepts, tooling for TypeScript and how to get most out of it without learning a new language. Everything TypeScript explained, from start to finish. With code walkthroughs, hands-on examples, and common gotchas, that’s a book you might want to keep close.

A Few Valuable Library Features:

• The eBook Library contains 68 web design eBooks worth $600,
• You can save 80% off their regular prices,
• You get immediate access to all eBooks,
• Our eBooks work on all eBook readers and each is available in PDF, ePUB and Kindle,

All eBooks are DRM-free so that they’ll never expire.