HTTP/1.1 200 OK
Server: nginx
Date: Fri, 17 Mar 2017 17:53:40 GMT
Content-Type: text/html; charset=UTF-8
Transfer-Encoding: chunked
Connection: keep-alive
Vary: Accept-Encoding
X-Powered-By: PHP/7.0.12
Link: <https://www.smashingmagazine.com/wp-json/>; rel="https://api.w.org/"
X-Cache-Status: HIT
Strict-Transport-Security: max-age=31536000; includeSubdomains; preload
X-Frame-Options: SAMEORIGIN
Public-Key-Pins: pin-sha256="35L+K6PY5ynTu15SYPrT8KXp5TRH8kzP46mYLpv9k30="; pin-sha256="8RoC2kEF47SCVwX8Er+UBJ44pDfDZY6Ku5mm9bSXT3o="; pin-sha256="78j8kS82YGC1jbX4Qeavl9ps+ZCzb132wCvAY7AxTMw="; pin-sha256="GQGOWh/khWzFKzDO9wUVtRkHO7BJjPfzd0UVDhF+LxM="; max-age=86400; includeSubDomains
X-XSS-Protection: 1; mode=block
X-Content-Type-Options: nosniff

<!DOCTYPE html>
<html lang="en-US" prefix="og: http://ogp.me/ns#">
<head>
	<title>Smashing Magazine &ndash; For Professional Web Designers and Developers</title>
	<meta charset="UTF-8" /><script type="text/javascript">window.NREUM||(NREUM={}),__nr_require=function(e,t,n){function r(n){if(!t[n]){var o=t[n]={exports:{}};e[n][0].call(o.exports,function(t){var o=e[n][1][t];return r(o||t)},o,o.exports)}return t[n].exports}if("function"==typeof __nr_require)return __nr_require;for(var o=0;o<n.length;o++)r(n[o]);return r}({1:[function(e,t,n){function r(){}function o(e,t,n){return function(){return i(e,[(new Date).getTime()].concat(u(arguments)),t?null:this,n),t?void 0:this}}var i=e("handle"),a=e(2),u=e(3),c=e("ee").get("tracer"),f=NREUM;"undefined"==typeof window.newrelic&&(newrelic=f);var s=["setPageViewName","setCustomAttribute","setErrorHandler","finished","addToTrace","inlineHit","addRelease"],l="api-",p=l+"ixn-";a(s,function(e,t){f[t]=o(l+t,!0,"api")}),f.addPageAction=o(l+"addPageAction",!0),f.setCurrentRouteName=o(l+"routeName",!0),t.exports=newrelic,f.interaction=function(){return(new r).get()};var d=r.prototype={createTracer:function(e,t){var n={},r=this,o="function"==typeof t;return i(p+"tracer",[Date.now(),e,n],r),function(){if(c.emit((o?"":"no-")+"fn-start",[Date.now(),r,o],n),o)try{return t.apply(this,arguments)}finally{c.emit("fn-end",[Date.now()],n)}}}};a("setName,setAttribute,save,ignore,onEnd,getContext,end,get".split(","),function(e,t){d[t]=o(p+t)}),newrelic.noticeError=function(e){"string"==typeof e&&(e=new Error(e)),i("err",[e,(new Date).getTime()])}},{}],2:[function(e,t,n){function r(e,t){var n=[],r="",i=0;for(r in e)o.call(e,r)&&(n[i]=t(r,e[r]),i+=1);return n}var o=Object.prototype.hasOwnProperty;t.exports=r},{}],3:[function(e,t,n){function r(e,t,n){t||(t=0),"undefined"==typeof n&&(n=e?e.length:0);for(var r=-1,o=n-t||0,i=Array(o<0?0:o);++r<o;)i[r]=e[t+r];return i}t.exports=r},{}],ee:[function(e,t,n){function r(){}function o(e){function t(e){return e&&e instanceof r?e:e?c(e,u,i):i()}function n(n,r,o){if(!p.aborted){e&&e(n,r,o);for(var i=t(o),a=v(n),u=a.length,c=0;c<u;c++)a[c].apply(i,r);var f=s[w[n]];return f&&f.push([y,n,r,i]),i}}function d(e,t){b[e]=v(e).concat(t)}function v(e){return b[e]||[]}function g(e){return l[e]=l[e]||o(n)}function m(e,t){f(e,function(e,n){t=t||"feature",w[n]=t,t in s||(s[t]=[])})}var b={},w={},y={on:d,emit:n,get:g,listeners:v,context:t,buffer:m,abort:a,aborted:!1};return y}function i(){return new r}function a(){(s.api||s.feature)&&(p.aborted=!0,s=p.backlog={})}var u="nr@context",c=e("gos"),f=e(2),s={},l={},p=t.exports=o();p.backlog=s},{}],gos:[function(e,t,n){function r(e,t,n){if(o.call(e,t))return e[t];var r=n();if(Object.defineProperty&&Object.keys)try{return Object.defineProperty(e,t,{value:r,writable:!0,enumerable:!1}),r}catch(i){}return e[t]=r,r}var o=Object.prototype.hasOwnProperty;t.exports=r},{}],handle:[function(e,t,n){function r(e,t,n,r){o.buffer([e],r),o.emit(e,t,n)}var o=e("ee").get("handle");t.exports=r,r.ee=o},{}],id:[function(e,t,n){function r(e){var t=typeof e;return!e||"object"!==t&&"function"!==t?-1:e===window?0:a(e,i,function(){return o++})}var o=1,i="nr@id",a=e("gos");t.exports=r},{}],loader:[function(e,t,n){function r(){if(!h++){var e=y.info=NREUM.info,t=l.getElementsByTagName("script")[0];if(setTimeout(f.abort,3e4),!(e&&e.licenseKey&&e.applicationID&&t))return f.abort();c(b,function(t,n){e[t]||(e[t]=n)}),u("mark",["onload",a()],null,"api");var n=l.createElement("script");n.src="https://"+e.agent,t.parentNode.insertBefore(n,t)}}function o(){"complete"===l.readyState&&i()}function i(){u("mark",["domContent",a()],null,"api")}function a(){return(new Date).getTime()}var u=e("handle"),c=e(2),f=e("ee"),s=window,l=s.document,p="addEventListener",d="attachEvent",v=s.XMLHttpRequest,g=v&&v.prototype;NREUM.o={ST:setTimeout,CT:clearTimeout,XHR:v,REQ:s.Request,EV:s.Event,PR:s.Promise,MO:s.MutationObserver},e(1);var m=""+location,b={beacon:"bam.nr-data.net",errorBeacon:"bam.nr-data.net",agent:"js-agent.newrelic.com/nr-1016.min.js"},w=v&&g&&g[p]&&!/CriOS/.test(navigator.userAgent),y=t.exports={offset:a(),origin:m,features:{},xhrWrappable:w};l[p]?(l[p]("DOMContentLoaded",i,!1),s[p]("load",r,!1)):(l[d]("onreadystatechange",o),s[d]("onload",r)),u("mark",["firstbyte",a()],null,"api");var h=0},{}]},{},["loader"]);</script>
	<link rel="dns-prefetch" href="https://media-mediatemple.netdna-ssl.com/" />
	<link rel="dns-prefetch" href="https//auslieferung.commindo-media-resourcen.de/" />
	<link rel="preconnect" href="https://media-mediatemple.netdna-ssl.com" />
	<link rel="preconnect" href="https://auslieferung.commindo-media-resourcen.de/" />
	<style id="smash-above-the-fold-css">body,svg:not(:root){overflow:hidden}a,button,input{margin:0}.cahe,.ntb,h4{text-transform:uppercase}.bobo08{border-bottom:.08em solid rgba(0,0,0,.1)}.bo08{border:.08em solid rgba(0,0,0,.1)}article,aside,b,body,div,figcaption,figure,form,h1,h2,h3,h4,html,img,label,li,nav,p,span,strong,ul{font-size:100%;vertical-align:baseline;margin:0;padding:0;outline:0;border:0;background:0 0}html{-moz-osx-font-smoothing:grayscale;text-rendering:optimizelegibility;-webkit-font-feature-settings:"liga","kern";font-feature-settings:"liga","kern";overflow-y:scroll;overflow-x:hidden}body{line-height:1.46;max-width:2000px;color:#333;background-image:url(https://media-mediatemple.netdna-ssl.com/wp-content/themes/smashing-magazine/assets/images/smbg.png)}a{font-size:100%;text-decoration:none;vertical-align:baseline;padding:0;background:0 0;color:#41b7d8}a:active{color:#fff;background-color:#e53b2c}.pap a,li a,p a{border-bottom:.08em solid rgba(0,0,0,.1);padding-bottom:.08em}br+em a,figcaption a{border-bottom:.09em solid rgba(0,0,0,.1);padding-bottom:.09em}.pmd a,nav a{padding-bottom:0;border:0}img{max-width:100%;height:auto;border:0}ul{list-style:none}ol{list-style:decimal}article ul{list-style:disc}article ol,article ul{font-size:1.125em;margin:.5em 1.5em}article li{padding:.25em 0}article li ol,article li ul{font-size:1em;margin:0 1.5em}input{vertical-align:middle}[type=submit],button,label{cursor:pointer}[type=text],button{font-size:1.125em;outline:0;-webkit-transition:border-color .3s;transition:border-color .3s}button{vertical-align:top;overflow:visible;padding:.75em 2em;border:.08em solid #c73a11;color:#fff;background-color:#e95c33;background:-webkit-linear-gradient(top,#e85c33 0,#e53a2b 100%);background:linear-gradient(to bottom,#e85c33 0,#e53a2b 100%);border-radius:.5em}.sr,.stb{overflow:hidden;white-space:nowrap}[type=text]:placeholder{color:#777}[type=text]{line-height:1.5;margin-bottom:1em;padding:.5em;color:#777;border:.08em solid rgba(0,0,0,.1);background-color:#fff;border-radius:.5em 0 0 .5em}@-ms-viewport{width:device-width}body,button,input,label{font-family:"Proxima Nova Regular","Segoe UI",Roboto,"Droid Sans","Helvetica Neue",Arial,sans-serif;font-style:normal;font-weight:400}.cahe,.cat h3,.category .cat h2,.ntb,b,h4,strong{font-family:'Proxima Nova Bold',"Segoe UI",Roboto,"Droid Sans","Helvetica Neue",Arial,sans-serif;font-style:normal;font-weight:700}.ed+p,.pmd .a,.pmd+p{font-family:"Skolar Regular","Roboto Slab","Droid Serif",Cambria,Georgia,"Times New Roman",Times,serif;font-weight:400;font-style:normal}.ed+p em,.pmd+p em{font-family:'Skolar Italic',"Roboto Slab","Droid Serif",Cambria,Georgia,"Times New Roman",Times,serif;font-weight:400;font-style:italic}.ed+p b,.ed+p strong,.pmd+p b,.pmd+p strong{font-family:'Skolar Bold',"Roboto Slab","Droid Serif",Cambria,Georgia,"Times New Roman",Times,serif;font-weight:700;font-style:normal}h2,h3{font-family:"Skolar Bold","Segoe UI Bold","Roboto Slab","Droid Serif",AvenirNext-Bold,"Avenir Bold",Georgia,"Times New Roman",Times,serif;font-weight:700;font-style:normal}.clearfix::after,.clearfix::before{content:" ";display:table}.clearfix::after{clear:both}.sr{text-indent:200%;height:.008em;width:.008em}.blocked,.ch,.mise,.mn ul,.mnc,.ms form,.msc,.nw,.pmd .pt,.po,.sb,.short,.sn{display:none}.ad .declare,.cahe,.long,.pmd li,.sr,article,figure,label,nav{display:block}.poptag a h2 a,.tags a,h3 .hsl,h4 .hsl{display:inline-block}.awithus,.blocked figure,.gra,.ntb,.stb{float:right}.mn,.mnb,.ms,.pt,.sr{position:absolute}.h,.h .awithus,.poptag a,.pt img,aside,button,div,form,h3 .hsl,h4 .hsl,li,ul{position:relative}.h{z-index:80;width:38.2%;margin-left:5.5%;padding:1.25em 0}.ntb,.stb{padding:.4em}.mnb{top:1.5em;right:1.5em;z-index:90}.ntb,.stb{box-sizing:border-box;border:.08em solid #c73a11;border-radius:.25em;box-shadow:0 .08em .08em rgba(0,0,0,.25)}.ntb{margin-left:1em;color:#fff;background:#e95c33}.stb{text-indent:150%;width:2.9375em;background:url(https://media-mediatemple.netdna-ssl.com/wp-content/themes/smashing-magazine/assets/images/search-icon.svg) 50% 50% no-repeat,#e95c33;background-size:1.875em auto;-webkit-background-size:1.875em}.mn,.ms{width:100%;height:0;max-height:0;padding-top:0;opacity:0;-webkit-transition:none;transition:none}.cc,.post{margin-bottom:2em}.fluid{padding-bottom:1.5em;background-color:#fff;box-shadow:0 0 .625em .08em rgba(0,0,0,.05)}.grid{margin-top:1.25em}.post{padding:.5em 5.5% 4em;border-bottom:.3125em solid #41b7d8}h2{font-size:2em;line-height:1.1}h2 a{color:#333}.cahe{font-size:.45em;line-height:1.5;letter-spacing:.08em;padding-bottom:.5em;color:#41b7d8}article{line-height:1.55}article p{font-size:1.125em}.ed+p,.pmd .a,.pmd+p{font-size:1.375em;line-height:1.35;margin:0}h3{font-size:1.625em;line-height:1.3}h4{font-size:1.125em;letter-spacing:.125em}h3,h4{padding:1.5em 0 .5em}figure img,p,p img{padding:.5em 0}figure{margin:1em 0}.mcc{padding-top:1em;width:12.5em}.pmd{padding-bottom:2em;margin:0}.pmd li{padding-left:1.5em;margin-top:1em;color:rgba(0,0,0,.3)}.pmd .a{padding:.5em .5em .5em 0;border-bottom:.08em solid rgba(0,0,0,.1)}.tags a{margin:0 1em .5em 0;border-bottom:.08em solid transparent}.tags a:first-child{margin-top:0}.tags a::after{content:", "}.tags a:last-child::after{content:""}.cat{border-top:.625em solid;border-bottom:.08em solid;border-color:#e5e5e5;margin:2em 5.5% 3em;padding:1em 0 1.25em}.cat h2{margin-bottom:.5em}.cat h3{font-size:1.25em}.poptag a{padding:.25em .5em;margin:0 .5em .5em 0;border-bottom:.08em solid rgba(0,0,0,.1);background:#a1a1a1;border-radius:.25em}.gra{padding:1.25em .75em 1.25em 1.5em}.avatar{border-radius:50%}.sf label,.sfm label{font-weight:400;color:rgba(0,0,0,.25);margin:-.8em 0 .5em}.sf button{line-height:2.25;left:-.3125em;width:23%;height:2.375em;padding:0 1%;border-left:0;border-radius:0 .5em .5em 0}.sf [type=text]{width:73%;height:1.5em;padding:.375em 0 .375em 2%;margin-bottom:0;border-right:0}.declare{float:left;margin:.875em 0 .5em;color:rgba(0,0,0,.25)}.awithus{margin-top:.875em;z-index:9}.ad .declare{font-size:1em;float:none;padding:1em 0 .5em;margin-top:0}.cad{margin-bottom:1.5em}.blocked{margin:1em 5.5%;padding:1em 1.5em;background:#f9f9f9;border-radius:.5em}.blocked figure{float:right;margin:0 0 0 1em}.pt{top:0;right:-2em}.pt img{float:left;border:.08em solid rgba(0,0,0,.1);border-radius:.3125em}@media screen and (min-width:31.25em){.h{width:28.55%}.pmd li{display:inline-block;padding-right:2em}.pmd .a{display:block}.tags a{display:inline;margin:0}}@media screen and (min-width:38.125em){.grid{padding:.5em 0}.pmd .pt{display:block}}@media screen and (min-width:40.625em){.ad{float:right;margin:0 0 1em 2em}}@media screen and (min-width:50em){body{border-left:.625em solid transparent}.h,.mn,.mn+.mnc,.mn:target,.mn:target+.mnc,.ms,.ms+.msc,.ms:target,.ms:target+.msc{display:none}.ch,.ch li a,.mise,.nw,.nw a,.sn,.sn li a{display:block}.mnb,.mnb a{overflow:hidden;top:-.5em;right:0;height:.01em;width:.01em;padding:0}.ch,.main{float:right}.cc,.ch li,.col,.nw,.nw li{float:left}.nw{width:79%}.nw li{border-right:.08em solid rgba(0,0,0,.05)}.nw li a{padding:2.5em 1em .5em;height:1.75em;color:rgba(0,0,0,.3);-webkit-transition:color .3s,background-color .3s;transition:color .3s,background-color .3s}.nw .current{z-index:2;width:24%;background:#fff}.nw .current a{padding:1.5em 1em 0;height:3.3125em;-webkit-transition:none;transition:none}.nw .current a:focus,.nw .current a:hover{background-color:#fff}.nw .current img{position:relative;top:-.125em}.ch{margin:2.5em 4% 0 0;z-index:50}.ch li{margin-left:.625em}.ch li a{text-indent:100%;overflow:hidden;white-space:nowrap;width:1.4375em;height:1.4375em;background-image:url(https://media-mediatemple.netdna-ssl.com/wp-content/themes/smashing-magazine/assets/images/channels.svg);background-size:353% 600%;opacity:.45;-webkit-transition:all .3s;transition:all .3s}.rss a{background-position:76% 35.5%}.fb a{background-position:76% 62%}.tw a{background-position:76% 90%}.nl a{background-position:76% 9%}.cc{width:100%}.main{width:80%;padding:0;margin-top:1.5em}.mise form{margin:1em 0 2em 5.5%}.mise [type=text]{height:1.125em;padding:1em 2.5%}.mise button{line-height:3.125;width:17.5%;height:3.25em}.sn{width:20%}.sct{margin:2em 0}.sn ul{margin-left:-.08em}.sn li{border-left-width:.625em;border-left-style:solid;padding-bottom:2.25em;-webkit-transition:border-color .3s;transition:border-color .3s}.sn li a{font-family:'Proxima Nova Bold',"Segoe UI",Roboto,"Droid Sans","Helvetica Neue",Arial,sans-serif;font-style:normal;font-weight:700;text-transform:uppercase;letter-spacing:.175em;color:#333;padding:.25em .5em .25em 20%;border-bottom:.08em solid transparent;-webkit-transition:background-color .3s;transition:background-color .3s}.sn li li{border:0;margin-left:.08em;padding-bottom:0}.sn li li a{font-family:"Proxima Nova Regular","Segoe UI",Roboto,"Droid Sans","Helvetica Neue",Arial,sans-serif;font-style:normal;font-weight:400;letter-spacing:0;text-transform:none;color:#777;border:0;padding-left:20%;margin:0;-webkit-transition:color .3s,background-color .3s;transition:color .3s,background-color .3s}.menu-item-coding{border-left-color:#C9E9E5}.menu-item-design{border-left-color:#CDEEAA}.menu-item-mobile{border-left-color:#F9F0A8}.menu-item-graphics{border-left-color:#E0CFDF}.menu-item-uxdesign{border-left-color:#FACED2}.menu-item-wordpress{border-left-color:#BCD8F0}.cat{padding-left:5.5%;padding-right:5.5%}.post{padding-left:11%}.blocked{margin-left:11%}article img{max-width:31.25em}.fwi img{max-width:100%}}@media screen and (min-width:63.75em){.wg h3,.wg h3 a{position:relative}.so img,.so p{overflow:hidden}.mise,.sn li ul{display:none}.sb,.sb .sf{display:block}.sn li,.so img{float:left}.bnnr-list,.wg{clear:both}.nw .current{width:21%}.main,.sn{width:100%}.ch{margin-right:1em}.main{margin-top:-.5em}.post{padding-left:5.5%}.blocked{margin-left:5.5%}.sn{margin-top:0;margin-bottom:0}.sn ul{margin:1em 0 0;padding:0 0 0 5.5%;border-bottom:.3125em solid rgba(0,0,0,.06)}.sn li{border-left-width:0;border-right:.08em solid #e5e5e5;border-bottom-width:.3125em;border-bottom-style:solid;margin-bottom:-.3125em;padding-bottom:0}.sn li:last-child{border-right:0}.sn li a{font-size:.75em;border:0;padding:.75em .9em}.sct{margin-top:-.5em}.menu-item-coding{border-bottom-color:#C9E9E5}.menu-item-design{border-bottom-color:#CDEEAA}.menu-item-mobile{border-bottom-color:#F9F0A8}.menu-item-graphics{border-bottom-color:#E0CFDF}.menu-item-uxdesign{border-bottom-color:#FACED2}.menu-item-wordpress{border-bottom-color:#BCD8F0}h2{padding-top:.5em}.cc{margin-right:-28.125em}.fluid{margin-right:28.125em;border-radius:0 .625em .625em 0}.cat{padding-left:0;padding-right:0;margin-top:2em;margin-right:5.5%}.sb{z-index:3}.sb .sf form{margin:0}.sb .sf .sl{padding:2em 0 .125em}.sb .sf [type=text]{height:1.5em;padding:.375em 0 .375em 2%}.sb .sf button{line-height:2.25;width:23%;height:2.375em}.side{padding:0 0 0 1.25em;width:26.25em;top:-3.325em}.bw{margin:0 0 1.25em}.bw .awithus{margin-right:.5em}.bw p{padding-top:0}.faw{margin-top:1.5em}.bnnr-list li{font-size:.75em;text-align:center;width:48%;display:inline-block;margin:0 2% 1em 0}.bnnr-list a{border-bottom:0}.bnnr-list .double{width:34.16667em}.wg{margin:1.5em 0 1.5em -1.25em;padding:0 1.25em 2em;border:.08em solid rgba(0,0,0,.1);border-left:0;background:rgba(255,255,255,.55);border-radius:0 .625em .625em 0}.wg form{margin:.75em 0 1em}.wg li{list-style:none;padding:1em 0}.wg h3{padding-left:2.5em}.wg h3 img{position:absolute;left:-2.5em;top:0}.sb .mcf input{width:66%}.sb .mcf input+.submit{width:30%}.so div,.wg li{border-bottom:.08em solid rgba(0,0,0,.05)}.so div{margin-top:.5em}.so p{line-height:1.55;padding-top:1.125em}.so img{margin:1.5em 1.5em 0 0;border-radius:.5em}.fir{padding:0 1.5em 1.75em 0}.sec{padding-bottom:1.75em}}@media screen and (min-width:76.25em){.sn li,.sn ul{border-bottom:0}.nw{width:50%}.nw .current{width:29%}.nw .current img{top:-.4375em}.main{width:78%;margin-top:1.8%}.archive .main,.sn{margin-top:4%}.post{padding-top:0}.sn{width:22%}.sn ul{margin:0;padding:0 2.5% 0 0}.sn li{border-right:0;border-left-width:.625em;border-left-style:solid;float:none;margin-bottom:0;padding-bottom:2.25em}.sn li a{font-size:1em;border:none;border-bottom:.08em solid transparent;padding:.25em .5em .25em 25%}.sn li ul{padding:0;margin-left:-.08em;display:block}.sn li ul li{padding-bottom:0;border:0}.sn li ul li a{margin-top:0;padding-left:25%;border:0}.sct{margin:0 0 1em;z-index:99}.menu-item-coding{border-left-color:#C9E9E5}.menu-item-design{border-left-color:#CDEEAA}.menu-item-mobile{border-left-color:#F9F0A8}.menu-item-graphics{border-left-color:#E0CFDF}.menu-item-uxdesign{border-left-color:#FACED2}.menu-item-wordpress{border-left-color:#BCD8F0}.cat{margin-top:0;padding-left:5.5%;padding-right:5.5%}.ch{margin-right:28.125em}}@media screen and (min-width:90.625em){.nw li,body{border:0}.ch,.nw,.nw li{float:none}.tn{float:left;width:10%}.nw{width:auto}.nw li{border-bottom:.08em solid rgba(0,0,0,.1)}.nw li a{padding:1em 0 1em 1.375em}.nw .current{margin:.6em 0 0;width:auto;box-shadow:none}.nw .current a{padding:1.5em 0 1em 1.5em;height:auto}.nw .current img{top:0;left:-.5em}.ch{margin:1.25em 0 0 .875em}.ch li{margin-left:0;margin-right:.5em}.cc{width:90%;border-top:.625em solid transparent}.fluid{border-radius:0 .625em .625em}.grid{margin-top:2.3em}.side{top:0}.mise{top:1.65em;padding-bottom:1em}.sb .sf .sl{margin:1.5em 0 0;padding-top:0}}@media screen and (min-width:100em){body{font-size:1.15em}.post{padding-left:11%;padding-right:11%}.blocked{margin:1em 11%}.sn{margin-top:3.65%}.sn ul li ul{margin-left:-.08em}.ch{margin:1.5em 0 0 1.5em}.ad,.ch{font-size:.86957em}.wg{margin-left:-1.08696em}.cc{margin-right:-24.45652em}.fluid{margin-right:24.45652em}.side{width:22.82609em;padding-left:1.08696em}.bnnr-list .double{width:29.71015em}article p{padding:.75em 0}article li{padding:.5em 0}article img{max-width:27.17391em}.fwi img{max-width:100%}.cat{margin-left:5.5%}.pt{top:-.5em;right:-5em}}@media screen and (min-width:63.75em) and (max-width:70.3125em){.long{display:none}.short{display:block}}</style><script>!function(e){"use strict";function t(e,t,n){e.addEventListener?e.addEventListener(t,n,!1):e.attachEvent&&e.attachEvent("on"+t,n)}function n(t,n){return e.localStorage&&localStorage[t+"_content"]&&localStorage[t+"_file"]===n}function o(t,o){if(e.localStorage&&e.XMLHttpRequest)n(t,o)?r(localStorage[t+"_content"]):a(t,o);else{var i=l.createElement("link");i.href=o,i.id=t,i.rel="stylesheet",i.type="text/css",l.getElementsByTagName("head")[0].appendChild(i),l.cookie=t}}function a(e,t){var n=new XMLHttpRequest;n.open("GET",t,!0),n.onreadystatechange=function(){4===n.readyState&&200===n.status&&(r(n.responseText),localStorage[e+"_content"]=n.responseText,localStorage[e+"_file"]=t)},n.send()}function r(e){var t=l.createElement("style");t.setAttribute("type","text/css"),l.getElementsByTagName("head")[0].appendChild(t),t.styleSheet?t.styleSheet.cssText=e:t.innerHTML=e}var l=e.document,i=function(e,t,n){function o(e){return l.body?e():void setTimeout(function(){o(e)})}function a(){i.addEventListener&&i.removeEventListener("load",a),i.media=n||"all"}var r,i=l.createElement("link");if(t)r=t;else{var s=(l.body||l.getElementsByTagName("head")[0]).childNodes;r=s[s.length-1]}var c=l.styleSheets;i.rel="stylesheet",i.href=e,i.media="only x",o(function(){r.parentNode.insertBefore(i,t?r:r.nextSibling)});var d=function(e){for(var t=i.href,n=c.length;n--;)if(c[n].href===t)return e();setTimeout(function(){d(e)})};return i.addEventListener&&i.addEventListener("load",a),i.onloadcssdefined=d,d(a),i};"undefined"!=typeof exports?exports.loadCSS=i:e.loadCSS=i,e.loadLocalStorageCSS=function(a,r){n(a,r)||l.cookie.indexOf(a)>-1?o(a,r):t(e,"load",function(){o(a,r)})}}(this);</script>
<link rel="preload" href="https://www.smashingmagazine.com/wp-content/themes/smashing-magazine/assets/css/main.min.css?ver=6.4.7" as="style" onload="this.rel='stylesheet'" /><noscript><link rel='stylesheet' id='smash-main-css'  href='https://www.smashingmagazine.com/wp-content/themes/smashing-magazine/assets/css/main.min.css?ver=6.4.7' type='text/css' media='all' />
</noscript><link rel='stylesheet' id='smash-print-css'  href='https://www.smashingmagazine.com/wp-content/themes/smashing-magazine/assets/css/print.min.css?ver=6.4.7' type='text/css' media='print' />
<script id="loadcss__smash-webfonts">loadLocalStorageCSS( "smash-webfonts", "https://www.smashingmagazine.com/wp-content/themes/smashing-magazine/assets/css/webfonts.min.css?ver=6.4.7" );</script><!--[if IE 8]>
<link rel='stylesheet' id='smash-ie8-css'  href='https://www.smashingmagazine.com/wp-content/themes/smashing-magazine/assets/css/ie8-nu.min.css?ver=6.4.7' type='text/css' media='all' />
<![endif]-->

<!-- This site is optimized with the Yoast SEO Premium plugin v3.5.2 - https://yoast.com/wordpress/plugins/seo/ -->
<meta name="description" content="Smashing Magazine — for web designers and developers"/>
<meta name="robots" content="noodp"/>
<link rel="canonical" href="https://www.smashingmagazine.com/" />
<link rel="next" href="https://www.smashingmagazine.com/page/2/" />
<link rel="publisher" href="https://plus.google.com/+SmashingMagazine‎"/>
<meta property="og:locale" content="en_US" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Smashing Magazine – for professional Web Designers and Developers" />
<meta property="og:description" content="Smashing Magazine, an online magazine for professional web designers and developers." />
<meta property="og:url" content="https://www.smashingmagazine.com/" />
<meta property="og:site_name" content="Smashing Magazine" />
<meta property="og:image" content="https://www.smashingmagazine.com/wp-content/themes/smashing-magazine/assets/images/logo.png" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:description" content="Smashing Magazine — for web designers and developers" />
<meta name="twitter:title" content="Smashing Magazine &ndash; For Professional Web Designers and Developers" />
<meta name="twitter:site" content="@smashingmag" />
<meta name="twitter:image" content="https://www.smashingmagazine.com/wp-content/themes/smashing-magazine/assets/images/logo.png" />
<script type='application/ld+json'>{"@context":"http:\/\/schema.org","@type":"WebSite","@id":"#website","url":"https:\/\/www.smashingmagazine.com\/","name":"Smashing Magazine","potentialAction":{"@type":"SearchAction","target":"https:\/\/www.smashingmagazine.com\/?s={search_term_string}","query-input":"required name=search_term_string"}}</script>
<script type='application/ld+json'>{"@context":"http:\/\/schema.org","@type":"Organization","url":"https:\/\/www.smashingmagazine.com\/","sameAs":["https:\/\/www.facebook.com\/smashmag","https:\/\/plus.google.com\/+SmashingMagazine\u200e","https:\/\/de.pinterest.com\/smashingmag\/","https:\/\/twitter.com\/smashingmag"],"@id":"#organization","name":"Smashing Magazine GmbH","logo":"https:\/\/www.smashingmagazine.com\/wp-content\/uploads\/2012\/01\/Smashing_Magazine_400px_none_transparent.jpg"}</script>
<meta name="msvalidate.01" content="6E3AD52DC176461A3C81DD6E98003BC9" />
<meta name="google-site-verification" content="Vp5UjGilSfUglp8YiGjmEKYJO0CJ_sq46Qb3ZLSkquU" />
<meta name="p:domain_verify" content="d27f31905fae396258db66606e24b768" />
<!-- / Yoast SEO Premium plugin. -->

<link rel="alternate" type="application/rss+xml" title="Smashing Magazine &raquo; Feed" href="https://www.smashingmagazine.com/feed/" />
<link rel="alternate" type="application/rss+xml" title="Smashing Magazine &raquo; Comments Feed" href="https://www.smashingmagazine.com/comments/feed/" />

<script type='text/javascript'>
/* <![CDATA[ */
var SmashingServiceWorkerData = {"url":"https:\/\/www.smashingmagazine.com\/serviceWorker.js"};
/* ]]> */
</script>
<script>
var SmashingServiceWorkerData=SmashingServiceWorkerData||{url:""};(function(a,b){if(b.url&&"serviceWorker" in a){a.serviceWorker.register(b.url);window.addEventListener("load",function(){if(a.serviceWorker.controller){a.serviceWorker.controller.postMessage({command:"trimCaches"})}})}})(navigator,SmashingServiceWorkerData);
</script>
<!--[if IE 8]>
<script type='text/javascript' src='https://www.smashingmagazine.com/wp-content/themes/smashing-magazine/assets/js/html5shiv.min.js?ver=6.4.7'></script>
<![endif]-->
<link rel='https://api.w.org/' href='https://www.smashingmagazine.com/wp-json/' />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="https://www.smashingmagazine.com/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="https://www.smashingmagazine.com/wp-includes/wlwmanifest.xml" /> 
<!-- Stream WordPress user activity plugin v3.0.7 -->
<link rel="manifest" href="/manifest.json">	<script>
	dataLayer = [
		{
			'site': {"ID":"1","name":"Smashing Magazine","home":"https:\/\/www.smashingmagazine.com"},
			'user': {"isLoggedIn":false,"ID":0,"role":"visitor"}		}
	];
</script>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
		new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
		j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
		'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
	})(window,document,'script','dataLayer','GTM-NWC9FPF');
