A bookmarklet you can click to give you performance information specifically related to the DOM. E.g. duplicate IDs, excessive stylesheets, excessive nesting, empty nodes, HTML comments, etc.
Direct Link to Article — Permalink
Dom Monster is a post from CSS-Tricks
]]>Meaning like <!-- these kind of comments -->. You put a media query in a data-* attribute of a parent element and it will determine if that block of commented HTML should be un-commented or not. A form of conditional loading. If the HTML bloat bothers you, I suspect it could be easily adapted to load the comment from a URL at another data-* attribute instead.
Direct Link to Article — Permalink
Responsive Comments is a post from CSS-Tricks
]]>Computer scientists have discovered a way to number-crunch an individual’s own preferences to recommend content from others with opposing views. The goal? To burst the “filter bubble” that surrounds us with people we like and content that we agree with.
It’s Black Friday, a day when all sensible Americans stay home eating leftovers and doing their shopping online. In honor of the almost-holiday, today we’re going to take a look at some of the techniques store managers use to sell to us, and how we can apply them to our sites to take them from profitable to sensational.
The simple rule for improving the profitability of a site is to find a way of converting casual browsers into actual paying customers. When you start to offer your site visitors a very comfortable, enjoyable and efficient shopping process, then you can count on improved conversions. After all, your customers will reward you for what it feels like from their perspective to peruse the goods and services on your ecommerce site. To make the best ecommerce site around, it must be designed from the point of view of your target shopper.
Just remember this: give them what they want, and you’ll enjoy a healthy increase in profits year on year. Ignore their needs, and you’ll not only struggle to make money, you’ll be out of business soon.
This seems like such a no-brainer, but the number of ecommerce sites out there that forget this is disturbingly high. One thing to know intimately well is what sorts of user emotions will end up stimulating an actual purchase decision. It’s also a smart move to understand the users’ shopping behaviors as well as the different factors that they look at in an ecommerce site to justify a purchase decision.
The decision to buy the products and services on your site will be in part based on the product information and visuals that they see. If you fail to give them the information you want, it will end in a lost sale.
The Disney Store is just such an example. Its designers know that the site’s audience is female and very young, so what do they do? They prominently display dolls of Disney characters and other Disney merchandise so that they jump out at the site visitor. This helps to create the emotional response of desire in young girls.
It’s a well-known fact that advertising helps to move products. People are less willing to buy something if it’s not hyped to the high heavens. The product information on ecommerce sites must be written in such a way that it’s basically an advertisement masquerading as plain, old product details. This is what makes for truly effective copy when it comes to product information.
As such, product information isn’t about dryly describing the product or service you want site visitors to purchase. It’s more about how this information is presented, which should be in a persuasive and catchy way. This is what makes for engaging and, ultimately, successful copy that increases conversions.
The flavor of vanilla lends a wonderfully creamy taste to anything it teams up with. And coffee is certainly no exception. Combined in this refreshing beverage, they only bring out the best in each other. The spicy fragrance of vanilla enhances the full-bodied richness of dark-roasted coffee. You’ll sigh a satisfied “ahh” after every succulent slurp.
An example of engaging copy comes straight from Starbucks’ Caffe Vanilla Frappuccino Blended Beverage page. Note how the copy touches on all the different, rich flavors of this Frappuccino and ends with the assurance that customers will be very satisfied. While you can’t, naturally, put one of these babies into your online shopping cart, you’ll likely head to your nearest Starbucks to guzzle down one of these bad boys.
When you’re shopping online for a product, you’re deprived of one of the most critical ways that you can normally evaluate whether or not you want to buy it: touching it. Shopping online stops you to examining the product in your hands, something you’d normally do in a regular bricks-and-mortar store.
That’s why your ecommerce site has to be chock full of product videos since they are the next best thing to letting customers examine products in their hands, up close and personal. Product videos offer customers something of an interactive element that lets them see the product more intimately than mere pictures. This, in turn, helps to drive conversions as it elicits more enthusiasm and excitement in shoppers.
One website that utterly gets this tactic is Amazon, which shouldn’t be surprising since it’s the most successful ecommerce site ever! Brilliantly illustrating this feature of a conversion-rich site is its page for the All-New Kindle Paperwhite, one of the most popular products on the site. From the moment a browser gets on this page, they’re able to take a “product tour” that immediately shows them a two-and-a-half minute video on the Kindle, complete with audio.
Free shipping is an ideal way to boost your site’s conversions. Think of it this way: Your browser has become an actual customer and is ready to pay for a product. Then, when he’s entering his credit card information, shipping address and about to press the “purchase” button, he learns that there will be shipping charges at the very end. This can be a massive conversion destroyer for so many potential customers because it simply takes the wind out of their sails!
Free shipping is the antidote to this. Some are of the opinion that it doesn’t make sense to offer free shipping on items that are already sold at a discount. While this philosophy can be viewed as making sense to some, know that not offering unlimited free shipping is a business model that can be a loser since a huge shopping site already offers unlimited free shipping.
Zappos is the world’s biggest online shoe store that’s also owned by Amazon. It sells clothing, too. Unlike lots of other ecommerce sites, Zappos offers customers free shipping on all domestic orders without any exception—guaranteed. Talk about a super-effective way of conversion boosting.
One of the most important rules of successfully selling anything is grabbing the all-important, though elusive, attention of your prospects. Any good ecommerce site must always highlight and draw attention to any discounts and specials it’s running, preferably right on the homepage so that it’s less likely visitors will miss it.
After all, the whole point of any discounts and specials is, essentially, a shameless attempt to boost your conversions, right there, right then. So don’t even think twice about grabbing the attention of your site visitors for all that it’s worth. Your conversion rates depend on it.
Look at the homepage of eToys.com for the epitome of this strategy. At the time of this writing, there’s a huge, hard-to-miss notice about a 60%-off sale at the website’s outlet store. It’s located just to the right of center near the top of the homepage, virtually guaranteeing it can’t be overlooked.
If there’s one thing that customers really hate, it’s being restricted in the types of payments that they can make for the purchase of your products. If your customers are already good enough to want to pay you money for your products, then you, at the very least, should be good enough to give them a plethora of payment options.
This doesn’t mean just offering various kinds of credit cards with which customers can pay. Sure, it helps to offer American Express, Mastercard and Visa, but some of your customers may be unsure about parting with their credit card information on your site. These people have to be accommodated, so remember to at least offer PayPal as a payment alternative.
Check out the secure-payment page of SuitSupply, which is a men’s fashion retailer. You’ll note that they provide customers with the option to pay via PayPal if they are uncomfortable with payment by credit card. As a result, you can bet that SuitSupply’s customers will be likelier to actually purchase a suit from that site when they see that the site addresses their potential concerns over giving out their credit card information over the Internet.
Designers who don’t design an ecommerce site with the most vital objective being increased conversions are not doing businesses any favors. In an industry where selling is what matters most and where profit is king, conversions are all that matter. Web designers building ecommerce websites have to understand this more than anything because, once you lose prospects due to a bad site experience, you lose them for good, and they’re never coming back.
That’s why it’s so important to really get inside the heads of your target audience when you’re designing an ecommerce site. What kind of a shopping experience are they searching for? What demographics are most likely to buy your products or services? What emotions are they feeling as they navigate the site? All these questions have to be answered to design the best possible ecommerce shopping experience.
What rules do you follow to maximize ecommerce site profits? Are conversions all that matter? Let us know your thoughts in the comments.
Featured image/thumbnail, sales image via Shutterstock.
| Over 2,000 Exclusive Unique Fonts – only $27! |  |
    
