Menu Search
Jump to the content X X
Smashing Conf Barcelona 2016

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 Barcelona, dedicated to smart front-end techniques and design patterns.

Freebie: Flat Line UX And E-Commerce Icon Sets (83 Icons, AI, EPS, PNG, SVG)

How often do you have to explain the purpose of a study, objectives, goals or measurements within your company? Maybe you need to prepare a presentation or a brief overview of what next steps should be taken, or maybe you simply need to build a shiny, new pattern library?

Freebie: Flat Line UX And E-Commerce Icon Sets (83 Icons, AI, EPS, PNG, SVG)

Whatever project you may be working on, today's icon sets will come in handy. All of the vector icons were tirelessly crafted by the design team at Ecommerce Website Design, and come in various formats that can be used for personal as well as commercial purposes.

Read more...

Web Development Reading List #152: On Not Shipping, Pure JS Functions, And SameSite Cookies

This week’s reading list consists of a lot of little, smart details that you can use on websites. From tweaking the user’s reading experience during page load to pure JavaScript functions and verifying the integrity of external assets. And finally, we see some articles on thinking differently about established working habits — be it working on AI without data or the virtue of not shipping a feature.

Cancel button

Please note that I’ll be on vacation for the next four weeks, so please don’t expect any new Web Development Reading List before October, 7th. Enjoy September, your work, your life!

Read more...

Advertise with us!

Responsive Images In WordPress With Art Direction

Support for responsive images was added to WordPress core in version 4.4 to address the use case for viewport-based image selection, where the browser requests the image size that best fits the layout for its particular viewport.

Responsive Images In WordPress With Art Direction

Images that are inserted within the text of a post automatically get the responsive treatment, while images that are handled by the theme or plugins — like featured images and image galleries — can be coded by developers using the new responsive image functions and filters. With a few additions, WordPress websites can accommodate another responsive image use case known as art direction. Art direction gives us the ability to design with images whose crop or composition changes at certain breakpoints.

Read more...

Desktop Wallpaper Calendars: September 2016

We all love a good wallpaper to polish up our desktops. So to provide you with fresh artwork on a regular basis, we embarked on our desktop wallpapers mission eight years ago. Each month we challenge you, the design community, to get your creative juices flowing and produce some inspirational and unique desktop wallpapers.

Desktop Wallpaper Calendars: September 2016

And, well, also this time designers and artists from across the globe challenged their artistic abilities and contributed their designs for September. The result is a collection of desktop wallpapers that are a little more distinctive than the usual crowd. All of them come in versions with and without a calendar and are free to download. A big thank-you to everyone who shared their artwork! Now, which one will make it to your desktop?

Read more...

Sponsored Article How We Use Prototyping, And How It Made Us More Efficient

Prototyping is essential to help your team create the best product possible. It’s a chance to experiment with ideas and turn them into something tangible that you can test and build upon. When you fail with your prototype, you land softly — there’s always the chance to iterate and improve.

Prototyping For Success

The team behind Adobe’s new prototyping tool Experience Design (Adobe XD) uses prototyping as a method to test new features before they make it into the program. Being a product manager on the Adobe XD team, I'll share some insights into how the team uses prototyping to build and improve Adobe XD, and make prototyping more efficient for designers.

Read more...

Pixel-Perfect Specifications Without The Headaches

Designers, developers and managers often work with compressed timeframes and multiple projects simultaneously. A team must be able to respond quickly to feedback on their product from clients, project managers and developers. Each minor revision in the UI or UX needs to be reflected in the documentation, so that designers and developers always have the latest information.

Pixel-Perfect Specifications Without The Headaches

A style guide ensures that your project doesn’t encounter serious problems when you implement the initial design. Making sure that all specifications are accurate to their designs is critical, because an inaccurate specification means that developers will have to either rely on guesswork when building the app or go to the design source to get answers to their questions.

Read more...

Ways To Reduce Content Shifting On Page Load

Have you ever opened a website, started reading and, after some time had passed and all assets had finished loading, you found that you’ve lost your scroll position? I undergo this every day, especially when surfing on my mobile device on a slow connection — a frustrating and distracting experience.

Ways To Reduce Content Shifting On Page Load

Every time the browser has to recalculate the positions and geometries of elements in the document, a reflow happens. This happens when new DOM elements are added to the page, images load or dimensions of elements change. In this article, we will share techniques to minimize this content shifting.

Read more...

Web Development Reading List #151: Microinteraction UX, Feature Policy, And Passport.js

In the last few years, I’ve seen a lot of code. As a freelancer working on multiple big projects with a lot of people, you’ll inevitably see all varieties of code styles. But I also realized how much writing JavaScript changed over the past years.

New password rules

Having learned JavaScript before ES6 was there, a great mentor (Hans Christian Reinl) taught me the most important lesson: Always write clean, understandable code. Avoid ternary operators, declare variables in one place, make functions as simple as possible. Basically things that so many JavaScript style guides also advise. But with the growing adoption of ES6/ES2015, I also saw an increase of code where most of these principles (except for keeping functions small) are ignored.

Read more...

Upgrading CSS Animation With Motion Curves

There is UI animation, and then there is good UI animation. Good animation makes you go “Wow!” — it’s smooth, beautiful and, most of all, natural, not blocky, rigid or robotic. If you frequent Dribbble or UpLabs, you’ll know what I am talking about.

Alt-Text

With so many amazing designers creating such beautiful animations, any developer would naturally want to recreate them in their own projects. Now, CSS does provide some presets for transition-timing-function, such as ease-in, ease-out and ease-in-out, which add some level of smoothness and realism, but they are very generic, aren’t they? How boring would it be if every animation on the web followed the same three timing functions?

Read more...

↑ Back to top