</script>

	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="mask-icon" href="https://www.smashingmagazine.com/wp-content/themes/smashing-magazine/assets/images/s.svg" color="#e53b2c" sizes="any" />
<!--[if IE]><link href="https://www.smashingmagazine.com/wp-content/themes/smashing-magazine/assets/images/favicon.ico" rel="icon" /><![endif]-->
<link rel="icon" href="https://www.smashingmagazine.com/wp-content/themes/smashing-magazine/assets/images/favicon.png" />
<meta name="application-name" content="Smashing Magazine" />
<meta name="msapplication-TileColor" content="#fff" />
<meta name="msapplication-square70x70logo" content="https://www.smashingmagazine.com/wp-content/themes/smashing-magazine/assets/images/smashing-windows-icon-70-70.png" />
<meta name="msapplication-square150x150logo" content="https://www.smashingmagazine.com/wp-content/themes/smashing-magazine/assets/images/smashing-windows-icon-150-150.png" />
<meta name="msapplication-wide310x150logo" content="https://www.smashingmagazine.com/wp-content/themes/smashing-magazine/assets/images/smashing-windows-icon-310-150.png" />
<meta name="msapplication-square310x310logo" content="https://www.smashingmagazine.com/wp-content/themes/smashing-magazine/assets/images/smashing-windows-icon-310-310.png" />
<meta name="msapplication-notification" content="frequency=30;polling-uri1=http://notifications.buildmypinnedsite.com/?feed=https://www.smashingmagazine.com/feed/&amp;id=1;polling-uri2=http://notifications.buildmypinnedsite.com/?feed=https://www.smashingmagazine.com/feed/&amp;id=2;polling-uri3=http://notifications.buildmypinnedsite.com/?feed=https://www.smashingmagazine.com/feed/&amp;id=3;polling-uri4=http://notifications.buildmypinnedsite.com/?feed=https://www.smashingmagazine.com/feed/&amp;id=4;cycle=1" />
<link rel="apple-touch-icon-precomposed" href="https://www.smashingmagazine.com/wp-content/themes/smashing-magazine/assets/images/apple-touch-icon-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="https://www.smashingmagazine.com/wp-content/themes/smashing-magazine/assets/images/apple-touch-icon-57x57-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://www.smashingmagazine.com/wp-content/themes/smashing-magazine/assets/images/apple-touch-icon-72x72-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://www.smashingmagazine.com/wp-content/themes/smashing-magazine/assets/images/apple-touch-icon-114x114-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://www.smashingmagazine.com/wp-content/themes/smashing-magazine/assets/images/apple-touch-icon-144x144-precomposed.png" />
</head>
<body id="top" class="home blog www-section">
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-NWC9FPF" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<div class="mnb">
	<a href="#mn" class="ntb js-toggle-btn" title="Jump to the main navigation">
		Menu	</a>
	<a href="#ms" class="stb js-toggle-btn" title="Jump to the search">
		Search    </a>
