Sunday, September 28, 2014

All You Need To Know About Vertical-Align

Vertical-Align

Often I need to vertically align elements side by side.

CSS offers some possibilities. Sometimes I solve it with float, sometimes with position: absolute, sometimes even dirty by manually adding margins or paddings.

Tuesday, July 29, 2014

Hot User Input Design Patterns for Mobile

Hot User Input Design Patterns for Mobile

A Deeper Look at Patterns Designed by the Hottest Apps Today

In this article, Chris Bank of UXPin – The UX Design App discusses the importance of user input design patterns and details examples from some of the hottest mobile apps today – more examples of these patterns and over 45 additional mobile design patterns are covered in detail in UXPin's free e-book, Mobile UI Design Patterns 2014.

Tuesday, July 29, 2014

HTML Imports: Import HTML Files Into Another HTML Files

HTML Imports

Most of us are familiar with <script src> which we use in loading JavaScript, <link rel="stylesheet"> for CSS, <img> for images, <video> for videos, and <audio> for audios. But we don't have a more declarative way to load HTML. Whilst It's possible to load HTML with iframes element or the JavaScript method XMLHttpRequest(). HTML imports provide a much cleaner way to load self-contained components into web pages.

Sunday, July 20, 2014

How to Create Your Own HTML Elements With Web Components

Web Components
Web Components are currently and excitedly being talked about as an upcoming "tectonic shift for web development" with the promise of permanently reshaping the web design landscape. Big players are moving forward to bring web components into reality. Both Google and Mozilla are already gradually rolling out native browser support.

What are web components you ask? In a nutshell, web components give you a way to create your own custom HTML elements which can do just about anything you need them to. Instead of loading up your sites with verbose markup, long scripts and repetitive code, you wrap everything up into nice, neat little custom HTML elements.

Wednesday, July 16, 2014

Optimising for 60fps everywhere

Optimising for 60fps everywhere

With the latest update to GoSquared we set ourselves the target of achieving a smooth 60 frames per second for all the core UI and animation, across all devices.

Tuesday, July 01, 2014

15 Must-Have Mobile App Development Tools

Mobile App Development Tools - Corona SDK

A lot has changed since 1995, literally anyone with almost no technical capabilities can crank out a web or mobile app with ease. So I thought I'd take the opportunity to share some of the more interesting app development platforms I've discovered recently.

Sunday, June 29, 2014

How to Learn AngularJS - Your AngularJS Sherpa

AngularJS
Learning AngularJS can be complex. There are an overwhelming number resources available on the web. The blog posts can be conflicting and confusing, and a simple google search can turn up 5 articles all describing the same thing in a completely different way.

Friday, June 20, 2014

Responsive Multi-level Menu

Responsive Multi-level Menu

Today we want to share an experimental drop-down menu with you. The main idea is to save space for menus that have a lot of content and sub-levels. Each sub-level in this menu will be shown in its own context, making the "parent" level disappear. This is done with subtle animations that are defined in separate animation classes. The menu is fluid so that it can be used easily in a responsive layout.

Friday, June 20, 2014

Buttons With Icons Using CSS

Buttons With Icons Using CSS

Buttons always plays an very important role in any website so that any user can make some action. To make the buttons more appealing, it's a great idea to use buttons with icons on website. Icons actually make the buttons more appealing and reflects the significance of after-click effect.

Sunday, May 25, 2014

Frame-by-frame animation with HTML and JavaScript

Frame-by-frame animation with HTML and JavaScript

Animations can make your project stand out from the crowd. Good animations enhance the user interface, make navigation feel smoother and offer a superior esthetic experience (bad animation does the opposite, so be careful). Modern browsers support animations quite well, but there are so many different ways of animating HTML elements that it often confuses even experienced developers.

Saturday, May 24, 2014

JavaScript Prototypes, Scopes, and Performance: What You Need to Know

JavaScript: More than meets the eye