|
 |
Today we are pleased to feature Smallicons, a set of 54 flat icons. If you are looking for a way to make your design fresh and expressive, then this freebie is the answer. The set was created and designed by Nick Frost and Greg Lapin of Smallicons.
The freebie includes 36 icons drawn from a full commercial set available on Smallicons, plus 18 icons designed exclusively for Smashing Magazine.
The icons were made using Photoshop vector shapes and are available in different formats, giving you maximum convenience and saving you time for more creative tasks. The PNG files come in two dimensions (32 × 32 and 64 × 64 pixels). The set also includes swatch files, so that you can select colors in Photoshop using the color swatches palette. Smallicons is released under the Creative Commons Attribution 3.0 Unported licence, freely available for personal and commercial projects.
Here’s what you’ll get:
@2x sizes are also included with both versions, for making Retina-ready apps and interfaces);
Smallicons is a fully scalable set.
Nothing’s easier than customizing Smallicons with the embedded color swatches!
This preview shows all of the icons in the set. (Large view)
As usual, a word from the designers themselves:
When you start to design in a flat style, it can be hard to stop — harder than you think! That is exactly what happened to us when we designed the icons for Smallicons. It turned into a big project, which we hope will help designers and other professionals whose work is based on graphics one way or another.
Thank you, dear Nick and Greg, for creating this beautiful set! We appreciate your work and efforts!
(al, ea, il)
© The Smashing Editorial for Smashing Magazine, 2013.
]]>
It’s pretty easy to get confused as to who owns what right now. Pick any web start-up and there’s a good chance that it’s either owned by a major player, or in the process of considering offers. Small companies innovate, but it takes big investment to fulfill the potential of those innovations.
iStock is one of the biggest names in stock photography on the web. And for good reason: iStock provides an innovative approach to stock imagery, providing photographers with a way to earn a living, and giving designers access to a huge pool of assets.
It’s been seven years since iStock became part of the Getty Images family, and in that time, competition for designers’ asset budgets has grown ten-fold. iStock continued to deliver great images, still provided an accurate search function, still provided value for money; but the brand had begun to feel dated — not ideal for a company marketing itself to designers.
The old iStockphoto logo (left), and the new iStock logo (right).
Seeking to change that, Getty Images decided to rebrand iStockPhoto properly, and now we have the all-new iStock.
This isn’t a monumental change in the iStock business, because Getty Images has been there, working away behind the scenes for seven years. It’s just that now, it’s harder to miss them.
So why have they chosen to rebrand iStock now? Well, according to Getty Images, they feel that the recent changes they’ve made to the iStock business, provide the perfect time to make the change. The new, simplified search experience, the reduction in pricing and the addition of all new imagery exclusive to iStock is a watershed moment that’s worth celebrating.
The most obvious change is the dropping of the ‘Photo’ from the name, making ‘iStockPhoto’, simply ‘iStock’. The reason for this change is obvious: iStock don’t sell just photos, they offer video, vectors, illustrations, even sound files.
When Getty Images chose to rebrand iStock, they intended to “[marry] the freshness, innovation, and strength of the iStock brand to the quality, heritage, and credibility of Getty Images”. So, did they succeed? Well actually, yes. Getty Images is a huge name in stock, and they do have some of the most credible, high-quality photography available anywhere. What’s important is that the change has retained the original spirit of the iStockPhoto branding.
Text remains white on black. The type employed is still sans-serif, although now considerably more geometric. The terminals of the stems are now sharp and precise instead of rounded; creating a more professional, less fun, feeling logo.
The cleverest part of the new design is the period that follows the ‘iStock’ word. It can be read in several ways: as a half-smiling nod to the missing ‘Photo’; as a reference to the dot in ‘.com’; and also as a statement of intent, iStock is the last word in stock photography, period.
In addition to these changes, the logo is underpinned by the tagline ‘by Getty Images’, a reminder that the parent company’s strength is behind iStock. Simultaneously it seeks to tie iStock to Getty Images’ other brands; Thinkstock, also owned by the company, was similarly successfully rebranded some months ago.
The rebranding of iStock is a major undertaking for Getty Images, but one that they’ve carried out well. The result is a modern brand that delivers on quality & price, and breathes new life into one of web design’s favourite resources.
What do you think of the new iStock brand? Do you use iStock, will the brand change encourage you to do so? Let us know in the comments.
| Over 2,000 Exclusive Unique Fonts – only $27! | |
|
|
The search giant says patents are rubbish. Yet it’s accumulating more of them than ever.
Over the last few years, Google executives have had plenty to say about patents. According to Google, patents, particularly software patents, are mostly bogus, largely low-quality, and used in court by companies that can’t innovate to hurt consumers and stifle true innovators.
]]>The CEO of Box is building an online file storage system designed to reshape industries.
Aaron Levie bounds onstage with the swagger of a standup comic. But he’s not performing at the Comedy Store. He’s in the Grand Ballroom at San Francisco’s Hilton Union Square kicking off BoxWorks, his company’s annual customer conference. Steve Jobs had his black turtleneck, Mark Zuckerberg has his gray hoodie; Levie’s uniform is a staid black suit, a capitulation to the buttoned-down enterprise software market he aims to conquer. But he spices it up with a cheeky pair of colorful sneakers. Today they’re bright red.
]]>
Today we wanted to pause for a moment and tell you what we’re thankful for. The answer is you, our wonderful alumni. Thank you for all that you do and all that you are. UMBC would not be same without you.
We wish you a Happy Thanksgiving. We hope you enjoy the time with family and friends, eat plenty of tasty food, and, if you travel, do so safely.
Find us on Facebook. // Follow us on Twitter.
]]>Since its introduction, 3D graphics in the browser has been a popular topic. But if you were to create your apps using plain old WebGL it would take a very long. But now we have some pretty useful libraries that we can take advantage of, like Three.js. So in this series I will show you how to create stunning 3D experiences for the browser.
I do expect you to have a basic understanding of 3D space before you start reading this tutorial, as I won’t be explaining things like coordinates, vectors etc.
We will start with the code from previous part of this series. Also, grab the assets I provided and put them in the same folder as your app. Now, since we will use images here you will have to put your app on some static server (may be local), because unless you start the browser with enabled file access from files (for example using the --allow-file-access-from-files flag in Chrome) CORS will not let you load them from file. That’s all you need to do before proceeding.
If you’ve ever got so bored that you went with creating something using pure OpenGL, you probably remember how much pain it is to load a texture. Luckily, Three.js comes with a nice function that will load and set up the texture for us. Add this line before the definition of our cube’s material:
var cubeTexture = THREE.ImageUtils.loadTexture('./box.png');
It’s really all you have to do in order to have your texture loaded.
In a real-world app you would have to preload the texture like any normal image and show the users some fancy loading bar to let them know that you are loading (Three.js will use the cached image then).
Now we will apply the texture to our cube. This is also easy, you just need to replace the color definition in the cube’s material to look like this:
var cubeMaterial = new THREE.MeshLambertMaterial({ map: cubeTexture });
The map attribute sets the texture. Now you can open the browser and you should see a rotating, textured cube:
You can also colorize the texture, just add the color definition in the material’s options, like that:
var cubeMaterial = new THREE.MeshLambertMaterial({ map: cubeTexture, color: 0x28c0ec });
And now the cube turns blue:
This way you can have multiple different objects with the same texture if only the color changes.
You can set different materials for every face of the cube. To achieve that, you have to change the whole material’s definition. First, define the materials array. Each element in the array will correspond to the material of one face. They go in this order: right, left, top, bottom, front and back:
var materials = [];
materials.push(new THREE.MeshLambertMaterial({ map: cubeTexture, color: 0xff0000 })); // right face
materials.push(new THREE.MeshLambertMaterial({ map: cubeTexture, color: 0xffff00 })); // left face
materials.push(new THREE.MeshLambertMaterial({ map: cubeTexture, color: 0xffffff })); // top face
materials.push(new THREE.MeshLambertMaterial({ map: cubeTexture, color: 0x00ffff })); // bottom face
materials.push(new THREE.MeshLambertMaterial({ map: cubeTexture, color: 0x0000ff })); // front face
materials.push(new THREE.MeshLambertMaterial({ map: cubeTexture, color: 0xff00ff })); // back face
As you can see each face has it’s own material, so you can set different textures, colors and other attributes for each one. Next, change the type of the cube’s material to THREE.MeshFaceMaterial:
var cubeMaterial = new THREE.MeshFaceMaterial(materials);
You only need to pass the materials array as the parameter. In the browser you should see that each side of the cube has different color:
Let’s say you want to create an effect of spinning snowflakes in your app. If you were to render each snowflake as a mesh you will get very low fps. That’s where particles come into play. They are way less complicated, and drawing them as a whole particle system makes them really efficient.
Start with creating a geometry for our particles:
var particles = new THREE.Geometry;
THREE.Geometry is a base geometry object, without any shape. Now we have to define the position of each particle in the system. Let it be completely random:
for (var p = 0; p < 2000; p++) {
var particle = new THREE.Vector3(Math.random() * 500 - 250, Math.random() * 500 - 250, Math.random() * 500 - 250);
particles.vertices.push(particle);
}
This loop will create 2000 randomly placed particles and put them all in the geometry. Next, you have to define particles’ material:
var particleMaterial = new THREE.ParticleBasicMaterial({ color: 0xeeeeee, size: 2 });
Notice that we are using THREE.ParticleBasicMaterial, which is only for particles. In options we only define the color and the size of each particle. Finally, you can create the particle system and add it to the scene:
var particleSystem = new THREE.ParticleSystem(particles, particleMaterial);
scene.add(particleSystem);
Now, to make the scene look better let’s rotate the particles in the direction opposite to the one that the cube is rotating in (change the render function to look like this):
function render() {
requestAnimationFrame(render);
var delta = clock.getDelta();
cube.rotation.y -= delta;
particleSystem.rotation.y += delta;
renderer.render(scene, camera);
}
We moved the clock.getDelta to the variable, because if you would use it like that:
cube.rotation.y -= clock.getDelta();
particleSystem.rotation.y += clock.getDelta();
The particle system would not rotate, because the second call will return a number close to zero (remember that it’s getting the time from the last call).
Now open up the browser and you should see a cube and particles rotating:
Let’s combine both things you’ve learned in this tutorial and turn those ugly white squares into real snowflakes. First, load the snowflake texture:
var particleTexture = THREE.ImageUtils.loadTexture('./snowflake.png');
Now, change the particles’ material to use the texture. Also, enable transparency and make the particles bigger so we can see the shape:
var particleMaterial = new THREE.ParticleBasicMaterial({ map: particleTexture, transparent: true, size: 5 });
If you open the browser you should see some nice snowflakes flowing around the cube:
Smoke effect is pretty easy to achieve and it looks nice. Start by creating the geometry, just like with the snowflakes:
var smokeParticles = new THREE.Geometry;
for (var i = 0; i < 300; i++) {
var particle = new THREE.Vector3(Math.random() * 32 - 16, Math.random() * 230, Math.random() * 32 - 16);
smokeParticles.vertices.push(particle);
}
The only difference here is that we are choosing the position from a rectangular prism with dimensions 32x32x230. Now, let’s load the texture and define the material:
var smokeTexture = THREE.ImageUtils.loadTexture('./smoke.png');
var smokeMaterial = new THREE.ParticleBasicMaterial({ map: smokeTexture, transparent: true, blending: THREE.AdditiveBlending, size: 50, color: 0x111111 });
In material definition, there is a blending option. It tells the renderer how it should render one object on another. With THREE.AdditiveBlending overlapping color values will be added to each other which will result in a brighter smoke in the areas with higher particle density. We also set the color to almost black, so the smoke looks more natural.
Finally, create the particle system, move it a bit to the left and add it to the scene:
var smoke = new THREE.ParticleSystem(smokeParticles, smokeMaterial);
smoke.sortParticles = true;
smoke.position.x = -150;
scene.add(smoke);
You also have to set smoke.sortParticles to true. When it’s false the background of the sprite may be drawn as black. If you open the browser you should see a still pillar of smoke next to the cube:
To animate the smoke we have to loop trough all of the particles and move them up a bit. Add this code to the render function:
var particleCount = smokeParticles.vertices.length;
while (particleCount--) {
var particle = smokeParticles.vertices[particleCount];
particle.y += delta * 50;
if (particle.y >= 230) {
particle.y = Math.random() * 16;
particle.x = Math.random() * 32 - 16;
particle.z = Math.random() * 32 - 16;
}
}
smokeParticles.__dirtyVertices = true;
In the loop we are adding delta * 50 to the y position of the particle. Next we check if the particle is higher than 230, if so we randomly choose its new position somewhere in the bottom of the smoke pillar. Finally, the most important thing: setting the geometry’s __dirtyVertices flag to true.
To improve the performance, Three.js is caching the objects to avoid building all of the WebGL calls again every frame, so if we change something in the geometry of the object we have to let the renderer know that it has changed. Basically, the
__dirtyVerticesflag will just reach the element.
If you open the browser now you should see a smoothly animated smoke next to the cube.
In this tutorial you’ve learned how to use textures and particles. As before, don’t be afraid to experiment a bit with your app. If you have problems take a look at the documentation. In the next article I will teach you how to load models and animate them.
]]>