</div><a class="sr" href="#content">Jump to the content</a>
<header class="h" role="banner">
	<h1 class="logo">
		<span class="sr">Smashing Magazine</span>
		<a href="https://www.smashingmagazine.com/"><img src="https://www.smashingmagazine.com/wp-content/themes/smashing-magazine/assets/images/logo.png" alt="Smashing Magazine Logo" srcset="https://media-mediatemple.netdna-ssl.com/wp-content/themes/smashing-magazine/assets/images/logo.svg" /></a>
	</h1>
</header>
<nav class="mn" id="mn" role="navigation menu">
	<h2>Smashing Pages:</h2>
	 <ul id="menu-smashing-mobile-network" class="mnu"><li id="menu-item-218248" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-218248 menu-item-books"><a href="https://www.smashingmagazine.com/books/">Books</a></li>
<li id="menu-item-218249" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-218249 menu-item-tickets"><a href="https://www.smashingmagazine.com/workshops/">Tickets</a></li>
<li id="menu-item-219109" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-219109 menu-item-shop"><a href="https://shop.smashingmagazine.com/">Shop</a></li>
<li id="menu-item-188959" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-188959 menu-item-email-newsletter"><a href="https://www.smashingmagazine.com/the-smashing-newsletter/">Email Newsletter</a></li>
<li id="menu-item-188961" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-188961 menu-item-jobs"><a href="http://jobs.smashingmagazine.com">Jobs</a></li>
<li id="menu-item-188958" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-188958 menu-item-about-us-impressum"><a href="https://www.smashingmagazine.com/about/">About us / Impressum</a></li>
</ul>	<h2>Categories:</h2>
	 <ul id="menu-mobile-categories" class="mnu"><li id="menu-item-181575" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-181575 menu-item-coding"><a href="https://www.smashingmagazine.com/category/coding/">Coding</a></li>