JavaScript can seem like a very easy language to learn at first. Perhaps it's because of its flexible syntax. Or perhaps it's because of its similarity to other well known languages like Java. Or perhaps it's because it has so few data types in comparison to languages like Java, Ruby, or .NET.

Saturday, May 24, 2014

Parallax Done Right

Parallax Done Right

Getting great performance with parallax is tough. Here's how to make it happen.

Tldr; There are an easy handful of things you can do to get buttery parallax scroll. Check out a demo I cooked up to see it in action.

Saturday, May 24, 2014

Morphing Buttons Concept

Morphing Buttons

Some inspiration for a morphing button concept where the action element (button) morphs into a component. The examples show different types of components, i.e. fullscreen overlay, modal window, sidebar and more.

Saturday, May 10, 2014

The Absolute Beginner's Guide to Node.js

The Absolute Beginner's Guide to Node.js

This is a republished blog post by Brandon Cannaday. Brandon is the CTO of Modulus, a Node.js application hosting platform. Brandon organizes the Indianapolis Node.js meetup and enjoys speaking at conferences about Node's horizontal scalability. Prior to Modulus, Brandon worked in the chemical detection and telecommunications industries.

Friday, May 09, 2014

Six Common Problems With The UX Process and Six Solutions!

Six Common Problems With The UX Process

How robust is your user experience design process? We all have our favored methods and techniques, but the general process is similar: Conduct research, prototype, then present to stakeholders and users.

Thursday, May 08, 2014

7 Things You Didn’t Know You Could Do with CSS

7 Things You Didn’t Know You Could Do with CSS
CSS and JavaScript, believe it or not, are starting to overlap as CSS adds more functionality. When I wrote 5 Ways that CSS and JavaScript Interact That You May Not Know About, people were surprised at how CSS and JavaScript have come to overlap. Today I will highlight seven tasks you can accomplish with CSS -- no JavaScript or imagery required!

CSS @supports

Every good front-end developer feature-tests before using features which a browser may not have. Feature testing has always done with JavaScript, and many people use Modernizr, an impressive utility packed with loads of well-tested routines, to do that feature testing. A new API, however, has come along to let you do feature tests with CSS: @supports. Here are a few samples of how @supports works:

Monday, May 05, 2014

Injecting SVG With JavaScript

Injecting SVG With JavaScript

"Injecting SVG" – it sounds kinda complicated I know, but trust me it's not. It's actually super-simple! Right now you're probably thinking "Why would you use JavaScript to inject SVG markup? What is it? And how does it work?". Let me explain.

Saturday, May 03, 2014

Off Canvas Menus with CSS3 Transitions and Transforms

Off Canvas Menus

Off Canvas Menus are used primarily with Mobile and touch devices and can provide an extremely useful and beautiful experience for your users. This tutorial will cover an introduction on them, a getting started guide, some improvement tricks, and then finally some awesome demos for you to build off of. Instead of JavaScript, we'll use CSS3 Transitions and Translations for the animation making them smoother, better performing, and easier to tweak and customize.

Thursday, May 01, 2014

Chrome DevTools Features You May Have Missed

Chrome DevTools

In 2013, I posted a few tutorials on DevTools: Markup and Style, Networking and the Console and JavaScript and Performance, covering the basic features of the various DevTools panels. Since then, a lot has changed, so let's take a look.

Thursday, May 01, 2014

DRY-ing Out Your Sass Mixins

Sass Mixins

One of the most powerful features of the CSS preprocessor Sass is the mixin, an abstraction of a common pattern into a semantic and reusable chunk. Think of taking the styles for a button and, instead of needing to remember what all of the properties are, having a selector include the styles for the button instead. The button styles are maintained in a single place, making them easy to update and keep consistent.

Monday, April 28, 2014

Build a Dribbble Portfolio Grid With Flexboxgrid and Jribbble

Flexboxgrid

