Kida's World

Useful JavaScript Libraries and jQuery Plugins

noreply@blogger.com (UXAWY) — Mon, 12 Nov 2012 13:27:00 +0000

Web Forms and Input Validation

Select2 jQuery Plugin⁴²
A jQuery-plugin for replacement and enhancement of <select>-boxes. The plugin supports search, remote data sets, and infinite scrolling of results. Users can just start typing what they’re looking for. Non-matching entries are removed from the view, and options can be selected using “Enter” or a mouse click. The plug-in works with standard select input fields as well as with multiple selects and optgroup. It also has support for selected, disabled and default text (HTML5’s placeholder attribute). The plug-in is based on Chosen⁴³, an alternative solution which is currently available in jQuery, MooTools and Prototype flavors and as a Drupal 7 module.

⁴⁴
jQueryCoreUISelect⁴⁵
Another cross-browser solution to enhance the <select> element with jQuery and CSS. Requires jQuery 1.6 or higher. It provides full customization, support of optiongroup, automatic calculations, keyboard support, callback functions and is compatible with mobile devices.
⁴⁶
Sisyphus.js⁴⁷
This script allows Gmail-like auto-saving of drafts. It stores form data to the HTML5 local storage of the user’s browser and restores it when the user reloads or reopens the page or opens the page in a new tab. The data is cleared from local storage when the user submits or resets the form.
⁴⁸
jQuery Credit Card Validator⁴⁹
This library attaches to the input event (with a fallback to the keyup event) and so every time a number in the input field changes, it calls a validation function. When a card is recognized, the credit card type is highlighted; and if the credit card number is correct, it is highlighted with a green checkmark as well. The plugin supports American Express, Diners Club, Discover Card, JCB, Laser, Maestro, MasterCard, Visa and Visa Electron. You might want to consider credit cards JavaScript validator⁵⁰ and the Smart Validate Credit Card Validation plugin.
⁵¹
TextExt⁵²
This library allows you to transform HTML text into input fields, without resorting to code inflation. The plugin inserts aesthetic as well as practical input possibilities, e.g. Tags, Ajax, Focus and others.
⁵³
Avgrund: Better Modal Boxes
A jQuery plugin for displaying a depth illusion between popup and page. The original script by Hakim El Hattab⁵⁴ uses CSS transitions and transformations, and the plugin gracefully degrades in those that do not support transitions and transforms. MIT licensed.

VisualSearch.js⁵⁵
This library enhances ordinary search boxes with the ability to autocomplete faceted search queries. You can specify the facets for completion, along with the completable values for any facet. You can retrieve the search query as a structured object, so you don’t have to parse the query string yourself.
Ideal Forms Framework⁵⁶
A very comprehensive jQuery plugin for building and validating responsive HTML5 forms. It provides keyboard support, customizable input types, “on the spot” validation, localization and HTML5 placeholder polyfill. Supported in IE8+, Chrome, Firefox, Opera, iOS5+, Android 4.0+.
⁵⁷
Mailcheck⁵⁸
With this JavaScript spell-checker you can suggests another domain when the user misspells it in an email address. Mailcheck helps effectively reducing sign up typos. While it already includes some domains, you can easily supply your own.
⁵⁹
Validate.js
A lightweight JavaScript form validation library. You can validate form fields using over a dozen rules and set custom messages; the library doesn’t have any dependencies and you can define your own validation callbacks for custom rules. Works in all major browsers (even IE6!).

jQuery File Upload⁶⁰
File Upload widget with multiple file selection, drag&drop-support, progress bars and preview images. It supports cross-domain, chunked and resumable file uploads and client-side image resizing. Works with any server-side platform (PHP, Python, Ruby on Rails, Java, Node.js, Go etc.) that supports standard HTML form file uploads.
⁶¹
Grumble.js
This jQuery plugin provides tool tips without being limited to cardinal directions. A grumble can be rotated around a given element at any angle, all 360 degrees and at any distance — with CSS. Works in Internet Explorer 6+ and modern browsers. Also, check Tipped⁶², a larger library of various designs and implementations of tooltips with an extensive API.

Dialogs for Twitter Bootstrap
A small JavaScript library which allows you to create dialog boxes using Twitter’s Bootstrap modals, without having to worry about creating, managing or removing any of the required DOM elements or JS event handlers. You might want to check out the Date Range Picket for Bootstrap⁶³ as well as a growing library of HTML Snippets for Twitter Bootstrap.
⁶⁴
ddSlick⁶⁵
Prashant Chaudhary has realeased a free lightweight jQuery plugin that lets you create a custom drop-down that can include images, a short description, along with your usual text and value. It also supports callback functions on selection. You could use CSS3 Drop-Downs⁶⁶ as well.
⁶⁷
noty⁶⁸
This jQuery plugin makes it easy to create alert, success, error, warning, information and confirmation messages. The notification can be positioned anywhere on the page and you can customize the text, animation, speed and buttons easily.
⁶⁹
jQuery.complexify.js
Complexify helps you to accurately gauge the quality of a user’s password to give them visual feedback, and to enforce a minimum level of security.

Numberfy⁷⁰
With Numberfy you can integrate native support for line numbers in your website’s text areas. On every key press in the text area, the text area’s current value is split into lines. This script will not work in IE due to a bug in the text-wrap properties.
FormAccordion
A jQuery plugin for easily hiding and revealing related form fields conditionally.
jQuery.superLabels⁷¹
You can use the library to give your forms a fade-out label. This implementation makes the label slide across the field when gaining focus and fade out when a value is entered. A fallback is provided as well.
cryptico⁷²
An encryption system utilizing RSA and AES for JavaScript.

Web Typography Libraries and Plugins

Baseline.js⁷³
A jQuery plugin for restoring baselines thrown off by odd image sizes. To use it, you just call the plugin passing the height of your baseline as a variable. You can also define multiple baselines for different responsive breakpoints.
⁷⁴
FTColumnflow⁷⁵
Developed by the development team of Financial Times, this library is essentially a polyfill that fixes the inadequacies of CSS column layouts. With the library, you can provide configurable column widths, gutters and margins, define elements spanning columns, keep-with-next to avoid headings at the bottom of a column, group columns into pages and standardize line height to align text baseline to a grid.
⁷⁶
Responsive Measure jQuery Plugin
A simple script that allows you to pass in a selector (ideally the container where your primary content will go), which generates the ideal font size needed to produce the ideal measure for your text. The script also generates a resolution-independent font-scale based on the ideal font-size. Created by Josh Brewer.
⁷⁷
The Widow Tamer⁷⁸
The Widow Tamer is a small JavaScript library that automatically “fixes” typographic widows. It’s designed to work with responsive sites, fixing widows as it finds them on resize or orientation change.
⁷⁹
Fluid Line-Height⁸⁰
With his article, Tim Brown inspired developers to release tools that adjust line-height for optimum readability on responsive websites. The so-called molten-leading binds the height of the line to an element’s minimum and maximum width. jQuery-minLineHeight is a jQuery plugin that works similarly with minimum and maximum width association.
⁸¹
FitText.js⁸²
This jQuery plugin helps you create scalable headlines that fill the width of a parent element in your fluid or responsive layouts. You might want to check out Lettering.js⁸³ as well to get a complete down-to-the-letter control of letters in your projects.
⁸⁴
Kerning.js⁸⁵
This library lets you kern, style, transform, and scale your Web type with CSS rules, automatically. You can adjust pairings, introduce font conditionals and augment properties.
⁸⁶
SlabText.js⁸⁷
The script splits headlines into rows before resizing each row to fill the available horizontal space. The ideal number of characters to set on each row is calculated by dividing the available width by the pixel font-size – the script then uses this ideal character count to split the headline into word combinations that are displayed as separate rows of text.
⁸⁸

Little Time-Savers

money.js: Open-Source Exchange Rates and Currency Conversion
Joss Crowcroft has created an Open Source Exchange Rates API, which provides up-to-date, flexible and portable currency-conversion data that can be used in any application, framework or language (not just JavaScript). It has no access fees, no rate limits, no nasty XML: just free, hourly updated exchange rates in JSON. Joss also built money.js, a JavaScript currency conversion library that can be easily integrated in any website. A demo playground and detailed documentation are provided on the website, and the source code is available on GitHub.

Accounting.js: Easier Number and Currency Formatting
This simple, tiny JavaScript library will solve your currency and numbers-related formatting hassles, and it even includes optional Excel-style column rendering to line up symbols and decimals. It will make all of your numbers and currencies look much more uniform and professional.

Moment.js: Format Dates And Times⁸⁹
Moment.js is a lightweight JavaScript library which lets you format, parse and manipulate dates. You can add or subtract dates from one another, as well as parse things like Unix Timestamps. Display options include formatted dates, time from now, difference, time from another moment, native date and support for leap years.
⁹⁰
Smart Time Ago⁹¹
This little jQuery library provides you with an intelligent way of updating relative timestamps in your documents. Smart Time Ago checks and updates every 60 seconds the relative time, within a scope which you specify at the start. It checks the newest time in your scope and tunes the checking time interval to a proper value. The tool can be used as a jQuery plugin, or – if using node – can be installed from npm.
⁹²
sortByTimeAgo.js⁹³
A little JavaScript library that takes an array of objects with TimeAgo properties and sorts them from newest to oldest.
Piecon
Piecon is a tiny JavaScript library for dynamically generating progress pie charts in your favicons. It has been tested to work in Chrome 15+, Firefox 9+ and Opera 11+.
⁹⁴
Notificon: Favicon Notifications and Alerts
Matt Williams’ Notificon is a JavaScript library for creating favicon alerts and notifications. Instead of having to create a number of favicons and serving them to the client, you can specify a label and a favicon (the default being the current favicon), and it will generate a favicon notification for you. The script currently works with Chrome 6+, Firefox 2+ and Opera, but it’s a nice little add-on for browsers that support it.
jQuery Stick ‘em: Make Content Sticky on Scroll, to a Point
A problem: some of the images in the layout are very tall, so by the time you scrolled down to the bottom of the images, you would have to scroll back up just to read the description of the images or navigation items. The solution: make the content sticky as you are scrolling. This library solves this problem.
⁹⁵
Countdown.js⁹⁶
Human descriptions for a span of time are often fuzzier than a computer naturally computes. For example, how long does “in 1 month” mean? We casually talk about four weeks, but in fact there is only one month in a year which is four weeks long. Countdown.js tackles this problem by producing an accurate and intuitive description of timespans which are consistent as time goes on.
geolib⁹⁷
A small library to provide some basic geo functions like distance calculation, conversion of decimal coordinates to sexagesimal and vice versa.
⁹⁸
Cookies⁹⁹
Cookies.js is a small client-side JavaScript library that makes managing cookies easy. It caches cookie values, making sequential reads faster, supports AMD / CommonJS loaders and is supported in Chrome, Firefox 3+, Safari 4+, Opera 10+ and Internet Explorer 6+.
firstImpression.js
firstImpression.js is a micro-library (1 Kb minified) that answers the simple question, “Has this user visited this site before?” The detection doesn’t require much logic, so the majority of the code is just a plain JavaScript port of the popular jquery.cookie¹⁰⁰ plugin.
Chirp.js: Tweets on Your Website
A lightweight templating JavaScript library that enables you to display tweets on your website. Client-side caching is available; and you can set if you’d like to show retweets and replies, too.
¹⁰¹
simpleWeather jQuery Plugin¹⁰²
A simple jQuery plugin to display the weather information for any location. The data is pulled from the public Yahoo! Weather feed via the YQL API.
zip.js
A JavaScript library to zip and unzip files. zip.js provides a low-level API for writing and reading large zip files (up to 4GB with File Writer API). Works with Chrome, Firefox, Safari 6 and (unfortunately) Internet Explorer 10+. With Safari 5 and IE9, you must disable Web Workers and use a Typed Array polyfill.
string.js¹⁰³
A library that provides extra String methods to normalize text strings and manipulate them.

Images, Maps, Graphs and Visualization Libraries

jVectorMap¹⁰⁴
jVectorMap is a jQuery plugin that renders SVG and VML vector maps in browsers ranging from the ancient Internet Explorer 6 to modern browsers. jVectorMap uses JavaScript, CSS, HTML, SVG or VML, and no Flash or any other proprietary browser plugin is required.
¹⁰⁵
Subway Map Visualization jQuery Plugin
If you often deal with government projects, university departments or any websites of sophisticated organizations, every now and again you’ll be asked to design a nice visualization that would explain the various divisions, structures and internal hierarchy of those organizations. Where do you start? Well, creating a Subway Map-alike visualization is an option worth considering.
¹⁰⁶
GMaps.js¹⁰⁷
This library allows you to easily use Google Maps in your projects. Extensive documentation or large amount of code aren’t required anymore. You might want to check out Gmap3 jQuery plugin¹⁰⁸ as well.
¹⁰⁹
Leaflet: Open-Source Interactive Maps With JavaScript¹¹⁰
A library for creating tile-based interactive maps for desktop and mobile browsers. An easy-to-use API is available, and the tool emphasizes usability, performance, flexibility and excellent browser support. The library offers a variety of map layers, including tiles, markers, pop-ups, image overlays and GeoJSON. It supports panning on both mobile and desktop browsers, double-tap zoom on mobile browsers (plus multi-touch zoom on iOS) and more. On iOS, hardware acceleration is enabled, and Leaflet has a modular structure that lets you reduce the size of the library to make it even faster. The project is open source and available for further development and forking on GitHub.
¹¹¹
SVGeezy: a JavaScript plugin for SVG fallbacks¹¹²
A JavaScript library which detects SVG images on your website and automatically “looks” for a standard image fallback for those older, less capable browsers. Created by Ben Howdle and Jack Smith.
¹¹³
Retina.js¹¹⁴
A script that checks each image on your website, when it’s loaded by a user, and replaces low-resolution image with their high-resolution equivalent, if available. It’s assumed that you use Apple’s high resolution modifier (@2x) to designate high resolution versions of images.
JustGage¹¹⁵
A JavaScript library for generating and animating gauges. Based on Raphaël library for vector drawing, it’s resolution-independent and works in all modern browsers.
¹¹⁶
arbor.js¹¹⁷
A graph visualization library for building trees with connected nodes of data. Arbor.js is essentially a layout algorithm with abstractions for graph organization and screen refresh handling.
¹¹⁸
Timeline: Generate Timelines To Visualize Data¹¹⁹
This library is supposed to pull in media from different sources. It has built-in support for pulling in data from Twitter, YouTube, Flickr, Vimeo, Google Maps and SoundCloud—and more will be included in the near future. You can easily fill in data from a Google spreadsheet, or use a more detailed method such as JSON to create your time-line. You can also host it on your website by using the Timeline jQuery plugin. The library is available on GitHub¹²⁰, or as WordPress plugin¹²¹.
¹²²
Unicon
Unicon is a Grunt.js task that makes it easy to manage icons and background images for all devices, preferring HD (retina) SVG icons but also provides fallback support for standard definition browsers, and old browsers alike. From a CSS perspective, it’s easy to use, as it generates a class referencing each icon, and doesn’t use CSS sprites.
Foresight.js
This device recognition library, gives websites the ability to gauge the users device capabilities before the image is requested from the server. Judging display resolution and network speed, it customizes the img src attribute to optimize the websites image resolution to the individual users hardware.
A Magnifying Glass With CSS3 And jQuery¹²³
This technique achieves an aesthetically pleasing visual effect. The CSS3 box-shadow and border-radius properties are used to create the magnifying glass itself, while jQuery is used to detect the cursor coordinates and mouse movements and present the larger image. And when your cursor moves off the image, the magnifying glass elegantly fades away. The included tutorial makes it very easy to learn and understand how to achieve this effect. The technique includes both a small and a large image in the markup, so optimizing the technique to load a larger image on demand might be a good idea.

Rickshaw¹²⁴
This free and open source JavaScript toolkit provides the elements which you need to create interactive graphs, such as renderers, legends, hovers and range selectors. Rickshaw is based on D3, graphs are drawn with standard SVG and styled with CSS.
¹²⁵
Flot: Plotting for jQuery¹²⁶
A JavaScript plotting library for jQuery, supports Internet Explorer 6+, Chrome, Firefox 2+, Safari 3+ and Opera 9.5+. You can use different types of graphs, use multiple axes, annotate a chart, update graphs with AJAX, provide support for zooming and interaction with the data points, use stacked charts, theresholding the data, apply pie charts and plot prerendered images.
¹²⁷
Chronoline.js
Chronoline.js is a library that allows you to create a chronology time-line out of events on a horizontal timescale. From a list of dates and events, it can generate a graphical representation of schedules, historical events, deadlines, and more.

Cubism¹²⁸
This D3 plugin helps you to visualize time series and construct better real-time dashboards, pulling data from Graphite, Cube and other sources. Cubism scales and reduces server load by pulling only the most recent values. Cubism can scale easily to hundreds of metrics updating every ten seconds. Cubism’s horizon charts allow you to see many more metrics at-a-glance space than standard area charts.
¹²⁹
Envision.js
An alternative library for creating fast, dynamic and interactive HTML5 visualizations.
¹³⁰
Data Visualization JavaScript Libraries
A growing, curated collection of data visualization JavaScript libraries that make it easier to create meaningful and beautiful data visualizations. If you haven’t one a useful data visualization library in the list above, you’ll definitely find the right one in this overview.
¹³¹

Last Click

jQuery Fundamentals¹³²
This HTML book is designed to get you comfortable working through common problems you’ll be called upon to solve using jQuery. You can read the content and try the various interactive examples. Each chapter will cover a concept and give you a chance to try example code related to the concept. Written by Rebecca Murphey and recently updated by her and the rest of the gang at Bocoup.
¹³³
JavaScript Patterns Collection
A JavaScript pattern and anti-pattern collection that covers function patterns, jQuery patterns, jQuery plugin patterns, design patterns, general patterns, literals and constructor patterns, object creation patterns, code reuse patterns, DOM and browser patterns.
¹³⁴
JavaScript Garden¹³⁵
A growing collection of documentation about the most quirky parts of the JavaScript programming language. It gives advice to avoid common mistakes and subtle bugs, as well as performance issues and bad practices, that non-expert JavaScript programmers may encounter on their endeavors into the depths of the language.

Text Manipulation Libraries

Prism²²
A lightweight and extensible syntax highlighter. There are no Prism-specific markup or class names, you can use the standard markup. Prism supports parallelism with Web workers, if available. All styling is done through CSS, with sensible class names like .comment, .string, .property etc. The overall core core size is only 1.5Kb (minified and gzipped).

²³

TOC jQuery Plugin: Generate Tables Of Contents
This library automatically generates and guides the user through a table of contents on a page. It’s customizable and is able to automatically highlight a current section of the document. The plugin is also very lightweight, can be used multiple times on a page, and even includes a smooth scrolling functionality for the correct section. The plugin is developed by Greg Allen and is currently available in beta. You might want to check out Tocify jQuery plugin as well.
²⁴
MagicNav: Generates Links for The FAQ
If you want to create a quick navigation for your FAQ page, you can use this jQuery plugin for generating navigation links dynamically from page elements.
Cutter.js
This library solves the problem when cutting content by a number of words is required but you don’t want to change the markup. It simply cuts the content to the required length, while allowing the user to see the full content again.
Trunk8²⁵
Trunk8 is a text truncation jQuery plugin that cuts off just enough text from a large block of text to prevent it from spilling over. While conventional truncation just limits the character length, this library is able to measure the content area for spill-over and chooses the text that best fits into a given space.
Relevancy.js
This library allows you to sort an array of items based on their relevancy. This script is attempting to implement basic partial matching which so far has not been successfully implemented. It assigns strings to their respective elements.

Manipulating Tables and Lists

Handsontables: Excel-Like Tables For The Web
This jQuery library allows you to use auto-expanding and auto-complete as well as add new rows and columns. It also includes a legend, scrolling (so as your table grows, it won’t take up your entire page and become unwieldy), context menus, conditional formatting and other features. You can even set it to track changes made to the table. And, all the data you enter in Handsontable can be copied and pasted to Excel, Google Spreadsheet, or LibreOffice.
²⁶
List.js²⁷
A cross-browser native JavaScript library that transforms HTML lists into flexible content that you can easily edit. It makes your list easily searchable and sortable. A template-driven concept lets you simply add and edit items.

²⁸

Create Nested Sortable Lists With jQuery²⁹
This plugin lets you create a sortable list where your users can drag and drop list items into any configuration they choose. You can set various attributes, such as the maximum number of nested levels, as well as setting custom methods (including To hierarchy, To array, and Serialize). As an alternative, there’s also the HTML5 Sortable³⁰ plugin, which uses HTML5 and jQuery for a similar functionality.
³¹
Pivot.js
With Pivot you can easily summarize large data sets on the fly. The library lets you create customizable table views from your browser. The results of pivot-table tools (which automatically sort, count, total or give the average) will be displayed as an HTML table pivoting from the input data (CSV or JSON).

Crossfilter³²
Crossfilter is a JavaScript library which supports exploring large multivariate datasets in the browser. It enables fast (<30ms) interaction with coordinated views, even with large data sets containing more than a million records. It was built to power analytics for Square Register and allows merchants to slice and dice their payment history fluidly. By using sorted indexes, the library speeds up incremental filtering and thereby increases the performance of live histograms and top-K lists.

³³

jQuery CSV to Table³⁴
This library reads in comma separated values (CSV) or tab separated values (TSV) data and generates an HTML table.
³⁵
Csonv.js
Paul Engel has released a tiny library to fetch relational CSV data client-side (JSON). When using CSV, one file represents one entity; the librarycan also nest relational data within the resulting objects as if you are joining SQL tables.
DataTables jQuery Plug-in³⁶
The library can display data from different sources, be it DOM, a JavaScript array, or a server-side file with JSON formatting. Among other features, the library provides pagination, on-the-fly filtering, and multi-column sorting with data type detection. And the features that DataTables provides can be enhanced by many freely available plug-ins: e.g. with row grouping, column filtering, column resizer, etc. The library weighs 68Kb minified, and 20Kb gzip’d. Open source, and released under GPL and BSD.
³⁷

Useful JavaScript Tools for Web Development

Yeoman³⁸
Yeoman is a set of tools and libraries that helps to scaffold new projects, automatically compiles CoffeeScript & Compass, runs yours scripts against jshint for proper language coverage and optimizes all your images. It effectively uses plugins like NodeJS, Compass, Grunt and PhantomJS and actually requires the installation of Node 0.8.x.
³⁹
Grunt.js: Task-Based Command Line Tool⁴⁰
Grunt is a task-based command line build tool for JavaScript projects. It has a dozen of predefined tasks built-in already: file concatenation, project scaffolding from a predefined template, validation with JSHint, minifcation with UglifyJS, qUnit tests, server start, running unit tests with nodeunit and running watched files.
⁴¹
Holder.js⁴²
A client-side image placeholder library to render placeholders entirely in browser. It works both online and offline, and offers a chainable API to style and create placeholders with ease. You can use Holder in different areas on different images with custom themes. Since it extends its default settings with the settings you provide, you only have to include those settings which you want changed.

⁴³

PxLoader⁴⁴
A JavaScript library that makes it easier to download images, sound files or any other file needed before taking an action on your website. The script lets you set up a preloader for HTML5 games and websites. You can monitor download status and even prioritize downloads in tagged groups.

⁴⁵

Percentage Loader⁴⁶
With this jQuery plugin the common horizontal progress bar is displayed differently. The script uses HTML5 canvas and data URI encoding (vector graphics) to allow for visually appealing and variably sizable graphics. Also, it can be used to display feedback during long-running tasks.

⁴⁷

Resumable.js
The library is designed to introduce fault-tolerance into the upload of large files through HTTP. It thus provides multiple, simultaneous and resumable uploads through the HTML5 File API. That means, losing the networks connection doesn’t require a completely new upload. Users can also manage their uploads without loss of data. However, due to the reliance on the HTML5 File API, support is currently limited to Firefox 4+ and Chrome 11+.
History.js
The library gracefully supports the HTML5 History/State APIs (pushState, replaceState, onPopState) in all browsers. Including continued support for data, titles, replaceState. Supports jQuery, MooTools and Prototype. You can modify the URL directly, without needing to use hashes.
Jurlp⁴⁸
Jurlp is a jQuery URL parser plugin for parsing, manipulating, filtering and monitoring URLs in href and src attributes within arbitrary elements, as well as creating anchor elements from URLs found in HTML or text.

⁴⁹

URI.js
To work with URLs you could use this JavaScript library, that offers a jQuery-like API. URI.js offers simple, yet powerful ways of working with query string, has a number of URI-normalization functions and converts relative/absolute paths.
Touchy.js
A JavaScript library which handles touch events without any dependencies. It’s an easy way to assign hand functionality for touchscreen devices to your website. You might want to check out Hammer.js as well.

gridster.js⁵⁰
A jQuery plugin that allows building intuitive draggable layouts from elements spanning multiple columns. You can even dynamically add and remove elements from the grid. It is on par with sliced bread, or possibly better. MIT licensed.
⁵¹
Freetile⁵²
A jQuery plugin that enables you to organize the page content in a dynamic and responsive layout. Once applied to a container element, it attempts to arrange its children in a layout that makes optimal use of screen space, by “packing” them in a tight arrangement.
⁵³
Strapdown.js⁵⁴
This tool makes it easy for you to embed a Markdown editor into your page. No server-side compilation required. The tool is cross-browser-compatible and has Github-style syntax highlighting.
⁵⁵
accessifyhtml5.js
Eric Eggert has released a practical polyfill to make HTML5 more accessible. Most modern browsers work fine with HTML5′s new semantic elements, however, they often lack the ARIA accessibility attributes that the specification demands. This small script adds those attributes to enhance accessibility of web sites.

jQuery++⁵⁶
An MIT-licensed collection of useful DOM helpers such as jQuery.cookie, jQuery.formParams, jQuery.within and special events for jQuery 1.7 that provide low-level utilities for features that jQuery doesn’t support. You can download a variety of plugins you might wish to use and disregard the rest.

⁵⁷

Hogan.js
Twitter’s templating engine that lets you precompile your templates ahead of time for vanilla JavaScript. This engine was developed with Mustache test suite compatibility and performance in mind.
Zepto.js⁵⁸
Zepto is a lightweight JavaScript library with a largely jQuery-compatible API. The main purpose of the library is to cover the most important jQuery functions yet have a relatively small modular library that loads and executes fast, with a familiar and versatile API. If you use jQuery, you already know how to use Zepto. You might want to check Mini.js⁵⁹ and CreateJS⁶⁰ as well if you are looking for simple and lightweight JavaScript libraries to perform very specific tasks.

⁶¹

CSSrefresh⁶²
A useful small script file that immediately implements changes on your browser made to your CSS-files, by surveying the CSS files in your Web page. Saved CSS-files are executed right away.

⁶³

Has.js⁶⁴
Instead of browser sniffing and feature inference, this library provides a collection of self-contained tests and a unified framework using pure feature detection for whatever library consumes it. Make sure to consider other alternatives, too.
Filepicker.io⁶⁵
An advanced solution for uploading files to the server as well as conversion, synchronization and integration of file uploads with services such as Facebook, Dropbox etc. A free plan is available.

⁶⁶

XRegExp⁶⁷
An open source MIT licensed JavaScript library, XRegExp provides augmented, extensible regular expressions. The library provides a new syntax, flags, and methods beyond what browsers support natively. Also, take a look at Matches.js, an advanced pattern matching library for JavaScript.

⁶⁸

FrameWarp⁶⁹
This library helps you to show pages on your site with a CSS-driven transition effect. It has a helper function which compares the URL of the iframe with the address of the current page. If both the domain and the protocol match, Framewarp will try to access the DOM of the iframe and add the APU methods – one for hiding it, and another one for sending a message to the parent.
Filer.js⁷⁰
Eric Bidelman released a wrapper library for the HTML5 Filesystem API. Filer.js reuses familiar UNIX commands and makes the HTML5 API more approachable for developers that have done file I/O in other languages. Repetitive operations (renaming, moving, duplicating) are easier to manage. You might want to check out DownloadBuilder.js, a library that supports concatenation of local files and uses session storage to cache Ajax/JSONP requests.

⁷¹

Client Side Caching For JavaScript⁷²
Server caching is useful for quick response times, but sometimes, especially when you are developing a Web application, you migh need to cache objects client-side rather than server-side. Maybe you need to cache something for offline use, or for reuse later. That’s where locache.js⁷³ comes in. It’s a JavaScript caching framework for client side caching in the browser using HTML5 local storage. The library has a memcache-similar API, no dependencies and is very small. And the best part: locache gracefully degrades when the browser doesn’t support local storage. So users with IE6 and IE7 will not get any errors, but as developers say, “caching attempts will be silently dropped and lookups will always appear to be a cache miss.” You can provide an expiration time for cached objects as well.
⁷⁴

Last Click

ReView.js⁷⁵
This library provides a responsive Web design viewing choice. Users can either “opt-in” or “opt-out” of responsive design states and keep the persistent view preference for each session. Developed in pure JavaScript according to the principles of core (mobile-) first progressive enhancement. You might want to check FlexiNavCalc⁷⁶ as well, a responsive navigation library that calculates navigation item widths in percentages to ensure that the navigation holds the layout until a break-point is executed.
⁷⁷
A Hotline For All Your JavaScript Problems⁷⁸
Do you feel like giving up? Nothing makes sense anymore? Your problems seem insurmountable? Wouldn’t it be great if you could talk to someone who cares and knows your woes? Why don’t you give the friendly, supporting folk at JS Hotline⁷⁹ a call when your JavaScript wisdom is at an end? Garann Means created JS Hotline as a helpline for people who are stuck with a JavaScript problem. This call-service powered by Pocket Hotline⁸⁰ promises professional help to people who need advice concerning JavaScript. They’ll talk you off the ledge when you just can’t make it work. And it won’t cost you anything but a smile.

20 All Too Common Coding Pitfalls For Beginners

noreply@blogger.com (UXAWY) — Mon, 12 Nov 2012 13:17:00 +0000

JavaScript Tips

1 - Unnecessary DOM Manipulation

The DOM is slow. Limiting your interaction with it will greatly increase your code’s performance. Consider the following (bad) code:

// anti-pattern

for (var i = 0; i < 100; i++){

   var li = $("<li>").html("This is list item #" + (i+1));

   $("#someUL").append(li);

}

This code actually modifies the DOM 100 times, and unnecessarily creates 100 jQuery objects. 100! A more correct approach would be to either use a document fragment, or build up a string that contains the 100 <li/> elements, and then appends that HTML to the containing element. That way, you jump into the DOM a total of once. Here’s an example:

var liststring = "";

for (var i = 100; i > 0; i--){

   liststring += "<li>This is list item #" + (99- i);

}

document.getElementById("someUL").innerHTML(liststring);

As noted above, with this technique, we touch the DOM only once, which is an improvement, but it also relies on string concatenation to build a large string. There’s a different way that we could approach this, using arrays.

var liststring = "<li>"

var lis = [];

for (var i = 100; i > 0; i--){

   lis.push("This is list item #" + (99- i));

}

liststring += lis.join("</li><li>") + "</li>";

document.getElementById("someUL").innerHTML(liststring);

When building large strings, storing each piece of the string as an item within an array element and calling join() is more efficient than string concatenation. This is one of the fastest and easiest ways to build repetitive HTML in JavaScript without using a template library or framework.

2 - Inconsistent Variable & Function Names in JavaScript

