Tuesday, December 24, 2013

Challenges & Solutions for Your Responsive Navigation

Responsive Navigation

One of the biggest hurdles when creating a responsive website is implementing the navigation – hands down. Not just from a design standpoint, but from a content and development standpoint as well. Debatably the most important element on the page, a user should have no issues as they try to navigate around your website no matter what device they are on.

Tuesday, December 17, 2013

15 Tools to Help You Create Your Next Infographic

Tools to Help You Create Your Next Infographic

Five to six years ago, I believe almost everybody haven't heard about infographic. In the recent year, it's now surfacing the whole web. Internet marketers are now using it as a tool to deliver their message the best way. No matter how eloquent you are as a writer. Sometimes, a single image might speak better more than a thousand words.

Friday, December 13, 2013

SVG Icons FTW

SVG Icons FTW

Despite the growing popularity of SVG, its time around and excellent browser support, we have a lack of good vector icon approaches. It's time to fill this gap and use SVG as icons in our web projects.

A lot of great methodologies and principles arose making our CSS more and more modular, structured and flexible. But think about your icons. Using raster graphics for icons means that they are not manageable in CSS. What if we need to change a color of an icon for its hover/active/focus state? For each icon state we need to add one more icon image. What about size? For each icon size we need to add yet another icon image. What about a shape? A shadow? Yup, the same thing. Not very convenient, right? So we are ending up with bloated sprites and style sheets that are hard to maintain and scale.

But fortunately we've had icon fonts coming to the rescue. They allow us to manage all these things more easily and we have the following benefits:

  • It's plain text, which means they can be gzipped to up to 95%
  • It's a vector graphic, which means it can be scaled to any size making it Retina ready
  • It's one source file, which means a minimum of HTTP requests
  • It's a font – you can easily change size, color, shape and add a shadow
  • Browser support for older browsers possible (e.g. IE6)

Unfortunately, icon fonts have some limitations like being monochrome (still) and we can only use styles for texts like e.g. a text-shadow. We can't, for example, use an inset text shadow or apply different colors to the details.

So today we will explore the possibilities of using SVG icons instead.

Using SVG Icons

The icon solution I want to share here with you is based on SVG (Scalable Vector Graphics). Extending the benefits of icon fonts, it will give us some additional super powers:

  • The power of consistently crisp rendering across browsers and operating systems.
  • The power of CSS. We will obtain the ability to style our icons with CSS.
  • The power of SVG filter effects.
  • The power of interactivity. We will be able to use animations with SMIL, CSS or JavaScript.
  • The power of the Markup language.

Currently, SVG looks more like a retired super hero. For humanity's sake, let's kick him off the sofa and send him to the gym.

Getting Started

First, we'll need to get some SVGs to work with. I'm assuming you are familiar with vector graphics and know how to create or where to get a SVG file. Check out this article for a good introduction on how to create and work with SVGs. For this tutorial we'll be using this SVG file. All demos you will see here will actually be working pens, so you will have the opportunity to play with them live.

At this point we have a vector graphic to play with, so let's add an empty SVG document just after the opening body tag.

I will refer to this SVG as "SVG source document" throughout this tutorial.

Let's add the "inner" SVG source into the empty SVG declaration and give this shape a unique ID for future reference.

<!doctype html>
<html>
<head>
    <meta charset=utf-8 />
</head>
<body>
  <!-- SVG SOURCE -->
  <svg height="0" width="0" style="position:absolute;margin-left: -100%;">
    <path id="heart-icon" d="M256,465.559c0,0- 239.054-135.345-239.054-291.062c0-159
       .761,224.692-177.574,239.054-7.756 c17.244-169.692,239.054-152.008,239.054,
       7.756C495.054,330.214,256,465.559,256,465.559z"/>
  </svg>
  <!-- SVG SOURCE ends-->
<body>
<html>

Find this code on Codepen

If your shape consist of many small chunks, you'll need to wrap them all with a g tag and add an ID to that group.

Now we can "use" this graphic wherever we want in our HTML document with the help of use. The xlink:href attribute is a reference to our shape by its ID:

<!doctype html>
<html>
<head>
  <meta charset=utf-8 />
</head>
<body>

<!-- SVG SOURCE —>
...
<!-- SVG SOURCE ends —>

<svg class="icon" viewBox="0 0 32 32"
    <use xlink:href="<strong>#heart-icon</strong>">
</svg>

</body>
</html>


Isn't that nice?

The use element takes nodes from within the SVG document and duplicates them somewhere else. The effect is the same as if the nodes were deeply cloned into a non-exposed DOM and then pasted where the use element is, much like anonymous content and XBL.— Mozilla DN