<li id="menu-item-181576" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-181576 menu-item-design"><a href="https://www.smashingmagazine.com/category/design/">Design</a></li>
<li id="menu-item-181580" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-181580 menu-item-mobile"><a href="https://www.smashingmagazine.com/category/mobile/">Mobile</a></li>
<li id="menu-item-181579" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-181579 menu-item-graphics"><a href="https://www.smashingmagazine.com/category/graphics/">Graphics</a></li>
<li id="menu-item-181577" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-181577 menu-item-ux-design"><a href="https://www.smashingmagazine.com/category/uxdesign/">UX Design</a></li>
<li id="menu-item-181578" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-181578 menu-item-wordpress"><a href="https://www.smashingmagazine.com/category/wordpress/"><span class="long"><span>Word</span><span>Press</span></span><span class="short">WP</span></a></li>
</ul></nav>
<a class="mnc js-toggle-btn" href="#top" data-toggle-target="mn" title="Close the navigation">X</a><div class="ms" id="ms" role="search">
  <form id="mobile-searching" class="sfm clearfix" method="get" action="https://www.smashingmagazine.com/search-results/" target="_top">
    <label for="mobile-search-input">Search on Smashing Magazine</label>
    <input name="q" id="mobile-search-input" type="text" placeholder="e.g. CSS" />
    <button class="submit" type="submit">Search</button>
    <input type="hidden" name="cx" value="partner-pub-6779860845561969:5884617103">
    <input type="hidden" name="cof" value="FORID:10">
    <input type="hidden" name="ie" value="UTF-8">
  </form>
</div>
<a role="button" class="msc js-toggle-btn" href="#top" data-toggle-target="ms" title="Close the search">X</a>
<nav class="tn clearfix" role="navigation">
	 <ul id="menu-network-menu" class="nw clearfix"><li class="current"><a href="https://www.smashingmagazine.com"><img src="https://www.smashingmagazine.com/wp-content/themes/smashing-magazine/assets/images/logo.png" alt="Smashing Magazine" srcset="https://media-mediatemple.netdna-ssl.com/wp-content/themes/smashing-magazine/assets/images/logo.svg"  /></a></li><li id="menu-item-218245" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-218245 menu-item-books"><a href="https://www.smashingmagazine.com/books/">Books</a></li>
<li id="menu-item-231721" class="cody menu-item menu-item-type-custom menu-item-object-custom menu-item-231721 menu-item-ebooks"><a href="https://shop.smashingmagazine.com/products/the-smashing-library">eBooks</a></li>
<li id="menu-item-218696" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-218696 menu-item-tickets"><a href="https://www.smashingmagazine.com/smashing-workshops/">Tickets</a></li>
<li id="menu-item-231722" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-231722 menu-item-shop"><a href="https://shop.smashingmagazine.com/">Shop</a></li>
<li id="menu-item-2" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2 menu-item-jobs"><a href="http://jobs.smashingmagazine.com/">Jobs</a></li>
</ul><nav id="social-media-nav" role="menu">
  <ul class="ch">
  	<li class="rss">
	    <a href="https://www.smashingmagazine.com/feed/" title="Subscribe to our RSS-feed (120K)">RSS</a>
    </li>
  	<li class="fb">
	    <a href="//www.facebook.com/smashmag" title="Join our Facebook page! (267k)">Facebook</a>
    </li>
  	<li class="tw">
	    <a href="//twitter.com/smashingmag" title="Follow us on Twitter! (956k)">Twitter</a>
    </li>
  	<li class="nl">
	    <a href="https://www.smashingmagazine.com/the-smashing-newsletter/" title="Subscribe to our Email Newsletter (180k)">Newsletter</a>
    </li>
  </ul>
</nav>
</nav>
<main>
	<div class="cc">
		<div class="fluid clearfix">
			<div class="grid clearfix">
				<section class="mise sf clearfix" role="search">
	<form id="search_1" method="get" action="https://www.smashingmagazine.com/search-results/" target="_top">
    <label class="sl" for="searching_1">Search on Smashing Magazine</label>
		<input id="searching_1" name="q" type="text" placeholder="e.g. JavaScript" />
		<button class="search_submit" type="submit">Search</button>
		<input type="hidden" name="cx" value="partner-pub-6779860845561969:5884617103">
		<input type="hidden" name="cof" value="FORID:10">
		<input type="hidden" name="ie" value="UTF-8">
	</form>
</section>
				<div class="col sn">
					<div class="sct"><ul id="menu-category-menu" class="clearfix"><li id="menu-item-116" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-116 menu-item-coding"><a href="https://www.smashingmagazine.com/category/coding/">Coding</a>
<ul class="sub-menu">
	<li id="menu-item-2014" class="menu-item menu-item-type-taxonomy menu-item-object-post_tag menu-item-2014 menu-item-css"><a href="https://www.smashingmagazine.com/tag/css/">CSS</a></li>
	<li id="menu-item-134810" class="menu-item menu-item-type-taxonomy menu-item-object-post_tag menu-item-134810 menu-item-html"><a href="https://www.smashingmagazine.com/tag/html/">HTML</a></li>
	<li id="menu-item-2015" class="menu-item menu-item-type-taxonomy menu-item-object-post_tag menu-item-2015 menu-item-javascript"><a href="https://www.smashingmagazine.com/tag/javascript/">JavaScript</a></li>
	<li id="menu-item-2016" class="menu-item menu-item-type-taxonomy menu-item-object-post_tag menu-item-2016 menu-item-techniques"><a href="https://www.smashingmagazine.com/tag/techniques/">Techniques</a></li>
</ul>
</li>
<li id="menu-item-117" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-117 menu-item-design"><a href="https://www.smashingmagazine.com/category/design/">Design</a>
<ul class="sub-menu">
	<li id="menu-item-2017" class="menu-item menu-item-type-taxonomy menu-item-object-post_tag menu-item-2017 menu-item-web-design"><a href="https://www.smashingmagazine.com/tag/web-design/">Web Design</a></li>
	<li id="menu-item-231166" class="menu-item menu-item-type-taxonomy menu-item-object-post_tag menu-item-231166 menu-item-responsive"><a title="Responsive Web Design" href="https://www.smashingmagazine.com/tag/responsive-web-design/">Responsive</a></li>
	<li id="menu-item-2032" class="menu-item menu-item-type-taxonomy menu-item-object-post_tag menu-item-2032 menu-item-typography"><a href="https://www.smashingmagazine.com/tag/typography/">Typography</a></li>
	<li id="menu-item-2063" class="menu-item menu-item-type-taxonomy menu-item-object-post_tag menu-item-2063 menu-item-inspiration"><a href="https://www.smashingmagazine.com/tag/inspiration/">Inspiration</a></li>