Building with a grid has become an everyday requirement for front-end developers. Not only do grids provide a sense of rhythm and consistency in design, but when a well-known grid structure is used it provides a simple collective design language for cross–team work.

Monday, April 28, 2014

12 Little-Known CSS Facts

12 Little-Known CSS Facts

CSS is not an overly complex language. But even if you've been writing CSS for many years, you probably still come across new things — properties you've never used, values you've never considered, or specification details you never knew about.

Saturday, April 26, 2014

Using Media Queries in JavaScript

Using Media Queries in JavaScript

If you practice responsive design then you use a lot of media queries. Media Queries are a CSS feature that gives designers the power to add something like if statements. By this I mean that it allows you to apply rules only if the current page meets certain conditions. In this article I'll show you how I use media queries in JavaScript.

Saturday, April 26, 2014

How to Make Any Website Responsive

How to Make Any Website Responsive

According to Verisign's Domain Name Industry Brief for 2013, it is estimated that 85% of all .com and .net TLDs (top-level domains) have websites: that's over 100 million websites (being that .com and .net domains collectively number over 120 million). Now, that is a lot of websites! So how exactly are we going to make them all responsive?

Saturday, April 26, 2014

Why Element Queries Matter

Element Queries
A sketch of our main component

At work, many of our pages present one or more collection of items, like products, shops, or whatever. It's basically a list of thumbnails, with a title and a location and/or a price. When you click on it, it leads you to the page related to the item. We call this the elements component (we could have called it thumbs-list or something but that doesn't matter).

Saturday, April 26, 2014

How to Create Custom HTML Elements

Custom HTML Elements
Photo by Kenny Louie / Flickr

An exciting feature of the HTML specification that's been getting a bit of hype recently is custom HTML elements. These allow you to create your own HTML elements along with their own JavaScript API. This can be useful when building interfaces with components that are reused throughout an application.

Saturday, April 19, 2014

New HTML5 Attributes for Hyperlinks: download, media, and ping

New HTML5 Attributes for Hyperlinks
Hyperlinks have been around since the dawn of the Web. But with the dawn of HTML5, three new attributes have been added to the humble <a> tag to keep existing attributes like href, rel and others company.

The new attributes are: download, media and ping. In this article, we'll take a quick look at what these new attributes are and how they can be used once browser support improves.

The download Attribute

The download attribute is new in HTML5. It supplements the existing href attribute by telling the browser that the resource the href points to should be downloaded directly, instead of visited (which could happen with a file that the browser can open, like a PDF). The value of the download attribute is used for the name of the file that is downloaded.

Sunday, March 30, 2014

Rotated Table Column Headers

Rotated Table Column Headers

Say you have a table header (i.e. <th>) of "Number of Howler Monkey Species by Country" and the data in the corresponding <td> is like "3". That's an awkward mismatch of width.

Sunday, March 23, 2014

Style External Links Differently

Style External Links Differently
When you are writing content on your website there will be times when you want to refer to other content on the internet, this can be to either your own articles or to external sources for other people's content.

When you link to external content it's common practice to open this content up in a new tab, this way the reader won't be taken away from there place in the article.

To open your links in a new window you can use the target="_blank" attribute.

<a href="url" target="_blank">External Link</a>

Sunday, March 23, 2014

How to Use the Details and Summary Elements in HTML5

How to Use the Details and Summary Elements in HTML5
A number of new interactive elements were introduced with HTML5 that provide native implementations of common UI widgets like dialogs and modals. Among these new additions are the <details> and <summary> elements. These elements allow developers to create collapsable UI widgets the user can click to show or hide content.

Tuesday, March 11, 2014

Flexbox Bar Navigation Demo

Someone wrote in to me asking how to create a simple bar navigation with icons. This is a pretty simple layout thing that could be accomplished loads of different ways. List items as inline-block probably makes the most sense in general.

Tuesday, March 11, 2014