This next item isn’t a performance issue, but is extremely important – especially if you are working on code that other people work on, as well. Keep your identifiers (variable and function names) consistent. Consider the following variables as an example:

var foo = "bar";

var plant = "green";

var car = "red";

It wouldn’t make sense to add another variable, called Something. This introduces inconsistency in your variable naming pattern, causing your brain to cognitively flag this variable as being different or special. This is why constants in most languages are traditionally defined with all caps.
You can take this a step further by maintaining similar length, grammatical structure, and explanatory nature when naming functions. For example, consider the following contrived function:

function subtractFive(number){

   return number - 5;

}

Naming a function that adds five to a given number should follow the same pattern, shown here:

function addFive(number){

   return number + 5;

}

Sometimes, you might name a function to indicate its return value. For instance, you might name a function that returns an HTML string getTweetHTML(). You might also prepend a function’s name with do, if the function simply performs an operation and doesn’t return a value, eg: doFetchTweets().
Constructor functions typically follow the tradition of classes in other languages, capitalizing the first letter:

function Dog(color){

   this.color = color;

}

As a general rule of thumb, you should be descriptive when naming your identifiers. Classify them together with other similar identifiers by maintaining a naming pattern that is readable and offers hints to the nature of a variable or function’s purpose.

3 - Use `hasOwnProperty()` in `for...in` Loops

JavaScript’s arrays are not associative; trying to use them as such is frowned upon by the community. Objects, on the other hand, can be treated as hash tables, and you can iterate over an object’s properties by using the for...in loop, like so:

for (var prop in someObject) {

    alert(someObject[prop]); // alert's value of property

}

The problem, however, is that the for...in loop iterates over every enumerable property on the object’s prototype chain. This can be problematic if you only want to use the properties that exist on the actual object.
You can solve this issue by using the hasOwnProperty() method. Here’s an example:

for (var prop in someObject) {

    if (someObject.hasOwnProperty(prop)) {

        alert(someObject[prop]); // alert's value of property

    }

}

This version only alerts the values of the properties that directly reside on someObject.

4 - Comparing Boolean Values

Comparing boolean values in a condition is a waste of computation time. Take a look at the following for an example:

if (foo == true) {

    // do something for true

} else {

    // do something for false

}

Notice the condition: foo == true. The comparison of foo and true is unnecessary because foo is already a boolean value (or it’s a truthy or falsey one). Instead of comparing foo, simply use it as the condition, like this:

if (foo) {

    // do something for true

} else {

    // do something for false

}

To test for false, use the logical NOT operator, as shown below:

if (!foo) {

    // do something if foo is false

} else {

    // do something if foo is true

}

5 - Event Binding

Events are a complicated subject in JavaScript. Gone are the days of inline onclick event handlers (except in some very rare “splash page” cases). Instead, use event bubbling and delegation.
Let’s imagine that you have a grid of pictures that need to launch a modal lightbox window. Here’s what you shouldn’t do. Note: we’re using jQuery here, assuming you are using a similar library. If not, the same bubbling principles also apply to vanilla JavaScript.
The relevant HTML:

<div id="grid-container">

   <a href="someimage.jpg"><img src="someimage-thumb.jpg"></a>

   <a href="someimage.jpg"><img src="someimage-thumb.jpg"></a>

   <a href="someimage.jpg"><img src="someimage-thumb.jpg"></a>

   ...

</div>

The (bad) JavaScript:

$('a').on('click', function() {

   callLightbox(this);

});

This code assumes that calling the lightbox involves passing an anchor element that references the full size image. Instead of binding to each anchor element, bind to the #grid-container element instead.

$("#grid-container").on("click", "a", function(event) {

   callLightbox(event.target);

});

In this code, both this and event.target refer to the anchor element. You can use this same technique with any parent element. Just make sure to define the element that should be the event’s target.

6 - Avoid Ternary Redundancy

The overuse of ternary statements is quite common both in JavaScript and PHP.

// javascript

return foo.toString() !== "" ? true : false;

// php

return (something()) ? true : false;

A condition expression always returns a true or false value, meaning you don’t need to explicitly add true/false as ternary values. Instead, you could simply return the condition:

// javascript

return foo.toString() !== "";

// php

return something();

PHP Tips

7 - Use Ternary When Appropriate

if...else statements are a central part of most languages. But doing something simple, such as assigning a value to a variable based upon a condition – well, they can junk up your code. Consider the following code:

if ($greeting)

{

    $post->message = 'Hello';

}

else

{

    $post->message = 'Goodbye';

}

This code can be reduced to one line, while still maintaining readability by using the ternary operator, like this:

$post->message = $greeting ? 'Hello' : 'Goodbye';

It’s clear, concise, and gives you the functionality you need.

As useful as the ternary operator is, the most important guideline is not to over-use it! The goal of coding is not to cramp your logic into as few lines as possible.

8 - Throw Exceptions Instead of Inception-Style Nesting

Let’s face it: many levels of nesting is ugly and difficult to maintain/read. The following code is a relatively simplified example, but they get much worse over time:

// anti-pattern

$error_message = null;

if ($this->form_validation->run())

{

   if ($this->upload->do_upload())

   {

      $image = $this->upload->get_info();

      if ( ! $this->image->create_thumbnail($image['file_name'], 300, 150))

      {

         $error_message = 'There was an error creating the thumbnail.';

      }

   }

   else

   {

      $error_message = 'There was an error uploading the image.';

   }

}

else

{

   $error_message = $this->form_validation->error_string();

}

// Show error messages

if ($error_message !== null)

{

   $this->load->view('form', array(

      'error' => $error_message,

   ));

}

// Save the page

else

{

   $some_data['image'] = $image['file_name'];

   $this->some_model->save($some_data);

}

That’s some nasty code, but you can make it drastically cleaner by using exceptions, like so:

try

{

   if ( ! $this->form_validation->run())

   {

      throw new Exception($this->form_validation->error_string());

   }

   if ( ! $this->upload->do_upload())

   {

      throw new Exception('There was an error uploading the image.');

   }

   $image = $this->upload->get_info();

   if ( ! $this->image->create_thumbnail($image['file_name'], 300, 150))

   {

      throw new Exception('There was an error creating the thumbnail.');

   }

}

// Show error messages

catch (Exception $e)

{

   $this->load->view('form', array(

      'error' => $e->getMessage(),

   ));

   // Stop method execution with return, or use exit

   return;

}

// Got this far, must not have any trouble

$some_data['image'] = $image['file_name'];

$this->some_model->save($some_data);

It might be the same number of lines, but it allows for considerably more readable and maintainable code. It also avoids those difficult debugging sessions, where you’ve missed a possible path through the if statement. Keep it simple!

9 - `False`-Happy Methods

Being exception-happy is far more advantageous than being false-happy.

Ruby or Python developers are used to watching for trivial exceptions. While that sound tedious, it’s actually quite a good thing. If anything goes wrong, an exception is thrown, and you instantly know where the problem is.
In PHP – and especially when using older frameworks, such as CodeIgniter – you get what I refer to as “false-happy code” (as opposed to exception-happy). Instead of having an exception get all up in your face, it just returns a false value and assigns the error string to some other property. This forces you to fish it out of the class using a get_error(); method.
Being exception-happy is far more advantageous than being false-happy. If an error occurs within your code (eg: could not connect to S3 to upload an image, or a value is empty, etc.), then throw an exception. You can also throw specific types of exceptions by extending the Exception class, like so:

class CustomException extends Exception {}

Throwing a custom exception makes debugging considerably easier.

Tip 10 - Use Guard Clauses

It’s common to use if statements to control a function or method’s execution path. It’s tempting to test a condition and execute a lot of code when the condition results in true, only to simply return in the else statement. For example:

function someFunction($param) {

    if ($param == 'OK') {

       $this->doSomething();

       return true;

    } else {

       return false;

    }

}

This kind of solution, however, represents a potential for spaghetti code. You can make this code easier to read by reversing the condition. Here’s the better version:

function someFunction($param) {

    if ($param != 'OK') return false;

    $this->doSomething();

    return true;

}

Isn’t that easier to read? It’s a simple change that makes a drastic difference in the readability of your code.

Tip 11 – Use `while` for Simple Iterations

The for loop is commonly used when you need, for example, a counter. Here’s a simple for loop:

for (var i = 0; i < x; i++) {

    ...

}

There are some very good reasons to use a for loop, but a while loop may be better if you just need something simple, like this:

var i = x;

while (i--) {

    ...

}

It doesn’t work in every situation, but it is an alternative.

Tip 12 – Keep Methods Maintainable

This is easily one of the most frequent mistakes made by newcomers.

A method is an object’s unit of work, and limiting your methods to a maintainable size makes your code easier to read and maintain. Take a look at the following monster method:

class SomeClass {

   function monsterMethod() {

      if($weArePilots) {

         $this->goAndDressUp();

         $this->washYourTeeth();

         $this->cleanYourWeapon();

         $this->takeYourHelmet();

         if($this->helmetDoesNotFit())

            $this->takeAHat();

         else

            $this->installHelmet();

         $this->chekcYourKnife();

         if($this->myAirplain() == "F22")

            $this->goToArmyAirport();

         else

            $this->goToCivilianAirport();

         $this->aim();

         $this->prepare();

         $this->fire();

      }

   }

}

Consider breaking this monster method into smaller, descriptive chunks, each being responsible for performing one well-abstracted action. This is easily one of the most frequent mistakes made by newcomers.

class SomeClass {

   function monsterMethod() {

      if($weArePilots) {

         $this->prepareYourself();

         $this->tryHelmet();

         $this->findYourAirport();

         $this->fightEnemy();

      }

   }

   private function prepareYourself() {

      $this->goAndDressUp();

      $this->washYourTeeth();

      $this->cleanYourWeapon();

      $this->chekcYourKnife();

   }

   private function tryHelmet() {

      $this->takeYourHelmet();

      if($this->helmetDoesNotFit())

         $this->takeAHat();

      else

         $this->installHelmet();

   }

   private function findYourAirport() {

      if($this->myAirplain() == "F22")

         $this->goToArmyAirport();

      else

         $this->goToCivilianAirport();

   }

   private function fightEnemy() {

      $this->aim();

      $this->prepare();

      $this->fire();

   }

}

There we go: cleaner, and easier to debug!

Step 13 - Avoid Deep Nesting

Too many levels of nesting makes code difficult to read and maintain. Consider the following:

function doSomething() {

    if ($someCondition) {

        if ($someOtherCondition) {

            if ($yetSomeOtherCondition) {

                doSomethingSpecial();

            }

            doSomethingElse();

        }

    }

}

You can refer to Tip #10 to make this code easier to read by reversing some of the conditions.

function doSomething() {

    if (!$someCondition) {

        return false;

    }

    if (!$someOtherCondition) {

        return false;

    }

    if ($yetSomeOtherCondition) {

        doSomethingSpecial();

    }

    doSomethingElse();

}

This code is considerably cleaner and produces the same results as before.
When you find yourself with nested if statements, closely examine your code; your method may be performing more than one task. Here’s an example:

function someFunc() {

   if($oneThing) {

      $this->doSomething();

      if($anotherThing)

         $this->doSomethingElse();

   }

}

In these cases, extract the nested methods into their own method:

function someFunc() {

   if($oneThing) {

      $this->doSomething();

      $this->doAnotherThing($anotherThing);

   }

}

private doAnotherThing($anotherThing) {

   if($anotherThing)

      $this->doSomethingElse();

}

Tip 14 – Avoid Magic Numbers and Strings

Magic numbers and strings are evil. Define variables or constants with the values you want to use in your code.
Instead of this:

function someFunct() {

   $this->order->set(23);

   $this->order->addProduct('superComputer');

   $this->shoppingList->add('superComputer');

}

Specify what those numbers and strings mean, and assign them to a variable with a meaningful name, like this:

function someFunct() {

   $orderId = 23;

   $selectedProductName = 'superComputer';

   $this->order->set($orderId);

   $this->order->addProduct($selectedProductName);

   $this->shoppingList->add($selectedProductName);

}

While some might argue that we’re needlessly creating variables, the performance hit is negligible. Readability always takes priority. Remember: don’t optimize for performance until you can describe why it’s necessary.

Step 15 - Use Built-In Array Functions

Use the built-in array functions instead of foreach().
Not Ideal:

foreach (&$myArray as $key =>$element) {

   if ($element > 5) unset ($myArray[$key]);

}

Better:

$myArray = array_filter($myArray, function ($element) { return $element <= 5;});

PHP offers a variety of array methods. They’re confusing at first, but take a day and try to learn as many as possible.

Tip 16 - Don’t Overuse Variables

It’s easy to overuse variables, but remember that variables are stored in memory. For every variable you create, the system needs to allocate memory for that variable. Look at this code:

public function get_posts() {

   $query = $this->db->get('posts');

   $result = $query->result();

   return $result;

}

The $result variable isn’t necessary. The following code omits that variable:

public function get_posts() {

   $query = $this->db->get('posts');

   return $query->result();

}

The difference is subtle, but we were able to improve this simple example. We kept the $query variable because it relates to the database, while $result related more to our logic.

General Programming Recommendations

Tip 17 - Rely on the Database Engine

Anything less is a code smell.

A database is designed for working with data; use its tools and abilities to make your application more efficient.
For example, you can avoid redundant database queries in many circumstances. Most plug-and-play user management scripts use two queries for user registration: one to check whether the e-mail/username already exists and another to actually add it to the database. A much better approach is to set the username field to UNIQUE. You can then use native MySQL functions to check whether or not the record was added to the database.

Tip 18: Properly Name Your Variables

The days of naming your variables x, y, z are over (unless, of course, you’re dealing with a coordinate system). A variable represents an important part of your logic. Don’t want to type a long name? Get a better IDE. Modern IDEs auto-complete variable names in a blink of an eye.

Always be coding for six months from now. Are you certain that you’ll remember what that $sut variables refers to a year from now? Likely not: be descriptive. Anything less is a code smell.

Tip 19 - Methods Represent Actions

Mistakes happen; the key is to learn from them.

Name your methods with verbs representing the action they perform. The main concept is the exact opposite of the variable naming scheme. Use a short, but descriptive, name in a large scope (ie: public methods), and use a longer and more detailed name in a short scope (ie: private / protected methods). This helps make your code read like well written prose.
Also avoid any language other than English, when naming your methods. It’s annoying to read function names like 做些什麼() or делатьчтото() in your project. It may be impossible for other programmers to understand your intent. While it might seem arrogant, for better or worse, English is the adopted language of code. Try to use it, if we’re working on a large team.

Tip 20: Structure Recommendations

Finally, code structure is just as important to readability and maintainability as anything else we’ve talked about today. Here are two recommendations:

Indent with four or two space-width tabs. Anything more, such as eight spaces, is too much and will make your code difficult to read.
Set a reasonable line-width and respect it. Forty characters in a line? We’re not in the ’70s any more; set your limit to 120 characters, put a mark on the screen, and force yourself or your IDE to respect that limit. 120 characters gives you a nice width without making you scroll.

Conclusion

“I’ve never made a stupid programming mistake.” — No one, ever.

Mistakes happen; the key is to learn from them. We at Nettuts+ have made, and will continue to make, mistakes. Our hope is that you learn from our mistakes so that you can avoid them in the future. But, to be honest, the best way to learn best practices is to make the mistakes yourself!
Thanks for reading!

10 Tips for Writing for Designers

noreply@blogger.com (UXAWY) — Mon, 12 Nov 2012 13:04:00 +0000

Ever get that feeling that some members of your creative team just aren’t quite with the program? It is entirely likely. Sending out communications and messages that will reach your whole team can be somewhat tricky because of the differences in how people think.

Creatives sometimes tend to be a little more free-thinking and less-structured than some of their office counterparts. Research has shown that people who use more right brain functions, such as designers and creative thinkers, also respond to and process the same information differently than left-brain thinkers, who tend to be more organized and logic-oriented. (Some studies have even shown that the highest rates of dyslexia, which affects reading and comprehension, have been found in right-brain thinkers.) With just a few tweaks, you can more effectively get your message across to everyone.

1. Stay on Topic

Send out communications with a purpose. Determine what your message is and stick to it. Long memos or emails can be overwhelming to read when time is a concern or deadlines are approaching. Put together your message and set it aside for a while before hitting the “send” button. Come back and reread it. Edit closely. Get rid of all the extra information and keep the message on point (even if you save some information for a future memo).

2. Messages Should Have Hierarchy

Big words do seem more important. Use headlines and big words to stress important information. Structure emails and memos with two to three different font sizes to stress important points and make for easier reading. Use the largest size for the most important information and use more standard sizing for the body of the message. Be careful not to “over-design” your message. Going crazy with fonts and colors will only cause distractions.

3. Show, Rather than Tell

Provide examples of what you like and what you are looking for when detailing projects to the design group. Communication is about more than words; remember that when working with your visual thinkers. Show the idea. Send out links or attach images that help convey your message. Use visual examples in your writing to describe what you are looking for. Remind the designer of a project that you liked and how this project might use a similar (or vastly different) approach.

4. Keep it Short

Bullet points are one of the most effective ways to cover a lot of information in a digestible format. Don’t feel the need to write a manifesto; highlight necessary information and encourage feedback. Edit, edit, edit. If you can say it in 10 words, don’t use 30. Keep sentences short and to the point. Delivering too many messages at once can keep your point from being understood.

5. Watch the Jargon

In every business, there is a set of lingo that comes with the territory. But does the business lingo translate to the creative team? Avoid uncommon phrasing or too much inside talk when discussing projects or ideas. Remember members of your creative team may not have a background in your specific industry. Using common language and descriptions will help keep everyone communicating on the same page.

Business catch words such as “strategize,” “utilization” and “expedite” might work better as “plan,” “use” and “speed up.” Stay away from emoticons and casual phrasing as well. “OMG” or “LOL” in an email is likely to cause a serious round of eye rolls from the group and can take away from the seriousness of almost any message.

6. Don’t Assume Anything and Explain Specifics

Never guess that someone knows what you are talking about. When outlining or explaining new information make sure the designer has a clear idea of where you are coming from. In contract or freelance situations, explain a bit about your company, goals and market. Set a clear outline of what the project and design is supposed to accomplish. Even if a designer has done a similar project in the past, provide an overview of the client or project.

In most projects, there are some absolutes. Color and typography selections are sometimes items that can’t be changed when looking at design projects. Make sure specifics are clearly communicated. If your company’s logo is blue, for example, state the color values. You will not end up with an odd color and project rework when non-negotiables are determined in advance. In addition to being specific, be accurate and aware of grammar and context. It can only add to your credibility.

7. Write with Action

Use active words in your message. Start sentences words that engage. Consider structuring a what’s next memo as a to-do list. Tell rather than ask when it comes to things that need to get gone. Rather than “can you make that logo blue to match the company’s website?” say “Add blue to the logo so it is more on target with the design.”

8. Take a Walk

Sometimes the best written communications also need a push. Get up and pay your designer a visit and take the memo with you. Go over information together and make sure that all the details are clear. Brainstorm for a few minutes to show that you are interested in what the designer has to say. Afterward, make sure to follow up with any new instructions or changes from the initial message.

9. All Designers are Different

A print ad campaign by Mercedes-Benz exemplified differences in thinking by showcasing the differences in left- and right-brain thinkers. Keep this principle in mind as you write and remember designers tend to employ that loose, colorful, free-flowing style of comprehension and thinking.

Understand that your message can come across in a variety of ways. Keep the agenda simple and context plain and clear. Don’t try to make jokes or be funny in text; they might not cause your recipient to giggle. Just because designers may communicate in a way that is unlike accountants, don’t dumb things down. Don’t assume that because you are writing for a designer, that he or she won’t “get it;” plenty of designers are also good writers.

10. Break the Rules on Purpose

Sometimes it is OK to start a sentence with “And.” And sometimes it is an effective writing device. Breaking some of the stodgy rules of communication can make your message feel a little less like a list of directives and more like a written conversation. Every memo or email does not have to follow the business-letter model; sometimes a more casual approach is appreciated. If your message feels too formal, back up for a minute and rewrite: Write as you talk.

Conclusion

Clear communication is key when working with any different number of people, but understanding how the thought processes of designers can differ can help you deliver a clearer message. Remember that many designers and creative personality types think using a different side of the brain than more analytical thinkers and may receive written communications differently.

Work to establish a clear hierarchy in your message and think about ways to more visually deliver information. Keep messages on task and edited so that information is direct and concise. Finally, make sure to always follow up any written communication with a conversation; direct contact can always go a long way

How to Sell Your Design Idea

noreply@blogger.com (UXAWY) — Mon, 12 Nov 2012 13:04:00 +0000

Sometimes getting others to visualize your great idea is not so simple and takes some “selling” on your part. It may even take advance (or free) mock-up work to help some of the non-visual people in the room get on the same page with your idea.

Here are a few things you can do to help you get your idea on the fast-track to approval and how to really sell your design concept.

Show, Rather Than Tell

It is easy to talk about an idea, but design is a visual concept. It can also be tough to visualize someone else’s idea or concept. Do some work for the group before you present a new idea. Sketch out a rough layout or put together a mock site. Show the group what colors and fonts you are thinking of using. Make sure to really show the part of the design that is new and fresh. New concepts should be the most developed in your visual presentation.

Don’t, though, spend too much time on your “dummy” project. Remember not all of your ideas will be adopted and you don’t want to lose too many work hours on a mock-up. Put together a clean, simple mock for the presentation; you don’t need a full-blown “finished” project to share.

Know your audience. Is the group made of other visual people? Understand whether a sketch is enough to explain a concept or whether you need to develop a more tangible concept. Make sure to bring plenty of copies (or show your design on a screen) so that everyone has access to the visual presentation.

Proven Track Record

One of the best ways to gain credibility and push new ideas is to prove yourself as a designer every day. Doing quality work and having a proven track record at your company or among clients is one of the best sales tools you can have.

There is no shame in showcasing some of your most successful projects when tackling a new task. As part of your pitch presentation, spend just a few minutes discussing other projects that you developed and why they were successful. Show off a design example or two and explain why it worked.

Display confidence and loyalty. You must believe in your work for others to do the same.

Recruit

Develop positive relationships and create open lines of communication with everyone you associate with professionally. (It does not hurt to keep this in mind in your personal life as well; in the age of social media so many lines can cross unintentionally.) You are our own commodity in the design business and need to recruit other professionals who trust in your ability.

Show your sketches to trusted peers in advance and take the suggestions into account. By working in advance and collecting other opinions, others will feel like they have had an impact on the design and are more likely to buy in to a concept.

This network will help you sell your ideas as personal backers. They know you and your work. They understand your work ethic and can vouch for your creativity. A strong circle of “recruiters” can open the way for you to work with new people and land projects that you might not have had access to otherwise.

Don’t wait to network. Start building relationships even when you are not in the middle of a project. Keep your portfolio up-to-date and always mention current projects when you meet with past clients. You never know when a passing meeting could send a new project your way.

Present Options

Design is a concept-based business. There are no definite answers when presenting visuals. Sometimes the best way to sell your idea is to present multiple variations of it.

Show that your concept is flexible and that changes are easily adapted. Instead of bringing just a single sketch to a pitch meeting bring multiple options. There is no magic number, but three different design choices is a good starting point. Although the options do not have to be vastly different, make sure the changes are obvious. You want the options to look like options and not just slight tweaks to a single design.

Discuss how other changes would work with your design and promote its flexibility. How would other colors or fonts work with the concept? How would you incorporate a much larger or smaller logo? For web design projects also explain how the design will work for other applications: Will it translate to mobile or tablet design?

Accept Criticism and Suggestions

It can be hard to hear criticism about your design but understand that comes with the territory when you are working in a field without absolutes. Graciously accept constructive criticism and suggestions even if you don’t agree with what you are hearing. People generally want to work with other people who can collaborate. Combative words will not help you gain respect and trust when taking on a new project.

Accept new ideas and discuss the pros and cons as they relate to the project. Understand that the client must be happy with the final result. If suggestions are not something you can work with and implement, you must decide if they project is something that you should take on.

Patience

Finally, you might have to wait and revise and wait and revise. Very few final designs look like that first sketch. Understand that sometimes the process can take time. Be patient and work to make revisions or changes. Some projects require many layers of approval. Give the project time to get through the cycle before you give up. Make follow-up calls or send quick emails to track the project’s progress.

Be patient with other projects. Don’t try to push the design envelope with every task you are assigned. Remember the boy who cried wolf? If you cry redesign on every project, you will not be taken as seriously when you have a concept that really works. Push for something new and unique when it is called for, but also know when to hold back.

Conclusion

Having an idea for a great design is not enough. For that concept to see the light of day, you have to sell it.

Be ready to show off your concept to potential internal or external clients, present design options for review and be patient on the way to success. Remember that not every project needs to be started from scratch and you have to show solid work before you get to tackle new things. Establish strong networks and a proven track record with your work so that your design projects will be accepted for publication.

10 Things to Learn From Failure

noreply@blogger.com (UXAWY) — Mon, 12 Nov 2012 13:02:00 +0000

We’ve all had them – the dreaded unsuccessful or failed project – and we’ve all had to bounce back. From graphics busts to web disasters, some good can come from projects you’d rather forget. Even big companies, such as Gap with a logo change and subsequent reversal in early 2011, have had to deal with design snafus.
Start the recovery process by taking a minute to figure out what went wrong and then make a resolution to gain something from the process. Learn how to improve yourself, your team and your next project. Although you should not dwell on it too long, here are 10 things you can learn from failed projects.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

1. Accept Credit and Criticism

It is usually easy to take credit for projects that turn out as planned but a little tougher to accept the critical comments that come with failure. How you handle these conversations will build the framework for your next project with the same client. Smile and accept criticism with the same poise you would handle credit.
If a project fails, ask for feedback. Understanding what did not work and why can help you develop as a designer and improve your skills for the next project.

2. Determine What Went Wrong

Make a short list of both things that worked and those that did not over the course of a project. Can you pinpoint where things went wrong? Was the timeline too short? Were the parameters or client’s wishes unclear?
Sometimes there is no clear answer here and you just have to move on. Further, design can be very much a matter of taste and sometimes a designer and client fail to get on the same page with a project. You could consider the project some of your best work while it does not meet the client’s needs at all.

3. Communication is Key

Start each project by building a relationship with everyone involved. Make sure to keep communication channels open so that all ideas are discussed and understood among everyone working on the project. Make your clients know your work style and have seen some of your previous projects before you get started. Discuss both parties’ needs and make sure your styles gel before you start a project.
Often when projects don’t come together, you can track some of the issue back to lack of understanding and communication. Think about how information was communicated during each phase of an unsuccessful project: Were all the details clearly stated?
Use all the tools at your disposal – email, visuals and make sure to get away from your desk and talk to clients face-to-face. Show them how the project is coming along before you get to the final product.

4. The Client is Always Right

Projects-for-pay are not about your ego. To ensure success, you must build/design what is wanted by someone else. You may have the better eye for what looks best, but you can’t always be right. You can explain why something works but in the end, concede to the client’s wishes.

5. Revise, Revise, Revise

Like Rome, good design is not built in a day. Rarely does your first sketch look like a finished project. Continue working and evaluating. Many times failed projects end up falling apart because of time constraints, tight or missed deadlines and the lack of revision that results from the two.
Provide clients with multiple options for a project design. Working up only one idea will put you in a like it or leave it situation; you are likely to find more success with several plans.
Look at the subtle, but noticeable, differences in versions of the Blake Allen Design website. Items such as logo and branding are static (in design but not size) while things such as use of color vary. The site also changed from more of a minimalist theme with lots of open spaces to a more filled, symmetrical layout.

6. Manage Your Time

Time management is one of the most important skills you will develop. Think of it this way. You just finished a project you loved and the client loved but you spent three times the allotted schedule on it. As a freelancer, you would have failed because you spent a disproportionate time-to-fee ratio. In other words, you aren’t making money on the project.
Look at how you spent your hours. Track your time by logging what you are doing and how long it takes. What you may discover is that you are underestimating your time to complete a project of that you got distracted by other things while working – Facebook, email and Twitter are common culprits. Use this information to replan your work habits.

7. Beat Deadlines

Finish early. Give clients a preview of what you are working on. Plan some time in for additional changes.
By beating deadlines, you can eliminate the element of surprise that comes with turning in an unseen project at the last minute. You are giving yourself more leeway to retool certain elements, such as colors, fonts or even overall makeup. Revise, revise, revise (see No. 5).

8. Research More

Part of your design work isn’t really design at all. Did you fully understand your project before drawing out the first sketches? Did you grasp what the client envisioned?
Do your homework. Read about your client. Look at their past published design projects. What were the themes, color schemes and font selections? Did the client like the result or do they want a dramatic change? Find out why. Understanding where they have been with their look can help you understand what direction is sought during your project.

9. Push the Limits

People and businesses can get comfortable in what they know. The same is true for designers. It is likely that your work has a signature item – a look, a color or an effect. Push yourself to try something new.
But also do the same for the client. They chose you to do the work for a reason. Work with the client to help them also select a visual that is a little more edgy than they are used to. Create visuals that are not replicas of past projects while maintaining consistent elements that identify branding and identity.
Calculated design risks can pay off but they are also called risks for a reason. Understand the potential benefits and costs from the start. Pushing a client too far can result in a damaged or even broken relationship. Pushing each others’ limits should be a collaborative process. But don’t be pushy with an idea that you are unwilling to change or develop further.

10. Try Again

Sometimes we just fail. The reasons may be many, or few or unknown. Accept it. Move on.
Salvage what you can for the next project. Sometimes you create something that gets thrown out in the revision process (or altogether in some cases) and it would have a great use elsewhere. Did you develop a great color palette or set of style sheets for a website? File those items away for use later. There is no point in starting from scratch again when you have some of the parts right there that might work in your next project.

Conclusion

Don’t get too discouraged when a project does not work out. Failure is a part of everything and no matter how many successes you have, at some point you will encounter face dealing with an unsuccessful design project.
Try to take lessons away that will make your next project more successful. Getting feedback and setting aside a little time for personal and design evaluation can help you with the next project. Don’t argue or dwell on mistakes or matters of taste. Focus on the things you can change and do better the next time around.
How do you deal with failure? Share your tips for learning from it with us.

Interesting Trends in UI Design

noreply@blogger.com (UXAWY) — Mon, 12 Nov 2012 13:02:00 +0000

I’m always on the lookout for new design trends. It’s fascinating to me how certain ideas get picked up by so many designers and implemented in countless different ways.
Today we’re going to specifically explore the world of user interface design and see if we can spot any currently popular trends. Almost more than any other area of design, interfaces are extremely subject to the ever changing whims of designers and if you’re not in the loop, you could find yourself creating UI that feels outdated. Read on to see what’s trending!

Are Trends Good Or Bad?

People typically read trends posts in one of two ways: as a list of examples of things to try or as a list of clichés to avoid. Which is the correct way? If something is a trend, does that mean it’s good or bad?
My answer is that trends in general are fairly neutral. They’re not necessarily intrinsically good or bad, they simply represent what lots of people think is cool at the moment. That being said, trends often reach the point where they’re so overused that they leave a bad taste in your mouth.
For this reason, I always recommend that every designer constantly look around and take note of what’s currently popular in design. Being familiar with these constructs will make it easier to do your job, whether you’re looking to fit in with the crowd or do something completely unique (you have to know what isn’t unique to create something that is).
With that in mind, let’s check out those trends!