</ul>
</li>
<li id="menu-item-119" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-119 menu-item-mobile"><a href="https://www.smashingmagazine.com/category/mobile/">Mobile</a>
<ul class="sub-menu">
	<li id="menu-item-142132" class="menu-item menu-item-type-taxonomy menu-item-object-post_tag menu-item-142132 menu-item-iphone-ipad"><a href="https://www.smashingmagazine.com/tag/ios/">iPhone &#038; iPad</a></li>
	<li id="menu-item-143596" class="menu-item menu-item-type-taxonomy menu-item-object-post_tag menu-item-143596 menu-item-android"><a href="https://www.smashingmagazine.com/tag/android/">Android</a></li>
	<li id="menu-item-143608" class="menu-item menu-item-type-taxonomy menu-item-object-post_tag menu-item-143608 menu-item-design-patterns"><a href="https://www.smashingmagazine.com/tag/design-patterns/">Design Patterns</a></li>
</ul>
</li>
<li id="menu-item-118" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-118 menu-item-graphics"><a href="https://www.smashingmagazine.com/category/graphics/">Graphics</a>
<ul class="sub-menu">
	<li id="menu-item-2264" class="menu-item menu-item-type-taxonomy menu-item-object-post_tag menu-item-2264 menu-item-photoshop"><a href="https://www.smashingmagazine.com/tag/photoshop/">Photoshop</a></li>
	<li id="menu-item-160" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-160 menu-item-fireworks"><a href="https://www.smashingmagazine.com/category/fireworks/">Fireworks</a></li>
	<li id="menu-item-2283" class="menu-item menu-item-type-taxonomy menu-item-object-post_tag menu-item-2283 menu-item-wallpapers"><a href="https://www.smashingmagazine.com/tag/wallpapers/">Wallpapers</a></li>
	<li id="menu-item-2305" class="menu-item menu-item-type-taxonomy menu-item-object-post_tag menu-item-2305 menu-item-freebies"><a href="https://www.smashingmagazine.com/tag/freebies/">Freebies</a></li>
</ul>
</li>
<li id="menu-item-120" class="menu-item-uxdesign menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-120 menu-item-ux-design"><a href="https://www.smashingmagazine.com/category/uxdesign/">UX Design</a>
<ul class="sub-menu">
	<li id="menu-item-143609" class="menu-item menu-item-type-taxonomy menu-item-object-post_tag menu-item-143609 menu-item-usability"><a href="https://www.smashingmagazine.com/tag/usability/">Usability</a></li>
	<li id="menu-item-143610" class="menu-item menu-item-type-taxonomy menu-item-object-post_tag menu-item-143610 menu-item-user-experience"><a href="https://www.smashingmagazine.com/tag/user-experience/">User Experience</a></li>
	<li id="menu-item-143611" class="menu-item menu-item-type-taxonomy menu-item-object-post_tag menu-item-143611 menu-item-ui-design"><a href="https://www.smashingmagazine.com/tag/ui/">UI Design</a></li>
	<li id="menu-item-143612" class="menu-item menu-item-type-taxonomy menu-item-object-post_tag menu-item-143612 menu-item-e-commerce"><a href="https://www.smashingmagazine.com/tag/e-commerce/">E-Commerce</a></li>
</ul>
</li>
<li id="menu-item-121" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-121 menu-item-wordpress"><a href="https://www.smashingmagazine.com/category/wordpress/"><span class="long"><span>Word</span><span>Press</span></span><span class="short">WP</span></a>
<ul class="sub-menu">
	<li id="menu-item-143677" class="menu-item menu-item-type-taxonomy menu-item-object-post_tag menu-item-143677 menu-item-essentials"><a href="https://www.smashingmagazine.com/tag/essentials/">Essentials</a></li>
	<li id="menu-item-143678" class="menu-item menu-item-type-taxonomy menu-item-object-post_tag menu-item-143678 menu-item-techniques"><a href="https://www.smashingmagazine.com/tag/techniques-wp/">Techniques</a></li>
	<li id="menu-item-143679" class="menu-item menu-item-type-taxonomy menu-item-object-post_tag menu-item-143679 menu-item-plugins"><a href="https://www.smashingmagazine.com/tag/plugins/">Plugins</a></li>
	<li id="menu-item-143680" class="menu-item menu-item-type-taxonomy menu-item-object-post_tag menu-item-143680 menu-item-themes"><a href="https://www.smashingmagazine.com/tag/themes/">Themes</a></li>
</ul>
</li>
</ul></div>				</div>
				<div id="content" class="col main">
					<div id="blocked" class="blocked clearfix">

	<figure style="max-width: 24%;min-width: 90px;">
		<a href="https://smashingconf.com">
			<img src="https://www.smashingmagazine.com/wp-content/uploads/2016/11/smashingconf-san-francisco-2017-1.png" alt="Smashing Conf San Francisco">
		</a>
	</figure>

	<p style="font-size: calc(1em + ((0.4vw + 0.25vh) / 2));">
		<strong>We use ad-blockers as well, you know.</strong> We gotta keep those servers running though.
		Did you know that we publish <a href="https://www.smashingmagazine.com/books/">useful books</a> and run
		<a href="https://www.smashingmagazine.com/smashing-workshops/">friendly conferences</a>
		— crafted for pros like yourself? E.g. upcoming <a href="https://smashingconf.com">SmashingConf San Francisco</a>,
		dedicated to smart front-end techniques and design patterns.
	</p>
</div>

<article  class="post-287401 post type-post status-publish format-standard has-post-thumbnail hentry category-general tag-web-development-reading-list" vocab="http://schema.org/" typeof="TechArticle">

		<h2>
		<a property="url" href="https://www.smashingmagazine.com/2017/03/web-development-reading-list-174/" rel="bookmark" title="Read 'Web Development Reading List #174: The Bricks We Lay, Remynification, And 0-RTT'"><span property="name">Web Development Reading List #174: The Bricks We Lay, Remynification, And 0-RTT</span></a>
	</h2>

	
<ul class="pmd clearfix">
	<li class="a" property="author" typeof="person" resource="#authorname">By <a href="https://www.smashingmagazine.com/author/anselm-hannemann/" title="Posts by Anselm Hannemann" rel="author">Anselm Hannemann</a></li>
				<li class="rd" property="datePublished" content="March 17th, 2017">March 17th, 2017</li>
				<li class="tags" property="keywords"><a href="https://www.smashingmagazine.com/tag/web-development-reading-list/">Web Development Reading List</a></li>
		<li class="comments" property="discussionUrl"><a href="https://www.smashingmagazine.com/2017/03/web-development-reading-list-174/#comments" title="Comment on Web Development Reading List #174: The Bricks We Lay, Remynification, And 0-RTT">1 Comment</a> </li>
		</ul>

	<p>We’re all designers. Whether we do a layout, a product design or write code to design a product technically doesn’t matter here. What does matter though, is that we always <strong>take the context of a project into consideration</strong>. Because as someone shaping a project so that it is appealing to the clients and works in the best way possible for the target audience, we have a pretty big responsibility.</p>
<figure><a href="https://www.smashingmagazine.com/2017/03/web-development-reading-list-174"><img src="https://www.smashingmagazine.com/wp-content/uploads/2017/03/0-rtt-500px-opt.png" width="500" height="278" alt="Web Development Reading List" /></a></figure>
<p>Imagine architects building a wall out of recycled material that also looks nice — sounds pretty great, right? But seen in the context that this will be a wall that divides people and encourages racism and even more inequality in our society, our first impression of the undertaking suddenly shifts into the opposite direction. We have to make new decisions every time we start a new project, and seeing things in context is crucial to live up to our responsibility — both in our work and our lives.</p>	<a href="https://www.smashingmagazine.com/2017/03/web-development-reading-list-174/" class="cr">Read more...</a>
</article>

<article  class="post-287359 post type-post status-publish format-standard hentry category-announcements category-events tag-redesign tag-responsive-web-design" vocab="http://schema.org/" typeof="TechArticle">

		<h2>
		<a property="url" href="https://www.smashingmagazine.com/2017/03/a-little-surprise-is-waiting-for-you-here/" rel="bookmark" title="Read 'A Little Surprise Is Waiting For You Here.'"><span property="name">A Little Surprise Is Waiting For You Here.</span></a>
	</h2>

	
<ul class="pmd clearfix">
	<li class="a" property="author" typeof="person" resource="#authorname">By <a href="https://www.smashingmagazine.com/author/vitaly-friedman/" title="Posts by Vitaly Friedman" rel="author">Vitaly Friedman</a></li>
				<li class="rd" property="datePublished" content="March 16th, 2017">March 16th, 2017</li>
				<li class="tags" property="keywords"><a href="https://www.smashingmagazine.com/tag/redesign/">Redesign</a><a href="https://www.smashingmagazine.com/tag/responsive-web-design/">Responsive Web Design</a></li>
		<li class="comments" property="discussionUrl"><a href="https://www.smashingmagazine.com/2017/03/a-little-surprise-is-waiting-for-you-here/#comments" title="Comment on A Little Surprise Is Waiting For You Here.">0 Comments</a> </li>
		</ul>

	<p>Smashing Magazine is changing: a new design, a new layout, a new technical stack, a new printed magazine, a new Smashing Membership, and the same good ol’ obsession with quality content. Here’s a <strong>sneak preview</strong> of what’s coming up.</p>

<figure><a href="https://www.smashingmagazine.com/2017/03/a-little-surprise-is-waiting-for-you-here"><img src="https://www.smashingmagazine.com/wp-content/uploads/2017/03/redesign-front-page-desktop-500w-opt.png" width="500" height="262" alt="A Little Surprise Is Waiting For You Here — Meet The Next Smashing Magazine" /></a></figure>

<p>Today marks an important milestone in Smashing Magazine’s life, and this very page is an <strong>early preview of what’s coming up next</strong>: many experiments, new challenges, but still a good ol’ obsession with quality content. A complete overhaul, both visually and technically, a fine new printed magazine, and a shiny new <em>Smashing Membership</em>, with nifty features and goodies for you, our lovely community. Curious? Well, fasten your seatbelt and <a href="https://next.smashingmagazine.com">browse around</a> — it’s going to be quite a journey!</p>	<a href="https://www.smashingmagazine.com/2017/03/a-little-surprise-is-waiting-for-you-here/" class="cr">Read more...</a>
</article>

