Menu Search
Jump to the content X X
Smashing Conf Barcelona

You know, we use ad-blockers as well. 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. our upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Author:

Vitaly Friedman loves beautiful content and doesn’t like to give in easily. Vitaly is writer, speaker, author and editor-in-chief of Smashing Magazine. He runs front-end/UX workshops, webinars and loves solving complex UX, front-end and performance problems in large companies. Get in touch.

Twitter: Follow Vitaly Friedman on Twitter

Google Profile: https://plus.google.com/101951294740286010890

Quick Tip Uploading Directories At Once With webkitdirectory

If you've ever tried to implement a bulletproof, good-looking file uploader, you might have encountered an issue: uploading an entire folder or folders of files is usually quite a hassle, as files in each folder have to be selected manually. And then some folders might contain sub-folders as well.

input webkitdirectory

Well, we can use webkitdirectory, a non-standard attribute that allows users to pick a directory via a file input. Currently supported in Chrome, Firefox and Edge.

Read more...

We’re Touring Through Southeast Asia: Join The Mozilla Developer Roadshow!

We love exploring opportunities. While many of us are quite familiar with publications and events surrounding us, we often lack the global perspective on what's happening in the web industry across the world. For example, do you know what the state of web design in Singapore is? What about front-end events in Kuala Lumpur? What about the acceptance of UX-driven processes in Hong Kong? That's exactly what we want to find out!

We're Touring Through Southeast Asia: Join The Mozilla Developer Roadshow!

For that reason, we're happy to have teamed up with our friends at Mozilla for the Developer Roadshow Asia, so we can connect and learn from designers and developers in southeastern Asia. Together, we're planning on organizing a series of informal, free meetup-style events for people who build for the web. On September 19th to 25th, folks from around the globe will be getting together in Singapore, Ho Chi Minh City, Kuala Lumpur, Penang and Hong Kong. Do join us, won't you?

Read more...

The CSS Grid Challenge: Build A Template, Win Some Smashing Prizes!

Layout on the web has always been tricky, but with CSS Grid being now supported in all major browsers, most of the hacks that helped to achieve complex layouts have become obsolete. Firefox even has a CSS Grid Inspector built in, so that there’s nothing to hold you back from making even the most challenging flexible layout reality.

The CSS Grid Challenge: Build A Template, Win A Prize!

To explore the possibilities and features of CSS Grid together, we’d love to invite you to a little contest. Because there’s nothing better to completely grasp a new technology as getting your hands dirty and playing with it, right?

Read more...

Designing The Perfect Feature Comparison Table

Not all products are created equal. While we repeatedly buy some products almost mindlessly, for others, we take a lot of time to make a purchasing decision. For a price tag that meets a certain threshold or if we are particularly invested in the quality of a product, we want to be absolutely certain that we are making the right choice and are getting a good product for a good price. That's where a feature comparison table makes all the difference.

Designing The Perfect Feature Comparison Table

Feature comparison tables are helpful not only in their primary function, though. When designed properly, they can aid in decision-making way beyond placing product specifications side by side. They can also add meaning to an otherwise too technical product specification sheet, explaining why a certain feature is relevant to the customer or how a certain product is better than the others.

Read more...

Designing The Perfect Slider

When we think about a slider, we usually imagine an image gallery slider, or the infamous carousel, or perhaps off-canvas navigation, with the overlay sliding in from the side. However, this article is not about those kinds of sliders. Instead, we’ll look into the fine details of designing better slider controls for selecting a value or a range of values. Think of price range sliders, 360-degree-view sliders, timeline sliders, health insurance quote calculators, or build-your-own-mobile-plan features.

A playful animation of a slider, changing the appearance of a house.

In all of these use cases, a slider is helpful because it allows users to explore a wide range of options quickly. For precise input, a slider can never beat a regular input field, but we can use a slider to nudge our customers to explore available options and, hence, aid them in making an informed decision.

After a close look at perfect accordions and date and time pickers, let’s turn our attention to sliders, with do’s and don’ts and things to keep in mind when designing one. But first, we need to figure out when a slider makes sense in the first place. (Please note: that article is quite large, and contains many animations and videos.)

Read more...

Designing The Perfect Date And Time Picker

What could be so difficult about designing a decent date picker? Basically, we just need an input field and an icon that represents a calendar clearly enough, and once the user clicks on that icon, we pop up a little overlay with the days lined up in rows. Right?

Designing The Perfect Date And Time Picker

Well, not every date picker fits every interface, just like not every interface actually needs a date picker. But when a date picker is required, quite often it's just a bit too tedious and annoying to specify that one date, and too often it produces irrelevant results or even a zero-results page, although just a few minor refinements would make it much easier to use.

