Menu Search
Jump to the content X X
Smashing Conf San Francisco

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

GPU Animation: Doing It Right

Most people now know that modern web browsers use the GPU to render parts of web pages, especially ones with animation. For example, a CSS animation using the transform property looks much smoother than one using the left and top properties. But if you ask, “How do I get smooth animation from the GPU?” in most cases, you’ll hear something like, “Use transform: translateZ(0) or will-change: transform.”

gpu-animation-done-right

These properties have become something like how we used zoom: 1 for Internet Explorer 6 (if you catch my drift) in terms of preparing animation for the GPU — or compositing, as browser vendors like to call it. But sometimes animation that is nice and smooth in a simple demo runs very slowly on a real website, introduces visual artifacts or even crashes the browser. Why does this happen? How do we fix it? Let’s try to understand.

Read more...

Progressive Web AMPs

If you’ve been following the web development community these last few months, chances are you’ve read about progressive web apps (PWAs). It’s an umbrella term used to describe web experiences advanced that they compete with ever-so-rich and immersive native apps: full offline support, installability, “Retina,” full-bleed imagery, sign-in support for personalization, fast, smooth in-app browsing, push notifications and a great UI.

From Google’s Advanced Mobile Pages (AMP) to progressive web apps

But even though the new Service Worker API allows you to cache away all of your website’s assets for an almost instant subsequent load, like when meeting someone new, the first impression is what counts. If the first load takes more than 3 seconds, the latest DoubleClick study shows that more than 53% of all users will drop off.

Read more...

Advertise with us!

Sponsored Article Best Practices For Animated Progress Indicators

Visibility of system status is one of the most important principles in user interface design. Users want to feel in control of the system they’re using, which means they want to know and understand their current context at any given time, and especially when a system is busy doing work. A wait-animation progress indicator is the most common form of providing a system status for users when something is happening or loading.

An adorable animated kitten on blue background

While an instant response from an app is the best, there are times when your app won’t be able to comply with the guidelines for speed. A slow response could be caused by a bad internet connection, or an operation itself can take a long time (e.g. install an update for OS). For such cases, in order to minimize user tension, you must reassure users that the app is working on their request and that actual progress is being made. Thus, you should provide feedback to the user about what is happening with the app within a reasonable amount of time.

Read more...

The Atomic Workflow — People, Process, And Making Design Systems Happen

Editor's Note: We are all trying to figure it out: how do we design flexible and future-proof responsive websites without reinventing the wheel every time a new requirement comes in? You've heard of atomic design, but how do we actually make it applicable in every day situations? Let’s figure it out! We've teamed up with Brad Frost to set up an eBook bundle with the brand-new Atomic Design and our lovely Smashing Book #5 — available in ePUB, Kindle and PDF. Good things come in pairs! Get the bundle, and save 50% off the regular price.

An illustration showing two birds flying away with two eBooks, Atomic Design and Smashing Book 5. Both eBooks are 50% off of their regular price for a limited time

Talk is cheap. And up until now, we’ve been doing a whole lotta talkin’. That’s not to say it hasn’t been productive talk! After all, we’ve discussed the importance of modular thinking, we’ve learned a methodology for crafting deliberate UI design systems, and we’ve showcased tools for creating effective pattern libraries. But here’s where the rubber meets the road. Where we roll up our sleeves and put all of this theory into practice. Where we get stuff done. This chapter will tackle all that goes into selling, creating, and maintaining effective design systems. You ready? Let’s go.

Read more...

How To Build A SpriteKit Game In Swift 3 (Part 2)

Have you ever wondered what it takes to create a SpriteKit game? Does collision detection seem like a daunting task? Do you want to know how to properly handle sound effects and background music? Game-making has never been easier on iOS since the introduction of SpriteKit. In part two of this three-part series, we will explore the basics of SpriteKit.

Hot To Build A SpriteKit Game In Swift 3 (Part 2)

If you missed out on the previous lesson, you can catch up by getting the code on GitHub. Remember that this tutorial requires Xcode 8 and Swift 3.

Read more...

Breaking Out Of The Box: Design Inspiration (December 2016)

Time moves pretty fast. A new year will be upon us soon, and most of us probably haven't even realized it. So while we're almost ready to leave the autumn season (and 2016!) behind, let's refuel our inspiration for another month and start working on our New Year's resolution list. Observe closely at the following techniques used, and how the colors have been applied to add contrast and character. As always, there is a lot to learn.

Breaking Out Of The Box: Design Inspiration (December 2016)

I hope that these illustrations and photographs will inspire you to get creative and get ideas which you can apply in your own projects. Go ahead, don't let anything come in your way, and let your artistic juices flow so you can create something beautiful and unique yourself. Let's begin.

Read more...

Web Development Reading List #161: Restyling Form Elements, HTTP/2 HPACK, And The Empathy Vacuum

Are you afraid of refactoring code? I love refactoring code. It’s nice to see a code base growing, but this also means that new quirks and suboptimal changes are introduced along the way. At some point, you might realize that there could be a huge opportunity in rewriting the code — to eliminate conflicts or to rename things.

Web Development Reading List #161

For me, refactoring is both: It’s a challenge to master, but, in the end, also a relief to see how the code evolved. We can’t anticipate everything when we first build modules, and we shouldn’t try to do so either. So let’s not be afraid to set our hands to an already existing code base and improve our code over time instead.

Read more...

Brush Lettering: It Only Gets Better After Practice (Part 2)

In the first part of this article, we discussed the resurgence of lettering, we defined the differences between lettering, calligraphy, and typeface design, and we also discussed pens, papers, and other supplies. In this second part, I will share with you how I got started, my journey, and will also share specific tips on how to start. Let's get started.

Brush Lettering: It Only Gets Better After Practice (Part 2)

When I decided to practice lettering daily, I was a tad overwhelmed with the options: Crayola (there is even a term for it, crayligraphy), pointed pen, brushes, illustrative lettering, lettering, calligraphy (Copperplate and Spencerian), modern calligraphy, and so on. I did not know what to do or where to start.

Read more...

Freebie: Christmas Advent Icon Set (25 Icons, AI, EPS, SVG, PNG, PDF)

Are you ready for the countdown to Christmas? Today, we're merrily releasing a brand new Christmas Advent Icon Set, a set of 25 icons that are all available in AI, EPS, SVG, PNG and PDF formats. These icons were all designed and created by Manuela Langella and are free to be used in private as well as commercial projects.

Freebie: Christmas Advent Icon Set (25 Icons, AI, EPS, SVG, PNG, PDF)

You may modify the size, color or shape of the icons. No attribution is required, however, reselling of bundles or individual pictograms isn't cool. Please note that this icon set is available under a Creative Commons Attribution 3.0 Unported license. We'd kindly like to ask you to provide credits to the creator and link to this article if you would like to spread the word about the freebie.

Read more...

↑ Back to top