<section class="hpa clearfix">
  <p class="awithus"><a class="ed-us" href="mailto:&#97;&#100;&#118;&#101;&#114;&#116;&#105;&#115;&#105;&#110;&#103;&#64;&#115;&#109;&#97;&#115;&#104;&#105;&#110;&#103;&#109;&#97;&#103;&#97;&#122;&#105;&#110;&#101;&#46;&#99;&#111;&#109;">Advertise with us!</a></p>
	<div class="oa_zone--ad hp_premium_ed" id="hp_premium_ed" data-ad-name="Homepage prem Ad" data-ad-zone="25" data-ad-media="all">
  </div>
</section>

<article id="jump" class="post-282812 post type-post status-publish format-standard hentry category-design tag-interfaces tag-tools tag-workflow" vocab="http://schema.org/" typeof="TechArticle">

		<h2>
		<a property="url" href="https://www.smashingmagazine.com/2017/03/beauty-imperfection-interface-design/" rel="bookmark" title="Read 'The Beauty Of Imperfection In Interface Design'"><span property="name">The Beauty Of Imperfection In Interface Design</span></a>
	</h2>

	
<ul class="pmd clearfix">
	<li class="a" property="author" typeof="person" resource="#authorname">By <a href="https://www.smashingmagazine.com/author/javiercuello/" title="Posts by Javier Cuello" rel="author">Javier Cuello</a></li>
				<li class="rd" property="datePublished" content="March 16th, 2017">March 16th, 2017</li>
				<li class="tags" property="keywords"><a href="https://www.smashingmagazine.com/tag/interfaces/">Interfaces</a><a href="https://www.smashingmagazine.com/tag/tools/">Tools</a><a href="https://www.smashingmagazine.com/tag/workflow/">Workflow</a></li>
		<li class="comments" property="discussionUrl"><a href="https://www.smashingmagazine.com/2017/03/beauty-imperfection-interface-design/#comments" title="Comment on The Beauty Of Imperfection In Interface Design">5 Comments</a> </li>
		</ul>

	<p>Sometimes we tend to think of our designs as if they are pieces of art. But if we think of them this way, it means they won’t be ready to face the uncertain conditions of the “real world.” However, there is also beauty in designing an interface that is <strong>ready for changes</strong> &mdash; and, let’s admit it, interfaces do change, all the time.</p>

<figure><a href="https://www.smashingmagazine.com/2017/03/beauty-imperfection-interface-design"><img src="https://www.smashingmagazine.com/wp-content/uploads/2017/03/google-calendar-layout-500w-opt.png" width="500" height="328" alt="The Beauty Of Imperfection In Interface Design" /></a></figure>

<p>One of the things I like most about designing a mobile app is that, from the initial concepts to the time when you are fine-tuning and polishing all of the interface details, this is a process with many steps.</p>	<a href="https://www.smashingmagazine.com/2017/03/beauty-imperfection-interface-design/" class="cr">Read more...</a>
</article>

<article  class="post-279067 post type-post status-publish format-standard hentry category-mobile tag-animation tag-apps tag-prototyping" vocab="http://schema.org/" typeof="TechArticle">

		<h2>
		<a property="url" href="https://www.smashingmagazine.com/2017/03/prototype-code-custom-pull-to-refresh-gesture-animation/" rel="bookmark" title="Read 'Prototype And Code: Creating A Custom Pull-To-Refresh Gesture Animation'"><span property="name">Prototype And Code: Creating A Custom Pull-To-Refresh Gesture Animation</span></a>
	</h2>

	
<ul class="pmd clearfix">
	<li class="a" property="author" typeof="person" resource="#authorname">By <a href="https://www.smashingmagazine.com/author/ellinabereza/" title="Posts by Ellina Bereza &#038; Simon Bronnikov" rel="author">Ellina Bereza &#38; Simon Bronnikov</a></li>
				<li class="rd" property="datePublished" content="March 15th, 2017">March 15th, 2017</li>
				<li class="tags" property="keywords"><a href="https://www.smashingmagazine.com/tag/animation/">Animation</a><a href="https://www.smashingmagazine.com/tag/apps/">Apps</a><a href="https://www.smashingmagazine.com/tag/prototyping/">Prototyping</a></li>
		<li class="comments" property="discussionUrl"><a href="https://www.smashingmagazine.com/2017/03/prototype-code-custom-pull-to-refresh-gesture-animation/#comments" title="Comment on Prototype And Code: Creating A Custom Pull-To-Refresh Gesture Animation">2 Comments</a> </li>
		</ul>

	<p>Pull-to-refresh is one of the most popular gestures in mobile applications right now. It’s easy to use, natural and so intuitive that it is hard to imagine refreshing a page without it. In 2010, Loren Brichter created Tweetie, one of numerous Twitter applications. Diving into the pool of similar applications, you won’t see much difference among them; but Loren’s Tweetie stood out then.</p>

<figure><a href="https://www.smashingmagazine.com/2017/03/prototype-code-custom-pull-to-refresh-gesture-animation"><img src="https://www.smashingmagazine.com/wp-content/uploads/2017/03/pull-to-refresh-500w-opt.png" width="500" height="271" alt="Prototype And Code: Creating A Custom Pull-To-Refresh Gesture Animation" /></a></figure>

<p>It was one simple animation that changed the game — pull-to-refresh, an absolute innovation for the time. No wonder Twitter didn’t hesitate to buy Tweetie and hire Loren Brichter. Wise choice! As time went on, <strong>more and more developers integrated this gesture</strong> into their applications, and finally, Apple itself brought pull-to-refresh to its system application Mail, to the joy of people who value usability.</p>	<a href="https://www.smashingmagazine.com/2017/03/prototype-code-custom-pull-to-refresh-gesture-animation/" class="cr">Read more...</a>
</article>

<article  class="post-282200 post type-post status-publish format-standard has-post-thumbnail hentry category-coding category-workflow-2 tag-javascript tag-node-js" vocab="http://schema.org/" typeof="TechArticle">

		<h2>
		<a property="url" href="https://www.smashingmagazine.com/2017/03/interactive-command-line-application-node-js/" rel="bookmark" title="Read 'How To Develop An Interactive Command Line Application Using Node.js'"><span property="name">How To Develop An Interactive Command Line Application Using Node.js</span></a>
	</h2>

	
<ul class="pmd clearfix">
	<li class="a" property="author" typeof="person" resource="#authorname">By <a href="https://www.smashingmagazine.com/author/niharsawant/" title="Posts by Nihar Sawant" rel="author">Nihar Sawant</a></li>
				<li class="rd" property="datePublished" content="March 14th, 2017">March 14th, 2017</li>
				<li class="tags" property="keywords"><a href="https://www.smashingmagazine.com/tag/javascript/">JavaScript</a><a href="https://www.smashingmagazine.com/tag/node-js/">Node.js</a></li>
		<li class="comments" property="discussionUrl"><a href="https://www.smashingmagazine.com/2017/03/interactive-command-line-application-node-js/#comments" title="Comment on How To Develop An Interactive Command Line Application Using Node.js">10 Comments</a> </li>
		</ul>

	<p>Over the last five years, Node.js has helped to bring uniformity to software development. You can do anything in Node.js, whether it be front-end development, server-side scripting, cross-platform desktop applications, cross-platform mobile applications, Internet of Things, you name it. <strong>Writing command line tools has also become easier than ever before because of Node.js</strong> — not just any command line tools, but tools that are interactive, useful and less time-consuming to develop.</p>

<figure><a href="https://www.smashingmagazine.com/2017/03/interactive-command-line-application-node-js"><img src="https://www.smashingmagazine.com/wp-content/uploads/2011/09/nodejs-023.jpg" width="500" height="300" alt="How To Develop An Interactive Command Line Application Using Node.js" /></a></figure>

<p>If you are a front-end developer, then you must have heard of or worked on Gulp, Angular CLI, Cordova, Yeoman and others. Have you ever wondered how they work?</p>	<a href="https://www.smashingmagazine.com/2017/03/interactive-command-line-application-node-js/" class="cr">Read more...</a>
</article>

<article  class="post-285681 post type-post status-publish format-standard hentry category-uxdesign tag-clients tag-user-experience" vocab="http://schema.org/" typeof="TechArticle">

		<h2>
		<a property="url" href="https://www.smashingmagazine.com/2017/03/spark-ux-revolution/" rel="bookmark" title="Read 'How To Spark A UX Revolution'"><span property="name">How To Spark A UX Revolution</span></a>
	</h2>

	
<ul class="pmd clearfix">
	<li class="a" property="author" typeof="person" resource="#authorname">By <a href="https://www.smashingmagazine.com/author/paul-boag/" title="Posts by Paul Boag" rel="author">Paul Boag</a></li>
				<li class="rd" property="datePublished" content="March 14th, 2017">March 14th, 2017</li>
				<li class="tags" property="keywords"><a href="https://www.smashingmagazine.com/tag/clients/">Clients</a><a href="https://www.smashingmagazine.com/tag/user-experience/">User Experience</a></li>
		<li class="comments" property="discussionUrl"><a href="https://www.smashingmagazine.com/2017/03/spark-ux-revolution/#comments" title="Comment on How To Spark A UX Revolution">3 Comments</a> </li>
		</ul>

	<p><strong>Editor's Note</strong>: <em>Making big changes doesn't necessarily require big efforts &mdash; it's just a matter of moving in the right direction. We can't wait for Paul's new book on <a href="https://www.smashingmagazine.com/user-experience-revolution/">User Experience Revolution</a> (free worldwide shipping starting from April 18!), and in this article, Paul shares just some of the little tricks and techniques to bring around a big UX revolution into your company &mdash; with a series of small, effective steps.</em></p>

<p>It feels like everywhere I turn somebody is saying that user experience is the next frontier in business, that we have moved beyond the age of features to creating outstanding experiences.</p>

<figure><a href="https://www.smashingmagazine.com/2017/03/spark-ux-revolution"><img src="https://www.smashingmagazine.com/wp-content/uploads/2014/03/digital-adaptation-4.jpg" width="500" height="261" alt="How To Spark A UX Revolution" /></a></figure>

<p>But for many of us who work on in-house teams, <strong>the reality feels a million miles</strong> away from this. Getting management to understand the importance of <a href="https://www.smashingmagazine.com/2010/10/what-is-user-experience-design-overview-tools-and-resources/">user experience</a> seems so tough. Even colleagues don't seem to see the benefit. For those of us in-house, how are we going to get to this golden age of user experience design that people keep promising us?</p>	<a href="https://www.smashingmagazine.com/2017/03/spark-ux-revolution/" class="cr">Read more...</a>
</article>

<article  class="post-284486 post type-post status-publish format-standard hentry category-general category-global-web-design tag-clients tag-global-web-design tag-responsive-web-design tag-user-research" vocab="http://schema.org/" typeof="TechArticle">

		<h2>
		<a property="url" href="https://www.smashingmagazine.com/2017/03/world-wide-web-not-wealthy-western-web-part-2/" rel="bookmark" title="Read 'World Wide Web, Not Wealthy Western Web (Part 2)'"><span property="name">World Wide Web, Not Wealthy Western Web (Part 2)</span></a>
	</h2>

	