Read more...

Designing The Perfect Accordion

Design patterns. An almost mythical phrase that often inspires either awe or resentment. As designers, we tend to think of design patterns as generic off-the-shelf solutions that can be applied to various contexts almost mechanically, often without proper consideration. Navigation? Off-canvas! Deals of the day? Carousel! You get the idea.

Designing The Perfect Accordion (With A Checklist)

Sometimes we use these patterns without even thinking about them, and there is a good reason for it: Coming up with a brand new solution every time we encounter an interface problem is time-consuming and risky, because we just don’t know how much time will be needed to implement a new solution and whether it will gracefully succeed or miserably fail in usability tests.

Read more...

A Little Surprise Is Waiting For You Here.

Smashing Magazine is changing: a new design, a new layout, a new technical stack, a new printed magazine, a new Smashing Membership, and the same good ol’ obsession with quality content. Here’s a sneak preview of what’s coming up.

A Little Surprise Is Waiting For You Here — Meet The Next Smashing Magazine

Today marks an important milestone in Smashing Magazine’s life, and this very page is an early preview of what’s coming up next: many experiments, new challenges, but still a good ol’ obsession with quality content. A complete overhaul, both visually and technically, a fine new printed magazine, and a shiny new Smashing Membership, with nifty features and goodies for you, our lovely community. Curious? Well, fasten your seatbelt and browse around — it’s going to be quite a journey!

Read more...

☑️ The Ultimate Digital Clean-Up Checklist: Are You Prepared For The New Year?

With a couple of days left until New Year's Eve, it's just about time to set aside 60 minutes to clean up, sort out and back up your digital footprint, to ensure a good smooth start to 2017. So many little details tend to get forgotten or overlooked every single time, only to get fixed hastily later — but doesn't it just feel right when everything is in the right place, neatly organized, even if you aren't a compulsory cleaner or an obsessed perfectionist?

The Ultimate Digital Clean-Up Check: Are You Prepared For The New Year

This is not a generic article about unspectacular things like getting to inbox zero or changing the copyright year in your footer (although that's a good idea!) — we published a detailed checklist of all of those details a couple of years ago. Instead, you'll find below an overview of all of those obscure little things that I forget about every year; so, I decided to gather them all in one place once and for all.

Read more...

Front End Performance Checklist 2017 [PDF, Apple Pages]

Are you using progressive booting already? What about tree-shaking and code-splitting in React and Angular? Have you set up Brotli or Zopfli compression, OCSP stapling and HPACK compression? Also, how about resource hints, client hints and CSS containment — not to mention IPv6, HTTP/2 and service workers?

PRPL Pattern in the application shell architecture

Performance isn’t just a technical concern: It matters, and when baking it into the workflow, design decisions have to be informed by their performance implications. Performance has to be measured, monitored and refined continually, and the growing complexity of the web poses new challenges that make it hard to keep track of metrics, because metrics will vary significantly depending on the device, browser, protocol, network type and latency (CDNs, ISPs, caches, proxies, firewalls, load balancers and servers all play a role in performance).

Read more...

SmashingConf San Francisco 2017: Somethin’ Is Cookin’ In The Kitchen!

Imagine a cloudy, rainy November evening. After a long day, you walk home along the streets, following the dimmed street lamps. Everybody seems to be busy, rushing somewhere, crossing paths with strangers and lonely stores. It's dark and cold outside, and it's difficult to see things through, so you decide to take a shortcut route to shorten the path.

SmashingConf San Francisco 2017: Somethin' Is Cookin' In The Kitchen!

Suddenly you see a bright light and music streaming from one of the remote corners of the street. Out of curiosity, you slowly walk towards the light, and hold your breath for a second. You discover a little cozy place with a fireplace, packed with people, jazzy tunes, and the smell of pizza, pasta and red wine. You see people smiling. Talking. Laughing. Sharing. Inviting you to join them.

Read more...

Behind The Scenes: What It Takes To Publish A Smashing Article

It’s been quite a journey for this very sentence to wind up on this little website. Not many people know it, but every single Smashing article goes through a thorough editorial review, including multiple passes for editing and refinement, before being published.

Behind The Scenes: What It Takes To Publish A Smashing Article

In this series of articles dedicated to our upcoming 10th anniversary (mid-September 2016), we’d love to shed some light on our editorial process, explain our workflow and introduce the people behind the scenes, as well as address how our little company is earning money to keep the website alive and running.

Read more...

↑ Back to top