iOS Inspired Everything

It’s difficult to say that Apple’s iOS platform “owns” a certain aesthetic, but generally the hard working developers behind the great iPhone and iPad apps we all know and love have carved out a pretty specific visual style, perhaps led by Apple, or perhaps Apple is following the third party guys.
Regardless, from rethought widescreen multi-column layouts to what some have deemed an overly skeuomorphic aesthetic, you can typically identify an iOS interface when you see one. At least that’s how it used to be. With Lion and the upcoming Mountain Lion, Apple has been integrating similar visual ideas into OS X, and they’re certainly not the only ones jumping on the idea of bringing this style to desktop UI design.

The gorgeous Dribbble shot from Robert van Klinken above is a perfect example. Given the design of the buttons and the use of stitching, I would swear this was an iPad app. However, it’s actually a design for a web-based productivity app for desktop computers.
Even if we take a step back from the faux realism style, there are plenty of other examples of Apple-inspired web application UIs. The shot below from Pontus Johansson is similar to the increasingly subtle gradients in Finder windows and app chromes from OS X.

Wooden Backgrounds

This one is by no means new, Garage Band showcased a sort of wooden texture ages ago and I’m sure there are plenty of other examples before that. However, this trend is definitely at the height of its popularity. In fact, it’s probably the closest thing 2012 has to the overused glossy web 2.0 look from a few years ago.

Designers: Ix Techau, Pontus Johansson, Pavel Maček, Levi Wintering, and Max Schwartz.
The long and short of it: wood is the UI texture of choice at the moment (though linen/canvas textures are also extremely popular). You’ll see it in iOS apps, Mac apps, web apps, Android apps; everywhere. One of the things feeding this tendency is the widespread availability of really fantastic and free textures.
Much of this started with a Matthew Skiles shot that was uploaded to Dribbble way back in July of 2010. It was beautiful, detailed and free to use in any project without attribution.

The result was quite a few apps picking this up for their interfaces, which led to others releasing similar free textures and those being picked up by interface designers, and the cycle is still continuing two years later! Do I think this trend is overused? You bet. Have I jumped on board myself? Of course!

Retro Interfaces

All the trends that we’ve pointed out so far seem to be taking the “realism” perspective of making software interfaces feel like real world physical interfaces. Within this tendency, there are sever sub-niches as well, the most drooled over of which tends to be anything retro.

Designers: Callum Chapman, Mike | Creative Mints, Gökhan Kurt, and Gianluca Divisi
Designers absolutely love rebuilding the devices from decades past using pixels. There are definitely ups and downs within this area of UI. Some of the interfaces end up feeling rushed and clunky, with the retro aspect being more of an annoying hindrance than something that actually furthers the experience.
That being said, some retro interfaces are flat out delightful to use. Here the retro component is the key aspect to the enjoyable nature of the application. For instance, in the Mac app “Instant“, you drag your photos to an old Polaroid camera, which then spits out the photo while you wait for it to “develop” just like in the old days. It’s not ideal for normal photo processing but for making retro Polaroid shots, it’s super fun.

Notification Boxes

I’m always fascinated when a basic shape suddenly takes off and becomes popular. In a post from last year, we looked at how ribbon shapes were taking over the web. These days, I’m seeing tons and tons of this shape, which I’ll refer to as a notification box for lack of a better term.

As you can see, it’s basically just a box with a triangle popping out of it. The triangle helps tie the contents of the box to a form, button or other piece of content and can be located on any edge of the box. Don’t believe me that this shape is suddenly super popular? Here are a few examples that I found in about two minutes of searching.

Designers: Morgan Allan Knutson , Jason Wu , Justalab and Mikael Eidenberg
I can’t seem to locate it now, but I even saw an little web app the other day that allows users to customize and generate this shape in pure HTML and CSS. It’s funny how little things like this catch on and suddenly you see them everywhere.
Update: The aforementioned site is CSSArrowPlease. Thanks to commenter Jack for pointing this out!

Snow White UI

The “minimal” movement is alive and well in the UI world, with many designers taking the route of going almost completely colorless and instead opting for a completely light gray or white color scheme.

Designers: Matt Gentile, Daryl Ginn, Morgan Allan Knutson, Norm
As you can see in the examples above, buttons and form elements are prime territory for this trend. Subtle gradients, single pixel outlines and shadows that are often inset define the aesthetic. The result is a very light, airy experience that feels fairly formal.
It’s also interesting to note the ever increasing popularity of UI kits. I’m not sure who the first person was to toss a bunch of UI elements into a free download, but the idea has certainly caught on and continues to be a favorite of freebie finders everywhere.

What Trends Have You Seen In UI Design?

This collection is a completely random scattering of ideas that I’ve been seeing a lot lately. I’m sure I’ve missed a ton of other popular trends that UI designers are jumping onto and I’d love to hear your feedback.
What types of design have you been seeing a lot of recently? Do you also find that the minimalism of a few years ago (e.g., Google) has led to a dramatic response of realistic interfaces like those coming from the Apple iOS/OS X camp? Leave a comment and let us know!

The Freelancer’s Secret to Learning Any New Skill

noreply@blogger.com (UXAWY) — Mon, 12 Nov 2012 13:01:00 +0000

As a designer, developer and all around creative person, there are some skills that likely came very naturally to you. The learning experience just sucked you in and you enjoyed yourself enough that you picked up this new talent in an impressively brief timespan.
Other skills however, prove to be more difficult. Sometimes you can feel like your brain is simply full and that there’s no more room for this old dog to learn a new trick. How do you overcome this mental block and force yourself to learn that new skill you’ve been wanting to pick up? There’s a secret that many freelancers know well that is a sure fire way to learn almost anything new in your given field. Read on to see what it is!

The Problem

Let’s say you’re a great designer and have some impressive HTML/CSS chops, but can’t write a line of JavaScript to save your life. “No problem” you think, “I learned all of that other stuff, I can do this!”
So you fire up Lynda.com, start watching some video tutorials, and then remember that you should definitely tweet about how great Lynda is for learning new stuff, which leads to a solid hour of messing around on Twitter because, let’s face it, those videos had you bored out of your mind.
No matter, what you really need is a book. A good old paper and ink lesson doesn’t have all the distractions of your computer. So you head to Amazon, buy the best manual you can find, then take a break for a few days while you wait for it to arrive. When it does arrive, you block out a few hours, find a nice comfy chair in a quiet spot, crack open the book, then awake an hour later to find your face cemented to the pages with drool.
What’s the matter with you? Have you suddenly become educationally incompetent? Why was learning so easy at the start of your career and so difficult now? Should you keep searching for alternative learning techniques or does the problem lie elsewhere?

But I’m Normally So Productive!

For me, and I’m sure a ton of others, the problem in situations like these turned out not to be so much the method of education as the circumstances surrounding the education.
I’m a workaholic who juggles at least three jobs at any given time, often several more. At work, I strive on stress and leverage my psychological need to meet deadlines at all costs to stay productive. If we remove that stress from the equation, I’m not really the same person.
When I’m casually attempting to learn something in my free time, I don’t feel pressured to produce. Consequently, I’m prone to distraction, procrastination, and all other manner of avoidance that leads to my ultimate frustration at my inability to pick up a new skill. This effect is exponentially worsened by all of that work-related stress, which leads me to drop the education attempt in favor of simply using my free time to work more.

Necessity Is The Mother of Education

I recently had a revelation regarding my ideal environment for learning. It all started with a job offer. Someone approached me and asked me to take on a huge project that involved producing over a dozen professional quality videos.
Let’s be clear, I’m a designer and a photographer, but I’m definitely not a video guy. I’ve always been fascinated by the lure of video, but have never really had the time to jump in and master the art. In fact, I had never really done any video work at all, even on a personal, home movie level. I know there’s a “record” button on my beloved 5D Mark II, but I had never used it.
The time requirements for this project were beyond what I could really commit to, the deadline was sooner than I wanted it to be and the requisite skills were way out of my ballpark. I literally had no idea how I would deliver what they were asking me to produce. My answer: “Sure! I’d love to!”

The Missing Ingredient

Right away I found that I was in over my head. I quickly realized that I needed more equipment than a camera (microphones, backdrops, lights, etc.), and that getting the setup that I wanted would be costly, time consuming and frustrating. I also realized that I didn’t possess the software necessary for such a feat, nor did I have any experience with any video editing software. In short, I was screwed. My stress indicators lit up like a Christmas tree.
And there it was. My secret serum for education was finally present. Faced with the fact that I had promised to deliver a product, I realized that I had given myself no out, no room for slacking off or getting distracted. The situation I had created was strictly sink or swim. I was staking my reputation with some important people on this project so I took the only available course of action that I could see: I worked my butt off.
I did a ton of research, decided on some equipment, created a project outline, filmed what I needed to film and spent ages on an outdated Mac that’s horrible for video, chopping it all up and piecing it together in between spinning beach balls and progress bars. Eventually, I had my first video. The process was brutal, but I had done it. The fruits of my labor were clear as day. That little victory was so incredibly encouraging that I pressed on. Video two was even easier! After that, I really hit my stride and things became much smoother.

The Secret To Learning Anything

The moral of this story is clear: if I want to learn something, the best way for me to do it is to get a job doing it. Looking back over my career, I could suddenly see that literally all of my notable skills had evolved along similar lines.
I landed an amazing print design gig at the age of 18, despite the fact that I didn’t know how design worked in the least. I had to learn, and quick, so I did. Similarly, I wasn’t able to make the jump to web design and coding until I landed a job that required me to pick it up. Photography was the same, I knew how to take a picture but didn’t really understand my camera on a deep level or learn about professional post-processing workflows until a friend asked me to help him shoot a few weddings.
I would wager that I’m not the only one who tends to learn under duress better than in a casual, no-stress environment. Even formal education applies these constructs through homework with tight deadlines and difficult testing procedures. In college I pulled a 4.0 not because I was particularly smart, but because I felt pressured to do get my work done to the best of my ability.

Find a Gig That Challenges You

My message here is simple: if you want to learn something new, find someone who will pay you to do it and commit to a deadline. Nothing will push you to greatness quite like the fear of failure and embarassment.
It’s probably one of the more intense methods of self-forced learning that you can find, but you’ll find that once you pull it off, you’ll have an immense amount of pride in what you were able to produce, not to mention an awesome new bullet point for the skills section of your resume!

Results May Very

I fully realize that it’s not possible to paint every creative on the planet with such a broad stroke. There are no doubt plenty of people out there who fold up like origami under stress and are more prone to miss the deadline and/or drop the project than complete it.
Though I question your choice of profession if this describes you, I do think you can be helped by my story as well. Focus on the part where I examined the situations from my past where I was able to pick up a new skill and looked for a common thread. Perform this analysis on your own skill set. The circumstances that successfully worked for you in the past will likely work again, you just have to manufacture a similar situation. Your goal is merely to find your particular learning style and exploit it. Mine is a crazy kamikaze death dive where I pull out at the last second and somehow walk away unscathed and better for the experience, yours might be something much more relaxed and stress-free. Though I do recommend that you give my way a shot at least once, because it really is quite effective.

How Do You Learn Best?

There you have it, I have single handedly broken down the wall standing between you and expanding your collection of professional skills. You’re welcome.
On a serious note, I’d love to hear what you think about all this. Do you find that the best way to learn a new skill is to take on a job that requires it? Why or why not?

The 30 CSS Selectors you Must Memorize

noreply@blogger.com (UXAWY) — Mon, 12 Nov 2012 13:00:00 +0000

view plain copy to clipboard print ?

* {
margin: 0;
padding: 0;
}

* {
 margin: 0;
 padding: 0;
}

Let’s knock the obvious ones out, for the beginners, before we move onto the more advanced selectors.
The star symbol will target every single element on the page. Many developers will use this trick to zero out the margins and padding. While this is certainly fine for quick tests, I’d advise you to never use this in production code. It adds too much weight on the browser, and is unnecessary.
The * can also be used with child selectors.

view plain copy to clipboard print ?

#container * {
border: 1px solid black;
}

#container * {
 border: 1px solid black;
}

This will target every single element that is a child of the #container div. Again, try not to use this technique very much, if ever.

View Demo

Compatibility

IE6+
Firefox
Chrome
Safari
Opera

2. #X

view plain copy to clipboard print ?

#container {
width: 960px;
margin: auto;
}

#container {
   width: 960px;
   margin: auto;
}

Prefixing the hash symbol to a selector allows us to target by id. This is easily the most common usage, however be cautious when using id selectors.

Ask yourself: do I absolutely need to apply an id to this element in order to target it?

id selectors are rigid and don’t allow for reuse. If possible, first try to use a tag name, one of the new HTML5 elements, or even a pseudo-class.

View Demo

Compatibility

IE6+
Firefox
Chrome
Safari
Opera

3. .X

view plain copy to clipboard print ?

.error {
color: red;
}

.error {
  color: red;
}

This is a class selector. The difference between ids and classes is that, with the latter, you can target multiple elements. Use classes when you want your styling to apply to a group of elements. Alternatively, use ids to find a needle-in-a-haystack, and style only that specific element.

View Demo

Compatibility

IE6+
Firefox
Chrome
Safari
Opera

4. X Y

view plain copy to clipboard print ?

li a {
text-decoration: none;
}

li a {
  text-decoration: none;
}

The next most comment selector is the descendant selector. When you need to be more specific with your selectors, you use these. For example, what if, rather than targeting all anchor tags, you only need to target the anchors which are within an unordered list? This is specifically when you’d use a descendant selector.

Pro-tip – If your selector looks like X Y Z A B.error, you’re doing it wrong. Always ask yourself if it’s absolutely necessary to apply all of that weight.

View Demo

Compatibility

IE6+
Firefox
Chrome
Safari
Opera

5. X

view plain copy to clipboard print ?

a { color: red; }
ul { margin-left: 0; }

a { color: red; }
ul { margin-left: 0; }

What if you want to target all elements on a page, according to their type, rather than an id or classname? Keep it simple, and use a type selector. If you need to target all unordered lists, use ul {}.

View Demo

Compatibility

IE6+
Firefox
Chrome
Safari
Opera

6. X:visited and X:link

view plain copy to clipboard print ?

a:link { color: red; }
a:visted { color: purple; }

a:link { color: red; }
a:visted { color: purple; }

We use the :link pseudo-class to target all anchors tags which have yet to be clicked on.
Alternatively, we also have the :visited pseudo class, which, as you’d expected, allows us to apply specific styling to only the anchor tags on the page which have been clicked on, or visited.

View Demo

Compatibility

IE7+
Firefox
Chrome
Safari
Opera

7. X + Y

view plain copy to clipboard print ?

ul + p {
color: red;
}

ul + p {
   color: red;
}

This is referred to as an adjacent selector. It will select only the element that is immediately preceded by the former element. In this case, only the first paragraph after each ul will have red text.

View Demo

Compatibility

IE7+
Firefox
Chrome
Safari
Opera

8. X > Y

view plain copy to clipboard print ?

div#container > ul {
border: 1px solid black;
}

div#container > ul {
  border: 1px solid black;
}

The difference between the standard X Y and X > Y is that the latter will only select direct children. For example, consider the following markup.

view plain copy to clipboard print ?

<div id="container">
<ul>
<li> List Item
<ul>
<li> Child </li>
</ul>
</li>
<li> List Item </li>
<li> List Item </li>
<li> List Item </li>
</ul>
</div>

   <div id="container">
      <ul>
         <li> List Item
           <ul>
              <li> Child </li>
           </ul>
         </li>
         <li> List Item </li>
         <li> List Item </li>
         <li> List Item </li>
      </ul>
   </div>

A selector of #container > ul will only target the uls which are direct children of the div with an id of container. It will not target, for instance, the ul that is a child of the first li.
For this reason, there are performance benefits in using the child combinator. In fact, it’s recommended particularly when working with JavaScript-based CSS selector engines.

View Demo

Compatibility

IE7+
Firefox
Chrome
Safari
Opera

9. X ~ Y

view plain copy to clipboard print ?

ul ~ p {
color: red;
}

ul ~ p {
   color: red;
}

This sibling combinator is similar to X + Y, however, it’s less strict. While an adjacent selector (ul + p) will only select the first element that is immediately preceded by the former selector, this one is more generalized. It will select, referring to our example above, any p elements, as long as they follow a ul.

View Demo

Compatibility

IE7+
Firefox
Chrome
Safari
Opera

10. X[title]

view plain copy to clipboard print ?

a[title] {
color: green;
}

a[title] {
   color: green;
}

Referred to as an attributes selector, in our example above, this will only select the anchor tags that have a title attribute. Anchor tags which do not will not receive this particular styling. But, what if you need to be more specific? Well…

View Demo

Compatibility

IE7+
Firefox
Chrome
Safari
Opera

11. X[href="foo"]

view plain copy to clipboard print ?

a[href="http://net.tutsplus.com"] {
color: #1f6053; /* nettuts green */
}

a[href="http://net.tutsplus.com"] {
  color: #1f6053; /* nettuts green */
}

The snippet above will style all anchor tags which link to http://net.tutsplus.com; they’ll receive our branded green color. All other anchor tags will remain unaffected.

Note that we’re wrapping the value in quotes. Remember to also do this when using a JavaScript CSS selector engine. When possible, always use CSS3 selectors over unofficial methods.

This works well, though, it’s a bit rigid. What if the link does indeed direct to Nettuts+, but, maybe, the path is nettuts.com rather than the full url? In those cases we can use a bit of the regular expressions syntax.

View Demo

Compatibility

IE7+
Firefox
Chrome
Safari
Opera

12. X[href*="nettuts"]

view plain copy to clipboard print ?

a[href*="tuts"] {
color: #1f6053; /* nettuts green */
}

a[href*="tuts"] {
  color: #1f6053; /* nettuts green */
}

There we go; that’s what we need. The star designates that the proceeding value must appear somewhere in the attribute’s value. That way, this covers nettuts.com, net.tutsplus.com, and even tutsplus.com.
Keep in mind that this is a broad statement. What if the anchor tag linked to some non-Envato site with the string tuts in the url? When you need to be more specific, use ^ and &, to reference the beginning and end of a string, respectively.

View Demo

Compatibility

IE7+
Firefox
Chrome
Safari
Opera

13. X[href^="http"]

view plain copy to clipboard print ?

a[href^="http"] {
background: url(path/to/external/icon.png) no-repeat;
padding-left: 10px;
}

a[href^="http"] {
   background: url(path/to/external/icon.png) no-repeat;
   padding-left: 10px;
}

Ever wonder how some websites are able to display a little icon next to the links which are external? I’m sure you’ve seen these before; they’re nice reminders that the link will direct you to an entirely different website.
This is a cinch with the carat symbol. It’s most commonly used in regular expressions to designate the beginning of a string. If we want to target all anchor tags that have a href which begins with http, we could use a selector similar to the snippet shown above.

Notice that we’re not searching for http://; that’s unnecessary, and doesn’t account for the urls that begin with https://.

Now, what if we wanted to instead style all anchors which link to, say, a photo? In those cases, let’s search for the end of the string.

View Demo

Compatibility

IE7+
Firefox
Chrome
Safari
Opera

14. X[href$=".jpg"]

view plain copy to clipboard print ?

a[href$=".jpg"] {
color: red;
}

a[href$=".jpg"] {
   color: red;
}

Again, we use a regular expressions symbol, $, to refer to the end of a string. In this case, we’re searching for all anchors which link to an image — or at least a url that ends with .jpg. Keep in mind that this certainly won’t work for gifs and pngs.

View Demo

Compatibility

IE7+
Firefox
Chrome
Safari
Opera

15. X[data-*="foo"]

view plain copy to clipboard print ?

a[data-filetype="image"] {
color: red;
}

a[data-filetype="image"] {
   color: red;
}

Refer back to number eight; how do we compensate for all of the various image types: png, jpeg,jpg, gif? Well, we could create multiple selectors, such as:

view plain copy to clipboard print ?

a[href$=".jpg"],
a[href$=".jpeg"],
a[href$=".png"],
a[href$=".gif"] {
color: red;
}

a[href$=".jpg"],
a[href$=".jpeg"],
a[href$=".png"],
a[href$=".gif"] {
   color: red;
}

But, that’s a pain in the butt, and is inefficient. Another possible solution is to use custom attributes. What if we added our own data-filetype attribute to each anchor that links to an image?

view plain copy to clipboard print ?

<a href="path/to/image.jpg" data-filetype="image"> Image Link </a>

<a href="path/to/image.jpg" data-filetype="image"> Image Link </a>

Then, with that hook in place, we can use a standard attributes selector to target only those anchors.

view plain copy to clipboard print ?

a[data-filetype="image"] {
color: red;
}

a[data-filetype="image"] {
   color: red;
}

View Demo

Compatibility

IE7+
Firefox
Chrome
Safari
Opera

16. X[foo~="bar"]

view plain copy to clipboard print ?

a[data-info~="external"] {
color: red;
}
a[data-info~="image"] {
border: 1px solid black;
}

 a[data-info~="external"] {
   color: red;
}
a[data-info~="image"] {
   border: 1px solid black;
}

Here’s a special one that’ll impress your friends. Not too many people know about this trick. The tilda (~) symbol allows us to target an attribute which has a spaced-separated list of values.
Going along with our custom attribute from number fifteen, above, we could create a data-info attribute, which can receive a space-separated list of anything we need to make note of. In this case, we’ll make note of external links and links to images — just for the example.

view plain copy to clipboard print ?

"<a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a>

"<a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a>

With that markup in place, now we can target any tags that have either of those values, by using the ~ attributes selector trick.

view plain copy to clipboard print ?

/* Target data-info attr that contains the value "external" */
a[data-info~="external"] {
color: red;
}
/* And which contain the value "image" */
a[data-info~="image"] {
border: 1px solid black;
}

/* Target data-info attr that contains the value "external" */
a[data-info~="external"] {
   color: red;
}
/* And which contain the value "image" */
a[data-info~="image"] {
  border: 1px solid black;
}

Pretty nifty, ay?

View Demo

Compatibility

IE7+
Firefox
Chrome
Safari
Opera

17. X:checked

view plain copy to clipboard print ?

input[type=radio]:checked {
border: 1px solid black;
}

input[type=radio]:checked {
   border: 1px solid black;
}

This pseudo class will only target a user interface element that has been checked - like a radio button, or checkbox. It's as simple as that.

View Demo

Compatibility

IE9+
Firefox
Chrome
Safari
Opera

18. X:after

The before and after pseudo classes kick butt. Every day, it seems, people are finding new and creative ways to use them effectively. They simply generate content around the selected element.
Many were first introduced to these classes when they encountered the clear-fix hack.

view plain copy to clipboard print ?

.clearfix:after {
content: "";
display: block;
clear: both;
visibility: hidden;
font-size: 0;
height: 0;
}
.clearfix {
*display: inline-block;
_height: 1%;
}

.clearfix:after {
    content: "";
    display: block;
    clear: both;
    visibility: hidden;
    font-size: 0;
    height: 0;
    }
.clearfix {
   *display: inline-block;
   _height: 1%;
}

This hack uses the :after pseudo class to append a space after the element, and then clear it. It's an excellent trick to have in your tool bag, particularly in the cases when the overflow: hidden; method isn't possible.
For another creative use of this, refer to my quick tip on creating shadows.

According to the CSS3 Selectors specification, you should technically use the pseudo element syntax of two colons ::. However, to remain compatible, the user-agent will accept a single colon usage as well. In fact, at this point, it's smarter to use the single-colon version in your projects.

Compatibility

IE8+
Firefox
Chrome
Safari
Opera

19. X:hover

view plain copy to clipboard print ?

div:hover {
background: #e3e3e3;
}

div:hover {
  background: #e3e3e3;
}

Oh come on. You know this one. The official term for this is user action pseudo class. It sounds confusing, but it really isn't. Want to apply specific styling when a user hovers over an element? This will get the job done!

Keep in mind that older version of Internet Explorer don't respond when the :hover pseudo class is applied to anything other than an anchor tag.

You'll most often use this selector when applying, for example, a border-bottom to anchor tags, when hovered over.

view plain copy to clipboard print ?

a:hover {
border-bottom: 1px solid black;
}

a:hover {
 border-bottom: 1px solid black;
}

Pro-tip - border-bottom: 1px solid black; looks better than text-decoration: underline;.

Compatibility

IE6+ (In IE6, :hover must be applied to an anchor element)
Firefox
Chrome
Safari
Opera

20. X:not(selector)

view plain copy to clipboard print ?

div:not(#container) {
color: blue;
}

div:not(#container) {
   color: blue;
}

The negation pseudo class is particularly helpful. Let's say I want to select all divs, except for the one which has an id of container. The snippet above will handle that task perfectly.
Or, if I wanted to select every single element (not advised) except for paragraph tags, we could do:

view plain copy to clipboard print ?

*:not(p) {
color: green;
}

*:not(p) {
  color: green;
}

View Demo

Compatibility

IE9+
Firefox
Chrome
Safari
Opera

21. X::pseudoElement

view plain copy to clipboard print ?

p::first-line {
font-weight: bold;
font-size: 1.2em;
}

p::first-line {
   font-weight: bold;
   font-size: 1.2em;
}

We can use pseudo elements (designated by ::) to style fragments of an element, such as the first line, or the first letter. Keep in mind that these must be applied to block level elements in order to take effect.

A pseudo-element is composed of two colons: ::

Target the First Letter of a Paragraph

view plain copy to clipboard print ?

p::first-letter {
float: left;
font-size: 2em;
font-weight: bold;
font-family: cursive;
padding-right: 2px;
}

p::first-letter {
   float: left;
   font-size: 2em;
   font-weight: bold;
   font-family: cursive;
   padding-right: 2px;
}

This snippet is an abstraction that will find all paragraphs on the page, and then sub-target only the first letter of that element.
This is most often used to create newspaper-like styling for the first-letter of an article.

Target the First Line of a Paragraph

view plain copy to clipboard print ?

p::first-line {
font-weight: bold;
font-size: 1.2em;
}

p::first-line {
   font-weight: bold;
   font-size: 1.2em;
}

Similarly, the ::first-line pseudo element will, as expected, style the first line of the element only.

"For compatibility with existing style sheets, user agents must also accept the previous one-colon notation for pseudo-elements introduced in CSS levels 1 and 2 (namely, :first-line, :first-letter, :before and :after). This compatibility is not allowed for the new pseudo-elements introduced in this specification." - Source

View Demo

Compatibility

IE6+
Firefox
Chrome
Safari
Opera

22. X:nth-child(n)

view plain copy to clipboard print ?

li:nth-child(3) {
color: red;
}

li:nth-child(3) {
   color: red;
}

Remember the days when we had no way to target specific elements in a stack? The nth-child pseudo class solves that!
Please note that nth-child accepts an integer as a parameter, however, this is not zero-based. If you wish to target the second list item, use li:nth-child(2).
We can even use this to select a variable set of children. For example, we could do li:nth-child(4n) to select every fourth list item.

View Demo

Compatibility

IE9+
Firefox 3.5+
Chrome
Safari

23. X:nth-last-child(n)

view plain copy to clipboard print ?

li:nth-last-child(2) {
color: red;
}

li:nth-last-child(2) {
   color: red;
}

What if you had a huge list of items in a ul, and only needed to access, say, the third to the last item? Rather than doing li:nth-child(397), you could instead use the nth-last-child pseudo class.
This technique works almost identically from number sixteen above, however, the difference is that it begins at the end of the collection, and works its way back.

View Demo

Compatibility

IE9+
Firefox 3.5+
Chrome
Safari
Opera

24. X:nth-of-type(n)

view plain copy to clipboard print ?

ul:nth-of-type(3) {
border: 1px solid black;
}

ul:nth-of-type(3) {
   border: 1px solid black;
}

There will be times when, rather than selecting a child, you instead need to select according to the type of element.
Imagine mark-up that contains five unordered lists. If you wanted to style only the third ul, and didn't have a unique id to hook into, you could use the nth-of-type(n) pseudo class. In the snippet above, only the third ul will have a border around it.

View Demo

Compatibility

IE9+
Firefox 3.5+
Chrome
Safari

25. X:nth-last-of-type(n)

view plain copy to clipboard print ?

ul:nth-last-of-type(3) {
border: 1px solid black;
}

ul:nth-last-of-type(3) {
   border: 1px solid black;
}

And yes, to remain consistent, we can also use nth-last-of-type to begin at the end of the selectors list, and work our way back to target the desired element.

Compatibility

IE9+
Firefox 3.5+
Chrome
Safari
Opera

26. X:first-child

view plain copy to clipboard print ?

ul li:first-child {
border-top: none;
}

ul li:first-child {
   border-top: none;
}

This structural pseudo class allows us to target only the first child of the element's parent. You'll often use this to remove borders from the first and last list items.
For example, let's say you have a list of rows, and each one has a border-top and a border-bottom. Well, with that arrangement, the first and last item in that set will look a bit odd.
Many designers apply classes of first and last to compensate for this. Instead, you can use these pseudo classes.

View Demo

Compatibility

IE7+
Firefox
Chrome
Safari
Opera

27. X:last-child

view plain copy to clipboard print ?

ul > li:last-child {
color: green;
}

ul > li:last-child {
   color: green;
}

The opposite of first-child, last-child will target the last item of the element's parent.

Example

Let's build a simple example to demonstrate one possible use of these classes. We'll create a styled list item.

Markup

view plain copy to clipboard print ?

<ul>
<li> List Item </li>
<li> List Item </li>
<li> List Item </li>
</ul>

  <ul>
     <li> List Item </li>
     <li> List Item </li>
     <li> List Item </li>
  </ul>

Nothing special here; just a simple list.

CSS

view plain copy to clipboard print ?

ul {
width: 200px;
background: #292929;
color: white;
list-style: none;
padding-left: 0;
}
li {
padding: 10px;
border-bottom: 1px solid black;
border-top: 1px solid #3c3c3c;
}

ul {
 width: 200px;
 background: #292929;
 color: white;
 list-style: none;
 padding-left: 0;
}
li {
 padding: 10px;
 border-bottom: 1px solid black;
 border-top: 1px solid #3c3c3c;
}

This styling will set a background, remove the browser-default padding on the ul, and apply borders to each li to provide a bit of depth.

To add depth to your lists, apply a border-bottom to each li that is a shade or two darker than the li's background color. Next, apply a border-top which is a couple shades lighter.

The only problem, as shown in the image above, is that a border will be applied to the very top and bottom of the unordered list - which looks odd. Let's use the :first-child and :last-child pseudo classes to fix this.

view plain copy to clipboard print ?

li:first-child {
border-top: none;
}
li:last-child {
border-bottom: none;
}

li:first-child {
    border-top: none;
}
li:last-child {
   border-bottom: none;
}

There we go; that fixes it!

View Demo

Compatibility

IE9+
Firefox
Chrome
Safari
Opera

Yep - IE8 supported :first-child, but not :last-child. Go figure.

28. X:only-child

view plain copy to clipboard print ?

div p:only-child {
color: red;
}

div p:only-child {
   color: red;
}

Truthfully, you probably won't find yourself using the only-child pseudo class too often. Nonetheless, it's available, should you need it.
It allows you to target elements which are the only child of its parent. For example, referencing the snippet above, only the paragraph that is the only child of the div will be colored, red.
Let's assume the following markup.

view plain copy to clipboard print ?

<div><p> My paragraph here. </p></div>
<div>
<p> Two paragraphs total. </p>
<p> Two paragraphs total. </p>
</div>