CSS 3D Folding List With Social Buttons

CSS 3D Folding List With Social Buttons

CSS 3D transforms are just awesome. I've seen before some cool and inspiring implementations in the wild and still I can't believe I didn't had the chance to write an article on this topic 'til now.

Tuesday, March 11, 2014

To Close Or Not To Close

HTML Tags

Have you ever wondered if it's better to "close" a br or input tag like <br /> or if it's better to just write <br> in HTML5? Or why it's not correct to write <script src="script.js" />? Well so have I and my findings on the subject were a lot more interesting than I anticipated (if for some strange reason you find stuff like this interesting).

Tuesday, March 11, 2014

Simple Stack Effects

Simple Stack Effects

Today we'd like to share some inspiration for simple stack effects with you. You have certainly seen these kind of effects, mostly used in image galleries, but also on single items on a page: one item is shown initially and then, with some trigger, more items are revealed, normally as decoration.

Sunday, March 09, 2014

Why You Should Care About Web Components

Web Components
Since there is no standard way to define a component, every framework has to invent its own and JavaScript is a flexible enough language to allow that. Unfortunately, this results in fragmentation: components built using different frameworks do not interoperate with each other. Web components are a set of specifications solving this problem.

Two Date Pickers

Let's take a simple component that you are likely to see in pretty much any application - the date picker component.

Sunday, March 09, 2014

A responsive approach to image scaling with CSS

A responsive approach to image scaling with CSS

There was a popular article written a few weeks ago called "Vertical align anything with just 3 lines of CSS". This approach to vertically aligning things with top and translateY is something we've used recently, but in a little different context. We had to fit images into responsive containers that had fluid widths and set heights and all we knew were the widths of the images.

Wednesday, March 05, 2014

Uploading Files with AJAX

Uploading Files with AJAX

The introduction of AJAX marked a huge leap forward in the history of the web. The ability to communicate with a web server without reloading the page has revolutionised how web applications are built. The primary technology that enables AJAX (XMLHttpRequests) has evolved significantly since the initial conception of dynamic websites.

Monday, March 03, 2014

10 HTML5 APIs Worth Looking Into

10 HTML5 APIs

The tools available to create powerful applications on the web platform are getting better with each passing year. The HTML5 specification has added a number of useful features in new APIs that you may not have delved into yet, likely because of the lack of browser support.

Monday, March 03, 2014

Create Different Styles of Hover Effects with CSS3 Only

Create Different Styles of Hover Effects with CSS3 Only

We started to see a lot of CSS3 animations around the web nowadays. Pure CSS3 animation such as flashing, fading, spinning, zooming, moving and a serial of complicated animations are emerging. What seems to be impossible to achieve with CSS only are now achievable fairly easily.

Sunday, March 02, 2014

Designing for Performance

Designing for Performance

Web performance is user experience.

Sunday, March 02, 2014

Making Embedded Content Work In Responsive Design

Making Embedded Content Work In Responsive Design

A few HTML elements don't play nice with responsive layouts. One of these is the good ol' iframe, which you may need to use when embedding content from external sources such as YouTube.

Sunday, March 02, 2014

Symfony 2: The Basics

Symfony 2: The Basics

In this first introduction video (of a new series), I'll show you the basics of working with the Symfony 2, PHP framework.

Sunday, March 02, 2014

Create a carousel out of nothing but CSS

Create a carousel out of nothing but CSS

You don't need JavaScript to build a carousel any more, Ben Schwarz introduces a CSS library that does the job.

Monday, February 24, 2014

Outdated UX patterns and alternatives

Meet North, design and development standards to align and guide your project. It's a comprehensive guide contributed to the open source community to encourage, "a mobile-first, in-browser, system based approach to design and development".

Saturday, February 08, 2014

15 Best Responsive Web Design Testing Tools