Thoughtful readers probably noticed the most interesting part of the above pen: we can simply use CSS to style our icons. Take a look:


The set of properties we can work with is pretty large. The most useful and common ones are:

  • width and height
  • icon color by using the fill property
  • stroke by setting stoke or stroke-width

Styling these properties will give us many possibilities. But let's make it even better – let's add our wanted inset shadow.

Adding Filter Effects

Filter effects are the real super powers of SVG and if you are interested in a detailed overview, check out Filter Effects – SVG 1.1 (Second Edition) and SVG Filters by Mike Sierra.

Let's work with some pre-made filters. Fortunately, there are a lot of ready-to-use SVG filters around.

To use a filter effect with our icon we need to declare it in our "SVG source document" with a unique ID for referencing, just like the we did with the icon but now we'll have a filter tag.

<filter id='inset-shadow'>
    <!-- Shadow offset -->
    <feOffset
    dx='0'
    dy='0'
    />

    <!-- Shadow blur -->
    <feGaussianBlur
    stdDeviation='1'
    result='offset-blur'
    />

    <!-- Invert drop shadow to make an inset shadow -->
    <feComposite
    operator='out'
    in='SourceGraphic'
    in2='offset-blur'
    result='inverse'
    />

    <!-- Cut color inside shadow -->
    <feFlood
    flood-color='black'
    flood-opacity='.95'
    result='color'
    />

    <feComposite
    operator='in'
    in='color'
    in2='inverse'
    result='shadow'
    />

    <!-- Placing shadow over element -->
    <feComposite
    operator='over'
    in='shadow'
    in2='SourceGraphic'
/>

Now, let's add the reference to the filter to a new group wrapper:

<svg viewBox="0 0 32 32">
  <g filter="url(#inset-shadow)">
    <use xlink:href="#heart-icon"></use>
  </g>
</svg>

Check out the following examples of SVG filters:

Inset shadow


Drop shadow


More examples


Isn't this awesome?

Adding Interactivity

As I've mentioned at the beginning of this tutorial, we can use SMIL, CSS or JavaScript for animating icons.

So let's bring some life to our icons! We'll create a working animated clock which will be great for showing the possibilities of what we can do.

We will start with an alarm clock icon as the "SVG source document". It consists of different shapes wrapped in a group with the ID #clock-icon for reference.


Icon credits go to visualpharm. License: CC by-nd 3.0.

I've also added some other IDs like #hour-hand, #minute-hand and #second-hand where appropriate for referring to the paths in the animation we will create.

Now, let's declare a rotation 2D transform for each of the clock hands.

For that we'll add a transform value of rotate(0 16 17) where

  • 0 is the amount of degrees the clock hand is rotated
  • 16 17 simply the center of our rotation on the X and Y axis.

So, using this rotation value

<rect id="hour-hand" transform="rotate(320 16 17)" x="15.386" y="10.291" width="1.227" height="7.626"/>

will rotate hour clock hand 320 degrees.

Take a look at the demo:


The next step is to add an animation of the rotation we made above. For this purpose we will use some JavaScript and set a new rotate value every full second:

<script>
    var setTime = function(){
      var date = new Date(),
      MINUTE = 60, HOUR   = 60*MINUTE,
      seconds = date.getSeconds(),
      minutes = (date.getMinutes()*MINUTE) + seconds,
      hours = (date.getHours()*HOUR)+minutes;

      document.getElementById('second-hand').setAttribute('transform', 'rotate('+360*(seconds/MINUTE)+',16,17)');
      document.getElementById('minute-hand').setAttribute('transform', 'rotate('+360*(minutes/HOUR)+',16,17)');
      document.getElementById('hour-hand').setAttribute('transform', 'rotate('+360*(hours/(12*HOUR))+',16,17)');
    }
    setTime();
    var interval = setInterval(setTime,1000);
</script>


Isn't this awesome?

If you are interested in seeing a version using SMIL animation, you can take a look at this demo. Also, check out the CSS version (both demos best viewed in Chrome). Note that SMIL animation support is limited.

Using Media Queries

We can use isolated CSS and especially media queries inside of our SVG icon. That means that we have the ability to change, for instance, a shape of an icon depending on screen size and more. We'll use this kind of inline style for this purpose:

<style>
   <![CDATA[ 
    @media screen and (max-width:810px){
      .hide{
        display: none;
      }
    }
   ]] >
</style>

Try to resize the browser when viewing this pen in a new window to less or more than 810 pixel.