<div><p> My paragraph here. </p></div>
<div>
   <p> Two paragraphs total. </p>
   <p> Two paragraphs total. </p>
</div>

In this case, the second div's paragraphs will not be targeted; only the first div. As soon as you apply more than one child to an element, the only-child pseudo class ceases to take effect.

View Demo

Compatibility

IE9+
Firefox
Chrome
Safari
Opera

29. X:only-of-type

view plain copy to clipboard print ?

li:only-of-type {
font-weight: bold;
}

li:only-of-type {
   font-weight: bold;
}

This structural pseudo class can be used in some clever ways. It will target elements that do not have any siblings within its parent container. As an example, let's target all uls, which have only a single list item.
First, ask yourself how you would accomplish this task? You could do ul li, but, this would target all list items. The only solution is to use only-of-type.

view plain copy to clipboard print ?

ul > li:only-of-type {
font-weight: bold;
}

ul > li:only-of-type {
   font-weight: bold;
}

View Demo

Compatibility

IE9+
Firefox 3.5+
Chrome
Safari
Opera

30. X:first-of-type

The first-of-type pseudo class allows you to select the first siblings of its type.

A Test

To better understand this, let's have a test. Copy the following mark-up into your code editor:

view plain copy to clipboard print ?

<div>
<p> My paragraph here. </p>
<ul>
<li> List Item 1 </li>
<li> List Item 2 </li>
</ul>
<ul>
<li> List Item 3 </li>
<li> List Item 4 </li>
</ul>
</div>

<div>
   <p> My paragraph here. </p>
   <ul>
      <li> List Item 1 </li>
      <li> List Item 2 </li>
   </ul>
   <ul>
      <li> List Item 3 </li>
      <li> List Item 4 </li>
   </ul>
</div>

Now, without reading further, try to figure out how to target only "List Item 2". When you've figured it out (or given up), read on.

Solution 1

There are a variety of ways to solve this test. We'll review a handful of them. Let's begin by using first-of-type.

view plain copy to clipboard print ?

ul:first-of-type > li:nth-child(2) {
font-weight: bold;
}

ul:first-of-type > li:nth-child(2) {
   font-weight: bold;
}

This snippet essentially says, "find the first unordered list on the page, then find only the immediate children, which are list items. Next, filter that down to only the second list item in that set.

Solution 2

Another option is to use the adjacent selector.

view plain copy to clipboard print ?

p + ul li:last-child {
font-weight: bold;
}

p + ul li:last-child {
   font-weight: bold;
}

In this scenario, we find the ul that immediately proceeds the p tag, and then find the very last child of the element.

Solution 3

We can be as obnoxious or as playful as we want with these selectors.

view plain copy to clipboard print ?

ul:first-of-type li:nth-last-child(1) {
font-weight: bold;
}

ul:first-of-type li:nth-last-child(1) {
   font-weight: bold;
}

This time, we grab the first ul on the page, and then find the very first list item, but starting from the bottom! :)

View Demo

Compatibility

IE9+
Firefox 3.5+
Chrome
Safari
Opera

Conclusion

If you're compensating for older browsers, like Internet Explorer 6, you still need to be careful when using these newer selectors. But, please don't let that deter you from learning these. You'd be doing a huge disservice to yourself. Be sure to refer here for a browser-compatibility list. Alternatively, you can use Dean Edward's excellent IE9.js script to bring support for these selectors to older browsers.
Secondly, when working with JavaScript libraries, like the popular jQuery, always try to use these native CSS3 selectors over the library's custom methods/selectors, when possible. It'll make your code faster, as the selector engine can use the browser's native parsing, rather than its own.
Thanks for reading, and I hope you picked up a trick or two!

Absolute vs. Relative Positioning

noreply@blogger.com (UXAWY) — Mon, 12 Nov 2012 12:58:00 +0000

When I was first learning web development, the style side of CSS seemed straightforward and fun, but performing layout feats seemed like a confusing mess. I sort of felt my way around without a solid understanding of how things like positioning and floats worked and as a result it would take hours to perform even simple tasks. If this situation sounds familiar, then this article is for you.
One of the real revelations that I had early on was when I was finally able to wrap my head around how positioning contexts worked, especially when it came to the difference between absolute and relative positioning. Today we’re going to tackle this subject and make sure you know exactly how and when to apply a specific positioning context to a given element.

5 Different Position Values

Let’s get some complexity out of the way up front. In reality, there are a whopping five different possible values for the position property. We’ll largely skip over inherit because it’s pretty self explanatory (simply inherits the value of its parent) and isn’t really supported well in older versions of IE.
The default position value for any element on the page is static. Any element with a static positioning context will simply fall where you expect it to in the flow of the document. This of course entirely depends on the structure of your HTML.
Another value that you’ve no doubt seen is fixed. This essentially anchors an object to the background so that wherever you place it, there it will stay. We often see this used on sidebar navigation elements. After scrolling down a long page of content, it’s a pain to go back to the top to navigate elsewhere so applying a fixed position to the navigation means the user never loses site of the menu. Click the image below to see a live example of this in action.

So there you have three position values that are fairly straightforward and easy to wrap your mind around. The final two are of course absolute and relative. Let’s focus on explaining these independently and then take a look at how they can be used together to achieve unique results.

Absolute Positioning

Absolute positioning allows you to remove an object from the typical flow of the document and place it at a specific point on the page. To see how this works, let’s set up a simple unordered list of items that we’ll turn into clearly discernible rectangles.

As we’ve already learned, by default these items will have a static position applied. That means they follow the standard flow of the document and are positioned according to the margins that I’ve placed on the list. Now let’s see what happens if I target one of these list items and apply a value of absolute to the position property.

As you can see, the fourth list item was completely removed from the normal flow and placed at the top left corner of the browser window. Note that even if there were other content occupying this position, this element wouldn’t care. When something has absolute positioning applied, it neither affects nor is affected by other elements in the normal flow of the page.
The reason for absolute positioning is so we can position this item precisely where we want it. We do this with the top, bottom, left and right CSS properties. For instance, let’s say we wanted the fourth list item to be placed twenty pixels from the topside of the browser window and twenty pixels from the left side.

To prove our earlier point about absolutely positioned items not interacting with other content, let’s move the fourth list item right into the territory of the other list items. Watch how it simply overlaps the existing content instead of pushing it around. Click on the image below to see and tweak a live example of this test.

As one final note, notice how the fifth list item occupies the position previously held by the fourth rather than holding its position as if the fourth were still in place. Since the fourth item has been removed from the flow, everything else will adjust accordingly.

Relative Positioning

Relative positioning works similarly to absolute positioning in that you can use top, bottom, left and right to scoot an object to a specific point on the page. The primary difference is the origin or starting point for the element. As we saw above, with absolute positioning, the starting point was at the very top left of the browser window. Check out what happens when we apply relative positioning though:

Nothing happened! Or did it? As it turns out, the object is indeed relatively positioned now, but its starting point is where it normally lies in the flow of the document, not the top left of the page. Now if we apply the same 20px adjustments that we used before, the result is quite different.

This time the item was moved “relative” to its starting position. This is extremely helpful for when you want to slightly tweak an object’s position rather than completely reset it altogether. Notice that, just as with absolute positioning, the relatively positioned object doesn’t care about other items in the normal low of the page. However, the original position occupied by the relatively positioned element hasn’t been occupied by the next list item as it did with absolutely positioned elements, instead the document acts as if the fourth item still occupies that position.

Putting Them Together

Now that you know how absolute and relative positioning work on their own, it’s time to dive into a more complex example and see how they can work together in a truly useful manner. This time we’re going to build a nice little demo to show off how it all works.

HTML

Start with a simple div with a class of “photo” and place a 200x200px image inside. This is all the HTML we need so after you’ve got this, move over to some CSS.

<div class="photo">

  <img src="http://lorempixum.com/200/200/people/9" />

</div>

</pre>

</div>

<br />

Basic CSS

In your CSS, start by changing the body color to something dark. Then apply some basic styles to the photo element and give it some nice border and shadow styles.

body {

  background: #222;

}

.photo {

  border: 5px solid white;

  height: 200px;  

  width: 200px;

  margin: 50px auto;

  /*overly complex but cool shadow*/

  -webkit-box-shadow: 0px 10px 7px rgba(0,0,0,0.4), 0px 20px 10px rgba(0,0,0,0.2);

     -moz-box-shadow: 0px 10px 7px rgba(0,0,0,0.4), 0px 20px 10px rgba(0,0,0,0.2);

          box-shadow: 0px 10px 7px rgba(0,0,0,0.4), 0px 20px 10px rgba(0,0,0,0.2);

}

</pre>

</div>

Here’s the resulting image. It’s nothing special, but it will provide a great testing ground for our positioning experiment.

Applying a Strip of Tape

Let’s say we wanted to create the illusion that this photo was hanging from the background, connected by a small strip of tape. To pull this off, we’ll need to flex our newfound positioning muscle and leverage some pseudo elements.
The first thing we want to do is use the :before pseudo element to create our strip of tape. We’ll give it a height of 20px and a width of 100px, then set the background to white at 50% opacity. I’ll finish by adding in a slight box-shadow.

.photo:before {
  content: "";
  height: 20px;
  width: 100px;
  background: rgba(255,255,255,0.5);
 
  -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
     -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
          box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
}

If we look at a live preview of our page after this code, we can see that we really screwed up our image. The piece of tape is really interfering with the flow of the document. Even though it’s not really visible, it has bumped our image right out of its border!

Obviously, we’ve got some issues with how the pseudo element is being positioned. To attempt to fix this, let’s see what happens if we apply relative positioning to the piece of tape.

.photo:before {
  content: "";
  height: 20px;
  width: 100px;
  background: rgba(255,255,255,0.5);
  position: relative;
  top: 0px;
  left: 0px;
 
  -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
     -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
          box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
}

Here’s the effect of this code:

As you can see, we didn’t fix our problem, everything is just as screwed up as before. Since this didn’t work, let’s take the opposite route and see what happens if we use absolute positioning.

.photo:before {
  content: "";
  height: 20px;
  width: 100px;
  background: rgba(255,255,255,0.5);
  position: absolute;
  top: 0px;
  left: 0px;
 
  -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
     -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
          box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
}

Here’s what our demo looks like now:

Our tape has finally made an appearance! Unfortunately, it’s way up in the corner. We could nudge it into place with the top and left values, but that wouldn’t actually be a workable solution. The reason is that this would put the tape at a specific point on the background, where it would stay no matter what. However, the image has been automatically centered in the viewport so as you change the window size it actually moves, meaning the piece of tape won’t be correctly positioned anymore.
So now we’ve tried both relative and absolute positioning with neither providing the solution we want. Where do we turn next? As it turns out, we haven’t really gotten the full story behind absolute positioning yet. You see, it doesn’t always default to the top left of the browser window. Instead, what position: absolute; really does is position the element relative to its first non-statically-positioned ancestor (inherit doesn’t count either). Since there hasn’t been one of those in previous examples, it was simply reset to the origin of the page.
So how does this translate into useful information? It turns out, we can use absolute positioning on our piece of tape, but we first need to add a positioning context to its ancestor, the photo. Now, we don’t want to absolutely position that element because we don’t want it to move anywhere. Thus, we apply relative positioning to it. Let’s see what this looks like.

.photo {
  margin: 50px auto;
  border: 5px solid white;
  width: 200px;
  height: 200px;
  position: relative;
 
  /*overly complex but cool shadow*/
  -webkit-box-shadow: 0px 10px 7px rgba(0,0,0,0.4), 0px 20px 10px rgba(0,0,0,0.2);
     -moz-box-shadow: 0px 10px 7px rgba(0,0,0,0.4), 0px 20px 10px rgba(0,0,0,0.2);
          box-shadow: 0px 10px 7px rgba(0,0,0,0.4), 0px 20px 10px rgba(0,0,0,0.2);
}
 
 
.photo:before {
  content: "";
  height: 20px;
  width: 100px;
  background: rgba(255,255,255,0.5);
  position: absolute;
  top: 0px;
  left: 0px;
 
  -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
     -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
          box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
}

As you can see, the pseudo element has absolute positioning applied, which means it will choose a starting point given the location of its first non-static ancestor. Since I’ve applied relative positioning to the photo, that item fits this description. So now our piece of tape will begin at the origin of the photo (even if the photo moves due to browser resizing).

Now that we have found the starting position that we were looking for, we can tweak the top and left values to nudge the tape into place. Notice that I’ve applied a negative value to the top property so the tape sticks out of the image onto the background. The left position is set to center the tape horizontally (click here to see how the math works out).

.photo:before {
  content: "";
  height: 20px;
  width: 100px;
  background: rgba(255,255,255,0.5);
  position: absolute;
  top: -15px;
  left: 50px;
 
  -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
     -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
          box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
}

As we can see in the finished version below, combining absolute and relative positioning was exactly what we needed to pull off the effect that we were going for. Click the image below to see and tweak the live demo.

A Quick Summary

Positioning contexts can be difficult to wield if you’re attempting to implement them without a solid foundation of knowledge behind how they work. Fortunately, there are only three primary pieces of information that you need to remember to master absolute and relative positioning.
The first is that relative positioning will allow you to tweak an element’s position relative to its normal starting point. The second is that absolute positioning will allow you to tweak an element’s position relative to its first non-statically-positioned ancestor (defaults to page bounds if none is found). The final piece of information to remember is that both relatively and absolutely positioned items won’t affect the static and fixed items around them (absolutely positioned items are removed from the flow, relatively positioned items occupy their original position).
If you enjoyed this tutorial, leave a comment below and let us know. Are there any other foundational areas of CSS that you struggle with that you’d like us to cover?

Everything You Never Knew About CSS Floats

noreply@blogger.com (UXAWY) — Mon, 12 Nov 2012 12:54:00 +0000

What do floats really do anyway? How do they affect the box model of the elements involved? How do floated elements differ from inline elements? What are the specific rules governing the position of floated elements? How does the clear property work and what is it for?

Floats can trip up even experienced developers and understanding their behavior can really set you free from many of the woes that you face with CSS. Even if you think you already know all about floats, we’ll dive deep enough that you just might learn something new!

What Is a Float?

Some elements in CSS are block level elements, which means they automatically start a new line. For instance, if you create two single word paragraph elements, they won’t flow into each other but will appear on separate lines. Other elements are inline elements. This means that they appear “in line” with the previous content. One example is an anchor tag, which can appear within another element such as a paragraph without causing any extra whitespace or new lines to occur.

One way to cheat this model of layout is to use floats, which allow a given element to shift to one side of its line and have other content flow down its side. A right-floated element will be pushed all the way to the right of its container and have content flow down its left side and a left-floated element will be pushed all the way to the left side with content flowing down its right side.

The classic example is when you toss an image in with a paragraph and want the two to appear side by side rather than stacked. First we create both elements with some HTML:

<img src="http://lorempixum.com/200/200/" />
<p>Lorem ipsum...</p>

Alone, this code does not produce the effect that we want. The paragraph element is a block level element that appears on its own line and so the paragraph and the image are shown stacked in the normal document flow.

We can change this behavior by floating our image to the right. The CSS for this is very basic:

img {
  float: right;
  margin: 20px;
}

With this code in place, our image is scooted to the right side of its line and the paragraph is allowed to flow down its left side. Click here or on the image below to see and tweak a live example of this code in action.

One interesting thing about the behavior of this image now that it is floated is that our other content will actually attempt to wrap around it where possible. If we resize our container or browser window to be narrower, the text simply reflows itself so that it never touches the image.

How the Box Works

Odds are you already understood this behavior to a decent degree. However, in order to wield floats properly, you need to understand how these two elements are interacting on deeper level. For instance, how do we add extra margin between the paragraph and the image? You might think that this will work:

p {margin: 20px;}

However, this won’t put even a single pixel of extra space between the image and the paragraph. Instead, we have to apply our margin to the image:

img {margin: 20px;}

The question you should be asking yourself is, “why?” Why wouldn’t increasing the paragraph margin increase the space between the image and the paragraph? The reason is that we’re failing to grasp the box model as it pertains to that paragraph.

If you’re ever doubtful about how your layout is working on a basic level, try applying a border or two to see what’s going on. If we use this technique on the paragraph, the result may surprise you.

p {
  border: solid 1px black;
}

As you can see, the image is actually inside of the paragraph’s box! This solves our margin riddle. Any margin that we add to the paragraph is being applied way off to the right of the image, this is why it doesn’t increase the space between the image and the paragraph.

If we wanted the change this behavior so that the paragraph doesn’t wrap around the image, we could float the paragraph to the left and give it a specified width (without expressing the width, the paragraph is 100% wide and won’t fit next to the image).

img {
  float: right;
  margin: 20px;
}
 
p {
  float: left;
  width: 220px;
  margin: 20px;
}

Crazy Float Rules

Now we know what a float is and how it affects the boxes of the elements that are involved. Let’s move on to another piece of information that many developers probably don’t understand in the least: the rules that govern a floated element’s position.

It’s often the case that developers will use floats to govern the positioning of list items, perhaps in an image gallery or feature listing. Let’s see how this works by creating a simple list full of images.

<ul>
  <li><img src="http://placehold.it/100x100&text=1"/></li>
  <li><img src="http://placehold.it/100x150&text=2"/></li>
  <li><img src="http://placehold.it/100x100&text=3"/></li>
  <li><img src="http://placehold.it/100x100&text=4"/></li>
  <li><img src="http://placehold.it/100x100&text=5"/></li>
  <li><img src="http://placehold.it/100x150&text=6"/></li>
  <li><img src="http://placehold.it/100x100&text=7"/></li>
</ul>

By default, all the list items will appear in a big vertical stack, which obviously means that they are block level elements. Even though the images are inline elements, they’ll be governed by their parent block level list items. To fix this, we might float the list items to the left. When multiple items in a row are floated, they take on a similar effect to a stream of inline elements. However, as we’ll see, there are some key differences.

li {
  float: left;
  margin: 4px;
}

Now, if all of our images were the same height, this would be a pretty unremarkable example. The result would look like a simple image gallery with the images appearing in order from left to right:

However, our images are not the same height, some of them are 100px tall, others are 150px tall. This causes some seriously wacky results! Click here or on the image below to see this effect live.

The first time I saw this effect, I was baffled. What in the world was going on here? Why is image number four off to the right side like that? Shouldn’t it be trying to float itself as far left as possible? If we remove the float and instead use display: inline on the list items, the result is drastically different.

li {
  display: inline;
}

For starters, this example is different in the fact that the images are defaulting to a state of being vertically aligned along their bottom edges. This causes them to look quite different than our previous example, but we can fix this with a single line of CSS.

img {	
  vertical-align: top;
}

Now we’re starting to look a lot like the float example, only displaying the list items inline has a much more predictable stacking order. When there’s no room on the x-axis for the next item, it starts back on the left slide in the next line.

So why doesn’t our floated image gallery work like this? What strange voodoo governs floated items?

Translation Required

It turns out, the CSS spec outlines a list of nine rules that govern the behavior of floats. The problem with this list though is that it was written so that only lawyers and other boring people can understand it. Here’s a direct quote from one of the rules:

“If the current box is left-floating, and there are any left-floating boxes generated by elements earlier in the source document, then for each such earlier box, either the left outer edge of the current box must be to the right of the right outer edge of the earlier box, or its top must be lower than the bottom of the earlier box. Analogous rules hold for right-floating boxes.”

Maybe your reading comprehension is higher than mine, but this and the other rules in the list made my head spin. All this talk of the left outer edge being to the right of the right outer edge is actually pretty basic stuff dressed up to sound complicated. To make things simpler, here are Josh Johnson’s nine rules for float behavior, translated into English for your convenience.

Floated elements are pushed to the edge of their containers, no further.
Any floated element will either appear next to or below a previous floated element. If the elements are floated left, the second element will appear to the right of the first. If they’re floated right, the second element will appear to the left of the first.
A left-floating box can’t be further right than a right-floating box.
Floated elements can’t go higher than their container’s top edge (this gets more complicated when collapsing margins are involved, see original rule).
A floated element can’t be higher than a previous block level or floated element.
A floated element can’t be higher than a previous line of inline elements.
One floated element next to another floated element can’t stick out past the edge of its container.
A floating box must be placed as high as possible. (No translation necessary)
A left-floating box must be put as far to the left as possible, a right-floating box as far to the right as possible. A higher position is preferred over one that is further to the left/right. (No translation necessary)

Here we can see that many of these are pretty much common sense, but they must be explicitly stated so that every person and browser is on the same page. Basically, the gist of the situation is that floated elements go right up to the specified edge (left or right), but no further. Unless of course there is another floated element before it, in which case it just goes next to that one.

The real surprise that confused us before comes in the rules at the end, which state that floated elements try to stay as high as possible and that this vertical positioning rule takes precedence over the horizontal left/right floating rule that pushes an item to an edge.

In our previous example, image number two stretched the height of the line down so that after image number three, there was still some vertical space for image number four to squeeze into. Even with these rules in mind, the pattern isn’t always easy to predict.

Just keep in mind that when you have one floated element, the next floated elements behind it will take up at least the same amount of vertical space or more before breaking the line and going lower in the flow.

Float Order

One last note regarding the rules that we’ve laid out here. The second rule has some interesting implications for the order of items that are floated. Let’s say we again have a list of images numbered one through six, like this:

<ul>
  <li><img src="http://placehold.it/100x100&text=1"/></li>
  <li><img src="http://placehold.it/100x100&text=2"/></li>
  <li><img src="http://placehold.it/100x100&text=3"/></li>
  <li><img src="http://placehold.it/100x100&text=4"/></li>
  <li><img src="http://placehold.it/100x100&text=5"/></li>
  <li><img src="http://placehold.it/100x100&text=6"/></li>
</ul>

If we float these images to the left, they’ll appear in order, starting at one and going through six; left to right, top to bottom. However, here’s what happens if we float the list items to the right:

As you can see, the first image actually takes the rightmost position. Similarly, when the line breaks, the fourth image is placed on the right side. This is why you’ll rarely see anyone float a list of navigation elements to the right. To do so screws with the order and would require undesirable changes in the HTML hierarchy to resolve.

Clearing Floats

Floats are handy for accomplishing some great layout feats like creating columns of content. However, once declared, they have an effect on the rest of the document’s flow that you might or might not like! For instance, let’s say we wanted to throw in a paragraph after a block of left-floating list items like the one we had above.

The result is probably not going to be what you hoped for:

The answer here is to use the clear property, which makes it so that no floated items can appear on a given side of the element it is applied to. For instance, let’s say we target the second list item in our little gallery and apply a value of “clear: left”.

ul li:nth-child(2) {	
  clear: left;
}

What this code does is tell the browser that the top of the second list item must be below the bottom of any left-floating items before it (in this case, the first list item). If we had all floated all of these elements to the right, we would’ve had to use “clear: right” instead.

Notice that after this, the rest of the floated items maintain their course. That’s because they’re still set to float left, the clear property does not somehow cancel this out. This means that our problem with the paragraph is not fixed by clearing any of the list items.

Instead, what has to happen is that the paragraph element, which is a block level element that has not been floated, must be cleared. This will make sure it appears below the floated elements rather than next to them.

p {
  clear: both;
}

We technically only needed a left clear here, but when a developer wants to be sure to clear all floats, it’s common practice to see the both value used. This change fixed our problem up nicely!

Float Quirks and Clear Fixes

There’s a peculiar action that takes place when a given element contains only floated elements: the parent element’s height collapses. To illustrate this, let’s say we wanted to put a background color on the unordered list that we’ve being using in all our examples. If the elements in the list aren’t floated, then we need only apply the color to the background using CSS.

ul {
  background: gray;
}

As you can see in the example below, the box that defines the unordered list has been turned gray and the list items within are stacked on top of each other.

However, the second that we float those list items, that UL contains only floated elements, and so its height collapses, leaving a newbie developer wondering what the heck happened to his background color.

There are a number of ways to solve this problem. The easiest and most straightforward solution is simply to apply an explicit height to the parent element, which is the unordered list.

ul {
  height: 300px;
}

As you can see, this did indeed give us our background fill back. However, this is rarely the desirable course to take simply because it’s more convenient in the long run if the height is automatically computed based on the contents. If we add three more rows of images to our list now, that height won’t be adequate.

Clearfix To The Rescue

This is where the term “clear fix,” also written “clearfix,” comes into play. Clearfixes address this collapsing height problem traditionally through the use of the clear property.

What developers used to do is create an empty element (often a div) in their HTML on the same level as the floated items, then apply a class of “clearfix” to that empty container. Back in CSS, you would then add clear the floats on the “clearfix” property.

.clearfix {
  clear: both;
}

This immediately fixes the collapsed height issue:

Given what we’ve already learned, we know exactly why this trick fixed our problem. The reason the height had collapsed is because the parent contained only floated children. Now it has one child, albeit an empty one, that isn’t floated, so the auto height works as expected again.

The problem with this method is that no one liked that extra ugly element in the HTML. It simply wasn’t semantic, meaning that it wasn’t helping to communicate the clear hierarchy of the page.

The new fancy fix for this problem is to take advantage of the overflow property, which governs the functionality of content that extends beyond the boundaries of its containing box. It turns out that if you set overflow to hidden or auto on the parent item, it fixes the height collapse!

ul {
  overflow: auto;
}

This is definitely the briefest and most elegant solution to fixing the collapsing height issue and should be your go to strategy. That being said, there will be cases where you want the overflow of an element to be set to visible, what should you do then?

The answer is to use Nick Gallagher’s Micro Clearfix Hack, which uses some genius CSS to fix this issue. First, it uses :before and :after to add in some content that we can use to create something in the parent that isn’t floated. However, you don’t really want any content in here, so we leave it empty but set the display to table to create an anonymous cell (empty and takes up no space) and finally use our old friend clear. This creates the invisible block level item we need to fix the height collapse without extra HTML markup. Older versions of IE require their own fix so this is thrown in as well.

/* For modern browsers */
.cf:before,
.cf:after {
    content:"";
    display:table;
}
 
.cf:after {
    clear:both;
}
 
/* For IE 6/7 (trigger hasLayout) */
.cf {
    zoom:1;
}

Conclusion

In this article, we went over a ton of great information, both basic and complicated. We started with a discussion of how what floats are and how they work on a basic level, then proceeded to how setting an element to float affects the bordering boxes of the elements involved so you can properly figure out how to get your margins to work like you want them to.

Next, we moved onto the basic rules that govern the position of a floated element and arrived at some interesting conclusions for how floated elements of varying heights will be positioned as well as how right floated items appear in reverse order.

Finally, we clearly laid out the entire tale of how a parent containing only floated children will have a collapsed height and how you can solve it based on your particular scenario.

If floats were something that confused you before reading this article, join the club. They confuse us all at first. Hopefully though you now have an outstanding knowledge of how floats work and how you can use them to achieve any layout you want. Leave a comment below and let us know if you found this information helpful.

5 Ways to Learn Web Design: Which Is Right for You?

noreply@blogger.com (UXAWY) — Mon, 12 Nov 2012 12:48:00 +0000

The web design education industry has exploded from a small niche to a powerful, continually expanding force. Countless people all over the planet are interested in learning about how to build and design websites, and tons of companies are cropping up promising the ultimate solution.

The good news for you is that increased competition in this field is a great thing for customers. You have more options than ever for learning just about anything you want to know concerning web technologies. The big question though is, with so many options available, which is the right one for you? We’ll go over a number of different strategies being used to teach web development and discuss how you can figure out the most appropriate for your unique learning style. We’ll also include some resources to get you started on each available path.

So Many Options!

With some disciplines, the most difficult part of the education process is finding quality learning resources. This is definitely not the case with web design. The web is completely bursting with both free and purchasable information that will teach you all there is to know about web design and development.

The problem then shifts from one of scarcity to overabundance. With so much info available, how can you even know where to begin? Before you answer this question though, I think it’s critically important to discover which learning style is the most effective for you. Once you have this information, you can narrow your resources considerably.

Why Does It Matter?

If you’ve ever tried and failed to learn something, then this lesson should ring true with you. Sometimes you want to pick up a new skill, but there just seems to be some barrier between you and success. How can you overcome it? In a recent article, I introduced you to the freelancer’s secret to learning any new skill, which I firmly believe is a great way to force yourself into learning. However, even if you’ve put yourself in the position suggested by that article, you still have the actual learning process ahead of you.

“Odds are, you’ll find that you personally have more success using some methods than others.”

It often boils down to a question of methodology. Education professionals long ago discovered that people differ in their learning styles. Some people are visual learners, others absorb through reading and some can’t get a feel for something until they dig in with a hands-on experiment. Odds are, you’ll find that you personally have more success using some methods than others.

The key then is to find out which learning style you tend to have the most success with and find resources that focus on teaching through this method. Instead of a random Google search that leads to hours and hours of failed learning attempts, try making an educated go of choosing how you learn web design. Doing so could literally mean the difference between another failed attempt and an exciting new career.

1. School

Though I tend to focus on informal web-based independent learning solutions, I would never discount the value of a formal education. For starters, a university or even community college degree can give your resume the boost it needs to land you that awesome job.

Web design and development degrees are quickly becoming fairly ubiquitous. There’s a good chance that the major schools in your area all offer something in this area. Every school worth its salt has a website that lists available degrees and certificates in addition to some estimates for the level of financial investment that you can expect to make, so be sure that local university websites are your first stop. Understandably, a college or university degree is the most expensive route you can take, but it can also be one of the most rewarding.

Should You Go Back To School?

Obviously, if you’re about to enter college and need a degree, then this option is prime territory for you. I’ll focus on the people for whom this decision might not be as simple though: those thinking about returning to school.

If you’re an adult who has been in the working world for some time, the decision of whether or not to go back to school is a difficult one. Will the hard sacrifices of time and money pay off in the end? Sometimes they do, other times they don’t.

If you don’t have a formal degree of any kind, I recommend that you get one. Potential employers often just want to see that you’re committed enough to get through college without giving up.

If you do have a degree, just not in web development, then you might have plenty of success learning on your own. More and more the web industry is beginning to value experience and ability over formal education. Jump into learning on your own, take some low budget jobs to kick off your career and then move your way up the ladder through freelance or the corporate world.

If you find that the lack of a web dev degree is holding you back, then you should think about getting one. Otherwise, your time and resources might be better spent on real world experience. You might even consider picking up a class or two where you need it and skipping the full degree.

Learning Style

Whether you’re going with an online or in-person degree, the teaching methods will likely incorporate several or even all of the other styles below. There are some unique advantages to the school method though, especially if you’re in a real classroom with an instructor present.

Some of us learn better on our own, moving forward at our own pace. The unfortunate truth though is that self-guided learning is super difficult. It’s often far easier to pick up a new discipline if someone is pushing you to do so. School heavily leverages the stress factor to induce learning, a trick that works so well that our entire education system is based on it.

“It’s often far easier to pick up a new discipline if someone is pushing you to do so.”

With school you have homework, deadlines, term projects and a structured schedule. You either keep up or drop out. If you need to learn a lot of stuff extremely well in a short period of time, there’s almost no better way to do it than a formal class.

Further, in-person instruction is a rich learning method that gives you the unique ability to ask questions and get help where you need it, often in a one-on-one conversation. This is something that is extremely difficult or nearly impossible to find in the world of free and even premium online education.

The Bottom Line

If you have a decent budget, learn better in a structured environment, perform well under pressure, and value face to face instruction where you can ask lots of questions, school is your best bet.

