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.

Web Development Reading List #162: Server Side React, Inclusive Design And The Web Worldwide

We shouldn’t let ourselves get distracted by people who work on different projects than we do. If a developer advocate works on a web-based QR code application, for example, their way of tackling things most certainly won’t fit your project. If someone builds a real-time dashboard, their concept won’t relate to the company portfolio website you’re building. Bear in mind that you need to find the best concept, the best technologies, the best solution for your specific project.

Web Development Reading List #162

Thinking about the right decisions rather than following cool, new trends blindly, is the first step to building responsible web solutions. That’s what we call progressive enhancement. The only subjective matter in this undertaking is you, judging what level of progressive enhancement a solution should have.

Read more...

Quick Tips Christmas Goodies: Free Winter- And Holiday-Inspired Icon Sets (EPS, AI, PNG)

Christmas is just around the corner, and what better way to celebrate than with some free goodies? We sifted through the web (and our archives) to find holiday-themed icon sets for you that’ll give your creative projects some holiday flair. Perfect for Christmas cards, gift tags, last-minute wrapping paper, or whatever else you can think of.

Christmas Goodies: Free Winter- And Holiday-Inspired Icon Sets

All icons can be downloaded for free, but please consult their licenses or contact the creators before using them in commercial projects. Reselling a bundle is never cool, though. Have a happy holiday season!

Read more...

Advertise with us!

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...

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...

↑ Back to top