Isn't this... SVG?

More Fun With SVG Icons

SVG Icons FTW

Let's do something fun with all these things we've just gone over. The demo below shows differently sized and filled icons, with some JS animations:


View this demo in full page

In the next demo we'll add some filter effects:


View this demo in full page

Having all these superpowers, the only limit is your imagination.

Browser Support

What we have done so far should work well in all popular modern browsers:

  • IE 9+ (filter effects since IE10)
  • Mozilla 4+
  • Opera 11.6+ (filter effects since Opera 12)
  • Safari 5.1+ (filters since Safari 6)
  • Chrome 14+ (at least)

Performance

After running a couple of tests, it shows that SVG icons are about two times slower compared to using a .wof icon font in Chrome. The time cost of the first paint operation is about 0.05 millisecond per icon or about 1.453ms for an average of 30 icons per user's view.

Conclusion

SVG Icons FTW

Let's look back and analyze what we've done.

Using SVG as icons in our web projects gives us the following advantages:

  • Only one HTTP request
  • Scalable vector and hence intrinsically Retina ready
  • Easy styling of color/size/effects in CSS
  • SVG icons are "light-weight" (the heart icon from my examples has only 189 bytes not gzipped)
  • It's text so it can be gzipped up to 95%
  • Power of SVG filter effects
  • XML like structure
  • We can have multi-colored icons
  • We can make use of isolated styles and media queries
  • We can make use of isolated animations with SMIL, CSS or JS
  • Supported by all major modern browsers

The IconMelon Project

SVG Icons FTW

As you have seen, using SVGs in your web project gives you a lot of possibilities but it would be great to have some kind of boilerplate for the icons itself, the filters and the CSS. So, I've been working on a free and open project called Iconmelon which aims to collect free SVG icon sets and provide a filter and CSS boilerplate. You can create your icon sets and download all the needed files and also submit your own graphics.

SVG Icons FTW

It's a brand new project so if you see any issues or have any feedback please let me know. Please also check out the support us page to see how you can help it grow.

Friday, December 13, 2013

Colorpeek, Part 2: Building Your First Chrome Extension

Building Your First Chrome Extension

The following is a guest post by Tyler Sticka. Tyler created a tool called Colorpeek. Yesterday we looked at the what and why of things. Today we'll look at how he built the Chrome Extension, which will serve as a great tutorial on how you can get started building your own Chrome Extensions.

Thursday, December 12, 2013

5 Advanced Mobile Web Design Techniques You’ve Probably Never Seen Before

5 Advanced Mobile Web Design Techniques You’ve Probably Never Seen Before

Until recently, creating mobile web designs that look and feel like native apps has pretty much been an impossible dream. There are plenty of creative workarounds to try and bring that native "feel" to mobile web browsing, but so far we've struggled to bridge the gap between native and the web.

Thursday, December 12, 2013

How to Decide on a Color Scheme for Your Website

How to Decide on a Color Scheme for Your Website
Your website's color scheme says a lot about you and/or your company. Color goes beyond aesthetics and has possible effects on the behaviors of your website's viewers. Deciding on a color scheme can be a difficult choice, with so many combinations and choices it can be hard to choose something that represents you. However, there is a method to the madness and there are color tools which can help narrow down the search for the perfect color scheme.

Saturday, December 07, 2013

Device State Detection with CSS Media Queries and JavaScript

Device State Detection with CSS Media Queries and JavaScript

Being able to detect device state at any given moment is important for any number of reasons and so it's important that web app CSS and JavaScript are in sync with each other. In working on the Mozilla Developer Networks' redesign, I found that our many media queries, although helpful, sometimes left JavaScript in the dark about the device state. Is the user viewing the site in desktop, tablet, or phone screen size? Easy from a CSS perspective but CSS doesn't directly speak with JavaScript. I've created a system based on media queries and z-index which can tell me which media query the user is viewing the site in at any given time, so that I can make adjustments to dynamic functionality whenever I want!

Saturday, December 07, 2013

7 Critical Mistakes You're (almost certainly) Making On Social Media

7 Critical Mistakes You're Making On Social Media
If you are marketing on social media (and you should be), you are probably making some of these mistakes. Here's how to recognize and fix them (from the Gospel of Gary Vaynerchuk).

Social media is just like... boxing?

That's the latest gospel out of Gary Vaynerchuk, the two-time bestselling author and the man known to many as the king of social media.

In his latest book, he breaks down social media strategy into five simple words: Jab, Jab, Jab, Right Hook.

Or in other words: Give Value, Give Value, Give Value, Make Your Ask.