Over the past few years we've seen an explosion of web-enabled devices with varying resolutions, capabilities, form factors, pixel densities, interaction methods and many more. As the use of different devices continues to rise all across the world, so does the need for us to deliver a tailored experience for those devices on the web. But how do you test your website responsiveness?

Friday, February 07, 2014

Fullscreen Overlay Effects

Some simple and creative overlay styles and effects. From sliding the overlay into the viewport to using SVG morphing shapes, we explore some effects for fullscreen overlays.

Fullscreen Overlay Effects

Saturday, February 01, 2014

A Step-by-Step Guide To Building Your First Mobile App

Mobile App

Why do you want to build a mobile app? Do you want to ride the wave of other entrepreneurs, or did you come across a problem that you feel you can resolve? The answer to this question will determine whether your app will be successful or not.

Friday, January 31, 2014

15 Powerful Social Media Tips

Social media is ever-changing and ever-growing. Of course, this is true of the internet in general, but even more so when talking about social media. Facebook, Google+, Twitter and countless others are constantly evolving and changing based on their users' reading, browsing and posting habits. Of course, this is good news. It does mean that social media will continue to be relevant in the years to come.

15 Powerful Social Media Tips

Friday, January 31, 2014

Scattered Polaroids Gallery

A flat-style Polaroid gallery where the items are scattered randomly in a container. When a specific item is selected, it will move to the middle while the other Polaroids will make space for it by moving to the sides. Optionally, an item can have a backface which will be shown by flipping the Polaroid when clicking on the current navigation dot again.

Scattered Polaroids Gallery

Monday, January 27, 2014

5 UX Tips for Designing More Usable Registration Forms

The web is crowded with UI solutions that we've inherited from the past, but are still applied because "everybody else does". It is time to reconsider all of them, but especially registration forms. When designing registration forms, keep in mind that they are for the user and the smoother the registration process, the more delighted your customers will be.

Here are some tips to make the most of registration forms.

Monday, January 27, 2014

Validation and Exception Handling: From the UI to the Backend

Sooner or later in your programming career you will be faced with the dilemma of validation and exception handling. This was the case with me and my team also. A couple or so years ago we reached a point when we had to take architectural actions to accommodate all the exceptional cases our quite large software project needed to handle. Below is a list of practices we came to value and apply when it comes to validation and exception handling.

Friday, January 24, 2014

CSS animation-fill-mode

We're always super excited to get into CSS animations because, quite frankly, they're incredibly awesome. One overlooked animation property, however, is the animation-fill-mode property. This CSS property sets the state of the end animation when the animation is not running. Here's a quick example:

Friday, January 24, 2014

Prevent common problems when writing CSS from scratch

Many times when I started writing the classes of a brand new site, I had two problems that bothered me very much: keeping the footer always at the bottom of the page - even if the page has few content - and using padding values in divs without influencing the overall width of the div.

Then I decided to always put the same basic classes on the css file, no matter what the layout would look like:

Friday, January 17, 2014

How to Make WordPress Sites Load 72.7% Faster

How to Make WordPress Sites Load 72.7% Faster

You want to know the secret to a faster WordPress website?

You and everyone else.

Wednesday, January 15, 2014

SVG Hover Effect

Tuesday, January 14, 2014

When To Use The Button Element

When To Use The Button Element
You use it when, uhm, you want a button on your page that users can click, right? Well, unfortunately it's a bit more complicated than that. It's not too bad though, let's figure it out.

It looks like this:

<button>
  Do Something
</button>

What's the most common result of clicking something on a website? Moving to a new URL, like you would clicking a link (an <a href="/example/"></a>) element).

The <button> element, by itself, can't do that. There have been various conversations about allowing "href anywhere" over the years, but nothing has came of it.

Clicking on a button does do something though, when used in its natural environment...

Button is a Form Element

Web forms have submit buttons. You might think of that like this:

<form action="/" method="post">
  <input type="submit" value="Submit">
</form>

A <button> element in a <form>, by default, behaves identically to that submit input above.

