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.