The book goes into detail on how to navigate the often confusing and overwhelming world of social media and Vaynerchuk sheds much-needed light on the mistakes many of us make every day. Here are seven of them:

Thursday, December 05, 2013

8 HTML Elements You’re Not Using (and Should Be)

8 HTML Elements You’re Not Using
In today's web, the word semantic gets thrown around a lot. But what does semantic mean? Why is it important?

Semantic HTML expresses the meaning of the document. It's less about how the text looks and more about what it is. Good semantic markup helps both people and machines understand the content and its context.

Semantic markup is much more accessible and easier for screen readers to interpret. It's SEO friendly. It works better with modern browsers. It reduces the amount of code needed to express the content and increases the clarity of the code for other people that have to read it.

Wednesday, December 04, 2013

CSS Alignment and Sizing Snippets

CSS Alignment and Sizing Snippets
* This article was originally published at http://timseverien.nl/2013/10/css-alignment-and-sizing/

CSS can be tricky sometimes, especially when aligning and setting sizes. This article contains a bunch of helpful snippets that I've gathered. They make my life easier and hopefully yours as well.

Note: beneath each snippet is a table indicating browser support.

Wednesday, December 04, 2013

Javascript Hacks for Hipsters

Javascript Hacks for Hipsters
Javascript is so much fun, except when it's not.

There's always the fear of runtime errors that keeps us thinking all the time while writing code. It makes us better coders - we have no other option than to visualize every line of code as if it's running as we write it.

That's why it's so important to have tidy code. Small code. Pretty code. Code you just fall in love with. Otherwise, Javascript will scare you away.

Saturday, November 30, 2013

How to achieve great UX without time, money or design skills?

How to achieve great UX without time, money or design skills

How many of us can say we have sufficient time to do everything we want?

How many of us can say we have sufficient money to buy everything we want?

How many of us can say we have design skills good enough to beat the world's best designers (e.g. Apple)?

Saturday, November 30, 2013

Want SEO? Get Social

Want SEO? Get Social

Social media has not only created a completely new medium for discovering content, it is also transforming how the traditional information sources aka search engines, are delivering content to us.

Recent research suggests that social sharing has now become the number one driver for SEO rank. In other words, Google and Bing are monitoring the social sharing activity for each site and are assigning substantial weight on that activity to determine the search rank.

Thursday, November 28, 2013

Expected Web Design Trends for 2014

Web Design Trends for 2014
Everyone wants to remain competitive and relevant to their target audience. This is why it's so important to stay up to date with current trends in your business. Web developers and designers are no different; actually they especially need to track latest trends because their industry evolves so rapidly. Potential clients may not know that their site can look out of date just months after its been built.

Wednesday, November 27, 2013

5 Things Web Designers are Afraid of but Shouldn’t Be

5 Things Web Designers are Afraid of but Shouldn’t Be

Unless your job as a designer requires you to wear multiple hats, it can be easy to become content in doing only what you're an expert in. You're comfortable with your process and feel at home in Photoshop, HTML & CSS. A master of one is better than an novice of many, right? Maybe not.

Tuesday, November 26, 2013

Creating a Mobile HTML5 Application with App Framework

HTML5 Application with App Framework

App Framework is a JavaScript library for mobile HTML5 app development. It allows you to build simple, rich and full HTML5/JavaScript mobile applications. This short tutorial is an introduction to the App Framework and it presents the basic concepts and its main concepts.

Monday, November 25, 2013

7 Niche Social Networks for Strategic Networking

Strategic Networking

Do you find it hard to connect with your ideal audience using the larger social networks?

Have you considered a smaller social network?

In this article, you'll find 7 niche social networks built to serve specialized markets.

Monday, November 25, 2013

How to Host a Website or File on Google Drive

Host a Website or File on Google Drive

Google added an impressive feature to it's Google drive - file or web hosting. Developers can now host their website in Google drive by uploading and sharing HTML, CSS or JavaScript files.

Friday, November 22, 2013

8 simple copywriting tips, backed by science

copywriting tips

There are lots of times when I'm stuck on a title for a post, or the perfect word for something I'm writing.
Fortunately, we’re pretty keen on experimenting and testing at Buffer, so I can try lots of different ideas and see what works best.

Wednesday, November 20, 2013

21 JavaScript Parts I Struggle To Remember

21 JavaScript Parts I Struggle To Remember
This article is a review of the JavaScript ES3 parts that, for whatever reason, fade over time in my mind or I outright forget about. Some of the parts mentioned are quirks and some are just plain language realities that I personally find difficult to keep straight.