<form action="/" method="post">
  <button>Submit</button>
</form>

However gross the UX, forms can have reset buttons as well. You can duplicate that behavior by changing the default submit type to reset.

<form action="/" method="post">
  <button type="reset">Reset</button>
</form>

Clicking that button will clear all the other inputs (and textareas) with the parent <form>.

Buttons can have content

The primary reason for using a <button> is that it has both and opening and closing (</button>) tag. Which means there can be stuff inside. A common use case would be something like:

<button>
  <img src="tiny_birthday_cake.png" alt="">
  Submit
</button>

While an input can be <input type="image">, this mixed content would be hard to pull off.

As far as I can tell, there is no limit to what kind of content you can put in a button, so feel free to get real weird with it. Pseudo elements can be used too.

Let's leave styling <button>s for another day, but different browsers generally have a special style they apply to buttons. You'll want to either leave that alone so the default comes through, or remove it thoroughly so your new styling can be consistent across browsers.

Let's consider: "if a button doesn't have a meaningful href, it's a <button>"
I said recently that I enjoyed that sentiment. That's what kicked off this article for me. At the time, I was thinking of how I enjoyed the semantics of it. As in:

<a href="#0">
  I'm kinda sick of doing this for buttons.
</a>

There is no meaningful href there. The 0 is just there so it doesn't jump the page, because ID's can't start with a number.

Chances are, HTML like the above means: I'm going to make clicking that do something with JavaScript. Somehow that feels better than a <div> whatever, because you get the cursor change and whatever else default styles.

If you don't like those meaningless href's, a <button> can seem like a nice alternative. But unfortunately outside of the context of a <form>, a <button> is equally meaningless.

<button>
  Outside of a <form>, I'm just as useless.
</button>

But <button> feels better anyway

Even if a <button> doesn't do anything outside of a form without the help of JavaScript, it still feels better for things you can click that do stuff other than change pages. A bogus href link definitely doesn't feel right.

Alright. Let's insert it with JavaScript then

That's probably the best solution. If JavaScript is required for the clickable-thing to do anything at all, it might as well not even be there at all unless JavaScript runs. We can do:

// 1. Create the button
var button = document.createElement("button");
button.innerHTML = "Do Something";

// 2. Append somewhere
var body = document.getElementsByTagName("body")[0];
body.appendChild(button);

// 3. Add event handler
button.addEventListener ("click", function() {
  alert("did something");
});

You could easily have "button adding" be a part of your JavaScript workflow.

When links make more sense

If there is any kind of href you could put on that link that makes sense, by all means, use an anchor. Even if you override that behavior with JavaScript. That's progressive enhancement at it's finest. For instance:

  • A search button normally triggers a type-ahead ajax-search thingy - but the href could just point to a /search/ page.
  • A publish button triggers the the next stage of publishing something a user built - but the href could just point to a /publish/ page.
  • A thumbnail button opens a lightbox with a larger version - but the href could just point to the URL of that larger version.

If nothing makes sense, insert the button with JavaScript.

Accessibility concerns

Let's say using an anchor link does make sense. After you give yourself a nice little back-pat for being good at progressive enhancement, there is accessibility to consider as well.

You might be like, I got this!

<a href="#meaningful" class="button" role="button">
  I'm good
</a>

But you aren't out of the woods yet. MDN covers it well:

Warning: Be careful when marking up links with the button role. Buttons are expected to be triggered using the Space key, while links are expected to be triggered through the Enter key. In other words, when links are used to behave like buttons, adding role="button" alone is not sufficient. It will also be necessary to add a key event handler that listens for the Space key in order to be consistent with native buttons.

Get that? You activate links and buttons with different keys, so consider that.

Go forth and uhm, make clickable things correctly.

Sunday, January 12, 2014

Simple Responsive Grid

Simple Responsive Grid

A simple responsive grid layout with minimal markup.

