Thursday, October 24, 2013

Create an animated download icon in CSS

animated download icon in CSS
When you place a call to action on a webpage you normally want the visitors to down something like sign up to your newsletter or download some of your content. All call to actions you should try to stand out so people focus on these areas of your website.

In this tutorial we are going to create a CSS animation download icon.

Thursday, October 24, 2013

UX = The Web Feng Shui

Web Feng Shui

When I was a bit younger, I was helping my mom's small food business, things weren't going very well for her. So her friend suggested that we had this feng shui expert come to our house and do his thing. I had never heard of such things then, I thought it was the silliest thing in the world. He said, "move the kitchen facing here, because whatever you have now, you're just throwing all your luck away. Rearrange the tables, don't have it face the front door!"

Thursday, October 24, 2013

Create stitched effect with CSS3

Create stitched effect with CSS3

There are many visual effect possibilities we can achieve with CSS - the limit only depends on our creativity and imagination. A simple effect on a site or site content can make a huge difference in terms of site engagement level. So, stuffing your site with too much design will only makes it look cluttered while a simple, sexy design is the frontrunner.

Thursday, October 24, 2013

Four Myths About UX and How to Bust Them

Myths About UX
While the concept of user experience and the term UX have become seemingly ubiquitous in the workplace, most non-UX people still have the wrong idea about what it is.

Here are four common UX myths and how we can bust them.

Tuesday, October 22, 2013

An Introduction to WebSockets

WebSockets

In this blog post we're going to cover how to use WebSockets to create real-time web applications. Before we dive into learning about the WebSocket protocol and API I first want to spend a little time going through some of problems that face real-time web applications and how the WebSocket spec aims to solve them.

Friday, October 18, 2013

Why (and How) you Should Probably Use Web Notifications

Web Notifications

Web notifications are a way to show users some sort of message in a browser standardized way. With Chrome 29, Google has fully implemented the Chrome Notification Center on Windows, Mac and Chrome OS, which makes the idea of using notifications a lot more enticing.

Tuesday, October 15, 2013

Web design trends to watch for 2014

Web design trends to watch for 2014

The web is constantly evolving and while a few things come as a (r)evolution by surprise, most are pretty much predictable and develop over the years. Keeping track with the current trends and the ones from the previous years, there's pretty much chance to accurately predict what will dominate the web in the next year.

Tuesday, October 15, 2013

10 SEO Trends You Can't Ignore If You Want To Be Found

10 SEO Trends

It's BIG and erratic. Internet is moving fast, the big G is upgrading its algorithm time to time in order to return what we believe to be accurate result to its users. SEO gurus are publishing great SEO stuff to keep you and your business safe, but are you aware of all this things? I guess not.

Wednesday, October 09, 2013

Designing for iOS 7: Guide to getting started

Designing for iOS 7

Now that we are a couple of weeks into the new Apple iOS, are you ready to design for it?

And if you already have an app running on the platform, chances are that you designed with the new iOS in mind but are thinking about going back and making a few necessary tweaks.

Sunday, October 06, 2013

Working with IndexedDB

Working with IndexedDB
One of the more interesting developments in web standards lately is the Indexed Database (IndexedDB for short) specification. For a fun time you can read the spec yourself. In this tutorial I'll be explaining this feature and hopefully giving you some inspiration to use this powerful feature yourself.

Overview

In a nutshell, IndexedDB provides a way for you to store large amounts of data on your user's browser. Any application that needs to send a lot of data over the wire could greatly benefit from being able to store that data on the client instead. Of course storage is only part of the equation. IndexedDB also provides a powerful indexed based searching API to retrieve the data you need.

Sunday, October 06, 2013

12 must-read RWD resources (September digest)

12 must-read RWD resources

1. Seven Habits of Highly Effective Media Queries

Brad Frost shared some considerations for crafting high-quality media queries. Read this article »

Saturday, October 05, 2013

7 habits of highly effective media queries

7 habits of highly effective media queries
As we all know, media queries are responsive design's secret sauce. Here are some considerations for crafting high-quality media queries:

Saturday, October 05, 2013

Powerful workflow tips, tools and tricks for Web Designers

Powerful workflow tips, tools and tricks for Web Designers
Designing and developing can be time-consuming, especially when the project involves a new challenge, putting the team or freelancer into unknown territory. Moreover, time is a key factor in productivity. Working efficiently enables us to deliver better value at a competitive price.

However, some steps can be repeated for every project. These are steps we know and should make as quick as possible in order to have more freedom to experiment with new solutions.

This article presents a collection of tools, tips and tricks that will make your standard workflow as fast and practical as possible, so that you have more time for the exciting parts of the project.

Ready? Here we go!

Saturday, October 05, 2013

A preview of the new dialog element

dialog element

The <dialog> element originally entered the HTML5 scene as a way to markup conversations but it was cut from the spec back in 2009. However now it's back, and it has a brand new role.

The new <dialog> element makes it really easy for developers to create popup dialogs and modals for their web applications. Before now this required using a JavaScript plugin. However popup dialogs have become so popular that the Chrome team have decided to create a native implementation of this UI component.

Saturday, October 05, 2013

A collection of separator styles

A collection of separator styles

A collection of separator styles for horizontally dividing sections on a website. The dividers are created using several techniques, including styling pseudo-elements, using gradients and inserting SVG graphics with responsiveness in mind.

Thursday, October 03, 2013

Animated border menus

Animated border menus

A tutorial on how to create a off-canvas icon navigation with an animated border effect. The menu effect is inspired by CreativeDash's bounce menu for mobile apps.

Thursday, October 03, 2013

Write your CSS with JavaScript

Write your CSS with JavaScript

Sometimes programming is just using the right tool. This may be a framework, library or as it happens in my case CSS preprocessor. You probably don't realize it, but LESS or SASS have a lot of constraints. I managed to change that by writing my own CSS preprocessor. I stopped writing CSS and moved everything into the JavaScript world. This article is about AbsurdJS: a small Node.js module, which changed my workflow completely.

Wednesday, October 02, 2013

A beginner's guide to perceived performance: 4 ways to make your mobile site feel like a native app

A beginner's guide to perceived performance

Building well-designed websites on mobile devices is slowly becoming easier and easier. Whatever the method (responsive, adaptive, etc.), if you know what you're doing, crafting a good-looking site is not a problem.