Cedric Scheepers

How to Make Magic, Animated Tooltips With CSS

Tooltips are a great way to enhance a UI when your users need some extra context for that fancy icon, or when they want some reassurance for clicking …

How we’re using Component Based Design

Component Based Design is often talked about in context of large, complex projects. In this post we’re making the case that it can also be very …

Designing an Onboarding Process That Actually Helps Users Learn

Jumping into a new app usually comes with a struggle of learning how it works. You might get the hang of it quickly, but <b>there’s always a learning</b> …

10 principles for smooth web animations

There are dozens of ways to achieve animations on the web. For example, the filmstrip is an approach has been around since before the internet, with …

Adding and Leveraging a CDN on Your Website

If you’ve been working around web development for a while, you’ll know that the web has a need for speed. The truth is simple: speed matters and …

Format input text content when you are typing

Notification Styles Inspiration | Top Bar Slide

Input Masking

I don't have any UX research to cite, but anecdotally, I like it when inputs that expect data in a specific format use an <b>input mask</b>. I thought I'd …

Why moving elements with translate() is better than pos:abs top/left

Update (2016): The more canonical writeup of this technique is at High Performance Animations - HTML5 Rocks. TL;DR: Only transform & opacity; never …

Card — make your credit card better in one line of code

No need to change your form<p>Card works as a drop in addition to your current credit card form. No need edit input names or HTML — you can leave …

Hierarchy view component with pure CSS (SASS)

Hi reader!<p>This is my first blog post-tutorial ever :). I decided to write posts from my experience in Web design and development.<p>Recently I got a …

The Golden Rules Of Bottom Navigation Design

Design is more than just good looks – something all designers should know. Design also covers how users <i>engage</i> with a product. Whether it's a site or …

12 sections to consider including on your about page — the most important page on your website [Infographic]

<b>Note: If you don’t like reading, view the infographic at the end of this post.</b><p>I have a thing for about pages.<p>It’s one of the first pages I visit, …

Wellness in the Workplace-Trends to Trust [INFOGRAPHIC]

Wellness in the workplace is good for employees and employers. Increased job<br>satisfaction, greater productivity, reduced absenteeism and decreased …

Are You Making These 5 Common Mistakes When Onboarding New Customers?

Getting people to sign up for your product is tough, and many companies are losing hard-won customers immediately after their first-run experience.<p><i>By Samuel Hulick, founder of UserOnboard.</i><p>Getting people to sign up for your product is tough. It requires a lot of time, energy, and money, yet many …

Mobile web performance checklist

Many web designers and web developers are not paying enough attention to their mobile websites’ performance. And we as users are paying for that.<p>It’s …

Designing Card-Based User Interfaces

Web and mobile apps are moving away from pages towards completely personalized experiences. These new experiences are built on an aggregation of many …

UI Animation: Eye-Pleasing, Problem-Solving.

Animation applied in user interfaces is the topic drawing high attention and provoking hot debates nowadays. Although there is a big army of those …

Free workflow automation software | Manage your business smarter

Creator Menu<p>Features<br>• App Gallery<br>• Pricing<br>• Customers<br>• Resources<br>• Login<br>• Sign Up<p>Automate workflows.<br>Get more done in less time.<p>Design custom workflows that …

XD Essentials: 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 …

How to make a simple HTML template engine in PHP

A template engine is used to separate the presentation from the business logic. A good developer knows this is very important - not only it allows …

JavaScript Speech Recognition

Speech recognition software is becoming more and more important; it started (for me) with Siri on iOS, then Amazon’s Echo, then my new Apple TV, and …

Methods for Controlling Spacing in Web Typography

If you were developing sites in 2006, then you may have worked with a designer like me who was all up in your business about fonts not looking <i>exactly</i> …

8 Design Mistakes That Ruin Your Content (and Easy Fixes)

Visual content is a crucial element in your content marketing. Whether it’s a one-off piece for social media or your latest company e-book, …

9 landing page design tips that improve UX and conversions

<b>1. Keep your layout clean</b><p>Minimalism is not the lack of something. It’s simply the perfect amount of something.<p>–Nicholas Burroughs<p>Nothing drives …

Web Development & Technology Resources

LATEST ARTICLES<p>Mobile Development Marc Gregg - May 1, 2018<p>Smartphones have become a necessity in today’s world and everyone has one. Hence, mobile …

20 Useful SVG Tools for Better Graphics

SVG is gaining popularity in web design these days and you can use tools like Illustrator or Inkscape to create SVG graphics. But when it comes to …

7 awesome browser features

New APIs for the web seem to be released every week. It would be cool to be able to use them, but if you need to make sites for the average user, you …

Writing a JavaScript framework - Execution timing, beyond setTimeout

<b>This is the second chapter of the Writing a JavaScript framework series. In this chapter, I am going to explain the different ways of executing</b> …