<div>Simple Responsive Grid</div>
  <span class="grid">
    <div class="unit-2">Simple Responsive Grid</div>
    <div class="unit-2">Simple Responsive Grid</div>
        
    <div class="unit-3">Simple Responsive Grid</div>
    <div class="unit-3">Simple Responsive Grid</div>
    <div class="unit-3">Simple Responsive Grid</div>
        
    <div class="unit-4">Simple Responsive Grid</div>
    <div class="unit-4">Simple Responsive Grid</div>
    <div class="unit-4">Simple Responsive Grid</div>
    <div class="unit-4">Simple Responsive Grid</div>
  </span>
    
<img src="http://placehold.it/400x300">
  <span class="grid">
    <img class="unit-2" src="http://placehold.it/400x300">
    <img class="unit-2" src="http://placehold.it/400x300">
        
    <img class="unit-3" src="http://placehold.it/400x300">
    <img class="unit-3" src="http://placehold.it/400x300">
    <img class="unit-3" src="http://placehold.it/400x300">
        
    <img class="unit-4" src="http://placehold.it/400x300">
    <img class="unit-4" src="http://placehold.it/400x300">
    <img class="unit-4" src="http://placehold.it/400x300">
    <img class="unit-4" src="http://placehold.it/400x300">
  </span>

div {
    font-family: monospace;
    text-align: center;
}

div, img {
    width: 100%;
    font-size: 80%;
    margin-bottom: 10px;
    color: white;
    background-color: black; /* optional border color */
    padding: 10px; /* optional border width */
    box-sizing: border-box;
}

.grid {
    display: block;
    margin-left: -10px;
}

.unit-2, .unit-3, .unit-4 {
    float: left;
    border-left: 10px solid transparent;
    box-sizing: border-box;
    background-clip: padding-box;
}

.unit-2 { width: 50%; }
.unit-3 { width: 33.3%; }
.unit-4 { width: 25%; }



via CSS Deck by

Sunday, January 12, 2014

Character Count

Character Count

Character count for textarea with alert and cut-off. Based on experiment by Jason Saba.



<div class="wrapper">
  <h1>Textarea Character Count</h1>
  <textarea name="the-textarea" id="the-textarea" maxlength="140" placeholder="Enter Your Text Here"></textarea>
  <div id="the-count">
    <span id="current">0</span>
    <span id="maximum">/ 140</span>
  </div>
</div>

<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400,700,300italic);

*, *:before, *:after { box-sizing: border-box; }
html { font-size: 100%;  }
body { 
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  background: tomato;
  color: #fff;
}

.wrapper {
  max-width: 65%;
  margin: auto;
}


h1 { 
  color: #fff; 
  margin: 3rem 0 1rem 0; 
  padding: 0;
  font-size: 1.5rem;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  display: block;
  text-align: Center;
}