2. Reading

Written instruction is the spark that lit the fire under web design education. The lowly design blog started as a novel idea and has risen to impressive heights. Even these built on the success of a far older method: books. Once upon a time, when someone wanted to learn something, a trip to the library and/or bookstore, was the first step in the process (not Google).

Reading is a timeless way to learn something, it will simply never go out of style no matter what fancy technology comes along. In a highly literate society it is often the go-to method for self-guided instruction. It’s not the most interactive or exciting way to go about learning something, but it’s often the most effective for several reasons.

Learning Style

Written learning materials are hard to beat from an efficiency perspective. The average person’s reading speed is much faster than the average person’s speaking speed, so you can pack far more education into a shorter time span than with spoken instruction.

For this reason, written instruction often goes far deeper than other methods. Books on web development tend to be massive tomes that are fairly exhaustive and cover every aspect of their topic. Even a fairly long video series on the same topic likely won’t cover a tenth of the material.

“Written learning materials are hard to beat from an efficiency perspective.”

Even if you don’t want to read a massive, all-inclusive book on a subject, reading is often still the method to beat. Design blogs like the one you’re reading now provide daily, bite-sized learning opportunities that can guide you through every step of your career, from writing your first line of HTML to keeping your advanced skill set fresh and relevant.

The downside of reading is that it can get boring if you’re the type of person who tends to favor multimedia. An even bigger hurdle is obviously your level of reading comprehension. You need not be embarrassed, the simple truth is that lots of people simply don’t absorb and retain information well through reading. If you’ve never read an entire blog post (including this one) without skimming and find yourself sleeping in a book more than turning its pages, reading might not be the way to go!

The Bottom Line

Reading-based instructional materials are perfect if you have a high level of reading comprehension and retention. The options here fall on both extremes of the time spectrum: reading can provide you with both the shortest, quickest instruction possible and the longest, deepest learning sessions that you could possibly want. Reading is also hands down the most popular method used for free instruction, so if your budget is nonexistent, blogs and other online resources are the way to go.

Reading is for the masses, but don’t mistake that statement as an implication that there’s something wrong with you if this isn’t the best way for you to learn. Don’t waste your time at the library if big books intimidate or bore you, instead search for a learning method that makes use of your interest in richer methods of communication.

Resources To Check Out

HTML & CSS Book
This simply titled book is a breath of fresh air in the world of printed learning materials for web designers. It’s gorgeous, it’s thorough, and it’s at the very top of my recommendation list for anyone looking to pick up HTML and CSS.

HTML5 Rocks
HTML5 Rocks is an awesome open source resource for web developers at all stages. There is a wealth of free information and tutorials available here that cover a wide array of topics.

3. Video Instruction

Instructional videos have been around for nearly as long as video cameras. The concept is nothing new and the effectiveness has been proven over several decades. If you need proof, consider that most of us would never dream of buying and reading through a science book but as soon as a science channel pops up on our TV, we’re enthralled for hours on end.

Video based instruction in the web development community certainly isn’t new either, but serious, in-depth and high quality video instruction definitely hasn’t hit anywhere near the level of saturation of written design blogs. This is because video learning materials are incredibly resource-intensive to produce. The equipment, knowledge, software and time necessary to create a valuable product all serve as a high barrier to entry for anyone looking to enter this market.

For this reason, the products that do exist tend to be quite pricy. The currently popular method is to sell a subscription on a monthly or yearly basis. You pay a certain fee every month and in turn are granted access to a large body of video content. It’s like Netflix for web education.

Learning Style

The learning style here is very visual. If you have no interest in books and find that you often can’t make yourself read through even a brief blog post, video instruction provides an awesome and often quite entertaining solution.

“If you think that watching a person write code for an hour is going to be exciting, you’re going to be pretty surprised with the reality.”

This doesn’t mean that you won’t get bored though. If you think that watching a person write code for an hour is going to be exciting, you’re going to be pretty surprised with the reality. For this reason, the instructor leading the videos makes all the difference in the world. Guys like Jeffrey Way and Chris Coyier have the ability to make the educational experience interesting while other instructors unfortunately drone on endlessly in a monotone voice that lulls you into a deep coma from which there is little hope of return.

Obviously, video instruction ticks the auditory learning box as well. Some people can read something a hundred times and not retain the information, but as soon as they hear it, it’s locked in their brain forever. If this sounds like you, video courses are likely going to be the best route for you. Pure audio solutions like podcasts do exist, but they’re more for general discussion. It’s nearly impossible to learn code or design without seeing what it is that the instructor is doing.

One last thing to consider is that video instruction can be time consuming. Courses are often broken up into five to ten minute segments but on the whole you’ll spend hours and hours watching video to absorb the amount of information you could probably get from a book in half the time.

The Bottom Line

If your television is constantly tuned into educational science, history or technology shows, then you probably really enjoy learning through video instruction. If you think books are lame, then you definitely need to check out this method of learning.

Videos are ideal if you can block out specific chunks of time for learning in a quiet environment. If you’re overwhelmed by all of the reading options available, you’ll be comforted by the fact that there are only a few really good video resources available at this point in time for learning web development. Just keep in mind that the really thorough options are almost exclusively subscription based.

Resources to Check Out

Lynda
Lynda is one of the oldest and most thorough online resources for learning just about anything technical. You pay a hefty subscription fee but it’s well worth it to access their extensive library of learning videos spanning tons of subjects. Learn HTML and CSS, master Photoshop, take a course on video production and finally take on building that iPhone app idea you’ve had floating around in your head.

Tuts+ Premium
I’ve work steadily with the Tuts+ Premium folks so I’m a little biased but I think it’s one of the best options around for anyone who wants to learn web design and development. For as low as $15 per month you get access to a wealth of exclusive tutorials, both written and video. They’re adding content weekly so your membership only gets better with time!

4. Interactive

When I was in college, I signed up for a math course with a stuffy old professor bent on failing as many students as possible. Instruction was fast-paced and questions were almost never tolerated. If you didn’t understand, you didn’t belong there.

Consequently, I dropped the class and tried again using a different format. My school had these computer-based learning courses where an instructor was present, but only for support. Most of the learning was done through a computer program that allowed you to go through lessons at your own pace, re-learn troublesome topics, and take quizzes to assess your progress before official testing. The program used a very interactive teaching method that had you clicking, entering numbers and manipulating models constantly. I pulled an A+ in that class as well as subsequent math courses that I took using the same method.

“The interaction model here is closer to a video game than a textbook.”

The moral here is that for some of us, there’s something magical about computer guided learning. Instead of passively absorbing information, you’re diving into it. Your progress is continually checked so you can’t proceed unless you’re genuinely learning the material. Further, your work is checked not by an intimidating human but by a machine that won’t judge you for going through the same lesson over and over. The interaction model here is closer to a video game than a textbook.

This amazing teaching style is being adapted to the world of web development with some impressive results. There’s a new generation of web apps that guide you through the entire process of learning web development, from HTML and CSS to JavaScript, PHP and Ruby on Rails. Annoying and technical setup processes are nonexistent and your work is checked at every step. You simply read a quick lesson, then type into an on-screen terminal that makes sure you’re doing it right.

Learning Style

The learning style here is obviously a very hands-on approach. If you have a short attention span and get easily bored, even well produced video instruction can be nearly impossible to sit through. The interactive method asks for your input at every step and holds your interest as well or better than any other learning model I’ve ever seen.

“The interactive method holds your interest as well or better than any other learning model I’ve ever seen.”

This method is also great if you’re a particularly fast or a particularly slow learner. If you pick up the information quickly, you can breeze through the content while actually learning the information, not just reading it. Conversely, if your learning process is fairly slow, the computer doesn’t mind! You can enter the wrong answer again and again and you’ll keep getting more chances, and it’s easy to click back and go through a previous lesson at any time.

If you like games, you’ll love this method. Your results are saved, your progress through the course is tracked and reported and you often even work towards high scores and trophies or badges.

The Bottom Line

If you’d much rather spend a day in front of your Xbox than with your nose in a book, then this learning method might resonate particularly well with you. Learning becomes a game to be beaten and boring content comes to life. There are some free and premium options here so no matter your what your budget is, you can get started with this method today.

Resources to Check Out

Codecademy
I absolutely love this website. It’s a fantastic and currently free resource that’s small but growing fast. Here you can learn programming and/or web development through a series of interactive courses that teach you tiny bits of information at a time and let you type out the code yourself. Codecademy checks your answers and guides you through the learning process in a thoroughly enjoyable and easily approachable manner. In fact, it’s so user friendly that I even told my parents to check it out!

Code School
Code School is sort of like a premium, paid version of the Codecademy model. For $25 per month, you get access to several interactive courses on web development and programming. You type in code right in the browser just as with Codecademy, but the learning side is more robust and includes some superbly produced video and graphic content.

5. Hybrid

For some, one of the methods above stands out far from the others as the absolute best way to learn. But let’s face it, your typical learning experience will involve more than one of these learning styles. Don’t feel the need to stay within one area, if none of them hold your interest or provide what you need, jump around a little.

For instance, I like to watch video courses but I also typically have a book on my desk that covers the topic that I’m learning. Jumping between the two helps keep me interested and allows me to dig deeper than I could with a single source.

Your goal should be to find not only your single most successful learning style, but the combination of resources that will ultimately lead to you actually learning the skill that you set out to pick up. Nothing is more frustrating than trying again and again to learn something and coming out no better for it in the end. Building yourself a customized learning plan could be just what you need to end the cycle of frustration.

Resources to Check Out

Treehouse
Treehouse is a perfect example of a single service that incorporates several of the techniques mentioned above. It uses an interactive gaming system mixed with quizzes, video and written content and result is a highly polished educational program that caters to a number of different learning styles. To get the full experience, you’ll have to shell out a whopping $49 per month, but it really is a superb service so you won’t regret it.

How Do You Learn?

The message that I’m trying to get across here is that you can learn web development, regardless of your past successes and failures. Sometimes something as simple as a style of learning is all that’s holding you back. Exploring your interests and favored ways to learn can dramatically improve your odds of success.

Be sure to take some time o consider all of the various methods above and find the one or two that you think will work best for you. It often helps to eliminate those that you know won’t work and use that as a starting point for choosing new techniques to try.

Leave a comment below and tell us about your learning style. Do you learn better through school, reading, video content, interactive software or a hybrid method involving several or even all of these methods? We want to know!

Code a Set of Animated App Store Buttons With CSS

noreply@blogger.com (UXAWY) — Mon, 12 Nov 2012 12:48:00 +0000

I’ve gotten bored lately with all of the run of the mill, plain jane iTunes/Mac App Store buttons that I’ve been seeing around the web, so I coded up some fun little animated alternatives that I thought I would share.

This project is super simple, so even if you’re a complete beginner, you should be able to follow along. We’ll learn how to use some fancy techniques like how to incorporate icon fonts into a design and how to insert objects using pseudo elements.

The Concept

To start a project it’s, often fun to grab a pencil and sketch out a few ideas. We tend to think more freely when drawing with our hands than a mouse. You don’t have to be any good at drawing either, feel free to scribble down quick, ugly sketches. As long as they communicate your thought process, they work!

The concept here is pretty basic and similar to other projects we’ve done in the past. I’d like to start with a circle that contains only an icon. Then, when you hover over the icon, it expands to show a message about downloading the app on the app store.

Of course, since Apple has three primary device archetypes (iPad, iPhone and Mac), we’ll need to create a few different versions to over the bases.

Step 1: The HTML

To begin, bust out a div like the one shown below. Inside I’ve placed a paragraph wrapped in an anchor tag, part of which is also wrapped in a small tag. This will help us differentiate the text a little.

<div class="appstorebutton iphone">
  <a href="#"><p><small>Available on the iTunes</small> App Store</p></a>
</div>

Looking at this now, it feels a little markup heavy. You could probably apply the classes directly to the anchor and skip the div altogether, but we’ll stick with this for now. Notice that I’ve applied two separate classes to the div. I could’ve gotten away with one, but in order to differentiate between the different types of buttons that we’ll be creating, it helps to separate them into separate classes (this allows you to target each version individually). The repeated styles can then be grouped into one “appstorebutton” class, an organization method that will keep our CSS nice and DRY.

Also note that HTML5 allows us to wrap a link around anything we want, so if that looks a little wonky to you, just know that it’s perfectly allowed.

Step 2: Basic Button Styles

Now let’s jump over to some CSS and grab that “appstorebutton” hook. The default state of the button will be a circle, but it’s a lot easier to arrange everything with the button in its expanded state, so we’ll start out with a width of 275px, which we’ll reduce to 80px once we’re all finished.

.appstorebutton {
  height: 80px;
  width: 275px;
  margin: 50px;
  position: relative;
  overflow: hidden;
}
 
.iphone {
  background: #7b7a7f;
}

There are a few other interesting things here as well. First off, we applied relative positioning because we’re going to use some absolute positioning on an element within this one later and this will give us a starting point. If this doesn’t make any sense, read this article.

We also set the overflow to hidden. This is because when the button is in its circular state, much of the content will be outside of the physical bounds of the button and we want to keep it nice and invisible. Finally, we applied a background color to the “iphone” class. Later we’ll create a few more of these for the other versions.

Progress Check

At this point, our object is hideous, but don’t worry, it’ll look better in no time.

Step 3: Style The Paragraph

Next up, it’s time to fix that ugly text. This is pretty straightforward and involves turning the color to white and defining different sizes for the small and regular paragraph text. I also declared a set width, which breaks the text into two lines, then used margins to push it all into place.

 
.appstorebutton a {
  color: white;
  text-decoration: none;
}
 
.appstorebutton p {
  font: 30px/1 Helvetica, Arial, sans-serif;
  text-align: center;
  color: white;
  margin: 4px 0 0 65px;
  width: 180px;
}
 
.appstorebutton p small {
  font-size: 15px;
}

Progress Check

Didn’t I promise you everything would look good soon? Already we’re starting to see the end result shaping up. It’s amazing how far a little styled text can go!

Step 4: Add The Icon

In the image above, the text seems awkwardly scooted over to the right with a big empty space on the left. This is where our little iPhone icon will go. Before we put it in there though, we need to think about how to go about it.

The first thought that pops into my mind is to use an icon font. These are simple to implement and infinitely scalable and will therefore work perfect for a button graphic. After a little hunting, I found a free font called Modern Pictograms from Font Squirrel that contains both an iPhone and an iPad that we can use for this project.

Now, rather than clutter up our markup any further, we can insert this icon using pure CSS by utilizing the :before pseudo element. The code for this along with the implementation of the icon font is shown below.

.iphone p:before {
  content: "O";
  position: absolute;
  font: 70px/1 'ModernPictogramsNormal', Helvetica, sans-serif;
  top: 10px;
  left: 20px;
}
 
/*Font-Face*/
@font-face {
  font-family: 'ModernPictogramsNormal';
  src: url('modernpics-webfont.eot');
  src: url('modernpics-webfont.eot?#iefix') format('embedded-opentype'),
    url('modernpics-webfont.woff') format('woff'),
    url('modernpics-webfont.ttf') format('truetype'),
    url('modernpics-webfont.svg#ModernPictogramsNormal') format('svg');
  font-weight: normal;
  font-style: normal;
}

As you can see, we told our CSS that “before” the paragraph, we wanted to insert the letter “O”, which corresponds to the iPhone graphic in the Modern Pictograms font. The @font-face code that I used here is copied and pasted straight from the awesomely convenient @font-face kits found on Font Squirrel.

Next up, we scooted the iPhone graphic into place. By utilizing absolute positioning here, we pull the graphic out of the normal flow. However, it’s bound to the space of our button because of the relative positioning context that we applied in a previous step. From here, we nudge it ten pixels from the top and twenty from the left, and then we’re all set.

Progress Check

As you can see, the icon from the font looks perfect in out little button. All that’s left for us to do know, is round off our corners, reduce the width and set a hover transition.

Step 5: Make the Circle

Now that our button looks roughly how we want when it’s expanded, it’s time to contract it. To do this, go back to our “appstorebutton” hook and set the width to 80px, then add in a border radius of 40px.

.appstorebutton {
  height: 80px;
  width: 80px;
  margin: 50px;
  position: relative;
  overflow: hidden;
 
  -webkit-border-radius: 40px;
     -moz-border-radius: 40px;
          border-radius: 40px;
}

Progress Check

Now our button has collapsed into a nice little circle. Since our overflow is hidden, you won’t see any of the text. In the next step, we’ll see how to bring it all back.

Step 6: Expand on Hover

To finish off our animated button, we need to add in a transition and a hover state. Our transition will target the width of the .appstorebutton class with a duration of one second and a timing function of “ease.”

Then, once the user hovers over the button, it will expand to the 275px width that we had used before.

.appstorebutton {
  height: 80px;
  width: 80px;
  margin: 50px;
  position: relative;
  overflow: hidden;
  float: left;
 
  -webkit-border-radius: 40px;
     -moz-border-radius: 40px;
   	  border-radius: 40px;
 
  -webkit-transition: width 1s ease;
     -moz-transition: width 1s ease;
       -o-transition: width 1s ease;
      -ms-transition: width 1s ease;
	  transition: width 1s ease;
}
 
.appstorebutton:hover {
  width: 275px;
}

Progress Check

Our button is all finished! At this point everything should be working perfectly. If you’ve followed along, your result should look like the one below.

Step 7: Add The Others

Now that we have one button all ready to go, it’s time to expand this idea into a set of three buttons. Add two more divs to your HTML and give them each a unique class like I did below.

<div class="appstorebutton iphone">
  <a href="#"><p><small>Available on the iTunes</small> App Store</p></a>
</div>
 
<div class="appstorebutton ipad">
  <a href="#"><p><small>Available on the iTunes</small> App Store</p></a>
</div>
 
<div class="appstorebutton mac">
  <a href="#"><p><small>Available on the Mac</small> App Store</p></a>
</div>

From here we follow the steps that we did before to insert the icons using the :before pseudo element. The iPad icon is “Q” in our icon font, but unfortunately there’s no laptop or iMac that we can use for the Mac App Store icon. For this, I went over and grabbed an icon from the fabulous Noun Project (I had to tweak it a little to make it closer to the others).

To finish everything off, I gave each button a unique color using the special classes that we applied in our HTML. Use these to apply any other button-specific styles that you’d like to use.

.iphone small:before {
  content: "O";
  position: absolute;
  font: 70px/1 'ModernPictogramsNormal', Helvetica, sans-serif;
  top: 10px;
  left: 20px;
}
 
.ipad small:before {
  content: "Q";
  position: absolute;
  font: 70px/1 'ModernPictogramsNormal', Helvetica, sans-serif;
  top: 10px;
  left: 13px;
}
 
.mac small:before {
  content: url('imac.png');
  position: absolute;
  top: 22px;
  left: 19px;
}
 
 
/*Button Colors*/
.iphone {
  background: #7b7a7f;
}
 
.ipad {
  background: #2ea9dc;
}
 
.mac {
  background: #dc2e2e;
}

See Them in Action!

All of your hard work has paid off and you have a neat little button set to show for it. If you haven’t been following along and building the buttons yourself, click below to take the result for a test drive.

Demo: Click here to launch the demo.

Conclusion

Little project like these are great for keeping your CSS chops fresh and your brain in a mode of constantly thinking up new design ideas.

Have you seen any other creative App Store buttons recently? Let us know in the comment area below.

Create Stunning Effects With CSS Transition Delays

noreply@blogger.com (UXAWY) — Mon, 12 Nov 2012 12:45:00 +0000

I’m a huge fan of CSS transitions. Sure, they can be abused but on the whole they’re a really great and easy way to add a little life to your web pages. And let’s face it, they’re flat out fun to play with.

I’ve covered transitions a million different ways, but there’s one feature that I hardly ever touch: transition delays. Why would you want to delay your transition? It turns out that the effects that you can achieve become much more complex and impressive when you incorporate this one extra parameter. Let’s jump in and build some cool demos to show off how it works.

What We’re Building

If you’d like to take a sneak peek at what we’ll be building today, check out the three demos below:

The Syntax

Before we jump into building anything, it’s worth it to refresh ourselves on the CSS transition syntax. There are four different parameters associated with transitions in CSS: property, duration, timing function and delay.

You can set the values for each of these properties individually using the syntax below. Keep in mind that you’ll want to run this code through Prefixr to make sure you’ve covered the various browsers.

transition-property: opacity;
transition-duration: 1s;
transition-timing-function: ease;
transition-delay: 2s;

Though this is the most straightforward way to declare a transition, it’s really a horribly bulky way to go about it. When we account for all of the various required prefixes, this chunk of code becomes enormous:

-webkit-transition-property: opacity;
   -moz-transition-property: opacity;
     -o-transition-property: opacity;
    -ms-transition-property: opacity;
        transition-property: opacity;
 
-webkit-transition-duration: 1s;
   -moz-transition-duration: 1s;
     -o-transition-duration: 1s;
    -ms-transition-duration: 1s;
        transition-duration: 1s;
 
-webkit-transition-timing-function: ease;
   -moz-transition-timing-function: ease;
     -o-transition-timing-function: ease;
    -ms-transition-timing-function: ease;
        transition-timing-function: ease;
 
-webkit-transition-delay: 2s;
   -moz-transition-delay: 2s;
     -o-transition-delay: 2s;
    -ms-transition-delay: 2s;
        transition-delay: 2s;

As you can see, this is a heck of a lot of code for one simple transition. For this reason, coders typically utilize the much more concise shorthand version. With this method, we can take the huge chunk of code above and convert it to the following, much more manageable snippet.

-webkit-transition: opacity 1s ease 2s;
   -moz-transition: opacity 1s ease 2s;
     -o-transition: opacity 1s ease 2s;
    -ms-transition: opacity 1s ease 2s;
        transition: opacity 1s ease 2s;

The Shorthand Syntax

To be sure we’re all on the same page, here’s a visual breakdown of the transition shorthand.

As you can see, the traditional method is to list the property that you want to enable the transition on, followed by the duration of the transition, the easing function and finally the delay. This syntax isn’t super strict though. For instance, you can swap the position of the easing function and the delay and the transition will still work. However, the order shown above is from the official spec so I recommend sticking to it.

One thing that I do frequently though is simply leave off the delay property. It defaults to zero seconds, so in the event that you want no delay, you can simply write the following:

transition: opacity 1s ease;

The Power of Transition Delays

Now that we understand the syntax behind transitions, let’s talk about why in the world you would want a delay on a transition. There may be several reasons that you might want to use this property, but the one that I’m going to focus on today is accomplishing complex animations involving multiple steps. We’ve played with multiple step transitions a little bit in previous articles but today we’re really going to have some fun.

Basically, the concept here is that you trigger two or more transitions on an event, but use delays to make them occur at different times. So let’s say we have our first transition set to last for one second, we can then set a delay of one second on our second transition to make it begin as soon as the first one ends. The results can be quite impressive!

Sequential Message

The first idea that pops into my head for utilizing delays is to set up some sort of message that presents itself to the user one piece at a time. Let’s say we want to have three pieces of text that fly in and out of a div at different times. The first step is to lay out how it all works so you can wrap your mind around it.

Default Message: “Hover Here”
One second fly out of “Hover Here”
Wait one second, then fly in second message: “Greetings!”
Wait two seconds, then fly in third message: “How are you?”
Hover out returns to default message

As you can see, we’ll first instruct the user to hover over the div, then fly out the hover message as two more messages fly in, the first of which will wait one second and the second will wait two seconds.

HTML

To bring this demo to life, we need a div that contains three different paragraphs like so. Obviously, if you were using this is a live project, you’d want to apply a class or ID, but I’ll keep it simple here.

<div>
  <p>Hover Here</p>
  <p>Greetings!</p>
  <p><small>How Are You?</small></p>
</div>

CSS

To start the CSS, we’ll style the div and paragraphs. There are a few important things here to consider. First, notice the relative positioning and the hidden overflow on the div, these are important so be sure to include them.

Next, notice that I’ve absolutely positioned the text items and pushed them up and out of the bounds of the div so that they’re not visible by default. I also included a completely optional fancy Sass 3D effect. For the complete mixin, check out this article.

div {
  height: 300px;
  background: #f3f3f3;
  position: relative;
  overflow: hidden;
}
 