<ul class="pmd clearfix">
	<li class="a" property="author" typeof="person" resource="#authorname">By <a href="https://www.smashingmagazine.com/author/bruce-lawson/" title="Posts by Bruce Lawson" rel="author">Bruce Lawson</a></li>
				<li class="rd" property="datePublished" content="March 13th, 2017">March 13th, 2017</li>
				<li class="tags" property="keywords"><a href="https://www.smashingmagazine.com/tag/clients/">Clients</a><a href="https://www.smashingmagazine.com/tag/global-web-design/">Global Web Design</a><a href="https://www.smashingmagazine.com/tag/responsive-web-design/">Responsive Web Design</a></li>
		<li class="comments" property="discussionUrl"><a href="https://www.smashingmagazine.com/2017/03/world-wide-web-not-wealthy-western-web-part-2/#comments" title="Comment on World Wide Web, Not Wealthy Western Web (Part 2)">17 Comments</a> </li>
		</ul>

	<p>In <a href="https://www.smashingmagazine.com/2017/03/world-wide-web-not-wealthy-western-web-part-1/">part 1</a> of this article, we looked at where in the world the new entrants to the World Wide Web are, and some of the new technologies the standards community has worked on to address some of the challenges that the next 4 billion people are facing when accessing the web. In short, we've tried to make some supply-side improvements to web standards so that <strong>websites can be made to better serve the whole world</strong>, not just the wealthy West.</p>

<figure><a href="https://www.smashingmagazine.com/2017/03/world-wide-web-not-wealthy-western-web-part-2"><img src="https://www.smashingmagazine.com/wp-content/uploads/2017/03/mobile-phones-world-graphy-opt.png" width="500" height="279" alt="World Wide Web, Not Wealthy Western Web (Part 2)" /></a></figure>

<p>But there are other challenges to surmount, such as ways to get over creaky infrastructure in developing markets (which can be done with stopgap technological solutions, such as proxy browsers), and we'll also look at some of the reasons why some of the offline billions remain offline, and what can be done to address this.</p>	<a href="https://www.smashingmagazine.com/2017/03/world-wide-web-not-wealthy-western-web-part-2/" class="cr">Read more...</a>
</article>

<article  class="post-286694 post type-post status-publish format-standard has-post-thumbnail hentry category-general tag-web-development-reading-list" vocab="http://schema.org/" typeof="TechArticle">

		<h2>
		<a property="url" href="https://www.smashingmagazine.com/2017/03/web-development-reading-list-173/" rel="bookmark" title="Read 'Web Development Reading List #173: CSS Grid Support, A Virtual DOM Alternative, And Designing Better Cards'"><span property="name">Web Development Reading List #173: CSS Grid Support, A Virtual DOM Alternative, And Designing Better Cards</span></a>
	</h2>

	
<ul class="pmd clearfix">
	<li class="a" property="author" typeof="person" resource="#authorname">By <a href="https://www.smashingmagazine.com/author/anselm-hannemann/" title="Posts by Anselm Hannemann" rel="author">Anselm Hannemann</a></li>
				<li class="rd" property="datePublished" content="March 10th, 2017">March 10th, 2017</li>
				<li class="tags" property="keywords"><a href="https://www.smashingmagazine.com/tag/web-development-reading-list/">Web Development Reading List</a></li>
		<li class="comments" property="discussionUrl"><a href="https://www.smashingmagazine.com/2017/03/web-development-reading-list-173/#comments" title="Comment on Web Development Reading List #173: CSS Grid Support, A Virtual DOM Alternative, And Designing Better Cards">4 Comments</a> </li>
		</ul>

	<p>This week was a big week in terms of web development news. We got much <strong>broader support for CSS Grids</strong> and Web Assembly, for example, but I also stumbled across some great resources that teach us a lot of valuable things.</p>
<figure><a href="https://www.smashingmagazine.com/2017/03/web-development-reading-list-173/"><img src="https://www.smashingmagazine.com/wp-content/uploads/2017/03/grid-500px-opt.png" width="500" height="376" alt="Web Development Reading List 173" /></a></figure>
<p>With this Web Development Reading List, we’ll dive deep into security and privacy issues, take a look at a lightweight virtual DOM alternative, and get insights into how we can overcome our biases (or at least how we can better deal with them). So without further ado, let’s dive right in!</p>	<a href="https://www.smashingmagazine.com/2017/03/web-development-reading-list-173/" class="cr">Read more...</a>
</article>

<article  class="post-285667 post type-post status-publish format-standard has-post-thumbnail hentry category-freebies-category tag-freebies" vocab="http://schema.org/" typeof="TechArticle">

		<h2>
		<a property="url" href="https://www.smashingmagazine.com/2017/03/free-sparkly-icons-ballicons-eps-svg/" rel="bookmark" title="Read 'Free Sparkly Icons To (Literally) Make Your Designs Shine (30 Icons, EPS, SVG)'"><span property="name">Free Sparkly Icons To (Literally) Make Your Designs Shine (30 Icons, EPS, SVG)</span></a>
	</h2>

	
<ul class="pmd clearfix">
	<li class="a" property="author" typeof="person" resource="#authorname">By <a href="https://www.smashingmagazine.com/author/cosima-mielke/" title="Posts by Cosima Mielke" rel="author">Cosima Mielke</a></li>
				<li class="rd" property="datePublished" content="March 10th, 2017">March 10th, 2017</li>
				<li class="tags" property="keywords"><a href="https://www.smashingmagazine.com/tag/freebies/">Freebies</a></li>
		<li class="comments" property="discussionUrl"><a href="https://www.smashingmagazine.com/2017/03/free-sparkly-icons-ballicons-eps-svg/#comments" title="Comment on Free Sparkly Icons To (Literally) Make Your Designs Shine (30 Icons, EPS, SVG)">1 Comment</a> </li>
		</ul>

	<p>What would life be without surprises? Pretty plain, wouldn’t you agree? Today, we are happy to announce a freebie that bubbles over with its friendly optimistic spirit, bound to sprinkle some <strong>unexpected sparks of delight</strong> into your projects: Ballicons 3. If that name rings a bell, well, it’s the third iteration of the <a href="https://www.smashingmagazine.com/2014/06/freebie-ballicons-2-icon-set-png-psd-svg/">previous Ballicons icon set</a> created by the folks at <em>Pixel Buddha</em>.</p>

<figure><a href="https://www.smashingmagazine.com/2017/03/free-sparkly-icons-ballicons-eps-svg"><img src="https://www.smashingmagazine.com/wp-content/uploads/2017/03/ballicons-cover-500px-opt.png" alt="Ballicons 3" width="500" height="333" /></a></figure>

<p>This icon set covers a vibrant potpourri of subjects, 30 icons ranging from nature, travel and leisure motifs to tech and office. All icons are available in five formats (AI, EPS, PSD, SVG, and PNG) so you can resize and customize them until they match your project’s visual style perfectly. No matter if you like it bright and bubbly or rather sleek and simple — the set has the makings to become a real allrounder in your digital tool belt.</p>	<a href="https://www.smashingmagazine.com/2017/03/free-sparkly-icons-ballicons-eps-svg/" class="cr">Read more...</a>
</article>
<div class="pgn clearfix"><span class="prv"></span><div class="pgs clearfix"><span class="current">1</span><a href="https://www.smashingmagazine.com/page/2/" class="page">2</a><a href="https://www.smashingmagazine.com/page/3/" class="page">3</a><a href="https://www.smashingmagazine.com/page/4/" class="page">4</a><a href="https://www.smashingmagazine.com/page/5/" class="page">5</a><a href="https://www.smashingmagazine.com/page/6/" class="page">6</a></div><span class="nxt"><a href="https://www.smashingmagazine.com/page/2/" >next &raquo;</a></span></div>			</div>		</div>		<p><a href="#top" class="top" title="Jump to the top of the page">&uarr; Back to top</a></p>
	</div></div></main>
<aside id="wpsidebar" class="sb" role="complementary">
	<div class="col side">
		<section class="mise sf clearfix" role="search">
	<form id="search_2" method="get" action="https://www.smashingmagazine.com/search-results/" target="_top">
    <label class="sl" for="searching_2">Search on Smashing Magazine</label>
		<input id="searching_2" name="q" type="text" placeholder="e.g. JavaScript" />
		<button class="search_submit" type="submit">Search</button>
		<input type="hidden" name="cx" value="partner-pub-6779860845561969:5884617103">
		<input type="hidden" name="cof" value="FORID:10">
		<input type="hidden" name="ie" value="UTF-8">
	</form>
</section>

		<section class="bw faw">
  <p class="awithus">
      <a class="ed-us" href="mailto:s&#112;&#111;nso&#114;&#105;ng&#64;&#115;&#109;&#97;&#115;&#104;in&#103;&#109;&#97;&#103;a&#122;ine&#46;&#99;om">
	      Become a sponsor!      </a>
  </p>
  <div id="spnsrlist-a" class="oa_zone--sponsor" data-sponsor-lines="1"></div>
</section>
		
<section class="sf wg">
  <h3>
    <a href="https://www.smashingmagazine.com/the-smashing-newsletter/">
      <img src="https://www.smashingmagazine.com/wp-content/themes/smashing-magazine/assets/images/smnl.png" alt="198,064 fine folks have signed up to our Newsletter already, when will you?" />
      Smashing Newsletter
    </a>
  </h3>
  <p>Subscribe to our email newsletter for useful tips and valuable resources, sent out every second Tuesday.</p>
  <div id="mc_embed_signup" class="mcf">
    <form action="//smashingmagazine.us1.list-manage.com/subscribe/post?u=16b832d9ad4b28edf261f34df&amp;id=a1666656e0" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate">
      <label for="mcer-EMAIL" class="sr">Please provide us with your email address:</label>
      <input id="mcer-EMAIL" name="email" autocomplete="email" type="text" placeholder="email address" />
      <button id="mc-embedded-subscribe" name="subscribe" class="submit" type="submit">Subscribe</button>
    </form>
    <a href="https://www.smashingmagazine.com/the-smashing-newsletter/"><img class="mcc" src="https://www.smashingmagazine.com/wp-content/themes/smashing-magazine/assets/images/mc-counter.svg" alt="Currently, we have 191728 subscribers to our newsletter" /></a>
  </div>
</section>

		<section class="bw">
  <div id="spnsrlist-b" class="oa_zone--sponsor" data-sponsor-lines="3"></div>
