2.txt

Array
(
    [feed] => Array
        (
            [title] => Array
                (
                    [@value] => Smashing Magazine Feed
                    [@attributes] => Array
                        (
                            [type] => text
                        )

                )

            [subtitle] => Array
                (
                    [@value] => For Professional Web Designers and Developers
                    [@attributes] => Array
                        (
                            [type] => text
                        )

                )

            [updated] => 2012-06-24T08:30:50Z
            [link] => Array
                (
                    [0] => Array
                        (
                            [@value] => 
                            [@attributes] => Array
                                (
                                    [rel] => alternate
                                    [type] => text/html
                                    [href] => http://www.smashingmagazine.com
                                )

                        )

                    [1] => Array
                        (
                            [@value] => 
                            [@attributes] => Array
                                (
                                    [rel] => self
                                    [type] => application/atom+xml
                                    [href] => http://rss1.smashingmagazine.com/feed/
                                )

                        )

                )

            [id] => http://www.smashingmagazine.com/feed/atom/
            [entry] => Array
                (
                    [0] => Array
                        (
                            [author] => Array
                                (
                                    [name] => Smashing Editorial
                                    [uri] => http://www.smashingmagazine.com
                                )

                            [title] => Array
                                (
                                    [@cdata] => Powerful New CSS- and JavaScript Techniques
                                    [@attributes] => Array
                                        (
                                            [type] => html
                                        )

                                )

                            [link] => Array
                                (
                                    [0] => Array
                                        (
                                            [@value] => 
                                            [@attributes] => Array
                                                (
                                                    [rel] => alternate
                                                    [type] => text/html
                                                    [href] => http://www.smashingmagazine.com/2012/06/21/css-round-up-part-1-new-and-powerful-css-techniques/
                                                )

                                        )

                                    [1] => Array
                                        (
                                            [@value] => 
                                            [@attributes] => Array
                                                (
                                                    [rel] => replies
                                                    [type] => text/html
                                                    [href] => http://www.smashingmagazine.com/2012/06/21/css-round-up-part-1-new-and-powerful-css-techniques/#comments
                                                    [count] => 0
                                                )

                                        )

                                    [2] => Array
                                        (
                                            [@value] => 
                                            [@attributes] => Array
                                                (
                                                    [rel] => replies
                                                    [type] => application/atom+xml
                                                    [href] => http://www.smashingmagazine.com/2012/06/21/css-round-up-part-1-new-and-powerful-css-techniques/feed/atom/
                                                    [count] => 0
                                                )

                                        )

                                )

                            [id] => http://mgmt.smashingmagazine.com/?p=133661
                            [updated] => 2012-06-21T14:30:31Z
                            [published] => 2012-06-21T13:59:25Z
                            [category] => Array
                                (
                                    [@value] => 
                                    [@attributes] => Array
                                        (
                                            [scheme] => http://www.smashingmagazine.com
                                            [term] => Coding
                                        )

                                )

                            [summary] => Array
                                (
                                    [@cdata] => <table width="650"><tr><td width="650"><div style="width:650px;">
      <img src="http://statisches.auslieferung.commindo-media-ressourcen.de/advertisement.gif" alt="" border="0" /><br />
      <a href="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=target&#038;collection=smashing-rss&#038;position=1" target="_blank"><img src="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=image&#038;collection=smashing-rss&#038;position=1" border="0" alt="" /></a>&#160;<a href="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=target&#038;collection=smashing-rss&#038;position=2" target="_blank"><img src="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=image&#038;collection=smashing-rss&#038;position=2" border="0" alt="" /></a>&#160;<a href="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=target&#038;collection=smashing-rss&#038;position=3" target="_blank"><img src="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=image&#038;collection=smashing-rss&#038;position=3" border="0" alt="" /></a>
    </div></td></tr></table>
<p>Since our <a href="http://coding.smashingmagazine.com/2011/04/18/powerful-new-css-techniques-and-tools/">last round-up of useful CSS techniques</a>, we've seen a lot of truly remarkable CSS geekery out there. With CSS3, some of the older techniques now have become obsolete, others have established themselves as standards, and many techniques are still in the "crazy experimentation" stage.</p>

<p><a href="http://coding.smashingmagazine.com/2012/06/21/powerful-new-cssjavascript-techniques/" title="CSS3 Dodecahedron"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/05/result-css-0361.jpg" alt="CSS3 Dodecahedron" width="498" height="298" /></a></p>

<p>Since the release of the previous post, we've been collecting, sorting, filtering and preparing a compact overview of powerful new CSS techniques. Today we finally present some of these techniques. Please note that many techniques are not only CSS-based, but use HTML5 and JavaScript. Use them right away or save them for future reference. Thanks to all of the featured designers and developers for their fantastic work!</p>
                                    [@attributes] => Array
                                        (
                                            [type] => html
                                        )

                                )

                            [content] => Array
                                (
                                    [@cdata] => <table width="650">
<tr>
<td width="650">
<div style="width:650px;">
      <img src="http://statisches.auslieferung.commindo-media-ressourcen.de/advertisement.gif" alt="" border="0" /><br />
      <a href="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=target&#038;collection=smashing-rss&#038;position=1" target="_blank"><img src="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=image&#038;collection=smashing-rss&#038;position=1" border="0" alt="" /></a>&nbsp;<a href="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=target&#038;collection=smashing-rss&#038;position=2" target="_blank"><img src="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=image&#038;collection=smashing-rss&#038;position=2" border="0" alt="" /></a>&nbsp;<a href="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=target&#038;collection=smashing-rss&#038;position=3" target="_blank"><img src="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=image&#038;collection=smashing-rss&#038;position=3" border="0" alt="" /></a>
    </div>
</td>
</tr>
</table>
<p>Since our <a href="http://coding.smashingmagazine.com/2011/04/18/powerful-new-css-techniques-and-tools/">last round-up of useful CSS techniques</a>, we&#8217;ve seen a lot of truly remarkable CSS geekery out there. With CSS3, some of the older techniques now have become obsolete, others have established themselves as standards, and many techniques are still in the &#8220;crazy experimentation&#8221; stage.</p>
<p>Since the release of the previous post, we&#8217;ve been collecting, sorting, filtering and preparing a compact <strong>overview of powerful new CSS techniques</strong>. Today we finally present some of these techniques. Use them right away or save them for future reference.</p>
<p>Please note that many techniques are not only CSS-based, but also use HTML5 and JavaScript. We are going to present useful CSS tools and responsive design techniques in separate posts. Please don’t hesitate to comment on this post and let us know how exactly you are using them in your workflow. However, please avoid link dropping; share your insight and experience instead, and feel free to link to techniques that really helped you recently. Thanks to all of the featured designers and developers for their fantastic work!</p>
<h4>Table of Contents</h4>
<ol>
<li><a href="#transitions">CSS Transitions and Animations</a></li>
<li><a href="#practical">Useful and Practical CSS Techniques</a></li>
<li><a href="#typography">CSS Typography and Text Techniques</a></li>
<li><a href="#navigation">CSS Navigation Menus and Hover Effects</a></li>
<li><a href="#visual">Visual Techniques With CSS</a></li>
</ol>
<h3 id="transitions">CSS Transitions And Animations</h3>
<p>CSS transitions and animations are often used to make the user experience a bit more smooth and interesting, especially when it comes to interactive effects on hover or on click. Designers are experimenting with technology and create sometimes crazy, sometimes practical—but often innovative techniques which you could use to make your websites just a tiny bit more engaging.</p>
<p><a href="http://attasi.com/labs/ipad/">Interactive CSS3 lighting effects</a><br />
An interesting effect to create interactive lighting effects with 3-D transforms, CSS gradients and masks; the cast shadow was created using box shadows and transforms.</p>
<p class="showcase"><a href="http://attasi.com/labs/ipad/"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/05/result-css-048.jpg" alt="Interactive CSS3 Lighting Effects" title="Interactive CSS3 Lighting Effects" width="498" height="298" class="alignnone size-full wp-image-133580" /></a></p>
<p><a href="http://themaninblue.com/experiment/dodecahedron/">CSS3 dodecahedron</a><br />
A fancy dodecahedron experiment, created using CSS Transforms and a tiny JavaScript snippet.</p>
<p class="showcase"><a href="http://themaninblue.com/experiment/dodecahedron/"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/05/result-css-0361.jpg" alt="CSS3 Dodecahedron" title="CSS3 Dodecahedron" width="498" height="298" class="alignnone size-full wp-image-133504" /></a></p>
<p><a href="http://photon.attasi.com/">CSS 3D Lighting Engine Photon</a><br />Our editor Tom Giannattasio has created a JavaScript library that adds simple lighting effects to DOM elements in 3D space using the WebKitCSSMatrix object. It would be great to have an implementation for other rendering engines as well.</p>
<p class="showcase"><a href="http://photon.attasi.com/"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/06/csstn-140.jpg" alt="CSS 3D Lighting Engine Photon" /></a></p>
<p><a href="http://tympanus.net/codrops/2012/06/18/3d-thumbnail-hover-effects/">3D Thumbnail Hover Effects With CSS</a><br />This technique produces 3D thumbnail hover effects with CSS 3D transforms. The code is quite verbose and probably could be optimized, but the effect is quite neat.</p>
<p class="showcase"><a href="http://tympanus.net/codrops/2012/06/18/3d-thumbnail-hover-effects/"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/06/csstn-139.jpg" alt="3D Thumbnail Hover Effects With CSS" /></a></p>
<p><a href="http://css-tricks.com/snippets/css/slide-in-image-boxes/">Slide In Image Boxes</a><br />A technique for creating a &#8220;slide in&#8221; effect for boxes on hover to make them a bit more interactive.</p>
<p class="showcase"><a href="http://css-tricks.com/snippets/css/slide-in-image-boxes/"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/06/onhover.jpg" alt="Slide In Image Boxes" /></a></p>
<p><a href="http://attasi.com/labs/picsselz/">CSS3 bitmap graphics</a><br />
The bitmap graphics is rendered with CSS: no images, no <code>canvas</code>, no data URIs and no extra markup. The pixels are drawn with CSS gradients, sized precisely to the pixel’s boundaries.</p>
<p class="showcase"><a href="http://attasi.com/labs/picsselz/"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/05/result-css-100.jpg" alt="Pure CSS3 Bitmap Graphics" title="Pure CSS3 Bitmap Graphics" width="498" height="298" class="alignnone size-full wp-image-133568" /></a></p>
<p><a href="https://developer.mozilla.org/en-US/demos/detail/paperfold-css">Paperfold CSS</a><br />
A visual folding effect for hidden comments by Felix Niklas. The plugin takes a DOM element, slices it into parts and arranges them like a folded paper in 3-D space.</p>
<p class="showcase"><a href="https://developer.mozilla.org/en-US/demos/detail/paperfold-css"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/05/css-roundup-018.jpg" alt="Paperfold CSS" title="Paperfold CSS" width="500" height="300" class="alignnone size-full wp-image-133623" /></a></p>
<p><a href="http://coding.smashingmagazine.com/2012/04/17/beercamp-an-experiment-with-css-3d/">Beercamp: An Experiment With CSS 3D</a><br />
A CSS 3D popup book á la Dr. Seuss. The website was a test to see how far SVG and CSS 3D transforms could be pushed. This is the article about it.</p>
<p class="showcase"><a href="http://coding.smashingmagazine.com/2012/04/17/beercamp-an-experiment-with-css-3d/"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/05/css-roundup-042.jpg" alt="Beercamp: An Experiment With CSS 3D" title="Beercamp: An Experiment With CSS 3D" width="500" height="300" class="alignnone size-full wp-image-133655" /></a></p>
<p><a href="http://bluedashed.com/covers/">Covers: A JS / CSS Experiment</a><br />Now, that&#8217;s quite an experiment: what if we combined a music song, stylesheet and beat detector to create animated&#8230; covers? Sure, we can do it with CSS3 and JavaScript! Covers does exactly that. The result is interesting, what can you do with this approach?</p>
<p class="showcase"><a href="http://bluedashed.com/covers/"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/06/csstn-142.jpg" alt="Covers: A JS / CSS Experiment" /></a></p>
<p><a href="http://johnbhall.com/iphone-4s/">Animation on Apple&#8217;s page</a><br />
John B. Hall explains the CSS animation on Apple&#8217;s Web page for the iPhone 4S.</p>
<p class="showcase"><a href="http://johnbhall.com/iphone-4s/"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/05/result-css-008.jpg" alt="An explanation of the CSS animation on Apple’s iPhone 4S webpage — John B. Hall" title="An explanation of the CSS animation on Apple’s iPhone 4S webpage — John B. Hall" width="498" height="298" class="alignnone size-full wp-image-133349" /></a></p>
<p><a href="http://tympanus.net/codrops/2011/12/19/experimental-css3-animations-for-image-transitions/">Experimental animations for image transitions</a><br />
A post about experimental 3-D image transitions that use CSS3 animations and jQuery. Only CSS3 transforms are used.</p>
<p class="showcase"><a href="http://tympanus.net/codrops/2011/12/19/experimental-css3-animations-for-image-transitions/"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/05/css-roundup-004.jpg" alt="Experimental CSS3 Animations for Image Transitions" title="Experimental CSS3 Animations for Image Transitions" width="500" height="300" class="alignnone size-full wp-image-133576" /></a></p>
<p><a href="http://dabblet.com/gist/2076449">Maintaining CSS style states using “infinite” transition delays</a><br />
This demo allows you to move the character around with the D-pad, and notice how it always keeps its position after you stop moving. This demo doesn&#8217;t use any JavaScript. The effect is made possible by using a virtually infinite transition delay, so that the CSS rules never return to their default state. The figure will be stuck in a transition and will move only when you hold down a button.</p>
<p class="showcase"><a href="http://dabblet.com/gist/2076449"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/05/result-css-166.jpg" alt="Maintaining CSS Style States using “Infinite” Transition Delays" title="Maintaining CSS Style States using “Infinite” Transition Delays" width="498" height="298" class="alignnone size-full wp-image-133473" /></a></p>
<p><a href="http://www.clicktorelease.com/code/css3dclouds/">CSS 3-D clouds</a><br />
An experiment in creating 3-D-like clouds with CSS3 transforms and a bit of JavaScript.</p>
<p class="showcase"><a href="http://www.clicktorelease.com/code/css3dclouds/"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/06/css3d-clouds.jpg" alt="CSS3D Clouds" title="CSS3D Clouds" width="500" height="281" class="alignnone size-full wp-image-133478" /></a></p>
<p><a href="http://www.webinterfacelab.com/snippets/animated-profile-popover">Animated popover of profile box</a><br />
A technique for an animated profile popover menu, built using CSS transitions. </p>
<p><a href="http://www.webinterfacelab.com/snippets/animated-profile-popover"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/06/csstn-129.jpg" alt="Animated Profile Popover With CSS" /></a></p>
<p><a href="http://lab.hakim.se/scroll-effects/">CSS3 scrolling effects</a><br />
A library of various scrolling effects, such as curl, wave, flip, fly, skew and helix, created with CSS3 and sometimes with JavaScript to spice up the scrolling behavior.</p>
<p><a href="http://lab.hakim.se/scroll-effects/"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/06/csstn-102.jpg" alt="CSS3 Scroll Effects" /></a></p>
<p><a href="http://inspectelement.com/tutorials/spin-those-icons-with-css3/">Spin those icons with CSS3</a><br />
A simple technique for creating a neat effect that spins social icons with the help of a transform and transition when you hover over them. By Tom Kenny.</p>
<p><a href="http://eng.wealthfront.com/2012/03/scrolling-z-axis-with-css-3d-transforms.html">Scrolling the Z Axis with CSS 3D Transforms</a><br />
This article explains how to create the z-scroll effect step by step.</p>
<h3 id="practical">Useful and Practical CSS Techniques</h3>
<p><a href="http://thecodeplayer.com/walkthrough/css3-family-tree">CSS3 Family Tree</a><br />
Display organizational data or a family tree using just CSS, without Flash or JavaScript. The markup is very simple and uses just nested lists. Pseudo-elements are used to draw the connectors. It also has hover effects: hover over a parent element and the entire lineage will be stylized. Make sure to check Nicolas Gallagher&#8217;s <a href="http://nicolasgallagher.com/an-introduction-to-css-pseudo-element-hacks/">Introduction to CSS Pseudo Element Hacks</a>.</p>
<p><a href="http://thecodeplayer.com/walkthrough/css3-family-tree"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/06/csstn-117.jpg" alt="CSS3 Family Tree" /></a></p>
<p><a href="http://demo.webinterfacelab.com/11-ios-style-popover/">iOS-style popover</a><br />
A simple technique for iOS-style custom checkboxes and a subtle hover effect. The technique is a bit buggy but a good starting point in case you need it. Also, check an excerpt from Lea Verou&#8217;s <a href="http://vimeo.com/30379008">talk on customized checkboxes</a> and her article on <a href="http://lea.verou.me/2011/05/rule-filtering-based-on-specific-selectors-support/">rule filtering based on specific selector(s) support</a>.</p>
<p><a href="http://demo.webinterfacelab.com/11-ios-style-popover/"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/06/ios.jpg" width="500" height="249" alt="iOS-style Popover" /></a></p>
<p><a href="http://jsfiddle.net/necolas/vhZds/">Timeline-Style Comments</a><br />Nicolas Gallagher developed a simple and clean technique to present comments in a timeline-alike overview.</p>
<p class="showcase"><a href="http://jsfiddle.net/necolas/vhZds/"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/06/timeline-snippet.jpg" alt="Timeline-Style Comments" /></a></p>
<p><a href="http://jsfiddle.net/csswizardry/VqynK/">CSS Table Grid</a><br />
Here is a nice technique for aligning columns in a table, building a “table grid system” of sorts. The idea is to apply classes to <code>col</code> elements in a table’s <code>colgroup</code>; you always leave one <code>col</code> without a class so that it remains fluid and can “soak up” the effects of any breakages elsewhere in the table.</p>
<p><a href="http://jsfiddle.net/csswizardry/VqynK/"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/06/css-pr.gif" alt="CSS Table Grid " width="494" height="324" /></a></p>
<p><a href="http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/put-users-in-control-with-confirmation-feedback-buttons/">Confirmation Feedback Buttons</a><br />
This article explains how to create buttons that take on different states depending on the user’s interaction. This type of interaction is especially useful on links such as “Purchase” and “Delete” for which it’s wise to confirm that the user indeed wants to take the specific action. It looks too much like an iTunes button, though.</p>
<p class="showcase"><a href="http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/put-users-in-control-with-confirmation-feedback-buttons/"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/06/css-add-008.png" alt="" title="Confirmation Feedback Buttons" width="500" height="300" class="alignnone size-full wp-image-134763" /></a></p>
<p><a href="http://www.jefvlamings.com/blog/a-clean-calendar-in-css3-jquery/">A calendar in CSS3 and jQuery</a><br />
A step by step tutorial on how to create a CSS3 calendar with some jQuery animation. Also, check out <a href="http://dbushell.com/2012/01/04/responsive-calendar-demo/">David Bushell&#8217;s responsive calendar demo</a>.</p>
<p class="showcase"><a href="http://www.jefvlamings.com/blog/a-clean-calendar-in-css3-jquery/"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/05/result-css-024.jpg" alt="A clean calendar in CSS3 &amp; jQuery : Finishing Touch" title="A clean calendar in CSS3 &amp; jQuery : Finishing Touch" width="498" height="298" class="alignnone size-full wp-image-133365" /></a></p>
<p><a href="http://sunpig.com/martin/archives/2012/03/25/outdenting-properties-for-debug-css.html">Outdenting properties for debug CSS</a><br />
Let&#8217;s assume you are experimenting with CSS or debugging code. You add properties to figure out how things fit together. How often do you forget to remove all of them? A simple technique for this is to mark a CSS property as a temporary or debugging property by outdenting it and putting it at column 0 in the file. A small trick that can save a lot of time.</p>
<p><a href="http://sunpig.com/martin/archives/2012/03/25/outdenting-properties-for-debug-css.html"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/06/csstn-108.jpg" alt="Outdenting properties for debug CSS" /></a></p>
<p><a href="http://css-tricks.com/show-markup-in-css-comments/">Show Markup in CSS Comments</a><br />
Chris Coyier discusses the idea of including the basic markup that you will be styling as a comment at the top of your CSS file. </p>
<p><a href="http://css-tricks.com/show-markup-in-css-comments/"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/06/csstn-111.jpg" alt="Show Markup in CSS Comments" /></a></p>
<p><a href="http://filamentgroup.com/examples/rwd-table-patterns/">Selectively displaying data</a><br />
This technique shows how to selectively display content in a table and add responsive breakpoints to create an responsive, complex multi-column table.</p>
<p class="showcase"><a href="http://filamentgroup.com/examples/rwd-table-patterns/"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/06/text.gif" alt="" title="Selectively displaying data" width="500" height="332" class="alignnone size-full wp-image-134768" /></a></p>
<p><a href="http://css-tricks.com/snippets/css/remove-margins-first-element/">Remove Margins for First/Last Elements</a><br />If you ever wanted to remove the top or left margin from the first element in a container, or the right or bottom margin from the last element in a container, you can do this by using pseudo-selectors <code>:first-child</code> and <code>:last-child</code>.</p>
<p><a href="http://css-tricks.com/snippets/css/css-diagnostics/">CSS Diagnostics Stylesheet</a><br />A very useful snippet to have nearby when you are debugging your CSS or want to find mistakes in HTML.</p>
<p class="showcase"><a href="http://css-tricks.com/snippets/css/css-diagnostics/"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/06/debugging.jpg" width="498" height="250" alt="CSS Diagnostics Stylesheet" /></a></p>
<p><a href="http://css-tricks.com/radio-buttons-with-2-way-exclusivity/">Radio Buttons With Two-Way Exclusivity</a><br />
Learn about the <code>:empty</code> pseudo-class selector and jQuery to ensure that when a radio button is clicked, the area is determined and all other radio buttons in that column are turned off, and then is turned back on when clicked on.</p>
<p><a href="http://css-tricks.com/radio-buttons-with-2-way-exclusivity/"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/06/csstn-124.jpg" alt="Radio Buttons with 2-Way Exclusivity" /></a></p>
<p><a href="http://www.webinterfacelab.com/snippets/tabbed-navigation">Tabbed Navigation With CSS</a><br />
An elegant tabbed navigation menu with drop-down menus &mdash; no JavaScript, of course. Nothing new, but it&#8217;s a quite clean solution.</p>
<p><a href="http://www.webinterfacelab.com/snippets/tabbed-navigation"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/06/csstn-127.jpg" alt="Tabbed Navigation With CSS" /></a></p>
<p><a href="http://www.webinterfacelab.com/snippets/menu-with-notification-badges">Menu With Notification Badges With CSS</a><br />
A ready-to-use snippet for a navigation menu with notification badges.</p>
<p><a href="http://www.webinterfacelab.com/snippets/menu-with-notification-badges"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/06/notifications.jpg" alt="Menu with Notification Badges With CSS" /></a></p>
<p><a href="http://lea.verou.me/css3-secrets/#slide26">Styling based on sibling count (slides)</a><br />
A fantastic overview of the possibilities for styling based on sibling count. Also, make sure to click through the rest of the slide deck &mdash; valuable and useful techniques. Make sure to watch <a href="http://fronteers.nl/congres/2011/sessions/css3-secrets-lea-verou">Lea Verou&#8217;s presentation</a> as well.</p>
<p><a href="http://lea.verou.me/css3-secrets/#slide26"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/06/csstn-125.jpg" alt="Styling based on sibling count (Slides)" /></a></p>
<p><a href="http://css-tricks.com/the-checkbox-hack/">Stuff you can do with the “Checkbox Hack”</a><br />
Wiht the “checkbox hack,” you use a connected label and checkbox input and usually some other element that you are trying to control. Learn what you can do with it.</p>
<p><a href="http://nicolasgallagher.com/lab/css3-facebook-buttons/">CSS3 Facebook Buttons</a><br />
Nicolas Gallagher presents a set of CSS buttons for Facebook with different colors and icons. You might want to check Nicolas&#8217; <a href="http://nicolasgallagher.com/lab/css3-social-signin-buttons/">CSS3 Social Sign-In buttons</a> as well as <a href="http://coding.smashingmagazine.com/2012/05/15/zocial-button-set-72-css3-buttons/">Free Social CSS3 Buttons</a> that we released earlier as well.</p>
<p><a href="http://css-tricks.com/youtube-popup-buttons/">YouTube Popup Buttons</a><br />
This article explores the default state of YouTube buttons, which have a very subtle bevel but pop up on <code>:hover</code> and <code>:focus</code> states, eager to be clicked.</p>
<p><a href="http://css-tricks.com/youtube-popup-buttons/"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/06/csstn-121.jpg" alt="YouTube Popup Buttons" /></a></p>
<p><a href="http://css-tricks.com/14745-centering-in-the-unknown/">Centering in the Unknown</a><br />
When it comes to centering things in Web design, the more information you have about the element being centered and its parent element, the easier it is. Chris Coyier shows how to do it when you do not know anything.</p>
<p class="showcase"><a href="http://css-tricks.com/14745-centering-in-the-unknown/"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/05/result-css-017.jpg" alt="Centering in the Unknown" title="Centering in the Unknown" width="498" height="298" class="alignnone size-full wp-image-133358" /></a></p>
<p><a href="http://daverupert.com/2012/04/uncle-daves-ol-padded-box/">Uncle Dave&#8217;s Ol’ Padded Box</a><br />
What if you combined <code>background-size: cover</code> and Thierry Koblentz’ <a href="http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/">intrinsic ratios</a>. The result is images and video than maintain their aspect ratio; but you can also use <code>background-size: cover</code> to change the aspect ratio and auto-cropping of images with just a little CSS. And the great news is that the property is supported in all modern browsers and matches media-query support exactly. </p>
<p><a href="http://css-tricks.com/snippets/css/clear-fix/">Micro Clearfix: Force Element To Self-Clear its Children</a><br />Chris Coyier presents various technique for forcing elements to self-clear its children, including Nicolas Gallagher&#8217;s short code snippet from 2011.</p>
<p class="showcase"><a href="http://css-tricks.com/snippets/css/clear-fix/"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/06/micro-clearfix.jpg" height="285" alt="Micro Clearfix: Force Element To Self-Clear its Children" /></a></p>
<p><a href="http://adactio.com/journal/5429/">Conditional CSS</a><br />
A clever technique by Jeremy Keith to load additional content conditionally. The idea is that once a media query fires, the content on the <code>body</code> element is generated and can be detected by a JavaScript, prompting extra content to be loaded.</p>
<p><a href="http://paulirish.com/2012/box-sizing-border-box-ftw/">* { box-sizing: border-box } FTW</a><br />
Once you start mixing and matching various units in CSS &mdash; such as <code>%</code> for the container width, <code>em</code> for padding and <code>px</code> for border &mdash; then you run right into the box-model problem because the width of the container doesn&#8217;t include padding and border. We can easily solve this using <code>box-sizing: border-box</code>. And the best part: it is even supported in IE 8.</p>
<p><a href="http://css-tricks.com/multiple-attribute-values/">Multiple Attribute Values</a><br />
How to treat multiple values in attributes rather than classes.</p>
<p class="showcase"><a href="http://css-tricks.com/multiple-attribute-values/"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/05/css-roundup-003.jpg" alt="Multiple Attribute Values" title="Multiple Attribute Values" width="500" height="300" class="alignnone size-full wp-image-133562" /></a></p>
<p><a href="http://www.aaronbarker.net/2010/07/diagonal-sprites/">Diagonal CSS Sprites</a><br />
If you build a sprite on a diagonal, there will be no components below or to the right of the component you are showing. This allows you to make the element using the sprite as wide or as tall as it needs to be, without worrying about exposing the next component. Also, check out <a href="http://demosthenes.info/blog/391/CSS-Sprites-for-the-Modern-Era-Refined-Animated-and-Semantic">David Storey&#8217;s article on CSS sprites for the moder era</a>.</p>
<p><a href="http://css-tricks.com/double-click-in-css/">Double Click in CSS</a><br />
Is there a way to detect whether a link is tapped or double-clicked on mobile devices? In fact, we can. However, the code requires some hardcore CSS nerdery. Also, check <a href="http://www.ryancollins.me/?p=1041">Pure CSS Clickable Events Without :target</a> by Ryan Collins.</p>
<p><a href="http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/">Replacing the -9999px hack (new image replacement)</a><br />
In the beginning was FIR (Fahrner image replacement). Scott Kellum, design director at Treesaver, has now developed this refactored code for hiding text.</p>
<p class="showcase"><a href="http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/05/css-roundup-002.jpg" alt="Replacing the -9999px hack (new image replacement)" title="Replacing the -9999px hack (new image replacement)" width="500" height="300" class="alignnone size-full wp-image-133456" /></a></p>
<p><a href="http://css-tricks.com/fighting-the-space-between-inline-block-elements/">Fighting the Space Between Inline Block Elements</a><br />
A series of inline-block elements formatted like you would normally format HTML will have spaces between them. But we often want the elements to butt up against each other, thus avoiding in the case of navigation) those awkward little unclickable gaps. How do you solve it? Chris Coyier has found a couple of solutions.</p>
<p><a href="http://viget.com/inspire/css-pointer-events-and-a-pure-css3-animating-tooltip">CSS pointer-events and a pure CSS3 animating tooltip</a><br />
The pointer-events property allows you to specifiy how the mouse interacts with the element it is touching. See what you can do with it and what to consider when using them.</p>
<p><a href="http://bradfrostweb.com/blog/mobile/anatomy-of-a-mobile-first-responsive-web-design/">Anatomy of a mobile-first responsive Web design</a><br />
An excellent article by Brad Frost about the different considerations for responsive designs. How do you start? What features would you implement and how? What about advanced optimization such as LocalStorage or AppCache? This article provide an excellent guide for getting started with future-friendly responsive designs.</p>
<p class="showcase"><a href="http://bradfrostweb.com/blog/mobile/anatomy-of-a-mobile-first-responsive-web-design/"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/06/css-add-012.png" alt="" title="anatomy of a mobile-first responsive web design" width="500" height="300" class="alignnone size-full wp-image-134767" /></a></p>
<p><a href="https://github.com/filamentgroup/Southstreet">SouthStreet Progressive Enhancement Workflow</a><br />A fantastic article by Scott Jehl and Filament Group in which they present a set of tools that form the core of an advanced responsive design workflow. Definitely useful to keep in mind for your next responsive design project.</p>
<h3 id="typography">Typography And Text With CSS</h3>
<p>Advanced CSS techniques provide us with remarkable options to style text in very different ways. Not only can we make the typography look sharper and beautiful on the Web with tools such as <a href="http://letteringjs.com">Lettering.js</a>, <a href="http://kerningjs.com/">Kerning.js</a> and <a href="http://fittextjs.com/">FitText</a>; we can also play with glyphs, line breaks, font sizing, truncating text and styling lists. The typography can be adjusted and improved with just a couple of practical approaches.</p>
<p><a href="http://tympanus.net/codrops/2011/11/09/interactive-html5-typography/">Interactive Typography effects with HTML5</a><br />
This techniques uses <code>canvas</code> and JavaScript to create ab interactive typography effect. Users can interact with the glyphs and as designer you can define forms or shapes of the word you&#8217;d like to present and how you&#8217;d like them to change on hover. Fancy!</p>
<p class="showcase"><a href="http://tympanus.net/codrops/2011/11/09/interactive-html5-typography/"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/05/css-roundup-008.jpg" alt="Interactive Typography Effects with HTML5" title="Interactive Typography Effects with HTML5" width="500" height="300" class="alignnone size-full wp-image-133598" /></a></p>
<p><a href="http://tympanus.net/codrops/2011/12/28/with-rocking-letters-into-the-new-year/">Rocking letters with CSS3 and jQuery</a><br />
A simple animation of letters with CSS3 and jQuery.</p>
<p class="showcase"><a href="http://tympanus.net/codrops/2011/12/28/with-rocking-letters-into-the-new-year/"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/05/result-css-098.jpg" alt="With Rocking Letters into the New Year" title="With Rocking Letters into the New Year" width="498" height="298" class="alignnone size-full wp-image-133507" /></a></p>
<p><a href="http://webforfreaks.com/cssandtype/">CSS 3D Typography</a><br />
What about integrating stripes into glyphs and adjust the shadow on hover? This technique uses just that, creating a nice, subtle yet engaging visual effect. You can find more interesting type experiments in <a href="http://webforfreaks.com/cssandtype/">CSS3type Showcase</a>.</p>
<p class="showcase"><a href="http://webforfreaks.com/cssandtype/index.php?chemin=content/2011-01-01/"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/06/stripes.jpg" alt="cssandtype.com, gallery of css text effects" title="cssandtype.com, gallery of css text effects" width="500" height="208" class="alignnone size-full wp-image-133468" /></a></p>
<p class="showcase"><a href="http://webforfreaks.com/cssandtype/"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/05/css-012.jpg" alt="cssandtype.com, gallery of css text effects" title="cssandtype.com, gallery of css text effects" width="498" height="298" class="alignnone size-full wp-image-133468" /></a></p>
<p><a href="http://trentwalton.com/bgclip/">CSS3 animation and masking text</a><br />
Chandler Van De Water had a challenge for Trent Walton after seeing the header animation in his “CSS3 in Transition” post. Noticing that he used a PNG image file with knockout transparency, he wanted to do the same CSS animation with selectable text. Trent was happy to oblige! At the moment, this works only in Safari and Chrome.</p>
<p class="showcase"><a href="http://trentwalton.com/bgclip/"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/05/result-css-070.jpg" alt="CSS3 Animations and Masking Text" title="CSS3 Animations and Masking Text" width="498" height="298" class="alignnone size-full wp-image-133582" /></a></p>
<p><a href="http://trentwalton.com/2011/05/19/mask-image-text/">CSS mask-image and text</a><br />
Trent Walton uses <code>background-clip: text</code> and <code>mask-image</code> to implement a subtle gray-flecked texture effect over white text. Hover over the box to see how it degrades in unsupported browsers. Make sure to check out Lea Verou&#8217;s “<a href="http://lea.verou.me/2012/05/text-masking-the-standards-way/">Text Masking: The Standards Way</a>” as well.</p>
<p><a href="http://trentwalton.com/2011/05/19/mask-image-text/"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/06/csstn-128.jpg" alt="CSS Mask-Image &#038; Text" /></a></p>
<p><a href="http://nimbupani.com/fake-bolding-of-web-fonts.html">Fake bolding of Web fonts</a><br />
Most browsers simulate bold weights for fonts that do not actually have bold weights. For example, Helvetica Neue Light does not have a bold weight. If you used <code>font-weight: bold</code> with it, browsers would artificially create a bold weight. This article explains how to avoid fake bolding of Web fonts in your designs. By Divya Manian.</p>
<p class="showcase"><a href="http://nimbupani.com/fake-bolding-of-web-fonts.html"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/06/css-add-001.png" alt="Fake Bolding of Web Fonts" title="Fake Bolding of Web Fonts" width="500" height="300" class="alignnone size-full wp-image-134756" /></a></p>
<p><a href="http://elliotjaystocks.com/blog/say-it-with-a-swash/">Tomorrow’s Web type today: Say it With a Swash</a><br />The excellent series &#8220;Tomorrow&#8217;s Web type today&#8221; by Elliot Jay Stocks provides insights into what will be possible with Web typography soon, e.g. swashes. In fact, you can already use them today if you include a swash subset of a font to achieve the desired effect.</p>
<p><a href="http://elliotjaystocks.com/blog/say-it-with-a-swash/"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/06/fonts1.png" alt="OpenType Swashes" title="fonts" width="500" height="359" class="alignnone size-full wp-image-134676" /></a></p>
<p><a href="http://css-tricks.com/snippets/css/internationalization-language-css/">Internationalization Language CSS</a><br />A very handy CSS nippet with language-specific quotes. Perfect for international, multilingual projects. </p>
<p class="showcase"><a href="http://css-tricks.com/snippets/css/internationalization-language-css/"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/06/international.jpg" width="498" height="305" alt="Internationalization Language CSS" /></a></p>
<p><a href="http://tympanus.net/codrops/2011/12/12/experiments-with-background-clip-text/">Experiments with <code>background-clip: text</code></a><br />
With the CSS property <code>background-clip: text</code>, we can add a background image to a text element.</p>
<p class="showcase"><a href="http://tympanus.net/codrops/2011/12/12/experiments-with-background-clip-text/"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/05/result-css-050.jpg" alt="Experiments with background-clip: text" title="Experiments with background-clip: text" width="498" height="298" class="alignnone size-full wp-image-133590" /></a></p>
<p><a href="http://css-tricks.com/14771-a-call-for-nth-everything/">A Call for ::nth-everything</a><br />
With CSS3, we have positional pseudo-class selectors to help us select a particular element when it has no distinguishing characteristics other than where it is in the DOM in relation to its siblings.</p>
<p class="showcase"><a href="http://css-tricks.com/14771-a-call-for-nth-everything/"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/05/result-css-011.jpg" alt="A Call for ::nth-everything" title="A Call for ::nth-everything" width="498" height="298" class="alignnone size-full wp-image-133352" /></a></p>
<p><a href="http://webforfreaks.com/cssandtype/index.php?chemin=content/2011-06-11/">Smooth font using the text-shadow property</a><br />
A common problem: is there a way smooth the appearance of glyphs on older machines, especially Windows XP (standard / ClearType rendering mode)? Yes, perhaps. You can give a try the <code>text-shadow</code>-property which adds text-shadow on the top-left and the bottom-right to smooth text.</p>
<p class="showcase"><a href="http://webforfreaks.com/cssandtype/index.php?chemin=content/2011-06-11/"><br />
<img src="http://media.smashingmagazine.com/wp-content/uploads/2012/05/result-css-054.jpg" alt="Smooth font using CSS3 text-shadow property" title="Smooth font using CSS3 text-shadow property" width="498" height="298" class="alignnone size-full wp-image-133588" /></a></p>
<p><a href="http://trentwalton.com/2012/06/19/fluid-type/">Fluid Type</a><br />Trent Walton explains his approach to fluid typography in which he asks himself how we can make sure that browser width and typographic settings such as measure or font-size and how should we handle panoramic viewports? An interesting article, especially if you use a typography-out approach in your designs. </p>
<p class="showcase"><a href="http://trentwalton.com/2012/06/19/fluid-type/"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/06/csstn-141.jpg" alt="Fluid Type" /></a></p>
<p><a href="http://csswizardry.com/2012/02/pragmatic-practical-font-sizing-in-css/">Pragmatic, practical font sizing in CSS</a><br />
Harry Roberts shares his thoughts on how to size fonts more efficiently, writing your CSS differently in the process.</p>
<p><a href="http://www.456bereastreet.com/archive/201204/automatic_line_breaks_in_narrow_columns_with_css_3_hyphens_and_word-wrap/">Automatic line breaks with CSS3 hyphens and word-wrap</a><br />
Roger Johansson shows how to solve a common problem: as columns of text become narrower, the risk of a single word being longer than the column’s width increases. When that happens, the text normally extends beyond the column. Luckily, CSS offers two properties to improve the situation: <code>word-wrap</code> and <code>hyphens</code>.</p>
<p><a href="http://nicewebtype.com/notes/2012/02/03/molten-leading-or-fluid-line-height/">Molten leading (or fluid line height)</a><br />
When a responsive composition meets a viewport, there are different ways to fill space. Adjusting any one element without also adjusting the others is a recipe for uncomfortable reading, which is one reason why designers have such a difficult time with fluid Web layouts. Tim Brown started a discussion about this issue and provides a couple of techniques for opimization.</p>
<p class="showcase"><a href="http://nicewebtype.com/notes/2012/02/03/molten-leading-or-fluid-line-height/"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/06/mold2.jpg" width="500" alt="Molten leading (or, fluid line-height)" title="Molten leading (or, fluid line-height)" class="alignnone size-full wp-image-133633" /></a></p>
<p><a href="http://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/">Prevent Long URL&#8217;s From Breaking Out of Container</a><br />Another snippet by Chris Coyier for keeping long URLs within the container. <code>word-wrap</code>, <code>word-break</code> and <code>hyphens</code> properties in use. Also, learn how to <a href="http://css-tricks.com/snippets/css/prevent-superscripts-and-subscripts-from-affecting-line-height/">Prevent Superscripts and Subscripts from Affecting Line-Height</a>.</p>
<p><a href="http://css-tricks.com/viewport-sized-typography/">Viewport-sized typography</a><br />
This technique uses new CSS values for sizing elements relative to the viewport’s current size: <code>vw</code>, <code>vh</code> and <code>vmin</code>. This allows you to couple the size of, say, a typographic heading to the available screen space. Browser support is quite poor for now, so if you are looking for an alternative, check out <a href="http://fittextjs.com/">FitText.js</a>.</p>
<p><a href="http://css-tricks.com/viewport-sized-typography/"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/06/csstn-105.jpg" alt="Viewport Sized Typography" /></a></p>
<p><a href="http://css-tricks.com/minimum-paragraph-widths/">Minimum paragraph widths in fluid layouts</a><br />
This article shows how to solve the problem of paragraphs that are too narrow, by implementing a minimum paragraph width. If the space left a the floating image is less than this width, then the whole paragraph moves below the image.</p>
<p><a href="http://www.456bereastreet.com/archive/201105/styling_ordered_list_numbers/">Styling ordered list numbers</a><br />
Roger Johansson shows how we can style ordered list numbers with the <code>:before</code> pseudo element, which can take a counter as a value through the <code>content</code> property. Also check out <a href="http://css-tricks.com/numbering-in-style/">Chris Coyier&#8217;s post</a> and Louis Lazaris&#8217; <a href="http://www.impressivewebs.com/css-counter-increment/">CSS Counters: counter-increment and friends</a>.</p>
<p class="showcase"><a href="http://www.456bereastreet.com/archive/201105/styling_ordered_list_numbers/"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/06/list-item.jpg" alt="Styling ordered list numbers" title="Styling ordered list numbers" width="500" height="261" class="alignnone size-full wp-image-133362" /></a></p>
<p><a href="http://www.impressivewebs.com/reverse-ordered-lists-html5/">Reverse ordered lists in HTML5</a><br />
The reverse attribute allows you to write a descending list of numbered items. Louis Lazaris summarizes what it does and offers a solution to get around a lack of browser support for this attribute.</p>
<p class="showcase"><a href="http://www.impressivewebs.com/reverse-ordered-lists-html5/"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/06/reversed-lists.jpg" alt="Reverse Ordered Lists in HTML5" title="Reverse Ordered Lists in HTML5" width="500" height="342" class="alignnone size-full wp-image-133594" /></a></p>
<p><a href="http://demosthenes.info/blog/442/Preserving-Whitespace-With-CSS3-tab-size-&amp;-3-Other-Solutions">Preserving white space with CSS3 tab size</a><br />
By default, HTML pages ignore anything more than a single space and collapses them. But there are occasions when you’ll want to preserve this space via one of several possible techniques.</p>
<p><a href="http://amix.dk/blog/post/19661">Truncating text using only CSS</a><br />
This code snippet can be used to shorten a line of text using nothing but CSS.</p>
<p><a href="http://www.impressivewebs.com/new-css3-text-wrap/">New CSS3 properties to handle text and word wrapping</a><br />
Louis Lazaris explains the possibilities and problems of text-wrap, overflow-wrap, line-break and word-break, text-overflow and hyphens. Also worth reading: Kenneth Auchenberg <a href="http://blog.kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/">discusses the options for word wrapping and hyphenation</a> in combination with dynamic width elements.</p>
<p><a href="http://css-tricks.com/snippets/css/end-articles-with-ivy-leaf/">End Articles with Ivy Leaf</a><br />A clever technique for adding an extra touch to the end of your articles. <code>:last-child</code>, <code>:after</code> and <code>content</code> in use.</p>
<h3 id="navigation">Hover Effects and Navigation Menus with CSS</h3>
<p>We are used to classical navigation patterns such as tabbed navigation or drop-downs, but we can do a lot more to spice up our navigation menus with pleasant hover effects, often without extra images. Especially if you&#8217;d like to add a bit more polish to your portfolio, gallery or e-commerce website, these techniques can be quite useful. What about &#8220;over-the top&#8221; hover effect for your links, </p>
<p><a href="http://tympanus.net/Tutorials/CircleNavigationEffect/">Circle Navigation Effect With CSS3</a><br />
A bubble-like thumbnail preview for your navigation with CSS3.</p>
<p class="showcase"><a href="http://tympanus.net/Tutorials/CircleNavigationEffect/"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/06/circle-navigation.jpg" alt="Circle Navigation Effect with CSS3" title="Circle Navigation Effect with CSS3" width="498" height="309" class="alignnone size-full wp-image-133581" /></a></p>
<p><a href="http://inspectelement.com/articles/create-a-css3-image-gallery-with-a-3d-lightbox-animation/">Create a CSS3 Image Gallery With a 3D Lightbox Animation</a><br />
Tom Kenny has extended a CSS lightbox gallery by adding a few hover effects to the gallery grid itself and a 3D rotation to the lightbox content, all with CSS.</p>
<p class="showcase"><a href="http://inspectelement.com/articles/create-a-css3-image-gallery-with-a-3d-lightbox-animation/"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/05/result-css-016.jpg" alt="Create a CSS3 Image Gallery with a 3D Lightbox Animation – Inspect Element" title="Create a CSS3 Image Gallery with a 3D Lightbox Animation – Inspect Element" width="498" height="298" class="alignnone size-full wp-image-133357" /></a></p>
<p><a href="http://tympanus.net/codrops/2012/02/06/3d-gallery-with-css3-and-jquery/">3D Gallery With CSS3 and jQuery</a><br />
This article shares an experimental gallery that uses CSS 3D transforms. The idea is to create a circular gallery with an image in the center and two on the sides. Because perspective is being used, the two lateral images will appear three dimensional when rotated.</p>
<p class="showcase"><a href="http://tympanus.net/codrops/2012/02/06/3d-gallery-with-css3-and-jquery/"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/05/result-css-121.jpg" alt="3D Gallery with CSS3 and jQuery" title="3D Gallery with CSS3 and jQuery" width="498" height="298" class="alignnone size-full wp-image-133515" /></a></p>
<p><a href="http://tympanus.net/codrops/2011/10/24/creative-css3-animation-menus/">Creative CSS3 animation menus</a><br />
Mary Lou presents a couple of creative navigation menu hover effects. The idea is to have a simple composition of elements, an icon, a main title and a secondary title that will be animated on hover using only CSS transitions and animations.</p>
<p class="showcase"><a href="http://tympanus.net/codrops/2011/10/24/creative-css3-animation-menus/"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/05/result-css-009.jpg" alt="Creative CSS3 Animation Menus" title="Creative CSS3 Animation Menus" width="498" height="298" class="alignnone size-full wp-image-133350" /></a></p>
<p><a href="http://tympanus.net/codrops/2012/01/22/how-to-spice-up-your-menu-with-css3/">How to spice up your menu with CSS3</a><br />
Yes, another technique by Tympanus: this tip shows how to spice up a menu by adding a neat hover effect to it. The idea is to slide an image out to the right when the menu item is hovered over.</p>
<p class="showcase"><a href="http://tympanus.net/codrops/2012/01/22/how-to-spice-up-your-menu-with-css3/"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/05/result-css-118.jpg" alt="How to spice up your menu with CSS3" title="How to spice up your menu with CSS3" width="498" height="298" class="alignnone size-full wp-image-133512" /></a></p>
<p><a href="http://www.netmagazine.com/node/1417">Create a zoomable user interface</a><br />
David DeSandro reveals how to use CSS transforms to create a zoomable user interface similar to that of <a href="http://2011.beercamp.com/">Beercamp 2011</a>. In this tutorial, you’ll also learn how to use JavaScript to hijack scrolling to manipulate the zoom.</p>
<p class="showcase"><a href="http://www.netmagazine.com/node/1417"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/05/result-css-058.jpg" alt="Create a zoomable user interface with CSS3" title="Create a zoomable user interface with CSS3" width="498" height="298" class="alignnone size-full wp-image-133584" /></a></p>
<p><a href="http://tympanus.net/Development/FlipboardPageLayout/?page=0">Flipboard Navigation</a><br />
An experimental page layout inspired by Flipboard&#8217;s interface.</p>
<p class="showcase"><a href="http://tympanus.net/Development/FlipboardPageLayout/?page=0"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/06/css-add-006.png" alt="Flipboard Page Layout" title="Flipboard Page Layout"  class="alignnone size-full wp-image-134761" /></a></p>
<p><a href="http://jsfiddle.net/kizu/zfUyN/">Multi-direction hover</a><br />
This element shows different hover effects when hovering from different directions.</p>
<p class="showcase"><a href="http://jsfiddle.net/kizu/zfUyN/"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/05/result-css-129.jpg" alt="Multi-direction hover" title="Multi-direction hover" width="498" height="298" class="alignnone size-full wp-image-133503" /></a></p>
<p><a href="http://jsdo.it/ksk1015/cLLl">Experimental Hover Effects</a><br />
Original and innovative hover effects discovered via Twitter on what appears to be a Japanese code sharing website.</p>
<p class="showcase"><a href="http://jsdo.it/ksk1015/cLLl"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/05/result-css-005.jpg" alt="Share JavaScript, HTML5 and CSS" title="Share JavaScript, HTML5 and CSS" width="498" height="298" class="alignnone size-full wp-image-133346" /></a></p>
<p><a href="http://jsfiddle.net/hakim/Ht6Ym/">Over-the-top hover effect</a><br />
A CSS and JavaScript technique for creating an “over-the-top” hover effect using the <code>transform-origin</code> <code>transform-style</code> properties as well as 3-D transforms.</p>
<p><a href="http://tympanus.net/codrops/2012/02/21/accordion-with-css3/">Accordion With CSS3</a><br />
Mary Lou experiments with the adjacent and general sibling combinator and the <code>:checked</code> pseudo-class. Using hidden inputs and labels, she creates an accordion that animates the content areas on opening and closing.</p>
<p class="showcase"><a href="http://tympanus.net/codrops/2012/02/21/accordion-with-css3/"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/05/result-css-138.jpg" alt="Accordion with CSS3" title="Accordion with CSS3" width="498" height="298" class="alignnone size-full wp-image-133466" /></a></p>
<p><a href="http://www.alistapart.com/articles/expanding-text-areas-made-elegant/">Expanding Text Areas Made Elegant</a><br />
An expanding text area is a good choice when you don&#8217;t know how much text the user will write and you want to keep the layout compact. In this article, Neil Jenkins explains how to do this simply. Also, you might want to take a look at <a href="http://www.impressivewebs.com/textarea-auto-resize/">Textarea Auto Resize</a>, another technique by Louis Lazaris, using a hidden clone element.</p>
<p><a href="http://tympanus.net/codrops/2012/01/09/filter-functionality-with-css3/">Filter Functionality With CSS3</a><br />
Using the general sibling combinator and the <code>:checked</code> pseudo-class, we can toggle states of other elements by checking a box or radio button. This tutorial explores those CSS3 properties by creating a experimental portfolio filter that toggles the states of items of a specific type.</p>
<p class="showcase"><a href="http://tympanus.net/codrops/2012/01/09/filter-functionality-with-css3/"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/05/result-css-108.jpg" alt="Filter Functionality with CSS3" title="Filter Functionality with CSS3" width="498" height="298" class="alignnone size-full wp-image-133565" /></a></p>
<p><a href="http://www.456bereastreet.com/archive/201111/an_accessible_keyboard_friendly_custom_select_menu/">An accessible, keyboard-friendly custom select menu</a><br />
A new approach for more accessibility by Roger Johansson. He styles only the <code>select</code> element.</p>
<h3 id="visual">Visual Techniques with CSS</h3>
<p>We used to heavily on images and visual elements to create basic visual effects on the Web. With CSS3, we can not only improved the loading speed of the content, but also make our visual elements more flexible and adaptive. Let&#8217;s take a look on a couple of examples of how we can achieve that.</p>
<p><a href="http://inspectelement.com/tutorials/create-the-illusion-of-stacked-elements-with-css3-pseudo-elements/">Create the Illusion of Stacked Elements with CSS3 Pseudo-Elements</a><br />
Tom Kenny shows how to create a simple “stacked” look to a group of images.</p>
<p class="showcase"><a href="http://inspectelement.com/tutorials/create-the-illusion-of-stacked-elements-with-css3-pseudo-elements/"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/05/css-roundup-023.jpg" alt="Create the Illusion of Stacked Elements with CSS3 Pseudo-Elements – Inspect Element" title="Create the Illusion of Stacked Elements with CSS3 Pseudo-Elements – Inspect Element" width="500" height="300" class="alignnone size-full wp-image-133629" /></a></p>
<p><a href="http://codepen.io/ericft/pen/map_pins/3">CSS3 Unfold Map with Pins</a><br />A handy snippet for placing pins on a map. The code looks a bit verbose, so you might want to remove a couple of visual &#8220;nice-to-have&#8221; elements.</p>
<p class="showcase"><a href="http://codepen.io/ericft/pen/map_pins/3"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/06/csstn-146.jpg" alt="CSS3 Unfold Map with Pins" /></a></p>
<p><a href="http://demosthenes.info/blog/446/Turn-Pictures-Into-Postage-Stamps-With-CSS3-border-image">Turn Images Into Postage Stamps With CSS3 border-image</a><br />
Dudley Storey shows a simple way to create a postage stamp from a simple image with <code>border-image</code>.</p>
<p class="showcase"><a href="http://demosthenes.info/blog/446/Turn-Pictures-Into-Postage-Stamps-With-CSS3-border-image"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/05/result-css-0371.jpg" alt="Turn Images Into Postage Stamps With CSS3 border-image" title="Turn Images Into Postage Stamps With CSS3 border-image" width="498" height="298" class="alignnone size-full wp-image-133595" /></a></p>
<p><a href="http://tympanus.net/codrops/2011/12/21/slopy-elements-with-css3/">Slopy elements with CSS3</a><br />
Angled shapes and diagonal lines can create an interesting visual flow and add some unexpected excitement. This tutorial shows some simple examples and ways how to create slopy, skewed elements with only CSS.</p>
<p class="showcase"><a href="http://tympanus.net/codrops/2011/12/21/slopy-elements-with-css3/"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/05/result-css-099.jpg" alt="Slopy Elements with CSS3" title="Slopy Elements with CSS3" width="498" height="298" class="alignnone size-full wp-image-133566" /></a></p>
<p><a href="http://codepen.io/rnarian/pen/1/5">CSS Flip Clock</a><br />A code snippet for displaying a flip clock-alike time display using CSS.</p>
<p class="showcase"><a href="http://codepen.io/rnarian/pen/1/5"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/06/csstn-145.jpg" alt="CSS Flip Clock" /></a></p>
<p><a href="http://webdesignerwall.com/tutorials/css3-image-styles">CSS3 Image Styles</a><br />
When applying a CSS3 inset <code>box-shadow</code> or <code>border-radius</code> directly to an image element, the browser won’t render the CSS style perfectly. Here&#8217;s a quick tutorial on how to use jQuery to make perfect rounded corner images dynamically. And check out <a href="http://webdesignerwall.com/tutorials/css3-image-styles-part-2">the second part</a>.</p>
<p class="showcase"><a href="http://webdesignerwall.com/tutorials/css3-image-styles-part-2"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/06/css-image-styles1.jpg" alt="CSS3 Image Styles – Part 2" title="CSS3 Image Styles – Part 2" width="500" height="271" class="alignnone size-full wp-image-133500" /></a></p>
<p><a href="http://webdesignerwall.com/tutorials/creating-reusable-versatile-background-patterns">Creating Reusable and Versatile Background Patterns</a><br />
A simple tutorial on how to create reusable background patterns with Photoshop and CSS.</p>
<p class="showcase"><a href="http://webdesignerwall.com/tutorials/creating-reusable-versatile-background-patterns"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/05/result-css-059.jpg" alt="Creating Reusable &amp; Versatile Background Patterns" title="Creating Reusable &amp; Versatile Background Patterns" width="498" height="298" class="alignnone size-full wp-image-133587" /></a></p>
<p><a href="http://jsfiddle.net/ChristopherBurton/MNMQM/">Diagonal Graph Paper Gradient</a><br />
A very nice CSS technique for creating diagonal graph paper gradients using <code>repeating-linear-gradient</code> property in CSS.</p>
<p><a href="http://jsfiddle.net/ChristopherBurton/MNMQM/"><img width="500" height="302" src="http://media.smashingmagazine.com/wp-content/uploads/2012/06/linen.jpg" alt="Diagonal Graph Paper Gradient" /></a></p>
<p><a href="http://html5snippets.com/snippets/80-css-tucked-corner-effect">Tucked Corner Effect</a><br />
A clean CSS technique for producing tucked corners using the pseudo-elements <code>:after</code> and <code>:before</code> as well as data URI-coded images. Also, check out <a href="http://jsfiddle.net/chriscoyier/H6rQ6/1/">Corner Ribbon Effect with CSS</a>.</p>
<p><a href="http://html5snippets.com/snippets/80-css-tucked-corner-effect"><img width="500" src="http://media.smashingmagazine.com/wp-content/uploads/2012/06/tucked.jpg" alt="CSS Tucked Corner Effect" /></a></p>
<p><a href="http://lea.verou.me/2012/04/background-attachment-local/">Scrolling&#8230; shadows!</a><br />
An original technique by Roman Komarov to create CSS-only shadow-scrolling effect using <code>background-attachment: local</code>. Developed by Lea Verou, inspired by Roman Komarov.</p>
<p class="showcase"><a href="http://lea.verou.me/2012/04/background-attachment-local/"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/06/css-add-003.png" alt="Scrolling shadows" title="Scrolling shadows" width="500" height="300" class="alignnone size-full wp-image-134758" /></a></p>
<p><a href="http://www.webinterfacelab.com/snippets/multi-colored-progress-bars">Multi-colored CSS progress bars</a><br />
A quite verbose yet CSS-only solution for displaying multi-colored progress bars. It’s <code>linear-gradient</code> in action! Also, check out <a href="http://dipperstove.com/design/css3-progress-bars.html">CSS3 progress bars</a> that display data inside localized leaderboards for the new analytics platform at G5. They are lightweight and require no JavaScript or images.</p>
<p><a href="http://www.webinterfacelab.com/snippets/multi-colored-progress-bars"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/06/csstn-118.jpg" alt="Multi-colored CSS Progress Bars" /></a></p>
<p><a href="http://www.red-team-design.com/css3-breadcrumbs">CSS3 breadcrumbs</a><br />
Learn how to create your own cool CSS3 breadcrumbs. Also, check the <a href="http://codepen.io/komputerwiz/pen/css3-breadcrumbs/1">CSS Breadcrumbs Example</a> which uses only CSS linear gradients.</p>
<p class="showcase"><a href="http://www.red-team-design.com/css3-breadcrumbs"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/05/result-css-131.jpg" alt="CSS3 breadcrumbs" title="CSS3 breadcrumbs" width="498" height="298" class="alignnone size-full wp-image-133496" /></a></p>
<p><a href="http://css-tricks.com/adobe-like-arrow-headers/">Adobe-like Arrow Headers</a><br />
A detailed article about the technique Adobe uses to create header bars for modules on its website.</p>
<p><a href="http://css-tricks.com/adobe-like-arrow-headers/"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/06/csstn-122.jpg" alt="Adobe-like Arrow Headers" /></a></p>
<p><a href="http://css-tricks.com/snippets/css/top-shadow/">Adding a Top Shadow to a website</a><br />If you ever wanted to add a shadow along the top edge of the website, you can easily do it by styling <code>body:before</code>.</p>
<p class="showcase"><a href="http://css-tricks.com/snippets/css/top-shadow/"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/06/depth.jpg" height="285" alt="Adding a Top Shadow to a website" /></a></p>
<p><a href="http://devblog.xing.com/frontend/a-flexible-shadow-with-background-size/">A flexible shadow with background-size</a><br />
It&#8217;s amazing what you can achieve when you combine different techniques&mdash;even when facing a challenge such as a flexible shadow. If you had to create an adaptive shadow effect, how would you create it?</p>
<p class="showcase"><a href="http://devblog.xing.com/frontend/a-flexible-shadow-with-background-size/"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/06/css-add-016.png" alt="" title="A flexible shadow with background-size" width="500" height="300" class="alignnone size-full wp-image-134811" /></a></p>
<p><a href="http://css-tricks.com/star-ratings/">Star Ratings With Very Little CSS</a><br />
Chris Coyier shows how to code star ratings done with very little CSS code and lots of a bit of Unicode madness.</p>
<p><a href="http://demosthenes.info/blog/532/Convert-Images-To-Black--White-With-CSS">Convert Images to Black And White With CSS</a><br />
Filters allow us to visually process an image in the browser without needing to go through PhotoShop or use cycle-intensive, script-heavy methods in JavaScript or PHP. CSS3 filters are broadly supported in the most recent versions of Firefox and Chrome, and we can gain support in older versions and alternative browsers &mdash; even IE &mdash; by using a combination of techniques.</p>
<p class="showcase"><a href="http://demosthenes.info/blog/532/Convert-Images-To-Black--White-With-CSS"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/06/css-add-010.png" alt="" title="Convert Images To Black And White With CSS" width="500" height="300" class="alignnone size-full wp-image-134765" /></a></p>
<p><a href="http://jsfiddle.net/csswizardry/7BXUf/embedded/result,html,css,js/">Punching Holes With CSS</a><br />
A clever and simple technique to make a block in a container appear transparent and display a background image. Also, take a look at <a href="http://lea.verou.me/2011/08/accessible-star-rating-widget-with-pure-css/">Lea Verou&#8217;s accessible star rating widget with CSS</a>.</p>
<p><a href="http://css-tricks.com/simple-styles-for-horizontal-rules/">Simple Styles for Horizontal Rules</a><br />
With the help of a few contributors, Chris Coyier put together this page of simple styles for horizontal rules.</p>
<p class="showcase"><a href="http://css-tricks.com/simple-styles-for-horizontal-rules/"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/05/result-css-126.jpg" alt="Simple Styles for Horizontal Rules" title="Simple Styles for Horizontal Rules" width="498" height="298" class="alignnone size-full wp-image-133561" /></a></p>
<p><a href="http://methodandcraft.com/videos/optimizing-graphics-with-css-masks">Optimizing Graphics With CSS Masks</a (Video)><br />
In this video, Aaron Bushnell shows how CSS masks can help make the process easier on you and how to make sure you have fallbacks in place for non-Webkit browsers.</p>
<p><a href="http://paulirish.com/2009/browser-specific-css-hacks/">Browser-Specific CSS Hacks</a><br />
A useful, comprehensive list of browser-specific CSS hacks for targeting legacy browsers. Unfortunately, most of us will need them quite often.</p>
<h3>Last Click</h3>
<p><a href="http://www.ryancollins.me/?p=539">CSS3 Lasers!</a><br />
Shows a laser shot effect when hovering over an element.</p>
<p class="showcase"><a href="http://www.ryancollins.me/?p=539"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/06/lasers-new.jpg" alt="CSS3 Lasers!" title="CSS3 Lasers!" width="513" height="433" class="alignnone size-full wp-image-133614" /></a></p>
<p><a href="http://hakim.se/experiments/css/domtree/">The DOM Tree</a><br />
This DOM tree is generated via JavaScript every time you visit the page, so you&#8217;ll never see the same one twice. All of the forms are filled with holiday greetings in a variety of languages. CSS3 3D transforms are used to position and rotate, via <code>translate3d()</code> and <code>rotate3d()</code> respectively, the elements when the page loads. The infinitely looping rotation on the tree is controlled by an infinitely looping CSS3 animation. Just one word: crazy!</p>
<p class="showcase"><a href="http://hakim.se/experiments/css/domtree/"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/06/the-dom-tree.jpg" alt="DOM Tree" title="DOM Tree" class="alignnone size-full wp-image-133316" /></a></p>
<h3>What&#8217;s Your Favourite Technique?</h3>
<p>We&#8217;d love to know your experience with some of the featured techniques, or perhaps you&#8217;ve stumbled upon another interesting CSS technique recently? Let us know in the comments to this post!</p>
<p><!-- deleted script tag --><br />
<noscript><a href="http://polldaddy.com/poll/6331943/">What kind of &#8220;round-ups&#8221; would you like to see on SmashingMag?</a></noscript></p>
<p><em>(jvg) (al) (vf) (ml)</em></p>
<hr />
<p><small>© Smashing Editorial for <a href="http://www.smashingmagazine.com">Smashing Magazine</a>, 2012.</small></p>
                                    [@attributes] => Array
                                        (
                                            [type] => html
                                            [base] => http://www.smashingmagazine.com/2012/06/21/css-round-up-part-1-new-and-powerful-css-techniques/
                                        )

                                )

                            [thr:total] => 0
                        )

                    [1] => Array
                        (
                            [author] => Array
                                (
                                    [name] => Joseph Casabona
                                    [uri] => http://www.casabona.org
                                )

                            [title] => Array
                                (
                                    [@cdata] => Easily Customize WordPress’ Default Functionality
                                    [@attributes] => Array
                                        (
                                            [type] => html
                                        )

                                )

                            [link] => Array
                                (
                                    [0] => Array
                                        (
                                            [@value] => 
                                            [@attributes] => Array
                                                (
                                                    [rel] => alternate
                                                    [type] => text/html
                                                    [href] => http://www.smashingmagazine.com/2012/06/20/easily-customize-wordpress-default-functionality/
                                                )

                                        )

                                    [1] => Array
                                        (
                                            [@value] => 
                                            [@attributes] => Array
                                                (
                                                    [rel] => replies
                                                    [type] => text/html
                                                    [href] => http://www.smashingmagazine.com/2012/06/20/easily-customize-wordpress-default-functionality/#comments
                                                    [count] => 0
                                                )

                                        )

                                    [2] => Array
                                        (
                                            [@value] => 
                                            [@attributes] => Array
                                                (
                                                    [rel] => replies
                                                    [type] => application/atom+xml
                                                    [href] => http://www.smashingmagazine.com/2012/06/20/easily-customize-wordpress-default-functionality/feed/atom/
                                                    [count] => 0
                                                )

                                        )

                                )

                            [id] => http://mgmt.smashingmagazine.com/?p=135695
                            [updated] => 2012-06-20T08:11:37Z
                            [published] => 2012-06-20T08:03:49Z
                            [category] => Array
                                (
                                    [@value] => 
                                    [@attributes] => Array
                                        (
                                            [scheme] => http://www.smashingmagazine.com
                                            [term] => WordPress
                                        )

                                )

                            [summary] => Array
                                (
                                    [@cdata] => <table width="650"><tr><td width="650"><div style="width:650px;">
      <img src="http://statisches.auslieferung.commindo-media-ressourcen.de/advertisement.gif" alt="" border="0" /><br />
      <a href="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=target&#038;collection=smashing-rss&#038;position=1" target="_blank"><img src="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=image&#038;collection=smashing-rss&#038;position=1" border="0" alt="" /></a>&#160;<a href="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=target&#038;collection=smashing-rss&#038;position=2" target="_blank"><img src="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=image&#038;collection=smashing-rss&#038;position=2" border="0" alt="" /></a>&#160;<a href="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=target&#038;collection=smashing-rss&#038;position=3" target="_blank"><img src="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=image&#038;collection=smashing-rss&#038;position=3" border="0" alt="" /></a>
    </div></td></tr></table>
<p>The absolute best thing about WordPress is how flexible it is. Don't like it? Change the theme. Need added functionality? There is probably a plugin you can download or buy. If not, built it yourself! You can change pretty much everything about WordPress. In this article I'm going to go over some easy ways to customize WordPress that you may not know about.</p>

<p><a href="http://wp.smashingmagazine.com/2012/06/19/customize-wordpress-default-functionality/"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/06/featured-image.jpg" alt="featured-image" width="500" height="300" /></a></p>

<p>Learn how to add image sizes, change sidebar markup, modify pre-published content, customize the author's comment box, and much more. This concise guide shows you how to customize default WordPress functionality with any or all of these techniques.</p>
                                    [@attributes] => Array
                                        (
                                            [type] => html
                                        )

                                )

                            [content] => Array
                                (
                                    [@cdata] => <table width="650">
<tr>
<td width="650">
<div style="width:650px;">
      <img src="http://statisches.auslieferung.commindo-media-ressourcen.de/advertisement.gif" alt="" border="0" /><br />
      <a href="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=target&#038;collection=smashing-rss&#038;position=1" target="_blank"><img src="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=image&#038;collection=smashing-rss&#038;position=1" border="0" alt="" /></a>&nbsp;<a href="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=target&#038;collection=smashing-rss&#038;position=2" target="_blank"><img src="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=image&#038;collection=smashing-rss&#038;position=2" border="0" alt="" /></a>&nbsp;<a href="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=target&#038;collection=smashing-rss&#038;position=3" target="_blank"><img src="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=image&#038;collection=smashing-rss&#038;position=3" border="0" alt="" /></a>
    </div>
</td>
</tr>
</table>
<p>The absolute best thing about WordPress is how flexible it is. Don’t like the theme? Just change it. Need added functionality? There is probably a plugin you can download or buy. If not, build it yourself! You can change pretty much anything about WordPress. In this article, we’ll go over some easy ways to customize WordPress that you might not know about.</p>
<p><a href="http://media.smashingmagazine.com/wp-content/uploads/2012/06/featured-image.jpg"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/06/featured-image.jpg" alt="featured-image" width="500" height="300" class="alignnone size-full wp-image-105927" /></a></p>
<h3>Change The Default Source Of jQuery</h3>
<p>Another great thing about WordPress is that it comes locked and loaded with all kinds of JavaScript libraries, including jQuery. It also gives you the power to change the source of those libraries according to your needs.</p>
<p>Let’s say we want to relieve our server of some stress by switching WordPress’ version of jQuery for a hosted solution (or <abbr title="Content Delivery Network">CDN</abbr> version). We can very easily change the source of jQuery with this function:</p>
<pre class="brush: php">
function add_scripts() {
    wp_deregister_script( 'jquery' );
    wp_register_script( 'jquery', 'http://code.jquery.com/jquery-1.7.1.min.js');
    wp_enqueue_script( 'jquery' );
}

add_action('wp_enqueue_scripts', 'add_scripts');
</pre>
<p>Three things are going on here. First, we’re using <code>wp_deregister_script()</code> to tell WordPress to forget about the version of jQuery currently being used. We then use <code>wp_register_script()</code> to re-register jQuery (as the script name), using jQuery’s own CDN version. Finally, we use <code>wp_enqueue_script()</code> to add jQuery to our theme or plugin.</p>
<p>One thing to note here is that we’re using <code>add_action()</code>, not <code>add_filter()</code>, to add our scripts. Because we’re not making any changes to the content, but instead relying on WordPress to do something in order for our scripts to load, we use an action hook, not a filter hook. Read about both <a href="http://codex.wordpress.org/Plugin_API">in the WordPress Codex</a>.</p>
<h3>Add Image Sizes</h3>
<p>We know that WordPress sets a few different sizes for the images we upload. Did you know you can also (relatively easily) set your own image sizes? And all with two simple functions. If we have a custom header image for our posts with dimensions of 760 &#215; 300 pixels, we could make our images upload to that size with this:</p>
<pre class="brush: php">
add_theme_support( 'post-thumbnails' );
add_image_size( 'post-header', 760, 300, true );
</pre>
<p>The first function, <code>add_theme_support()</code>, tells WordPress to allow not just for thumbnails, but for featured images and images of new sizes. The second line, <code><a href="http://codex.wordpress.org/Function_Reference/add_image_size">add_image_size()</a></code>, is where we add our new size. This function accepts four arguments: name, width, height and whether to crop the image. WordPress also advises strongly against using certain reserved names (read: <strong>do not use them</strong>): <code>thumb</code>, <code>thumbnail</code>, <code>medium</code>, <code>large</code> and <code>post-thumbnail</code>.</p>
<p>Once our new size is created, we can add it to the post’s loop to display it to users, like so:</p>
<pre class="brush: php">
if ( has_post_thumbnail() ){ 
	the_post_thumbnail( 'post-header' ); 
}
</pre>
<p>This checks to see whether you’ve uploaded an image and made it the post’s featured image. If so, WordPress displays it. You can also get fancy and add a default fallback image.</p>
<pre class="brush: php">
if ( has_post_thumbnail() ){ 
	the_post_thumbnail( 'post-header' ); 
}else{
	&lt;img src="'. IMAGES .'/default.jpg" alt="Post Header Image" /&gt;
}
</pre>
<p>In this case, if the post has no thumbnail, it falls back to the default image. Hooray, continuity!</p>
<h3>Change the Sidebar’s Markup</h3>
<p>Registering a sidebar doesn’t take much. All you really need is a name and an ID to make it clear in the admin area:</p>
<pre class="brush: php">
register_sidebar( array (
	'name' =&gt; __( 'Sidebar', 'main-sidebar' ),
	'id' =&gt; 'primary-widget-area'
));
</pre>
<p>WordPress will apply the default markup for us, which we can style as we want. However, we can also add our own markup and style it as we want. I prefer to use divs for sidebar widgets because they are more semantically correct than list items. I also prefer <code>h3</code> for widget headings because I usually reserve <code>h2</code> for the blog post’s title. So, with that in mind:</p>
<pre class="brush: php">
register_sidebar( array (
	'name' =&gt; __( 'Sidebar', 'main-sidebar' ),
	'id' =&gt; 'primary-widget-area',
	'description' =&gt; __( 'The primary widget area', 'wpbp' ),
	'before_widget' =&gt; '&lt;div class="widget"&gt;',
	'after_widget' =&gt; "&lt;/div&gt;",
	'before_title' =&gt; '&lt;h3 class="widget-title"&gt;',
	'after_title' =&gt; '&lt;/h3&gt;',
) );
</pre>
<p>This produces a sidebar that looks like this:</p>
<p><a href="http://media.smashingmagazine.com/wp-content/uploads/2012/06/sidebar-markup.jpg"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/06/sidebar-markup.jpg" title="The sidebar with markup. Isn't the Web Developer Toolbar great?" width="299" height="405" /></a><br />
<em>The sidebar with markup. Isn’t the Web Developer Toolbar great? (<a href="http://media.smashingmagazine.com/wp-content/uploads/2012/06/sidebar-markup.jpg">View image</a>.)</em></p>
<h3>Alter The RSS Widget’s Refresh Rate</h3>
<p>WordPress’ built-in RSS widget is fantastic, but sometimes it doesn’t update often enough. Luckily, there is a fairly simple solution for that. Just add this code to your <code>functions.php</code> file:</p>
<pre class="brush: php">
add_filter( 'wp_feed_cache_transient_lifetime', 
   create_function('$a', 'return 600;') );
</pre>
<p>As you can see, we are using WordPress’ <code><a href="http://codex.wordpress.org/Function_Reference/add_filter">add_filter()</a></code> function, which accepts a <a href="http://codex.wordpress.org/Plugin_API/Filter_Reference">filter hook</a>, callback function and (optional) priority. The <code>wp_feed_cache_transient_lifetime</code> hook handles the feed’s refresh rates. We’re creating our callback function on the fly using PHP’s <a href="http://us2.php.net/manual/en/function.create-function.php"><code>create_function()</code></a> function. It is one line, which returns the refresh rate in seconds. Our refresh rate is set to 10 minutes.</p>
<h3>Add Content To The RSS Feed</h3>
<p>WordPress’ ability to add targeted content to an RSS feed (i.e. content that only your subscribers can see) is especially cool. This could be anything such as ads, a hidden message or value-added content. In the following example, we’ll add a hidden message.</p>
<pre class="brush: php">
function add_to_feed($content){
   $content .= "&lt;p&gt;Thanks for Subscribing! You're the best ever!&lt;/p&gt;";
   return $content;
}

add_filter( "the_content_feed", "add_to_feed" );
</pre>
<p>Using the filter <code>the_content_feed</code>, which is called only when the feed is created, we use a callback function to append new information to the post’s content. If we looked at our website’s feed in Google Reader, we’d see this:</p>
<p><a href="http://media.smashingmagazine.com/wp-content/uploads/2012/06/extra-feed.jpg"><img class="size-full wp-image-105895" title="extra-feed" style="border:1px solid #ddd;" src="http://media.smashingmagazine.com/wp-content/uploads/2012/06/extra-feed.jpg" alt="Here's our super-secret message to all subscribers." width="492" height="186" /></a><br />
<em>Here’s our super-secret message to all subscribers. (<a href="http://media.smashingmagazine.com/wp-content/uploads/2012/06/extra-feed.jpg">View image</a>.)</em></p>
<h3>Highlight The Author’s Comments</h3>
<p>One fairly common practice is to set off the author’s comments from the comments of readers. I do it on my blog:</p>
<p><a href="http://media.smashingmagazine.com/wp-content/uploads/2012/06/comments.jpg"><img class="size-full wp-image-105893" title="comments" src="http://media.smashingmagazine.com/wp-content/uploads/2012/06/comments.jpg" alt="My blog hasn't seen a whole lot of activity lately." width="495" height="439" /></a><br />
<em>My blog hasn’t seen a whole lot of activity lately. (<a href="http://media.smashingmagazine.com/wp-content/uploads/2012/06/comments.jpg">View image</a>.)</em></p>
<p>So, how do we accomplish this? I’m glad you asked! See, in a pre-2.7 world, some custom coding was required to determine whether the author’s ID matches the commenter’s. On my blog, I just used to check whether the commenter’s ID was 1, which was the ID of the admin. Not very good I know, but I was young and naive (as well as the blog’s only author).</p>
<p>Version 2.7+ has a fancy little function named <code><a href="http://codex.wordpress.org/Template_Tags/wp_list_comments">wp_list_comments</a></code>, which prints a post’s comments for us. Even better, it applies the class <code>.bypostauthor</code> to any comments by &mdash; you guessed it &mdash; the post’s author. Now, to style the author’s comments differently, all we need to do is this:</p>
<pre class="brush: css">
.comment { /* Reader comments */
   background: #FFFFFF;
   color: #666666;
}

.bypostauthor { /* Author comments */
   background: #880000;
   color: #FFFFFF;
}
</pre>
<p>Done! Easy, right?</p>
<p><strong>Tip:</strong> If you don’t like that WordPress tells you what markup to use in the comments section, you can tell it to use your own print function:</p>
<pre class="brush: php">
&lt;ul class="commentlist"&gt;
	&lt;?php wp_list_comments('type=comment&amp;callback=my_comment_display'); ?&gt;
&lt;/ul&gt;
</pre>
<p>Then, you create a function named <code>my_comment_display()</code>, which prints your comments as you see fit. More information on that <a href="http://codex.wordpress.org/Template_Tags/wp_list_comments#Comments_Only_With_A_Custom_Comment_Display">in the Codex</a>.</p>
<h3>Modify Published Content</h3>
<p>Just as we modified the feed’s content earlier, we can do the same thing with our website’s content using the <code>the_content</code> filter. What we’ll do here is append the author’s signature to the end of the content:</p>
<pre class="brush: php">
function sig_to_content($content){
   $content .= '&lt;p&gt;&lt;img src="'. IMAGES .'/sig.png" alt="Joseph L. Casabona" /&gt;&lt;/p&gt;';
   return $content;
}

add_filter( "the_content", "sig_to_content" );
</pre>
<p>By now you’re getting the hang of the <code>add_filter()</code> and callback functions. In this case, our filter is <code>the_content</code>. This will add a signature to the end of both posts and pages. To filter out pages, we simply add this condition:</p>
<pre class="brush: php">
function sig_to_content($content){
   if(is_single()){
   		$content .= '&lt;p&gt;&lt;img src="'. IMAGES .'/sig.png" alt="Joseph L. Casabona" /&gt;&lt;/p&gt;';
   		return $content;
   }
}
</pre>
<p>This function, <code>is_single()</code>, checks to see whether we’re viewing a single post (as opposed to the content’s relationship status).</p>
<h3>Create A Custom Template For A Taxonomy</h3>
<p>I started using WordPress way back in 2004, before pages, plugins or rich editing were introduced. Thinking about its evolution into an amazingly flexible platform, I remember doing custom stuff with certain categories and tags using <code>if</code> statements in the <code>single.php</code> template file. It’s much easier now.</p>
<p>WordPress has an incredibly sophisticated <a href="http://codex.wordpress.org/Template_Hierarchy">template hierarchy</a>. Everything falls back to <code>index.php</code>, while templates such as <code>page.php</code> and <code>single.php</code> display various types of content differently. But you could get specific with <code>category.php</code> and even <code>home.php</code>. As you can imagine, <code>home.php</code> would be your home page, and <code>category.php</code> would display relevant posts when the visitor is viewing a category page. What you might not know is that you can get category-specific. By creating a template page named <code>category-[slug].php</code> or <code>category-[id].php</code> (that is, for example, <code>category-news.php</code> or <code>category-6.php</code>), you are telling WordPress, “Use this template specifically for this category.” I usually copy <code>index.php</code> or <code>category.php</code> and modify them.</p>
<h3>Customize The Search Bar</h3>
<p>On the same note, you can customize the search bar by creating a template page named <code>searchform.php</code>, which will include <strong>only the search form</strong>. By default (i.e. when there is no <code>searchform.php</code>), here’s what we’re looking at:</p>
<pre class="brush: php">
&lt;form role="search" method="get" id="searchform" action="&lt;?php echo home_url( '/' ); ?&gt;"&gt;
    &lt;div&gt;&lt;label class="screen-reader-text" for="s"&gt;Search for:&lt;/label&gt;
        &lt;input type="text" value="" name="s" id="s" /&gt;
        &lt;input type="submit" id="searchsubmit" value="Search" /&gt;
    &lt;/div&gt;
&lt;/form&gt;
</pre>
<p><a href="http://media.smashingmagazine.com/wp-content/uploads/2012/06/search.jpg"><img class="size-full wp-image-105898" title="search" src="http://media.smashingmagazine.com/wp-content/uploads/2012/06/search.jpg" alt="The default search bar" width="342" height="46" /></a><br />
<em>The default search bar. (<a href="http://media.smashingmagazine.com/wp-content/uploads/2012/06/search.jpg">View image</a>.)</em></p>
<p>I like to eliminate the button and label and instruct the user to hit “Enter” to search. We can do that simply by creating a <code>searchform.php</code> template file and adding the code. Here’s the file in its entirety:</p>
<pre class="brush: php">
&lt;!--BEGIN #searchform--&gt;
&lt;form class="searchform" method="get" action="&lt;?php bloginfo( 'url' ); ?&gt;"&gt;
	&lt;input class="search" name="s" onclick="this.value=''" type="text" value="Enter your search" tabindex="1" /&gt;
&lt;!--END #searchform--&gt;
&lt;/form&gt;
</pre>
<p><a href="http://media.smashingmagazine.com/wp-content/uploads/2012/06/new-search.jpg"><img class="size-full wp-image-105897" title="new-search" src="http://media.smashingmagazine.com/wp-content/uploads/2012/06/new-search.jpg" alt="Our new search bar after some CSS magic" width="185" height="53" /></a><br />
<em>Our new search bar after some CSS magic. (<a href="http://media.smashingmagazine.com/wp-content/uploads/2012/06/new-search.jpg">View image</a>.)</em></p>
<h3>Customize WordPress’ Log-In Screen</h3>
<p>There are several ways to do this, mostly involving plugins. First, let’s look at a way to customize the log-in logo (and logo URL) through our own theme. Customizing the logo’s URL is easy. Just add this code to your <code>functions.php</code> file:</p>
<pre class="brush: php">
add_filter('login_headerurl', 
	create_function(false,"return 'http://casabona.org';"));
</pre>
<p>Much like with the refresh rate for our RSS widget, we are combining <code>add_filter()</code> and <code>create_function()</code> to return a different URL (in this case, my home page) when the <code>login_headerurl</code> hook is called. Changing the logo image is theoretically the same but does require a little extra work:</p>
<pre class="brush: php">
add_action("login_head", "custom_login_logo");

function custom_login_logo() {
	echo "
	&lt;style&gt;
	body.login #login h1 a {
		background: url('".get_bloginfo('template_url')."/images/custom-logo.png') no-repeat scroll center top transparent;
		height: 313px;
		width: 313px;
	}
	&lt;/style%gt;
	";
}
</pre>
<p>You can see we have a hook (<code>login_head</code>) and a callback function (<code>custom_login_logo()</code>), but instead of <code>add_filter()</code>, we’re using <code>add_action()</code>. The difference between the two is that, while <code>add_filter()</code> replaces some text or default value, <code>add_action()</code> is meant to execute some code at a particular point while WordPress is loading.</p>
<p>In our callback function, we are overwriting the default CSS for the logo (<code>body.login #login h1 a</code>) with an image that we’ve uploaded to our theme’s directory. Be sure to adjust the height and width as needed. We get something like this:</p>
<p><a href="http://media.smashingmagazine.com/wp-content/uploads/2012/06/new-login.png"><img class="size-full wp-image-105896" title="new-login" src="http://media.smashingmagazine.com/wp-content/uploads/2012/06/new-login-500.jpg" alt="That is one handsome sketch." width="500" height="569" /></a><br />
<em>That is one handsome sketch. (<a href="http://media.smashingmagazine.com/wp-content/uploads/2012/06/new-login.png">View image</a>.)</em></p>
<p>You could also go the plugin route and find a bunch that will help you modify the log-in page right from the WordPress admin area. I’m familiar with <a href="http://wordpress.org/extend/plugins/custom-login/">Custom Login</a>, but go ahead and <a href="http://wordpress.org/extend/plugins/search.php?q=custom+login">try a few out</a>!</p>
<h3>Bonus: Make A Splash Page Part Of Your Theme</h3>
<p>While this isn’t exactly modifying WordPress’ default functionality, a lot of designers add completely separate splash pages, and WordPress makes this easy to do. Follow these steps:</p>
<ol>
<li>Create a new file in your theme directory named <code>page-splash.php</code> (although the name doesn’t matter).</li>
<li>Add your HTML and CSS markup and anything else you might use. The idea here is that the markup, CSS and layout for the splash page will probably be different from the rest of the website.</li>
<li>At the top of <code>page-splash.php</code>, add the following, which tells WordPress that this is a page template:<br />
<code>&lt;php /* Template Name: Splash */ ?&gt;</code></li>
<li>Add the two tags that will make your page a WordPress-ready page. Somewhere in the head (ideally, close to <code>&lt;/head&gt;</code>), add <code>&lt;?php wp_head(); ?&gt;</code>. Right before the <code>&lt;/body&gt;</code> tag, add <code>&lt;?php wp_footer(); ?&gt;</code>. Save it!</li>
<li>Go into the WordPress admin panel and create a page using that template:<br />
<a href="http://media.smashingmagazine.com/wp-content/uploads/2012/06/page-temp.png"><img class="aligncenter size-full wp-image-105901" title="page-temp" src="http://media.smashingmagazine.com/wp-content/uploads/2012/06/page-temp.png" alt="default template" width="277" height="179" /></a></li>
<li>Once you have saved the page, go to <code>Settings &rarr; Reading</code>, and under “Front page displays” choose the radio button “A static page.” Make the front page the splash page you created!<br />
<a href="http://media.smashingmagazine.com/wp-content/uploads/2012/06/splash1.png"><img class="aligncenter size-full wp-image-105902" title="splash" style="border:1px solid #ddd;" src="http://media.smashingmagazine.com/wp-content/uploads/2012/06/splash1.png" alt="splash screenshot" width="550" height="153" /></a></li>
</ol>
<h3>Conclusion</h3>
<p>There you have it! Over 10 modifications you can make to WordPress through hooks, functions and template pages, oh my! These are ones I use frequently, but there is a whole host of hooks to do everything from adding body classes to modifying the title before it’s printed. Flexibility and not having to modify the core are what makes WordPress such a great platform! What are your favorite tips? Let us know in the comments.</p>
<h4>Other Resources</h4>
<p>Everything we’ve talked about in this article comes from the WordPress Codex. Here are some pages I find particularly helpful:</p>
<ul>
<li>“<a href="http://codex.wordpress.org/Plugin_API">Plugin API</a>”<br />
An in-depth description of actions and filters, as well as a list of hooks.</li>
<li>“<a href="http://codex.wordpress.org/Template_Tags/">Template Tags</a>”<br />
Everything you can use in the loop.</li>
<li>“<a href="http://codex.wordpress.org/Template_Hierarchy">Template Hierarchy</a>”<br />
How your theme drills down.</li>
</ul>
<p><em>(al)</em></p>
<hr />
<p><small>© Joseph Casabona for <a href="http://www.smashingmagazine.com">Smashing Magazine</a>, 2012.</small></p>
                                    [@attributes] => Array
                                        (
                                            [type] => html
                                            [base] => http://www.smashingmagazine.com/2012/06/20/easily-customize-wordpress-default-functionality/
                                        )

                                )

                            [thr:total] => 0
                        )

                    [2] => Array
                        (
                            [author] => Array
                                (
                                    [name] => Paul Boag
                                    [uri] => http://www.boagworld.com
                                )

                            [title] => Array
                                (
                                    [@cdata] => Work, Life And Side Projects
                                    [@attributes] => Array
                                        (
                                            [type] => html
                                        )

                                )

                            [link] => Array
                                (
                                    [0] => Array
                                        (
                                            [@value] => 
                                            [@attributes] => Array
                                                (
                                                    [rel] => alternate
                                                    [type] => text/html
                                                    [href] => http://www.smashingmagazine.com/2012/06/19/work-life-and-side-projects/
                                                )

                                        )

                                    [1] => Array
                                        (
                                            [@value] => 
                                            [@attributes] => Array
                                                (
                                                    [rel] => replies
                                                    [type] => text/html
                                                    [href] => http://www.smashingmagazine.com/2012/06/19/work-life-and-side-projects/#comments
                                                    [count] => 48
                                                )

                                        )

                                    [2] => Array
                                        (
                                            [@value] => 
                                            [@attributes] => Array
                                                (
                                                    [rel] => replies
                                                    [type] => application/atom+xml
                                                    [href] => http://www.smashingmagazine.com/2012/06/19/work-life-and-side-projects/feed/atom/
                                                    [count] => 48
                                                )

                                        )

                                )

                            [id] => http://mgmt.smashingmagazine.com/?p=133267
                            [updated] => 2012-06-20T13:37:10Z
                            [published] => 2012-06-19T12:34:59Z
                            [category] => Array
                                (
                                    [0] => Array
                                        (
                                            [@value] => 
                                            [@attributes] => Array
                                                (
                                                    [scheme] => http://www.smashingmagazine.com
                                                    [term] => Opinion column
                                                )

                                        )

                                    [1] => Array
                                        (
                                            [@value] => 
                                            [@attributes] => Array
                                                (
                                                    [scheme] => http://www.smashingmagazine.com
                                                    [term] => Business
                                                )

                                        )

                                    [2] => Array
                                        (
                                            [@value] => 
                                            [@attributes] => Array
                                                (
                                                    [scheme] => http://www.smashingmagazine.com
                                                    [term] => productivity
                                                )

                                        )

                                )

                            [summary] => Array
                                (
                                    [@cdata] => <table width="650"><tr><td width="650"><div style="width:650px;">
      <img src="http://statisches.auslieferung.commindo-media-ressourcen.de/advertisement.gif" alt="" border="0" /><br />
      <a href="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=target&#038;collection=smashing-rss&#038;position=1" target="_blank"><img src="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=image&#038;collection=smashing-rss&#038;position=1" border="0" alt="" /></a>&#160;<a href="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=target&#038;collection=smashing-rss&#038;position=2" target="_blank"><img src="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=image&#038;collection=smashing-rss&#038;position=2" border="0" alt="" /></a>&#160;<a href="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=target&#038;collection=smashing-rss&#038;position=3" target="_blank"><img src="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=image&#038;collection=smashing-rss&#038;position=3" border="0" alt="" /></a>
    </div></td></tr></table>
<p>There is no doubt about it, I am a hypocrite. Fortunately nobody has noticed… until now. Here&#8217;s the thing. On one hand I talk about the importance of having a good work/life balance, and yet on the other I prefer to hire people who do personal projects in their spare time.</p>

<p>Do you see the problem with this scenario? How can one person possibly juggle work, life and the odd side project? It would appear there just aren&#8217;t enough hours in the day. Being the arrogant and stubborn individual I am, when this hypocrisy was pointed out to me, my immediate reaction was to endeavour to justify my position. A less opinionated individual would probably have selected one or the other, but I propose these two supposedly contradictory viewpoints can sit harmoniously together.</p>

<p><a href="http://www.smashingmagazine.com/2012/06/19/work-life-and-side-projects/"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/05/5353194240_aa2e2c66eb1.jpg" /></a><br /><em>Can you have your cake and eat it, by working on side projects, holding down a job and still having a life beyond your computer?</em></p>

<p>To understand how this is possible we must first establish why a work/life balance is important and what role side projects play. Let&#8217;s begin by asking ourselves why it is important to have a life beyond our computers, even when we love what we do.</p>
                                    [@attributes] => Array
                                        (
                                            [type] => html
                                        )

                                )

                            [content] => Array
                                (
                                    [@cdata] => <table width="650">
<tr>
<td width="650">
<div style="width:650px;">
      <img src="http://statisches.auslieferung.commindo-media-ressourcen.de/advertisement.gif" alt="" border="0" /><br />
      <a href="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=target&#038;collection=smashing-rss&#038;position=1" target="_blank"><img src="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=image&#038;collection=smashing-rss&#038;position=1" border="0" alt="" /></a>&nbsp;<a href="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=target&#038;collection=smashing-rss&#038;position=2" target="_blank"><img src="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=image&#038;collection=smashing-rss&#038;position=2" border="0" alt="" /></a>&nbsp;<a href="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=target&#038;collection=smashing-rss&#038;position=3" target="_blank"><img src="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=image&#038;collection=smashing-rss&#038;position=3" border="0" alt="" /></a>
    </div>
</td>
</tr>
</table>
<p>There is no doubt about it, I am a hypocrite. Fortunately nobody has noticed… until now. Here&#8217;s the thing. On one hand I talk about the importance of having a good work/life balance, and yet on the other I prefer to hire people who do personal projects in their spare time.</p>
<p>Do you see the problem with this scenario? How can one person possibly juggle work, life and the odd side project? It would appear there just aren&#8217;t enough hours in the day. Being the arrogant and stubborn individual I am, when this hypocrisy was pointed out to me, my immediate reaction was to endeavour to justify my position. A less opinionated individual would probably have selected one or the other, but I propose these two supposedly contradictory viewpoints can sit harmoniously together.</p>
<p><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/05/5353194240_aa2e2c66eb1.jpg" alt="http://www.smashingmagazine.com/2012/06/19/work-life-and-side-projects/" /><br /><em>Can you have your cake and eat it, by working on side projects, holding down a job and still having a life beyond your computer? Image by <a href="http://www.flickr.com/photos/76491533@N00/5353194240/">GuySie</a>.</em></p>
<p>To understand how this is possible we must first establish why a work/life balance is important and what role side projects play. Let&#8217;s begin by asking ourselves why it is important to have a life beyond our computers, even when we love what we do.</p>
<h3>Why We Should Have A Life Beyond The Web</h3>
<p>Generally speaking Web designers love their job. In many cases our job is also our hobby. We love nothing more than experimenting with new technology and techniques. When we aren&#8217;t working on websites we are tinkering with gadgets and spending a much higher than average time online. <strong>Although in our job this single-mindedness is useful, it is ultimately damaging both for our personal wellbeing and career</strong>.</p>
<p>In the early days of my career, when I was young, I used to happily work long hours and regularly pull all-nighters. It was fun and I enjoyed my job. However, this set a habit in my working life that continued far longer than was healthy. Eventually I became stressed and fell ill. In the end things became so bad that I was completely unproductive.</p>
<p>This high-intensity working also sets a baseline for the whole industry, where it becomes the norm to work at this accelerated speed. No longer are we working long hours because we want to, but rather because there is an expectation we should. This kind of work/life balance can only end one way, in burnout. This damages us personally, our clients and the industry as a whole. It is in our own interest and those of our clients to look after our health.</p>
<p>This means we cannot spend our lives sitting in front of a screen. It simply isn&#8217;t healthy. Instead we need to participate in activities beyond our desks. Preferably activities that involve at least some exercise. A healthy diet wouldn&#8217;t hurt either. Getting away from the Web (and Web community) offers other benefits too. It is an opportunity for us to interact with non Web people. Whether you are helping a charity or joining a rock climbing club, the people you meet will provide a much more realistic view of how &#8216;normal&#8217; people lead their lives.</p>
<p>This will inform our work. I often think that, as Web designers, we live in a bubble in which everybody is on twitter all day, and understands that typing a URL into Google isn&#8217;t the best way to reach a website. Not that this is all we will learn from others. We can also learn from other people&#8217;s jobs. For example, there is a lot we can learn from architects, psychologists, marketeers and countless other professions. We can learn from their processes, techniques, expertise and outlook. All of this can be applied to our own role.</p>
<p>As somebody who attends a church (with a reasonable cross section of people) and used to run a youth group, I can testify that mixing with non Web people will transform your view of what we do. Furthermore, the activities you undertake will shape how you do work. Reading a non-Web book, visiting an art gallery, or even taking a walk in the countryside, can all inform and inspire your Web work. There is no doubt, that stepping away from the computer at the end of a working day will benefit you personally and professionally. Does this therefore mean you should shelve your side projects? Not at all, these are just as important.</p>
<h3>Why We Should All Have Side Projects</h3>
<p>I love to hire people who have side projects. Take for example <a href="http://twitter.com/bobscape">Rob Borley</a> who works at <a href="http://headscape.co.uk/">Headscape</a>. He runs a <a href="http://www.itakeout.co.uk/">takeaway ordering site</a>, has his <a href="http://www.dootrix.com/">own mobile app business</a> and has just launched an <a href="http://www.simpl.com/">iPad app</a>. These projects have been hugely beneficial to Headscape. Rob has become our mobile expert, has a good handle on what it takes to launch a successful Web app and puts his entrepreneurial enthusiasm into everything he does for us.</p>
<p><a href="http://www.itakeout.co.uk"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/05/Voila_Capture68.png" alt="Robs side projects such as iTakeout has broadened his experience and made him an indispensable employee." title="itakeout.co.uk" /></a><br /><em>Rob&#8217;s side projects such as <a href="http://www.itakeout.co.uk">iTakeout</a> has broadened his experience and made him an indispensable employee.</em></p>
<p>But side projects don&#8217;t just benefit your employer, they benefit your personal career. They provide you with a chance to experiment and learn new techniques that your day job may not allow. They also provide you with the opportunity to widen your skills into new areas and roles. Maybe in your day job you are a designer, but your side project might provide the perfect opportunity to learn some PHP. Finally, side projects allow you to work without constraints. This is something many of us crave and being able to set our own agenda is freeing. However, it is also a challenge. We have to learn how to deliver when there is nobody sitting over our shoulder pushing us to launch.</p>
<p><strong>All of this knowledge from personal projects has a transformative effect that will change your career.</strong> It will increase your chance of getting a job and show your employer how valuable you are. It may also convince your employer to create a job that better utilises your skills, as we did for Rob. Rob used to be a project manager, but when we saw his passion and knowledge for mobile we created a new role focusing on that. Of course, this leads us to the obvious question: how can we have time away from the computer if we should also be working on side projects?</p>
<h3>Is Hustling The Answer?</h3>
<p>If you listen to <a href="http://garyvaynerchuk.com/">Gary Vaynerchuk</a> or read <a href="http://calacanis.com/">Jason Calacanis</a>, you maybe forgiven for thinking the answer is to &#8216;hustle&#8217;; to work harder. They proclaim we should cut out TV, dump the xbox and focus single-mindedly on achieving our goals. There is certainly a grain of truth in this. We often fritter away huge amounts of time, largely unaware of where it is going. We need to be much more conscious about how we are spending our time and ensure we are making a choice about where it goes.</p>
<p>I don&#8217;t think working harder is the long term solution, however. We can work hard for short periods of time, but as we have already established this can&#8217;t continue indefinitely. We need downtime. We need time lounging in front of the TV or mindlessly shooting our friends in Halo. If we don&#8217;t have that we never allow our brain the chance to recuperate and we end up undermining our efficiency. I don&#8217;t believe the answer is &#8220;work hard, play hard&#8221;. I believe the answer is &#8220;work smarter&#8221;.</p>
<h3>We Can Do Everything If We Work Smarter</h3>
<p>Working smarter is about three things:</p>
<ul>
<li>Combining interests,</li>
<li>Creating structure,</li>
<li>Knowing yourself.</li>
</ul>
<p>Let&#8217;s look at each in turn.</p>
<h4>Combine Interests</h4>
<p>A good starting point when it comes to working smarter is to look for commonality between the three aspects of your life (work, life and side projects). You can often achieve a lot by coming up with things that have a positive impact in each of those areas. Take for example the choice of your personal project. If you look at most personal projects out there, they are aimed at a technical audience. We are encouraged to &#8220;build for people like us&#8221; which has led to an endless plethora of HTML frameworks and WordPress plugins.</p>
<p><a href="http://www.pixelzdesign.com/blog_view.php?id=55"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/05/jquery.png" alt="Maybe if we got out more there would be a wider range of personal projects and fewer of near identical jQuery plugins!" title="Post showing an endless list of jQuery plugins" /></a><br /><em>Maybe if we got out more there would be a wider range of personal projects and fewer of near identical <a href="http://www.pixelzdesign.com/blog_view.php?id=55">jQuery plugins</a>!</em></p>
<p>If however we have built up interests outside of the Web, suddenly it opens up a new world of possibilities for side projects.</p>
<p>I wanted to get to know more people at my church. There are so many I have never spoken to. I also wanted to keep my hand in with code (as I don&#8217;t get to code a lot anymore), so I decided to build a new church website in my spare time. This involved talking to lots of people from the church, and also gave me the chance to experiment with new ways of coding. What is more, some of the things I learned have been valuable at work too.</p>
<p>Look for ways of combining personal projects with outside activities. Alternatively, identify side projects that could make your working life easier. This kind of crossover lets you get more done. However, by itself that is not enough. We need some structure too.</p>
<h4>Create Structure</h4>
<p>If we want to get the balance right between personal projects, work and life we need some structure to work in.</p>
<p>For a start take control of your working hours. I know this isn&#8217;t easy if you have a slave driver of a boss, but most of us have at least some control over how long we work. You will be surprised, limiting your hours won&#8217;t damage your productivity as much as you think. You will probably get as much done in less time. Work tends to expand to take as much time as you are willing to give it. Next, stop fluttering from one thing to another. When you are &#8220;having a life&#8221; don&#8217;t check work email or answer calls. There is a growing expectation we should be available 24/7. Resist it.</p>
<p>One method to keep you focused is the <a href="http://www.pomodorotechnique.com/">Pomodoro technique</a>. This simple approach breaks your day into a series of 30 minute chunks. You work for 25 minutes on a single task free from interruption and then have a 5 minute break. Similar tasks are grouped together so that you spend 25 minutes answering email rather than allowing email to interupt other blocks of work. </p>
<p><a href="http://www.pomodorotechnique.com/"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/05/Voila_Capture70.png" alt="The Pomodoro technique is a simple way of staying focus on the task in hand" title="Pomodoro technique website" /></a><br /><em>The <a href="http://www.pomodorotechnique.com/">Pomodoro technique</a> is a simple way of staying focus on the task in hand.</em></p>
<p>Set specific time for working on personal projects and stick to them. Don&#8217;t allow that time to expand into your free time. Equally don&#8217;t allow work to distract you from your side project. Set boundaries. If you need to, set an alarm for each activity. Nothing will focus your mind on a personal project like having only 30 minutes until your alarm goes off. You will inevitably try and squeeze just one more thing in. These artificial deadlines can be very motivating.</p>
<p>Finally, make sure work, personal projects and recreation all have equal priority in your mind. One way to do this is to use a task manager like <a href="http://www.omnigroup.com/products/omnifocus/">Omnifocus</a>, <a href="http://culturedcode.com/things/">Things</a> or <a href="http://www.6wunderkinder.com/wunderlist/">Wunderlist</a> to keep all your tasks in one place. Often we have a task list for our work but not for other aspects of our life. This means that work is always prioritised over other activities. It is just as important to have a task to &#8220;finish that book&#8221; you are reading as &#8220;debug IE7&#8221;. Providing structure won&#8217;t just help with your side projects. It will also help with your sanity.</p>
<h4>Know Yourself</h4>
<p>Remember, the goal here is to have fun on side projects, broaden your horizon with outside activities and recharge with downtime. You therefore must be vigilant in keeping the balance and ensure that all these competing priorities don&#8217;t drain you.</p>
<p>Part of the problem is that we spend too much time on activities that we are just not suited to. Its important to recognize your weaknesses and avoid them. If you don&#8217;t, you waste time doing things you hate and doing them badly. For example, I just am no good at DIY. I used to waste hours trying to put up shelves and fix plumbing. Because I was trying to do something I was weak at, it would take forever and leave me too tired to do other things. </p>
<p>My solution to this problem was to delegate. I employed people to do my DIY. People that could do it much quicker and to a higher quality than me. How did I pay for this? I did what I was good at, building websites. I would work on the odd freelance site, which I could turn around quickly and enjoy doing. This applies to the side projects we take on too. Learning new skills is one thing, but if it stops being fun because you are just not suited to it, move on. Working on stuff you are not suited to will just leave you demoralized and tired.</p>
<p>Talking of being tired, I would recommend not working on personal projects immediately after getting home from work. Give yourself time to unwind and allow your brain to recover. Equally don&#8217;t work on side projects right up until you go to bed. This will play havoc with your sleep patterns and undermine your productivity.</p>
<p>Finally, remember that side projects are meant to be fun. Don&#8217;t undertake anything too large because not seeing regular results will undermine your enthusiasm. If you want to work on something large, I suggest working with others. There is certainly <a href="http://www.smashingmagazine.com/2011/11/30/the-smashing-guide-to-moving-the-web-forward-community/">no shortage of opportunities</a>. Alternatively try breaking up the project into smaller sub-projects each with a functioning deliverable.</p>
<h3>Am I Asking For The Impossible?</h3>
<p>So there you have it. My attempt to have my cake and eat it. I believe you can have side projects, a life beyond computers and get the day job done. It&#8217;s not always easy and if I had to pick I would choose having a life over side projects. However, I believe that personal projects can be fun, good for our careers and also facilitate a life beyond the Web.</p>
<p>So do you agree? Am I being unrealistic? What challenges do you find in striking the balance or what advice do you have for others? These are just my thoughts and I am sure you can add a lot to the discussion in the comments.</p>
<p><em>(jc)</em></p>
<hr />
<p><small>© Paul Boag for <a href="http://www.smashingmagazine.com">Smashing Magazine</a>, 2012.</small></p>
                                    [@attributes] => Array
                                        (
                                            [type] => html
                                            [base] => http://www.smashingmagazine.com/2012/06/19/work-life-and-side-projects/
                                        )

                                )

                            [thr:total] => 48
                        )

                    [3] => Array
                        (
                            [author] => Array
                                (
                                    [name] => Aral Balkan
                                    [uri] => http://www.aralbalkan.com
                                )

                            [title] => Array
                                (
                                    [@cdata] => Mobile Considerations in User Experience Design: “Web or Native?”
                                    [@attributes] => Array
                                        (
                                            [type] => html
                                        )

                                )

                            [link] => Array
                                (
                                    [0] => Array
                                        (
                                            [@value] => 
                                            [@attributes] => Array
                                                (
                                                    [rel] => alternate
                                                    [type] => text/html
                                                    [href] => http://www.smashingmagazine.com/2012/06/18/mobile-considerations-in-user-experience-design-web-or-native/
                                                )

                                        )

                                    [1] => Array
                                        (
                                            [@value] => 
                                            [@attributes] => Array
                                                (
                                                    [rel] => replies
                                                    [type] => text/html
                                                    [href] => http://www.smashingmagazine.com/2012/06/18/mobile-considerations-in-user-experience-design-web-or-native/#comments
                                                    [count] => 0
                                                )

                                        )

                                    [2] => Array
                                        (
                                            [@value] => 
                                            [@attributes] => Array
                                                (
                                                    [rel] => replies
                                                    [type] => application/atom+xml
                                                    [href] => http://www.smashingmagazine.com/2012/06/18/mobile-considerations-in-user-experience-design-web-or-native/feed/atom/
                                                    [count] => 0
                                                )

                                        )

                                )

                            [id] => http://mgmt.smashingmagazine.com/?p=134908
                            [updated] => 2012-06-19T07:43:09Z
                            [published] => 2012-06-18T14:32:32Z
                            [category] => Array
                                (
                                    [@value] => 
                                    [@attributes] => Array
                                        (
                                            [scheme] => http://www.smashingmagazine.com
                                            [term] => Mobile
                                        )

                                )

                            [summary] => Array
                                (
                                    [@cdata] => <table width="650"><tr><td width="650"><div style="width:650px;">
      <img src="http://statisches.auslieferung.commindo-media-ressourcen.de/advertisement.gif" alt="" border="0" /><br />
      <a href="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=target&#038;collection=smashing-rss&#038;position=1" target="_blank"><img src="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=image&#038;collection=smashing-rss&#038;position=1" border="0" alt="" /></a>&#160;<a href="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=target&#038;collection=smashing-rss&#038;position=2" target="_blank"><img src="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=image&#038;collection=smashing-rss&#038;position=2" border="0" alt="" /></a>&#160;<a href="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=target&#038;collection=smashing-rss&#038;position=3" target="_blank"><img src="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=image&#038;collection=smashing-rss&#038;position=3" border="0" alt="" /></a>
    </div></td></tr></table>
<p><a href="http://mobile.smashingmagazine.com/2012/06/18/mobile-considerations-in-user-experience-design-web-or-native/"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/06/redesign-the-web-175px.jpg" style="width: 175px !important; border-radius: 5px !important; padding: 0; margin: 0 0 1em 1em; float: right;"></a><em>Our brand new <a href="http://www.smashingbook.com/">Smashing Books #3 and #3⅓</a> have been released last month and we're sincerely grateful for the tremendous feedback, reviews and photos submitted by our truly smashing readers across the world. We appreciate your time and your interest, and thank you for your support and love.</em>
<p>Today we are happy to present a yet another sample chapter from the book. In his chapter, Aral Balkan explores what "native" actually means, what options designers and developers have and gives practical advice on what you need to know when deciding on tools for your next mobile-optimized project. The sample is also available for free download in PDF, EPUB and Kindle or .ZIP with all files.</p>
                                    [@attributes] => Array
                                        (
                                            [type] => html
                                        )

                                )

                            [content] => Array
                                (
                                    [@cdata] => <table width="650">
<tr>
<td width="650">
<div style="width:650px;">
      <img src="http://statisches.auslieferung.commindo-media-ressourcen.de/advertisement.gif" alt="" border="0" /><br />
      <a href="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=target&#038;collection=smashing-rss&#038;position=1" target="_blank"><img src="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=image&#038;collection=smashing-rss&#038;position=1" border="0" alt="" /></a>&nbsp;<a href="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=target&#038;collection=smashing-rss&#038;position=2" target="_blank"><img src="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=image&#038;collection=smashing-rss&#038;position=2" border="0" alt="" /></a>&nbsp;<a href="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=target&#038;collection=smashing-rss&#038;position=3" target="_blank"><img src="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=image&#038;collection=smashing-rss&#038;position=3" border="0" alt="" /></a>
    </div>
</td>
</tr>
</table>
<p><a href="http://www.smashingbook.com/"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/06/redesign-the-web-175px.jpg" style="width: 175px !important; border-radius: 5px !important; padding: 0; margin: 0 0 1em 1em; float: right;"></a><em>Our brand new <a href="http://www.smashingbook.com/">Smashing Books #3 and #3⅓</a> have been released last month and we&#8217;re sincerely grateful for the tremendous feedback, reviews and photos submitted by our truly smashing readers across the world. We appreciate your time and your interest, and thank you for your support and love.</em></p>
<p>Today we are happy to present a yet another sample chapter from the book. In his chapter, Aral Balkan explores what &#8220;native&#8221; actually means, what options designers and developers have and gives practical advice on what you need to know when deciding on tools for your next mobile-optimized project. The sample is also available for free download in <a href="http://provide.smashingmagazine.com/smashing-book-3-samples/smbook3-sample-chapter9.pdf">PDF</a>, <a href="http://provide.smashingmagazine.com/smashing-book-3-samples/smbook3-sample-chapter9.epub">EPUB</a> and <a href="http://provide.smashingmagazine.com/smashing-book-3-samples/smbook3-sample-chapter9.mobi">MobiPocket</a> or <a href="http://provide.smashingmagazine.com/smashing-book-3-samples/smbook3-sample-chapter9.zip">.ZIP with all files</a>.</p>
<p>&mdash; The Smashing Editorial Team</em></p>
<!-- deleted style tag -->
<p><a href="http://www.smashingbook.com" title="Get your Smashing Book #3"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/06/chatper-letter.jpg" alt="Smashing Book #3: the cover of Aral Balkan's chapter" title="Smashing Book #3: the cover of Aral Balkan's chapter" width="429" height="653" class="alignnone size-full wp-image-135436" /></a><br /><em>Written by Aral Balkan, reviewed by Josh Clark and Anders M. Andersen. This cover image in the <a href="http://www.smashingmagazine.com/2012/05/08/the-smashing-book-3-redesign-the-web-is-out/">Smashing Book #3</a> was designed by Kate McLelland.</em></p>
<p>As you probably know, user experience design is the discipline concerned with all aspects of the design of interactive products. Although it incorporates important elements of graphic design and motion design, it is primarily concerned with the design of interaction. Its closest cousin in the design realm is product design. As user experience designers, we design virtual products. Furthermore, since hardware design and software design are so intrinsically linked and inseparable, the line that separates product design from interaction design &mdash; if it exists at all &mdash; is a faint one.</p>
<h4>A Web Designer Is a User Experience Designer</h4>
<p>Essentially, a Web designer is a user experience designer with specialized knowledge of the medium of the World Wide Web. The materials of a Web designer are the core (HTML, CSS, JavaScript) and auxiliary (LESS, Stylus, etc.; HAML, Jade, etc.; jQuery, MooTools, etc.) frameworks of the Web and the components within those frameworks. These frameworks and the components within them are made of code. It is this code that determines the design limits and behavior of these materials.</p>
<p>Designing an application is as much about drawing a pretty picture of an application as designing a car is about drawing a pretty picture of a car. Just as an automotive designer must have intimate knowledge of the various materials that go into making a car, so too must a Web designer understand the materials that go into a website or application.</p>
<p>As interaction designers, we are interested not simply in the aesthetics of an interactive object but in how it behaves. This is especially important when you are designing applications (which are behavior-based objects) as opposed to designing documents (which are content-based objects).</p>
<h4>Designing Documents vs. Designing Applications</h4>
<p>Even designing interactive documents well &mdash; especially in a responsive manner for the Web &mdash; requires specialized knowledge. At a bare minimum, it involves an understanding of responsive design principles and progressive enhancement. Drawing pretty pictures, on the other hand, is art, not design.</p>
<p>Interactive products or applications, however, are a completely different ball game. Designing for an interactive medium requires skills in graphic design, motion design and, most importantly, interaction design. The most important aspect of an interactive product is its interactions. These interactions are constructed in code.</p>
<p>Unfortunately, due to increased specialization on teams, the role of Web designer and Web developer has been artificially separated. While such a separation may be necessary when working on a team, these labels should define the current tasks of the team members, not sandbox their knowledge. You might focus on certain areas more &mdash; especially in particular projects &mdash; but you must understand that the primary reason we build products is to satisfy user needs and that every role on a development team has an effect on the user experience. This is why working in small interdisciplinary teams is imperative, where every member is responsible for always thinking of the user first.</p>
<h4>Designing for the User First</h4>
<p>When building a product, design leads development and development informs design. This is a cyclical, iterative process in which the goal is to continually improve the product to better meet the needs of users.<sup><a id="ftn1" href="#fn1">[1]</a></sup></p>
<p>Every decision you make for your product should stem from the user. You must think of the user’s needs first, before considering your own needs. In other words, practice what we call “outside-in design.” Think about the user’s needs and their context, design what the user will see and interact with, and then go about deciding how to solve all the problems that creates for you.</p>
<blockquote>
<h5>Outside In Is Good, Inside Out Is Bad.</h5>
<p>Is your first question in a new project which server-side technology you will use or what your database schema will look like? Stop! This is a wrong approach. You’re trying to solve your own problems, not the user’s. That’s inside-out design, and that’s a Very Bad Thing.<sup>™</sup></p>
</blockquote>
<h4>Purpose of This Chapter</h4>
<p>Two of the core decisions you will need to make during the design process is whether to make the product cross-platform and whether it should be native.</p>
<p>The purpose of this chapter is to empower you, as a user experience designer, to understand your medium so that you can answer these questions informedly, starting by looking at what exactly we mean by an application being “native.”</p>
<p><a href="http://smashed.by/davidjones"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/06/figure_9-1_2.jpg" alt="Yes, a huge number of devices are out there. No, your application does not have to support all of them. Focusing on the user means identifying your target audience and optimizing your applications for the platforms and devices they use. Supporting a large number of platforms via progressive enhancement is easier if you are primarily building content-based websites as opposed to behavior-based applications. (Image: David Jones, smashed.by/davidjones)" title="Yes, a huge number of devices are out there. No, your application does not have to support all of them. Focusing on the user means identifying your target audience and optimizing your applications for the platforms and devices they use. Supporting a large number of platforms via progressive enhancement is easier if you are primarily building content-based websites as opposed to behavior-based applications. (Image: David Jones, smashed.by/davidjones) width="500" height="375" class="alignnone size-full wp-image-135415" /></a><br /><em>Figure 9.1. Yes, a huge number of devices are out there. No, your application does not have to support all of them. Focusing on the user means identifying your target audience and optimizing your applications for the platforms and devices they use. Supporting a large number of platforms via progressive enhancement is easier if you are primarily building content-based websites as opposed to behavior-based applications. (Image: David Jones, <a href="http://smashed.by/davidjones">smashed.by/davidjones</a>)</em></p>
<h3>What is “Native”?</h3>
<p>Have you noticed how people throw around the term “native” willy-nilly without grasping what it really means? Let’s change that, starting with what native is <em>not</em>.</p>
<h4>Native Is (and Is Not) Ones and Zeros</h4>
<p>If we are going to be pedantic, “native” &mdash; insofar as digital devices are concerned &mdash; refers to the absence or presence of electric current in the transistors that power our computing devices. We usually visualize this as the basic cliché of digital computing: binary code, a series of ones and zeros. We call these binary instructions machine language.</p>
<p>While it is true that computers were once programmed in binary using switches, we no longer write applications at a level that is so close to the metal. However, every other computer programming language we have devised &mdash; assembly language, C, Python, Java-Script, etc. &mdash; is eventually translated into the ones and zeros of machine language. These are further translated into the presence or absence of electric current in transistors.</p>
<p>Each of these technologies is built upon layers of abstraction. Python is written in C, for example. The purpose of each level of abstraction &mdash; each higher layer in the layer cake of technologies that comprise the modern computing ecosystem &mdash; is to make it easier for developers to author applications.</p>
<p>So, although technically correct, using “native” to mean programming in binary is a rather meaningless definition in today’s world.</p>
<p>So, now that we know what native is not, let’s figure out what it is.
<p><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/06/figure_9-2_2.jpg" alt="Web technologies can be the native technologies for certain operating systems. Here we have a Samsung laptop running Chrome OS, on which HTML, CSS and JavaScript — and Web applications — are first-class citizens. (Image: Google’s promotional image.)" title="Web technologies can be the native technologies for certain operating systems. Here we have a Samsung laptop running Chrome OS, on which HTML, CSS and JavaScript — and Web applications — are first-class citizens. (Image: Google’s promotional image.)" width="500" height="294" class="alignnone size-full wp-image-135416" /><br /><em>Figure 9.2. Web technologies can be the native technologies for certain operating systems. Here we have a Samsung laptop running Chrome OS, on which HTML, CSS and JavaScript &mdash; and Web applications &mdash; are first-class citizens. (Image: Google’s promotional image.)</em></p>
<h3>Native as Culture</h3>
<p>“Native” refers to the technologies &mdash; i.e. languages and frameworks &mdash; that form the culture, language, conventions and norms of a platform. It is the base level of abstraction that comprises the core symbols, gestures and interactions that users employ to communicate with applications on a given platform. These elements are of utmost importance because they constitute the culture and norms of a platform.<sup><a id="ftn2" href="#fn1">[2]</a></sup> They are the language—both visual and behavioral—that users learn to communicate in when using a platform. Conversely, they are also the words, phrases and concepts that applications on a given platform use to communicate with users. The more usable and consistent these are on a given platform, the more advantages there are to creating native applications for that platform.</p>
<p>At one end of the spectrum we have Apple’s iOS, with its detailed <a href="http://smashed.by/apple">“Human Interface Guidelines”</a> and its elegant and consistent Cocoa Touch framework. A native productivity app on that platform that conforms to the guidelines will inherit much of the usability inherent in the core frameworks and will seem instantly familiar to users who are already familiar with other applications on the platform.</p>
<p><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/06/figure_9-3_2.jpg" alt="Apple’s “Human Interface Guidelines” provide clear instructions on how native apps on the iOS platform should look and behave. They help define the culture of the platform." title="Apple’s “Human Interface Guidelines” provide clear instructions on how native apps on the iOS platform should look and behave. They help define the culture of the platform." width="500" height="376" class="alignnone size-full wp-image-135417" /><br /><em>Figure 9.3. Apple’s “Human Interface Guidelines” provide clear instructions on how native apps on the iOS platform should look and behave. They help define the culture of the platform.</em></p>
<p>At the other end of the scale, we have native platforms like Android that are heavily customized by manufacturers, carriers and users to the point that there is little, if any, consistency between different Android phones and applications. Designers of native applications on such platforms might have a harder time providing a consistent user experience.</p>
<p><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/06/figure_9-4_2.jpg" alt="The Swype keyboard is actually quite amazing. Simply slide your finger from letter to letter, and it automatically guesses the word you’re thinking of. Unfortunately, it is not on every Android device, just some. Others come with keyboards that are more similar to the one on iPhone, and users can buy and use a multitude of other third-party keyboards. While this array of choice might seem good initially, it means that there is no single unified Android user experience. There are, in effect, as many Android user experiences as there are different versions of Android as customized by manufacturers, carriers and users themselves. This makes it very difficult to use a common design language when building apps." title="The Swype keyboard is actually quite amazing. Simply slide your finger from letter to letter, and it automatically guesses the word you’re thinking of. Unfortunately, it is not on every Android device, just some. Others come with keyboards that are more similar to the one on iPhone, and users can buy and use a multitude of other third-party keyboards. While this array of choice might seem good initially, it means that there is no single unified Android user experience. There are, in effect, as many Android user experiences as there are different versions of Android as customized by manufacturers, carriers and users themselves. This makes it very difficult to use a common design language when building apps." width="500" height="153" class="alignnone size-full wp-image-135418" /><br /><em>Figure 9.4. The Swype keyboard is actually quite amazing. Simply slide your finger from letter to letter, and it automatically guesses the word you’re thinking of. Unfortunately, it is not on every Android device, just some. Others come with keyboards that are more similar to the one on iPhone, and users can buy and use a multitude of other third-party keyboards. While this array of choice might seem good initially, it means that there is no single unified Android user experience. There are, in effect, as many Android user experiences as there are different versions of Android as customized by manufacturers, carriers and users themselves. This makes it very difficult to use a common design language when building apps.</em></p>
<p>For example, my iPhone app, <a href="http://smashed.by/fapp">Feathers</a>, has a custom keyboard that I made for users to enter extended Unicode symbols. On iPhone, it works exactly like the built-in iPhone software keyboard. Achieving this took some effort, but it was not impossible. If I were to port the application to Android, I would have to know which of the many software keyboards the user has installed and then customize its behavior to match. Needless to say, this would involve a lot more effort and might not even be feasible. The <a href="http://swype.com">Swype keyboard</a> that comes on some Android phones, for example, is patented. So, on an Android device with a Swype keyboard, I cannot make my keyboard behave exactly the same way as the system keyboard.</p>
<p><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/06/figure_9-5_2.jpg" alt="Porting Feathers to Android would require making different versions of the custom keyboard to support many different keyboard types." title="Porting Feathers to Android would require making different versions of the custom keyboard to support many different keyboard types."" width="500" height="638" class="alignnone size-full wp-image-135419" /><br /><em>Figure 9.5. Porting Feathers to Android would require making different versions of the custom keyboard to support many different keyboard types.</em></p>
<p>The compromise would be to make a single custom keyboard and use that regardless of the user’s system keyboard. Of course, it would neither look nor feel like the main keyboard and thus wouldn’t provide the same seamless experience of Feathers on iOS. Instead, users of the app would have to learn to use two different types of keyboards in the app and have to exert cognitive effort when switching from one to the other.</p>
<p>Similarly, on native platforms that do not have a strong, consistent visual language and culture—such as Android—or on native platforms that are notorious for being confusing to use—such as Windows—non-native applications will have less of a handicap. They might even provide better usability and user experiences in some situations.</p>
<p>A great example of a non-native application providing a better user experience on certain native platforms is Gmail. Using a desktop mail client on an operating system (OS) such as Windows could require you to find and install the application itself, keep it updated, keep your mail synced between your various devices, and make sure messages are checked for viruses and other malware. Compare that to the simplicity of Gmail, in which you enter a URL in the Web browser of any device and &mdash; boom! &mdash; you have your mail. End of story. Beautiful.</p>
<p><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/06/figure_9-6_2.jpg" alt="The Gmail Web app provides a consistent experience across platforms. Users don’t have to install anything or worry about syncing their email to multiple devices." title="The Gmail Web app provides a consistent experience across platforms. Users don’t have to install anything or worry about syncing their email to multiple devices." width="502" height="200" class="alignnone size-full wp-image-135420" /><br /><em>Figure 9.6. The Gmail Web app provides a consistent experience across platforms. Users don’t have to install anything or worry about syncing their email to multiple devices.</em></p>
<p>Gmail is also a great example of how creating good cross-platform user experiences can require a lot of platform-specific optimizations. Although the Gmail app runs across desktop and mobile platforms, there are actually several highly optimized versions of the app.</p>
<p>The Web as a platform itself, however, has few user experience consistencies of its own. Although Web applications share common features, there is no “Human Interface Guidelines” document for the Web (maybe there should be).<sup><a id="ftn6" href="#fn6">[6]</a></sup> Instead, we focus on documenting good coding and design practices, such as progressive enhancement. Different browsers (that is, native applications that run Web apps) implement the bahavior of core form controls differently. And that’s why a Web application could behave differently in different browsers even if it has the same markup, components and code.</p>
<p><a href="http://smashed.by/voegtli"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/06/figure_9-7_2.jpg" alt="A browser is an application that runs in the context of the OS. In other words, a browser is a native application. A Web app, on the other hand, is an application that runs in the context of the browser. It is not a native application since it has one degree of separation (the browser) between it and the OS. Similarly, a Flash app runs in the context of a Web app. It is not a native Web application since it has one degree of separation (the Web app) between it and the browser. Flash apps, therefore, are not native to the browser, just as Web apps are not native to the OS. (Image: Rosmarie Voegtli, smashed.by/voegtli)" title="A browser is an application that runs in the context of the OS. In other words, a browser is a native application. A Web app, on the other hand, is an application that runs in the context of the browser. It is not a native application since it has one degree of separation (the browser) between it and the OS. Similarly, a Flash app runs in the context of a Web app. It is not a native Web application since it has one degree of separation (the Web app) between it and the browser. Flash apps, therefore, are not native to the browser, just as Web apps are not native to the OS. (Image: Rosmarie Voegtli, smashed.by/voegtli)" width="500" height="387" class="alignnone size-full wp-image-135421" /></a><br /><em>Figure 9.7. A browser is an application that runs in the context of the OS. In other words, a browser is a native application. A Web app, on the other hand, is an application that runs in the context of the browser. It is not a native application since it has one degree of separation (the browser) between it and the OS. Similarly, a Flash app runs in the context of a Web app. It is not a native Web application since it has one degree of separation (the Web app) between it and the browser. Flash apps, therefore, are not native to the browser, just as Web apps are not native to the OS. (Image: Rosmarie Voegtli, <a href="http://smashed.by/voegtli">smashed.by/voegtli</a>)</em></p>
<h3>Hybrid Applications</h3>
<p>So, we’ve got native applications, which refer to the culture of the platform that they run on, and we’ve got Web applications, which run in a browser on the Web. But we’ve missed a third category that many modern applications fall into: hybrid apps.</p>
<p>We need to understand the strengths of various technologies and use them where appropriate. Declarative Web authoring technologies (primarily HTML and CSS) are great for creating complex documents and styling them beautifully. Thus, many designers of native applications use HTML and CSS when they need to display rich content. These types of applications are called <em>hybrid applications</em> because they employ a mix of native and Web technologies.</p>
<p><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/06/figure_9-8_2.jpg" alt="The Facebook app on iPhone is a hybrid app" title="The Facebook app on iPhone is a hybrid app" width="500" height="596" class="alignnone size-full wp-image-135422" /><br /><em>Figure 9.8. The Facebook app on iPhone is a hybrid app.</em></p>
<p>The Facebook app on iPhone is one example of a hybrid app, in which certain sections (such as the news feed) are rendered using Web technologies.</p>
<p>Similarly, as we saw before, Web applications can also be hybrid. A website authored in HTML, CSS and JavaScript and that uses Flash to display rich interactive content is an example of a hybrid Web application.</p>
<p>Many applications today are hybrids, and if you are accomplished in HTML, CSS and JavaScript, it is safe to say you will never go hungry regardless of which platform or platforms end up becoming the most popular in the decades ahead.</p>
<h3>Overcoming Ideological Bias</h3>
<p>All too often, technology and design decisions are made based not on a desire to choose the best materials and tools for the job but on ideology. The Web standards advocate who blindly recommends the Web platform and Web authoring technologies for any project, regardless of the users’ needs is, unfortunately, all too common. Developers who blindly recommend Flash and native iPhone or iPad apps for any project are all too common, too. The old adage <em>“When all you have is a hammer, everything looks like a nail”</em> comes to mind. So, it is important to recognize such biases and to base your decisions on the needs of your users, not on ideology. It is also important to be able to recognize ideological views so that you can steer the discussion back into the realm of design.</p>
<p>Some advocates of Web standards hold a core assumption that the Web platform and Web authoring technologies are, by nature, a force for good. One wouldn’t dispute that the Internet and, by extension, the Web have had as radical a democratizing effect on the world as the Gutenberg Press (if not more so). However, the Web platform and authoring technologies are inherently neither good nor bad, and they could easily be used for either end.</p>
<p>In the case of the Web platform, the common assumption is that it is inherently good because any document or application placed on it is universally accessible. While this may be true for open collections of documents &mdash; as was the norm for content in the early days of the Web &mdash; it is generally not true for what we would consider a modern Web application today. Take Facebook. Facebook is a Web application. It is not open. It is free, but what this means is that you, the user, are not Facebook’s customer. You are Facebook’s product.<sup><a id="ftn7" href="#fn7">[7]</a></sup></p>
<p>Your personal information and behavioral traits are what Facebook sells to its real customers, advertisers. Is this in any way inherently better or more open than having to buy a commercial application from Apple’s App Store?</p>
<p>Not really.</p>
<p>In fact, you could easily argue that buying a license for a commercial iPhone app is a more honest and up-front transaction. You pay for it and thereby own a license to use it. You become the customer of the company or individual who made the application. There is transparency in how the company makes its money. In many ways, this is a much more traditional commercial relationship.</p>
<p>Of course, even commercial apps can use your data in devious ways, so being vigilant about your personal information these days is important. But the point is that simply being a Web application does not somehow magically make it a force for good in the world.</p>
<h3>Are Native Applications and Platforms Endangered Species?</h3>
<p>As Jeremy Keith famously put it at the Update Conference, “Writing a native app is like coding for LaserDisc.” The implication here is that native platforms, like CD-ROMs and LaserDiscs, will be obsolete soon since the Web is “catching up.”</p>
<p>I sure hope that is not the case, because the Web itself is a native platform and is becoming even more so (in the traditional sense) with the rise of OS’s such as WebOS and Chromium, which are based on native Web authoring technologies. We have to understand that what the Web is supposedly catching up to is a moving target. New features, user experience enhancements and more are being added to native platforms all the time. It’s not like Apple will decide on 1 September 2012 that iOS is “done” and stop creating new versions of the OS or new models of iPhone and iPad, at which point the Web can take a few years to finish catching up.</p>
<p>We know that “native” refers to the core culture and language of a platform, so predicting the demise of “native” is analogous to saying that different devices will not have distinct cultures in the future.</p>
<p>The assumption inherent in this view is that a monoculture will arise in the future in which every application on every device will speak via the components of the Web and be authored using native Web authoring technologies, and moreover that these applications will all be served from the Web platform. If anything, this is a gray and chilling vision of the future, in which people will have even less control of their own data and in which their devices will simply become dumb terminals that hook up to great silos in the sky (“the cloud”) that are controlled by large corporations.</p>
<p>Instead of owning a license to a word-processing application, for example, you would write everything in Google Docs. Google, for its part, will be analyzing every word and sentence, trying to understand more about who you are and what makes you tick so that it can use that information to better manipulate your commercial behavior.</p>
<p>This is not to say that Web applications are necessarily evil, but they are definitely not inherently good.</p>
<h3>Blurring of the Lines</h3>
<p>We keep hearing that “the Web is catching up to native.” What people mean when they say this is that Web authoring technologies are getting better access to device features such as touch, hardware-accelerated graphics, GPS, accelerometer support and cameras. What is rarely mentioned, however, is how native applications are catching up to Web applications. In some respects, the strides that native applications are making are far more important because they threaten the core user experience advantages that Web applications have historically enjoyed over native applications.</p>
<p>The three main areas in which native applications are catching up to Web applications are ease of deployment and access, automatic updates and seamless access to data.</p>
<h4>Ease of Deployment and Access</h4>
<p>One of the core user experience advantages that Web applications have historically had over native applications is the ease with which they can be deployed and accessed. Click the “Upload” button in your FTP application of choice<sup><a id="ftn8" href="#fn8">[8]</a></sup> and your app becomes accessible to anyone who has the URL anywhere in the world.<sup><a id="ftn9" href="#fn9">[9]</a></sup> Simples.</p>
<p>No need to download a Zip file, then search for an application to unzip it with, then look for where you downloaded it to, then unzip it, then install it, then run it, only to find out that it doesn’t support your graphics card. Eek! Is it any surprise that Web applications like Gmail and Google Docs have enjoyed such phenomenal success, especially on native platforms with poor usability?</p>
<p><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/06/figure_9-9_2.jpg" alt="The line between the user flows of Web applications and native OS applications is blurring. In fact, in OS’s based on Web technologies, Web applications are native OS applications." title="The line between the user flows of Web applications and native OS applications is blurring. In fact, in OS’s based on Web technologies, Web applications are native OS applications." width="500" height="370" class="alignnone size-full wp-image-135423" /><br /><em>Figure 9.9. The line between the user flows of Web applications and native OS applications is blurring. In fact, in OS’s based on Web technologies, Web applications are native OS applications.</em></p>
<p>However, native apps are catching up to the ease of deployment and access offered by Web applications thanks to the development of app stores. With an app store like Apple’s, the process of finding an application is as easy as hitting a URL in a browser. In fact, you can hit a URL to reach an app in the App Store and, from there, simply click a button to download and install it.</p>
<h4>Automatic Updates</h4>
<p>Web applications, by nature, have always provided automatic updates. In fact, we don’t even think about the “version” of a Web application because the Web is inherently version free.</p>
<p>You’re always using the latest version of Gmail, and you don’t care what version it is. </p>
<p>It’s not Gmail 7; it’s just Gmail.<sup><a id="ftn10" href="#fn10">[10]</a></sup></p>
<p>Native applications, by contrast, have usually had clunky update mechanisms that interrupt the user’s flow. That, too, is changing with more and more native applications implementing seamless updates. When, for example, was the last time you noticed Google Chrome updating? Never. It does it silently.</p>
<h4>Seamless Access to Data</h4>
<p>The other huge advantage that users of Web applications have traditionally enjoyed is the ability to access their data from any device. You never have to worry about syncing email from your desktop to your mobile phone when using Gmail. It’s always there. Compare this to the nightmare that has traditionally plagued syncing on native platforms.</p>
<p>Native apps, however, are again catching up. With Apple’s iCloud, for instance, manual synchronization is becoming a thing of the past. Your data is simply, transparently and automatically available on your Apple devices and is kept constantly in sync without your having to worry about it. Although iCloud is primarily an Apple-centric continuous client solution, other cross-platform technologies, such as Dropbox, bring similar advantages to other platforms.</p>
<h3>Just Another Client</h3>
<p>Did you read the previous section thoroughly? Good. Then you may have noticed the common thread in all three areas where native applications are catching up to Web applications. They are all areas where the advantage in user experience is due to a characteristic of the Internet and not the Web. The Web is just a stack of technologies &mdash; namely, HTTP and URLs &mdash; on top of the Internet stack. So, native applications are catching up to the Web by taking advantage of the very same characteristics of the Internet that the Web does.</p>
<p>Furthermore, we are seeing the rise of a new type of user experience pattern, called the <em>continuous client</em>. A continuous client experience &mdash; as originally proposed by Joshua Topolsky<sup><a id="ftn11" href="#fn11">[11]</a></sup> &mdash; lets a user seamlessly continue an experience across devices and contexts.</p>
<p>For example, if you are reading your Twitter stream on your computer and then grab your phone, you should be able to continue reading the stream from the same place. And when you get home, you should be able to continue from the same place again on your TV.</p>
<p>A good example of a continuous client in the wild is the Trillian instant-messaging application. It can store chats in the cloud, share chats between all of your devices in real time, keep track of and synchronize your read and unread messages, and even make use of  “presence technology” to know on which device you’re currently active so that it can send current notifications only to that device.</p>
<p><a href="http://smashed.by/multi"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/06/figure_9-10_2.jpg" alt="Kelly Sommers has a nice sample app that showcases a continuous client experience: smashed.by/multi. Users can start watching a video on their Windows Phone 7, continue in a Web client, and then on their iPhones." title="Kelly Sommers has a nice sample app that showcases a continuous client experience: smashed.by/multi. Users can start watching a video on their Windows Phone 7, continue in a Web client, and then on their iPhones." width="500" height="335" class="alignnone size-full wp-image-135424" /></a><br /><em>Figure 9.10. Kelly Sommers has a nice sample app that showcases a continuous client experience: <a href="http://smashed.by/multi">smashed.by/multi</a>. Users can start watching a video on their Windows Phone 7, continue in a Web client, and then on their iPhones.</em></p>
<p>If you think about it, in the age of continuous client experiences, the Web becomes JAC (just another client). It may be the best client to use in certain contexts, but users have the choice of switching to native clients without worrying about synchronizing data. Soon, continuous clie                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  nts will be a core expectation instead of a novelty, especially as high-level technologies, e.g. iCloud, make it easier for developers to implement them.</p>
<p><a href="http://smashed.by/trillian"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/06/figure_9-11_2.jpg" alt="The instant messaging app Trillian is a good example of a continuous client. (Image: Trillian Blog, smashed.by/trillian.)" title="The instant messaging app Trillian is a good example of a continuous client. (Image: Trillian Blog, smashed.by/trillian.)" width="500" height="216" class="alignnone size-full wp-image-135425" /></a><br /><em>Figure 9.11. The instant messaging app Trillian is a good example of a continuous client. (Image: Trillian Blog, <a href="http://smashed.by/trillian">smashed.by/trillian</a>.)</em></p>
<h3>The Future is Native</h3>
<p>The Web today is just another native platform and one that, going forward, has to compete on its own unique merits and not on the advantages bestowed upon it by the Internet, because other native platforms are also implementing those same advantages.</p>
<p>The tricky question to answer when deciding whether to use the Web platform or other platforms for your next application is whether the advantage lies in exposing the user interface of your application as a native app or in exposing it via a URL and serving it via HTTP.</p>
<p>As Web applications catch up to native platforms with features like Local Storage and the ability to run while the device is offline, the line between Web and native applications blurs even further. This is taken to its logical extreme in OS’s like Palm’s WebOS and Google Chrome, where the native technologies are Web technologies.</p>
<p>We need to understand that a Web application running on such an OS is a native application. At that point, our decision is between different native OS’s and native frameworks. That choice will be greatly influenced by which native OS’s offer a superior user experience. Subsequently, our technology choices will be between different native authoring technologies &mdash; HTML, CSS and JavaScript for native Web applications, Objective-C and Cocoa Touch for native iOS apps, Java and Android SDK for Android apps, C# and .NET for Windows Phone apps, and so on and so forth.</p>
<p>Regardless of which platforms and technologies win out in the end, the future is clearly native and the Web is JAC. Now, the billion-dollar question is not “Do we go Web or native?” but rather “Which platform or platforms and which client technology or technologies should our new product support?”</p>
<p>To answer this, we need to understand the nature of our product and, specifically, where it falls on the documents-to-applications continuum.</p>
<h3>The Documents-to-Applications Continuum</h3>
<p>On the Web, one way to classify products is according to whether they are content-centric or behavior-centric. We call a content-centric collection of documents a website. A behavior-centric product is called an <em>application</em> (or “app”). Instead of falling entirely in one camp or the other, your product will probably lie somewhere between the two extremes on the documents-to-applications continuum.</p>
<p><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/06/figure_9-12_2.jpg" alt="The documents-to-applications continuum." title="The documents-to-applications continuum." width="500" height="212" class="alignnone size-full wp-image-135426" /><br /><em>Figure 9.12. The documents-to-applications continuum.</em></p>
<p>When a product falls closer to the documents side of the continuum, we can use progressive enhancement to layer features and interactions on top of the content-based core while keeping that core accessible to the largest number of people possible. These progressively enhanced features usually either layer advanced formatting or layout on these documents or add fanciful interactions for navigating within or between them. We can make the content adapt to different screen sizes and make the limited interactions that are used to navigate the content adapt to different input mechanisms. This isn’t an easy task, but nor is it impossible.</p>
<p>As products shift from the documents side of the spectrum to the applications side, however, implementing progressive enhancement gets harder. In fact, it might become entirely meaningless or impossible. How would you gracefully degrade an online image editor, for example? How would an image editor work on feature handsets without graphical displays? What content would you actually fall back to displaying?</p>
<p><a href="http://smashed.by/netmag"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/06/figure_9-13_2.jpg" alt="The principle of universality, as composed by the creator of the World Wide Web, Tim Berners-Lee, was written in an age when the Web was mostly a collection of interlinked documents. It doesn’t necessarily apply wholesale to applications, which have very different design constraints and requirements. See Lea Verou’s comment on John Allsopp’s retort to my one-version manifesto on .Net magazine: smashed.by/netmag" title="The principle of universality, as composed by the creator of the World Wide Web, Tim Berners-Lee, was written in an age when the Web was mostly a collection of interlinked documents. It doesn’t necessarily apply wholesale to applications, which have very different design constraints and requirements. See Lea Verou’s comment on John Allsopp’s retort to my one-version manifesto on .Net magazine: smashed.by/netmag" width="500" height="330" class="alignnone size-full wp-image-135412" /></a><br /><em>Figure 9.13. The principle of universality, as composed by the creator of the World Wide Web, Tim Berners-Lee, was written in an age when the Web was mostly a collection of interlinked documents. It doesn’t necessarily apply wholesale to applications, which have very different design constraints and requirements. See Lea Verou’s comment on John Allsopp’s retort to my one-version manifesto on .Net magazine: <a href="http://smashed.by/netmag">smashed.by/netmag</a></em></p>
<p>Applications are not content-based; they are behavior-based. Gracefully degrading to a simpler representation of whatever content an application might have does not always make sense. Applications are often made up entirely of behaviors that let users create content. Consider the image editor again: it doesn’t have any content itself, but it enables users to create content. </p>
<p>In order to create exemplary user experiences, we need to maintain focus. This focus has to be placed squarely on meeting the needs of our users in the best way possible. No product team on Earth has the resources to create applications that provide the best possible user experience for every user.</p>
<p>Given unlimited time and resources, we could optimize the user experience of our apps on every device and platform known to humankind. However, given limited time and budget we have to work with in the real world, we must be selective with our audience, problem domain, platforms and devices. We do this not to exclude people unnecessarily but because we realize that including everyone and giving everyone a great user experience is impractical.</p>
<h3>Mobile Design Considerations for Document-Centric Products (Websites)</h3>
<p>On the documents side of the continuum are websites. A website comprises content as well as the presentation of that content. The content may be text, images, audio, video, etc., that is marked up with HTML in order to add semantics and structure. The presentation includes both the visual layout and the interactive elements (such as navigation between pages or states) and is usually implemented using a combination of CSS and JavaScript.</p>
<p>If you have a website, the first thing you should do is test it out in mobile contexts to see how it displays and performs. I’ve encountered far too many companies that overlook the importance of making their websites mobile-friendly and jump straight into creating a native application. Be careful of making this mistake, especially if your website is an important revenue generator. For document-centric websites, use progressive enhancement whenever possible to make sure the content and core interactions for navigating and consuming that content remain accessible to as wide a base of your users as possible.</p>
<p><strong>To do so, you can follow these broad steps:</strong></p>
<ol>
<li>Make sure your content is accessible to everyone, and mark it up with proper semantics. Separating content from presentation is key.</li>
<li>Progressively enhance your content to provide a more optimized experience for people viewing it at different screen sizes (this is the focus of responsive design currently).</li>
<li>Progressively enhance your content to provide a more optimized experience for families of devices based on supported features and capabilities (for example, touch). In other words, make the website responsive in behavior, not just in layout. At this point, you are optimizing for features, not for specific devices (say, for all mobile phones that support touch, not just the iPhone).</li>
<li>Progressively enhance your content to support the unique culture and capabilities of the various devices you want to support. At this point, optimizing for specific devices is all right. There’s nothing wrong with trying to make the user experience as beautiful as possible, even if it is for a specific subset of your users at a time.</li>
<blockquote>
<h5>Make sure to test your designs on actual devices</h5>
<p>A simulator or emulator is great for testing the effects of code changes while you’re developing, but they cannot recreate the unique ergonomics of the device itself. Context is also a key factor that affects the usability of mobile experiences, and a design that works perfectly well under the perfect lighting conditions of an office might not work as well in bright sunlight, for example.</p>
<p>Also, remember that when you test with a simulator, it uses your computer’s powerful hardware to run the application. You might see slower performance—and even slightly different behavior—when running on an actual device.</p>
</blockquote>
<p>Of course, each of these steps will take time and more resources, and you will need to plan and budget accordingly. But what if making your current website responsive does not meet your users’ needs in this particular instance? Perhaps you need to provide a more optimized and focused experience than progressive enhancement allows given your budget and schedule, or perhaps you need a level of device integration that is simply not possible through a browser currently? In this case, you might want to start thinking about whether to build an app, and if so, whether it will support multiple platforms and which technologies you should use to build it.</p>
<h3>Cross-Platform or Single Platform?</h3>
<p>Can you best meet your users’ needs with an application that runs on multiple platforms or &mdash; at least initially &mdash; on a single platform?</p>
<p>When answering this question, keep in mind that creating an application for a single platform does not mean that you cannot create a separate app for a different platform later on. It just means that you will be focusing your design and development efforts on a single platform (or perhaps even a single device) to start with.</p>
<p>It also does not, by itself, imply whether you will be creating an application that runs as a native binary or whether your application will use the native components of the device or devices that it runs on. (Using cross-platform authoring technologies to create an application that you have optimized for a single platform is perfectly possible.)</p>
<p>The answer to this question will, however, determine how much optimization you must do on different platforms. If you care about the user experience, you must optimize your app on each and every platform that you support. It will also affect how much testing you must do (because you will need to test on every platform that you support), the size of your support department (because you will need to troubleshoot user issues on every platform that you support), and how much time and budget you need to set aside for these various functions.</p>
<h4>The Myth of Write Once, Run Anywhere</h4>
<p>A common mistake I see many designers make is to assume that by using cross-platform authoring technologies they will be able to write once, run anywhere. This is a myth. And acting on the myth can lead to rather costly underestimations. Your application might run on multiple platforms, but this rarely—if ever—means that it will run well on multiple platforms.</p>
<p>The only way to get an application to run well on multiple platforms is to optimize it for each one of those platforms and devices. As mentioned earlier, every platform has its own culture, language and norms that users expect apps to conform to. And most users do not care how many other devices your application runs on &mdash; they care only about how well your application runs on their device.</p>
<p>Designers who do not take the unique cultures, customs, language and norms of their respective platforms into consideration risk making their applications look and sound out of place. The applications will appear noticeably foreign, unnecessarily loud and usually rather arrogant, simply because they are culturally insensitive.</p>
<p>Because we don’t want our applications to exhibit such obnoxious behavior, we must optimize them for every platform we support. Our aim is to create applications that are culturally sensitive to the language, norms and customs of the platforms they run on. Anything less and we would be showing varying degrees of disrespect to certain segments of our users.</p>
<h4>Death by a Thousand Cuts</h4>
<p>The worst thing you could do, of course, is disrespect all of your users by creating a lowest-common-denominator application that gives every user on every platform an unoptimized user experience. At that point, you would be at your most vulnerable. Even though your cross-platform application might have the potential to reach a large number of users because it runs on a large number of devices and platforms, it will be at a disadvantage in user experience on every one of those platforms. To put it bluntly, who cares if it runs on a certain platform if it runs badly?</p>
<p>More importantly, what happens when a competitor comes by on one of those platforms with a beautifully designed, precisely optimized, delightful user experience and blows your app out of the water?</p>
<p>And then again on a different platform by a different competitor?</p>
<p>This is death by a thousand cuts, whereby your application is abandoned one platform at a time for superior alternatives. Supporting multiple platforms is not a feature unless you can support them all well. You may have first-to-market advantage, but that will last only until you are outdone by your best-in-market competitor.</p>
<h4>Write Once, Optimize Everywhere</h4>
<p>So, write once, run anywhere is a dangerous myth. Cross-platform applications that compete successfully are write once, optimize everywhere. You must understand the implications this will have on your budget and schedule and plan for optimizing, testing and supporting your application on every platform you choose to support.</p>
<p>Please do not be taken in by the “create a cross-platform application in five minutes” demos by various tool vendors. They are rubbish, unless you are building the simplest of to-do list apps. The true test of a development technology is not how easily it enables you to create a five-minute demo or how quickly it gets you 70% of the way to your goal, but rather how easily it enables you to tackle the last 30% of your development, including the all-important user experience optimizations that could take up the last 10%. These details could end up taking up the bulk of your time and effort in developing the application.</p>
<h4>Web and Other Cross-Platform Technologies</h4>
<p>Broadly speaking, cross-platform technologies can be split into two groups: those that create native binaries and those that don’t. We can also further categorize them as those that use native frameworks and those that don’t. The combination gives us the binary-framework matrix shown below:</p>
<p><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/06/figure_9-14_2.jpg" alt="The binary-framework matrix." title="The binary-framework matrix." width="500" height="374" class="alignnone size-full wp-image-135433" /><br /><em>Figure 9.14. The binary-framework matrix.</em></p>
<p>A native binary is an application bundle that can be run directly by the OS of a given device. It is what we think of commonly when we refer to a “native app.”</p>
<p>However, the far more important test of nativeness is whether the application makes use of native frameworks. These frameworks are what embody the culture, language, gestures, symbols and norms of a platform.</p>
<h3>Foreign Apps Wrapped in Native Binaries (or Wolves in Sheep’s Clothing)</h3>
<p>Creating a native binary for iPhone that does not use any of the native components in the Cocoa Touch framework for iOS is possible (and quite easy) by using a technology such as Adobe’s PhoneGap. PhoneGap wraps an existing Web application &mdash; that uses native Web components &mdash; and creates a native operating system application from it (in the example above, a native iOS application). While your app might look like a native app on the iPhone’s home screen and might launch like a native app, the UI of the app will be rendered using Web components.<sup><a id="ftn12" href="#fn12">[12]</a></sup></p>
<p>Your binary application is just a shell that contains a WebKit component. This WebKit component is what renders your Web application using Web components. Because Web components cannot meet native expectations, I would not recommend using PhoneGap to create non-immersive applications such as productivity apps.<sup><a id="ftn13" href="#fn13">[13]</a></sup></p>
<p>When building immersive applications such as eBooks and games, however, the lack of native framework support in similar technologies is not as big a problem. Adobe Flash and ActionScript, Unity and Ansca’s Corona are favorites among native game and eBook app makers, even though they do not use native frameworks or components. This is because immersive apps rarely, if ever, use native components. Instead, their designers aim to create a completely different world &mdash; perhaps a skeuomorphic one that looks and behaves like a real-world book &mdash; with its own rules, interactions and culture.</p>
<p>I do not recommend Adobe Flex (or applications that use components from the Flash framework) for the same reason that I do not recommend using PhoneGap to create non-immersive native applications: they do not conform to the culture of the native platform and will behave differently than native components on the system.</p>
<p>In summary, be careful when creating native binaries that simply wrap applications that do not use native components. These apps have a tendency to look like native applications, but they cannot behave like native applications because they do not use native components in native frameworks. A PhoneGap application that uses the jQTouch framework might display what looks like an iOS table view when running on an iPhone, but this is simply an HTML look alike brought to life by clever use of CSS and JavaScript. It pretends to be an iOS table view, but it cannot meet the behavioral characteristics of a real table view component from the Cocoa Touch framework, and thus it ends up creating expectations that it cannot meet.<sup><a id="ftn14" href="#fn14">[14]</a></sup> </p>
<p>Creating unmet expectations is a major faux pas of usability. Avoid it like the plague.</p>
<h3>Immersive vs. Non-Immersive Applications</h3>
<p>Understanding the distinction between immersive and non-immersive applications is important because the nativeness of an application is considerably less of an issue for immersive applications.</p>
<p>Immersive applications usually take over the whole device and, by definition, create their own culture and language. A good example is games. A game could have its own control system for running, jumping and firing. Far from conforming to the culture of the platform, a good game transports the user to a world of its own creation. As such, immersive applications usually employ few, if any, of the platform’s conventions. As such, they are prime candidates for the use of non-native technologies.</p>
<p>This explains why Flash, while not native to the Web, is such a popular technology for delivering immersive experiences such as games on the Web; or why Unity, while not using the native components in Cocoa Touch, is used to make many of the top games on iOS and other platforms.</p>
<p>Non-immersive applications (such as productivity apps) usually make heavy use of standard user-interface elements like buttons and table views. They use platform-specific interactions like full-screen “master-detail” transitions on iOS, whereas they might use a tree-view control on a Windows or OS X application. It is thus very important that non-immersive applications speak the native language and conform to the native culture and norms of the platforms they run on.</p>
<p>All that being said, even for immersive applications, performance could still be an issue that influences your choice of whether to use native or non-native technologies. Certain games &mdash; such as first-person shooters &mdash; need to squeeze every bit of performance out of a system in order to shine. In these situations, some non-native technologies might not be performant enough for your needs. The early versions of Adobe AIR-based Flash apps on iPhone, for example, were notoriously slow. Adobe has improved performance in the latest versions of Adobe AIR on iOS, though.</p>
<h3>Native Apps Translated From Non-Native Languages</h3>
<p>If your goal is to provide an optimized user experience, a better cross-platform approach when creating non-immersive native applications would be to use native frameworks and components. This does not necessarily mean that you have to use the native programming language for a given platform to author your application.</p>
<p>Using Appcelerator’s Titanium Mobile SDK, for example, you could write JavaScript to instantiate and populate native components.<sup><a id="ftn15" href="#fn15">[15]</a></sup> Thus, on iOS, when you create a table view in Titanium Mobile, a native Cocoa Touch table view component (a UI TableView instance) is created in your user interface. This not only looks like a native table view (as could also be the case in a PhoneGap application that mimics the native components) but actually is a native table view. Most importantly, it behaves as a table view should.</p>
<p>The use of a scripting language like JavaScript can make it easier to author applications and reuse your team’s existing Web development skills, while still affording you all of the advantages of using native components in your native applications.</p>
<p>Also, because Titanium Mobile is a cross-platform technology, it knows to instantiate native iOS components for your native iOS app and use native Android components instead when compiling your native Android app. The advantages are clear: you use a single scripting language (JavaScript) and have to maintain just one code base, instead of having to learn and use Objective-C on iOS and Java on Android and maintain two separate code bases.</p>
<p>The disadvantage is that you have yet another layer of abstraction to work with. Ultimately, the quality of your applications will depend on the quality of the code that Appcelerator writes in its abstraction frameworks. And you will be dependent on how quickly Appcelerator supports new features that are released to the native frameworks and SDKs. Although Appcelerator tries to make the differences between platforms as transparent as possible in Titanium, there are differences &mdash; not least of all cultural ones &mdash; that you will still need to address and optimize for (remember that our credo is write once, optimize everywhere).</p>
<p><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/06/figure_9-15_2.jpg" alt="Comparison of some common native and cross-platform technologies." title="Comparison of some common native and cross-platform technologies." width="500" height="349" class="alignnone size-full wp-image-135413" /><br /><em>Figure 9.15. Comparison of some common native and cross-platform technologies.</em></p>
<blockquote>
<h5>Native is not necessarily better, but it is native.</h5>
<p>The only way to create applications that conform to the norms &mdash; that is, the culture and language &mdash; of a given platform is to use native technologies. E.g., while creating Flash applications that are served on the Web platform is possible, they will not look or feel like native Web applications that use native Web authoring technologies like HTML, CSS and JavaScript. Similarly, while using these technologies to create applications for platforms like the iPhone is possible, the applications will not look or feel like native iPhone applications that are created using the components in the Cocoa Touch framework. That is not to say that Flash applications cannot perform better than HTML applications. In certain use cases &mdash; especially immersive apps like games &mdash; Flash applications might provide a better user experience. Machinarium, for instance, is a lovely game created in Flash that runs beautifully on iPad. Again, especially for immersive applications like games and eBooks, a cross-platform technology like Unity or Corona could reduce development time and make it easier to implement features that would be more difficult to create using native technologies (such as a 3-D environment or a physics engine).</p>
</blockquote>
<p><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/06/figure_9-16_2.jpg" alt="Machinarium on iPad, an immersive native app created in Flash." title="Machinarium on iPad, an immersive native app created in Flash." width="500" height="313" class="alignnone size-full wp-image-135414" /><br /><em>Figure 9.16. Machinarium on iPad, an immersive native app created in Flash.</em></p>
<p>This is not to say that you should fear cross-platform technologies, but rather that you should do your research, weigh the pros and cons and make an informed decision of whether to add another layer of abstraction to your development process. Each cross-platform technology has different advantages and disadvantages and use cases that make it a better fit for certain types of applications. While Corona might be the perfect choice for a 2-D physics-based game, Titanium Mobile might be better for building a cross-platform productivity application.</p>
<p>Of course, Titanium is not the only cross-platform technology that can create native binaries and use native frameworks. If your team has skills in C# and .NET development, you might also want to consider Mono (and specifically MonoTouch for iOS and Mono for Android). Mono works in much the same way as Titanium, but instead of using JavaScript, you use the C# programming language (… and, with caveats, other .NET programming languages) and .NET patterns and tools to create native apps.</p>
<h3>Web Applications</h3>
<p>If you are reading this book, you are probably either a Web designer or a Web developer (or both), or you are learning to become one. Your role as a Web designer might involve anything from designing collections of documents (in which case you would rely heavily on your graphic design skills) to designing behavior-rich applications (in which case you would be exercising your interaction design skills).</p>
<p>You also have a rich selection of materials to choose from when designing your products. Depending on the needs of your audience, you might choose to use native Web authoring technologies such as HTML, CSS and JavaScript to create native Web applications; alternatively, you might use non-native cross-platform application authoring technologies such as Adobe Flash or Unity to create non-native Web applications. As a third option, you might use a combination of both native and non-native authoring technologies to create hybrid Web applications &mdash; for example, a website built primarily with HTML, CSS and JavaScript but complemented with Flash to deliver a rich gaming experience.</p>
<p>Regardless of your choice of native or non-native Web technologies, what makes a Web application a Web application is that it is deployed to, and accessed from, the World Wide Web platform. This means, at its simplest, that your website or application has a URL<sup><a id="ftn16" href="#fn16">[16]</a></sup> and is served via HTTP.</p>
<h3>Single-Platform Native Applications</h3>
<p>Having worked through the process above, you might decide that you would best serve the needs of your users by tackling a single platform or device for your application and investing your limited time and budget into optimizing the user experience for that platform.</p>
<p>If you do decide to support a single platform, you still have technology choices to make. If you’re making a game or other immersive application, you can choose a cross-platform technology that is specifically geared to making it easy to author such applications, such as Ansca’s Corona, Unity or Adobe Flash.</p>
<p>If you are building a non-immersive application, you still have the option of using a cross platform toolset like Titanium Mobile or Mono. The downside there is that your development process will involve one additional translation layer, and you will have less control over optimizing the performance of the application because you will be reliant to some degree on the native code that Titanium’s engineers have written. Even if you do use Titanium (or a similar framework like Mono), remember that you will still have to learn the native frameworks (or APIs) of the platform that you are developing for. Learning new frameworks is much harder than learning new programming languages. Whereas a seasoned programmer could pick up a programming language like Objective-C in a matter of days, it could take weeks (if not months or years) for a developer to fully grok and become comfortable with the patterns, culture and intricacies of a framework like Cocoa Touch.</p>
<p>Finally, you could use the native toolset of your platform of choice. For example, you can use Xcode with Objective-C and Cocoa Touch to build a native iOS application, or Eclipse with the Android SDK to build a native Android application, or Visual Studio with C# and the .NET framework to build a Windows Phone application.</p>
<p>This could involve learning a new programming language (Objective-C for iOS, Java for Android and C# for Windows Phone) or hiring team members who know the language and have experience with the native framework. As stated, picking up a new language is easy, but learning a new framework is much harder. Keep that in mind when deciding whether to go this route if you or your team do not already possess the required skills.</p>
<p>The advantages of building native applications using native technologies are numerous. For one thing, you have complete flexibility in optimizing the application and user experience. When you use native components and adhere to the human interface guidelines for your chosen platform, your application will conform to the culture, language and norms of that platform. It will be easier for users to learn and use. Also, since you are not reliant on a foreign abstraction or translation layer, you will always be working with the latest code and frameworks from the manufacturer, giving you additional flexibility to accommodate new features and updates as they are released for the platform. Most importantly, concentrating your efforts on a single platform means that you can put the time that you would otherwise have spent optimizing, testing and supporting other platforms into refining and optimizing the user experience of your application first, and if necessary add support to other platforms later on.</p>
<h4>Designing for Humans</h4>
<p>The platforms and technologies that you decide to use for your next product will have a fundamental impact on how the product is accessed, how it looks and feels, and whether it meets—and hopefully exceeds—the needs of your users. This is not a decision to be taken lightly or brushed over.</p>
<p>If your choice of platforms and technologies is based simply on your perceived short-term business needs or on the current competencies of your team, then you are making a decision that solves your own problems, not the user’s problems. This may have short-term advantages, but you will not be able to compete in the long term with those who solve the user’s problems first. Your choice of technologies and platforms should be based on how best you can meet the user’s needs, not on ideological bias or on obtaining short-term gain at the risk of long-term loss.</p>
<p>Remember that there are already too many things out there. We don’t need more things. We need things that work better. Make things that inform, empower and delight. And use the right tools and technologies for the job.</p>
<h4>Footnotes</h4>
<p><sup><a id="fn1" href="#ftn1">[1]</a></sup> To learn more about working this way, read up on agile methodologies and user-centered product development. The merging of these two worlds &#038;mdash that is, adding sufficient design and user testing to every iteration in an agile process &#038;mdash is what I called <em>user-centered agile product development</em> back in 2003: <a href="http://smashed.by/cfe">smashed.by/cfe</a></p>
<p><sup><a id="fn2" href="#ftn2">[2]</a></sup> These norms are usually expressed in interface guidelines for the platforms, such as the human interface guidelines that exist for the Mac, iPhone, iPad and Android platforms. (Android is the odd one out here since it is not really a single platform but has many flavors, each customized by device manufactures and mobile carriers. This is why it is very difficult for Google to exercise control over the user experience of the Android platform. Good user experience is a function of control &mdash; and Google has very little control over the user experience of phones based on the Android platform.</p>
<p><sup><a id="fn6" href="#ftn6">[6]</a></sup> See Tantek Çelik’s call for “Web Human Interface Guidelines” (<a href="http://smashed.by/wehuin">smashed.by/wehuin</a>) and read Joe Hewitt’s post calling for more focus and vision for Web technologies (<a href="http://smashed.by/owned">smashed.by/owned</a>).</p>
<p><sup><a id="fn7" href="#ftn7">[7]</a></sup> As Andrew Lewis states, “If you are not paying for it, you’re not the customer; you’re the product being sold.”, <a href="http://smashed.by/discont">smashed.by/discont</a>.</p>
<p><sup><a id="fn8" href="#ftn8">[8]</a></sup> Or, if you’re really savvy and use a Git repository, you could use a post-commit hook to automatically deploy your latest commit to the server.</p>
<p><sup><a id="fn9" href="#ftn9">[9]</a></sup> At least where the URL isn’t blocked by an autocratic regime.</p>
<p><sup><a id="#fn10" href="#ftn10">[10]</a></sup> Read up on the “one version manifesto” and the versionless character of the Web in my opinion piece in .Net magazine titled “My Websites Will Only Support the Latest Browser Versions”: <a href="http://smashed.by/netsup">smashed.by/netsup</a></p>
<p><sup><a id="fn11" href="#ftn11">[11]</a></sup> Topolsky, Joshua. “A modest proposal: the Continuous Client,” <a href="http://smashed.by/client">smashed.by/client</a>.</p>
<p><sup><a id="fn12" href="#ftn12">[12]</a></sup> PhoneGap does not dictate the use of any particular Web UI framework (for example, jQuery Mobile). All it does is let you wrap a Web application in a native application. However, regardless of which UI framework you use (or even if you decide not to use a Web UI framework at all), the rendered components will be Web UI components, not the native UI components of the platform that your app runs on.</p>
<p><sup><a id="fn13" href="#ftn13">[13]</a></sup> The same can be said for Web applications that are added to the home screens of phones. Again, the Web application in question looks like a native app, launches like a native app, but does not behave like a native app. A Web application running in the browser does not have these shortcomings because it does not create the expectations of a native OS app in the first place. A Web application running in the browser is a native Web application, and native Web applications &mdash; just like native apps on other platforms &mdash; have their own culture, conventions, language, norms and expectations (even though these might not be as strongly defined as on some other native platforms).</p>
<p><sup><a id="fn14" href="#ftn14">[14]</a></sup> The biggest usability faux pas you can commit is to style or skin non-native components to look like native components (as the jQTouch framework does). Whereas components in a native app that do not look like native components at least offer a visual clue that they will probably not behave like native components, non-native components that pretend to be native components will confuse users even more by appearing a certain way but behaving differently. The best thing to do, of course, is to use native components in your native apps. Failing that, at least make your components different enough visually so that you do not create behavioral expectations that you cannot meet.</p>
<p><sup><a id="fn15" href="#ftn15">[15]</a></sup> Don’t confuse Titanium Mobile with Titanium Desktop. The latter works just like PhoneGap. Appcelerator has recently open-sourced Titanium Desktop (now called Desktop) and is focusing its efforts on improving Titanium Mobile: <a href="http://smashed.by/tita">smashed.by/tita</a>.</p>
<p><sup><a id="fn16" href="#ftn16">[16]</a></sup> More precisely known as a URI, although there are technical differences between the two that would make a W3C standards geek froth at the mouth if they were to see as cursory a dismissal of those differences as is being displayed here.</p>
<h3>Download the full version of the chapter for free!</h3>
<p>You can download this chapter in various formats:</p>
<ul>
<li><a href="http://provide.smashingmagazine.com/smashing-book-3-samples/smbook3-sample-chapter9.pdf">download the chapter in PDF</a> (2.64 Mb),</li>
<li><a href="http://provide.smashingmagazine.com/smashing-book-3-samples/smbook3-sample-chapter9.epub">download the chapter in ePUB</a> (1.59 Mb),</li>
<li><a href="http://provide.smashingmagazine.com/smashing-book-3-samples/smbook3-sample-chapter9.mobi">download the chapter in Mobipocket (Kindle)</a> (2.02 Mb) or</li>
<li><a href="http://provide.smashingmagazine.com/smashing-book-3-samples/smbook3-sample-chapter9.zip">download the chapter&#8217;s .zip with all formats</a> (10.55 Mb).</li>
</ul>
<p>We&#8217;d sincerely appreciate your support with an occasional <a href="https://twitter.com/intent/tweet?source=webclient&#038;text=I%20am%20reading%20@smashingmag's%20sample%20chapter%20of%20the%20upcoming%20Smashing%20Book%20%233!%20www.smashingbook.com%20%23smbook3">tweet</a>, Facebook post&mdash;or just spread the word to your friends and colleagues. You can also <a href="http://www.smashingmagazine.com/2012/05/08/the-smashing-book-3-redesign-the-web-is-out/">learn more about the Smashing Book #3</a> first. Again, thank you for all your support!</p>
<p style="text-align: center;"><a href="http://smashingbook.com/"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/05/smb3-bundle.jpg" width="500" height="500" alt="Smashing Books #3" /></a><br /><a href="http://smashingbook.com/"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/05/gtb-bundle.png" width="243" height="95" /></a></p>
<hr />
<p><small>© Aral Balkan for <a href="http://www.smashingmagazine.com">Smashing Magazine</a>, 2012.</small></p>
                                    [@attributes] => Array
                                        (
                                            [type] => html
                                            [base] => http://www.smashingmagazine.com/2012/06/18/mobile-considerations-in-user-experience-design-web-or-native/
                                        )

                                )

                            [thr:total] => 0
                        )

                    [4] => Array
                        (
                            [author] => Array
                                (
                                    [name] => David Appleyard
                                )

                            [title] => Array
                                (
                                    [@cdata] => Freebie: Academic Icon Set (10 Icons + PSD Source)
                                    [@attributes] => Array
                                        (
                                            [type] => html
                                        )

                                )

                            [link] => Array
                                (
                                    [0] => Array
                                        (
                                            [@value] => 
                                            [@attributes] => Array
                                                (
                                                    [rel] => alternate
                                                    [type] => text/html
                                                    [href] => http://www.smashingmagazine.com/2012/06/18/freebie-academic-icon-set-10-png-psd-icons/
                                                )

                                        )

                                    [1] => Array
                                        (
                                            [@value] => 
                                            [@attributes] => Array
                                                (
                                                    [rel] => replies
                                                    [type] => text/html
                                                    [href] => http://www.smashingmagazine.com/2012/06/18/freebie-academic-icon-set-10-png-psd-icons/#comments
                                                    [count] => 11
                                                )

                                        )

                                    [2] => Array
                                        (
                                            [@value] => 
                                            [@attributes] => Array
                                                (
                                                    [rel] => replies
                                                    [type] => application/atom+xml
                                                    [href] => http://www.smashingmagazine.com/2012/06/18/freebie-academic-icon-set-10-png-psd-icons/feed/atom/
                                                    [count] => 11
                                                )

                                        )

                                )

                            [id] => http://mgmt.smashingmagazine.com/?p=130442
                            [updated] => 2012-06-18T20:32:05Z
                            [published] => 2012-06-18T10:03:34Z
                            [category] => Array
                                (
                                    [@value] => 
                                    [@attributes] => Array
                                        (
                                            [scheme] => http://www.smashingmagazine.com
                                            [term] => Freebies
                                        )

                                )

                            [summary] => Array
                                (
                                    [@cdata] => <table width="650"><tr><td width="650"><div style="width:650px;">
      <img src="http://statisches.auslieferung.commindo-media-ressourcen.de/advertisement.gif" alt="" border="0" /><br />
      <a href="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=target&#038;collection=smashing-rss&#038;position=1" target="_blank"><img src="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=image&#038;collection=smashing-rss&#038;position=1" border="0" alt="" /></a>&#160;<a href="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=target&#038;collection=smashing-rss&#038;position=2" target="_blank"><img src="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=image&#038;collection=smashing-rss&#038;position=2" border="0" alt="" /></a>&#160;<a href="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=target&#038;collection=smashing-rss&#038;position=3" target="_blank"><img src="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=image&#038;collection=smashing-rss&#038;position=3" border="0" alt="" /></a>
    </div></td></tr></table>
<p>Today, it is our pleasure to present to you a gorgeous free set of icons related to education and academia&#8212;commissioned by PixelsDaily exclusively for Smashing Magazine and the design community. The icons are available as transparent PNGs as well as Photoshop PSDs in a size of 128×128 pixels. The icons are released under a Creative Commons Attribution license.</p>

<p><a href="http://www.smashingmagazine.com/2012/06/18/freebie-academic-icon-set-10-png-psd-icons/"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/06/academic-icon-set-release.jpg" width="500" height="450" alt="Freebie: Academic Icon Set Release" title="Freebie: Academic Icon Set" /></a></p>

<p>This icon set is completely free to use for commercial and personal projects, without any restrictions. Please link to this article if you want to spread the word.</p>
                                    [@attributes] => Array
                                        (
                                            [type] => html
                                        )

                                )

                            [content] => Array
                                (
                                    [@cdata] => <table width="650">
<tr>
<td width="650">
<div style="width:650px;">
      <img src="http://statisches.auslieferung.commindo-media-ressourcen.de/advertisement.gif" alt="" border="0" /><br />
      <a href="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=target&#038;collection=smashing-rss&#038;position=1" target="_blank"><img src="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=image&#038;collection=smashing-rss&#038;position=1" border="0" alt="" /></a>&nbsp;<a href="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=target&#038;collection=smashing-rss&#038;position=2" target="_blank"><img src="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=image&#038;collection=smashing-rss&#038;position=2" border="0" alt="" /></a>&nbsp;<a href="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=target&#038;collection=smashing-rss&#038;position=3" target="_blank"><img src="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=image&#038;collection=smashing-rss&#038;position=3" border="0" alt="" /></a>
    </div>
</td>
</tr>
</table>
<p>Today, it is our pleasure to present to you a free set of icons related to education and academia&mdash;commissioned by <a href="http://pixelsdaily.com/">PixelsDaily</a> exclusively for Smashing Magazine and the design community. The icons are available as transparent PNGs as well as Photoshop PSDs in a size of 128&#215;128 pixels. The icons are released under a Creative Commons Attribution license.</p>
<p><a href="http://media.smashingmagazine.com/wp-content/uploads/2012/06/large-preview.jpg"><img title="Free Academic Icon Set" src="http://media.smashingmagazine.com/wp-content/uploads/2012/06/academic-icon-set-release-image.png" alt="" width="500" height="450" /></a></p>
<h3>Download the Set for Free!</h3>
<p>This icon set is completely free to use for commercial and personal projects, without any restrictions. Please link to this article if you want to spread the word.</p>
<ul>
<li><a href="http://media.smashingmagazine.com/wp-content/uploads/2012/06/large-preview.jpg">large preview</a> (.jpg)</li>
<li><a href="http://provide.smashingmagazine.com/freebie-academic-icon-set-PSD.zip" title="Download the whole package as .zip">download the set for free</a> (.zip, 8.83 Mb).</li>
</ul>
<h3>Description</h3>
<p>This beautiful icon set consists of 10 images related to education and academia. They are provided both as 128-pixel PNGs and in the original PSD format. The icons included are:</p>
<ul>
<li>Backpack</li>
<li>Blackboard</li>
<li>Books</li>
<li>Calculator</li>
<li>Math equipment</li>
<li>Dictionary</li>
<li>Globe</li>
<li>Mortarboard and hat</li>
<li>Artist’s palette</li>
<li>Science equipment</li>
</ul>
<p>All of our free resources are licensed under a <a href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution license</a>. This lets you distribute, remix, tweak and build on your work, even commercially, as long as you credit the original designer (in this case, PixelsDaily).</p>
<p><a href="http://provide.smashingmagazine.com/freebie-academic-icon-set-PSD.zip" title="Download the free icon set"><img title="Academic icon set full preview" src="http://media.smashingmagazine.com/wp-content/uploads/2012/06/large-preview.jpg" alt="Academic icon set full preview" width="500" height="509" /></a></p>
<h4>Behind the Design</h4>
<p>As always, here are some insights from the designers:</p>
<blockquote>
<p><a href="http://pixelsdaily.com/">PixelsDaily</a> is a collection of free and commercial resources for designers. We publish pixel-perfect freebies that are perfect for building up your design collection. We wanted to do something special for Smashing Magazine readers, so we commissioned an incredibly talented icon designer &mdash; <a href="http://dribbble.com/intriligator">Artem Borysenko</a> &mdash; to craft this special icon set. You can subscribe to receive our daily freebies on <a href="http://www.facebook.com/PixelsDaily">Facebook</a>, <a href="http://twitter.com/pixelsdaily">Twitter</a>, <a href="http://eepurl.com/jP2F5">email</a> and <a href="http://feeds.feedburner.com/PixelsDaily">RSS</a>.</p>
</blockquote>
<p>Thanks, Artem and PixelsDaily! We sincerely appreciate your time and goodwill.</p>
<p><em>(al)</em></p>
<hr />
<p><small>© David Appleyard for <a href="http://www.smashingmagazine.com">Smashing Magazine</a>, 2012.</small></p>
                                    [@attributes] => Array
                                        (
                                            [type] => html
                                            [base] => http://www.smashingmagazine.com/2012/06/18/freebie-academic-icon-set-10-png-psd-icons/
                                        )

                                )

                            [thr:total] => 11
                        )

                    [5] => Array
                        (
                            [author] => Array
                                (
                                    [name] => Rachel McCollin
                                    [uri] => http://compass-design.co.uk
                                )

                            [title] => Array
                                (
                                    [@cdata] => Responsive Images With WordPress&#8217; Featured Images
                                    [@attributes] => Array
                                        (
                                            [type] => html
                                        )

                                )

                            [link] => Array
                                (
                                    [0] => Array
                                        (
                                            [@value] => 
                                            [@attributes] => Array
                                                (
                                                    [rel] => alternate
                                                    [type] => text/html
                                                    [href] => http://www.smashingmagazine.com/2012/06/15/responsive-images-with-wordpress-featured-images/
                                                )

                                        )

                                    [1] => Array
                                        (
                                            [@value] => 
                                            [@attributes] => Array
                                                (
                                                    [rel] => replies
                                                    [type] => text/html
                                                    [href] => http://www.smashingmagazine.com/2012/06/15/responsive-images-with-wordpress-featured-images/#comments
                                                    [count] => 0
                                                )

                                        )

                                    [2] => Array
                                        (
                                            [@value] => 
                                            [@attributes] => Array
                                                (
                                                    [rel] => replies
                                                    [type] => application/atom+xml
                                                    [href] => http://www.smashingmagazine.com/2012/06/15/responsive-images-with-wordpress-featured-images/feed/atom/
                                                    [count] => 0
                                                )

                                        )

                                )

                            [id] => http://mgmt.smashingmagazine.com/?p=135201
                            [updated] => 2012-06-19T11:19:26Z
                            [published] => 2012-06-15T10:43:36Z
                            [category] => Array
                                (
                                    [@value] => 
                                    [@attributes] => Array
                                        (
                                            [scheme] => http://www.smashingmagazine.com
                                            [term] => Mobile
                                        )

                                )

                            [summary] => Array
                                (
                                    [@cdata] => <table width="650"><tr><td width="650"><div style="width:650px;">
      <img src="http://statisches.auslieferung.commindo-media-ressourcen.de/advertisement.gif" alt="" border="0" /><br />
      <a href="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=target&#038;collection=smashing-rss&#038;position=1" target="_blank"><img src="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=image&#038;collection=smashing-rss&#038;position=1" border="0" alt="" /></a>&#160;<a href="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=target&#038;collection=smashing-rss&#038;position=2" target="_blank"><img src="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=image&#038;collection=smashing-rss&#038;position=2" border="0" alt="" /></a>&#160;<a href="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=target&#038;collection=smashing-rss&#038;position=3" target="_blank"><img src="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=image&#038;collection=smashing-rss&#038;position=3" border="0" alt="" /></a>
    </div></td></tr></table>
<p>It’s been a couple of years now since the concept of responsive design took the Web design world by storm, and more and more websites are going responsive. But there are still some barriers and potential problems, not the least of these being the challenge of reducing the size of files that you’re sending to mobile devices.</p>

<p><a href="http://mobile.smashingmagazine.com/2012/06/14/responsive-images-with-wordress-featured-images/"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/06/Wordpress.jpg" alt="Wordpress" width="500" height="398" /></a></p>

<p>In this article, we’ll look at how to use WordPress’ built-in featured images capability to deliver different-sized image files to different devices. “Featured images,” sometimes referred to as thumbnails, is a feature of WordPress that has been vastly improved since version 3. It enables you to specify a featured image for each post and display it with the post’s content. The fact that the image is stored in the post’s meta data, rather than embedded in the post’s content, means we can use it more flexibly, as we shall see.</p>
                                    [@attributes] => Array
                                        (
                                            [type] => html
                                        )

                                )

                            [content] => Array
                                (
                                    [@cdata] => <table width="650">
<tr>
<td width="650">
<div style="width:650px;">
      <img src="http://statisches.auslieferung.commindo-media-ressourcen.de/advertisement.gif" alt="" border="0" /><br />
      <a href="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=target&#038;collection=smashing-rss&#038;position=1" target="_blank"><img src="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=image&#038;collection=smashing-rss&#038;position=1" border="0" alt="" /></a>&nbsp;<a href="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=target&#038;collection=smashing-rss&#038;position=2" target="_blank"><img src="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=image&#038;collection=smashing-rss&#038;position=2" border="0" alt="" /></a>&nbsp;<a href="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=target&#038;collection=smashing-rss&#038;position=3" target="_blank"><img src="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=image&#038;collection=smashing-rss&#038;position=3" border="0" alt="" /></a>
    </div>
</td>
</tr>
</table>
<p>It’s been a couple of years now since the concept of responsive design took the Web design world by storm, and more and more websites are going responsive. But there are still some barriers and potential problems, not the least of these being the challenge of reducing the size of files that you’re sending to mobile devices.</p>
<p>In this article, we’ll look at how to use WordPress’ built-in featured images capability to deliver different-sized image files to different devices. “Featured images,” sometimes referred to as thumbnails, is a feature of WordPress that has been vastly improved since version 3. It enables you to specify a featured image for each post and display it with the post’s content. The fact that the image is stored in the post’s meta data, rather than embedded in the post’s content, means we can use it more flexibly, as we shall see.</p>
<h3>Why Worry About Image Size?</h3>
<p>OK, so a lot of people <em>do</em> use their mobile devices to surf the Web while sitting on the sofa, hooked up to their Wi-Fi, one eye on the phone and one on the TV. And many browse for information sparked by a conversation with the people around them. This type of website visitor is becoming more and more common. You might even be reading this article in this way right now.</p>
<p>But there are and will always be people who use the Web from a mobile device while out and about, possibly using 3G in an area with a dodgy signal or on an expensive data plan. We Web designers and developers tend to invest in data plans with all the bells and whistles; but, believe it or not, plenty of people out there don’t use the Internet as much as we do and so choose a limited plan.</p>
<p>These people won’t thank you for using up their data by sending huge image files to their devices. They may well abandon your website before looking at it if the image downloads are slowing everything down. Moreover, mobile visitors might only check your website quickly in the middle of doing something else, <em>and</em> a slow website could harm your search engine rankings. Taking all this into account, surely reducing file sizes for mobile devices is a no-brainer.</p>
<h3>Responsive Images: What’s It All About?</h3>
<p>By now, you probably know what responsive design is: it uses a combination of a fluid layout and media queries to define breakpoints at which a website’s layout or content changes to fit a particular screen size. Most responsive websites use media queries to target phones; some target tablets such as iPads as well.</p>
<p>In the early days of responsive design, making your images responsive meant using CSS to ensure they stayed nicely inside their containing element, with this code:</p>
<pre class="brush: css">img {
   max-width: 100%;
}</pre>
<p>This technique makes the images look tidy, but all it really does is shrink the same large image to fit the layout. It does nothing to alter the actual size of the file, which could lead to huge image files sneaking onto your mobile design and seriously slowing down the website. Displaying large images that have been shrunk with CSS is discouraged by the W3C, and it uses processing power and data, so it’s a particularly bad idea on mobile devices.</p>
<p>When we do responsive design now, we generally include some way of making the image’s actual size smaller, using one of a variety of established techniques.</p>
<h3>More Than One Way To Skin This Cat</h3>
<p>If you’ve taken an interest in responsive design, you’ll have noticed that quite a few methods of delivering truly responsive images have emerged. Here are some of those methods:</p>
<ul>
<li>Replace images in the markup with background images, using images of different sizes depending on the device. This method has serious accessibility and SEO drawbacks because the images don’t have <code>alt</code> tags for screen readers to read or search engines to index.</li>
<li>Use a smaller image in the markup and a larger image as the background of the containing element in the desktop version of the website, and then use CSS to hide the smaller image on larger screens. This method, described in detail by <a href="http://csswizardry.com/2011/07/responsive-images-right-now/">Harry Roberts on CSS Wizardry</a>, is better than the first one, but it does require that you manually create two images and then, in the style sheet, define the background image for every single image on the website. I don’t know about you, but I certainly don’t have the time or patience for that!</li>
<li>Use a JavaScript-based solution that employs URL parameters or data attributes. This avoids the repetitive work above, but it involves more processing and <a title="Matt Wilcox on javascript-based resposnive images in 24 Ways" href="http://24ways.org/2011/adaptive-images-for-responsive-designs">can slow the website down</a>&mdash;the opposite of what you intended.</li>
<li>Use a solution such as Matt Wilcox’s <a title="Adapative images website" href="http://adaptive-images.com/">Adaptive Images</a>, which does the work for you. This is the smoothest option I’ve seen, but it requires that you separate the images that you want to be resized from those that you don’t&mdash;a potential problem when handing over a CMS-based website to a client or editor who isn’t technologically savvy.</li>
</ul>
<p>The fact that Adaptive Images uses PHP got me thinking about how this could fit WordPress, which, after all, is written in PHP. Is there a way to use WordPress’ built-in functionality to deliver responsive images in a way that the client would not be able to break?</p>
<p>The answer is yes… with the addition of just one free plugin.</p>
<h3>WordPress Responsive Images: Making It Work</h3>
<p>I’ll demonstrate this technique using a website that I recently developed for a client, <a href="http://whatsamayorfor.org.uk">What’s a Mayor For?</a>. This website is responsive and gets a significant portion of visits from mobile devices. At the moment, it uses <code>max-width</code> to resize images, but it doesn’t send different image files to mobile devices.</p>
<p>This is what the website looks like in desktop and mobile browsers:</p>
<p><a href="http://media.smashingmagazine.com/wp-content/uploads/2012/02/WPresponsiveimages-image1.png"><img class="alignleft size-medium wp-image-111749" title="whatsamayorfor-desktop" src="http://media.smashingmagazine.com/wp-content/uploads/2012/02/WPresponsiveimages-image1-300x203.png" alt="The whatsamayorfor site on desktop browsers" width="300" height="203" /></a><a href="http://media.smashingmagazine.com/wp-content/uploads/2012/02/WPresponsiveimages-image2.png"><img class="size-medium wp-image-111750 alignnone" title="whatsamayorfor-mobile" src="http://media.smashingmagazine.com/wp-content/uploads/2012/02/WPresponsiveimages-image2-109x300.png" alt="The whatsamayorfor site on mobile devices" width="109" height="300" /></a><br /><em>Click on the images for a large preview.</em></p>
<p>As you can see, the images scale to fit the layout. But what you can’t see is that the image’s actual size stays the same. We need to change that.</p>
<p>The solution we’ll follow here uses the following elements:</p>
<ol>
<li>A free plugin called Mobble, which detects devices and provides conditional PHP functions that you can use to deliver different content to different devices in your theme’s files;</li>
<li>The <code>single.php</code> and <code>page.php</code> files, which we’ll edit to display the post or page’s featured image, but altering the image’s size according to the type of device;</li>
<li>The featured image functionality in WordPress’ dashboard, which we’ll use to define the image used for each post and page.</li>
</ol>
<p>Let’s get started!</p>
<h4>Download the Mobble Plugin</h4>
<p>First, download the <a href="http://wordpress.org/extend/plugins/mobble/">Mobble</a> plugin. This will check the browser’s user-agent string to determine which device the user is on. These checks are wrapped in WordPress-style conditional functions, such as <code>is_mobile()</code>, which is the one we’ll be using. Purists will balk at this approach, but in my experience it’s very reliable, and the plugin does get a high rating in WordPress’ repository.</p>
<p>Download and activate the plugin.</p>
<h4>Edit the single.php and page.php Files to Call the Post’s Thumbnail</h4>
<p>Using a text editor or WordPress’ editor, open the <code>single.php</code> file. Find the following code or something like it:</p>
<pre class="brush: css">&lt;article id="post-&lt;?php the_ID(); ?&gt;" &lt;?php post_class(); ?&gt;&gt;
&lt;h1 class="entry-title"&gt;&lt;?php the_title(); ?&gt;&lt;/h1&gt;
&lt;section class="entry-content"&gt;</pre>
<p>In our example, the image needs to be displayed immediately after the heading and before the content, so our code needs to be inserted between the <code>h1</code> and <code>section</code> tags. If your website’s theme doesn’t use HTML5, you may put a <code>div</code> there instead of <code>section</code>.</p>
<p>Here is the code that displays the featured image for a given post:</p>
<pre class="brush: css">&lt;?php the_post_thumbnail(); ?&gt;</pre>
<p>The function has some parameters that we can use, the most relevant being image size. You can use any of the sizes defined by WordPress:</p>
<ul>
<li><code>thumbnail</code><br />
Thumbnail: by default, a maximum of 150 × 150 pixels</li>
<li><code>medium</code><br />
Medium resolution: by default a maximum of 300 × 300 pixels</li>
<li><code>large</code><br />
Large resolution: by default, a maximum of 640 × 640 pixels</li>
<li><code>full</code><br />
Full resolution: the original uploaded size</li>
</ul>
<p>This is where our conditional function plays with the image’s size. Here is the full code we’ll need:</p>
<pre class="brush: css">&lt;?php
   if (is_mobile()) {
   the_post_thumbnail('medium');
   } else {
   the_post_thumbnail('large');
} ?&gt;</pre>
<p>This code does the following:</p>
<ol>
<li>Checks whether the website is being viewed on a mobile device: <code>if (is mobile())</code>;</li>
<li>If so, outputs the medium resolution of the post’s thumbnail (or featured image): <code>{the_post_thumbnail('medium')}</code>;</li>
<li>If not (i.e. <code>else</code>), outputs the large resolution: <code>{the_post_thumbnail(large)}</code>.</li>
</ol>
<p>Having set up the <code>single.php</code> file, let’s do the same for <code>page.php</code>. Then, we need to change any embedded images to featured images via the WordPress dashboard.</p>
<h4>Use WordPress’ Featured Image Functionality to Display the Images Correctly</h4>
<p>Adding featured images in WordPress has been very simple since the functionality was incorporated in the user interface in version 3.0. Just follow these three steps:</p>
<ol>
<li>In the WordPress dashboard, open the editing screen for each post and page.</li>
<li>Delete the existing image (it will remain in the gallery for that post or page, which will be helpful in a moment).</li>
<li>Click “Set featured image” in the bottom right of the screen.</li>
<li>In the “Set featured image” pop-up, click the “Gallery” tab. The image you just deleted will be displayed. All you need to do now is click “Use as featured image,” and then click the little cross in the top right of the window. Don’t insert the image into the post or else the image will be displayed twice.
<p><a href="http://media.smashingmagazine.com/wp-content/uploads/2012/02/WPresponsiveimages-image3.png"><img class="alignnone size-medium wp-image-111753" title="wordpress-featured-image-uploader" src="http://media.smashingmagazine.com/wp-content/uploads/2012/02/WPresponsiveimages-image3-300x203.png" alt="The WordPress featured image uploader" width="300" height="203" /></a><br /><em><a href="http://media.smashingmagazine.com/wp-content/uploads/2012/02/WPresponsiveimages-image3.png">Large preview</a>.</em></p>
</li>
<li>Finally, click the “Update” button to save the changes that you’ve made to the post, and test it.</li>
</ol>
<h3>Summary</h3>
<p>As you can see, using WordPress’ featured images functionality to make responsive websites faster on mobile devices is a fairly simple process. All it takes is three steps:</p>
<ol>
<li>Install the Mobble plugin.</li>
<li>Add conditional tags to the <code>single.php</code> and <code>page.php</code> files to call different versions of the image depending on the device.</li>
<li>Replace images in the body of the content with the featured images.</li>
</ol>
<p>Of course, this method isn’t perfect for all situations. It only works if the image should appear above (or below) the rest of the content, and it does require that anyone who adds a post or page use the featured image functionality instead of just inserting an image in the body of the content. All you need to do now is educate the editors of your website to use featured images instead of images within the content. But how you do that is for another day!</p>
<p><em>(al)</em></p>
<hr />
<p><small>© Rachel McCollin for <a href="http://www.smashingmagazine.com">Smashing Magazine</a>, 2012.</small></p>
                                    [@attributes] => Array
                                        (
                                            [type] => html
                                            [base] => http://www.smashingmagazine.com/2012/06/15/responsive-images-with-wordpress-featured-images/
                                        )

                                )

                            [thr:total] => 0
                        )

                    [6] => Array
                        (
                            [author] => Array
                                (
                                    [name] => Chris Coyier
                                    [uri] => http://chriscoyier.net/
                                )

                            [title] => Array
                                (
                                    [@cdata] => Coding Q&amp;A With Chris Coyier: Box-Sizing and CSS Sprites
                                    [@attributes] => Array
                                        (
                                            [type] => html
                                        )

                                )

                            [link] => Array
                                (
                                    [0] => Array
                                        (
                                            [@value] => 
                                            [@attributes] => Array
                                                (
                                                    [rel] => alternate
                                                    [type] => text/html
                                                    [href] => http://www.smashingmagazine.com/2012/06/14/coding-qa-with-chris-coyier-box-sizing-and-css-sprites/
                                                )

                                        )

                                    [1] => Array
                                        (
                                            [@value] => 
                                            [@attributes] => Array
                                                (
                                                    [rel] => replies
                                                    [type] => text/html
                                                    [href] => http://www.smashingmagazine.com/2012/06/14/coding-qa-with-chris-coyier-box-sizing-and-css-sprites/#comments
                                                    [count] => 0
                                                )

                                        )

                                    [2] => Array
                                        (
                                            [@value] => 
                                            [@attributes] => Array
                                                (
                                                    [rel] => replies
                                                    [type] => application/atom+xml
                                                    [href] => http://www.smashingmagazine.com/2012/06/14/coding-qa-with-chris-coyier-box-sizing-and-css-sprites/feed/atom/
                                                    [count] => 0
                                                )

                                        )

                                )

                            [id] => http://mgmt.smashingmagazine.com/?p=135143
                            [updated] => 2012-06-14T16:02:07Z
                            [published] => 2012-06-14T16:01:50Z
                            [category] => Array
                                (
                                    [@value] => 
                                    [@attributes] => Array
                                        (
                                            [scheme] => http://www.smashingmagazine.com
                                            [term] => Coding
                                        )

                                )

                            [summary] => Array
                                (
                                    [@cdata] => <table width="650"><tr><td width="650"><div style="width:650px;">
      <img src="http://statisches.auslieferung.commindo-media-ressourcen.de/advertisement.gif" alt="" border="0" /><br />
      <a href="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=target&#038;collection=smashing-rss&#038;position=1" target="_blank"><img src="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=image&#038;collection=smashing-rss&#038;position=1" border="0" alt="" /></a>&#160;<a href="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=target&#038;collection=smashing-rss&#038;position=2" target="_blank"><img src="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=image&#038;collection=smashing-rss&#038;position=2" border="0" alt="" /></a>&#160;<a href="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=target&#038;collection=smashing-rss&#038;position=3" target="_blank"><img src="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=image&#038;collection=smashing-rss&#038;position=3" border="0" alt="" /></a>
    </div></td></tr></table>
<p>Howdy, folks! Welcome to the new incarnation of Smashing Magazine’s Q&#038;A. It’s going to work like this: <a href="https://smashingcoding.wufoo.com/forms/ask-chris-coyier-your-css-question/">you send in questions you have about CSS</a>, and at least once a month we’ll pick out the best questions and answer them so that everyone can benefit from the exchange. Your question could be about a very specific problem you are having, or it could be a question about philosophical approach. We’ll take all kinds.</p>

<p><a href="http://coding.smashingmagazine.com/2012/06/14/coding-qa-with-chris-coyier-box-sizing-and-css-sprites/"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/06/2666030594_e0e4782b0c_z.jpeg" alt="" title="2666030594_e0e4782b0c_z" width="640" height="426" class="aligncenter size-full wp-image-120449" /></a></p>

<p>We’ve done a bit of this before with a wider scope, so if you enjoy reading the Q&#038;A, check out <a href="http://coding.smashingmagazine.com/author/chris-coyier/">my author archive</a> for more of them. Let's start with the question from Brad Frost: "What are your thoughts on <a href="http://paulirish.com/2012/box-sizing-border-box-ftw/">Paul Irish’s idea</a> to apply <code>box-sizing: border-box</code> to every element on the page?"</p>
                                    [@attributes] => Array
                                        (
                                            [type] => html
                                        )

                                )

                            [content] => Array
                                (
                                    [@cdata] => <table width="650">
<tr>
<td width="650">
<div style="width:650px;">
      <img src="http://statisches.auslieferung.commindo-media-ressourcen.de/advertisement.gif" alt="" border="0" /><br />
      <a href="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=target&#038;collection=smashing-rss&#038;position=1" target="_blank"><img src="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=image&#038;collection=smashing-rss&#038;position=1" border="0" alt="" /></a>&nbsp;<a href="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=target&#038;collection=smashing-rss&#038;position=2" target="_blank"><img src="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=image&#038;collection=smashing-rss&#038;position=2" border="0" alt="" /></a>&nbsp;<a href="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=target&#038;collection=smashing-rss&#038;position=3" target="_blank"><img src="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=image&#038;collection=smashing-rss&#038;position=3" border="0" alt="" /></a>
    </div>
</td>
</tr>
</table>
<p>Howdy, folks! Welcome to the new incarnation of Smashing Magazine’s Q&#038;A. It’s going to work like this: <a href="https://smashingcoding.wufoo.com/forms/ask-chris-coyier-your-css-question/">you send in questions you have about CSS</a>, and at least once a month we’ll pick out the best questions and answer them so that everyone can benefit from the exchange. Your question could be about a very specific problem you are having, or it could be a question about philosophical approach. We’ll take all kinds.</p>
<p>We’ve done a bit of this before with a wider scope, so if you enjoy reading the Q&#038;A, check out <a href="http://coding.smashingmagazine.com/author/chris-coyier/">my author archive</a> for more of them.</p>
<h3>Box Sizing</h3>
<p>Question from Brad Frost:</p>
<blockquote>
<p>What are your thoughts on <a href="http://paulirish.com/2012/box-sizing-border-box-ftw/">Paul Irish’s idea</a> to apply <code>box-sizing: border-box</code> to every element on the page?</p>
<p>Using <code>box-sizing</code> is super-helpful, especially for mobile and responsive design (for example, getting fully fluid form fields with fixed amounts of padding is awesome). But I’m leery of applying it to everything.</p>
<p>Besides browser support (I’ve already run into issues with some less-than-smart mobile browsers), can you think of any downsides to this technique?</p>
</blockquote>
<p>An armchair critic of this technique would whine about the performance of the universal selector (<code>*</code>). This whine has been largely debunked. While this selector technically is “slower” than something like a class name selector, the difference is negligible, except in extreme cases of overuse or on pages with zillions of elements. Doing something that reduces one HTTP request makes at least an order of magnitude bigger difference than optimizing selectors.</p>
<p>For the record, the complete and recommended syntax is this:</p>
<pre class="brush: css">
* { 
   -webkit-box-sizing: border-box; 
   -moz-box-sizing:    border-box; 
   box-sizing:         border-box; 
}
</pre>
<p>With this, you essentially get perfect browser support in everything &mdash; even the vast majority of mobile Webkits. The notable exception is IE 7 and below. I don’t want to open a can of worms, but IE 7 usage is already low and dropping much faster than IE 6 did, so supporting only IE 8+ will be commonplace very soon.</p>
<p>Here’s a quick primer on why using this box model is nice:</p>
<p><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/06/box-model.png" alt="" title="box-model" width="448" height="374" class="aligncenter size-full wp-image-120452" /></p>
<ul>
<li>Now, when you set a width and height, the element will always be that width and height, regardless of padding and borders.</li>
<li>This makes math a lot easier. For example, you could easily make a four-column grid by making the width of each column 25% and floating them. You could make gutters out of pixel padding and not worry that they will expand the columns and break the grid.</li>
<li>It’s also extra useful for text areas that you want to fill to their parent’s width, which you can only do by setting their width to 100%. But then you wouldn’t be able to have padding unless you used this box model, lest they expand beyond the parent’s width.</li>
</ul>
<p>You mention a problem with a mobile browser but not exactly what the problem is or which mobile browser. It would be interesting to know which browser and what the problem is, so if you could follow up in the comments, that would be great.</p>
<p>For me, I’m using it on everything I build from here on out. It’s been fantastic so far, and I see no reason not to go with this empirically better box model.</p>
<h3>CSS Sprites Workflow</h3>
<p>Question from Matt Banks:</p>
<blockquote>
<p>What’s your preferred method for creating and managing CSS sprites? Do you use Photoshop to manually create your own sprites, a Web service or an app like <a href="http://spriterightapp.com/">SpriteRight</a>? For updating sprites with new images, what workflow is best and easiest?</p>
</blockquote>
<p>I have an <a href="http://css-tricks.com/css-sprites-workflow/">article from 2010</a> about my workflow for CSS sprites, in which step 1 is this:</p>
<blockquote>
<p>Ignore sprites entirely. Make every background image its own separate image and reference them as such in the CSS.</p>
</blockquote>
<p>Of course, I’m not suggesting that you don’t use sprites. Quite the contrary: I think using sprites and having a good workflow are paramount to being a good front-end coder and often the number one thing you can do to optimize Web performance. What I was trying to say is <strong>don’t pre-optimize</strong>. Pre-optimization is quicksand for developers: you spend a lot of time flailing your arms but not getting anywhere. You know that sprites are good, and so you start building with them right away, spending all kinds of time tweaking and adjusting and calculating the sprites to be just right during development.</p>
<p><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/06/2666030594_e0e4782b0c_z.jpeg" alt="" title="2666030594_e0e4782b0c_z" width="640" height="426" class="aligncenter size-full wp-image-120449" /><br />
<em>(Image: <a href="http://www.flickr.com/photos/electricnerve/2666030594/sizes/z/in/photostream/">electricnerve</a>)</em></p>
<p>This is a waste of time. Instead, ignore sprites on new projects until you have reached a comfortable level of maturity with your CSS or are just about to go live. Then, take the time to go through and get yourself all sprited up. It will be easier and quicker.</p>
<p>In terms of workflow, I’m still a fan of <a href="http://spriteme.org/">SpriteMe</a>, which is a bookmarklet that finds images in use on your page and suggests or creates a sprite for you and even helps you with the CSS. SpriteMe only works on one page at a time, though, which might not be good enough for complex apps. I’m also a big fan of <a href="http://www.spritecow.com/">SpriteCow</a>, in which you handcraft your own sprite (in Photoshop or some other image-editing program), and then it helps you identify the parts with a really great UI and gives you the CSS needed to use a particular image inside the sprite. I think the SpriteCow workflow is a bit better because you are working from a sprite that you made yourself by looking through your images directory, so it’s more comprehensive and to your own style.</p>
<p>To take things to the next level with your CSS sprites workflow, you should really check out how <a href="http://compass-style.org/">Compass</a> <a href="http://compass-style.org/help/tutorials/spriting/">handles it</a>. <a href="http://railscasts.com/episodes/334-compass-css-sprites">RailsCasts has a screencast</a> that teaches you about it. It’s pretty awesome. You just use individual images as normal (remember, with no pre-optimization) and drop them into an images directory. Compass will see the new image and automatically add it to a master sprite image. It creates a class name for the new image, with all of the correct sizing and positioning. Then, anywhere you want to use this new image as a sprite, either use that class in your HTML or <code>@extend</code> that class in your CSS. Efficient, easy and super-fancy.</p>
<h3>Triangles</h3>
<p>Question from Jakob Cosoroaba:</p>
<blockquote>
<p>All boxes are square to the browser. What’s the best way to fake a triangle box?</p>
</blockquote>
<p>To set the stage here, you can “fake” a triangle in a number of ways. The most common is by exploiting the fact that borders end at an angle when they touch each other at corners. So, by collapsing a box to a width and height of <code>0</code> and setting the color for only one border, we can make a triangle. A lot of examples of this are on <a href="http://css-tricks.com/examples/ShapesOfCSS/">Shapes of CSS</a>. We could draw a triangle with SVG or canvas. We could even make a triangle, with <code>linear-gradient</code> as the background of an element, as easily as this: <code>background: linear-gradient(45deg, white 90%, blue 90%);</code> (with all of the vendor prefixes, of course).</p>
<p>But none of these techniques will help us here. In his original question, Jakob Cosoroaba lists two techniques that he has tried. <a href="http://jsfiddle.net/cosoroaba/nCEwv/">One</a> involves <code>rotate</code> transformations and the <code>clip</code> property; the problem being that IE 9 has <a href="http://www.screenr.com/ikos">too large of a rollover area</a> (i.e. it’s not limited to the triangle). The <a href="http://jsfiddle.net/exKJK/">second technique</a> uses slightly less markup, using only <code>rotate</code> transformations; the problem here being that you cannot add content inside. This made clear what he needs:</p>
<ol>
<li>The ability to put content inside;</li>
<li>The ability to make the triangle (and only the triangle) a link.</li>
</ol>
<p>Jakob, you should have taken your already clever work just a step further! By combining your two techniques, you could make the link the correct size (even in IE) and put content inside. Just make the link sit on top with <code>z-index</code>.</p>
<p><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/06/triangle.png" alt="" title="triangle" width="406" height="148" class="aligncenter size-full wp-image-120451" /></p>
<p>Here’s a <a href="http://jsfiddle.net/chriscoyier/xtCb9/1/">demo of the combined techniques</a>.</p>
<p>Yep, doing this with markup feels a bit hacky. This is just one of those things that CSS isn’t great at right now.</p>
<h3>Server-Side Optimization</h3>
<p>Question from Patrick Schreiner:</p>
<blockquote>
<p>I was wondering if you could provide some insight into what one should keep in mind for server-side optimization and performance when it comes to CSS? Are there any red flags to look out for? What’s your approach to making sure that code performs well and that it’s optimized for heavy server-side optimization?</p>
</blockquote>
<p>I’m not a great server-side guy, but I can list some tips that might be helpful. Perhaps some server folks can help out in the comments.</p>
<ul>
<li><strong>Just serve CSS straight up.</strong><br />
… Not PHP that has to be run and that then serves as a CSS content type, and not LESS that needs to be interpreted client side &mdash; just plain old CSS.</li>
<li><strong>Serve it compressed.</strong><br />
There is no reason for CSS to be optimized for human readability. Strip out all non-relevant white space and comments.</li>
<li><strong>Gzip it.</strong><br />
If you’re running an Apache server (fairly likely), you could put an <code>.htaccess</code> file at the root of your website that tells the server to serve your CSS Gzip’ed. Check out the code starting at line 162 in <a href="https://github.com/h5bp/html5-boilerplate/blob/master/.htaccess">HTML5 Boilerplate’s <code>.htaccess</code></a> file for how to do that.</li>
<li><strong>Cache it.</strong><br />
The fastest file is one you don’t have to serve at all. So, when you do serve a CSS file, tell the browser to keep it around for a long time (a year is a good rule of thumb). Then, if you change the CSS, you can break the cache by changing the file’s name (for example, <code>global.v23453.css</code>). Check out the code starting at line 267 in <a href="https://github.com/h5bp/html5-boilerplate/blob/master/.htaccess">HTML5 Boilerplate’s <code>.htaccess</code></a> file for how to do that.</li>
<li><strong>Keep it small.</strong><br />
If your CSS file is 2 MB, you’re doing it wrong. Maybe you need to get a bit more <a href="https://github.com/stubbornella/oocss/">OOCSS</a> in your approach, doing things more modularly with very reusable bits of style.</li>
<li><strong>One, two or three</strong><br />
That’s how many CSS files should be loaded on any given page. One if the website is one page. Two for websites of medium complexity, using a global CSS file that all pages need and a second file for subsections of the website that are different enough to warrant one. Three for fairly complex websites that need global, section-specific and page-specific styles.</li>
</ul>
<h3>Onward!</h3>
<p>Keep up the great questions, folks! Got a good one? <a href="https://smashingcoding.wufoo.com/forms/ask-chris-coyier-your-css-question/">Send it in</a>, and we’ll pick the best for the next edition.</p>
<p><em>(al)</em></p>
<hr />
<p><small>© Chris Coyier for <a href="http://www.smashingmagazine.com">Smashing Magazine</a>, 2012.</small></p>
                                    [@attributes] => Array
                                        (
                                            [type] => html
                                            [base] => http://www.smashingmagazine.com/2012/06/14/coding-qa-with-chris-coyier-box-sizing-and-css-sprites/
                                        )

                                )

                            [thr:total] => 0
                        )

                    [7] => Array
                        (
                            [author] => Array
                                (
                                    [name] => Lyndon Cerejo
                                    [uri] => http://www.strategist.net
                                )

                            [title] => Array
                                (
                                    [@cdata] => User Experience Takeaways From Online Car Shopping
                                    [@attributes] => Array
                                        (
                                            [type] => html
                                        )

                                )

                            [link] => Array
                                (
                                    [0] => Array
                                        (
                                            [@value] => 
                                            [@attributes] => Array
                                                (
                                                    [rel] => alternate
                                                    [type] => text/html
                                                    [href] => http://www.smashingmagazine.com/2012/06/13/user-experience-takeaways-from-online-car-shopping/
                                                )

                                        )

                                    [1] => Array
                                        (
                                            [@value] => 
                                            [@attributes] => Array
                                                (
                                                    [rel] => replies
                                                    [type] => text/html
                                                    [href] => http://www.smashingmagazine.com/2012/06/13/user-experience-takeaways-from-online-car-shopping/#comments
                                                    [count] => 0
                                                )

                                        )

                                    [2] => Array
                                        (
                                            [@value] => 
                                            [@attributes] => Array
                                                (
                                                    [rel] => replies
                                                    [type] => application/atom+xml
                                                    [href] => http://www.smashingmagazine.com/2012/06/13/user-experience-takeaways-from-online-car-shopping/feed/atom/
                                                    [count] => 0
                                                )

                                        )

                                )

                            [id] => http://mgmt.smashingmagazine.com/?p=134914
                            [updated] => 2012-06-19T11:24:46Z
                            [published] => 2012-06-13T12:03:03Z
                            [category] => Array
                                (
                                    [@value] => 
                                    [@attributes] => Array
                                        (
                                            [scheme] => http://www.smashingmagazine.com
                                            [term] => UX Design
                                        )

                                )

                            [summary] => Array
                                (
                                    [@cdata] => <table width="650"><tr><td width="650"><div style="width:650px;">
      <img src="http://statisches.auslieferung.commindo-media-ressourcen.de/advertisement.gif" alt="" border="0" /><br />
      <a href="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=target&#038;collection=smashing-rss&#038;position=1" target="_blank"><img src="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=image&#038;collection=smashing-rss&#038;position=1" border="0" alt="" /></a>&#160;<a href="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=target&#038;collection=smashing-rss&#038;position=2" target="_blank"><img src="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=image&#038;collection=smashing-rss&#038;position=2" border="0" alt="" /></a>&#160;<a href="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=target&#038;collection=smashing-rss&#038;position=3" target="_blank"><img src="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=image&#038;collection=smashing-rss&#038;position=3" border="0" alt="" /></a>
    </div></td></tr></table>
<p>Emergency car shopping is no fun. This past month was the second time I had to shop for a car in a short timeframe without advance warning. Like most informed shoppers, I went online to get a feel for my options, armed with knowledge of what I was looking for: apart from safety, gas mileage and reliability, it had to comfortably seat six and not require me to take out a second mortgage.</p>

<p><a href="http://uxdesign.smashingmagazine.com/2012/06/13/user-experience-takeaways-from-online-car-shopping/"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/06/kia_home.jpg" alt="Kia home" title="Kia home" width="500" height="293" class="alignnone size-full wp-image-112476" /></a></p>

<p>I felt like a persona out of a scenario that I had role-played a few years ago when <em>our UX team</em> conducted a global UX benchmarking project for General Motors. That year, a JD Power consumer satisfaction study revealed that 68% of GM’s US websites were below the industry average, with two in the bottom 10%. This time, though, the experience was personal and made me think about the <strong>lessons to be learned from the experience of shopping for a car online</strong> that could be applied to any website.</p>
                                    [@attributes] => Array
                                        (
                                            [type] => html
                                        )

                                )

                            [content] => Array
                                (
                                    [@cdata] => <table width="650">
<tr>
<td width="650">
<div style="width:650px;">
      <img src="http://statisches.auslieferung.commindo-media-ressourcen.de/advertisement.gif" alt="" border="0" /><br />
      <a href="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=target&#038;collection=smashing-rss&#038;position=1" target="_blank"><img src="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=image&#038;collection=smashing-rss&#038;position=1" border="0" alt="" /></a>&nbsp;<a href="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=target&#038;collection=smashing-rss&#038;position=2" target="_blank"><img src="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=image&#038;collection=smashing-rss&#038;position=2" border="0" alt="" /></a>&nbsp;<a href="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=target&#038;collection=smashing-rss&#038;position=3" target="_blank"><img src="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=image&#038;collection=smashing-rss&#038;position=3" border="0" alt="" /></a>
    </div>
</td>
</tr>
</table>
<p>Emergency car shopping is no fun. This past month was the second time I had to shop for a car in a short timeframe without advance warning. Like most informed shoppers, I went online to get a feel for my options, armed with knowledge of what I was looking for: apart from safety, gas mileage and reliability, it had to comfortably seat six and not require me to take out a second mortgage.</p>
<p>I felt like a persona out of a scenario that I had role-played a few years ago when our UX team at <em>Capgemini</em> conducted a global UX benchmarking project for General Motors. That year, a JD Power consumer satisfaction study revealed that 68% of GM’s US websites were below the industry average, with two in the bottom 10%. Heuristic evaluations were one method we used to identify the causes of dissatisfaction while evaluating over 50 of GM’s B2C websites, along with 75 competitor websites, across various countries and brands.</p>
<p>Each website evaluation captured over 600 points of data across 16 automobile website features that affect the online car research and shopping user experience, including vehicle information, comparison and configuration. This time, though, the experience was personal and made me think about the <strong>lessons to be learned from the experience of shopping for a car online</strong> that could be applied to any website.</p>
<p><a href="http://media.smashingmagazine.com/wp-content/uploads/2012/05/online-car-shopping-UX-journey-big.png"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/06/journey.jpg" alt="The Online Car Shopping User Experience Journey Map" title="The Online Car Shopping User Experience Journey Map" width="500" height="350" class="alignnone size-full wp-image-112466" /></a><br />
<em>“Online Car Shopping UX Journey” (<a href="http://media.smashingmagazine.com/wp-content/uploads/2012/05/online-car-shopping-UX-journey-big.png">Large version</a>)</em></p>
<h3>Awareness</h3>
<p>Without a preferred vehicle or brand, I started my search on independent websites such as <a href="http://www.kbb.com/" title="Kelly Blue Book">Kelley Blue Book</a> (KBB) and <a href="http://www.edmunds.com/" title="Edmunds">Edmunds</a>. KBB greeted me with a featured article that hit the spot, showcasing “10 Best 3-Row Vehicles Under $30,000,” while Edmunds’ “Car Finder” tool offered common filters to narrow my search and compare shortlisted results. Some of the links in the research process deep-linked to pages on car manufacturers’ websites that were no longer available.</p>
<p><a href="http://www.kbb.com/"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/06/kbb.jpg" alt="Kelly Blue Book" title="Kelly Blue Book" width="500" height="265" class="alignnone size-full wp-image-112467" /></a></p>
<p><a href="http://www.edmunds.com/"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/06/edmunds.jpg" alt="Edmunds" title="Edmunds" width="500" height="265" class="alignnone size-full wp-image-112468" /></a></p>
<h4>Takeaways</h4>
<p>Don’t expect users to always start on your home page; deep links from search engines and third-party websites can drop them many levels deep onto your website. Design for these out-of-your-control scenarios with the following:</p>
<ul>
<li>Clear navigation, breadcrumbs and search to help them get their bearings,</li>
<li>Useful 404 pages to guide them to the main areas of the website,</li>
<li>Standard and intuitive ways to go to the home page.</li>
</ul>
<h3>Consideration</h3>
<p>Back to car shopping. With the search narrowed down to a handful of vehicles, it was time to visit the brand websites of the shortlisted vehicles for additional research and planning the next steps.</p>
<p>While broadband speeds have increased, car website home pages have also bloated, many taking over 10 seconds to crawl from zero to done. Websites such as the one for Kia made the wait seem longer with static screens and slow transitions. Downloading times for most websites on personal computers average about 6 seconds worldwide and about <a href="http://www.nytimes.com/2012/03/01/technology/impatient-web-users-flee-slow-loading-sites.html?pagewanted=all">3.5 seconds on average in the US</a>. While car manufacturers are selling a lifestyle decision and are expected to market their brand and their cars, a few broke a golden rule by auto-playing video and animation with sound.</p>
<p><a href="http://www.kia.com/"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/06/kia_home.jpg" alt="Kia home" title="Kia home" width="500" height="293" class="alignnone size-full wp-image-112476" /></a><br />
<em><a href="http://www.kia.com/" title="Kia">Kia</a> greets the users with several animations right away.</em></p>
<p>Most car websites showcase their models by body style (sedan, SUV, crossover), but that can be confusing because one brand’s SUV can be another’s crossover. Mazda guides users to the appropriate shopping tools depending on where they are in the process; for example, if you are trying to find the right model, Mazda has a model selector with feature-based filters.</p>
<p><a href="http://www.mazdausa.com/"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/06/mazda.jpg" alt="Mazda" title="Mazda" width="500" height="350" class="alignnone size-full wp-image-112470" /></a><br />
<em><a href="http://www.mazdausa.com/" title="Mazda">Mazda USA’s</a> model selector has feature-based filters to help users find the right model.</em></p>
<h4>Takeaways</h4>
<ul>
<li>Make it easy for customers to find your website, using a combination of online and offline marketing techniques. Search engine optimization (SEO) becomes more important when you don’t own the domain name that users would expect to find you at (as is the case with <a href="http://nissan.com">Nissan.com</a>).</li>
<li><a href="http://developer.yahoo.com/performance/rules.html">Load the home page quickly.</a></li>
<li>Give users control of the user experience, especially if they have not explicitly asked for multimedia. Do not auto-play video, and give users the option to turn audio on and off.</li>
<li>Provide users with the tools to find the right product, especially when dealing with a large product catalog or products with multiple variations. These tools include search, filters and wizards.</li>
<li>Search results should offer an appropriate summary of key product information. Apart from the name, thumbnail image and price, briefly summarize a couple of distinguishing features (No, “far-reaching fun” for a car does not count).</li>
</ul>
<h3>Preference</h3>
<p>All car websites presented detailed model information, including features, specifications, pricing and incentives. However, jargon and marketing terminology were not always clarified (what exactly is included in “anti-theft features”?), which could drive users away from the website in search of an explanation.</p>
<p>Comparing trims within a model and against competitors was not always apparent (why should I spend more on a grand trim instead of a sports trim?). Dodge’s comparison seemed a nonstarter, not intuitive and without clear next steps.</p>
<p><a href="http://www.dodge.com/"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/06/dodge.jpg" alt="Dodge’s vehicle comparison" title="Dodge’s vehicle comparison" width="500" height="190" class="alignnone size-full wp-image-112471" /></a><br />
<em><a href="http://www.dodge.com/" title="Dodge">Dodge’s</a> vehicle comparison lacked prominent next steps and call to actions.</em></p>
<p><a href="http://www.kia.com/"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/06/kia_competitive.jpg" alt="Kia compare" title="Kia compare" width="500" height="265" class="alignnone size-full wp-image-112472" /></a><br />
<em><a href="http://www.kia.com/" title="Kia">Kia</a> was one of the few websites to highlight its competitive advantages</em></p>
<h4>Takeaways</h4>
<ul>
<li>Support users’ tasks and goals on your website, including product research. Provide appropriately detailed information for the product category. While not required for commodities such as paper and books, 360-degree views and video are appropriate for cars.</li>
<li>Products that are complex, expensive, configurable or high-touch in nature should be accompanied by additional guidance to help users select the right product, ranging from educational guides (e.g. what to look for in a diamond) to recommendation engines.</li>
<li>Comparisons between competitors are best offered with a preconfigured set of comparison options (with the ability to change them), supported by content from a neutral and independent third party. A related best practice is to highlight the differences and benefits of the primary product.</li>
</ul>
<h3>Purchase</h3>
<p>A few years ago, vehicle configurators were not common or sophisticated, but that has changed. Websites now have wizards guiding users through the steps of customizing a vehicle, followed by concrete steps such as finding nearby inventory, scheduling a test drive and requesting a quote. Some websites did better than others (for example, offering one click to get quotes from multiple dealers), while some websites, like the one for Dodge, were a letdown after building expectations (seven matches within a 10-mile radius turned into no exact match but 112 low matches within a 25-mile radius). Dealer websites themselves were less sophisticated than manufacturer websites and were often difficult to navigate and lacked crucial inventory information such as what trims were in stock.</p>
<p><a href="http://www.dodge.com/"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/06/dodge_inventory.jpg" alt="Dodge inventory" title="Dodge inventory" width="500" height="350" class="alignnone size-full wp-image-112473" /></a><br />
<em><a href="http://www.dodge.com/" title="Dodge">Dodge</a> did not return the promised results in its inventory search.</em></p>
<p>Most websites offered collateral with clear labeling for downloading or delivery by mail. Interactive online brochures like Kia’s were the exception, but most downloadable brochures were PDF files.</p>
<h4>Takeaways</h4>
<ul>
<li>Make call-to-action options prominent and clear. For most online shopping websites, this means an “Add to cart” button, but in other cases it could mean bringing the user to another channel such as a store or showroom or getting them to fill out a form for more information.</li>
<li>Don’t overpromise and underdeliver. As seen with Dodge’s dealer inventory tool above, some websites allow users to add a product to their shopping cart, only to inform them during checkout that it is not available.</li>
</ul>
<h3>Loyalty</h3>
<p>Special sections on websites for car owners are now commonplace, unlike a few years ago, but websites could do a better job of giving users a taste of the features in store, as well as the benefits of registering after buying a vehicle.</p>
<p><a href="http://www.dodge.com/"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/06/dodge_details.jpg" alt="Dodge details" title="Dodge details" width="500" height="350" class="alignnone size-full wp-image-112474" /></a><br />
<em>The benefits of <a href="http://www.dodge.com/" title="Dodge">Dodge’s</a> website for owners are hidden below the fold, and the FAQs linked to above the fold are not relevant.</em></p>
<h4>Takeaways</h4>
<ul>
<li>Sustain an ongoing relationship with your users. For retail websites, this could include features such as order status, tracking information and easy reordering.</li>
<li>Support buyers with tools and features to manage their purchase while building loyalty. These could include product updates, alerts, reminders, guides and manuals.</li>
</ul>
<h3>Then And Now: Business To Personal</h3>
<p>Our heuristic analysis from the study a few years ago drove improvements to the user experience on GM’s websites. This significantly increased customer satisfaction and was reflected in JD Power’s subsequent ranking: GM was number one in customer satisfaction, all of its US websites ranked above the industry average, and three of the top five spots belonged to GM brands.</p>
<p>The overall <strong>online car-shopping experience is much better now</strong> than it was a few years ago, but there is still room for improvement, as shown here. This time around, the websites helped lower the stress of shopping for a car, and I am enjoying my new car smell as I write this. Now for the final user experience test: seeing how easy it is to get off the phone, email and mailing lists of the dozen or so persistent dealers who think I am still in the market for a vehicle.</p>
<p><em>(al)</em></p>
<hr />
<p><small>© Lyndon Cerejo for <a href="http://www.smashingmagazine.com">Smashing Magazine</a>, 2012.</small></p>
                                    [@attributes] => Array
                                        (
                                            [type] => html
                                            [base] => http://www.smashingmagazine.com/2012/06/13/user-experience-takeaways-from-online-car-shopping/
                                        )

                                )

                            [thr:total] => 0
                        )

                    [8] => Array
                        (
                            [author] => Array
                                (
                                    [name] => Daniel Pataki
                                    [uri] => http://danielpataki.com
                                )

                            [title] => Array
                                (
                                    [@cdata] => What&#8217;s New in WordPress 3.4
                                    [@attributes] => Array
                                        (
                                            [type] => html
                                        )

                                )

                            [link] => Array
                                (
                                    [0] => Array
                                        (
                                            [@value] => 
                                            [@attributes] => Array
                                                (
                                                    [rel] => alternate
                                                    [type] => text/html
                                                    [href] => http://www.smashingmagazine.com/2012/06/12/whats-new-in-wordpress-3-4/
                                                )

                                        )

                                    [1] => Array
                                        (
                                            [@value] => 
                                            [@attributes] => Array
                                                (
                                                    [rel] => replies
                                                    [type] => text/html
                                                    [href] => http://www.smashingmagazine.com/2012/06/12/whats-new-in-wordpress-3-4/#comments
                                                    [count] => 0
                                                )

                                        )

                                    [2] => Array
                                        (
                                            [@value] => 
                                            [@attributes] => Array
                                                (
                                                    [rel] => replies
                                                    [type] => application/atom+xml
                                                    [href] => http://www.smashingmagazine.com/2012/06/12/whats-new-in-wordpress-3-4/feed/atom/
                                                    [count] => 0
                                                )

                                        )

                                )

                            [id] => http://mgmt.smashingmagazine.com/?p=134865
                            [updated] => 2012-06-13T17:46:16Z
                            [published] => 2012-06-12T17:44:38Z
                            [category] => Array
                                (
                                    [@value] => 
                                    [@attributes] => Array
                                        (
                                            [scheme] => http://www.smashingmagazine.com
                                            [term] => WordPress
                                        )

                                )

                            [summary] => Array
                                (
                                    [@cdata] => <table width="650"><tr><td width="650"><div style="width:650px;">
      <img src="http://statisches.auslieferung.commindo-media-ressourcen.de/advertisement.gif" alt="" border="0" /><br />
      <a href="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=target&#038;collection=smashing-rss&#038;position=1" target="_blank"><img src="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=image&#038;collection=smashing-rss&#038;position=1" border="0" alt="" /></a>&#160;<a href="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=target&#038;collection=smashing-rss&#038;position=2" target="_blank"><img src="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=image&#038;collection=smashing-rss&#038;position=2" border="0" alt="" /></a>&#160;<a href="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=target&#038;collection=smashing-rss&#038;position=3" target="_blank"><img src="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=image&#038;collection=smashing-rss&#038;position=3" border="0" alt="" /></a>
    </div></td></tr></table>
<p>With WordPress 3.4 set to arrive this week, it's a great time to familiarize ourselves with the new features and additions. The new version of WordPress brings many improvements, including custom backgrounds and headers, a live theme-customizer, revamped XML-RPC, better support for internationalization, and many bug fixes and enhancements. Let's dive in and see what WordPress 3.4 has in store!</p>
<p><a href="http://wp.smashingmagazine.com/2012/06/12/whats-new-in-wordpress-3-4/"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/06/wp34featured-500.jpg" alt="wp34featured-500" title="wp34featured-500" width="500" height="295" class="alignnone size-full wp-image-105948" /></a></p>
<p>When WordPress added <a href="http://codex.wordpress.org/Post_Thumbnails" title="WP Codex: Post Thumbnails">featured images</a> as a core feature in 2.9, a new function was added &#8212; <code>add_theme_support</code>. It was (and is) obvious that this is a <em>precursor</em> of things to come: the standardization of theme features. Since its introduction, <code>add_theme_support</code> handles post-formats, automatic feed-links, and now in version 3.4, custom backgrounds and headers will be added to the list.</p>
                                    [@attributes] => Array
                                        (
                                            [type] => html
                                        )

                                )

                            [content] => Array
                                (
                                    [@cdata] => <table width="650">
<tr>
<td width="650">
<div style="width:650px;">
      <img src="http://statisches.auslieferung.commindo-media-ressourcen.de/advertisement.gif" alt="" border="0" /><br />
      <a href="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=target&#038;collection=smashing-rss&#038;position=1" target="_blank"><img src="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=image&#038;collection=smashing-rss&#038;position=1" border="0" alt="" /></a>&nbsp;<a href="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=target&#038;collection=smashing-rss&#038;position=2" target="_blank"><img src="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=image&#038;collection=smashing-rss&#038;position=2" border="0" alt="" /></a>&nbsp;<a href="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=target&#038;collection=smashing-rss&#038;position=3" target="_blank"><img src="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=image&#038;collection=smashing-rss&#038;position=3" border="0" alt="" /></a>
    </div>
</td>
</tr>
</table>
<p>With WordPress 3.4 set to arrive this week, it&#8217;s a great time to familiarize ourselves with the new features and additions. The new version of WordPress brings many improvements, including custom backgrounds and headers, a live theme-customizer, revamped XML-RPC, better support for internationalization, and many bug-fixes and enhancements. Let&#8217;s dive in and see what WordPress 3.4 has in store!</p>
<p><a href="http://media.smashingmagazine.com/wp-content/uploads/2012/06/wp34featured.jpg"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/06/wp34featured-500.jpg" alt="wp34featured-500" title="wp34featured-500" width="500" height="295" class="alignnone size-full wp-image-105948" /></a></p>
<h3>Custom Headers And Background</h3>
<p>When WordPress added <a href="http://codex.wordpress.org/Post_Thumbnails" title="WP Codex: Post Thumbnails">featured images</a> as a core feature in 2.9, a new function was added &mdash; <code>add_theme_support</code>. It was (and is) obvious that this is a <em>precursor</em> of things to come: the standardization of theme features. Since its introduction, <code>add_theme_support</code> handles post-formats, automatic feed-links, and now in version 3.4, custom backgrounds and headers will be added to the list.</p>
<h4>Adding a Custom Background</h4>
<p>To use this feature, just call the <code>add_theme_support()</code> function with &lsquo;<code>custom-background</code>&rsquo; as the first argument, and a list of default options as the second. Here is an example showing the basic syntax:</p>
<pre class='brush: php'>	$args = array(
		'default-image'          => get_template_directory_uri() . '/images/bg-default.png',
		'default-color'          => '#fafafa',
		'wp-head-callback'       => '',
		'admin-head-callback'    => '',
		'admin-preview-callback' => ''
	);
	
	add_theme_support( 'custom-background', $args )</pre>
<p>Once the code is in place, you&#8217;ll see the changes take effect in the WordPress Admin:</p>
<p><a href="http://media.smashingmagazine.com/wp-content/uploads/2012/06/custombg.png"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/06/custombg-500.jpg" style="border:1px solid #ddd;" alt="The new custom background facility in WordPress 3.4" title="custombg-500" width="500" height="258" class="alignnone size-full wp-image-105955" /></a><br /><em>The new custom background facility in WordPress 3.4</em></p>
<h4>Adding a Custom Header</h4>
<p>Adding the custom-header options work in much the same way. In addition to the new way of defining them, you can now make them flexible in <strong>height</strong> or <strong>width</strong>, which is a great asset to theme designers.</p>
<pre class='brush: php'>	$args = array(
		'flex-height'            => true,
		'height'                 => 200,
		'flex-width'             => true,
		'width'                  => 950,
		'default-image'          => get_template_directory_uri() . '/images/headers/header-default.jpg',
		'random-default'         => false,
		'default-text-color'     => '',
		'header-text'            => true,
		'uploads'                => true,
		'wp-head-callback'       => '',
		'admin-head-callback'    => '',
		'admin-preview-callback' => '',
	);
	add_theme_support( 'custom-header', $args );</pre>
<p>Once you add this code the relevant controls will show up in the Appearance tab and you will be able to set up your custom header and background-image.</p>
<p><a href="http://media.smashingmagazine.com/wp-content/uploads/2012/06/customheader.jpg"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/06/customheader-500.jpg" style="border:1px solid #ddd;" alt="The width and height is now 'suggested'" title="customheader-500" width="500" height="202" class="alignnone size-full wp-image-105957" /></a><br /><em>The width and height is now &#8216;suggested&#8217; (displayed in bold text)</em></p>
<p>Thanks to <a href='http://make.wordpress.org/themes/2012/04/06/updating-custom-backgrounds-and-custom-headers-for-wordpress-3-4/' title='Custom Backgrounds and Headers'>Chip Bennett</a> and <a href='http://sabreuse.com/flexible-headers-in-wordpress-3-4-themes/' title='Flexible Headers in WordPress'>Amy Hendrix</a> for their excellent posts on this topic.</p>
<h3>Live Theme Customizer</h3>
<p>I think one of the best features in recent times is the Live Previews or &#8220;The Customizer&#8221;. As someone who sells themes on Theme Forest, I welcome this addition because the more I can use default WordPress options, the less support I need to provide. The best way to familiarize yourself with this feature is to watch the following great overview from <a href="http://ottopress.com/">Otto</a>. I also recommend his article on <a href='http://ottopress.com/2012/how-to-leverage-the-theme-customizer-in-your-own-themes/' title='The WordPress theme customizer'>leveraging the theme customizer in your own themes</a>.</p>
<p><iframe width="560" height="315" src="http://www.youtube.com/embed/vD8v6u3noPg" frameborder="0" allowfullscreen></iframe></p>
<p>We&#8217;ll be taking an in-depth look at this awesome functionality here on Smashing Magazine, but for this article, the live theme-preview feature is too complex to showcase concisely. If you&#8217;d like to get started, do read Otto&#8217;s article &mdash; it has everything you need to get things set up. Here&#8217;s the nutshell version for a quick preview.</p>
<p>The preview facility works in an object oriented fashion. To use it you will need to cover the following steps:</p>
<ol>
<li>Add the customizer (hook it to &#8216;customize_register&#8217;)</li>
<li>Add an area of customization &mdash; a section (using <code>add_section()</code>)</li>
<li>Add a setting you want to be able to control (using <code>add_setting()</code>) </li>
<li>Add the control which is used to modify your setting (using <code>add_control()</code>) </li>
<li>Customize the preview functionality to work in real-time</li>
</ol>
<p>The live preview is brand-spankin&#8217; new, but it&#8217;s already a very powerful tool. It will no doubt receive numerous updates and additions, so theme developers will finally have a <strong>common</strong> and also <strong>flexible</strong> way of letting users customize their themes.</p>
<h3>XML-RPC Revamped</h3>
<p><abbr title="eXtensible Markup Language - Remote Procedure Call protocol">XML-RPC</abbr> is a specification and a set of tools that allow software running on different platforms to make procedural calls over the Internet. In essence, it allows communication between WordPress and other software. The most apparent use of XML-RPC is the remote blogging services that are offered by apps like Windows Live Writer and mobile apps.</p>
<p>WordPress 3.4 comes with a number of XML-RPC bug-fixes as well as some heavily requested features like support for post thumbnails, custom post types and taxonomies.</p>
<h3>Internationalization Changes</h3>
<p>Back in the second half of December last year, WP Polyglots (the translation team) <a href='http://wppolyglots.wordpress.com/2011/12/18/moving-locale-specific-modifications-to-core/' title='Moving locale-specific modifications into the code'>announced</a> that they will be pouring a lot of work into the 3.4 release and beyond. As a result there a numerous upgrades in the internationalization functionality of WordPress:</p>
<ul>
<li>Comma-localization (for languages like Chinese and Arabic which do not use the standard comma)</li>
<li>Some fields are now forced to be LTR (like password and login names)</li>
<li>Translatable spell-checker language</li>
<li>Single quotes, apostrophes and primes can be localized</li>
<li>Translatable time-zone string</li>
<li>Simplification of:
<ul>
<li>Feed-language specification</li>
<li>Start of the week</li>
<li>RTL language designation</li>
<li>Default secret-key text</li>
<li>Placeholder text of database constants</li>
<li><code>setup-config.php</code> file translation</li>
<li><code>WP_I18N_*</code> hardcoded translations</li>
</ul>
</li>
<li>Translations are now split over three POT files &mdash; <code>wordpress.pot</code>, <code>wordpress-admin.pot</code>, and <code>wordpress-admin-network.pot</code></li>
<li>Default WordPress links can be translated</li>
<li>Dashboard widgets can be translated</li>
</ul>
<h3>Beginnings Of A New API</h3>
<p>While not advertised in the change-logs, <a href='http://nacin.com/2012/03/29/page-templates-in-subdirectories-new-in-wordpress-3-4/' title='new page templates in subdirectories in WordPress'>Andrew Nacin</a> has been working on a <strong>new API</strong> which will replace the <code>get_themes()</code> functionality.</p>
<p>For now you won&#8217;t notice much, with the main difference being that <em>you can place template files in sub-directories</em>. Under the hood, the new class will bring significant speed increases while searching for themes by reducing the filesystem operations to a bare minimum.</p>
<p>As you can see on the main <a href='http://core.trac.wordpress.org/ticket/20103' title='WP_THEME class for WordPress'>Trac Ticket</a> (scroll down a bit in the comments), there has been a lot of work done but the class is only scratching the surface of what we will be able to do later on. Flexible theme-management with better performance will help developers and users out a great deal &mdash; I can&#8217;t wait to see where this goes!</p>
<h3>Bugs and Enhancements</h3>
<p>With a total of 401 bugs fixed, 116 enhancements added, 3 requested features built and 52 tasks completed (at the time of writing) there is a lot more to this update than just the main features above. The <a href='http://core.trac.wordpress.org/milestone/3.4' title='WordPress 3.4 Milestones'>WordPress 3.4 Track Milestone</a> page has all the links and info you need to take a look at all that&#8217;s been done, and here&#8217;s a quick overview.</p>
<ul>
<li>HTML Support in image captions <a href='http://core.trac.wordpress.org/ticket/18311' title='WordPress Trac Ticket'>#18311</a></li>
<li>Twenty Ten and Twenty Eleven themes updated to support new features <a href='http://core.trac.wordpress.org/ticket/20448' title='WordPress Trac Ticket'>#20448</a></li>
<li>Theme installer supports child themes <a href='http://core.trac.wordpress.org/ticket/13774' title='WordPress Trac Ticket'>#13774</a></li>
<li>WP_Query core performance upgrade <a href='http://core.trac.wordpress.org/ticket/18536' title='WordPress Trac Ticket'>#18536</a></li>
<li>Clicking on an empty space in the toolbar will scroll the page to the top <a href='http://core.trac.wordpress.org/ticket/18758' title='WordPress Trac Ticket'>#18758</a></li>
<li>Incorrectly displayed author meta fields fixed <a href='http://core.trac.wordpress.org/ticket/20285' title='WordPress Trac Ticket'>#20285</a></li>
<li>Failed cURL redirect fixed <a href='http://core.trac.wordpress.org/ticket/20434' title='WordPress Trac Ticket'>#20434</a></li>
<li>Spam comments are now excluded from the dashboard <a href='http://core.trac.wordpress.org/ticket/14222' title='WordPress Trac Ticket'>#14222</a></li>
<li>Theme editor support for special theme name characters <a href='http://core.trac.wordpress.org/ticket/16507' title='WordPress Trac Ticket'>#16507</a></li>
<li>Retina display icons added <a href='http://core.trac.wordpress.org/ticket/20293' title='WordPress Trac Ticket'>#20293</a></li>
<li>Already installed themes excluded from theme search <a href='http://core.trac.wordpress.org/ticket/20618' title='WordPress Trac Ticket'>#20618</a></li>
<li>Args added to the recent post and comments widget <a href='http://core.trac.wordpress.org/ticket/16159' title='WordPress Trac Ticket'>#16159</a></li>
<li>New comments can be added from the editor <a href='http://core.trac.wordpress.org/ticket/15527' title='WordPress Trac Ticket'>#15527</a></li>
</ul>
<h3>Updates Of External Libraries</h3>
<p>It&#8217;s always worth checking out the <a href='http://core.trac.wordpress.org/query?status=closed&amp;component=External+Libraries&amp;milestone=3.4&amp;group=resolution&amp;col=id&amp;col=summary&amp;col=component&amp;col=owner&amp;col=type&amp;col=priority&amp;col=version&amp;desc=1&amp;order=priority' title='external library updates for WordPress 3.4'>external library update</a> for a milestone. This version brings quite a lot, to name just the most important ones:</p>
<ul>
<li>PHPMailer updated to 5.2.1 <a href='http://core.trac.wordpress.org/ticket/19887' title='WordPress Trac Ticket'>#19887</a></li>
<li>TinyMCE updated to 3.4.8 <a href='http://core.trac.wordpress.org/ticket/19969' title='WordPress Trac Ticket'>#19969</a></li>
<li>jQuery updated to 1.7.2 <a href='http://core.trac.wordpress.org/ticket/20339' title='WordPress Trac Ticket'>#20339</a></li>
<li>jQuery UI updated to 1.8.20 <a href='http://core.trac.wordpress.org/ticket/20559' title='WordPress Trac Ticket'>#20559</a></li>
<li>SimplePie updated to 1.2.1 <a href='http://core.trac.wordpress.org/ticket/18309' title='WordPress Trac Ticket'>#18309</a></li>
<li>hoverIntent updated to r6 <a href='http://core.trac.wordpress.org/ticket/19311' title='WordPress Trac Ticket'>#19311</a></li>
</ul>
<h3>Want To Chip In?</h3>
<p>If you&#8217;d like to participate there are still a few days left and you can always help out after 3.4 as well. If you have the coding chops take a look at the <a href='http://core.trac.wordpress.org/report/6' title='tickets for WordPress major release'>open tickets</a> for the next major release. </p>
<p>If you&#8217;re not a coder, not to worry! Just using and testing the features can be invaluable as well! You can download <a href='http://wordpress.org/wordpress-3.4-RC2.zip'>WordPress 3.4 RC2</a> or you can install the <a href='http://wordpress.org/extend/plugins/wordpress-beta-tester/' title='Beta Tester Plugin for WordPress'>Beta Tester Plugin</a> to grab all the latest nightlies and be on the bleeding edge!</p>
<p><em>(JS)</em></p>
<hr />
<p><small>© Daniel Pataki for <a href="http://www.smashingmagazine.com">Smashing Magazine</a>, 2012.</small></p>
                                    [@attributes] => Array
                                        (
                                            [type] => html
                                            [base] => http://www.smashingmagazine.com/2012/06/12/whats-new-in-wordpress-3-4/
                                        )

                                )

                            [thr:total] => 0
                        )

                    [9] => Array
                        (
                            [author] => Array
                                (
                                    [name] => Zack Grossbart
                                    [uri] => http://www.zackgrossbart.com
                                )

                            [title] => Array
                                (
                                    [@cdata] => JavaScript Profiling With The Chrome Developer Tools
                                    [@attributes] => Array
                                        (
                                            [type] => html
                                        )

                                )

                            [link] => Array
                                (
                                    [0] => Array
                                        (
                                            [@value] => 
                                            [@attributes] => Array
                                                (
                                                    [rel] => alternate
                                                    [type] => text/html
                                                    [href] => http://www.smashingmagazine.com/2012/06/12/javascript-profiling-with-the-chrome-developer-tools/
                                                )

                                        )

                                    [1] => Array
                                        (
                                            [@value] => 
                                            [@attributes] => Array
                                                (
                                                    [rel] => replies
                                                    [type] => text/html
                                                    [href] => http://www.smashingmagazine.com/2012/06/12/javascript-profiling-with-the-chrome-developer-tools/#comments
                                                    [count] => 0
                                                )

                                        )

                                    [2] => Array
                                        (
                                            [@value] => 
                                            [@attributes] => Array
                                                (
                                                    [rel] => replies
                                                    [type] => application/atom+xml
                                                    [href] => http://www.smashingmagazine.com/2012/06/12/javascript-profiling-with-the-chrome-developer-tools/feed/atom/
                                                    [count] => 0
                                                )

                                        )

                                )

                            [id] => http://mgmt.smashingmagazine.com/?p=134830
                            [updated] => 2012-06-12T12:56:34Z
                            [published] => 2012-06-12T12:54:45Z
                            [category] => Array
                                (
                                    [@value] => 
                                    [@attributes] => Array
                                        (
                                            [scheme] => http://www.smashingmagazine.com
                                            [term] => Coding
                                        )

                                )

                            [summary] => Array
                                (
                                    [@cdata] => <table width="650"><tr><td width="650"><div style="width:650px;">
      <img src="http://statisches.auslieferung.commindo-media-ressourcen.de/advertisement.gif" alt="" border="0" /><br />
      <a href="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=target&#038;collection=smashing-rss&#038;position=1" target="_blank"><img src="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=image&#038;collection=smashing-rss&#038;position=1" border="0" alt="" /></a>&#160;<a href="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=target&#038;collection=smashing-rss&#038;position=2" target="_blank"><img src="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=image&#038;collection=smashing-rss&#038;position=2" border="0" alt="" /></a>&#160;<a href="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=target&#038;collection=smashing-rss&#038;position=3" target="_blank"><img src="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=image&#038;collection=smashing-rss&#038;position=3" border="0" alt="" /></a>
    </div></td></tr></table>
<p>Your website works. Now let’s make it work faster. Website performance is about two things: how fast the page loads, and how fast the code on it runs. Plenty of services will make your website load faster, from minimizers to CDNs, but making it run faster is up to you.</p>

<p><a href="http://coding.smashingmagazine.com/2012/06/12/javascript-profiling-chrome-developer-tools/"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/06/jsprofiling.png" width="500" height="293" alt="JavaScript Profiling With The Chrome Developer Tools" /></a></p>

<p>Little changes in your code can have gigantic performance impacts. A few lines here or there could mean the difference between a blazingly fast website and the dreaded “Unresponsive Script” dialog. This article shows you a few ways to find those lines of code with Chrome Developer Tools.</p>
                                    [@attributes] => Array
                                        (
                                            [type] => html
                                        )

                                )

                            [content] => Array
                                (
                                    [@cdata] => <table width="650">
<tr>
<td width="650">
<div style="width:650px;">
      <img src="http://statisches.auslieferung.commindo-media-ressourcen.de/advertisement.gif" alt="" border="0" /><br />
      <a href="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=target&#038;collection=smashing-rss&#038;position=1" target="_blank"><img src="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=image&#038;collection=smashing-rss&#038;position=1" border="0" alt="" /></a>&nbsp;<a href="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=target&#038;collection=smashing-rss&#038;position=2" target="_blank"><img src="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=image&#038;collection=smashing-rss&#038;position=2" border="0" alt="" /></a>&nbsp;<a href="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=target&#038;collection=smashing-rss&#038;position=3" target="_blank"><img src="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=image&#038;collection=smashing-rss&#038;position=3" border="0" alt="" /></a>
    </div>
</td>
</tr>
</table>
<p>Your website works. Now let’s make it work faster. Website performance is about two things: how fast the page loads, and how fast the code on it runs. Plenty of services will make your website load faster, from <a href="http://stackoverflow.com/questions/3520285/is-there-a-good-javascript-minimizer">minimizers</a> to <a href="http://en.wikipedia.org/wiki/Content_delivery_network">CDNs</a>, but making it run faster is up to you.</p>
<p>Little changes in your code can have gigantic performance impacts. A few lines here or there could mean the difference between a blazingly fast website and the dreaded “Unresponsive Script” dialog. This article shows you a few ways to find those lines of code with <a href="http://code.google.com/chrome/devtools/docs/overview.html">Chrome Developer Tools</a>.</p>
<h3>Establish A Baseline</h3>
<p>We’ll look at a simple application called a color sorter, which presents a grid of rainbow colors that you can drag and drop to mix up. Each dot is a <code>div</code> tag with a little CSS to make it look like a circle.</p>
<p><a href="http://zgrossbart.github.com/jsprofarticle/index1.htm"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/03/color_sorter.png" alt="The Color Sorter" title="The Color Sorter" width="400" height="459" class="alignright size-full wp-image-119201" /></a></p>
<p>Generating my rainbow colors was a little tricky, so I got a little help from “<a href="http://krazydad.com/tutorials/makecolors.php">Making Annoying Rainbows in JavaScript</a>.”</p>
<p>The page loads pretty fast, but it still takes a moment and blinks a little before it paints. Time to profile the page and make it faster.</p>
<p>Always start performance-improvement projects with a baseline understanding of how fast or slow your application already is. The baseline will let you know whether you’re making improvements and help you make tradeoffs. For this article, we’ll use <a href="http://code.google.com/chrome/devtools/docs/overview.html">Chrome Developer Tools</a>.</p>
<p>The profiler is part of Chrome Developer Tools, which is always available in Chrome. Click the “Tools” menu under the little wrench to open it. <a href="http://getfirebug.com">Firebug</a> has some profiling tools, too, but the WebKit browsers (Chrome and Safari) are best at profiling code and showing timelines. Chrome also offers an excellent tool for event tracing, called <a href="https://developers.google.com/web-toolkit/speedtracer/">Speed Tracer</a>.</p>
<p>To establish our baseline, we’ll start recording in the “Timeline” tab, load our page and then stop the recording. (To start recording once Chrome Developer Tools is open, click the “Timeline” tab, and then the small black circle icon for “Record” at the very bottom of the window.) Chrome is smart about not starting to record until the page starts to load. I run it three times and take the average, in case my computer runs slowly during the first test.</p>
<p><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/03/baseline1.png" alt="Performance baseline 1" title="Performance baseline 1" width="500" height="562" class="alignright size-full wp-image-119199" /></p>
<p>My average baseline &mdash; i.e. the time between the first request for the page and the final painting of the page in the browser &mdash; is 1.25 seconds. That’s not bad, but it’s not great for such a small page.</p>
<p>I want to make my code run faster, but I’m not sure what’s making it slow. The profiler helps me find out.</p>
<h3>Create A Profile</h3>
<p>The timeline tells us how long our code took to run, but that doesn’t help us know what’s going on while it’s running. We could make changes and run the timeline again and again, but that’s just shooting in the dark. The “Profiles” tab gives us a better way to see what’s going on.</p>
<p>Profilers show us which functions take the most time. Let’s make our baseline profile by switching to the “Profiles” tab in Chrome Developer Tools, where three types of profiling are offered:</p>
<ol>
<li><strong>JavaScript CPU profile</strong><br />
Shows how much CPU time our JavaScript is taking.</li>
<li><strong>CSS selector profile</strong><br />
Shows how much CPU time is spent processing CSS selectors.</li>
<li><strong>Heap snapshot</strong><br />
Shows how memory is being used by our JavaScript objects.</li>
</ol>
<p>We want to make our JavaScript run faster, so we’ll use the CPU profiling. We start the profile, refresh the page and then stop the profiler.</p>
<p><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/03/profile1.png" alt="The first profile" title="The first profile" width="500" height="562" class="alignright size-full wp-image-119202" /></p>
<p>The first thing that’s clear from the profile is that a lot is going on. The color sorter uses jQuery and jQuery UI, which are doing a lot of stuff like managing plugins and parsing regular expressions. I can also see that two of my functions are at the top of the list: <code>decimalToHex</code> and <code>makeColorSorter</code>. These two functions take a total of 13.2% of my CPU time, so they’re a good place to start making improvements.</p>
<p>We can click the arrow next to the function calls to open the complete function-call stack. Expanding them, I see that <code>decimalToHex</code> is called from <code>makeColorSorter</code>, and <code>makeColorSorter</code> is called from <code>$(document).ready</code>.</p>
<p>Here’s the code:</p>
<pre class="brush: javascript">
$(document).ready(function() {
    makeColorSorter(.05, .05, .05, 0, 2, 4, 128, 127, 121);
    makeSortable();
});
</pre>
<p>Knowing where they’re called from also makes clear that making the colors sortable isn’t my biggest performance problem. Performance issues resulting from the addition of a lot of sortables <a href="http://37signals.com/svn/posts/3137-using-event-capturing-to-improve-basecamp-page-load-times">is common</a>, but my code is taking more time to add DOM elements than to make them sortable.</p>
<p>I want to start making those functions faster, but first I want to isolate my changes. A lot happens when the page loads, and I want to get all of that out of my profile.</p>
<h3>Isolate The Problem</h3>
<p>Instead of loading the color sorter when the document is ready, I’ll make a <a href="http://zgrossbart.github.com/jsprofarticle/index2.htm">second version</a> that waits until I press a button to load the color sorter. This isolates it from the document loading and helps me profile just the code. I can change it back once I’m done tuning performance.</p>
<p>Let’s call the new function <code>testColorSorter</code> and bind it to a clickable button:</p>
<pre class="brush: javascript">
function testColorSorter() {
    makeColorSorter(.05, .05, .05, 0, 2, 4, 128, 127, 121);
    makeSortable();
}
</pre>
<pre class="brush: html">
&lt;button id="clickMe" onclick="testColorSorter();"&gt;Click me&lt;/button&gt;
</pre>
<p>Changing the application before we profile could alter the performance of the application unexpectedly. This change looks pretty safe, but I still want to run the profiler again to see whether I’ve accidentally changed anything else. I’ll create this new profile by starting the profiler, pressing the button in the app and then stopping the profile.</p>
<p><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/03/profile2.png" alt="The second profile" title="The second profile" width="500" height="562" class="alignright size-full wp-image-119203" /></p>
<p>The first thing to notice is that the <code>decimalToHex</code> function is now taking up 4.23% of the time to load; it’s what the code spends the most time on. Let’s create a new baseline to see how much the code improves in this scenario.</p>
<p><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/03/baseline2.png" alt="The second baseline" title="The second baseline" width="500" height="562" class="alignright size-full wp-image-119200" /></p>
<p>A few events occur before I press the button, but I only care about how long it took between the times the mouse was clicked and the browser painted the color sorter. The mouse button was clicked at 390 milliseconds, and the paint event happened at 726 milliseconds; 726 minus 390 equals my baseline of 336 milliseconds. Just as with the first baseline, I ran it three times and took the average time.</p>
<p>At this point, I know where to look and how long the code takes to run. Now we’re ready to start fixing the problem.</p>
<h3>Make It Faster</h3>
<p>The profiler only tells us which function is causing the problem, so we need to look into it and understand what it does.</p>
<pre class="brush: javascript">
function decimalToHex(d) {
    var hex = Number(d).toString(16);
    hex = "00".substr(0, 2 - hex.length) + hex; 

    console.log('converting ' + d + ' to ' + hex);
    return hex;
}
</pre>
<p>Each dot in the color sorter takes a background color value in <a href="http://en.wikipedia.org/wiki/Hexadecimal">hex format</a>, such as <code>#86F01B</code> or <code>#2456FE</code>. These values represent the red, green and blue values of the color. For example, <img src="http://media.smashingmagazine.com/wp-content/uploads/2012/03/bluedot.png" alt="Blue dot" title="Blue dot" width="14" height="14" style="margin: 0px;"/> has a background color of <code>#2456FE</code>, which means a red value of 36, a green value of 86 and a blue value of 254. Each value must be between 0 and 255.</p>
<p>The <code>decimalToHex</code> function converts these <a href="http://en.wikipedia.org/wiki/Rgb">RGB</a> colors to hex colors that we can use on the page.</p>
<p>The function is pretty simple, but I’ve left a <code>console.log</code> message in there, which is just some debugging code we can remove.</p>
<p>The <code>decimalToHex</code> function also adds padding to the beginning of the number. This is important because some base-10 numbers result in a single hex digit; 12 in base 10 is C in hex, but CSS requires two digits. We can make the conversion faster by making it a little less generic. I know that the numbers to be padded each have one digit, so we can rewrite the function like this:</p>
<pre class="brush: javascript">
function decimalToHex(d) {
    var hex = Number(d).toString(16);
    return hex.length === 1 ? '0' + hex : hex; }
</pre>
<p><a href="http://zgrossbart.github.com/jsprofarticle/index3.htm">Version three</a> of the color sorter changes the string only when it needs the padding and doesn’t have to call <code>substr</code>. With this new function, our runtime is 137 milliseconds. By profiling the code again, I can see that the <code>decimalToHex</code> function now takes only 0.04% of the total time &mdash; putting it way down the list.</p>
<p><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/03/profile3.png" alt="The third profile" title="The third profile" width="500" height="562" class="alignright size-full wp-image-119204" /></p>
<p>We can also see that the function using the most CPU is <code>e.extend.merge</code> from jQuery. I’m not sure what that function does because the code is minimized. I could add the development version of jQuery, but I can see that the function is getting called from <code>makeColorSorter</code>, so let’s make that one faster next.</p>
<h3>Minimize Content Changes</h3>
<p>The rainbow colors in the color sorter are generated from a sine wave. The code looks at a center point in the color spectrum and creates a wave through that center point over a specified width. This changes the colors into a rainbow pattern. We can also change the colors in the rainbow by changing the frequency of the red, green and blue.</p>
<pre class="brush: javascript">
function makeColorSorter(frequency1, frequency2, frequency3,
                         phase1, phase2, phase3,
                         center, width, len) {

    for (var i = 0; i < len; ++i)
    {
       var red = Math.floor(Math.sin(frequency1 * i + phase1) * width + center);
       var green = Math.floor(Math.sin(frequency2 * i + phase2) * width + center);
       var blue = Math.floor(Math.sin(frequency3 * i + phase3) * width + center);

       console.log('red: ' + decimalToHex(red));
       console.log('green: ' + decimalToHex(green));
       console.log('blue: ' + decimalToHex(blue));

       var div = $('&lt;div class="colorBlock"&gt;&lt;/div&gt;');
       div.css('background-color', '#' + decimalToHex(red) + decimalToHex(green) + decimalToHex(blue));
       $('#colors').append(div);
       
    }
}
</pre>
<p>We could take out more <code>console.log</code> functions. The calls are especially bad because each is also calling the <code>decimalToHex</code> function, which means that <code>decimalToHex</code> is effectively being called twice as often as it should.</p>
<p>This function changes the DOM a lot. Every time the loop runs, it adds a new <code>div</code> to the <code>colors</code> div tag. This makes me wonder whether that’s what the <code>e.extend.merge</code> function was doing. The profiler makes it easy to tell with a simple experiment.</p>
<p>Instead of adding a new <code>div</code> each time the loop runs, I want to add all of the <code>div</code> tags at once. Let’s create a variable to hold them, and then add them once at the end.</p>
<pre class="brush: javascript">
function makeColorSorter(frequency1, frequency2, frequency3,
                         phase1, phase2, phase3,
                         center, width, len) {

    var colors = "";
    for (var i = 0; i < len; ++i)
    {
       var red = Math.floor(Math.sin(frequency1 * i + phase1) * width + center);
       var green = Math.floor(Math.sin(frequency2 * i + phase2) * width + center);
       var blue = Math.floor(Math.sin(frequency3 * i + phase3) * width + center);

       colors += '&lt;div class="colorBlock" style="background-color: #' + 
           decimalToHex(red) + decimalToHex(green) + decimalToHex(blue) + '"&gt;&lt;/div&gt;';
    }

    $('#colors').append(colors);
}
</pre>
<p>This small change in the code means that the DOM changes once, when it adds all of the <code>div</code> tags. Testing that with the timeline, we see that the runtime between the click and the paint events is now 31 milliseconds. This one DOM change has brought the time for <a href="http://zgrossbart.github.com/jsprofarticle/index4.htm">version four</a> down by about 87%. We can also run the profiler again and see that the <code>e.extend.merge</code> function now takes up such a small percentage of the time that it doesn’t show up on the list.</p>
<p>We could make the code one notch faster by removing the <code>decimalToHex</code> function entirely. CSS <a href="http://www.w3schools.com/cssref/css_colors.asp">supports RGB colors</a>, so we don’t need to convert them to hex. Now we can write our <code>makeColorSorter</code> function like this:</p>
<pre class="brush: javascript">
function makeColorSorter(frequency1, frequency2, frequency3,
                         phase1, phase2, phase3,
                         center, width, len) {

    var colors = "";
    for (var i = 0; i < len; ++i)
    {
       var red = Math.floor(Math.sin(frequency1 * i + phase1) * width + center);
       var green = Math.floor(Math.sin(frequency2 * i + phase2) * width + center);
       var blue = Math.floor(Math.sin(frequency3 * i + phase3) * width + center);

       colors += '&lt;div class="colorBlock" style="background-color: rgb(' + 
           red + ',' + green + ',' + blue + ')"&gt;&lt;/div&gt;';
    }

    $('#colors').append(colors);
}
</pre>
<p><a href="http://zgrossbart.github.com/jsprofarticle/index5.htm">Version five</a> runs in only 26 milliseconds and uses 18 lines of code for what used to take 28 lines.</p>
<h3>JavaScript Profiling In Your Application</h3>
<p>Real-world applications are much more complex than this color sorter, but profiling them follows the same basic steps:</p>
<ol>
<li><strong>Establish a baseline</strong> so that you know where you’re starting from.</li>
<li><strong>Isolate the problem</strong> from any other code running in the application.</li>
<li><strong>Make it faster</strong> in a controlled environment, with frequent timelines and profiles.</li>
</ol>
<p>There are a few other rules to follow when tuning performance:</p>
<ol>
<li><strong>Start with the slowest parts first</strong> so that you get the most improvement for the time spent tuning.</li>
<li><strong>Control the environment.</strong> If you switch computers or make any other major changes, always run a new baseline.</li>
<li><strong>Repeat the analysis</strong> to prevent anomalies on your computer from skewing the results.</li>
</ol>
<p>Everyone wants their website to run faster. You have to develop new features, but new features usually make a website run slower. So, investing time in tuning the performance does pay off.</p>
<p>Profiling and tuning cut the <a href="http://zgrossbart.github.com/jsprofarticle/index6.htm">final color sorter</a>’s runtime by over 92%. How much faster could your website be?</p>
<p><em>(al) (km)</em></p>
<hr />
<p><small>© Zack Grossbart for <a href="http://www.smashingmagazine.com">Smashing Magazine</a>, 2012.</small></p>
                                    [@attributes] => Array
                                        (
                                            [type] => html
                                            [base] => http://www.smashingmagazine.com/2012/06/12/javascript-profiling-with-the-chrome-developer-tools/
                                        )

                                )

                            [thr:total] => 0
                        )

                )

            [@attributes] => Array
                (
                    [lang] => 
                    [base] => http://www.smashingmagazine.com/wp-atom.php
                )

        )

)