/*Paragraph*/
p {
  position: absolute;
  left: 10%;
  margin: 0;
  top: -200px;
  font: bold 70px/1 Helvetica, sans-serif;
  color: #6d879d;
 
  @include threedeetext(#6d879d);
 
}
 
small {
  font-size: 40px;
}

Now it’s time to nudge our first paragraph into place and create our first transition. To do this, we’ll use the nth-child selector to target the first paragraph (“Hover Here”). Place it fifty pixels from the top, add a one second transition with no delay and create a hover effect that zooms it out of view.

/*Hover Here Text*/
p:nth-child(1){
  top: 50px;
  -webkit-transition: top 1s ease;
     -moz-transition: top 1s ease;
       -o-transition: top 1s ease;
      -ms-transition: top 1s ease;
          transition: top 1s ease;
}
 
div:hover p:nth-child(1) {
  top: -100px;
}

To finish off this demo, we need to create a hover event for the second and third paragraphs. They’re basically the same, just make sure that the “Greetings” paragraph has a one second delay and the “How are you?” paragraph has a two second delay. Also be sure to position the last paragraph further down.

 
/*Greetings Hover*/
div:hover p:nth-child(2) {
  top: 50px;
  -webkit-transition: top 1s ease 1s;
     -moz-transition: top 1s ease 1s;
       -o-transition: top 1s ease 1s;
      -ms-transition: top 1s ease 1s;
          transition: top 1s ease 1s;
}
 
/*How Are You? Hover*/
div:hover p:nth-child(3) {
  top: 110px;
  -webkit-transition: top 1s ease 2s;
     -moz-transition: top 1s ease 2s;
       -o-transition: top 1s ease 2s;
      -ms-transition: top 1s ease 2s;
          transition: top 1s ease 2s;
}
 
/*Hover Out Transitions*/
p:nth-child(3), p:nth-child(2) {
  -webkit-transition: top 0.2s ease 0s;
     -moz-transition: top 0.2s ease 0s;
       -o-transition: top 0.2s ease 0s;
      -ms-transition: top 0.2s ease 0s;
          transition: top 0.2s ease 0s;
}

Live Demo

That’s all there is to it! Now let’s check out the live demo on Tinkerbin. Here you’ll be able to see and tweak the code, be sure to play around and see what you can come up with!

Demo: Click here to launch. Note that you’ll have to change the CSS mode to “Sass” and hit “Run” to see the 3D text effect.

One Letter At a Time

For this one, we’re only going to use a single message. However, each letter of the message will come flying into place individually. The result will be really cool and very different from what you traditionally see done with CSS.

HTML

Unfortunately, CSS doesn’t have a great way to target individual letters in a string (yet), so our HTML has to get all messy with spans. It’s a pain and the code looks a little sloppy, but it’s the best we can do without bringing JavaScript into the picture, which is out of the scope of this tutorial.

<div>
  <p><span>H</span><span>e</span><span>l</span><span>l</span><span>o</span></p>
</div>

CSS

Our first chunk of CSS will set up our div, just like last time, and style the letters. I’m using the Google Web font “Bree Serif”. I also set the opacity to 0, the position to absolute and transformed the text to uppercase.

div {
  background: #eee;
  height: 200px;
  position: relative;
}
 
span {
  font: 400 100px/1 'Bree Serif', Helvetica, sans-serif;
  margin: 50px;
  opacity: 0;
  text-transform: uppercase;
  position: absolute;
}

Now we have to apply a different transition to each individual letter. To accomplish this, use nth-child just like last time and target the spans. Notice how the primary difference here is that the delay reduces each time, starting at 0.4s and making its way down to 0.

span:nth-child(5) {
  -webkit-transition: all 0.1s ease 0.4s;
     -moz-transition: all 0.1s ease 0.4s;
       -o-transition: all 0.1s ease 0.4s;
      -ms-transition: all 0.1s ease 0.4s;
          transition: all 0.1s ease 0.4s;
}
 
span:nth-child(4) {
  -webkit-transition: all 0.1s ease 0.3s;
     -moz-transition: all 0.1s ease 0.3s;
       -o-transition: all 0.1s ease 0.3s;
      -ms-transition: all 0.1s ease 0.3s;
          transition: all 0.1s ease 0.3s;
}
 
span:nth-child(3) {
  -webkit-transition: all 0.1s ease 0.2s;
     -moz-transition: all 0.1s ease 0.2s;
       -o-transition: all 0.1s ease 0.2s;
      -ms-transition: all 0.1s ease 0.2s;
          transition: all 0.1s ease 0.2s;
}
 
span:nth-child(2) {
  -webkit-transition: all 0.1s ease 0.1s;
     -moz-transition: all 0.1s ease 0.1s;
       -o-transition: all 0.1s ease 0.1s;
      -ms-transition: all 0.1s ease 0.1s;
          transition: all 0.1s ease 0.1s;
}
 
span:nth-child(1) {
  -webkit-transition: all 0.1s ease;
     -moz-transition: all 0.1s ease;
       -o-transition: all 0.1s ease;
      -ms-transition: all 0.1s ease;
          transition: all 0.1s ease;
}

To finish this one off, we first need to declare what happens when we hover over the div. I set the spans to have an opacity of 1, brought them in from the left, and rotated them 360 degrees so that they spin into place.

From here, all that’s left is to push each individual letter into place on hover. With that finished, a single hover event will cause all of the letters to become visible and spin into place and our delays will ensure that all of this takes place sequentially.

div:hover span {
  opacity: 1;
  left: 50px;
  -webkit-transform: rotate(360deg);
     -moz-transform: rotate(360deg);
       -o-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
          transform: rotate(360deg);
}
 
div:hover span:nth-child(2) {
  left: 120px;
}
 
div:hover span:nth-child(3) {
  left: 175px;
}
 
div:hover span:nth-child(4) {
  left: 230px;
}
 
div:hover span:nth-child(5) {
  left: 280px;
}

Live Demo

With that, we’re all finished. Be sure to stop by the demo below and hover over the div to see the animation and tweak it for your own uses.

Demo: Click here to launch.

Curtain Effect

By now you get the gist of how it all works, so I won’t bore you with more explanation, but I did come up with one more demo that I thought was fun. This one uses a stack of images that gradually fall away to reveal the final image on the bottom of the stack. It’s a staggered curtain effect that is definitely a lot more than you’d expect to get on a single CSS hover event.

Demo: Click here to launch.

How Do You Use Transition Delays?

Now that you’ve see some of the ideas that I’ve had for creatively using transition delays, I’d love to see what you’ve come up with. Leave a link below and show me what you’ve got!

How to Center Anything With CSS

noreply@blogger.com (UXAWY) — Mon, 12 Nov 2012 12:43:00 +0000

Recently, we took a dive into the very core concepts behind CSS layout and explored the differences between absolute and relative positioning. We’re going to follow that up with another CSS layout talk, this time based around a fundamental question that almost every new developer asks: how do you center something?

There are a bunch of different types of web elements and layout situations, each calling for a unique solution for centering (both vertically and horizontally). Today we’ll go over a bunch of these scenarios so you can wrap your mind around how they work and come away with the confidence to center anything!

Who’s This For?

I’ve gotten a lot of commenter feedback lately from designers who struggle with the basic methods and concepts of layout in CSS. The general consensus among many of those new to CSS is that they simply “fiddle” with the code until everything finally works.

Having been there quite a few times myself, I know that this is an immensely frustrating period of your professional growth. Knowing that the answer is right there in front of you and not being able to figure it out is excruciating and time consuming.

If this sounds familiar, hopefully I can help ease you out of this period with some solid and practical advice for how to handle some common layout scenarios. If you’re a CSS ninja who can code a website blindfolded, this article probably isn’t for you. If you’re a designer who just wants a better understanding of how to take what’s in your Photoshop file and turn it into CSS, you’re in the right place. Let’s get started.

Horizontally Center an Element

The first scenario that we’ll attack is by far one of the most common: centering an element horizontally in the viewport or browser window. To get started, let’s bust out a simple div and give it some basic styling.

As you can see, by default, our div pops up in the top left of the viewport. The trick here is that we need the div to stay in the center of the window, no matter what the window’s size is currently. That means that we can’t use absolute positioning to place it at a specific point because that won’t be centered on any other possible window sizes.

Instead what we need to do is leverage the “auto” value that can be applied to margins. Here’s how this works:

As you can see, applying a single line of CSS tossed our box straight to the center of its parent, which in this case is the body. To accomplish this, I used a bit of CSS shorthand. If you need a refresher, margin shorthand starts at the top and works its way around clockwise.

You can shorten this even further if you only have two values that you need assigned. In this case, the first slot will apply to the top and bottom margins while the second slot will apply to the left and right margins. Here’s another look at our centered div, this time with the margins declared using three separate but perfectly equivalent methods.

As you can see, our element is void of top and bottom margins, but the left and right are set to auto, which keeps the item perfectly centered.

Things To Keep In Mind

There are some important things to remember about using the auto margins trick. First of all, you must have a specific width declared for the element that you’re centering. The height declaration is not necessary, you can allow the content to determine the height if you wish, which is the default setting, but the width must always be set.

It’s important to note that while this trick will work on most block level elements, not just divs, it won’t help you out with vertical centering. As an example, let’s throw a paragraph inside of a div, then attempt to center that paragraph in the space.

div {
  height: 400px;
  width: 400px;
  background: #eee;
  margin: auto;
}
 
p {
  width: 60%;
  margin: auto;
  font: 14px/1.5 Helvetica, sans-serif;
}

As you can see, I have auto margins set both on the paragraph and its parent div. This centered everything nicely horizontally, but it didn’t have any effect on the vertical position.

Center An Absolutely Positioned Element

The method above works to automatically center one item inside another, but the method assumes that you’re using the default positioning context: static. If you have absolute positioning applied, this method goes out the window.

Using the absolute and relative positioning methods we learned last week, we can apply a simply formula to solve this issue.

Here we see that on an absolutely positioned item contained inside of a relatively positioned item, we need to set the left property by plugging some numbers into this formula. Here’s a test case:

.container {
  height: 300px;
  width: 300px;
  background: #eee;
  margin: 10px auto;
  position: relative;
}
 
.box {
  height: 100px;
  width: 100px;
  background: #222;
  position: absolute;
}

Let’s see if we can center the black box horizontally. Using our formula, we can see that the left property needs to be set to 100px.

.container {
  height: 300px;
  width: 300px;
  background: #eee;
  margin: 10px auto;
  position: relative;
}
 
.box {
  height: 100px;
  width: 100px;
  background: #222;
  position: absolute;
  left: 100px;
}

With this code, we’ve set the distance between the left side of the box and the edge of its parent container to 100px, which centers it perfectly.

With Fluid Width

The method above only works if the parent container has a static width. Given the popularity of responsive design though, more and more containers are going the fluid route lately. This means that we’ll need another way to center the child that isn’t dependent on the width of the parent.

To accomplish this, we need to use a percentage for the left value. The obvious answer is to use 50%, but that won’t really work because you’re not accounting for the width of the element that you’re centering. To make it work, we need to add in a negative left margin of half the width of the child element.

Using this logic, we apply a left margin of negative fifty pixels along with a left value of 50% and our div is once again perfectly centered on the x-axis.

.container {
  height: 300px;
  width: 70%;
  background: #eee;
  margin: 10px auto;
  position: relative;
}
 
.box {
  height: 100px;
  width: 100px;
  background: #222;
  position: absolute;
 
  /*Centering Method 2*/
  margin: 0px 0 0 -50px;
  left: 50%;
}

It’s important to note that this would also work if our child element had a fluid width. We use the same steps as before and come up with something like the following:

.container {
  height: 300px;
  width: 70%;
  background: #eee;
  margin: 10px auto;
  position: relative;
}
 
.box {
  height: 100px;
  width: 70%;
  background: #222;
  position: absolute;
 
  /*Centering Method 2*/
  margin: 0px 0 0 -35%; /* Half of 70% /*
  left: 50%;
}

Dead Center an Element

Now that we have a few simple and complicated centering methods in our tool belt, it’s time to tackle the puzzle of perfectly centering an element both horizontally and vertically.

Fortunately, to pull this off, we can use the same method that we just learned, we just have to account for height. This time around we’re also going to center both the parent and the child both vertically and horizontally. Here’s the code to pull it off:

.container {
  height: 300px;
  width: 300px;
  background: #eee;
  position: absolute;
 
  margin: -150px 0 0 -150px;
  left: 50%;
  top: 50%;
}
 
.box {
  height: 100px;
  width: 100px;
  background: #222;
  position: absolute;
 
  /*Centering Method 2*/
  margin: -50px 0 0 -50px;
  left: 50%;
  top: 50%;
}

There are a few things that you need to notice here. First, this time both the parent and the child are absolutely positioned. From here, I used our negative margins trick with the left property on the container div, then did the same for the box div.

The result is that our content is completely centered and will stay that way as the browser changes size in any direction (even vertically!). Click on the image below to tinker with a live demo.

Centering Text

For my next trick, I’ll teach you something cool about centering text. We’ll start with a simple h1 element inside of a container div.

Now, I’m sure that you already know how to center this text horizontally in the space. It’s typically one of the first things you learn in CSS. Just set the text-align property to center.

.container {
  height: 400px;
  width: 400px;
  background: #eee;
  margin: 50px auto;
}
 
h1 {
  font: 40px/1 Helvetica, sans-serif;
  text-align: center;
}

Easy right? But now let’s say we want to center this line of text vertically as well. If this were a paragraph, we would probably take the methods above into account, but since it’s only a single line, we can use a nifty trick.

All we have to do is set the line-height property to the height of the container. I accomplished this below using the shorthand font syntax.

.container {
  height: 200px; /*Set line-height to this value*/
  width: 400px;
  background: #eee;
  margin: 150px auto;
}
 
h1 {
  font: 40px/200px Helvetica, sans-serif;
  text-align: center;
}

Warning: This trick only works with a single line of text, and is a bit hacky so it may not be appropriate for all situations.

Centering a Background Image

The last thing that we’re going to learn to center is a CSS background image. To get started with this, we’ll create another container div, but this time we’ll keep in empty and toss in an image using CSS.

.container {
  height: 300px;
  width: 300px;
  margin: 150px auto;
  background: #eee url(http://lorempixum.com/100/100/nature/4) no-repeat;
}

As you can see, the default place for an image to appear if no repeat is set is the top left. It turns out though that you can move it to one of nine different preassigned slots. These are shown below:

We accomplish this movement through the use of the background-position property. Simply call this property and set any of the values listed above.

.container {
  height: 300px;
  width: 300px;
  margin: 150px auto;
  background: #eee url(http://lorempixum.com/100/100/nature/4) no-repeat;
  background-position: top center;
}

As an alternative, we can use the shorthand syntax for this. Simply toss in one of the values at the end of your stream of values on the background property.

.container {
  height: 300px;
  width: 300px;
  margin: 150px auto;
  background: #eee url(http://lorempixum.com/100/100/nature/4) no-repeat center;
}

Conclusion

There you have it! You should now be completely confident in your ability to tackle almost any centering situation with CSS, from dead centering a div to vertically centering a line of text within its container and beyond.

Reach out to us on Facebook or Twitter and let us know if you found this information to be helpful and if you have any questions.

Use Abstract Geometry to Create Stunning Designs

noreply@blogger.com (UXAWY) — Mon, 12 Nov 2012 12:39:00 +0000

If you’ve ever found yourself in a design rut, wondering how to come up with some fresh ideas, then you’ve no doubt experienced how refreshing it can be to experiment with a new design style that’s completely outside of what you typically produce.

Today we’re going to do exactly that. I’ve been fascinated with a particular style lately and just itching to give it a test drive. We’ll start by analyzing this style’s characteristics through the work of others and then proceed to building something on our own using what we learn. Read on to see the step by step process.

Step One

Image source: Gilberto Taccari

How do you start a design project? You’re looking at a blank canvas and it’s time to put something on it, so what’s the first step? I suppose that just about every designer approaches this challenge uniquely. Some grab a pencil and start sketching what comes to mind, others prefer to start with a typeface and let that speak to them. As a photographer, I often look to great photos as a leaping off point for an overall aesthetic and color scheme. Give me a great photo and I can build a great page around it.

It’s good to have routines that get you off to a fast start and help you develop a unique style, but I personally find that falling into too much of a routine leaves me in a design rut where everything starts to look the same.

If you have encountered similar problems, I can’t recommend enough that you try to put yourself in the mindset of other designers by attempting to mimic their thought processes while ultimately achieving a unique result. Perhaps you always start a job by opening up Photoshop, so to mix things up you might try launching a drawing application on your iPad and picking up a good stylus.

Experimenting With Different Styles

This idea carries over to the entire design process. Experimenting with different beginning points will lead you off into new directions and have you coming up with ideas that are completely outside of the realm of your typical design style.

I often make it a practice to closely observe and analyze different design styles and then experiment with them to stretch my talents and experience.

Shapes Aplenty

In order to achieve the goals outlined above, we’re going to explore a particular type of design that has really been catching my attention lately. It’s not new and in fact has an almost late 70s early 80s appeal, yet it carries with it a timeless, simple aesthetic that I think looks great in a variety of contexts.

Specifically, I’m talking about the school of design that makes heavy use of strong, often random geometric shapes as a primary design feature. Sure, shapes are present in all design, but this style uses them boldly and simply. Here’s a fairly archetypal example from Squat Design.

Image source: Squat Design

In looking at this design, one of the first things that I notice is that the entire concept is heavily driven by diagonal lines. We typically tend to use straight lines to define our content so this instantly causes the viewer to see this as something unique and interesting.

Also notice two more interesting features. First, the photography used has been integrated in with the shapes rather than merely appearing alongside them. Further, color and transparency are two more main themes that drive this style.

Here’s another example of something from this style by Sawdust, a design firm in the UK.

Image source: Sawdust

Once again we see a lot of random shapes being used to add visual interest, heavily driven by the implementation of diagonal lines. I’m also starting to notice a trend in the use of fairly thin typography, which complements the emphasis on simple, clean lines.

This design as well as the next one have introduced some circles into the mix as well, which really stand out among all of those hard angles that you see elsewhere throughout the page.

Image source: Ryan Atkinsons & Stephan de lange

Let’s Try It!

Now that we’ve seen a few examples of what this type of design looks like, let’s give it a quick shot to see what we can come up with. Exercises like this are perfect for working out your design muscles. Try setting a time limit, say twenty minutes or so, and then experimenting with a new style within that constricted time frame to see what you come up with.

In an attempt to intentionally stray from my typical design process, I decided to start out by just grabbing some shapes to play around with in Adobe Illustrator. Given that the design style that we’re going for gives such prominence to triangles, I thought I’d start there.

After moving things around for a while, I came up with a sort of tessellation pattern that I thought looked interesting.

From here, I decided that it was time to add in some color to give those boring black triangles some character. I jumped over to Kuler and literally just grabbed the first color scheme that I saw.

Applying this color scheme to my triangles really bumped up the aesthetic nicely:

Continuing to follow my observations from above, I added some more triangles, this time with transparency effects and then tossed in some freestanding diagonal lines, which gave the entire thing a sense of motion. By now, the result was really taking on a complex, layered feel that I just loved.

Next I decided to toss in some text. A super light version of Helvetica seemed like a good fit given that thin typography pairs so well with this design style. Notice how I staggered the text to mirror the slant of the triangles. Little uses of repetition really make a design great.

Finishing Touches

From here I just kept adding and iterating until I landed on something that I thought looked complete. As you can see, I experimented with some photography and added in a few circles like we saw the other designers doing. To make the triangles a little more interesting I masked in the initials of the site.

Ultimately, as a quick experiment, I was thrilled with the way it turned out. I had been wanting to play around with an abstract geometric design style for a long time and it turned out to be every bit as mentally fulfilling as I had hoped.

Download the Desktop!

Since I had a cool design and nothing to do with it, I decided to slap it on a desktop wallpaper for your downloading pleasure. Enjoy!

Download: Click here to download.

Have You Seen This Style Elsewhere?

Now that you’ve seen my analysis of the abstract geometric design style, I’d love to hear your thoughts. Do you think this is an interesting aesthetic theme? How would you have used it differently?

If you’ve seen any similar examples lately, leave a link below so that we can check them out!

You’re a Designer and Don’t Have a Website? Get Started Now

noreply@blogger.com (UXAWY) — Mon, 12 Nov 2012 12:37:00 +0000

It is still hard for me to imagine that there are print and even web designers who don’t have their own websites. It is imperative in today’s business climate that everyone has a digital portfolio and that it is up-to-date. The hard part is just getting started.

What you don’t need is a world-class website filled with animations and color and gimmicks. What you do need to have is a clean, easy to navigate site that showcases your work. You can go all out and design a site from scratch or for a quick fix, use one of the many (and often free) host sites available to create get your portfolio and be online by the end of the week.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Portfolio Website 101

Creating a portfolio website is about more than just throwing a few images on the Internet. You should integrate your site into all of your promotional materials, such as business cards and email signatures to anyone who is interested in hiring you can check out your work. This can save you (and potential clients) time and resources.

A portfolio site can help you land new clients and is a great resource when you are looking at changing jobs. Once set up, you just need to maintain your site by adding new projects periodically so that content is fresh, includes modern styles and themes and looks relevant.

The best design portfolio sites have a few key features that each have specific purposes.

Self Promotion

You are doing good work and you should show it off. There is no easier way to sell yourself than to show off past projects. Make sure your site includes only your best work. There is no reason to add every completed project to your site.

Periodically, make sure to go through your online portfolio and clean it up. There is no magic number of items to keep live on your site, but maintain a manageable number. You want potential clients or employers to get an idea of the type of work you can do, but not be overwhelmed by it.

Think about your goals as you build your portfolio site (and understand that you can have multiple goals). Commonly, designers use a site to get hired — either at a new job or for freelance projects, to generate sales, to build a reputation as a designer and get your name and work out there and mentioned among peers and as a networking resource.

Springboard for Contacts

Make sure your site clearly states who you are, what you do and how potential clients can get in touch with you. It seems simple enough, but way too often designers put all of their best work online only to leave out key information that can help them get hired for new jobs.

Don’t stop with just your contact information. Include a little information about the types of work you take on, whether you do all of your work for a single company or take on freelance or contract-based projects. Include some of your specialties – are you an expert in websites using Flash-based animations, creating illustrations or in newspaper advertising?

Think of including your photo or mention of your blog or other information. These items will make you more personable to site visitors and help them form a connection to you. People like to work with other people and providing this information can help you gain an edge.

Clear Navigation

It is very important to group projects in a clear manner, especially for those who work across multiple platforms or mediums. You may consider dividing your site into sections for print projects, web projects and personal projects (such as self-promotional materials). If you have design work that was done on contract showcase that in addition to items you may have for sale (such as artwork).

Links and Images

If nothing else, make sure all of your links are correct (and to date) and your images are of high quality. Your visuals are what will sell your portfolio. Do not skimp here and check back frequently to ensure everything appears as it should.

Getting Started with Portfolio Tools

Building your first portfolio site does can be simple. Start with a portfolio building tool that you can customize. This makes getting a site online quick and easy for those who do not want to deal with buying a custom domain name or deal with site building and hosting.

When using one of these sites to create a portfolio, take advantage of options such as creating a URL that contains your name and including a banner with your personal information at the top of each page.

CarbonMade

CarbonMade is one of the most popular portfolio sites out there. The free version allows users to highlight five projects and 35 images and for $12 per month you can have up to 500 projects.

The great thing about CarbonMade is that it supports almost everything – still images and videos. The interface is sleek and the pre-made themes look professional and you really can get your website together in an afternoon.

The downside is that you are somewhat limited by how many items you can post at a time.

Breezi

Breezi is a from-the-ground-up site but is appealing to designers because its interface contains many controls for designers who are not familiar with HTML and coding to make from-scratch design easy. The site is still pretty new and users can still sign up for free through the end of June (and maintain a free account forever).

The big benefit to Breezi is the design controls when it comes to alignment, color and spacing. You really don’t have to know anything about HTML to build a nice looking site. The interface contains RSS and social media tools so you can add feeds to your site (this is great for designers who are also writers).

The downside to Breezi is that it looks unlike anything you have ever used, but once you get used to the setup, rolling through building a site is not too tough.

Behance

Behance is a completely free site dedicated to the portfolios of creative professionals. The site is much more of a group of portfolios than tailored website but can be a great starting point if you do not have a lot of time (or you can use it to link to from another site).

Behance has a great reputation among the design-minded and is used as a resource by many.

The downside, because it is free there are ads on the site and there are not many customization options.

Conclusion

Every designer, whether you work in the web or print (or both) platform needs to have a website to showcase work. Websites can be simple and should only contain examples of a designer’s best work. Remember, using too many items can be a little overwhelming.

Make sure to keep your portfolio up to date and make sure your contact information is easily accessible. If you are unsure of where to start when building your first site, start with an online portfolio tool. You can create a simple and effective site in just a few hours and be ready to show off your best work to a much wider audience.

The 30 Best Web Design Gallery Picks of 2012

noreply@blogger.com (UXAWY) — Mon, 12 Nov 2012 12:34:00 +0000

We’re well past the half way point of 2012, and it’s been an absolutely amazing year for web design. CSS3 and HTML5 are at the height of their game, responsive design is the poster child of modern web practices and we’re beginning to wrap our minds around new concepts such as serving up retina quality images to high resolution devices.
With all of this great stuff happening in the industry, the Design Shack Web Design Gallery is positively bursting with awesome new inspiration and I think it’s a great time to highlight the best sites that we’ve seen in 2012 so far. Read on to see our hand-picked selection of the thirty best sites submitted this year.

Quarter Rest Studios

A great site for a collaborative music design studio based in Brooklyn, New York. I particularly like the minimal layout and the use of imagery.

When was the last time?

A intriguing site that aims to challenge you and ask questions. I like the integration of the experience and the images and videos used.

Riley Cran

A simply superb portfolio site for a designer and illustrator in Vancouver, BC. I love the total lack of descriptive text, it helps to intrigue you further and draw you in.

Goosebumps Pickles

A simply gorgeous site for a Pickle company that uses stunning photography to grab your attention within a split second. I love the full use of the space and the joyously vibrant colors!

Forside

Subtle colours and professional design, with wonderfully chosen photography to match the layout.

Made by Vadim

A lengthy one page website, packed with well presented examples of Vadim’s work. A gorgeous selection of typography to boot!

Go Beyond Pixels

For a conference focused on mobile design, Go Beyond Pixels really hits the spot! It combines various styles and colours into a long one-page design, with amazing detail invested into tiny elements.

Google Ventures

This design for Google Ventures is a beautiful mix of photography and design, with a unique scrolling effect as you move further down the page.

CSS Piffle

A beautifully designed website that aims to help you make the most of CSS. I like the linear layout and the use of iconography throughout.

Art & Code

A simple, but effective, portfolio section of a site for a design agency. I like the way the designs come to life as you scroll over them, and the simple and intuitive layout.

Mike Ingham Design

An incredibly beautiful portfolio that values space and clarity. I love the layout and the fantastic use of whitespace. The way this designers previous work is displayed really works to draw you into the portfolio.

Fit for a Frame

A simple but perfectly designed site for a company that sells prints to fit in Ikea frames. I like the use of typography and the intuitive layout of the site.

FancyRhino

An intriguing site for a design company that uses horizontal scrolling, a fascinating design decision. It’s a shame you can’t easily scroll sideways and have to grab the bar, but I like the style of the site and the use of typography.

ShopLocket

A strong site that aims to introduce you to a new way to implement selling through your site. I like the strong vertical layout that takes you through the key things you need to know, and the consistent use of iconography.

Flint Boutique

A gorgeous, and perfectly pitched, site for a company that creates one-of-a-kind, custom invitations and wedding stationery. I love the typography and restrained, yet bright, use of colour throughout.

Rally Interactive

Here we have a particularly interesting design that uses triangles for displaying examples of previous work. I like the the clear layout and intuitive use of navigation.

FiftyThree

A simply perfect site to advertise a new iPad app. FiftyThree have done a beautiful job with Paper, and this website is designed to show it off. I like the restrained use of text and the subtle but intuitive footer that includes the navigation.

WWF Food Story

This is a superb site from the WWF that features a series of simple but effective infographics. I love the illustrative style and the responsiveness of the graphics, it really helps get the point across.

Merchworld

A solid and immediately striking site for music merchandise. I’m drawn in by the stark use of a grid layout. I particularly like the way the design responds to resizing.

Galpin

A design portfolio that makes a striking impact through its use of typography and concise use of text. I like the restrained use of colour and the way the site immediately plunges you into this designers portfolio.

Austin Beerworks

A stunning site for a brewery that makes a bold impact through its use of impressive typography. I love the colours of the background and the restrained use of text, you’re intrigued to see what the next slide will be.

Blind Barber

I really like the strong image focus that this site has, the huge background images giving a real sense of character and consistency to the site. The use of typography and simple iconography helps to unite the site and create a engaging experience.

Myownbike

Here we have a simply gorgeous site that’s dedicated to fixed gear bicycles. I love the minimal layout and restrained use of text, but the thing that shines through is the phenomenal photography – it’s jaw-droppingly good!

Nixon Creative

A simply gorgeous site for a web designer that makes a great statement about his design philosophy. I like the bold illustration and the restrained use of text, it all helps to draw you into the portfolio of his work.

Ride For The Brand

A superb. and effortlessly engaging, site for a digital agency that makes a mark through its unique design and navigation. Simply move your cursor to the right to get the collage of typography and illustration moving!

Andy Patrick

A superb portfolio site for a web and print designer that makes an immediate impression. I love the use of typography and the consistent design throughout the site. The gallery looks great, perfectly showcasing previous examples of his work.

Beckin Design

This is a superb site for a group of interaction and industrial designers who create unique home and outdoor products. I love the colour palette and the uniquely minimal feel of the site.

Dan Viveiros

A great portfolio for a designer that makes a distinct impact. I really like the colour scheme and the use of icons and imagery. The typography is also an effective tool to convey the stylistic ideas of the designer.

FortySeven Media

A brilliant site for a design agency that looks to blow the competition away. I like the use of typography throughout and the open nature of the site – although I’m not convinced by the cheeky head shots.

Adrian Baxter

An immediately engaging personal portfolio for a web developer that captures your imagination. I love the comic book style and the unique illustrative feel of the whole site. It really makes an impact.

Submit Your Site!

Our web design gallery is not only a great source of inspiration, it’s also an awesome way to get your site noticed. Every site in our gallery is handpicked by our gallery guru Joel Bankhead (who also wrote all of the site descriptions above) and he can’t wait to see what you’ve come up with lately.
To submit your site to our gallery, check out our submission page. In the mean time, browse through the other designs and give your creative brain a boost.

Build an Awesome CSS Slider With Four Overlays

noreply@blogger.com (UXAWY) — Mon, 12 Nov 2012 12:33:00 +0000

Today’s project is a fun one. We’re going to build a standard CSS image slider with a twist: the visible image area will be divided into four distinct sections, each with a hidden message that is revealed when the user hovers over it.

The ultimate effect is pretty awesome and I think you’re going to like it a lot. Along the way we’ll play with some animations, transitions, positioning contexts and a lot more. Let’s dive in and get started!

Sneak Peek

If you’d like to sneak a look at the finished product before we build it, check out the link below.

Demo: Click here to launch the live demo.

Props to “How Do You Roll”

My inspiration for today’s tutorial comes from the sushi place where I plan on eating dinner tonight. I stopped by their website for directions and instantly wanted to see if I could replicate the effect on the home page. The restaurant is called How Do You Roll, feel free to go check out their awesome site.

HTML

Let’s get this project started! As always, the first thing we want to do is outline our basic HTML structure. This slider is comprised of one big image area that’s split into four vertical columns. Consequently, we require one wrapper div with a “slider” class and four inner divs, each with a “panel” class.

<div class="slider">
  <div class="panel"></div>
  <div class="panel"></div>
  <div class="panel"></div>
  <div class="panel"></div>
</div>

This is our basic structure, but we need to flesh it out a little with some content. I want each panel to serve as both a source of information and a link. So the user should be able to hover, see what the panel is all about, and click to proceed to a different page. To accomplish this, we’ll toss in an h2 and a paragraph and wrap the whole dang thing in an anchor. It seems like a weird way to use an anchor, but it’s perfectly valid in HTML5.

<a href="#">
  <div class="panel">
    <h2>One</h2>
    <p>Lorem ipsum dolor sit amet...</p>
  </div>
</a>

Now that we have an overall structure and the individual panel formation figured out, we put it all together and we have all the HTML that we’ll need for this project.

<div class="slider">
 
    <a href="#">
      <div class="panel">
        <h2>One</h2>
        <p>Lorem ipsum dolor sit amet...</p>
      </div>
    </a>
 
    <a href="#">
      <div class="panel">
       <h2>Two</h2>
        <p>Lorem ipsum dolor sit amet...</p>
      </div>
    </a>
 
    <a href="#">
      <div class="panel">
        <h2>Three</h2>
        <p>Lorem ipsum dolor sit amet...</p>
      </div>
    </a>
 
    <a href="#">
      <div class="panel">
        <h2>Four</h2>
        <p>Lorem ipsum dolor sit amet...</p>
      </div>
    </a>
 
</div>

Starter Styles

To kick off our CSS, let’s get some of the generic stuff out of the way. First I threw in a little universal reset to get us all on the same page. Replace this with a better reset or normalization technique if you’re using this in a real project.

I also added a background texture and reset the link styles for the slider, just for good measure.

* {margin: 0; padding: 0;}
 
body {
  background: #eee url(subtlenet2.png); /*http://subtlepatterns.com/?p=1341*/
}
 
.slider a {
  text-decoration: none;
  color: fff;
}

Slider CSS

Now it’s time to style the slider div. Basically, we want to set a specific size for it, then give it a background image that is the same size. Then we’ll add some margins to center it, some border-radius to round the corners and a box-shadow to set it apart from the background a bit.

The big thing that you might miss in this chunk is the overflow:auto line. This is important because we want our panels to take on the rounded corner effect that we’re applying to the parent slider div.

.slider {
  height: 400px;
  width: 800px;
  background: url(http://lorempixum.com/800/400/sports/8);
  border-radius: 20px;
  overflow: hidden;
  margin: 50px auto;
 
  -webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.5);
  box-shadow: 2px 2px 8px rgba(0,0,0,0.5);
}

Progress Check

At this point, you should have a big image with rounded corners and a drop shadow along with a bunch of ugly, messy text, which we’ll fix in the next step!

Panel CSS

Our slider container is looking sharp, now it’s time to put the panels in order. Given that our container is 800px by 400px, each panel needs to be set at 200px by 400px, meaning that each panel will occupy the full height and one quarter of the width. From there we just need to float them to the left and they’ll line up just like we want.

The interesting part here is that I’ve set the color and background to transparent, which makes the panels invisible. This is because we only want them to show up on hover. The default state should indeed be hidden.

The final step here is to add the CSS for a transition so that the panels fade into place when the user hovers. Notice that I actually declared two separate transitions separated by a comma (one for the color and one for the background-color).

.panel {
  width: 200px;
  height: 400px;
  background: transparent;
  color: transparent;
  float: left;
  overflow: hidden;
 
  -webkit-transition: color 0.5s ease, background-color 0.5s ease;
  -moz-transition: color 0.5s ease, background-color 0.5s ease;
  -o-transition: color 0.5s ease, background-color 0.5s ease;
  -ms-transition: color 0.5s ease, background-color 0.5s ease;
  transition: color 0.5s ease, background-color 0.5s ease;
}

Panel Typography

Next, it’s time to get the typography in order. Admittedly, I didn’t do this with the panels set to invisible but instead gave the elements a color, styled them and then reverted them back to hidden.

Make sure you style both the paragraph and the h2. I made the header big, bold and moved down from the top quite a bit. Both the header and the paragraph also get a set width of 150px, which makes it easy to center them in the space despite the left alignment.

.panel h2 {
  font: bold 35px/1.5 Helvetica, Verdana, sans-serif;
  width: 150px;
  margin: 55px auto 0 auto;
}
 
.panel p {
  font: 200 11px/1.5 Helvetica, Verdana, sans-serif;
  width: 150px;
  margin: 0 auto;
}

Panel Hover

When the user hovers over one of our panels, I want it to become visible again. I do this by giving the background and text a color. I set the background to black, with a little transparency to let the underlying image show through, and the paragraph to white.

.panel:hover {
  background: #000; /*for old browsers*/
  background: rgba(0,0,0,0.8);
  color: #fff;
}

Progress Check

You should now have fully functioning panels! If this is all you were looking to achieve, you can stop here, no further work necessary. Even without the next step, it’s still a great effect.

Animate The Background

This last step is completely optional, and mind you it won’t work at all on older browsers, but the original inspiration for this piece had an image slider in the background. We have a static image back there and we’re now going to go back and animate it.

To do this, we need to go back to the slider declaration block and add a few things. For starters, turn your single background into four background images, with the last being the same as the first so everything loops nicely.

Next, make sure that you set the background images to have no repeat and copy the position values shown below, which will line up the images in one long horizontal row.

.slider {
  height: 400px;
  width: 800px;
  background: url(http://lorempixum.com/800/400/sports/8), url(http://lorempixum.com/800/400/sports/2), url(http://lorempixum.com/800/400/sports/3), url(http://lorempixum.com/800/400/sports/8);
  background-position: 0px 0px, 800px 0px, 1600px 0px, 3200px 0px;
  background-repeat: no-repeat;
  border-radius: 20px;
  overflow: hidden;
  margin: 50px auto;
 
  -webkit-animation: slider 15s infinite;
  -moz-animation: slider 15s infinite;
  -ms-animation: slider 15s infinite;
  -o-animation: slider 15s infinite;
  animation: slider 15s infinite;
 
  -webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.5);
  box-shadow: 2px 2px 8px rgba(0,0,0,0.5);
}

As you can see, I also threw in the animation CSS. First we name our animation (slider), then set the duration and number of iterations. To finish off the entire project, we need to define how that animation will work with keyframes. The code for this is confusing so let’s outline each step.

Step One: First background image visible
Step Two: Move everything to the left 800px, second background image visible
Step Three: Move everything to the left 800px, third background image visible
Step Four: Move everything to the left 800px, fourth background image visible (which is the same as the first image)

To split this up, we need to start at 0% and end at 100%, which leaves two steps in between. The easy solution is to make steps two and three at 33% and 66%. The math isn’t perfect, but it’s close enough. Notice how the images move over each time, bringing the next background into view.

0%: background-position: 0px 0px, 800px 0px, 1600px 0px, 3200px 0;
33% background-position: -800px 0px, 0px 0px, 800px 0px, 1600px 0;
66%: background-position: -1600px 0px, -800px 0px, 0px 0px, 800px 0;
100%: background-position: -3200px 0px, -1600px 0px, -800px 0px, 0px 0;

Now, this alone is going to make the slideshow constantly move, which we don’t want. What we want instead is for each slide to stay still for a few seconds before advancing. This is accomplished by adding in a few redundant steps so that the slides don’t advance until 10% before the next step.

0%: background-position: 0px 0px, 800px 0px, 1600px 0px, 3200px 0;
23%: background-position: 0px 0px, 800px 0px, 1600px 0px, 3200px 0;
33% background-position: -800px 0px, 0px 0px, 800px 0px, 1600px 0;
56% background-position: -800px 0px, 0px 0px, 800px 0px, 1600px 0;
66%: background-position: -1600px 0px, -800px 0px, 0px 0px, 800px 0;
90%: background-position: -1600px 0px, -800px 0px, 0px 0px, 800px 0;
100%: background-position: -3200px 0px, -1600px 0px, -800px 0px, 0px 0;

Now that we’ve got the processed outlined, we can make it happen with CSS. This requires a ton of code for the various browsers but it’s the only way we can pull it off so we’ll just have to live with it.

@keyframes "slider" {
 0% {
    background-position: 0px 0px, 800px 0px, 1600px 0px, 3200px 0;
 }
 23% {
    background-position: 0px 0px, 800px 0px, 1600px 0px, 3200px 0;
 }
 33% {
    background-position: -800px 0px, 0px 0px, 800px 0px, 1600px 0;
 }
 56% {
    background-position: -800px 0px, 0px 0px, 800px 0px, 1600px 0;
 }
 66% {
    background-position: -1600px 0px, -800px 0px, 0px 0px, 800px 0;
 }
 90% {
    background-position: -1600px 0px, -800px 0px, 0px 0px, 800px 0;
 }
 100% {
    background-position: -3200px 0px, -1600px 0px, -800px 0px, 0px 0;
 }
 
}
 
@-moz-keyframes slider {
 0% {
   background-position: 0px 0px, 800px 0px, 1600px 0px, 3200px 0;
 }
 20% {
   background-position: 0px 0px, 800px 0px, 1600px 0px, 3200px 0;
 }
 33% {
   background-position: -800px 0px, 0px 0px, 800px 0px, 1600px 0;
 }
 56% {
   background-position: -800px 0px, 0px 0px, 800px 0px, 1600px 0;
 }
 66% {
   background-position: -1600px 0px, -800px 0px, 0px 0px, 800px 0;
 }
 90% {
   background-position: -1600px 0px, -800px 0px, 0px 0px, 800px 0;
 }
 100% {
   background-position: -3200px 0px, -1600px 0px, -800px 0px, 0px 0;
 }
 
}
 
@-webkit-keyframes "slider" {
 0% {
   background-position: 0px 0px, 800px 0px, 1600px 0px, 3200px 0;
 }
 20% {
   background-position: 0px 0px, 800px 0px, 1600px 0px, 3200px 0;
 }
 33% {
   background-position: -800px 0px, 0px 0px, 800px 0px, 1600px 0;
 }
 56% {
   background-position: -800px 0px, 0px 0px, 800px 0px, 1600px 0;
 }
 66% {
   background-position: -1600px 0px, -800px 0px, 0px 0px, 800px 0;
 }
 90% {
   background-position: -1600px 0px, -800px 0px, 0px 0px, 800px 0;
 }
 100% {
   background-position: -3200px 0px, -1600px 0px, -800px 0px, 0px 0;
 }
 
}
 
@-ms-keyframes "slider" {
 0% {
   background-position: 0px 0px, 800px 0px, 1600px 0px, 3200px 0;
 }
 20% {
   background-position: 0px 0px, 800px 0px, 1600px 0px, 3200px 0;
 }
 33% {
   background-position: -800px 0px, 0px 0px, 800px 0px, 1600px 0;
 }
 56% {
   background-position: -800px 0px, 0px 0px, 800px 0px, 1600px 0;
 }
 66% {
   background-position: -1600px 0px, -800px 0px, 0px 0px, 800px 0;
 }
 90% {
   background-position: -1600px 0px, -800px 0px, 0px 0px, 800px 0;
 }
 100% {
   background-position: -3200px 0px, -1600px 0px, -800px 0px, 0px 0;
 }
 
}
 
@-o-keyframes "slider" {
 0% {
   background-position: 0px 0px, 800px 0px, 1600px 0px, 3200px 0;
 }
 20% {
   background-position: 0px 0px, 800px 0px, 1600px 0px, 3200px 0;
 }
 33% {
   background-position: -800px 0px, 0px 0px, 800px 0px, 1600px 0;
 }
 56% {
   background-position: -800px 0px, 0px 0px, 800px 0px, 1600px 0;
 }
 66% {
   background-position: -1600px 0px, -800px 0px, 0px 0px, 800px 0;
 }
 90% {
   background-position: -1600px 0px, -800px 0px, 0px 0px, 800px 0;
 }
 100% {
   background-position: -3200px 0px, -1600px 0px, -800px 0px, 0px 0;
 }
 
}

See It In Action!

We’re all finished! Now it’s time to have one last look at the demo.

Demo: Click here to launch the live demo.

Conclusion

I hope you enjoyed building this fun little slider as much as I did. I love how it represents a slight tweak on an old idea. It’s quite practical and really allows you to take your sliders one step further.

Leave a comment below and let us know what you think. Have you seen a slider split up like this before? How would you make it better?

5 Simple and Practical CSS List Styles You Can Copy and Paste

noreply@blogger.com (UXAWY) — Mon, 12 Nov 2012 12:32:00 +0000

Who doesn’t love a good list? We use them constantly in our markup for a variety of different situations. Today we’re going to take a look at a few simple and practical examples that you can steal and use in your own work.

We start off with a fun animated vertical list, then style up a list with thumbnails and text, another with just images and finally an ordered list where the numbers are styled differently than the rest of the type. There’s a ton of great things to learn here so let’s jump in!

HelvetiList

For our first list, we’re going to start with a simple, minimal but super attractive design that’s heavily dependent on the beauty of the typography. We’ll make use of some thin Helvetica styles and toss in a smooth animation on hover.

Demo: Check out the demo and code on CodePen.

HTML

Our markup here is dead simple. Create a div (you’ll probably want a class or ID in a live project), then toss in a header and an unordered list with five list items.

<div>
  <h2>HelvetiList</h2>
  <ul>
    <li><a href="#">Zurich</a></li>
    <li><a href="#">Geneva</a></li>
    <li><a href="#">Winterthur</a></li>
    <li><a href="#">Lausanne</a></li>
    <li><a href="#">Lucerne</a></li>
  </ul>
</div>

CSS

As we saw in the screenshot above, the list items use very thin type, subtle separators and a hover state that enlarges the font. To start, give the div a width and set your generic h2 styles.

Next, apply a list-style-type of none to ditch the bullets and reset any margins or padding that may be present. For the actual list items, I applied a slight bottom border, which provides that little divider. I did use the last-child selector, but it’s really no big deal if there’s a browser that doesn’t recognize that and decides to throw an extra border on the bottom.

Also notice that both of the times I set the font, I used CSS shorthand and applied different weights. To finish off, I applied some link styles and set the transition to enlarge the font and change the background color on hover.

div {
  width: 200px;
}
 
h2 {
  font: 400 40px/1.5 Helvetica, Verdana, sans-serif;
  margin: 0;
  padding: 0;
}
 
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
 
li {
  font: 200 20px/1.5 Helvetica, Verdana, sans-serif;
  border-bottom: 1px solid #ccc;
}
 
li:last-child {
  border: none;
}
 
li a {
  text-decoration: none;
  color: #000;
  display: block;
  width: 200px;
 
  -webkit-transition: font-size 0.3s ease, background-color 0.3s ease;
  -moz-transition: font-size 0.3s ease, background-color 0.3s ease;
  -o-transition: font-size 0.3s ease, background-color 0.3s ease;
  -ms-transition: font-size 0.3s ease, background-color 0.3s ease;
  transition: font-size 0.3s ease, background-color 0.3s ease;
}
 
li a:hover {
  font-size: 30px;
  background: #f6f6f6;
}

Thumbnail List

One really common format that you’ll see for lists is your basic “thumbnail and text” setup, which is a great way to add some nice visual interest to an otherwise boring list of paragraphs.

This is an extremely versatile list style that you can use on any number of projects. Let’s see how it works.

Demo: Check out the demo and code on CodePen.

HTML

The HTML on this one is a little more complicated. Each list item needs to have three children: an image, a headline and a paragraph. The images that I’m using are 100px by 100px so keep that in mind if you want to customize this to be a different size. Overall, this is all still really simple markup that shouldn’t trip you up in the least.

<div>
  <ul>
    <li>
      <img src="http://lorempixum.com/100/100/nature/1" />
      <h3>Headline</h3>
      <p>Lorem ipsum dolor sit amet...</p>
    </li>
 
    <li>
      <img src="http://lorempixum.com/100/100/nature/2" />
      <h3>Headline</h3>
      <p>Lorem ipsum dolor sit amet...</p>
    </li>
 
    <li>
      <img src="http://lorempixum.com/100/100/nature/3" />
      <h3>Headline</h3>
      <p>Lorem ipsum dolor sit amet...</p>
    </li>
 
    <li>
      <img src="http://lorempixum.com/100/100/nature/4" />
      <h3>Headline</h3>
      <p>Lorem ipsum dolor sit amet...</p>
    </li>
  </ul>
</div>

CSS

This one surprisingly doesn’t take too much code to pull off. Once again, we’re clearing our list styles and setting some typography related CSS. The thing that you have to understand is that you need to float your images to the left so that the paragraphs appear next to them.

* {margin: 0; padding: 0;}
 
div {
  margin: 20px;
}
 
ul {
  list-style-type: none;
  width: 500px;
}
 
h3 {
  font: bold 20px/1.5 Helvetica, Verdana, sans-serif;
}
 
li img {
  float: left;
  margin: 0 15px 0 0;
}
 
li p {
  font: 200 12px/1.5 Georgia, Times New Roman, serif;
}
 
li {
  padding: 10px;
  overflow: auto;
}
 
li:hover {
  background: #eee;
  cursor: pointer;
}

Standard Thumbnail Grid

If we’re talking unordered lists, we should throw in at least one image grid, which are almost always handled with lists. We won’t do anything too fancy, it’ll just be helpful for you to keep a form of this code on hand for quick insertion.

Demo: Check out the demo and code on CodePen.

HTML

The markup for has the basic structure of list-item>anchor>image. If you’re not used to seeing this code, it might seem pretty strange to use a list for this, but really that’s exactly what you’re creating: a big list of images. The fact that they’re arranged into a grid doesn’t negate the idea that’s it’s just a big ‘ol list at heart.

<div>
  <ul>
    <li><a href="#"><img src="http://placehold.it/150x150" /></a></li>
    <li><a href="#"><img src="http://placehold.it/150x150" /></a></li>
    <li><a href="#"><img src="http://placehold.it/150x150" /></a></li>
    <li><a href="#"><img src="http://placehold.it/150x150" /></a></li>
    <li><a href="#"><img src="http://placehold.it/150x150" /></a></li>
    <li><a href="#"><img src="http://placehold.it/150x150" /></a></li>
    <li><a href="#"><img src="http://placehold.it/150x150" /></a></li>
    <li><a href="#"><img src="http://placehold.it/150x150" /></a></li>
    <li><a href="#"><img src="http://placehold.it/150x150" /></a></li>
    <li><a href="#"><img src="http://placehold.it/150x150" /></a></li>
    <li><a href="#"><img src="http://placehold.it/150x150" /></a></li>
    <li><a href="#"><img src="http://placehold.it/150x150" /></a></li>
    <li><a href="#"><img src="http://placehold.it/150x150" /></a></li>
    <li><a href="#"><img src="http://placehold.it/150x150" /></a></li>
    <li><a href="#"><img src="http://placehold.it/150x150" /></a></li>
  </ul>
</div>

CSS

For this example, the basic structure is that you toss some margins on each of your list items and float them left. I used the “overflow:auto” trick to clear the float, set up a dark background and tossed a border on the images.

To make the demo slightly interesting, I added a hover effect that slowly applies a glow. This is of course completely optional and isn’t something you’d apply on every project.

* {
  margin: 0;
  padding: 0;
}
 
body {
  background: #333;
}
 
div {
  width: 900px;
  margin: 0 auto;
  overflow: auto;
}
 
ul {
  list-style-type: none;
}
 
li img {
  float: left;
  margin: 10px;
  border: 5px solid #fff;
 
  -webkit-transition: box-shadow 0.5s ease;
  -moz-transition: box-shadow 0.5s ease;
  -o-transition: box-shadow 0.5s ease;
  -ms-transition: box-shadow 0.5s ease;
  transition: box-shadow 0.5s ease;
}
 
li img:hover {
  -webkit-box-shadow: 0px 0px 7px rgba(255,255,255,0.9);
  box-shadow: 0px 0px 7px rgba(255,255,255,0.9);
}

Horizontal Menu

Another thing that developers use lists for is horizontal navigation menus. As a new developer, the code for this trick was something I Googled constantly so be sure to bookmark it or toss it into your snippets saver.

Demo: Check out the demo and code on CodePen.

HTML

With the thumbnail grid above, we already learned how to float list items so that they appear next to each other so here we’ll use the same technique, only with fewer items. Notice that I’ve tossed in an “active” class, which is a fairly standard practice that we’ll use to tell the user which page they’re currently on.

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li class="active"><a href="#">About</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

CSS

Here we floated our list items to the left, put a border only on the right side, strip the default link styles and setup my own, and then styled both the hover and active states.

* {
  margin: 0;
  padding: 0;
}
 
nav {
  margin: 50px;
}
 
ul {
  overflow: auto;
  list-style-type: none;
}
 
li {
  height: 25px;
  float: left;
  margin-right: 0px;
  border-right: 1px solid #aaa;
  padding: 0 20px;
}
 
li:last-child {
  border-right: none;
}
 
li a {
  text-decoration: none;
  color: #ccc;
  font: 25px/1 Helvetica, Verdana, sans-serif;
  text-transform: uppercase;
 
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
 
li a:hover {
  color: #666;
}
 
li.active a {
  font-weight: bold;
  color: #333;
}

Big Numbers Ordered List

Let’s not forget that all lists aren’t unordered lists! There’s definitely a lot of useful applications for ordered lists. One really tricky thing to do with ordered lists is style the numbers differently than the other text. Let’s see how this works.

Demo: Check out the demo and code on CodePen.

HTML

Now, how I built this is going to be super controversial. As you can see, I’m actually manually putting in the numbers despite the fact that HTML will actually do this automatically for you. There’s a good reason for this though.

To start this idea, I threw a paragraph into the list items, then coded the li type and the li>p type in different ways. However, trying to get everything to line up properly with this method was a total nightmare. Ultimately, to fix it the CSS was so messy and nasty that I abandoned it completely in favor of this simpler method which actually allows for clear, simple CSS.

<div>
  <ol>
    <li><span>1.</span><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur. Fusce nec leo ut massa viverra venenatis. Nam accumsan libero a elit aliquet quis ullamcorper arcu tincidunt. Praesent purus turpis, consectetur quis congue vel, pulvinar at lorem. Vivamus varius condimentum dolor, quis ultricies ipsum porta quis. </p></li>
    <li><span>2.</span><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur.  </p></li>
    <li><span>3.</span><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur.  </p></li>
  </ol> 
</div>

CSS

As you can see in the code below, what I did here was ditch the default numbers and then set my spans to absolute so I could push them over to the left of the paragraphs, which in turn required some extra padding on the paragraphs. It may not be the prettiest solution code-wise, but it’s the briefest and most straightforward way that I could come up with to do it without bizarre positioning bugs.

div {
  width: 500px;
  margin: 10px
}
 
ol {
  color: #ccc;
  list-style-type: none;
}
 
ol li {
  position: relative;
  font: bold italic 45px/1.5 Helvetica, Verdana, sans-serif;
  margin-bottom: 20px;
}
 
li p {
  font: 12px/1.5 Helvetica, sans-serif;
  padding-left: 60px;
  color: #555;
}
 
span {
  position: absolute;
}

Conclusion

There you have it, five super simple but dead practical list styles for you to copy and paste into your own code. If you have any other creative list ideas that you’d like to share, let us know in the comments below!

5 Simple and Practical CSS List Styles You Can Copy and Paste

noreply@blogger.com (UXAWY) — Mon, 12 Nov 2012 12:32:00 +0000

HelvetiList

Demo: Check out the demo and code on CodePen.

HTML

Our markup here is dead simple. Create a div (you’ll probably want a class or ID in a live project), then toss in a header and an unordered list with five list items.

<div>
  <h2>HelvetiList</h2>
  <ul>
    <li><a href="#">Zurich</a></li>
    <li><a href="#">Geneva</a></li>
    <li><a href="#">Winterthur</a></li>
    <li><a href="#">Lausanne</a></li>
    <li><a href="#">Lucerne</a></li>
  </ul>
</div>

CSS

As we saw in the screenshot above, the list items use very thin type, subtle separators and a hover state that enlarges the font. To start, give the div a width and set your generic h2 styles.

div {
  width: 200px;
}
 
h2 {
  font: 400 40px/1.5 Helvetica, Verdana, sans-serif;
  margin: 0;
  padding: 0;
}
 
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
 
li {
  font: 200 20px/1.5 Helvetica, Verdana, sans-serif;
  border-bottom: 1px solid #ccc;
}
 
li:last-child {
  border: none;
}
 
li a {
  text-decoration: none;
  color: #000;
  display: block;
  width: 200px;
 
  -webkit-transition: font-size 0.3s ease, background-color 0.3s ease;
  -moz-transition: font-size 0.3s ease, background-color 0.3s ease;
  -o-transition: font-size 0.3s ease, background-color 0.3s ease;
  -ms-transition: font-size 0.3s ease, background-color 0.3s ease;
  transition: font-size 0.3s ease, background-color 0.3s ease;
}
 
li a:hover {
  font-size: 30px;
  background: #f6f6f6;
}

Thumbnail List

One really common format that you’ll see for lists is your basic “thumbnail and text” setup, which is a great way to add some nice visual interest to an otherwise boring list of paragraphs.

This is an extremely versatile list style that you can use on any number of projects. Let’s see how it works.

Demo: Check out the demo and code on CodePen.

HTML

<div>
  <ul>
    <li>
      <img src="http://lorempixum.com/100/100/nature/1" />
      <h3>Headline</h3>
      <p>Lorem ipsum dolor sit amet...</p>
    </li>
 
    <li>
      <img src="http://lorempixum.com/100/100/nature/2" />
      <h3>Headline</h3>
      <p>Lorem ipsum dolor sit amet...</p>
    </li>
 
    <li>
      <img src="http://lorempixum.com/100/100/nature/3" />
      <h3>Headline</h3>
      <p>Lorem ipsum dolor sit amet...</p>
    </li>
 
    <li>
      <img src="http://lorempixum.com/100/100/nature/4" />
      <h3>Headline</h3>
      <p>Lorem ipsum dolor sit amet...</p>
    </li>
  </ul>
</div>

CSS

* {margin: 0; padding: 0;}
 
div {
  margin: 20px;
}
 
ul {
  list-style-type: none;
  width: 500px;
}
 
h3 {
  font: bold 20px/1.5 Helvetica, Verdana, sans-serif;
}
 
li img {
  float: left;
  margin: 0 15px 0 0;
}
 
li p {
  font: 200 12px/1.5 Georgia, Times New Roman, serif;
}
 
li {
  padding: 10px;
  overflow: auto;
}
 
li:hover {
  background: #eee;
  cursor: pointer;
}

Standard Thumbnail Grid

Demo: Check out the demo and code on CodePen.

HTML

<div>
  <ul>
    <li><a href="#"><img src="http://placehold.it/150x150" /></a></li>
    <li><a href="#"><img src="http://placehold.it/150x150" /></a></li>
    <li><a href="#"><img src="http://placehold.it/150x150" /></a></li>
    <li><a href="#"><img src="http://placehold.it/150x150" /></a></li>
    <li><a href="#"><img src="http://placehold.it/150x150" /></a></li>
    <li><a href="#"><img src="http://placehold.it/150x150" /></a></li>
    <li><a href="#"><img src="http://placehold.it/150x150" /></a></li>
    <li><a href="#"><img src="http://placehold.it/150x150" /></a></li>
    <li><a href="#"><img src="http://placehold.it/150x150" /></a></li>
    <li><a href="#"><img src="http://placehold.it/150x150" /></a></li>
    <li><a href="#"><img src="http://placehold.it/150x150" /></a></li>
    <li><a href="#"><img src="http://placehold.it/150x150" /></a></li>
    <li><a href="#"><img src="http://placehold.it/150x150" /></a></li>
    <li><a href="#"><img src="http://placehold.it/150x150" /></a></li>
    <li><a href="#"><img src="http://placehold.it/150x150" /></a></li>
  </ul>
</div>

CSS

To make the demo slightly interesting, I added a hover effect that slowly applies a glow. This is of course completely optional and isn’t something you’d apply on every project.

* {
  margin: 0;
  padding: 0;
}
 
body {
  background: #333;
}
 
div {
  width: 900px;
  margin: 0 auto;
  overflow: auto;
}
 
ul {
  list-style-type: none;
}
 
li img {
  float: left;
  margin: 10px;
  border: 5px solid #fff;
 
  -webkit-transition: box-shadow 0.5s ease;
  -moz-transition: box-shadow 0.5s ease;
  -o-transition: box-shadow 0.5s ease;
  -ms-transition: box-shadow 0.5s ease;
  transition: box-shadow 0.5s ease;
}
 
li img:hover {
  -webkit-box-shadow: 0px 0px 7px rgba(255,255,255,0.9);
  box-shadow: 0px 0px 7px rgba(255,255,255,0.9);
}

Horizontal Menu

Demo: Check out the demo and code on CodePen.

HTML

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li class="active"><a href="#">About</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

CSS

Here we floated our list items to the left, put a border only on the right side, strip the default link styles and setup my own, and then styled both the hover and active states.

* {
  margin: 0;
  padding: 0;
}
 
nav {
  margin: 50px;
}
 
ul {
  overflow: auto;
  list-style-type: none;
}
 
li {
  height: 25px;
  float: left;
  margin-right: 0px;
  border-right: 1px solid #aaa;
  padding: 0 20px;
}
 
li:last-child {
  border-right: none;
}
 
li a {
  text-decoration: none;
  color: #ccc;
  font: 25px/1 Helvetica, Verdana, sans-serif;
  text-transform: uppercase;
 
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
 
li a:hover {
  color: #666;
}
 
li.active a {
  font-weight: bold;
  color: #333;
}

Big Numbers Ordered List

Demo: Check out the demo and code on CodePen.

HTML

<div>
  <ol>
    <li><span>1.</span><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur. Fusce nec leo ut massa viverra venenatis. Nam accumsan libero a elit aliquet quis ullamcorper arcu tincidunt. Praesent purus turpis, consectetur quis congue vel, pulvinar at lorem. Vivamus varius condimentum dolor, quis ultricies ipsum porta quis. </p></li>
    <li><span>2.</span><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur.  </p></li>
    <li><span>3.</span><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur.  </p></li>
  </ol> 
</div>

CSS

div {
  width: 500px;
  margin: 10px
}
 
ol {
  color: #ccc;
  list-style-type: none;
}
 
ol li {
  position: relative;
  font: bold italic 45px/1.5 Helvetica, Verdana, sans-serif;
  margin-bottom: 20px;
}
 
li p {
  font: 12px/1.5 Helvetica, sans-serif;
  padding-left: 60px;
  color: #555;
}
 
span {
  position: absolute;
}

Conclusion

6 Portfolio Design Mistakes That Drive Me Nuts

noreply@blogger.com (UXAWY) — Mon, 12 Nov 2012 12:25:00 +0000

Your public portfolio is one of the most important things you’ll ever design. It presents you to the world and, if you’re a freelancer, tends to play a major role in whether or not people choose to hire you.

Because of my role as the editor of Design Shack, I’ve viewed a ton of online portfolios and today I’d like to walk through some of the weaknesses I see time and time again. Read on to see if you’ve made some of these mistakes.

1. Listing Your Age

Oddly enough, this is an extremely common piece of information to find on web designer portfolios. Designers feel the need to introduce themselves to make the page more personal, but can’t think of anything good to say and therefore revert to the basics: “I’m a 22 year old web designer from Papua New Guinea.”

Only Kids Brag on Their Age

This bugs me every single time I see it. It’s not the worst mistake that you could make, but it just reeks of a rookie move. This is evident by the fact that you never see someone bragging about being a 43 year old web designer. It’s only the young folks who feel the need to wear their age like a badge. I’m surprised I’ve never read one boasting about being “twenty and a half.”

“You never see someone bragging about being a 43 year old web designer.”

You’ll find that the experienced designers brag about exactly that: experience. “I’ve been building websites for Fortune 500 companies for over 10 years.” Now that’s a number to brag about.

Who Cares?

Here’s my gripe with this piece of information: who gives a crap? Do you want people to hire you based on talent and experience or on the year that you were born? If you don’t want potential clients to judge your age, then why are you broadcasting it?

The only time that a potential client might think twice about hiring someone based on age is if they seem too young, and as I said above the only people who do this are the twenties crowd so they’re really just shooting themselves in the foot.

Just The Necessities

Skip the fluff. I don’t want to know how old you are, what type of computer mouse you use or how often you buy a new pair of Converse. Tell me what you do and prove it with some solid examples. Which brings me to my next point.

2. Showing School Projects

Here’s another one that always gets me with the young designers. They always feel the need to show off their school projects. This ain’t your momma’s refrigerator junior, it’s a professional portfolio and clients want to see real work.

“This ain’t your momma’s refrigerator junior, it’s a professional portfolio.”

If It’s All You Have, Show It

I jumped a little bit ahead of myself with this one, let’s take a step back. If you’re fresh out of school and have no client work under your belt, then you should absolutely be encouraged to build a site to show it off. Lots of potential clients won’t mind one bit, especially if that inexperience comes with a low price tag.

Show Paid Work When Possible

That being said, once you’ve been out in the real world for a little while and have a few projects to show off, you should consider pulling down your student work. Otherwise, I’ll browse through your portfolio and think “Hey, this guy is really good! Oh wait, student work? He’s a noob, let’s move along. I need a pro.”

See how much of a double standard that is? Even if I think your work looks top notch at first, when I see those student projects, I immediately write you off as inexperienced. Does that suck? Absolutely! Is it fair? Nope. Is it how the world works. You bet.

3. Lack of Confidence

There’s a time and place to be humble, but your professional portfolio is not it. So many times I see really talented designers sell themselves short with self-depurating website copy and it drives me nuts.

“There’s a time and place to be humble, but your professional portfolio is not it.”

“I’m just getting started” or “I hope to one day achieve…” these things might not sound so bad as you’re writing them but they shatter my confidence in your ability to deliver quality results.

Clients Mirror Your Confidence Level

If you can’t muster up enough confidence in yourself to tell me that you’re an awesome designer, odds are I’m not going to come to that conclusion for you.

As a potential client, how you talk about yourself tells me quite a bit. If you sound hesitant about your ability, I’m going to instantly pick up on that and either look elsewhere or exploit the weakness to get you to do more work for less money.

Acting a Fool

Now, that being said, there’s definitely a point where confidence can become hubris. If all of the copy on your portfolio makes you sound full of yourself, then that’s going to turn me away just as quickly as a lack of confidence.

This is a fine line to walk and it’s not always easy to find the balance. You have to figure how to tell me how great you are without sounding like you’re bragging about how great you are.

“You have to figure how to tell me how great you are without sounding like you’re bragging about how great you are.”

Often, the best way to do this is to let your work speak for itself. If your work really is amazing, then I won’t need you to try so hard to convince me of that fact.

4. Grammar

This one is really difficult for designers, including myself. These days I write more than I design and you still don’t have to look very hard to find a grammatical error that I’ve committed.

What I’m talking about here is the big stuff. It’s not the end of the world if you dangle a participle or end a sentence with a preposition, just make sure that a reasonably intelligent person can read your sentences without wondering how you managed to graduate from high school.

“Make sure that a reasonably intelligent person can read your sentences without wondering how you managed to graduate from high school.”

What If English Isn’t Your Thing?

The designers who I personally see really struggling in this area are those for whom English isn’t their first language. This becomes pretty easy to spot when reading website copy.

This is a touchy subject so I’ll first say “kudos,” because I personally only speak one language (many Americans are lame like that). If you speak two or more languages, you’re well ahead of me.

That being said, if I were to release my professional portfolio in another language, even if I spoke a little bit of that language, I’d still drop a few bucks to have someone perform a proper translation.

“You want to get the message across that you’re a good designer, don’t let bad grammar stand in the way of that fact. ”

This is simply a matter of putting your best foot forward. You want to get the message across that you’re a good designer, don’t let bad grammar stand in the way of that fact.

5. Blog Neglect

Here’s one that we’ve all probably struggled with at one time or another. You start up a new blog and you’re brimming with enthusiasm for how often you’re going to update it.

You’re good about it at first, but then a few months down the line you start to slack off and before you know it that blog is a dead dream stuffed into the back of the closet with your astronaut helmet.

Digital Cobwebs

The interesting thing that you probably haven’t considered though is what message you’re sending to the people who visit your site. One of the first things that I do when I visit a blog is look at the date of the most recent post, what will this tell me about your blog?

“If your most recent post is over a year old, then it makes your site feel like it has cobwebs on it.”

If your most recent post is over a year old, then it makes your site feel like it has cobwebs on it. This makes me doubt whether you’re even actively taking on clients anymore. Was the freelance thing a failed project? Did you abandon client work in favor of a full time job?

Do It Well or Not at All

A blog makes a great addition to any portfolio, but if it’s not done well, it can actually drag you down. My advice is simple: either dedicate yourself to updating your blog on a regular basis with quality, interesting content, or simply don’t have one.

You don’t have to write a post every day or even every week, but at the very least you should try getting something up monthly to keep people interested.

“You don’t have to write a post every day or even every week, but at the very least you should try getting something up monthly to keep people interested.”

While we’re on the topic, use your portfolio’s blog as a place to share knowledge, disseminate information, and maybe score some search traffic, not to post photos of your cats or rant about who you’re voting for in the next election. This content belongs on your personal blog. Keep it there.

6. Showcasing Where You Suck

There’s an interesting trend in web design portfolios right now that not only showcases your skill set, but also weighs the different items against each other. This usually takes form of some little graph or visualization like the following.

Pretty neat right? This quickly gives me a feel for the services that you offer and the proficiency you have with each. Thanks for being so honest!

The problem of course with this method is that the way you read it and the way that I read it as a potential client are different. Here’s what you’re hoping that I see:

Unfortunately, here’s what I really see:

Don’t Point Out Your Weaknesses

It’s good to have strengths and weaknesses, everyone does. However, I’m not convinced that showcasing your weaknesses in a pretty graphic is the best marketing strategy.

“I’m not convinced that showcasing your weaknesses in a pretty graphic is the best marketing strategy.”

To utilize an old simile, this is like putting a gold ring in a pig’s snout. You may be trying to dress up your weaknesses with good design, but it’s likely a waste of effort because they’re still ugly.

Think Before You Design

The real takeaway from this article is to carefully consider each component of your web design portfolio, from the work you show to the copy that you write.

At every single stage, ask yourself whether you’re really improving the quality of the finished product or are in fact reducing the likelihood of someone hiring you. You’ll likely find that a lot of the added fluff that you thought was helping the page is really bringing you down.

Maintaining Consistency in Your UI Design

noreply@blogger.com (UXAWY) — Mon, 12 Nov 2012 12:23:00 +0000

Consistency in UI design is an old school principle and somewhat forgotten in some of today’s web and application designs. It seems like designers are choosing to omit consistency from their interfaces.

In the case of mobile application design, some designers are choosing to re-invent, re-create or even completely break the hardware standard interactions with their own unique interface patterns. While breaking the consistency between the hardware UI rules and your apps experience may not be a bad idea, breaking your own apps consistency can be.

Three Steps to Consistent UI Design

There are basically three types of consistency you should think about when designing your web and mobile app designs:

1. Stay consistent with device UI guidelines and behaviors
2. Stay consistent with other similar sites or applications
3. Stay consistent with your own design

For the purpose of this article I’d like to focus more on the third — keeping the consistency in your own user interface. This is kind of a big deal mainly because you don’t want to confuse or surprise your users inside your own app.

You don’t want a user going from you home page to a subpage and see different styling or even vastly different user interactions. This kind of thing can surprise users or in some case even scare them away. Consistency is not only a big deal to the overall usability of the site, it can greatly increase conversion as well.

Consistent Structure and Interactions

This is key to creating a consistent UI. Sometimes when we develop we forget about how the structure and interaction is going to affect the overall user experience. But just as blueprinting and creating plans is important when building a home or building, it’s also important for creating a consistent, usable UI. There are a few things to think about and plan ahead before you start to write code.

1. Consider how to consistently place elements throughout your site or app.
2. Think about what UI patterns you’ll be using.
3. Plan out what input elements you’ll need.
4. Figure out what icons you’ll need, and pick or design a good icon set that covers them all.

Element placement is a huge way to reduce surprise in the user and create consistent, reliable expectations. Keep your navigations in the same place, nothing irritates a user more quickly than moving or disappearing navigational elements. Also keep logos and other branding items in the same locations through out the site.

“Nothing irritates a user more quickly than moving or disappearing navigational elements”

If you are using a sidebar, don’t shake up the side bar to much by changing what is present in them from page to page. Some of this may be relevant to the content on the page, but avoid removing or even moving import overall elements like search forms. One big thing to keep placed consistently is the login and user setting links or buttons.

Consider UI Patterns

Plan ahead and think about what UI patterns you will need. Are you going to need a gallery? Modals? Accordions? Sidebars? Planning design patterns ahead of time will not only help you develop and design your app quicker, but thinking about what design patterns you’ll need also helps to figure out your content ahead of time — which can save you loads of time as well.

This will also solve problems and answer questions ahead of time, this way when you come to a section or page in your site that requires a UI decision, you’ve already made it and you won’t get caught creating a mishmash of design patterns throughout your site.

Think about your forms before hand as well. Plan out what form elements you’re going to need and figure out the elements that you won’t need or that you could replace. Form elements can be scary or even tricky for users to navigate anyway, so if you can eliminate or swap out some inputs that may be stumbling blocks, do it.

“If you can eliminate or swap out some inputs that may be stumbling blocks, do it.”

This also is a great way of removing the decision making from the development process. Keeping forms consistent in both style, structure and interaction can sometimes make or break a conversion rate.

Again, plan head. Plan out what icons you will need ahead of time. One super quick way to screw up your consistency is to be half way through the development of your app when you find out that you’ll need print icons, then realize that you can’t remember where you got your icons or even if you can find a print icon that matches the rest of your icons.

This isn’t even a style issue really, but an interactive one. Users will get used to the look a particular icons and be able to quickly recognize them. But if you are using a patchwork icon set you’ll confuse your user or even make it hard for them to tell what certain icons represent.

Consistent Style

The style and design of each UI element is important and maintaining consistency between them is also important to the user. Just as it is important to have a consistent icons set, it’s important that your app has an over all design consistency to it. You may think that certain buttons are cool even though they don’t come close to matching the over all design or color scheme of the site, butthis will just confuse your user and look ugly.

When designing a UI kit, there are a few things to keep in mind in order to create consistency:

1. Color scheme
2. Style
3. Borders
4. Type and fonts
5. Size
6. Background images
7. Effects

Colors

Like I said earlier, keep your UI color consistent with the over all color scheme of your site. Even when designing call to actions where you want buttons to stand out and be noticed, be careful not to make your call to action a sticking ugly compliment to your over all color scheme. To help you, use tools like Kuler or ColorSchemer to aid in selecting colors that go well together.

When I talk about keeping your style consistent I’m talking about not using some crazy gradient button with drops shadows and bevel if the rest of the site design is flat and doesn’t have a shadow or gradient on it. Besides staying consistent with the overall site design, stay consistent with the style of your UI elements. If you are using a particular color or font style on your input labels, stick with it and use it on all labels.

Borders

Ahh, borders. Too often I see sites that use three or four different button border thicknesses or radiuses and this can really be confusing. Keep all of your borders on buttons, inputs, selects, galleries, images and all other UI elements consistent with each other. This doesn’t mean that you have to use on border radius, you can mix it up by having a few values or even use one style consistently on each element.

Type and Fonts

Using the same type and fonts in your elements is a pretty important thing, especially when dealing with form elements. Keep headers consistent and don’t use to many fonts even though you might like all of them — you can save them for other projects. Inputs and buttons should have font styles that match or complement each other so that forms are easily read and predictable.

Size

The size of fonts and other elements should be consistent or complimentary to each other. The headers and title of pages should all stay consistent so that your user knows that those lines of text are in fact matching headers and titles. Consistent size also applies to any UI element from content regions, links, navigational elements or sidebars. Avoid altering the sizes of any these to drastically between page views so that the user can recognize them immediately when the page loads.

Background Images

Try not to change up your background images too much. This doesn’t happen much these days as it used to, but it’s still a good idea avoid changing your background images from page view to page view. If you do, try to make the image relatable to each other somehow so the pages don’t lose consistency. Changing background image, especially large ones, can make the site feel disjointed and make the user feel like the have even left you site completely, so really try to avoid this temptation.

Effects

Effects, most importantly lighting effects, can make what seems like a great site design not make sense at all to the user. For example, if you are using a highlight on the button that it looks as though a light is shining on top of it, use the same lighting effect on beveled text in buttons or beveled text inputs.

Honestly, this really isn’t a huge make it or break it deal with the user, but to the picky viewer they may notice the inconsistency of your effects and get distracted from doing what they are supposed to do with your app or site.

Don’t Be Boring

Designing for consistency may feel mundane or even boring sometimes and you may just want to throw something in your design to throw the user a surprise, and really that is great.

It is good to keep the users on their toes, jsut don’t shake things up so much that they get so discouraged or confused that they leave and go somewhere else. A little consistency can go a long way.

Seven Online Infographic Builders That You Have to Try

noreply@blogger.com (UXAWY) — Mon, 12 Nov 2012 12:20:00 +0000

The world is becoming increasingly visual – especially the online world. Thanks to social media and the explosion of sites such as Pinterest, displaying information in a visual way has become even more important. But it can be time consuming and even brain-boggling.

There are a host of tools out there though that can help you turn information into pretty good (and Pinterest-friendly) infographics in a matter of minutes. Here we take a look at some of the top contenders, how they work, what they cost and if they are worth your time (and money).

Infogr.am

Still in beta, Infogr.am is a lovely interface that allows you to create dynamic or static infographics or charts with ease.

Pick a template or chart type, enter your data and go. You can add photos, text and even extra charts to your creations with a couple clicks and then publish to Twitter, Facebook, Pinterest or as a web link. (There is no print or downloadable option right now.) All of your finished infographics are saved to a library file for later use.

“Graphics are clean and sharp, although the number of templates is limited. ”

Graphics are clean and sharp, although the number of templates is limited. Infogr.am is planning pid options in the future. Colors are customizable within infographics to help you create something that matches your site or brand.

The best feature? You can upload data from your desktop. (This will work great for the spreadsheet you don’t know what to do with.)

Cost: Free.

Analysis: Templates offer a clean, designed way to present information in a hurry. Bonus points for the ability to create text-heavy infographics or charts or a combination of the two.

Visual.ly

Visual.ly is the super-social network of infographics. The recently re-launched platform not only allows you to create infographics but also allows you to share your work and take a peek at other items that are of interest.

Visual.ly works in a template-based format with different design options for you to get started with working with data or other information. Select a graphic “story” and add your own customization for a quick and very visual representation of your information. You can download graphics in pdf format for print or web applications.

Finally, the site uses social media connections to create infographics. So be ready to share your Twitter and Facebook information. Visual.ly will work with users to create custom infographics for a fee.

“The templates are well designed but there is a not a lot of room to change the overall look.”

The templates are well designed but there is a not a lot of room to change the overall look. The problem here is that you may create the same look as someone else. Since the early-summer update, new items seem to be rolling out consistently and I would keep an eye on this software to continue to evolve and add functionality.

Cost: Free, with social media linking.

Analysis: Templates are fun and have a fresh look. Infographic creation is simple but there are still a few software bugs and limited style of templates to choose form.

Piktochart

Piktochart’s web-based software could not be any easier to use. Choose a template. Enter your information. Save, download and share.

While the free version of the software is a great starting point if you only plan to create a graphic or two, the pro version really offers a great deal of functionality — you can customize all of the templates to change color schemes and fonts.

“If you plan to use it frequently, upgrade to the pro version.”

With any of the templates, you can add text and images to build a graphic for almost any purpose. The only thing you really have to worry about is whether the template you used has appeared somewhere else. (That’s where the customization options really become important.)

Cost: Free for basic plan; $129 annually for professional version.

Analysis: This tool helps you create quick and professional looking graphics from text in minutes. If you plan to use it frequently, upgrade to the pro version to remove branded watermarks, get access to added customization options and access to many more templates.

Stat Silk

Stat Silk allows users to create interactive charts and graphs that are customizable. The tool seems perfect for anyone who uses a lot of maps and mapping data.

Animations are based on Flash and users can use base maps provided by Stat Silk or upload their own. The tool is super-customizable but can be a little complicated for novice users. The StatPlanet World Bank application was a first prize winner in the World Bank Apps for Deveopment and the software is used by big-name clients worldwide.

“The software can be a little clunky at first glance but works well with a little practice.”

The business model for the Stat line of products in interesting. The license-free software “seeks to promote the use of data visualization by non-profit and government organizations and organizations in low income countries,” according to the website. Further it is used to promote data visualization of any kind.

Cost: Free.

Analysis: This is a pretty cool tool, depending on the type of visualizations you are trying to create. The software can be a little clunky at first glance but works well with a little practice.

Google Public Data

Google public data is a great resource for finding (and charting) public information. Want to know the U.S. unemployment rate? Just do a quick search and get a chart in return.

“This can be a great tool but is really only relevant to a few sectors…”

This can be a great tool but is really only relevant to a few sectors and those who are looking for specific public information. But if you fall in those categories, it can be a great place to start.

Cost: Free.

Analysis: The graphics are simple – no bells and whistles here. But the data network is expansive and sourced well if you need public data charted in a jiffy.

Datameer

Datameer is marketed as a business product that helps you create simple yet, striking data visualizations. It is strictly for those dealing in numbers.

The software runs from your desktop, rather than being online-based, and includes a library of tables, charts, maps, and tag clouds to make it easy to visualize data.

“Great for business owners focused on numerical data.”

Datameer comes with a pretty nice price tag and does not include some of the more “fun” functionality and templating of other programs. What it does is add an additional layer of sophistication to business graphics.

Cost: Personal accounts are $299 annually.

Analysis: Great for business owners focused on numerical data who are looking to create sharper graphics with ease.

Wordle

Word clouds seem to have fallen out of favor recently but they are still a fun and effective tool. Wordle helps you create beautiful, colorful word clouds with minimal effort.

“This is a super-fun tool…”

The interface is easy to use and clouds can be printed or saved and used online. The simple feature creates a cloud from a URL. But it is the advanced features are the most impressive. You can paste in words and assign weights to them, define colors for text and backgrounds and even set up a Wordle on your site that users can interact with.

Cost: Free.

Analysis: This is a super-fun tool. And the overall look is far better than the basic blog-based word cloud tool.

Conclusion

Visualization tools seem to be popping up all over the place. They can be a fun, quick (and super easy) way to put text into a graphic format, but they are not something most designers will want to rely on.

Most of these tools do not allow for the degree of control that many graphic designers or artists would like to have on their work. Some also have that “templated” look and the different information could pop up with the same look on different places.

If you want to ensure that an infographic has your signature look and feel, take the time to create something from scratch. But if you are looking for a simple, quick way to compile data, one of these tools might be perfect for your next project.

10 Tips for Designing Logos That Don’t Suck

noreply@blogger.com (UXAWY) — Mon, 12 Nov 2012 12:19:00 +0000

So you’re designing a logo. It sounds like an easy enough task, right? Draw a circle, type in the company name and you’re done (I’ve literally heard a designer suggest that very process). Unfortunately, if you’re really worth the money the client is paying you, there’s a lot more to it than that.
There are a million people in the logo design industry today dishing out crappy logos in bulk for crowd sourcing sites. How do you as a serious professional stand out from the crowd and produce quality logos that don’t suck? Read on to find out.

1. Use a Visual Double Entendre

Some of my favorite logos in the world utilize a technique that I like to call a visual double entendre, which is an overly fancy way to say that it has two pictures wrapped into one through clever interpretation of a concept or idea.
The WinePlace logo below is a perfect example.

This logo takes on the shape of a thumbtack, which suggests “location” or “place,” but it also clearly looks like an upside down wine glass. Logo designs that use this technique come off as clever and memorable. Viewers love the little mind game that you’re playing and are more prone to appreciate a design because of it.
In the past, I put together a post of fifty fantastically clever logos like the one below. Check it out if you love this type of logo design as much as I do!

2. Color is Vitally Important

One of the most important considerations for logo design is the color palette. This is not a superficial decision, color carries meanings and communicates ideas.
Sometimes you’re pegged to the colors of a brand, but other times you’ll have the freedom to explore. I love the rich palette used in the Zion logo below.

The colors here grab you and pull you in, they bring life to the illustration and give further context to the shape of the landscape. That being said, remember that a good logo is versatile and will still function well in grayscale:

Beyond a grayscale version, I like to also provide clients with a true single color version, using only black and negative space. This would be a little tricky with the logo above, but definitely possible.
Always consider what it is that the logo will be used for and whether or not the various use cases require different versions.

3. Avoid the Cliché

Every few years or so, some new fads come along in logo design. I personally love to study design trends and you might even find me suggesting jumping onto a few bandwagons to keep up with the times, but with logos I just hate it when a bunch of designers use the same idea over and over.

The basic archetype above is being used again and again in logo design right now and it’s getting old fast. Why not use a design that you actually thought up yourself rather than ripping off what everyone else is doing?

“Why not use a design that you actually thought up yourself rather than ripping off what everyone else is doing?”

We have an entire article dedicated to showcasing logo design clichés, be sure to check it out to make sure you’re not guilty of uninspired logo design.

4. Make it Ownable

I don’t believe that “ownable” is a real word, but you nevertheless hear it quite a bit in marketing (marketers love to make up words). The concept is definitely an important one that ties closely to the previous tip.
Rather than following the herd and using a cliché design, you should instead strive for something that is uniquely recognizable. I’ve always appreciated the Evernote logo in this regard:

It’s really just an elephant head, which doesn’t sound like a very unique concept. However, the way it’s drawn with the curled trunk and page fold in the ear makes it instantly recognizable.
As you’re designing logos, consider whether or not your design is generic or unique. Is it likely that others will produce something similar? Remember, your first idea is typically your most generic (it’s also everyone else’s first idea). Try filling a notebook page or two with some rough sketches before choosing which ideas to pursue further.

6. Everybody Loves Custom Type

While we’re on the subject of being unique, there’s almost nothing that can give your logo a unique feel quite like some awesome custom lettering.

Too often we see logo design as simply a trip to the font menu to see which typeface makes the company name look best. If someone is paying you to “design” their logo, they probably expect you to put a little more effort into it.

“Too often we see logo design as simply a trip to the font menu to see which typeface makes the company name look best.”

Custom type helps ensure that your unique logo will stay that way. Lowlife designers will rip off your work in a heartbeat if they discover which typeface you’re using, but it takes some real skill to mimic custom hand-drawn type!
Keep in mind though that if your logo is famous enough, people will always try to rip it off. This certainly holds true for my favorite script logo:

The awesome Coca-Cola script has been stolen countless times in awkward parodies throughout the last few decades.

7. Keep it Simple Stupid

Let’s face it, not everyone can bust out beautiful, hand-drawn script on a whim. Just because you’re a designer doesn’t mean you’re an awesome illustrator or typographer (though it helps). If you fit this description, fear not, there’s nothing preventing you from making awesome logos.
In this situation, remember these four powerful words: keep it simple stupid! Simple but powerful logos permeate the business world and always prove to be the best icons for standing the test of time.

In considering how to construct one of these types of logos, let’s discuss the Apple logo. The silhouette of an apple is nothing special or memorable:

It’s that missing bite that takes it to the next level. It gives the logo character, makes it unique, and drives the meaning deeper (computers and bytes, get it?). Without the bite, the apple is boring, with it, the apple is suddenly iconic.
Always think about how you can go that extra mile and turn your boring logos into unmistakable brand marks.

7. Consider Proportion & Symmetry

Some people can get carried away with discussions of proportion and symmetry (see the new Pepsi logo pitch), but if we strip out the crazy, there’s still some important lessons here. Consider the new Twitter logo as an example:

Here circles aren’t used to convince you of some strange cosmic tale that makes no sense, they’re simply used as a guide to create a well balanced logo with consistent curves and arcs.
Despite the fact that the bite seems to violate the symmetry of the Apple logo above, if we dig deeper we can see that there was still a lot of through put into proportion and symmetry here (image source):

8. Think About Negative Space

Along the same vein as a double entendre is the age old trick of utilizing the negative space in a logo in some clever way. The industry standard example for this technique is the FedEx logo and its hidden arrow.

Don’t see it yet? Keep looking, it’s there. That’s what I love about this logo, the use of negative space is so subtle. Most people in the U.S. see the FedEx logo daily or weekly for years as it drives by on the side of countless trucks and they never even notice the arrow.
Logopond is chock full of great logo designs that utilize negative space in a cool way. Check out the example below, which blends together the idea of bull horns and a wine glass.

9. Passive vs. Active

One interesting facet of logo design that I’ve been considering a lot lately is the concept of instilling motion or a sense of activity into a logo. This isn’t always appropriate (such as with the Apple logo), but sometimes it can really give a logo the boost it needs, both from a visual and conceptual standpoint.
As an example, let’s look again to the Twitter logo. Way back in the early days, the bird went from sitting perched and passive to becoming active and taking flight.

In the most recent iteration, they took this concept even further by pointing the bird in an upward direction to indicate that it’s climbing into the air rather than floating along the same old trajectory.

A sense of motion is especially important when it comes to logos with mascots. The image of the marlin below doesn’t depict the fish merely lying still, instead it’s leaping into the air in a victorious pose.

This concept even extends to typically inanimate objects. Consider how much better the logo below portrays the concept of “rough house” by instilling a sense of motion.

10. Know What it Means

Every good logo has a story. Far beyond simply a pretty sketch, strong logos are filled with meaning, both obvious and hidden. We discussed this in several cases above. The FedEx logo’s arrow indicates moving forward and making deliveries, the Apple logo has a “byte” missing, and the Twitter bird is flying in an upward trajectory.

“It’s great when you as a designer can show a client how much thought and reasoning went into the logo that you produced for them.”

Half the time I wonder if logo designers don’t come up with the meaning after the logo is already produced, but regardless, it’s great when you as a designer can show a client how much thought and reasoning went into the logo that you produced for them.
Clients might think that all they want is something fresh and cool, but if you instead provide a logo that ties into the company’s core values and mission, you’ll blow their minds and they’ll love you for it.

If you’re into hidden logo meanings, check out our post titled “Five Fascinating Things You Didn’t Know About Famous Car Logos.”

Do Your Logos Suck?

Now that you’ve read our tips for designing logos that don’t suck, leave a comment below and let us know what you think of your own work in this area.
Are you an awesome logo designer or is it something that you struggle with? Which of the tips above are useful to you and what tips can you offer to other designers?

5 Design Lessons That I Learned

noreply@blogger.com (UXAWY) — Mon, 12 Nov 2012 12:18:00 +0000

Here at Design Shack we offer a simple but useful service called a web design critique. It’s basically a consulting service that you can take advantage of for a mad cheap price in exchange for letting us post it on the site as an educational tool.

I’ve personally written up a whopping eighty five of these things thus far (#85 will be posted later this week). That’s a whole lot of design advice! Read on to see what I’ve learned about web design in the process, both from the good examples and the bad.

Web Design Critiques

When someone submits a page for a critique, I pour over it, make notes about what works well, what could be better and what needs to be fixed immediately. I then write it all up as a web design critique post.

“I’m actually learning from you guys as much as you are from me!”

It’s obvious that I’m using these critiques as a teaching tool, but what you may have missed is that I’m not strictly teaching, I’m actually learning from you guys as much as you are from me! It’s often that we get a website to critique that is truly fantastic, as I analyze and explain why it’s so great, I’m absorbing techniques, ideas, UI patterns and more.

After about twenty of these things I noticed that some patterns and trends emerged, advice that I was giving over and over, places where designers tended to be strong and weak, mistakes that are often made. Sixty critiques later and I have lots to say about the areas where most designers need to focus on improving.

1. The Three Second Rule

If you’ve read a few of the critiques that I’ve written, you’ve probably noticed that I always start with what my first impression tells me about the site. When I load that page into the browser, what I can I tell about the page in the first three seconds?

“What I can I tell about the page in the first three seconds?”

Three seconds you say? What good is that? The answer is that, as a web browser, it only takes me a few seconds to decide of your site is what I’m looking for, after that I’ve made my decision about whether I’ll move on or explore further.

For some designers, this brings up a challenge to catch the user’s attention with something flashy to pull them in. This is a good technique, but it may not be appropriate for all design situations. The universal truth here is that I should always, at a bare minimum, know who you are and why your site exists in these first few seconds.

We saw this done well in Design Critique #66 with the site header for IdentyMe.

Both the graphics and the messaging here come together to create a crystal clear message that’s readable in an instant: this site allows you to create virtual business cards.

When we see this done well, it’s hard to imagine how anyone could screw it up, but it’s actually far more often the case that the sites I critique miss the mark in this area with vague messaging. We forget that when we’re close to a project, we can often lose sight of the fact that not everyone knows what it’s all about like we do.

After a few meetings, you know all about your client’s business and it slips your mind that you have to still explain to everyone else just what the heck “Smith’s Logistics” does and what their website is seeking to accomplish.

2. Goal-Oriented Design

The second important thing that I learned about web design is that projects are much more successful when they’re approached with a very specific set of goals in mind. The previous lesson was really just an extension of this: one of the major goals of any site is to communicate its own purpose.

“It’s a lot like being a taxi driver who skips asking the guy in the backseat where he’s going and instead just drives to some random place, hoping he gets it right.”

Far too often, designers just open up Photoshop and start sketching ideas out at random. This is a great creative exercise, but as the primary method of building client sites, it sucks. It’s a lot like being a taxi driver who skips asking the guy in the backseat where he’s going and instead just drives to some random place, hoping he gets it right.

Instead, what needs to happen is that a very intentional set of goals should be worked out by you and your client regarding what you hope to accomplish with the design. This should happen before you write a single line of code or create a single PSD.

We saw this idea put into practice very effectively in Web Design Critique #61: Undead Kit. Given that the site was selling a kit meant to help you survive an oncoming zombie apocalypse, there were two obvious subgoals that the site needed to achieve.

The first was to showcase what exactly was in the case so potential buyers knew what they were getting into:

The second subgoal was to explain how buyers would use their kit to survive. Listing the items isn’t enough, people need to see the benefit of these items in practice.

As you can see, both of these goals were accomplished through awesome illustrations and simple text descriptions. The designer was still able to goof off and flex his creative muscles, but he did so in a way that led the site in a successful direction.

3. Design Trends are Like Wallpaper

Picture your grandma’s house. Imagine all of the things in there that indicate that the house is owned by someone who grew up in a different era from your own: the porcelain knick knacks adorning every shelf, the eye-gouging color schemes and of course, the wallpaper. Layer upon layer of wallpaper, a primary (though now fairly antiquated) design element in the room that changed every few years to match the latest trends.

“If you were to peel away these layers one at a time, you would travel through time.”

The homes owned by various members of my family have surely sacrificed 5% of their square footage to layers of wallpaper madness. If you were to peel away these layers one at a time, you would travel through time and witness various patterns and colors that were once seen as fit to cover a room but were years later scorned as a hideous mistake and replaced with something that would only serve to continue this ceaseless cycle.

Compared to wallpaper, web design is still in its infancy, but we’ve already come far enough to see that the design trends here operate on the same principles. Grab any design trend that seemed so awesome five years ago and it likely now serves as something that dates a site.

We saw this in practice with the patterns, textures and bevel effects used on the site from Web Design Critique #74:

Here we see what once may have been cutting edge design, but now simply feels like something well past its time. Web designers are fickle beasts and when the mob moves on, you either move with it or get left behind.

Even if you account for the fact that the site above has an intentionally retro feel, the design still doesn’t work because the way that we pull off retro actually evolves over the years as well!

“Fashion, television, Hollywood, food, nothing escapes the reach of the trendy.”

You may think that staying up with modern design trends (or setting new ones) is silly, but that’s absolutely not the case. Web design trends evolve as a part of your culture as a whole. Fashion, television, Hollywood, food, nothing escapes the reach of the trendy. Just as workers in all of those industries have to keep up or risk becoming irrelevant, so too do you as a web designer.

Don’t believe me? Find someone who hasn’t built a website since 1999 and let them design your new portfolio. Odds are, you shutter at the thought.

4. Many Web Designers Still Struggle with Typography

In the past two or three years, web designers have fully embraced typography. This particular area of design has gone far beyond a trend for many designers and has grown into an obsession. Run a search for “typography” on Pinterest or Dribbble and you’ll see countless examples of amazing typographic art.

Combine this with services like Typekit and Google Web Fonts, which bring beautiful custom fonts to the web, and you see an industry that has grown by leaps and bounds in this area in a very brief amount of time.

That being said, one of the issues that I come across most often in web design is poor typography. This takes many forms: little knowledge of how to effectively combine typefaces, poor choice of fonts, ugly Photoshop kerning, odd sizing, squished line-height, etc. Here’s an example from Critique #73:

We may focus our attention on a piece of typographic art for hours on end, but when we’re working on a live project, type is rushed and pushed live without proper preparation or examination. Good print designers cringe at kerning examples like the one above because they know in their industry, there’s no going back. Once it’s printed, you’re done.

“Good print designers cringe at kerning examples like the one above because they know in their industry, there’s no going back. Once it’s printed, you’re done.”

With web designers, the knowledge that everything can easily be updated at any time can make for sloppy, rushed work. Take the time to get your type right the first time.

5. Less is More

As I’ve looked through these 85 websites and suggested changes that need to be made, it’s honestly a very rare case where my impression is that the page is too sparse.

Instead, I’m always struggling to get designers to understand that they’re actually trying too hard to fill up the page. This results in cluttered, text-heavy designs that no one really takes the time to sift through.

“I’m always struggling to get designers to understand that they’re actually trying too hard to fill up the page.”

The web is a fast-paced place. There’s a reason the term is worded “browsing the web” rather than “reading the web.” We jump around quickly from place to place looking for anything that jumps out and holds our attention.

The things that do so are typically simple and attractive with a few bold statements and/or images that stand out from their surroundings. Pages full of clutter present a case of information overload and we quickly move on.

Consider the example below from Critique #68:

This box isn’t ugly by any means, but it can be made more effective by stripping out most of the text and making adding in a little typographical contrast:

Type isn’t the only area where things need to be simplified though. Consider this example from Critique #77:

This is a classic example of simply trying to squeeze too much stuff into a small space. We don’t think critically about content organization but instead hit a point where we still have a lot of stuff that needs to be included and no place to put it, so we just cram and the result is ugly, ineffective clutter.

What Have You Learned?

So there you have it, five lessons that I’ve learned about web design from writing eighty five critiques. Now it’s your turn.

Do you read our web design critiques? What have you learned from them? How can we make them even better? Leave a comment and let us know.

Kida's World

Useful JavaScript Libraries and jQuery Plugins

Web Forms and Input Validation

Web Typography Libraries and Plugins

Little Time-Savers

Images, Maps, Graphs and Visualization Libraries

Last Click

Manipulating Tables and Lists

Useful JavaScript Tools for Web Development

Last Click

20 All Too Common Coding Pitfalls For Beginners

JavaScript Tips

1 - Unnecessary DOM Manipulation

2 - Inconsistent Variable & Function Names in JavaScript

3 - Use hasOwnProperty() in for...in Loops

4 - Comparing Boolean Values

5 - Event Binding

6 - Avoid Ternary Redundancy

PHP Tips

7 - Use Ternary When Appropriate

8 - Throw Exceptions Instead of Inception-Style Nesting

9 - False-Happy Methods

Tip 10 - Use Guard Clauses

Tip 11 – Use while for Simple Iterations

Tip 12 – Keep Methods Maintainable

Step 13 - Avoid Deep Nesting

Tip 14 – Avoid Magic Numbers and Strings

Step 15 - Use Built-In Array Functions

Tip 16 - Don’t Overuse Variables

General Programming Recommendations

Tip 17 - Rely on the Database Engine

Tip 18: Properly Name Your Variables

Tip 19 - Methods Represent Actions

Tip 20: Structure Recommendations

Conclusion

10 Tips for Writing for Designers

1. Stay on Topic

2. Messages Should Have Hierarchy

3. Show, Rather than Tell

4. Keep it Short

5. Watch the Jargon

6. Don’t Assume Anything and Explain Specifics

7. Write with Action

8. Take a Walk

9. All Designers are Different

10. Break the Rules on Purpose

Conclusion

How to Sell Your Design Idea

Show, Rather Than Tell

Proven Track Record

Recruit

Present Options

Accept Criticism and Suggestions

Patience

Conclusion

10 Things to Learn From Failure

1. Accept Credit and Criticism

2. Determine What Went Wrong

3. Communication is Key

4. The Client is Always Right

5. Revise, Revise, Revise

6. Manage Your Time

7. Beat Deadlines

8. Research More

9. Push the Limits

10. Try Again

Conclusion

Interesting Trends in UI Design

Are Trends Good Or Bad?

iOS Inspired Everything

Wooden Backgrounds

Retro Interfaces

Notification Boxes

Snow White UI

What Trends Have You Seen In UI Design?

The Freelancer’s Secret to Learning Any New Skill

The Problem

But I’m Normally So Productive!

Necessity Is The Mother of Education

The Missing Ingredient

3 - Use `hasOwnProperty()` in `for...in` Loops

9 - `False`-Happy Methods

Tip 11 – Use `while` for Simple Iterations