</section>

		<section class="so wg">
	<div class="fir">
		<a href="https://www.smashingmagazine.com/2015/03/31/real-life-responsive-web-design-smashing-book-5/?utm_source=magazine&utm_medium=sidebar-ad&utm_campaign=sb5" style="border:0;">
			<img src="https://www.smashingmagazine.com/wp-content/themes/smashing-magazine/assets/images/sidebar-sb5.png" alt="The Smashing Book #5" width="94" height="135">
		</a>
		<p>
			Smashing Book 5: "Real-Life Responsive Web Design", our playbook to master all the tricky facets and hurdles of <strong>responsive web design</strong>. Gorgeous hardcover with 584 pages. The eBook is included. Free worldwide shipping. <a href="https://www.smashingmagazine.com/2015/03/31/real-life-responsive-web-design-smashing-book-5/?utm_source=magazine&utm_medium=sidebar-ad&utm_campaign=sb5">Get your book now!</a>
		</p>
	</div>
	<div class="sec">
		<a href="https://www.smashingmagazine.com/inclusive-design-patterns" style="border: 0;">
			<img src="https://www.smashingmagazine.com/wp-content/themes/smashing-magazine/assets/images/inclusive-design-patterns.png" alt="Inclusive Design Patterns by Heydon Pickering" width="94" height="135">
		</a>
		<p>
			Today, too many websites are still inaccessible. In our new book <em>Inclusive Design Patterns</em>, we explore how to craft <strong>flexible front-end design patterns</strong> and make future-proof and accessible interfaces without extra effort. Hardcover, 312 pages. <a href="https://www.smashingmagazine.com/inclusive-design-patterns">Get the book →</a>
		</p>
	</div>
	<div class="thi">
		<a href="https://www.smashingmagazine.com/sketch-handbook" style="border:0;">
			<img src="https://www.smashingmagazine.com/wp-content/uploads/2016/11/sketch-handbook-sidebar-opt-v2.png" alt="The Sketch Handbook, with tips and tricks for designing with Sketch." width="94" height="142"></a>
		<p>Meet the new <em>Sketch Handbook</em>, our brand <strong>new Smashing book</strong> that will help you master all the tricky, advanced facets of Sketch. Filled with <strong>practical examples and tutorials in 12 chapters</strong>, the book will help you become more proficient in your work. <a href="https://www.smashingmagazine.com/sketch-handbook">Get the book</a>.</p>
	</div>

</section>


		<section class="bw">
  <div id="spnsrlist-c" class="oa_zone--sponsor" data-sponsor-lines="2"></div>
</section>

		<section class="mt wg">
  <a href="http://mediatemple.net">
    <img data-src="https://www.smashingmagazine.com/wp-content/themes/smashing-magazine/assets/images/mediatemple.svg" alt="Media Temple Logo" width="94" height="94" />
  </a>
  <p>We are proudly hosted on<br /><a href="http://mediatemple.net/webhosting/vps/dedicated-server/">Media Temple Dedicated Servers</a>. Performance matters.</p>
</section>

		<section>
	<div class="oa_zone--ad" id="sidebar_special-1" data-ad-name="Sidebar Special 1" data-ad-zone="72"></div>
</section>
<section>
	<div class="oa_zone--ad" id="sidebar_special-2" data-ad-name="Sidebar Special 2" data-ad-zone="72"></div>
</section>
<section>
	<div class="oa_zone--ad" id="sidebar_special-3" data-ad-name="Sidebar Special 3" data-ad-zone="72"></div>
</section>
<section>
	<div class="oa_zone--ad" id="sidebar_special-4" data-ad-name="Sidebar Special 4" data-ad-zone="72"></div>
</section>

		
<section class="wg">
	<div id="jobs">
		<h3>
			<a href="http://jobs.smashingmagazine.com/?pk_campaign=sm&amp;piwik_kwd=widget">
				<span>Smashing Job Board</span>
				<img data-src="https://www.smashingmagazine.com/wp-content/themes/smashing-magazine/assets/images/sm-jobs.png" alt="Smashing Jobs" width="36" height="34" />
			</a>
		</h3>
		<ul class="tl"><li class="clearfix"><a href="http://feedproxy.google.com/~r/smjobs/~3/JCmrYNnAoIo/2476674">Senior Experience Design / UXD – Financial Industry  - Logic State LLC - (New York) - Freelance</a><p>This is a full time contract position. Logic State’s client base is predominantly composed of banking and insurance industry clients.  Candidates that possess expe...</p></li><li class="clearfix"><a href="http://feedproxy.google.com/~r/smjobs/~3/khYNfq6joyg/2476617">Front-end designer - We Make Websites - (London) - FullTime</a><p>We Make Websites make the best fashion and e-commerce websites on the internet and we are looking to expand our in-house talent to match client demand.&#013;
&#013;
...</p></li></ul>		<a class="cr" href="http://jobs.smashingmagazine.com?pk_campaign=sm&amp;piwik_kwd=widget">
			View more job openings&hellip;		</a>
	</div>
</section>

		<section class="clearfix">
	<div class="oa_zone--ad sidebar_sky" id="sidebar_sky-1" data-ad-name="Sidebar 1" data-ad-zone="40"></div>
</section>

<section class="clearfix">
	<div class="oa_zone--ad sidebar_sky" id="sidebar_sky-2" data-ad-name="Sidebar 2" data-ad-zone="40"></div>
</section>

		<section class="so wg conf">
	<div class="thi">
		<a href="https://smashingconf.com/" style="border: 0px none;"><img alt="SmashingConf San Francisco 2017" src="https://www.smashingmagazine.com/wp-content/uploads/2016/11/smashingconf-san-francisco-2017-2.png" width="90" height="90"></a>
		<p>Meet <strong>SmashingConf San Francisco 2017</strong>, featuring <strong>front-end</strong> ingredients, <strong>UX</strong> recipes and nothing but practical beats from the hidden corners of the web. Only <strong>practical, real-life techniques</strong> and recipes you can learn from. <a href="https://smashingconf.com/"><strong>Get your ticket now!</strong></a></p>
	</div>
</section>

		<section class="bw">
  <div id="spnsrlist-d" class="oa_zone--sponsor" data-sponsor-lines="2"></div>
</section>

		<section class="clearfix">
  <div class="oa_zone--ad sidebar_sky" id="sidebar_sky-3" data-ad-name="Sidebar 3" data-ad-zone="40"></div>
</section>

	</div>
</aside>
<footer class="f" id="footer" role="contentinfo">
		<p class="stmt">
		<em>With a commitment to quality content for the design community.</em>
		<br />Founded by Vitaly Friedman and Sven Lennartz. 2006-2017.		<br />Made in Germany.		<span class="flinks">
			&#9998;
			<a href="https://www.smashingmagazine.com/write-for-us/">Write for us</a> –
			<a href="https://www.smashingmagazine.com/contact/">Contact us</a> –
			<a href="https://www.smashingmagazine.com/privacy-policy-2/">Datenschutzerklärung</a> –
			<a href="https://www.smashingmagazine.com/about/">Impressum</a>.
		</span>
	</p>
</footer>
	<script>
		(
			function( d, w ) {
				w.onload = function() {
					var $l = d.createElement( "link" );
					$l.rel = "prerender";
					$l.href = "https://www.smashingmagazine.com/2017/03/web-development-reading-list-174/";
					d.getElementsByTagName( "head" )[ 0 ].appendChild( $l );
				}
			}
		)( document, window )
	</script>
	<script id="inlinejs__preload-polfill">!function(t){"use strict";var e=t.document,r={};r.isPreloadSupported=function(){try{return e.createElement("link").relList.supports("preload")}catch(t){return!1}},r.init=function(){for(var t=e.getElementsByTagName("link"),r=0;r<t.length;r++){var n=t[r];"preload"===n.rel&&"style"===n.getAttribute("as")&&(loadCSS(n.href,n),n.rel=null)}},window.loadCSS&&!r.isPreloadSupported()&&r.init()}(this);</script><script id="loadjs__smash-onload">!function(a){"use strict";a.loadOnloadJS=function(b,c){a.addEventListener("load",function(){loadJS(b,c)},!1)},a.loadJS=function(b,c){var d=a.document.createElement("script");d.src=b,d.async=c||!1,a.document.body.appendChild(d)}}(window);
 loadOnloadJS( "https://www.smashingmagazine.com/wp-content/themes/smashing-magazine/assets/js/onload.min.js?ver=6.4.7", 1 );</script><script id="loadjs__smash-fastclick"> loadOnloadJS( "https://www.smashingmagazine.com/wp-content/themes/smashing-magazine/assets/js/fastclick.min.js?ver=6.4.7", 1 );</script><script id="loadjs__smash-lazy-images"> loadOnloadJS( "https://www.smashingmagazine.com/wp-content/themes/smashing-magazine/assets/js/lazy-images.min.js?ver=6.4.7", 1 );</script><script id="loadjs__smash-blocked"> loadOnloadJS( "https://www.smashingmagazine.com/wp-content/themes/smashing-magazine/assets/js/blocked.min.js?ver=6.4.7", 1 );</script><script type='text/javascript'>
/* <![CDATA[ */
var AdsI18N = {"Advertisement":"Advertisement"};
/* ]]> */
</script>
<script type='text/javascript' src='https://www.smashingmagazine.com/wp-content/themes/smashing-magazine/assets/js/ads.min.js?ver=6.4.7'></script>
<script id="inlinejs__wp-embed">!function(a,b){"use strict";function c(){if(!e){e=!0;var a,c,d,f,g=-1!==navigator.appVersion.indexOf("MSIE 10"),h=!!navigator.userAgent.match(/Trident.*rv:11\./),i=b.querySelectorAll("iframe.wp-embedded-content");for(c=0;c<i.length;c++)if(d=i[c],!d.getAttribute("data-secret")){if(f=Math.random().toString(36).substr(2,10),d.src+="#?secret="+f,d.setAttribute("data-secret",f),g||h)a=d.cloneNode(!0),a.removeAttribute("security"),d.parentNode.replaceChild(a,d)}else;}}var d=!1,e=!1;if(b.querySelector)if(a.addEventListener)d=!0;if(a.wp=a.wp||{},!a.wp.receiveEmbedMessage)if(a.wp.receiveEmbedMessage=function(c){var d=c.data;if(d.secret||d.message||d.value)if(!/[^a-zA-Z0-9]/.test(d.secret)){var e,f,g,h,i,j=b.querySelectorAll('iframe[data-secret="'+d.secret+'"]'),k=b.querySelectorAll('blockquote[data-secret="'+d.secret+'"]');for(e=0;e<k.length;e++)k[e].style.display="none";for(e=0;e<j.length;e++)if(f=j[e],c.source===f.contentWindow){if(f.removeAttribute("style"),"height"===d.message){if(g=parseInt(d.value,10),g>1e3)g=1e3;else if(200>~~g)g=200;f.height=g}if("link"===d.message)if(h=b.createElement("a"),i=b.createElement("a"),h.href=f.getAttribute("src"),i.href=d.value,i.host===h.host)if(b.activeElement===f)a.top.location.href=d.value}else;}},d)a.addEventListener("message",a.wp.receiveEmbedMessage,!1),b.addEventListener("DOMContentLoaded",c,!1),a.addEventListener("load",c,!1)}(window,document);</script>
		<script>try {
			SmashingAds.loadAds();
		} catch ( e ) {
		}</script>

		<script>try {
			SmashingAds.render( OA_output );
		} catch ( e ) {
		}</script>

	<script type="text/javascript">window.NREUM||(NREUM={});NREUM.info={"beacon":"bam.nr-data.net","licenseKey":"86b694293f","applicationID":"11250242","transactionName":"NgMAbEZVV0cAWxZYXg9JI1tAXVZaTlEMVVQZ","queueTime":0,"applicationTime":265,"atts":"GkQDGg5PREk=","errorBeacon":"bam.nr-data.net","agent":""}</script></body></html>