textarea {
  width: 100%;
  min-height: 100px;
  resize: none;
  border: 1px solid #ddd;
  outline: none;
  padding: 0.5rem;
  color: #666;
  box-shadow: inset 0 0 0.25rem #ddd;
  &:focus {
    outline: none;
    border: 1px solid darken(#ddd, 5%);
    box-shadow: inset 0 0 0.5rem darken(#ddd, 5%);
  }
  &[placeholder] { 
    font-style: italic;
    font-size: 0.875rem;
  }
}

#the-count {
  float: right;
  padding: 0.1rem 0 0 0;
  font-size: 0.875rem;
}

$('textarea').keyup(function() {
    
  var characterCount = $(this).val().length,
      current = $('#current'),
      maximum = $('#maximum'),
      theCount = $('#the-count');
    
  current.text(characterCount);

  
  /*This isn't entirely necessary, just playin around*/
  if (characterCount < 70) {
    current.css('color', '#fff');
    current.css('font-weight', 'normal');
  }
  if (characterCount > 70 && characterCount < 90) {
    current.css('color', '#eee');
    current.css('font-weight', 'normal');
  }
  if (characterCount > 90 && characterCount < 100) {
    current.css('color', '#793535');
    current.css('font-weight', 'normal');
  }
  if (characterCount > 100 && characterCount < 120) {
    current.css('color', '#841c1c');
    current.css('font-weight', 'normal');
  }
  if (characterCount > 120 && characterCount < 139) {
    current.css('color', '#8f0001');
    current.css('font-weight', 'bold');
  }
  
  if (characterCount == 140) {
    maximum.css('color', '#8f0001');
    current.css('color', '#8f0001');
    theCount.css('font-weight','bold');
  } else {
    maximum.css('color','#fff');
    theCount.css('font-weight','normal');
  }
  
      
});

Friday, January 10, 2014

Where the best designers go to find photos and graphics

find photos and graphics

I'll let you in on a little secret: beautiful websites aren't made, they're found. Smart designers know where to find that perfect photo, subtle pattern or that unique icon.

Here's where the best designers go to find photos, graphics, icons and more.

Stunning Photography

Photography is what separates a good website from a great website. There may be no better example of great photography than Apple's website. Apple loves to showcase products with huge, eye popping photography. It's a great example of how to use photos.

Here's where the best designers find photos:

  • New Old Stock Photos - Awesome vintage photos from public archives. Completely free of known copyright restrictions.
  • New Old Stock Photos
  • Super Famous - Lots of geological, biological and aerial photography from from Dutch interaction designer Folkert Gorter. Sound boring? It's not. These photos are one of a kind.
  • Unsplash - A free email newsletter stuffed with hi-resolution photos. Sent every ten days.
  • Little Visuals - Another free email newsletter. Sends weekly batches of 7 gorgeous photos.
  • Comp Fight - The fastest way to find Creative Commons images to use on your blog or website.
  • Pic Jumbo - Big, searchable database of totally free to use photos.

Sample photo from Pic Jumbo

Sharp Icons

The next time you're browsing Facebook, Google or Twitter, take note of how many icons you'll see. They're everywhere. That's because icons are an essential part of web design.

Here's where smart graphic designers go to find icons:

  • The Noun Project - The grand daddy. Enormous database of over 25,000 icons and growing daily. Each icon has a similar format so they always look professional and consistent.
  • Icons from The Noun Project
  • Icon Monstr - Free, simple icons discoverable through a search interface. Over 2,000 icons.
  • Icon Sweets - Love iOS7? This downloadable library has over 1,000 icons in the style of iOS7 (iOS7 is known for having outlined icons). Available for only $10.

Graphics & Logos

  • Creative Market - Amazing, handcrafted graphics from designers around the world. I always find top-rate stuff here.
  • Creative Market
  • 99 Designs - Crowdsource your logo: hold a contest and have 20 – 30 designers submit logo entries. Choose the one you like.
  • Scoop Shoot - Need photos from around town? ScoopShoot lets you hire people around town to take photos with their phones.
  • Subtle Patterns - Over 369, subtle (duh) patterns. They all work by being repeated, so they're perfect for websites.
  • Subtle Patterns
  • Colour Lovers - Have difficulty choosing which colours to use? Colour Lovers has literally millions of colour palettes created by users that are ready for you to use.

Two tools that will make you a design rockstar

  • Pixlr - Pixlr is like a free, online version of Photoshop.
  • Placeit - An incredible website. Just drag and drop screenshots and it will generate shots of your screenshot in realistic environments.

Placeit – Just upload a screenshot and Placeit will automatically place it in a new context

Bonus: Reader submitted resources

Savvy readers have mentioned additional tools that I hadn’t included. Here’s some that have stuck out to me:

  • Gimp – A bit of a learning curve, but a free tool for image editing (Thanks to Jesus Bejarano and Rekasays in the comments section).
  • Creative Commons images on Flickr – Thanks to 3stripe on Hacker News.