Everyone loves a cool little loading animation, right? But if that divot lasts more than a second or two, it only brings attention to the fact that the website is loading slowly. And that’s a website killer.
Users expect websites to load quickly and efficiently. It’s your job to ensure that the design is not only visually pleasing but also 100 percent functional. If your site is dragging somewhat, you can stop worrying right now because we have seven tips to help you speed up your website with small tweaks to the design. (Make sure to visit each of the websites showcased in the post; they look great and load lightning fast.)
Animation is not just for cartoons anymore. From full-screen moving images to small hover effects, touches of animation are popping up everywhere. Animation is trendy, fun and user friendly.
And the obstacles to using animation have started to fall. With most users on high-speed connections and the ease of creating anything from simple movements or a silly gif to several minutes of action, animations have become practical and useful web design tools.
There’s been this unwritten divide between designers and developers as long as we have been making websites. People who make things look good versus people who make it work. Those days are over.
Every designer needs to learn how development works in the digital landscape. And every developer should understand basic design theories. Here, we’ll help designers better understand the language of developers, an essential skill in today’s marketplace. (As an added bonus, all of the design examples are created using CSS frameworks.)
Websites have become a medium of sharing information with the entire world. This has transitioned to include media like photos and videos. But text on a webpage is still the predominant choice for web publishing. This would imply that how you structure paragraphs, sentences, and text on the page can greatly impact if a visitor chooses to stick around and read what you have to say.
In this tutorial I’d like to share a few CSS tips for building creative paragraph or text designs. Legibility and font choices are often directly related to the design itself. But incorporating text effects like drop caps, highlights, and recognizable hyperlinks will distinguish from other content on the page. Take a peek at my live sample demo to see what we’re trying to build.
There are many tutorials online discussing the idea of CSS-based tooltips. Yet many examples require HTML elements along with the anchor link. Visitors can get a basic tooltip message by using the default title attribute. I’d like to follow this method and update the process just a little bit.
In this tutorial I want to demonstrate how to build CSS3 tooltips which are contextually based on an HTML5 attribute. Using different classes we can incorporate unique color schemes along with CSS3 transition effects. This technique doesn’t require any extra HTML unless you attach the tooltips onto a different element (like a text field). Let’s get started!
The use of online portfolios has become a popular choice by many digital artists. The goal would be showcasing yourself and your skills to anyone curious, maybe hiring companies or potential clients. Another simpler way to accomplish this task is to create your own digital vCard page. It’s usually a single page containing a brief resume, your work experience, and some interesting tidbits about yourself.
In this tutorial I want to demonstrate how to build a simple tabbed webpage layout in the style of a simplistic portfolio. We can incorporate jQuery fade effects to switch between the tabs, sticking to a formal responsive design. Take a peek at my live sample demo to see what the final product looks like.
If you’ve ever signed up for an email subscription you should know about MailChimp. It’s a company which helps webmasters and marketers deliver newsletters and other similar campaigns. They provide some HTML templates to use for signup forms and confirmation pages, but these are so generic that most subscribers are bored of this same interface.
I’d like to demonstrate how to customize the MailChimp signup form into something more unique. Everything is based off the original MailChimp HTML/CSS code and the form submission will use Ajax. It sounds complicated but the whole process is simpler than you might expect. Take a look at my sample demo to get an idea of the full tutorial.
This design technique is commonly found on personal portfolios or design studio websites. Skill bars represent a level of knowledge related to certain tasks – web design, illustration, branding, character design, you name it! Adding some fancy animations to these skill bars will provide a quicker connection to the viewer.
There’s a recurring trend of using animated page elements in web design at the moment — as you scroll down the page, items will naturally animate into view. These animations only happen one time, and they only begin once the element is within the browser viewport.
I’ve explored this concept a bit using jQuery, along with CSS3 transitions. In a nutshell, this script checks for special classes on the page and uses jQuery to append a new class for transition effects. Those elements which have already animated are then removed from the event handler. And once there are no more elements to animate, the event handler is completely removed until you refresh the page. Take a look at my demo example to see exactly what we’re creating, and follow along!
Many online shops and e-commerce websites use a small details panel to offer more information about a product. I remember this from the early days of browsing Template Monster, and it has grown into a common trend for modern web designers.
In this tutorial I’d like to explain how we can duplicate this effect using some very basic code. I’ve provided two different versions, one built on jQuery and another built using CSS3. There are benefits to each one and you can download a copy of my tutorial code to see which you would prefer.
Website pagination is a crucial aspect to any layout with repeating content. Blogs are often a consideration, but also portfolio listings or related news/feed links or any other types of archive. Organizing a blog post into many pages helps to cut down on reading time – especially with particularly in-depth articles.
In this tutorial I want to demonstrate a collection of CSS techniques for designing pagination. Once you combine these designs with content systems like WordPress you can see how the interfaces really work in action. To get an idea of the final product take a look at my live sample demo below.
HTML5 has made many things simpler in web development, one of which is using embedded audio. Today, we’re going to work through the process of completely customising the HTML5 audio player element, which can adapt to older browsers with fallbacks. It’s a simple method that’s easy to build upon and tweak.
The open source project MediaElement.js is wildly popular, and has even been built into the core of WordPress since version 3.6. It allows you to embed any HTML5 audio or video using a native player interface which can dynamically adapt into a Flash/Silverlight player when needed. I was really impressed to see all the features and it seems to be one of the more advanced solutions for handling legacy browsers. We’ll be using that as a starting point!