The eluding parts I discuss here are not focused on method nuances that can be resolved by referring to a JavaScript reference. I have tried to mainly focus on the parts of JavaScript that cannot easily be found in a language reference (i.e the difference between apply() and call()).

Friday, November 15, 2013

Create Stunning Homepages using Photo Backgrounds

Stunning Homepages using Photo Backgrounds
Treehouse uses large photographs in the latest update to the homepage.

Treehouse recently received a massive redesign and part of that included a new homepage. Our design team hired a photographer to shoot beautiful background photographs that span from edge-to-edge.

Friday, November 15, 2013

Which CSS Measurements To Use When

CSS Measurements
Amidst the diversity of CSS measurement systems it can be difficult for web developers to understand which units to use where and when, on their pages. The instinct is to use just one system for everything, but that decision can severely limit the execution of your designs.

What follows is a list of suggestions, not absolute rules.

Wednesday, November 13, 2013

The Three Pillars Of SEO In 2013: Content, Links, And Social Media

The Three Pillars Of SEO In 2013

A good SEO strategy is the difference between your business easily being found online and getting lost in the noise of thousands of other businesses trying to stand out. With Google's ever-changing algorithm, it can be difficult to know what's effective here and now.

Monday, November 11, 2013

The Complete Guide to Google Authorship

Google Authorship

Google Authorship was introduced by Google a few years ago, but it continues to grow in popularity as Google continues to intertwine its search results with its other products. This includes migrating the business listings on Google Places to Google+ (which business owners can do through their dashboard) and upgrading Google Docs to Google Drive, Google's cloud storage platform. As Google continues to merge its new and former products, getting setup with Google Authorship should be a top priority for business owners and webmasters.

Saturday, November 09, 2013

The Importance of Backlinks

The Importance of Backlinks

If you've read anything about or studied Search Engine Optimization, you've come across the term "backlink" at least once. For those of you new to SEO, you may be wondering what a backlink is and why they are important. Backlinks have become so important to the scope of Search Engine Optimization, that they have become some of the main building blocks to good SEO. In this article, we will explain to you what a backlink is, why they are important and what you can do to help gain them while avoiding getting into trouble with the Search Engines.

Saturday, November 09, 2013

Ways Google's Hummingbird Will Shape Future SEO and Content Marketing

Google's Hummingbird

Just over a week ago Google announced "Hummingbird", a new algorithm rather than an update or a refresh that is likely to affect around 90% of all searches. Whilst no one knows the full details of the algorithm, there are clear implications for the future of SEO and content marketing. The direction of travel is well articulated by Google and it has to be addressed by marketers in their future strategies.

Wednesday, November 06, 2013

E-Commerce Navigation: Show Sibling Categories for Easy Scope Adjustment

E-Commerce Navigation

Sibling categories – that is, categories that are placed next to one another in the site's category taxonomy – are hugely important as they enable users to make easy scope adjustments and better interpret the current scope.

Wednesday, November 06, 2013

Tinted Images with Multiple Backgrounds

Tinted Images with Multiple Backgrounds
The background property in CSS can accept comma separated values. "Multiple" backgrounds, if you will. You can also think of them as layered backgrounds since they have a stacking order. If we layer a transparent color over an image, we can "tint" that image. But it's not quite as obvious as you might suspect.

Wednesday, November 06, 2013

We Can Do It: Learn new things effectively

Learn new things effectively
Best-selling author Sir Ken Robinson describes our current education system as a manufacturing process with widespread standardization across its curriculum, evaluations and graduates. Before, being a standard university graduate got you a secure job with a good income; today, a diploma or degree comes with no guarantees. When you start working in the "real" world, you start to realize that you might not have all (or any) of the practical knowledge or skills required for the job you want. Not to worry — we may not have guarantees, but it's easy (or at least very possible) to learn through practice.

Monday, November 04, 2013

Using CSS Shapes to Enhance Visual Storytelling

CSS Shapes to  Enhance Visual Storytelling

Web designers have long been forced to create within the constraints of blocks. Since most daring ventures into non-rectangular layouts using regular CSS and HTML usually end in frustration, most of the content on the web is still trapped in simple boxes.

Friday, November 01, 2013

Conditional Media Query Mixins

Conditional Media Query Mixins
Sass makes working with media queries pretty excellent. You can nest them right within other blocks of CSS, which puts the properties and values you are changing right next to each other. That creates an obvious connection between them, which is a much nicer authoring experience than trying to maintain those changes separated by tons of other code or in a different file. We've covered this before. It was new in Sass 3.2.

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.