July, 2014 | Webmasters Gallery

Scaling Down The BEM Methodology For Small Projects

July 17th, 2014 admin No comments

Front-end development is no longer about individual frameworks. Tools are available — we merely have to choose. To make the right choices for your project, you need to start with a general approach, or methodology. But most methodologies have been created by big companies? Are they still useful for small companies, or do we need to reinvent them at a small scale?

You probably already know of BEM¹²¹, one of those methodologies developed by a big company — namely, Yandex². BEM posits that three basic entities (blocks, elements and modifiers) are enough to define how to author HTML and CSS, structure code and components, describe interfaces and scale a project up to an industry-leading service.

I’ve spent some time with Yandex and BEM, and I know that this methodology works for large projects. Yandex uses BEM to develop CSS and JavaScript components; Yandex also optimizes templates and tracks dependencies in BEM, develops BEM utilities, supports code experiments and researches the field. On a large scale, this investment pays off and allows Yandex to develop hundreds of its services faster.

Would smaller teams benefit from BEM? I wasn’t sure. BEM is a layer of abstraction, offered with other tools and technologies. A small agile team switching to a full BEM stack would be questionable. Could the idea — the approach itself — be useful?

To make the right choices for your project, start with a general approach or methodology.

I had to revisit this question when my career recently took me from Yandex to Deltamethod, a mid-sized startup in Berlin. Facing ambitious development plans, we decided to try BEM on a smaller scale. We wanted the same benefits that Yandex gets from BEM: code sharing, a live style guide, scalability, faster development. We also wanted to keep our toolchain and upgrade the existing code base gradually, rather than start from scratch.

For some time, we’ve been focusing on architecture and the basics, trying aspects of BEM one by one, assessing the results, then moving forward. We keep writing down ideas, guidelines, useful tips and short tutorials. I am now convinced that BEM applies to small projects as well. I’ve written down my findings, in case you find them useful. Let’s start by reviewing the basics.

BEM 101

While semantics is considered the foundation of web development, various front-end technologies do not share the same semantic model. The HTML of a modern app is mostly a div soup. CSS by itself does not offer any structured model at all. High-level JavaScript components use abstractions that are not consistently tied to styles or markup. At the UX level, interfaces are described in terms that have nothing in common with technical implementations. Enter BEM, a unified semantic model for markup, styles, code and UX. Let’s take a closer look.

Blocks

A block is an independent entity with its own meaning that represents a piece of interface on a page.

Examples of blocks include:

a heading,
a button,
a navigation menu.

To define a block, you’d give it a unique name and specify its semantics. Several instances of the same block definition (such as various buttons or multiple menus) might exist in the interface.

Any web interface can be represented as a hierarchical collection of blocks. The simplest representation is the HTML structure itself (tags as blocks), but that is semantically useless because HTML was designed for structured text, not web apps.

Elements

An element is a part of a block, tied to it semantically and functionally. It has no meaning outside of the block it belongs to. Not all blocks have elements.

Examples of elements include:

a navigation menu (block) that contains menu items;
a table (block) that contains rows, cells and headings.

Elements have names, too, and similar elements within a block (such as cells in a grid or items in a list) go by the same name. Elements are semantic entities and not exactly the same as HTML layout; a complex HTML structure could constitute just a single element.

Modifiers

Modifiers are flags set on blocks or elements; they define properties or states. They may be boolean (for example, visible: true or false) or key-value pairs (size: large, medium, small) — somewhat similar to HTML attributes, but not exactly the same. Multiple modifiers are allowed on a single item if they represent different properties.

Blocks and the DOM

How do you work with BEM while still using HTML? You do it by mapping DOM nodes to BEM entities using a naming convention.

BEM uses CSS class names to denote blocks, elements and modifiers. Blocks, elements or modifiers cannot claim any “exclusive ownership” of DOM nodes. One DOM node may host several blocks. A node may be an element within one block and (at the same time) a container for another block.

A DOM node being reused to host more than one BEM entity is called a “BEM mixin.” Please note that this is just a feature of convenience: Only combine things that can be combined — don’t turn a mix into a mess.

The BEM Tree

By consistently marking up a document with BEM entities, from the root block (i.e. or even ) down to the innermost blocks, you form a semantic overlay to the DOM’s existing structure. This overlay is called a BEM tree.

The BEM tree gives you the power to manipulate the whole document in BEM terms consistently, focusing on semantics and not on a DOM-specific implementation.

Making Your First Move

You might be thinking, “I’ll give BEM a try. How do I start migrating my project to BEM? Can I do it incrementally?” Sure. Let’s start by defining some blocks. We will only cover semantics; we’ll proceed with specific technologies (like CSS and JavaScript) later on.

As you’ll recall, any standalone thing may be a block. As an example, document headings are blocks. They go without inner elements, but their levels (from top-most down to the innermost) may be defined as key-value modifiers.

If you need more levels later, define more modifiers. I would say that HTML4 got it wrong with

. It made different blocks (tags) of what should have been just a modifier property. HTML5 tries to remedy this with sectioning elements, but browser support is lagging.

For example, we get this:

BLOCK heading
MOD level: alpha, beta, gamma

As a second example, web form input controls can be seen as blocks (including buttons). HTML didn’t get it exactly right here either. This time, different things (text inputs, radio buttons, check boxes) were combined under the same tag, while others (seemingly of the same origin) were defined with separate tags ( and </code>). Other things, such as <code><label></code> and the auto-suggestion <code>datalist</code>, should be (optional) elements of these blocks because they bear little to no meaning on their own.</p> <p>Let’s see if we can fix this:</p> <pre><code>BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label </code></pre> <p>The essential feature of a text input is its ability to accept plain text. When we need it to be multiline, nothing changes semantically — that’s why <code>multiline</code> is just a modifier. At the HTML level, this is represented by different markup for technical reasons, which is also fine because we’re only defining semantics, not the implementation. The <code>textfield</code> tag itself is an element, and <code>label</code> is another element; later, we might need other elements, like a status icon, error message placeholder or auto-suggestion.</p> <pre><code>BLOCK checkbox ELEMENT tick-box ELEMENT label </code></pre> <pre><code>BLOCK radio ELEMENT radio-button ELEMENT label </code></pre> <p>These two blocks are pretty straightforward. Still, <code><label></code> is an element, and “native” <code></code> tags are elements, too.</p> <pre><code>BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected </code></pre> <p>Select boxes don’t really need labels, and anything else here is more or less similar to a normal select box control. Technically, we can reuse the existing <code></code> tag with all of its structure. Note that both the <code>select</code> block and its <code>option</code> element have a <code>disabled</code> modifier. These are <em>different</em> modifiers: The first one disables the whole control, while the second one (being a perfect example of an element modifier) disables just an individual <code>option</code>.</p> <p>Try to find more examples of blocks in your web projects. Classifying things according to BEM takes some practice. Feel free to share your findings, or <a class="colorbox" href="mailto:info@bem.info">ask the BEM team your questions</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#3">3</a></sup>!</p> <h3>Let Your CSS Speak Out Loud</h3> <p>Perhaps you’ve heard a lot about BEM as a way to optimize CSS and are wondering how it works?</p> <p>As mentioned, BEM uses CSS class names to store information about blocks, elements and modifiers. With a simple naming convention, BEM teaches your CSS to speak, and it adds meaning that makes it simpler, faster, more scalable and easier to maintain.</p> <h4>BEM Naming Conventions for CSS</h4> <p>Here are the prerequisites:</p> <ul> <li>Keep the names of blocks, elements and modifiers short and semantic.</li> <li>Use only Latin letters, dashes and digits.</li> <li>Do not use underscores (<code>_</code>), which are reserved as “separator” characters.</li> </ul> <p>Block containers get a CSS class of a prefix and a block name:</p> <pre><code>.b-heading .b-text-input </code></pre> <p>That <code>b-</code> prefix stands for “block” and is the default in many BEM implementations. You can use your own — just keep it short. Prefixes are optional, but they emulate much-anticipated (and missing!) CSS namespaces.</p> <p>Element containers within a block get CSS classes consisting of their block class, two underscores and the element’s name:</p> <pre><code>.b-text-input__label .b-text-input__text-field </code></pre> <p>Element names do not reflect the block’s structure. Regardless of nested levels within, it’s always just the block name and the element name (so, never <code>.b-block__elem1__elem2</code>).</p> <p>Modifiers belong to a block or an element. Their CSS class is the class name of their “owner,” one underscore and a modifier name:</p> <pre><code>.b-text-input_disabled .b-select__option_selected </code></pre> <p>For a “boolean” modifier, this is enough. Some modifiers, however, are key-value pairs with more than one possible value. Use another underscore to separate the values:</p> <pre><code>.b-heading_level_alpha </code></pre> <p>Modifier classes are used together with the block and element class, like so:</p> <pre><code><div class="b-heading b-heading_level_alpha">BEM</div> </code></pre> <h3>Why Choose BEM CSS Over Other Approaches</h3> <h4>One Class to Rule Them All</h4> <p>CSS sometimes depends a lot on the document’s structure — if you change the structure, you break the CSS. With BEM, you can drop tag names and IDs from your CSS completely, using only class names. This mostly frees you from structural dependencies.</p> <h4>Specificity Problems Solved</h4> <p>Big chunks of CSS are hard to maintain because they keep redefining themselves unpredictably.</p> <p>This issue is called CSS specificity. The original problem is that both tag names and element IDs change selector specificity in such a way that if you rely on inheritance (the most common thing to expect from CSS), then you can only override it with selectors of the same or higher specificity. BEM projects are least affected by this problem. Let’s see why.</p> <p>Let’s say you have a table with these style rules:</p> <pre><code>td.data { background-color: white } td.summary { background-color: yellow } </code></pre> <p>However, in another component, you need to redefine the background of a particular cell:</p> <pre><code>.final-summary { background-color: green } </code></pre> <p>This wouldn’t work because <code>tag.class</code> always has a higher specificity than just <code>.class</code>.</p> <p>You would add a tag name to the rule to make it work:</p> <pre><code>td.final-summary { background-color: green } </code></pre> <p>Because BEM provides unique class names for most styles, you would depend only on the order of rules.</p> <h4>Bye-Bye Cascade?!</h4> <p>Nested CSS selectors aren’t fast enough in old browsers and can create unintended overrides that break the styles of other elements. Eliminating a lot of the cascade from CSS is possible with BEM. How is this possible, and why is it important? Isn’t the cascade <em>supposed</em> to be there? Isn’t it the “C” in CSS)?</p> <p>As you know, <strong>every BEM CSS class is unique and self-sufficient</strong>. It does not depend on tags or IDs, and different blocks never share class names. That’s why you need only a single class name selector to do the following:</p> <ul> <li>style a block container,</li> <li>style any block element,</li> <li>add style extras and overrides with a modifier.</li> </ul> <p><strong>This covers most of your styling needs, all with just one class selector</strong>. So, it’s mostly about single-class selectors now, and they are extremely fast. To apply a selector, the browser starts with an initial (broader) set of elements (usually determined by the rightmost part of a selector), and then gradually reduces the set by applying other parts until only matching elements remain. The more steps needed, the more time it takes, which is why you can hardly beat single-class selectors for speed.</p> <p>CSS is rarely a performance bottleneck on small pages, but CSS rules must be reapplied with every document reflow. So, when your project grows, things will get slower at some point. According to usability science, 250 milliseconds is the perception limit for “instant.” The faster your selectors are, the more room you have to manoeuvre to keep that “blazing fast” feeling for your users.</p> <p>So, no cascade?! Well, almost. In some cases, you might need two class names in a selector — for example, when a block modifier affects individual elements:</p> <pre><code>.b-text-input_disabled .b-text-input__label { display: none; } </code></pre> <p>The nice thing is that any rule that redefines this one will likely depend on another modifier (because of the unified semantics!), which means that specificity is still the same and only the rule order matters. Surely, we can invent more cases that require even more cascading (internal element dependencies, nested modifiers, etc.). While the BEM methodology allows for that, you’ll hardly ever need it in real code.</p> <h4>Absolutely Independent Blocks</h4> <p>If blocks depend on each other’s styles, how do we express that in CSS? The answer is, they shouldn’t. Each block must contain all styles necessary for its presentation. The overhead is minimal, but this ensures that you can move blocks freely within a page or even between projects without extra dependencies. Avoid project-wide CSS resets for the same reason.</p> <p>This is not the case for elements because they are guaranteed to stay within their parent block and, thus, inherit block styles accordingly.</p> <h3>Alternative BEM Naming Conventions</h3> <p>A number of alternative BEM naming conventions exist. Which should we use? BEM’s “official” naming convention for CSS is not the only one possible. <a class="colorbox" href="http://nicolasgallagher.com/about-html-semantics-front-end-architecture/">Nicolas Gallagher once proposed</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#4">4</a></sup> some improvements, and other adopters have, too. One idea is to use attributes to represent modifiers, and CSS prefixes aren’t “standardized” at all.</p> <p>The biggest advantage of the syntax proposed by the team behind BEM is that it’s the one supported in open-source tools distributed by Yandex, which you might find handy at some point. In the end, the methodology is what matters, not the naming convention; if you decide to use a different convention, just make sure you do it for a reason.</p> <h3>Semantic JavaScript: BEM-Oriented Code</h3> <p>Many publishers and authors view BEM as a naming convention only for CSS, but that brings only half of the benefits to a project. The BEM methodology was designed to fix (i.e. polyfill) non-semantic DOM structures at all levels (HTML, CSS, JavaScript, templates and UX design), similar to how jQuery “fixes” broken DOM APIs. HTML was designed as a text markup language, but we use it to build the most interactive interfaces around. Experimental efforts such as Web Components strive to bring semantics back into our markup and code, but BEM can be used in a full range of browsers now, while retaining compatibility with future approaches, because it does not depend on any particular API or library.</p> <p>How do you apply the BEM model to JavaScript code? We’ll go through a development paradigm using as little code as possible. It will be really high-level and abstract, but the abstractness will help us to understand the idea more clearly. You’ll notice another term in the heading above: “BEM-oriented code.” Before explaining what’s behind that, let’s go over some ideas that are useful to know when applying BEM to JavaScript.</p> <h4>Learning to Declare</h4> <p>The first step is to embrace a declarative paradigm. <strong>Declarative programming is an approach that concentrates on the “what,” not the “how.”</strong> Regular expressions, SQL and XSLT are all declarative, and they specify not the control flow, but rather the logic behind it. When doing declarative programming, you’d start by describing a set of conditions, each of them mapped to specific actions.</p> <p>In BEM, conditions are represented by modifiers, and <strong>any action can only happen on a block or element</strong>. The code examples in this article will use the <code>i-bem.js</code> framework, written and open-sourced by Yandex, but your favorite framework might be able to do similar or better things because declarative programming is not tied to a specific implementation.</p> <pre><code>BEM.DOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */ </code></pre> <p>The code snippet above defines actions for two modifiers on a <code>b-dropdown</code> block. These are similar to event handlers, but all states get immediately reflected in the CSS. Modifiers are still stored as class names on the corresponding block and element entities.</p> <p>Enabling and disabling different key bindings on a <code>b-editor</code> block is another example of how to use modifiers:</p> <pre><code>BEM.DOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); } } }, onDelMod: { hotkeys: function() { this.clearKeyMaps(); this.delMod('theme'); } } /* … */ </code></pre> <p>In this example, we see how modifiers bring logic to our transitions in state.</p> <h4>Methods</h4> <p>With a declarative approach, methods are not always “tied” to a component automatically. Instead, they, too, can be <strong>declared</strong> to belong to some instances under certain circumstances:</p> <pre><code>BEM.DOM.decl({ name : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } }); </code></pre> <p>This method is defined only for blocks that have the specific <code>type</code> modifier: <code>inplace</code>.</p> <p>As in classic object-oriented programming, you can extend semantically defined methods by providing even more specific <strong>declarations</strong> and reuse the original code if necessary. So, both overrides and extensions are possible. For example:</p> <pre><code>BEM.DOM.decl({'name': 'b-link', 'modName': 'pseudo', 'modVal': 'yes'}, { _onClick : function() { // runs the basic _onClick defined // for all b-link instances this.__base.apply(this, arguments); // redefine the appearance from within CSS, // this code only gives you a semantic basis! this.setMod('status', 'clicked'); } }); </code></pre> <p>As specified by this definition, the extended <code>_onClick</code> method runs only on <code>b-link</code> instances with a <code>_pseudo_yes</code> modifier. In all other cases, the “original” method is implemented.</p> <p>Semantics will slowly migrate from your markup (where it’s not needed anymore) to your code (where it supports modularity and readability, making it easier to work with).</p> <h4>“… Sitting in a (BEM) Tree”</h4> <p>What is the practical use of a declarative approach if it is way too abstract? The idea is to work with a BEM tree, which is semantic and controlled by you, instead of a DOM tree, which is tied to the markup and specifics of implementation:</p> <pre><code>BEM.DOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ blockName: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); this.domElem.append('Checkbox value: ' + checkbox.val()); } } } } ); </code></pre> <p>Other APIs exist, like <code>this.elem('name')</code> and <code>this.findBlockOutside('b-block')</code>. Instead of providing a complete reference, I’d just highlight BEM trees as the API’s foundation.</p> <h4>Modify Modifiers to Control Controls</h4> <p>The previous section leaves the important subject of application state changes unaddressed. When app states are declared, you need a way to perform transitions. This should be done by operating on a BEM tree, with the help of modifiers. BEM modifiers can be set directly on DOM nodes (as class names), but we cannot effectively monitor that (for technical reasons). Instead, <code>i-bem.js</code> provides a simple API that you can use as inspiration:</p> <pre><code>// setter this.setMod(modName, modVal); // getter this.getMod(modName); // check for presence this.hasMod(modName, modVal); // toggle this.toggleMod(modName, modVal); // remove modifier this.delMod(modName); </code></pre> <p>Thus, we can internally hook into the modifier change call and run all of the actions specified for this particular case.</p> <h4>BEM-Oriented Code Explained</h4> <p>Many JavaScript libraries provide enough power to support the BEM methodology without introducing a completely new tool chain. Here’s a check list to see whether the one you’re looking at does so:</p> <ul> <li><strong>Embraces a declarative approach</strong></li> <li><strong>Defines your website or app in BEM’s terms</strong><br /> Can many of the project’s existing entities be “mapped” to blocks, elements and modifier properties?</li> <li><strong>Allows you to drop the DOM tree for the BEM tree</strong><br /> Regardless of any particular framework API, wipe out as much of the raw DOM interaction as you can, replacing it with BEM’s tree interaction. During this process, some of the nodes you work with will be redefined as blocks or elements; name them, and see how the true semantic structure of your application reveals itself.</li> <li><strong>Uses modifiers to work with state transitions</strong><br /> Obviously, you shouldn’t define all states with modifiers. Start with the ones that can be expressed in CSS (to hide and reveal elements, to change style based on states, etc.), and clean your code of any direct manipulation of style.</li> </ul> <p>If your framework of choice can do this, then you are all set for BEM-oriented code.</p> <p>jQuery users could try these lightweight plugins to extend their code with BEM methods:</p> <ul> <li><a class="colorbox" href="http://xslc.org/jquery-bem/">jQuery BEM</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#5">5</a></sup> plugin</li> <li><a class="colorbox" href="http://github.com/ingdir/jquery-bemhelpers/">jQuery BEM Helpers</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#6">6</a></sup> (<code>setMod</code> and <code>getMod</code>)</li> </ul> <h3>From A Naming Convention To A Style Guide</h3> <p>If you work a lot with designers, your team would also benefit from a BEM approach. Imagine that you had a style guide created by a Real Designer™. You would usually get it as a PDF file and be able to learn everything about the project’s typefaces, color schemes, interface interaction principles and so on. It serves perfectly as a graphic book that is interesting to look at in your spare time. However, it would be of little to no use to most front-end developers — at the level of code, front-end developers operate with totally different entities.</p> <p>But what if you and the designer could speak with each other using the same language? Of course, this would require some training, but the benefits are worth it. Your style guide would be an interactive block library, expressed in BEM terms. Such a library would consist of blocks that are ready to be used to build your product.</p> <p><strong>Once the designer is familiar with BEM’s terms, they can iterate towards designing blocks and elements, instead of “screens.”</strong> This will also help them to identify similar UI parts and unify them. Modifiers help to define visual variations (i.e. which apply to all blocks) and states (i.e. for interactive blocks only). The blocks would be granular enough to enable you to make an early estimation of the amount of work that needs to be done. The result is a specification that fully covers all important states that can be reused with other screens or pages.</p> <p>This eventually allows you to mock up interfaces as wireframes or sketches, because all of the building blocks have already been defined. More importantly, this model maps directly to the code base, because the blocks, elements and modifiers defined by the designer are essentially the same blocks, elements and modifiers that the developer will implement. If you have been using BEM in your project for some time, then certain blocks are probably already available.</p> <p>The biggest change, however, is closing the gap between screen and code by operating on the same entities in the UI design and development. Like the famous Babel fish, BEM enables you to understand people who have no idea how your code works.</p> <p>On a bigger team, working on individual blocks is easier because it can be done in parallel, and big features do not end up being owned by any one developer. Instead, you share the code and help each other. The more you align the JavaScript HTML and CSS with BEM, the less time you need to become familiar with new code.</p> <h3>BEM As High-Level Documentation</h3> <p>Despite all advice, developers still don’t write enough documentation. Moving projects between developers and teams is non-trivial. Code maintenance is all about minimizing the time a developer needs to grasp a component’s structure.</p> <p>Documentation helps a lot, but let’s be honest, it usually doesn’t exist. When it does exist, it usually covers methods, properties and APIs, but hardly anything about the flow of components, states or transitions. With minimally structured BEM-oriented code, you will immediately see the following:</p> <ul> <li>the elements you’re dealing with,</li> <li>other blocks you depend on,</li> <li>states (modifiers) that you need to be aware of or support,</li> <li>element modifiers for fine-grained control.</li> </ul> <p>Explaining with examples is easier. What would you say about the following block?</p> <pre><code>b-popup _hidden _size _big _medium _large _dir _left _right _top _bottom _color-scheme _dark _light __anchor-node __popup-box __close-btn __controls __ok __cancel </code></pre> <p>By now, <em>you</em> can tell <em>me</em> what this block is about!</p> <p>Remember, you’ve seen zero documentation. This block could be a structure that you’ve defined in a CSS preprocessor or a YAML meta description.</p> <h3>BEM And File Structure</h3> <p>In a growing project, an inconsistent file structure could slow you down. The structure will only become more complex and less flexible with time. Unfortunately, tools and frameworks do not solve the problem because they either deal with their own internal data or offer no specific structure at all. You and only you must define a structure for the project. Here, BEM can help as well.</p> <h4>Block Library</h4> <p>A block’s folder is the basis of all BEM-based file structures. Block names are unique within the project, as are folder names. Because blocks do not define any hierarchies, keep block folders as a flat structure:</p> <pre><code>/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field </code></pre> <p>Libraries and other dependencies may be defined as blocks, too. For example:</p> <pre><code>/blocks … /b-jquery /b-model </code></pre> <p>Inside each folder, the easiest arrangement would be to give each “technology” a distinct file:</p> <pre><code>/b-menu b-menu.js b-menu.css b-menu.tpl </code></pre> <p>A more advanced approach would be to store some definitions of elements and modifiers in separate subfolders and then implement in a modular way:</p> <pre><code>/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl </code></pre> <p>This gives you control, but it also requires more time and effort to support the structure. The choice is yours.</p> <h4>Redefinition Levels</h4> <p>What if you need to extend the styles and functionality of components or share code between projects without changing (or copying and pasting) the original source?</p> <p>Big web apps, sections and pages could be significantly different, as could be the blocks they use. At the same time, a shared block library often has to be extended, individual items redefined and new items added. BEM addresses this with the concept of redefinition levels. As long as you’ve chosen a file structure, it should be the same for any block. That’s why several block libraries can be on different levels of an application.</p> <p>For example, you could have a common block library as well as several specific libraries for individual pages:</p> <pre><code>/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard … </code></pre> <p>Now, <code>/common/blocks</code> will aggregate blocks used across the whole app.</p> <p>For each page (as for <code>/pages/intro</code> in our example), we define a new <strong>redefinition level</strong>: A specific library, <code>/pages/intro/blocks</code>, adds new blocks and extends some common ones (see the extra <code>_decorated</code> modifier for the common <code>b-heading</code> block).</p> <p>Your build tool can use these levels to provide page-specific builds.</p> <p>Separation of libraries can be based on the form factors of devices:</p> <pre><code>/common.blocks /desktop.blocks /mobile.blocks </code></pre> <p>The <code>common</code> library stays “on top,” while the <code>mobile</code> or <code>desktop</code> block bundle extends it, being the next redefinition level. The same mechanism applies when several different projects need to share blocks or when a cross-project common block library exists to unify the design and behavior across several services.</p> <h4>The Build Process</h4> <p>We’ve ended up with many small files, which is good for development but a disaster for production! In the end, we want all of the stuff to be loaded in several big chunks. So, we need a build process.</p> <p>Yandex has an open-source build tool, <a class="colorbox" href="http://bem.info/articles/borschik">Borschik</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#7">7</a></sup>, which is capable of building JavaScript and CSS files and then compressing and optimizing them with external tools, such as <a class="colorbox" href="https://github.com/mishoo/UglifyJS">UglifyJS</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#8">8</a></sup> and <a class="colorbox" href="https://github.com/css/csso">CSS Optimizer</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#9">9</a></sup>. Tools like <a class="colorbox" href="http://requirejs.org/">RequireJS</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#10">10</a></sup> can also facilitate the building process, taking care of dependency tracking.</p> <p>For a more comprehensive approach, have a look at <a class="colorbox" href="http://bem.info/tools/bem/">bem-tools</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#11">11</a></sup>.</p> <p>The clearest lesson I’ve learned from BEM is not to be afraid of granularity, as long as you know how to build the whole picture.</p> <h3>Beyond Frameworks</h3> <p>For a while, I was pretty skeptical that BEM is suitable for small projects. My recent experience in a startup environment proved me wrong. BEM is not just for big companies. It works for everyone by bringing unified semantics across all of the front-end technologies that you use.</p> <p>But that is not the biggest impact of the BEM methodology on my projects. BEM enables you to see beyond frameworks. I remember times when people seriously discussed the best ways to bind event handlers to elements, and when DOM libraries competed for world dominance, and when frameworks were the next big buzz. Today, we can no longer depend on a single framework, and BEM takes the next step by providing a design foundation, giving us a lot of freedom to implement.</p> <p>Visit the <a class="colorbox" href="http://bem.info/">BEM</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#12">12</a></sup><sup><a class="colorbox" href="http://www.smashingmagazine.com/#1">1</a></sup> website for extra resources, GitHub links, downloads and articles.</p> <p>Long story short, BEM it!</p> <p><em>(al, il)</em></p> <h4>Footnotes</h4> <ol> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-1">1 http://bem.info</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-2">2 http://yandex.com</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-3">3 mailto:info@bem.info</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-4">4 http://nicolasgallagher.com/about-html-semantics-front-end-architecture/</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-5">5 http://xslc.org/jquery-bem/</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-6">6 http://github.com/ingdir/jquery-bemhelpers/</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-7">7 http://bem.info/articles/borschik</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-8">8 https://github.com/mishoo/UglifyJS</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-9">9 https://github.com/css/csso</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-10">10 http://requirejs.org</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-11">11 http://bem.info/tools/bem/</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-12">12 http://bem.info</a></li> </ol> <p>The post <a class="colorbox" rel="nofollow" href="http://www.smashingmagazine.com/2014/07/17/bem-methodology-for-small-projects/">Scaling Down The BEM Methodology For Small Projects</a> appeared first on <a class="colorbox" rel="nofollow" href="http://www.smashingmagazine.com/">Smashing Magazine</a>.</p> <div class="fixed"></div> </div> <div class="under"> <span class="categories">Categories: </span><span><a href="http://www.webmastersgallery.com/category/uncategorized/" rel="category tag">Others</a></span> <span class="tags">Tags: </span><span></span> </div> </div> <div class="post" id="post-1964"> <h2><a class="title" href="http://www.webmastersgallery.com/2014/07/16/how-to-profit-from-selling-digital-products-part-2/" rel="bookmark">How To Profit From Selling Digital Products (Part 2)</a></h2> <div class="info"> <span class="date">July 16th, 2014</span> <span class="author"><a href="http://www.webmastersgallery.com/author/admin/" title="Posts by admin" rel="author">admin</a></span> <span class="comments"><a href="http://www.webmastersgallery.com/2014/07/16/how-to-profit-from-selling-digital-products-part-2/#respond">No comments</a></span> <div class="fixed"></div> </div> <div class="content"> <div class="ftpimagefix" style="float:none"><a class="colorbox" href="http://feedproxy.google.com/~r/SmashingMagazine/~3/wwJu-SO6qq0/"><img decoding="async" title="" src="http://www.smashingmagazine.com/wp-content/uploads/2014/07/6-gumroad-payment-500-opt.jpg" alt="Gumroad's payment box"></a></div> <p>This is the second and final article on how to sell and profit from digital products. In <a class="colorbox" href="http://www.smashingmagazine.com/2014/07/10/how-to-profit-from-selling-digital-products-part-1/">part 1</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#1">1</a></sup>, we covered many of the benefits of digital products over physical goods as well as the marketing philosophies to help you build an audience for your products. Today, we will be discussing more of the tactics required for a successful digital product business. There’s also a dark side to this world, which we’ll get into towards the end.</p> <p>Let’s jump in.</p> <h3>Sales And Fulfillment</h3> <p>Remember how one of the best things about digital products is that you don’t have to ship anything? Your profit margins are much higher, and fulfilling orders is so much easier! You still have to deliver the product to the customer, but e-commerce software will do that for you, so you don’t have to be involved at all.</p> <p>This means you can be sipping Mai Tais on the beach or (more likely for me) playing with the kids while people are buying your product.</p> <p>To set this up, you need some kind of software to show the product, accept purchases, process credit cards and then make the file available to be downloaded by the customer. PayPal has been the industry standard for more than 10 years, but it also hasn’t improved much in that time.</p> <p>In fact, digital e-commerce solutions (at least the ones that are best for selling standalone products) were pretty stagnant until <a class="colorbox" href="http://gumroad.com/">Gumroad</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#8">8</a></sup><sup><a class="colorbox" href="http://www.smashingmagazine.com/#2">2</a></sup> launched a couple years ago.</p> <p>When I was working on selling my first book, <a class="colorbox" href="http://nathanbarry.com/app-design-handbook"><em>The App Design Handbook</em></a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#3">3</a></sup>, Ryan from Gumroad reached out to me to get me to consider the platform. I had a few questions about particular features, but what really sold me was the fantastic checkout experience.</p> <p>The world of online payments has always been plagued by a frustrating checkout process, unnecessary fields and other design failures that make customers abandon their purchases. Gumroad changed that. Its checkout process is incredibly simple and elegant. The result is more purchases from less-frustrated customers.</p> <p>Because my first books were about designing great software experiences, I felt that using a payment provider with a second-rate checkout process would be hypocritical.</p> <h4>All in One</h4> <p>Gumroad handles the checkout process from end to end. With many other providers, you need one tool to handle checkouts and deliver the file and another tool to process the actual payment. With Gumroad, one tool does everything. You upload the product, add your banking information (so that you can get paid) and start accepting sales!</p> <h4>The Overlay</h4> <p>Normally, you would need to set up quite a bit in order to get e-commerce working directly on your website. Linking to the payment page on a third-party website is easy, but keeping the customer from ever leaving your domain is more work (both in configuration and security).</p> <figure><sup><a class="colorbox" href="http://www.smashingmagazine.com/#4">4</a></sup><figcaption>Gumroad’s payment box. (<a class="colorbox" href="http://www.smashingmagazine.com/wp-content/uploads/2014/07/6-gumroad-payment-large-opt.jpg">View large version</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#5">5</a></sup>)</figcaption></figure> <p>So, one of my favorite features of Gumroad is its overlay checkout process. The checkout button on your sales page will trigger a modal overlay that contains the entire checkout process. Because that happens in a secure window, you don’t need to worry about security on your website, but you still get the benefits of the customer never leaving your website to pay.</p> <h4>No, I’m Not Being Paid by Gumroad</h4> <p>Yep, I love Gumroad. And, no, I’m not being paid to endorse it. Quite the opposite. I’ve paid Gumroad over $20,000 in payment-processing fees in the last one and a half years, and I’m still their biggest fan!</p> <h3>Product Launches</h3> <p>Once you’ve identified your market and set up your sales page and credit-card processing system, you’re ready to start accepting sales, right? Wrong.</p> <p>Product launches fail for a number of reasons, and the most common is that the customer hears something like the following leading up to the launch: Silence… silence… silence… “Go buy now!”</p> <p>Compelling, isn’t it? I know that would make me want to buy… not.</p> <h4>A Good Launch Requires a Launch Sequence</h4> <p>After blogging for a while and successfully launching <em>The App Design Handbook</em> and <em>Designing Web Applications</em>, I had an email list of about 5,000 designers. Because a few friends had been successful with online workshops, I wanted to try them as well. The result was a carefully planned (at least for the content) workshop on “Designing Web Applications.” I sold seats for $400 each and capped attendance at 25 people.</p> <p>I thought this was going to be easy. I’d already done the hard work of building an audience, so my thought process was, “With an email list of 5,000 designers, how hard could it be to sell out 25 seats?”</p> <p>With that mindset, I devised a strategy consisting of one email — which I thought was a really good email — to launch the workshop. The email was educational but tied nicely into a sales pitch at the end.</p> <h4>Monitoring Sales</h4> <p>After hitting “Send,” I tabbed over to Gumroad and waited for the sales to roll in. You know what? They didn’t come.</p> <p>That really confused and frustrated me at first. In my previous product launches, I had seen up to $1,000 in sales within the first 10 minutes of launching. Why was this different?</p> <h4>Anticipation</h4> <p>When was the last time you bought a product within a few minutes — or even an hour — of hearing about it for the first time? That doesn’t happen often.</p> <p>If you see a product that you sort of like and have the opportunity to buy it right then, chances are you will put it off until a bit later, and then completely forget to purchase.</p> <p>With my previous launches, I had built up the anticipation over weeks. Every time I talked about it, the likely buyers got more and more excited. Then I gave a clear date for when the product would be available for purchase.</p> <h4>Providing Every Detail</h4> <p>The day before launch, I would send out an email providing every bit of information that my subscribers would need to make a purchase. The email covered the benefits of the product, pricing information and even frequently asked questions (which actually hadn’t been asked yet).</p> <p>The one thing the email didn’t include was a link to buy the product.</p> <p>Instead, I told them exactly when the product would be available (for example, 8:00 am EST tomorrow) and to expect another email from me at that time.</p> <p>I was trying to get each person on my prelaunch list to decide whether to buy the product before giving them the opportunity to buy. The last thing you want is someone thinking, “Oh, that’s an interesting product — I should buy it. Well, my credit card isn’t handy. I’ll buy it later.”</p> <p>If that happens, they will usually forget and not come back to buy.</p> <h4>Launch</h4> <p>Then, on launch day, my job was easy. I wrote a simple email saying, “Hey, the product is ready. Buy it here.” And I hit “Send.”</p> <p>Whenever I followed that process, with anticipation building up over weeks or months, I’ve made at least $1,000 in the first 10 minutes after launching.</p> <p>It’s the times when I got lazy and cut straight to the sales pitch that my product flopped.</p> <p>If you want to have a successful launch, then repeat after me: “In order to have a successful launch, I will build up anticipation and excitement before giving my customers an opportunity to buy.”</p> <h3>Dealing With Fraud</h3> <p>Fraud is an unfortunate side effect of selling online. Until I started selling books, I had no idea how common fraudulent payments actually are. In fact, it didn’t even make sense to me why someone would buy my books with a stolen credit card.</p> <p>It turns out that there is a reason why criminals want to buy ebooks about designing better software. It’s not because they want to get into designing iPhone apps as a side business. Rather, they need to validate the credit cards they’ve stolen.</p> <p>Let’s say Joe the criminal has bought a list of thousands of stolen credit card numbers. Most of the numbers are no longer valid, so he needs a way to easily find which numbers can still be used to purchase products. That’s where my ebooks and your digital products come in. Joe writes a program that automatically attempts to make a purchase one card at a time until a number isn’t denied.</p> <p>Then, Joe takes that valid number and either goes on Amazon to buy physical products (ones that have resale value) or creates a physical card and has someone make purchases at the local mall (again, physical products).</p> <h4>Why I Was Upset About $1,500 in Sales</h4> <p>Just last week I saw a huge spike in sales. Nearly $2,000 in a single morning is pretty awesome! At first, I figured that an article must have mentioned one of the books, driving traffic over. Then, I looked more closely at the sales. A single email address was responsible for $1,500.</p> <p>This person had purchased the top-tier package of two of my design books ($250 each). That happens sometimes, so it wasn’t odd. But I saw that they had also purchased a team license for one of the books ($1,000). Why would you purchase both the complete package and the team license of the same book? That didn’t make sense.</p> <p>I plugged the email address into Rapportive (a Gmail plugin for finding out about email addresses). If the address belonged to a design or development shop, I wouldn’t have been surprised, but Rapportive didn’t pull up any kind of profiles from around the web, meaning that the email address was most likely a throwaway and that the purchase was fraudulent.</p> <p>One of the reasons I love selling on Gumroad is that I was able to just refer the purchases to its support team, which quickly verified that they were fraudulent. The charges were refunded and I moved on with my day.</p> <h4>Chargebacks</h4> <p>You might be thinking, “Why not just keep the money and hope that the original card owner never finds out?” Besides being morally questionable, doing that can hurt you financially.</p> <p>Have you ever looked through your credit-card statement and found a charge you didn’t recognize? Chances are you called your credit-card company and told them that you didn’t make that purchase and asked for it to be refunded. That’s called a chargeback. It’s a wonderful part of using your credit card for online purchases. Your credit-card company protects you from liability if your card number is stolen. That’s fantastic for the consumer — not for the merchant.</p> <p>Do you think the credit-card company or bank swallows the cost of that fraudulent purchase? Nope. They pass it on to the merchant — that is, you and me and anyone who makes a living from selling digital products online.</p> <p>When a chargeback occurs, the bank takes the money out of your account, so it’s like the purchase never happened — except that the bank adds a fee. The amount of the fee depends on the payment provider. Stripe charges $15, and PayPal charges $20 (although only sometimes). This means that, after refunding the customer, you still have to pay the fee on top of the lost revenue!</p> <h4>Stopping Fraud</h4> <p>That’s why catching fraud early is so important. You don’t want to be liable for the extra fee for each chargeback. Gumroad has fantastic fraud prevention. For starters, it has excellent security measures to detect fraud purchases and prevent them at checkout. If something does get through, it covers all of the refund and chargeback fees.</p> <p>If a fraudulent charge gets through and a chargeback is issued, you only lose what the customer paid and aren’t liable for any other fees that other payment-processing companies might charge.</p> <h4>Fighting Chargebacks</h4> <p>Not all chargebacks are because of fraudulent purchases. Sometimes a customer buys a product, decides they don’t like it and calls their bank to ask for a refund instead of talking to you directly. This sucks because it can be expensive for the merchant. So, to all customers out there, please don’t ever request a chargeback unless you have first talked to the seller and requested a refund!</p> <p>That’s part of the reason why I always issue refunds when asked. Risking a chargeback is just not worth it. Just refund the money and move on.</p> <p>If the purchase was obviously fraudulent, then you have very little recourse to dispute the chargeback. But if you can prove that the purchase was made by the owner of the card, then there is a decent chance you will win the chargeback, keep the money and avoid having to pay the additional fees. Some people are scammy enough to buy a product, use it and then issue a chargeback, even though nothing is wrong with the product.</p> <p>When a legitimate purchase is charged back, Gumroad will actually fight the bank on your behalf to try to win the dispute. It does this by sending a nicely formatted document to the credit-card company showing who made the purchase, where they were at the time, and other information to prove that the owner of the card made the purchase.</p> <p>It’s hard for a customer to dispute a purchase when they submitted information that matches their information on file with the credit-card company and did it from their home IP address.</p> <h4>Don’t Let Fraud Discourage You</h4> <p>This whole process is frustrating sometimes. A lot of seedy characters use the Internet for crime, and sometimes your products are a tool in their larger scheme. It happens.</p> <p>First, don’t stress about it. Many things are out of your control. But secondly, sell through a provider that will prevent fraud, fight chargebacks and cover all of the fees in the process. Being relaxed about online fraud is easy when I know that the team at Gumroad has my back.</p> <h3>Theft And Piracy</h3> <p>One of the most common questions I get is, “How do you prevent people from stealing your product?”</p> <p>You don’t.</p> <p>Look at the movie industry. It has massive amounts of money and has spent many fortunes on digital rights management (DRM) to prevent unauthorized viewing of its movies. Has it worked?</p> <p>Not at all. A quick Google search shows download links for any popular movie. Those who want to pirate your content will. You can do nothing about it.</p> <p>The only thing you will accomplish by adding DRM or the like is upsetting your customers. Everyone who pays will feel like you don’t trust them and will resent the inconvenience you’ve added just for them to use the product they’ve legitimately paid for. Starting a relationship with a customer by telling them you don’t trust them is not a good idea.</p> <h4>Really?</h4> <p>Yep, I don’t do anything to prevent my books from being pirated. Instead, I focus on the customers who have paid and will continue to pay for more products. It’s not worth worrying about something you can’t control.</p> <h4>One Thing You Can Do</h4> <p>In the last few weeks, I have started doing one thing. Sometimes these torrent and free-download websites will pop up on the first page of Google’s search results. That’s not good. I’d rather that people who are searching for a way to buy my book not be shown a way to pirate it on the first page of results.</p> <p>So, every so often I have someone on my team go through the results and submit takedown requests to Google, which is really good about removing the results from its search engine.</p> <p>I don’t “go after” anyone. I just try to get the links unlisted from Google. It takes maybe 30 minutes every few months and makes me feel better.</p> <h4>One More Thing</h4> <p>While I was traveling with my family a year or so ago, I got a rather frustrated email from a purchaser of <em>The App Design Handbook</em>. He said, “I bought your book on Amazon, but the formatting is all messed up and the book is barely readable!”</p> <p>A couple of things bothered me about this email. First, I care about design, so the reading experience ought to be good. That’s important to me, so clearly something had gone wrong. Secondly, I don’t sell my books on Amazon. That’s what confused me most.</p> <p>After a few more emails and a little research, I learned that someone had stolen my book (to be expected) and was selling it on Amazon and pocketing the profit (not to be expected). Luckily, Amazon took it down, and the gentleman got a refund. So, if you complain about people stealing your work, just remember that at least they aren’t selling it.</p> <h3>The Power Of An Audience</h3> <p>The last two years of my life have been crazy. I quit my job, started selling digital products, doubled my annual income, wrote more books and doubled my annual income again.</p> <p>Many tactics helped in the process (including the ones we’ve just covered), but none of it would have happened without my readers. I made the decision early on to focus on teaching and sharing everything I learn.</p> <p>Those readers are the ones who have enabled me to sell books, teach workshops in cities around the world, get paid to travel and get access to so many people whom I now call friends.</p> <h4>A Portfolio Approach</h4> <p>When I started selling digital products, I was going for a “portfolio” approach. I would pursue any project that I thought could get a return on my investment.</p> <p>My idea was that I needed to replace the salary from my design job ($5,000 a month), so I would stack revenue from these otherwise unrelated apps together until it reached that magic number.</p> <p>I had products for small-business owners, speech language pathologists, students, sign-language interpreting agencies and productivity enthusiasts. Yes, each one got me closer to my $5,000 a month goal, but my time got scattered.</p> <h4>An Audience-Centered Approach</h4> <p>Anytime I worked on promoting OneVoice, my app for speech language pathologists, it did nothing to benefit <a class="colorbox" href="https://itunes.apple.com/us/app/commit/id473527073?mt=8">Commit</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#6">6</a></sup>, my app for productivity enthusiasts.</p> <p>There was no overlap between those two audiences. The same with promoting the flash cards app and the ebook about design: zero meaningful overlap.</p> <p>That meant that each bit of effort I put into promotion benefitted only a single product.</p> <p>I’ve since changed that approach to focus on serving a single audience — well, really two overlapping audiences: designers and marketers. The topics are ones I care about deeply, so I can write about them without getting bored. More importantly, any effort I put into promoting <em>The App Design Handbook</em> also helps to market <em>Designing Web Applications</em>.</p> <p>Every hour I put in returns twice the results (or more) in revenue.</p> <h4>Serve the Needs of a Single Audience</h4> <p>I still have a portfolio approach to products. My revenue this year comes from at least six distinct products. But they all serve a single audience (at least as closely as possible).</p> <p>Think about the audience for your product. What else do they need? How else can you help them? Could you provide tools or training on top of what you already offer?</p> <h3>How To Get Started</h3> <p>Hopefully, through this series of articles, you’ve learned enough theory and tactics to make your digital products successful. Here’s how to get started:</p> <ol> <li>Decide on what to sell. If you don’t already know, look at the byproducts you create in your everyday work.</li> <li>Plan what you will teach or what stories you will share to attract attention.</li> <li>Set up a landing page and email-marketing app to build your list (use <a class="colorbox" href="https://convertkit.com/">ConvertKit</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#7">7</a></sup>).</li> <li>Create your product.</li> <li>Decide on how to price your products. If possible, use multiple price tiers to increase revenue.</li> <li>Set up an account on <a class="colorbox" href="http://gumroad.com/">Gumroad</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#8">8</a></sup><sup><a class="colorbox" href="http://www.smashingmagazine.com/#2">2</a></sup> to sell your product.</li> <li>Set a launch day, and build up to the launch with a sequence of information and training.</li> <li>Launch the product and start selling!</li> <li>Take a break.</li> </ol> <p>Strategize where to go from here and how to use your audience to meet your long-term goals, whatever they may be.</p> <h4>That’s It</h4> <p>This concludes the series. I hope you’ve learned some valuable techniques to make selling digital products more profitable!</p> <p>If you’d like to keep learning, I’ve written a free course that goes into more detail on using email marketing to increase sales: “<a class="colorbox" href="https://app.convertkit.com/marketing/sellingmore?ref=smashing">5 Days to Selling More Through Email Marketing</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#9">9</a></sup>.”</p> <p><em>(al, il, ml)</em></p> <h4>Footnotes</h4> <ol> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-1">1 http://www.smashingmagazine.com/2014/07/10/how-to-profit-from-selling-digital-products-part-1/</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-2">2 http://gumroad.com</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-3">3 http://nathanbarry.com/app-design-handbook</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-4">4 http://www.smashingmagazine.com/wp-content/uploads/2014/07/6-gumroad-payment-large-opt.jpg</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-5">5 http://www.smashingmagazine.com/wp-content/uploads/2014/07/6-gumroad-payment-large-opt.jpg</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-6">6 https://itunes.apple.com/us/app/commit/id473527073?mt=8</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-7">7 https://convertkit.com</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-8">8 http://gumroad.com</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-9">9 https://app.convertkit.com/marketing/sellingmore?ref=smashing</a></li> </ol> <p>The post <a class="colorbox" rel="nofollow" href="http://www.smashingmagazine.com/2014/07/16/how-to-profit-from-selling-digital-products-part-2/">How To Profit From Selling Digital Products (Part 2)</a> appeared first on <a class="colorbox" rel="nofollow" href="http://www.smashingmagazine.com/">Smashing Magazine</a>.</p> <div class="fixed"></div> </div> <div class="under"> <span class="categories">Categories: </span><span><a href="http://www.webmastersgallery.com/category/uncategorized/" rel="category tag">Others</a></span> <span class="tags">Tags: </span><span></span> </div> </div> <div class="post" id="post-1965"> <h2><a class="title" href="http://www.webmastersgallery.com/2014/07/16/skys-the-limit-40-fresh-and-free-photoshop-text-effects/" rel="bookmark">Sky’s The Limit: 40 Fresh and Free Photoshop Text Effects</a></h2> <div class="info"> <span class="date">July 16th, 2014</span> <span class="author"><a href="http://www.webmastersgallery.com/author/admin/" title="Posts by admin" rel="author">admin</a></span> <span class="comments"><a href="http://www.webmastersgallery.com/2014/07/16/skys-the-limit-40-fresh-and-free-photoshop-text-effects/#respond">No comments</a></span> <div class="fixed"></div> </div> <div class="content"> <div class="ftpimagefix" style="float:none"><a class="colorbox" href="http://feedproxy.google.com/~r/Noupe/~3/dbTvzyJNFOo/skys-the-limit-40-fresh-and-free-photoshop-text-effects-83319.html"><img decoding="async" src="http://statisches.auslieferung.commindo-media-ressourcen.de/advertisement.gif" alt="" border="0"></a></div> <table width="650"> <tr> <td width="650"> <div> <br /> <a class="colorbox" href="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=target&collection=noupe-rss&position=2" target="_blank"><img decoding="async" src="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=image&collection=noupe-rss&position=2" border="0" alt=""></a> <a class="colorbox" href="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=target&collection=noupe-rss&position=3" target="_blank"><img decoding="async" src="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=image&collection=noupe-rss&position=3" border="0" alt=""></a> </div> </td> </tr> </table> <p><a class="colorbox" href="http://www.noupe.com/design/skys-the-limit-40-fresh-and-free-photoshop-text-effects-83319.html" title="Sky’s The Limit: 40 Fresh and Free Photoshop Text Effects"><img decoding="async" src="http://www.noupe.com/wp-content/uploads/2014/07/40-fresh-photoshop-text-effects-july-2014-playing-with-type.jpg" alt=""></a></p> <p>Text effects in Photoshop are an art not too many know how to achieve. At least not when we are expecting noteworthy effects. Still, a strong typographic logo or eyecatcher of any other kind is granted to draw a good deal of attention to whatever you want to communicate. Text effects with Photoshop are not that easy, but no rocket science either. We have curated 40 fresh and free Photoshop text effects to get you going. Grab your Photoshop and read on…</p> <div class="fixed"></div> </div> <div class="under"> <span class="categories">Categories: </span><span><a href="http://www.webmastersgallery.com/category/uncategorized/" rel="category tag">Others</a></span> <span class="tags">Tags: </span><span></span> </div> </div> <div class="post" id="post-1961"> <h2><a class="title" href="http://www.webmastersgallery.com/2014/07/15/the-new-smashing-mystery-riddle-have-you-figured-it-out-yet/" rel="bookmark">The New Smashing Mystery Riddle: Have You Figured It Out Yet?</a></h2> <div class="info"> <span class="date">July 15th, 2014</span> <span class="author"><a href="http://www.webmastersgallery.com/author/admin/" title="Posts by admin" rel="author">admin</a></span> <span class="comments"><a href="http://www.webmastersgallery.com/2014/07/15/the-new-smashing-mystery-riddle-have-you-figured-it-out-yet/#respond">No comments</a></span> <div class="fixed"></div> </div> <div class="content"> <div class="ftpimagefix" style="float:none"><a class="colorbox" href="http://feedproxy.google.com/~r/SmashingMagazine/~3/vFoMJzRYTaQ/"><img decoding="async" alt="Smashing Book Mystery" src="http://provide.smashingmagazine.com/mystery-riddle-whistler/it-might-get-windy-in-whistler.gif"></a></div> <p>Ah, these <a class="colorbox" href="http://www.smashingmagazine.com/the-smashing-book-mystery-is-resolved-gifs-crazy-people-all-that-malarkey/">mystery</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#1">1</a></sup><a class="colorbox" href="http://www.smashingmagazine.com/the-mystery-resolved-the-rain-that-never-stops-frightened-cats-cake-is-a-lie/">riddles</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#2">2</a></sup><a class="colorbox" href="http://www.smashingmagazine.com/2014/03/31/the-mystery-is-resolved-a-story-of-invisible-letters-and-shady-characters/">never stop</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#3">3</a></sup>, do they? To celebrate the launch of the <a class="colorbox" href="http://www.smashingconf.com/whistler-2014/">SmashingConf Whistler</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#4">4</a></sup>, our very first conference in Canada, we’ve prepared a yet another riddle, and of course this time it’s not going to be any easier!</p> <p>So, how does it work this time? Well, below you’ll find the first of a few <strong>hidden animated GIFs that contain a secret Twitter hashtag</strong>. Your job is to deconstruct that hashtag as fast as possible. To do that, you have to pay attention to the file name and <strong>count objects</strong> within the GIF (for example, “3 chairs”) and search for them on Twitter (i.e. <code>#3chairs</code>).</p> <p>If your guess is right, you’ll find a tweet leading you to the next level. Once you’ve reached the last level (oh, you’ll know when), just <strong>tweet out all the hints in one single hashtag</strong> to <a class="colorbox" href="https://twitter.com/smashingmag">@smashingmag</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#5">5</a></sup> on Twitter! Not <em>that</em> difficult, right?</p> <p>Alright, let’s get to business. Are you ready? Action! (And good luck!)</p> <p><sup><a class="colorbox" href="http://www.smashingmagazine.com/#6">6</a></sup><br /><em>Tip: Watch out for a hint in one of the frames in each of the GIFs. <a class="colorbox" href="http://provide.smashingmagazine.com/mystery-riddle-whistler/it-might-get-windy-in-whistler.gif">Large view.</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#7">7</a></sup></em></p> <h3>So, What Can You Win?</h3> <p>We’ll raffle a quite extraordinary, <em>smashing</em> prize (and a couple of other Smashing extras, see below) to the first couple of readers who tweet out the correct hidden hashtags to us!</p> <ul> <li>a <strong>roundtrip flight to Whistler, Canada</strong>,</li> <li>full accommodation in a fancy hotel,</li> <li>a ticket to the <a class="colorbox" href="http://www.smashingconf.com/whistler-2014/">Smashing Conference Whistler 2014</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#8">8</a></sup>,</li> <li>any Smashing workshop ticket of your choice,</li> <li>full access to the Smashing eBook Library,</li> <li>a signed edition of the <a class="colorbox" href="https://shop.smashingmagazine.com/smashing-book-4-new-perspectives-on-web-design.html?pk_campaign=front-page-shop">Smashing Book #4</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#9">9</a></sup>,</li> <li>a truly Smashing laptop bag,</li> <li>your very own Smashing caricature, designed just for you.</li> </ul> <p>Please notice that to avoid spoilers, <strong>comments are closed for this post</strong>. And sorry, we aren’t going to make it too easy for you. The winners will be announced on Saturday, July 19th.</p> <p>Alright! Let’s get to work. Or have you already figured it out? 😉</p> </p> <h4>Footnotes</h4> <ol> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-1">1 http://www.smashingmagazine.com/the-smashing-book-mystery-is-resolved-gifs-crazy-people-all-that-malarkey/</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-2">2 http://www.smashingmagazine.com/the-mystery-resolved-the-rain-that-never-stops-frightened-cats-cake-is-a-lie/</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-3">3 http://www.smashingmagazine.com/2014/03/31/the-mystery-is-resolved-a-story-of-invisible-letters-and-shady-characters/</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-4">4 http://www.smashingconf.com/whistler-2014/</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-5">5 https://twitter.com/smashingmag</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-6">6 http://provide.smashingmagazine.com/mystery-riddle-whistler/it-might-get-windy-in-whistler.gif</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-7">7 http://provide.smashingmagazine.com/mystery-riddle-whistler/it-might-get-windy-in-whistler.gif</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-8">8 http://www.smashingconf.com/whistler-2014/</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-9">9 https://shop.smashingmagazine.com/smashing-book-4-new-perspectives-on-web-design.html?pk_campaign=front-page-shop</a></li> </ol> <p>The post <a class="colorbox" rel="nofollow" href="http://www.smashingmagazine.com/2014/07/15/new-smashing-mystery-riddle-figured-yet/">The New Smashing Mystery Riddle: Have You Figured It Out Yet?</a> appeared first on <a class="colorbox" rel="nofollow" href="http://www.smashingmagazine.com/">Smashing Magazine</a>.</p> <div class="fixed"></div> </div> <div class="under"> <span class="categories">Categories: </span><span><a href="http://www.webmastersgallery.com/category/uncategorized/" rel="category tag">Others</a></span> <span class="tags">Tags: </span><span></span> </div> </div> <div class="post" id="post-1962"> <h2><a class="title" href="http://www.webmastersgallery.com/2014/07/15/where-no-web-designer-has-gone-before-smashingconf-whistler-canada/" rel="bookmark">“Where No Web Designer Has Gone Before!” SmashingConf Whistler, Canada</a></h2> <div class="info"> <span class="date">July 15th, 2014</span> <span class="author"><a href="http://www.webmastersgallery.com/author/admin/" title="Posts by admin" rel="author">admin</a></span> <span class="comments"><a href="http://www.webmastersgallery.com/2014/07/15/where-no-web-designer-has-gone-before-smashingconf-whistler-canada/#respond">No comments</a></span> <div class="fixed"></div> </div> <div class="content"> <div class="ftpimagefix" style="float:none"><a class="colorbox" href="http://feedproxy.google.com/~r/SmashingMagazine/~3/ys_HHAU8RVw/"><img decoding="async" src="http://www.smashingmagazine.com/wp-content/uploads/2014/07/smashingconf-whistler-canada-520f.png" alt="SmashingConf Whistler, the first SmashingConf in Canada"></a></div> <p>What happens when you combine a <strong>practical front-end</strong> conference with a <strong>spectacular resort experience</strong>? Guess what: that’s exactly what we are going to find out with our very first <a class="colorbox" href="http://www.smashingconf.com/whistler-2014/">SmashingConf in Canada</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#1">1</a></sup>— taking place on <em>December 9–12th 2014</em> in a ski resort paradise <em>Whistler</em>, right next to Vancouver! Ah, right — <a class="colorbox" href="http://smashingconf.com/whistler-2014/registration">and tickets are now on sale.</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#2">2</a></sup></p> <p><sup><a class="colorbox" href="http://www.smashingmagazine.com/#3">3</a></sup></p> <h3>About The Conference</h3> <p>At Smashing Conferences, we take good care of the value that the event delivers to attendees. No speaker is selected randomly, no networking activity is an afterthought, and every single talk is thoroughly curated and reviewed. SmashingConf Whistler isn’t going to be an exception: with 2 days of <strong>heavily practical front-end <a class="colorbox" href="http://smashingconf.com/whistler-2014/speakers">talks</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#4">4</a></sup></strong> and 7 <strong>front-end + RWD <a class="colorbox" href="http://smashingconf.com/whistler-2014/workshops">workshops</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#5">5</a></sup></strong>, you’ll leave the conference with a treasure of useful tips and tricks applicable to your work right away.</p> <p>But it’s not just about tips and tricks though. Every project has issues, problems and valuable solutions that actually worked. That’s why we also feature lessons learned and solutions found, but also <strong>strategies, skills and tools</strong> you might need every single day. The conference will do just that — uncover front-end techniques and tools that worked, design approaches that worked and failed, <em>why</em> exactly they failed and what decisions were chosen instead.</p> <p><a class="colorbox" href="http://www.smashingconf.com/whistler-2014/"></a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#6">6</a></sup><br /><em><a class="colorbox" href="http://www.whistler.com/discover/">Whistler</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#7">7</a></sup>, a little paradise next to Vancouver, Canada. Quite smashing, isn’t it? As usual, we aim for an intimate conference experience with <a class="colorbox" href="http://www.smashingconf.com/whistler-2014/registration">just 400 available seats.</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#8">8</a></sup></em></p> <p><del>We like crowded multi-track conferences.</del> No, we don’t. We aim for a small, <strong>intimate</strong> conference experience with one single track and lots of networking before and after the event, with an attendees jam session, warm-up party and a cable car adventure! And this time it’s topped with spectacular resort adventures from <strong>skiing to ziplining</strong>, an ultimate Smashing skiing challenge and perhaps even occasional snowball fights — with extraordinary <a class="colorbox" href="http://smashingconf.com/whistler-2014/locations">scenery</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#9">9</a></sup> that will <em>smash</em> you away! Sounds like fun? It surely is!</p> <p>Ah, by the way, since the conference will take place right in the <strong>middle of the ski season</strong>, why don’t you bring along your family or colleagues, and enjoy a vacation that you well deserve together? We’ll do it, and so could you!</p> <p><a class="colorbox" href="http://smashingconf.com/whistler-2014/registration" title="Get the tickets. Only 400 seats are available."><img decoding="async" loading="lazy" src="http://www.smashingmagazine.com/wp-content/uploads/2014/07/get-the-tickets.png" width="270" height="103" alt="To the tickets"></a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#17">17</a></sup><sup><a class="colorbox" href="http://www.smashingmagazine.com/#10">10</a></sup></p> <h3>First Speakers and Workshops</h3> <p>Alright, speakers! The <a class="colorbox" href="http://smashingconf.com/whistler-2014/speakers">line-up of speakers</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#11">11</a></sup> and workshop coaches is almost complete now, but of course we aren’t going to reveal everything just yet. But let’s spice up a bit of your appetite: the first confirmed speakers are listed below. Ready? Set. Go!</p> <p><a class="colorbox" href="http://smashingconf.com/whistler-2014/speakers"><img decoding="async" src="http://www.smashingmagazine.com/wp-content/uploads/2014/07/first-speakers.png" width="500" alt="Smashing Conference Whistler"></a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#12">12</a></sup><br /><em>First confirmed speakers, John Allsopp and Lyza Danger Gardner. The venue has a few fireplaces, so guess who will be taking care of them!</em></p> <ul> <li><strong>John Allsopp</strong><br /><span>(Dao of Web Design, RWD)</span></li> <li><strong>Lyza Danger Gardner</strong><br /><span>(Mobile Strategy)</span></li> <li><strong>Paul Irish</strong><br /><span>(Performance, Google Chrome)</span></li> <li><strong>Susan Robertson</strong><br /><span>(Front-End, Style Guides)</span></li> <li><strong>Brad Frost</strong><br /><span>(Responsive Web Design)</span></li> <li><strong>Jenn Lukas</strong><br /><span>(Front-End, Workflow)</span></li> <li><strong>Tim Kadlec</strong><br /><span>(Front-End, Performance)</span></li> <li><strong>Val Head</strong> <br /><span>(CSS Animations)</span></li> <li><strong>Stephen Hay</strong><br /><span>(Front-End, RWD, Workflow)</span></li> <li><strong>Yoav Weiss</strong><br /><span>(Responsive Images Group)</span></li> <li><strong>Vitaly Friedman</strong><br /><span>(Responsive Web Design)</span></li> <li><strong>Mystery Speaker</strong><br /><span>(Someone you <em>definitely</em> know.)</span></li> <li><span>…more speakers will be announced soon!</span></li> </ul> <h3>Hands-On Workshops</h3> <p>We’ll also host <a class="colorbox" href="http://smashingconf.com/whistler-2014/workshops">hands-on full-day workshops</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#13">13</a></sup> with more in-depth practical learnings taught by well-respected designers and developers. Be it performance of responsive websites, UX/design patterns and responsive workflow, offline client-side storage, responsive images or CSS animation, we carefully selected topics that will help you become better at what you do. So if you are going to attend the conference, why not attend a workshop as well?</p> <p>In fact, if you <strong>book a workshop</strong> too, you’ll save $100 off the conference + workshop ticket price. Well, enough already. <a class="colorbox" href="http://www.smashingconf.com/whistler-2014/registration">Tickets are on sale now</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#14">14</a></sup>, you know.</p> <p><a class="colorbox" href="http://smashingconf.com/whistler-2014/locations" title="Whistler, Canada"><img decoding="async" src="http://www.smashingmagazine.com/wp-content/uploads/2014/07/10261964_10154285814895573_8817464965417247779_n.jpg" alt="Whistler, Canada"></a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#15">15</a></sup><br /><em>You deserve a spectacular vacation, don’t you think? Well, what if you combine attending a conference with a memorable skiing vacation? That’s what we thought! <a class="colorbox" href="http://www.smashingconf.com/whistler-2014/registration">Grab your ticket.</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#16">16</a></sup></em></p> <h3>Why This Conference Is For You</h3> <p>The conference is for you because you’ll learn quite a few valuable techniques for your workflow, and you’ll meet fantastic, like-minded people from the industry (no need to mention the ultimate <em>hiking-skiing-adventure-ziplining-snowboarding</em>-networking, right?!). You’ll learn:</p> <ol> <li>Strategies for building <strong>fast responsive websites</strong>,</li> <li>Guidelines for designing effective systems in complex projects,</li> <li>Front-end techniques for smart, delightful animations,</li> <li>How to build and maintain pattern libraries and style guides,</li> <li>How to use responsive images today without performance hits,</li> <li>Where icon fonts and SVG fit and how to use them properly,</li> <li>Tips and tricks for an efficient workflow in responsive projects,</li> <li>How to optimize the critical rendering path for better performance,</li> <li>Strategies for using offline client-side storage meaningfully today,</li> <li>Common issues, problems and solutions in responsive eCommerce,</li> <li>Guidelines for selecting an appropriate mobile strategy,</li> <li>Insights about effective and smart problem-solving,</li> <li>Guidelines for smarter front-end and CSS architecture,</li> <li>Advanced <strong>front-end tooling and setup</strong>,</li> <li>Mistakes and lessons learned from large projects,</li> <li>How to increase productivity and stay happy,</li> <li><span>…more practical takeaways from various areas of Web design.</span></li> </ol> <p><a class="colorbox" href="http://smashingconf.com/whistler-2014/registration" title="Get the tickets. Only 400 seats are available."><img decoding="async" loading="lazy" src="http://www.smashingmagazine.com/wp-content/uploads/2014/07/get-the-tickets.png" width="270" height="103" alt="To the tickets"></a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#17">17</a></sup><sup><a class="colorbox" href="http://www.smashingmagazine.com/#10">10</a></sup></p> <h3>Ticket Sales And Pricing</h3> <p>Only 400 tickets are available, and we do everything possible to keep our prices fair and affordable. The price for two full conference days is US$549 for <strong>early-bird</strong> tickets, and US$599 for regular tickets. And again, if you book a workshop as well, you’ll save US$100. Now, enough already±what exactly are you waiting for? You can <a class="colorbox" href="http://smashingconf.com/whistler-2014/registration">get your ticket right away.</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#18">18</a></sup></p> <p><a class="colorbox" title="8 reasons why you should send your incredibly hard-working, deserving employee to the SmashingConf" href="http://smashingconf.com/pdf/8-Reasons-For-SmashingConf-Whistler-2014.pdf"><img decoding="async" loading="lazy" src="http://www.smashingmagazine.com/wp-content/uploads/2014/01/convince-boss-preview-opt.png" width="450" height="288" alt="SmashingConf NY: Convince Your Boss PDF"></a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#19">19</a></sup><br /><em>“8 reasons why you should send your incredibly hard-working, deserving employee to the SmashingConf” (<a class="colorbox" href="http://smashingconf.com/pdf/8-Reasons-For-SmashingConf-Whistler-2014.pdf">PDF</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#20">20</a></sup>). Quite self-explanatory, really.</em></p> <p>Of course, we also prepared a neat <a class="colorbox" href="http://smashingconf.com/pdf/8-Reasons-For-SmashingConf-Whistler-2014.pdf">Convince Your Boss (PDF)</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#21">21</a></sup> (0.15 Mb) that you can use to convince your colleagues, friends, neighbors and total strangers to join you or send you to the event. We <em>know</em> that you will <em>not</em> be disappointed, and neither will they! Still not good enough? Well, just tweet us <em>@smashingconf</em> and we can convince your boss for you — yep, we can be quite convincing, indeed!</p> <h3>We Welcome Lovely Sponsors, You Know</h3> <p>We do everything possible to keep ticket prices affordable for everyone, and we welcome sponsors to help us create a truly unique, unforgettable conference experience. And you can be a major part of it.</p> <p>We have quite a number of attractive and creative sponsorship packages for you (<em>adventure sponsorship package</em>, anyone?), and we are also flexible and would love to adjust them to your needs. So if you’re interested, please <strong>email</strong> us at <a class="colorbox" href="mailto:hello@smashingconf.com">hello@smashingconf.com</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#22">22</a></sup> — we’d love for you to be involved!</p> <h3>See You In Whistler!</h3> <p>You’ll find all the information you might need about the <a class="colorbox" href="http://www.smashingconf.com/whistler-2014/locations">locations and hotels</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#23">23</a></sup> on the SmashingConf website. We are looking forward to seeing you in Whistler, and who knows, perhaps our paths cross at one of the snowboarding rounds or skiing routes? <a class="colorbox" href="http://www.smashingconf.com/whistler-2014/registration">Grab your ticket</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#24">24</a></sup> and see you there?</p> <h4>Footnotes</h4> <ol> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-1">1 http://www.smashingconf.com/whistler-2014/</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-2">2 http://smashingconf.com/whistler-2014/registration</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-3">3 http://www.smashingconf.com/whistler-2014/</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-4">4 http://smashingconf.com/whistler-2014/speakers</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-5">5 http://smashingconf.com/whistler-2014/workshops</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-6">6 http://www.smashingconf.com/whistler-2014/</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-7">7 http://www.whistler.com/discover/</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-8">8 http://www.smashingconf.com/whistler-2014/registration</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-9">9 http://smashingconf.com/whistler-2014/locations</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-10">10 http://smashingconf.com/whistler-2014/registration</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-11">11 http://smashingconf.com/whistler-2014/speakers</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-12">12 http://smashingconf.com/whistler-2014/speakers</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-13">13 http://smashingconf.com/whistler-2014/workshops</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-14">14 http://www.smashingconf.com/whistler-2014/registration</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-15">15 http://smashingconf.com/whistler-2014/locations</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-16">16 http://www.smashingconf.com/whistler-2014/registration</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-17">17 http://smashingconf.com/whistler-2014/registration</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-18">18 http://smashingconf.com/whistler-2014/registration</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-19">19 http://smashingconf.com/pdf/8-Reasons-For-SmashingConf-Whistler-2014.pdf</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-20">20 http://smashingconf.com/pdf/8-Reasons-For-SmashingConf-Whistler-2014.pdf</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-21">21 http://smashingconf.com/pdf/8-Reasons-For-SmashingConf-Whistler-2014.pdf</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-22">22 mailto:hello@smashingconf.com</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-23">23 http://www.smashingconf.com/whistler-2014/locations</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-24">24 http://www.smashingconf.com/whistler-2014/registration</a></li> </ol> <p>The post <a class="colorbox" rel="nofollow" href="http://www.smashingmagazine.com/2014/07/15/smashingconf-whistler-canada/">“Where No Web Designer Has Gone Before!” SmashingConf Whistler, Canada</a> appeared first on <a class="colorbox" rel="nofollow" href="http://www.smashingmagazine.com/">Smashing Magazine</a>.</p> <div class="fixed"></div> </div> <div class="under"> <span class="categories">Categories: </span><span><a href="http://www.webmastersgallery.com/category/uncategorized/" rel="category tag">Others</a></span> <span class="tags">Tags: </span><span></span> </div> </div> <div class="post" id="post-1963"> <h2><a class="title" href="http://www.webmastersgallery.com/2014/07/15/html5-imports-import-html-files-into-html-files/" rel="bookmark">HTML5 Imports: Import HTML Files Into HTML Files</a></h2> <div class="info"> <span class="date">July 15th, 2014</span> <span class="author"><a href="http://www.webmastersgallery.com/author/admin/" title="Posts by admin" rel="author">admin</a></span> <span class="comments"><a href="http://www.webmastersgallery.com/2014/07/15/html5-imports-import-html-files-into-html-files/#respond">No comments</a></span> <div class="fixed"></div> </div> <div class="content"> <div class="ftpimagefix" style="float:none"><a class="colorbox" href="http://feedproxy.google.com/~r/Noupe/~3/8aphllj9Zl8/html5-imports-import-html-files-into-html-files-83467.html"><img decoding="async" src="http://statisches.auslieferung.commindo-media-ressourcen.de/advertisement.gif" alt="" border="0"></a></div> <table width="650"> <tr> <td width="650"> <div> <br /> <a class="colorbox" href="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=target&collection=noupe-rss&position=2" target="_blank"><img decoding="async" src="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=image&collection=noupe-rss&position=2" border="0" alt=""></a> <a class="colorbox" href="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=target&collection=noupe-rss&position=3" target="_blank"><img decoding="async" src="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=image&collection=noupe-rss&position=3" border="0" alt=""></a> </div> </td> </tr> </table> <p><a class="colorbox" href="http://www.noupe.com/javascript/html5-imports-import-html-files-into-html-files-83467.html" title="HTML5 Imports: Import HTML Files Into HTML Files"><img decoding="async" src="http://www.noupe.com/wp-content/uploads/2014/07/html5imports1.jpg" alt=""></a></p> <p>The „link“ element is a blessing. It allows for easy embedding of stylesheets and JavaScripts needed in multiple documents. It didn’t allow the embedding of HTML files, though. To achieve that we were limited to the „iframes“ element or the JavaScript method „XMLHttpRequest()“. Thanks to the new HTML5 Imports, we can now use the „“ element to load one HTML file into another.</p> <div class="fixed"></div> </div> <div class="under"> <span class="categories">Categories: </span><span><a href="http://www.webmastersgallery.com/category/uncategorized/" rel="category tag">Others</a></span> <span class="tags">Tags: </span><span></span> </div> </div> <div class="post" id="post-1959"> <h2><a class="title" href="http://www.webmastersgallery.com/2014/07/14/prioritizing-devices-testing-and-responsive-web-design/" rel="bookmark">Prioritizing Devices: Testing And Responsive Web Design</a></h2> <div class="info"> <span class="date">July 14th, 2014</span> <span class="author"><a href="http://www.webmastersgallery.com/author/admin/" title="Posts by admin" rel="author">admin</a></span> <span class="comments"><a href="http://www.webmastersgallery.com/2014/07/14/prioritizing-devices-testing-and-responsive-web-design/#respond">No comments</a></span> <div class="fixed"></div> </div> <div class="content"> <div class="ftpimagefix" style="float:none"><a class="colorbox" href="http://feedproxy.google.com/~r/SmashingMagazine/~3/QjLC2B5tS0w/"><img decoding="async" src="http://www.smashingmagazine.com/wp-content/uploads/2014/07/03-many-devices-opt-500.jpg" alt="03-many-devices-opt-500"></a></div> <p>My Android Galaxy smartphone is so sweet. It plays games, has a lovely screen and lets me check all of my favourite websites while I’m commuting to and from work. And my new iPad is even better; it’s all I use at home when I’m relaxing in the living room, cooking in the kitchen or toileting on the toilet. As a consumer of electronic gadgets, I’m happier than Angelina Jolie in an orphanage with all of the devices with which I can use to access the Internet.</p> <p>As a developer, I hate it.</p> <p>Have you seen how many browsers and devices we have to test now? I remember when Internet Explorer (IE) 8 came out and we were annoyed that we had to start testing six browsers. Now, we’re testing at least 15! Back then, when every home had broadband and before anyone had a smartphone, we were living in the Golden Age of web development. We never knew how easy our jobs were.</p> <p>Because of all the things we have to support now, <strong>testing has become really, really, really difficult and also super-expensive</strong>. But imagine having to support and test all of these browser and device combinations while also responding to the news. When you work in a busy environment like the BBC News, where much of what you make is pegged to a news story or breaking event and everything is made using responsive web design, the job becomes really tricky and occasionally very stressful.</p> <figure><figcaption>In the Golden Age of web development, we had to support only five desktop browsers on a broadband connection.</figcaption></figure> <p>Unfortunately, we can never move the deadlines that news events present to us. We can’t contact the UK government and ask them to postpone an election by a few more days while we get the new responsive timeline carousel working in IE 8. And during the flooding in the UK earlier this year, we couldn’t contact God to ask him to pause the heavy rain long enough for my team to get the interactive flooding map working in Android 2.3.</p> <p>Before responsive web design, we had to test five web browsers on a desktop computer. Now with responsive web design, we have at least 15 browsers working on a myriad of different-sized devices, with many different input types, multiple pixel resolutions and hugely varying connection speeds.</p> <p>Your boss might have once dictated your testing strategy as such: “This website has to work perfectly in all of the browsers on this list.” If you tried to carry out that strategy with the vast number of browser and device combinations that now visit your website, you would quickly spend a fortune and get sucked into a testing black hole.</p> <p>There must be a better way to deal with the problem that responsive design has created for testing. So, let’s step back from this testing singularity for a moment and think about the problem.</p> <p>In this article, we’ll devise a testing strategy so that you don’t have to test every device every time you want to update a live website. I’ll draw on my experience as a developer working on the BBC News’ website.</p> <h3>Devising A New Testing Strategy</h3> <p>With unlimited time, money and human resources, you’d be able to test your entire website on every device, every day of the week. In the real world, even large organizations like the BBC don’t have the resources to attempt this perfect solution.</p> <p>Nevertheless, as developers, we’d expect JavaScript that works in Chrome to probably work in Safari or Firefox, too. We’d also be confident that the majority of our CSS would render correctly. However, we’d be less certain that a responsive layout would work perfectly on multiple devices. And when we test the layout on an old Nokia device, we’d be more nervous than a startup founder about to meet a venture capitalist.</p> <p><strong>We can take advantage of similarities between browsers and devices</strong>. If some code works on a Samsung Galaxy S4 running Chrome, then it probably also works on an Android tablet or iPhone 5S. If IE 9 throws no JavaScript errors, then we’d be able to test IE 10 and 11 with much more confidence. But some browsers are so old and wicked and unlike anything else we have to deal with — yes, IE 8, I’m looking at you — that we should always test on them.</p> <figure><img decoding="async" loading="lazy" src="http://www.smashingmagazine.com/wp-content/uploads/2014/07/02-ie8-error-opt.jpg" alt="02-ie8-error-opt" width="500" height="385"><figcaption>IE 8 is throwing more errors on this page than Miley Cyrus manages to twerk in a concert.</figcaption></figure> <p>While you should try to support as large a proportion of your audience as possible, your analytics will show that a small group of browsers and devices make up the majority of your traffic, while the rest are a long tail of obscure browsers and devices. Take advantage of this.</p> <p>By prioritizing which devices and browsers you test first, you can maximize your testing time. Don’t think of testing as a single task; <strong>break it up into groups of browsers</strong> according to how important they are to you. You could — dare I say — take shortcuts. Do 50% of your browser testing and then release, knowing that the majority of your users won’t see bugs, and then test and fix the long tail.</p> <p>This new strategy could be carried out in different ways:</p> <ul> <li>Making a major new version of your website? Test all browser groups.</li> <li>Making a minor change that needs to be released very quickly? Test your primary and secondary browser groups, release, and then test the rest and release again if need be.</li> </ul> <p>In the industry, running a segment of tests is called “smoke testing.” Smoke testing is a quick process that gives you confidence that you haven’t broken anything fundamental in your product. By sometimes choosing to test only your primary group of browsers, you’re effectively smoke testing for certain browser and device combinations.</p> <h4>Every Website Is Different</h4> <p>Before you present the top of this article to your boss and start testing only iPhones, consider that every website is different. Websites have different objectives and audiences and, thus, will be visited by different browser and device combinations.</p> <p>With any new strategy, first consider the audience of your product:</p> <ul> <li><strong>Age and class</strong><br /> Young people and less affluent people are more likely to use non-desktop devices. As a developer who’s been in the industry for 15 years, I struggle to accept that my desktop-centric mental model of the web is now in a minority.</li> <li><strong>Global distribution</strong><br /> Different form factors are popular in different regions of the world. High-end smartphones are most popular in the West. “Phablets” (i.e. really big phones) are popular in the East because the larger screen size makes it easier to type text messages with Eastern character sets. Phones with long battery life are popular in rural India and Africa.</li> <li><strong>Engagement time</strong><br /> In the UK, desktop browsers now make up less than 50% of a typical website’s traffic. This number drops dramatically on the weekend and rises dramatically during workday lunchtime (especially for legacy versions of IE installed in offices).</li> </ul> <h4>Testing All The Things</h4> <figure><sup><a class="colorbox" href="http://www.smashingmagazine.com/#1">1</a></sup><figcaption>Setting up this photo caused a sudden spike in traffic from old Nokia devices to our website.</figcaption></figure> <p>The point of grouping is to get the most out of testing as few devices as possible. So, for your first group, test as many different properties as possible. I call this a “test matrix”:</p> <ul> <li><strong>Screen size</strong><br /> Designing responsively means being agnostic to device type. So, get a good idea of how your website works on a wide range of screen sizes.</li> <li><strong>Connection speed</strong><br /> Treat connection speed the same way. Unfortunately, there is no correlation between screen size and connection speed. While a given device might be able to connect to Wi-Fi as well as to various mobile connection types that offer different Internet speeds, mobile devices generally limit the number of concurrent downloads to two. This means that even when an iPhone has a Wi-Fi connection, it still won’t be as fast as a MacBook. You’ll have to account for this.</li> <li><strong>Pixel density</strong><br /> Pixel density refers to the number of pixels that make up a screen. The higher the pixel density, the clearer the picture on the screen will be. Differences in pixel density can cause issues that are subtle and hard to debug. The biggest issue I’ve come across is browsers that calculate subpixel values differently (which happens when widths are defined with a floating point percentage, such as 33.3%), thus breaking the layout.</li> <li><strong>Interaction style</strong><br /> Make sure to cover not only mouse-and-keyboard interaction and touch interaction, but also D-pad styles of interaction, which happens with the arrow keys on a phone keyboard or the “nipple” on a BlackBerry (honestly, it’s called a “nipple” — ask your mum if you don’t believe me). However, don’t prioritize D-pad interaction unless Nokia and BlackBerry phones make up a significant share of your traffic.</li> <li><strong>Similarity to other browsers</strong><br /> If browser A is very similar to browser B, and browser A passes your test, then browser B has a lower chance of causing serious problems than other browsers. So, you can lower the priority of browser B and expect to deal with only minor layout issues later on. If browser C has a smaller user base than browser B but is much older and has more differences, then you should probably test browser C earlier in the development cycle to catch issues that are harder to solve than minor layout bugs.</li> <li><strong>Browser rendering mode</strong><br /> Browsers have two ways of rendering a page:</p> <ul> <li>the standard client-side rendering that we are all used to,</li> <li>proxy rendering.</li> </ul> </li> </ul> <p>A proxy browser sends the requested URL to a server, which downloads and renders the page before serving an image of the page to the user. A proxy browser renders much faster than a typical web browser and so is popular among users who are sensitive about their data plans, but they come at a cost.</p> <p>Because the user is looking at a screenshot of a web page, the design might not work quite as intended. While proxy browsers might sound like a niche case and not worth prioritizing, note that Nokia’s Ovi browser, Opera Mini and the Chrome mobile browser either are proxy browsers or have proxy rendering modes.</p> <h4>Understand Your Testing Options</h4> <p>We have quite a few options for testing in the industry now: emulators, virtual machines, testing services like <a class="colorbox" href="http://www.browserstack.com/">BrowserStack</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#2">2</a></sup> and grassroots community efforts like <a class="colorbox" href="http://opendevicelab.com/">Open Device Lab</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#20">20</a></sup><sup><a class="colorbox" href="http://www.smashingmagazine.com/#12">12</a></sup><sup><a class="colorbox" href="http://www.smashingmagazine.com/#3">3</a></sup>. While testing services are great at showing what your website looks like, they will never be as good as testing your code on actual devices. Emulators and testing services are more efficient than buying and maintaining your own device lab, and they really help you to understand how your code behaves on different platforms, but they don’t tell you everything you need to know about the UX.</p> <p>Are loading times fast enough? Are the hit sizes big enough? Will the user’s hand get in the way of the screen and keep them from noticing a change? Does the time between pressing the screen and the resulting change feel adequate?</p> <figure><a class="colorbox" href="http://www.smashingmagazine.com/wp-content/uploads/2014/07/04-browser-stack-opt.jpg"><img decoding="async" loading="lazy" src="http://www.smashingmagazine.com/wp-content/uploads/2014/07/04-browser-stack-opt-500.jpg" alt="04-browser-stack-opt-500" width="500" height="320"></a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#4">4</a></sup><figcaption>BrowserStack is great for seeing how your website renders across many devices, but it doesn’t give you any haptic feedback.</figcaption></figure> <p>Testing services are good for finding logical issues with your code — JavaScript errors, timeouts, etc. — but the coverage is only as good as the test that you run. The services suffer from a positive bias, in that they are good for asserting that stuff works. They won’t tell you whether something feels wrong or looks strange. I always suggest eyeballs for testing; unfortunately, this doesn’t scale to large products, especially if you lack dedicated testers.</p> <p>You need to make a judgment call, balancing the amount of testing required with the testing resources available. Can you split up automated and manual testing, focusing the latter on new features? Are you continually testing something that never changes? If you test frequently, could you test a proportion of each part of the product or randomly choose features to test?</p> <h3>Group Devices By Priority</h3> <p>Now that we’ve gotten the theory out of the way, let’s look at an example in practice. The device groups defined below are specific to the statistics for the BBC News, so adapt the list to your website according to the advice in the section above “Every Website Is Different.”</p> <h4>Group 1</h4> <p>Group 1 is essentially the Chrome, Safari and Android browsers on different devices and the desktop (“desktop” here meaning both Mac and Windows). Group 1 generally covers just over 50% of an audience for a typical website and is the absolute minimum amount of testing I would recommend before any kind of release.</p> <p>I strongly recommend that you purchase the following devices:</p> <div> <table> <tr> <td><strong>Device/Virtual machine/Emulator</strong></td> <td><strong>Browser</strong></td> <td><strong>Screen size</strong></td> <td><strong>Pixel density</strong></td> <td><strong>Interaction style</strong></td> <td><strong>Connection speed</strong></td> <td><strong>Browser similarity</strong></td> <td><strong>Rendering mode</strong></td> </tr> <tr> <td>your development machine</td> <td>Chrome latest</td> <td>large</td> <td>standard</td> <td>mouse/keyboard</td> <td>broadband</td> <td>other modern browsers</td> <td>typical</td> </tr> <tr> <td>Samsung Android 4.* device</td> <td>Chrome latest</td> <td>small</td> <td>high</td> <td>touch</td> <td>broadband/mobile</td> <td>N/A</td> <td>typical</td> </tr> <tr> <td>Apple device running iOS 7</td> <td>Safari 6</td> <td>small/medium</td> <td>high</td> <td>touch</td> <td>broadband/mobile</td> <td>N/A</td> <td>typical</td> </tr> <tr> <td>Apple device running iOS 6</td> <td>Safari 5</td> <td>small/medium</td> <td>high</td> <td>touch</td> <td>broadband/mobile</td> <td>N/A</td> <td>typical</td> </tr> <tr> <td>Samsung Android 4.* device</td> <td>Android browser</td> <td>small</td> <td>high</td> <td>touch</td> <td>broadband/mobile</td> <td>N/A</td> <td>typical</td> </tr> <tr> <td>any Android 2.3 device</td> <td>Android browser</td> <td>very small</td> <td>standard</td> <td>touch</td> <td>broadband/mobile</td> <td>N/A</td> <td>typical</td> </tr> </table> </div> <p><em>(<a class="colorbox" href="http://provide.smashingmagazine.com/group1.html">Large view</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#5">5</a></sup>)</em></p> <p>This could easily cost you the best part of $2,500. I am really sorry about this, but I’m guessing that because you read Smashing Magazine, you’re a technologist, so you probably already have one of these devices in your pocket.</p> <p>Android devices are much cheaper than iOS devices anyway, so spending some of your budget on two Android devices is worthwhile. These four devices plus Chrome on the desktop should be your primary testing group. Chrome is the most popular desktop browser — fortunately, too, because most developers prefer to work in it.</p> <p>You’ll need to test both Chrome and Android’s default browser on a Samsung Galaxy device running Android 4.*. All top-end Android devices (made by HTC, Sony and Motorola) except for Samsung now ship by default with Chrome. Only Samsung uses a slightly modified version of the browser that ships with the Android Open Source Initiative — that browser is a flavor of WebKit.</p> <p><strong>Recommended buys:</strong></p> <ul> <li>Buy an iPad and an iPhone. Make sure they have different versions of iOS so that you can test Safari 5 and 6 in different resolutions.</li> <li>Buy a top-end Samsung Galaxy Android 4.* device and a cheap Android 2.3 device. This will give you an idea of how your code runs on Android devices with different types of processors and memory sizes.</li> </ul> <p><strong>Cheaper alternative:</strong></p> <ul> <li>Download Apple’s Xcode IDE and use the iPhone virtual machine. This will give you access to all versions of iOS on all devices, but then you’d have to buy a Mac, so that would still cost you the best part of $2,500 anyway.</li> <li>Download the Android IDE (Java, yuck) and use the Android virtual machine. This isn’t highly recommended, though, because you wouldn’t be able to see your website in action on low-end hardware.</li> </ul> <h4>Group 2</h4> <p>The good news about group 2 is that there are no devices to buy (if you develop on a Mac). The bad news is that it requires downloading a lot of virtual machines. Group 2 consists mostly of desktop browsers:</p> <div> <table> <tr> <td><strong>Device/Virtual machine/Emulator</strong></td> <td><strong>Browser</strong></td> <td><strong>Screen size</strong></td> <td><strong>Pixel density</strong></td> <td><strong>Interaction style</strong></td> <td><strong>Connection speed</strong></td> <td><strong>Browser similarity</strong></td> <td><strong>Rendering mode</strong></td> </tr> <tr> <td>virtual machine</td> <td>IE 8</td> <td>large</td> <td>standard</td> <td>mouse/keyboard</td> <td>broadband</td> <td>N/A</td> <td>typical</td> </tr> <tr> <td>your development machine</td> <td>Safari 6/7 (see note below)</td> <td>large</td> <td>standard</td> <td>mouse/keyboard</td> <td>broadband</td> <td>other modern browsers</td> <td>typical</td> </tr> <tr> <td>your development machine</td> <td>Firefox latest</td> <td>large</td> <td>standard</td> <td>mouse/keyboard</td> <td>broadband</td> <td>other modern browsers</td> <td>typical</td> </tr> <tr> <td>virtual machine</td> <td>IE 11</td> <td>large</td> <td>standard</td> <td>mouse/keyboard</td> <td>broadband</td> <td>other modern browsers</td> <td>typical</td> </tr> <tr> <td>Windows Phone 8 Emulator</td> <td>IE 10 mobile</td> <td>small</td> <td>standard</td> <td>touch</td> <td>broadband</td> <td>other modern browsers</td> <td>typical</td> </tr> </table> </div> <p><em>(<a class="colorbox" href="http://provide.smashingmagazine.com/group2.html">Large view</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#6">6</a></sup>)</em></p> <p><strong>Note:</strong> Depending on the version of OS X your MacBook is running, you will most likely have Safari 6 or 7. Mavericks is the latest and most popular version of OS X, so prioritizing Safari 7 is recommended.</p> <p>IE 11 and 8 can be tested using virtual machines downloaded from <a class="colorbox" href="http://modern.ie/">modern.IE</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#13">13</a></sup><sup><a class="colorbox" href="http://www.smashingmagazine.com/#7">7</a></sup>. <a class="colorbox" href="http://msdn.microsoft.com/en-us/library/windowsphone/develop/ff402563(v=vs.105).aspx">Windows Phone Emulator</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#8">8</a></sup> can be downloaded from Microsoft. Notice that I’ve not mentioned IE 9 or 10. You can test those browsers with virtual machines, too, but the majority of those users would have upgraded to IE 11 by now, so their priority is lower.</p> <p>IE 8 is a special case because there is no upgrade path for users stuck on Windows Vista or Windows XP, and, being so old, it will be the browser that gives you the most problems. The BBC News’ statistics show almost no IE 8 users on weekends or on weekday mornings or evenings, but we get a sudden spike of IE 8 activity during workday lunchtimes. This indicates that people now mostly use IE 8 when they are on their lunch break at work.</p> <p><strong>Recommended buys:</strong></p> <ul> <li>If your development machine is a Mac, then definitely include Safari 6 in this group. If not, then depending on the size of your audience, you might want to think about getting a Mac. Spending $2,500 for one device is expensive, and your budget would be better spent on other devices, so this is recommended only if you have a large budget for devices.</li> </ul> <p><strong>Cheaper alternative:</strong></p> <ul> <li>If your development team is PC-centric, then you could look to BrowserStack to test Safari 6. BrowserStack can be used instead of all of these virtual machines, too, and might be preferable if your machine is old. Virtual machines require at least 1 GB of memory to themselves to run smoothly. I’d recommend a minimum of 8 GB to run virtual machines because you’ll want a couple of them up at the same time.</li> </ul> <p><strong>Expensive alternative:</strong></p> <ul> <li>Buy a Nokia Windows Phone. Devices are always more preferable than emulators.</li> </ul> <h4>Group 3</h4> <p>A third group consisting of Opera Mini and Nokia’s Ovi browser is also worth considering. These are “proxy browsers” that behave differently than standard browsers (see above for a description of how they work):</p> <div> <table> <tr> <td><strong>Device/Virtual machine/Emulator</strong></td> <td><strong>Browser</strong></td> <td><strong>Screen size</strong></td> <td><strong>Pixel density</strong></td> <td><strong>Interaction style</strong></td> <td><strong>Connection speed</strong></td> <td><strong>Browser similarity</strong></td> <td><strong>Rendering mode</strong></td> </tr> <tr> <td>Apple device running iOS 7</td> <td>Opera Mini latest</td> <td>small/medium</td> <td>high</td> <td>touch</td> <td>broadband/mobile</td> <td>N/A</td> <td>proxy</td> </tr> <tr> <td>any Nokia Ovi device</td> <td>Ovi browser</td> <td>very small</td> <td>very low</td> <td>D-pad/touch</td> <td>broadband/mobile</td> <td>N/A</td> <td>proxy</td> </tr> </table> </div> <p><em>(<a class="colorbox" href="http://provide.smashingmagazine.com/group3.html">Large view</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#9">9</a></sup>)</em></p> <p>Download and test Opera Mini on your iOS 7 device. If you have an international audience, then a Nokia Ovi device is a mandatory purchase; we have a Nokia C5 in our device drawer. While Nokia budget phones are not insanely popular in the UK or US, they are more popular in markets that value low prices, battery life and robustness (dropped your iPhone recently?). If you have a global audience, then definitely allocate part of your budget to a Nokia Ovi.</p> <p>A few years ago, there was a clear distinction between the new range of smartphones that were appearing on the market and traditional “feature” phones. Unfortunately today, that distinction is not clear at all. The definition of a smartphone used to be that it supports Wi-Fi, has a modern browser, has a touchscreen and supports apps. The Nokia C5 has all of these features. Every phone is a smartphone now.</p> <p>The big difference between the top and bottom ranges of phones is hardware capability. Manufacturers differentiate and compete by varying the amount of processing power and RAM available in each phone. This means that, while the difference in browser (read “software”) capabilities between, say, an HTC One and a Sony Experia Typo is nil, the difference in capacity to process your website and in reaction times to user input (read “hardware”) is huge. You can’t detect a device’s processing power or memory, so understanding how your website works with limited hardware is important.</p> <p><strong>Recommended buys:</strong></p> <ul> <li>Nokia Ovi phone</li> </ul> <h4>Group 4</h4> <p>Group 4 is the long tail of browser support. The previous three groups had distinct characteristics (popularity, desktop, proxy rendering). Group 4’s characteristic is randomness! This is where your testing gets more varied and where the value of spending time on edge-case bugs decreases.</p> <p></p> <div> <table> <tr> <td><strong>Device/Virtual machine/Emulator</strong></td> <td><strong>Browser</strong></td> <td><strong>Screen size</strong></td> <td><strong>Pixel density</strong></td> <td><strong>Interaction style</strong></td> <td><strong>Connection speed</strong></td> <td><strong>Browser similarity</strong></td> <td><strong>Rendering mode</strong></td> </tr> <tr> <td>virtual machine</td> <td>IE 10</td> <td>large</td> <td>standard</td> <td>mouse/keyboard</td> <td>broadband</td> <td>other modern browsers</td> <td>typical</td> </tr> <tr> <td>virtual machine</td> <td>IE 9</td> <td>large</td> <td>standard</td> <td>mouse/keyboard</td> <td>broadband</td> <td>other modern browsers</td> <td>typical</td> </tr> <tr> <td>your development machine</td> <td>Firefox desktop version 4</td> <td>large</td> <td>standard</td> <td>mouse/keyboard</td> <td>broadband</td> <td>N/A</td> <td>typical</td> </tr> <tr> <td>your development machine</td> <td>Opera desktop latest</td> <td>large</td> <td>standard</td> <td>mouse/keyboard</td> <td>broadband</td> <td>N/A</td> <td>typical</td> </tr> <tr> <td>Apple device running iOS 7</td> <td>Firefox Mobile latest</td> <td>small/medium</td> <td>high</td> <td>touch</td> <td>broadband/mobile</td> <td>other modern browsers</td> <td>typical</td> </tr> <tr> <td>Apple device running iOS 7</td> <td>Opera Mobile latest</td> <td>small/medium</td> <td>high</td> <td>touch</td> <td>broadband/mobile</td> <td>other modern browsers</td> <td>typical</td> </tr> <tr> <td>BlackBerry device running BB10</td> <td>default browser</td> <td>small</td> <td>high</td> <td>touch</td> <td>broadband/mobile</td> <td>other modern browsers</td> <td>typical</td> </tr> <tr> <td>BlackBerry device running version 6</td> <td>default browser</td> <td>small</td> <td>standard</td> <td>D-pad/touch</td> <td>broadband/mobile</td> <td>N/A</td> <td>typical</td> </tr> <tr> <td>BrowserStack</td> <td>Safari desktop 6</td> <td>large</td> <td>standard</td> <td>mouse/keyboard</td> <td>broadband</td> <td>other modern browsers</td> <td>typical</td> </tr> <tr> <td>BrowserStack</td> <td>Safari desktop 5</td> <td>large</td> <td>standard</td> <td>mouse/keyboard</td> <td>broadband</td> <td>other modern browsers</td> <td>typical</td> </tr> </table> </div> <p><em>(<a class="colorbox" href="http://provide.smashingmagazine.com/group4.html">Large view</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#10">10</a></sup>)</em></p> <ul> <li>Firefox desktop version 4 is the last version of Firefox that doesn’t auto-update; it’s the only old version of Firefox still trending in our statistics. It’s big enough for you to consider testing; fortunately, though, despite its age, it’s still a decent browser, so unless you are using advanced CSS3 features, you shouldn’t find many problems.</li> <li>Firefox Mobile and Opera Mobile are excellent modern web browsers. They are a low priority because they render pages so well that you can expect your website to work in them with only minor layout issues by the time you make it down to the fourth group of browsers.</li> <li>IE 9 and 10 are quickly disappearing from our statistics. We think they will be completely gone by the end of the year. Check your own statistics before deciding whether to support them.</li> <li>BlackBerry devices are still worth testing. From OS 6, BlackBerry’s default browser has actually been very modern and feature-rich. The difference between this and other devices, though, is its form. Many BlackBerry owners use the trackball (D-pad) to move a cursor around the small landscape-oriented screen. This screen makes a mockery of people who design for the “fold,” because the fold on these devices is 200 pixels tall.</li> <li>Safari 6 is the version of Safari that comes with Apple OS 10.7. While 10.7 isn’t the latest version of Apple’s operating system, it’s still relatively popular. Safari 6 is very similar to Safari 7, so it’s not worth the large investment required for an additional desktop machine.</li> </ul> <p><strong>Recommended buys:</strong></p> <ul> <li>As always, I recommend buying the devices if your budget allows. Buy a BlackBerry 10 and a BlackBerry Bold running OS 6. BlackBerry Bold should still be available on eBay, while the BlackBerry Z10 (running BlackBerry OS 10) should be available in most stores.</li> </ul> <p><strong>Cheaper alternative:</strong></p> <ul> <li>Test Safari 6 using BrowserStack. It’s still available to test via Mac OS X Lion.</li> <li>Test Safari 5 using BrowserStack. It’s still available to test via Mac OS X Snow Leopard.</li> <li>Unfortunately, BrowserStack doesn’t have BlackBerry devices to test; however, you can download and run <a class="colorbox" href="http://uk.blackberry.com/sites/developers/resources/simulators.html">simulators from BlackBerry’s website</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#11">11</a></sup>. You can run a Playbook simulator as a virtual machine on a PC or Mac, but the Playbook was never popular, so the simulator isn’t very useful. The phone emulators are much more useful; you can download exact model and OS versions, but they only work on a PC, so you will need a second machine if you are a Mac user.</li> <li>An <a class="colorbox" href="http://opendevicelab.com/">Open Device Lab</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#20">20</a></sup><sup><a class="colorbox" href="http://www.smashingmagazine.com/#12">12</a></sup><sup><a class="colorbox" href="http://www.smashingmagazine.com/#3">3</a></sup> is an even cheaper alternative to BrowserStack, but the devices available to you will depend on what is available in the lab in your area. You will also need to account for the cost and convenience of getting to the device lab.</li> </ul> <p><strong>Expensive alternative:</strong></p> <ul> <li>Buy a Mac running 10.7 to test Safari 6. This might be the best choice if your development machine is a PC.</li> <li>Buy a Mac running 10.6.8 to test Safari 5 — but only if you are seriously loaded!</li> </ul> <h3>Conclusion</h3> <p>Testing (or, to use the proper term, quality assurance) is a profession unto its own. As designers, we shouldn’t try to simplify the testing process; rather, we should understand the different testing strategies well enough to solve the challenges we now face in trying to support browsers.</p> <p>Although the explosion of devices that started with the iPhone has dramatically increased the number of browsers we have to support, remember that a large proportion of your audience use only a handful of devices. The rest of your audience consumes the web via a massively diverse long tail of devices. Test your product on as many devices as possible, but also prioritize which devices to test in order to maximize your time.</p> <p>Test hard, but test smart. Nobody can test everything all the time.</p> <h4>Further Reading</h4> <ul> <li><a class="colorbox" href="http://modern.ie/">modern.IE</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#13">13</a></sup><sup><a class="colorbox" href="http://www.smashingmagazine.com/#7">7</a></sup>, Microsoft</li> <li><a class="colorbox" href="http://msdn.microsoft.com/en-us/library/windowsphone/develop/ff402563(v=vs.105).aspx">Windows Phone Emulator for Windows Phone 8</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#14">14</a></sup>, Windows Phone Dev Center</li> <li><a class="colorbox" href="http://developer.android.com/tools/help/emulator.html">Android Emulator</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#15">15</a></sup>, Android Developers</li> <li><a class="colorbox" href="https://developer.apple.com/xcode/downloads/">Xcode</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#16">16</a></sup>, Apple</li> <li><a class="colorbox" href="http://uk.blackberry.com/sites/developers/resources/simulators.html">BlackBerry simulators</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#17">17</a></sup>, BlackBerry</li> <li><a class="colorbox" href="https://www.virtualbox.org/">VirtualBox</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#18">18</a></sup></li> <li>“<a class="colorbox" href="http://www.browserstack.com/list-of-browsers-and-platforms?product=live">Browsers and Mobile Devices for Live Testing</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#19">19</a></sup>,” BrowserStack</li> <li><a class="colorbox" href="http://opendevicelab.com/">Open Device Lab</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#20">20</a></sup><sup><a class="colorbox" href="http://www.smashingmagazine.com/#12">12</a></sup><sup><a class="colorbox" href="http://www.smashingmagazine.com/#3">3</a></sup></li> <li><a class="colorbox" href="https://developer.chrome.com/multidevice/data-compression">Data Compression Proxy</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#21">21</a></sup>, Google Chrome</li> <li>“<a class="colorbox" href="http://dev.opera.com/articles/opera-mini-and-javascript/">Opera Mini and JavaScript</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#22">22</a></sup> (proxy browsing), Dev.Opera</li> </ul> <p><em>(al, ml)</em></p> <h4>Footnotes</h4> <ol> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-1">1 http://www.smashingmagazine.com/wp-content/uploads/2014/07/03-many-devices-opt.jpg</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-2">2 http://www.browserstack.com/</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-3">3 http://opendevicelab.com</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-4">4 http://www.smashingmagazine.com/wp-content/uploads/2014/07/04-browser-stack-opt.jpg</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-5">5 http://provide.smashingmagazine.com/group1.html</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-6">6 http://provide.smashingmagazine.com/group2.html</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-7">7 http://modern.ie</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-8">8 http://msdn.microsoft.com/en-us/library/windowsphone/develop/ff402563(v=vs.105).aspx</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-9">9 http://provide.smashingmagazine.com/group3.html</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-10">10 http://provide.smashingmagazine.com/group4.html</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-11">11 http://uk.blackberry.com/sites/developers/resources/simulators.html</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-12">12 http://opendevicelab.com</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-13">13 http://modern.ie</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-14">14 http://msdn.microsoft.com/en-us/library/windowsphone/develop/ff402563(v=vs.105).aspx</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-15">15 http://developer.android.com/tools/help/emulator.html</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-16">16 https://developer.apple.com/xcode/downloads/</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-17">17 http://uk.blackberry.com/sites/developers/resources/simulators.html</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-18">18 https://www.virtualbox.org/</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-19">19 http://www.browserstack.com/list-of-browsers-and-platforms?product=live</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-20">20 http://opendevicelab.com</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-21">21 https://developer.chrome.com/multidevice/data-compression</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-22">22 http://dev.opera.com/articles/opera-mini-and-javascript/</a></li> </ol> <p>The post <a class="colorbox" rel="nofollow" href="http://www.smashingmagazine.com/2014/07/14/testing-and-responsive-web-design/">Prioritizing Devices: Testing And Responsive Web Design</a> appeared first on <a class="colorbox" rel="nofollow" href="http://www.smashingmagazine.com/">Smashing Magazine</a>.</p> <div class="fixed"></div> </div> <div class="under"> <span class="categories">Categories: </span><span><a href="http://www.webmastersgallery.com/category/uncategorized/" rel="category tag">Others</a></span> <span class="tags">Tags: </span><span></span> </div> </div> <div class="post" id="post-1960"> <h2><a class="title" href="http://www.webmastersgallery.com/2014/07/14/20-free-dashboard-ui-mockups-graphs-diagrams-charts-and-functional-widgets/" rel="bookmark">20 Free Dashboard UI Mockups: Graphs, Diagrams, Charts and Functional Widgets</a></h2> <div class="info"> <span class="date">July 14th, 2014</span> <span class="author"><a href="http://www.webmastersgallery.com/author/admin/" title="Posts by admin" rel="author">admin</a></span> <span class="comments"><a href="http://www.webmastersgallery.com/2014/07/14/20-free-dashboard-ui-mockups-graphs-diagrams-charts-and-functional-widgets/#respond">No comments</a></span> <div class="fixed"></div> </div> <div class="content"> <div class="ftpimagefix" style="float:none"><a class="colorbox" href="http://feedproxy.google.com/~r/Noupe/~3/dxP-O-vmUik/20-free-dashboard-ui-mockups-graphs-diagrams-charts-and-functional-widgets-83036.html"><img decoding="async" src="http://statisches.auslieferung.commindo-media-ressourcen.de/advertisement.gif" alt="" border="0"></a></div> <table width="650"> <tr> <td width="650"> <div> <br /> <a class="colorbox" href="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=target&collection=noupe-rss&position=2" target="_blank"><img decoding="async" src="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=image&collection=noupe-rss&position=2" border="0" alt=""></a> <a class="colorbox" href="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=target&collection=noupe-rss&position=3" target="_blank"><img decoding="async" src="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=image&collection=noupe-rss&position=3" border="0" alt=""></a> </div> </td> </tr> </table> <p><a class="colorbox" href="http://www.noupe.com/design/20-free-dashboard-ui-mockups-graphs-diagrams-charts-and-functional-widgets-83036.html" title="20 Free Dashboard UI Mockups: Graphs, Diagrams, Charts and Functional Widgets"><img decoding="async" src="http://www.noupe.com/wp-content/uploads/2014/07/20-dashboard-ui-mockups-july-2014-favo.jpg" alt=""></a></p> <p>Admin panels are one of the bare necessities of modern web sites. Yet, as they are only seen by very few people, designers tend to not put too much effort into them. This is perfectly understandable, while at the same time too narrowly considered. The customer who will have to work with these panels for years to come will be much more likely to stay satisfied if you provide him with a dashboard, that is both beautiful and easy to handle. Keep in mind, that getting existing customers to place the next order is much easier than the acquisition of new ones. So, let’s do something to better your customer relationship. The so-called “backend” is going to be today’s topic. We have collected 20 of the best free resources we were able to find…</p> <div class="fixed"></div> </div> <div class="under"> <span class="categories">Categories: </span><span><a href="http://www.webmastersgallery.com/category/uncategorized/" rel="category tag">Others</a></span> <span class="tags">Tags: </span><span></span> </div> </div> <div class="post" id="post-1957"> <h2><a class="title" href="http://www.webmastersgallery.com/2014/07/11/a-roadmap-to-becoming-an-ab-testing-expert/" rel="bookmark">A Roadmap To Becoming An A/B Testing Expert</a></h2> <div class="info"> <span class="date">July 11th, 2014</span> <span class="author"><a href="http://www.webmastersgallery.com/author/admin/" title="Posts by admin" rel="author">admin</a></span> <span class="comments"><a href="http://www.webmastersgallery.com/2014/07/11/a-roadmap-to-becoming-an-ab-testing-expert/#respond">No comments</a></span> <div class="fixed"></div> </div> <div class="content"> <div class="ftpimagefix" style="float:none"><a class="colorbox" href="http://feedproxy.google.com/~r/SmashingMagazine/~3/Rizlr8sFglk/"><img decoding="async" src="http://www.smashingmagazine.com/wp-content/uploads/2014/06/ab-illustration-opt-500.jpg" alt="ab-illustration-opt-500"></a></div> <p>A/B testing, also known as split testing, is the method of pitting two versions of a landing page against each other in a battle of conversion. You test to see which version does a better job of leading visitors to one of your goals, like signing up or subscribing to a newsletter. You can test two entirely different designs for a landing page or you can test small tweaks, like changes to a few words in your copy.</p> <p>Running A/B tests on your website can help you improve your communication with visitors and back up important design decisions with real data from real users. With the multitude of tools available (detailed later), split testing has become easy for even non-technical people to design and manage.</p> <figure><sup><a class="colorbox" href="http://www.smashingmagazine.com/#1">1</a></sup></figure> <p>To learn more about the basics, read our previous article from 2010, “<a class="colorbox" href="http://www.smashingmagazine.com/2010/06/24/the-ultimate-guide-to-a-b-testing/" title="It's from 4 years ago, but it all still holds true">The Ultimate Guide to A/B Testing</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#2">2</a></sup>.”</p> <h3>When To Start Testing</h3> <p>Start testing only when you have enough visitors and enough conversions to run the test in a timely manner (a conversion happens when someone completes one of your goals). What does that mean?</p> <p>The ideal number of visitors will vary according to your typical conversion rate. Plan on at least 1,000 visitors for each variant, and 150 conversions for each variant. For some websites this might take four hours to complete, for others an entire month.</p> <p>To find out exactly how many visitors you’d need to run a test, plug a few basic metrics into Evan Miller’s <a class="colorbox" href="http://www.evanmiller.org/ab-testing/sample-size.html" title="How many subjects are needed for an A/B test?">sample-size calculator</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#3">3</a></sup>.</p> <p>You could run a successful business with 80 visitors a month, but you wouldn’t be able to run a <a class="colorbox" href="http://en.wikipedia.org/wiki/Statistical_significance" title="The probability that certain results are not due to just chance alone.">statistically significant</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#4">4</a></sup> A/B test. Don’t start A/B testing before you’ve done any marketing. Get a steady flow of people to your website before doing any optimization.</p> <p>Keep in mind that you don’t have to build your product before starting A/B tests. You can test a splash page and find out how future customers respond to planned features and pricing tiers.</p> <h3>Your First Test</h3> <p>For your first A/B test, keep it simple. Tweak your existing landing page to get your toes wet. Focus on low-hanging fruit:</p> <ul> <li>copy in <code>h1</code> and <code>h3</code> headings;</li> <li>copy in call-to-action buttons (for example, “Try it free” versus “Sign up” versus “Get started”);</li> <li>the color, size and position of call-to-action buttons;</li> <li>a short page versus a long page (by hiding long sections).</li> </ul> <p>You can run multiple variations at one time, so dream beyond just two tweaks. You can also run multiple A/B tests at one time, but focus on one at first to get the hang of it.</p> <p>Run the tests anywhere from a couple of days to a month. Your A/B testing tool will declare the statistically significant winner. Once a winner has been declared, make the winning variant part of your permanent website by updating the underlying code.</p> <p>Then, clear the way for more A/B tests.</p> <h3>Where To Go From Here</h3> <p>Low-hanging fruit is a perfect place to start, but A/B testing isn’t all about that. Sure, testing button colors and heading copy will improve your conversion rate, but think beyond how a page looks. Think outside the box:</p> <ul> <li><strong>Highlight features versus benefits.</strong><br /> Are you pitching features of your product in a checklist? Try illustrating the benefits of the product by describing a dream scenario for the customer.</li> <li><strong>Accelerate page-loading.</strong><br /> Keep the landing page super-simple, and make it load in under a second.</li> <li><strong>Show a big video with someone talking.</strong><br /> Try removing the big screenshot and dropping in a big video that demonstrates your product, perhaps one in which you’re talking to the camera. Make a personal connection.</li> <li><strong>Survey new customers.</strong><br /> Talk to new customers to see what made them sign up and what has been most valuable to them so far. Highlight these in a test.</li> <li><strong>Find out what confuses new customers.</strong><br /> Ask new customers what confused them about the website or what questions they had that were left unanswered. Incorporate your answers into an A/B test.</li> <li><strong>Add testimonials.</strong><br /> Use social proof in the form of testimonials. Try putting an avatar or company logo next to each name.</li> <li><strong>Change the writing style of headings and main content.</strong><br /> Change the style of headings and content on your blog to see how it affects newsletter subscriptions. Try writing two versions of the same article.</li> <li><strong>Experiment with pricing tiers and your business model.</strong><br /> Change your pricing structure, even if only on your public-facing page, to see how potential customers respond.</li> <li><strong>Make the sign-up form super-short.</strong><br /> Remove any unnecessary steps in your sign-up form.</li> <li><strong>Radically change the design.</strong><br /> Try a different approach with your landing page, like what <a class="colorbox" href="http://www.31three.com/notebook/archive/campaign_monitor_landing_pages">Campaign Monitor did</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#5">5</a></sup> with its big modal for new visitors.</li> </ul> <p>Remember that conversion isn’t a one-time deal. When you say that you want more registrations, what you’re really saying is that you want more lifetime customers. When you say that you want more podcast listeners, you’re really saying that you want a larger dedicated audience that won’t stop telling their friends about you.</p> <p>Monitor how your A/B tests affect your long-term goals.</p> <h3>Tools To Use</h3> <p>To run A/B tests, I recommend using <a class="colorbox" href="http://visualwebsiteoptimizer.com/" title="A WYSIWYG editor for your landing pages">VWO</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#6">6</a></sup> (Visual Website Optimizer). You won’t need to edit your website’s code for each test and redeploy. Instead, you would use the tool’s WYSIWYG editor.</p> <figure><a class="colorbox" href="http://www.smashingmagazine.com/wp-content/uploads/2014/06/vwo-insights-opt.jpg"></a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#7">7</a></sup><figcaption>(<a class="colorbox" href="http://www.smashingmagazine.com/wp-content/uploads/2014/06/vwo-insights-opt.jpg">View large version</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#8">8</a></sup>)</figcaption></figure> <p>With VWO, you can do split URL testing, which tests two completely different pages, as well as multivariate testing, which tests more than two variants at a time — think of it like A/B/C/D/E/F/G testing. VWO uses statistical significance to declare the winner. A new version of the software is coming out soon, too.</p> <p><a class="colorbox" href="https://www.optimizely.com/" title="Optimizely has most of the same tools as VWO, and is a solid choice.">Optimizely</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#9">9</a></sup> is another simple WYSIWYG tool, and <a class="colorbox" href="https://support.google.com/analytics/answer/1745147?hl=en" title="Google's Content Experiments is free and a simple starting point, but you'll outgrow it quickly.">Google Analytics Content Experiments</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#10">10</a></sup> is a solid free option. If you’re looking to A/B test an email campaign, use <a class="colorbox" href="http://help.campaignmonitor.com/topic.aspx?t=139" title="Sending an A/B campaign sends a few emails to your subscribers for each variant, picks a winner, then sends the champion email out to everyone else.">Campaign Monitor</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#11">11</a></sup>.</p> <p>To set up your first test with VWO, <a class="colorbox" href="https://visualwebsiteoptimizer.com/ab-testing/#section-5" title="One script tag.">install the code</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#12">12</a></sup> above the closing <code></code> tag in each page that you’re going to test.</p> <p>The only other step is to <a class="colorbox" href="https://visualwebsiteoptimizer.com/ab-testing/#inner-section-2" title="How to define your goals in Visual Website Optimizer.">define your goals</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#13">13</a></sup>. Complete this sentence: “I want more…” Perhaps you want more people to sign up for your free trial, subscribe to your newsletter, download your podcast or buy something from your store. Your goal will determine which variant in the test is the winner.</p> <h3>Taking It Too Far</h3> <p>A/B testing is not a silver bullet. Optimizing the conversion rate will make a good landing page better, but it won’t fix a product or company that has fundamental problems.</p> <p>Narrowly focusing on A/B testing will turn your customers into mere data points. Your customers are not conversions that you push down a funnel. They are real people with real problems, and they are looking to your website for a solution.</p> <p>Don’t sell out your visitors for short-term gain. Putting a giant red “Try it free!” button will increase conversions, but your business won’t be any better off in 12 months. Keep the long game in mind.</p> <p>The goal of A/B testing isn’t to mislead potential customers into buying something they don’t want, but rather to clarify how you should communicate a product’s benefits and to make sure that customers understand the language you’re using.</p> <p>As long as you’re confident that the product is great, then just use A/B testing to tweak how you present it to customers. If you know that the product is helpful, then don’t try to manipulate visitors through your funnel. Always put the product first.</p> <p>Finally, don’t ignore your gut. You can use data to back up your instinct, but rely on your experience in the industry. Don’t become 100% data-driven.</p> <h3>Further Reading</h3> <ul> <li>“<a class="colorbox" href="http://www.conversion-rate-experts.com/cro-tips/">Split-Testing 101: A Quick-Start Guide to Conversion Rate Optimization</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#14">14</a></sup>,” Conversion Rate Experts<br /> Everything you could ever want to know about multivariate testing, including plenty of inspiration on what to test.</li> <li>“<a class="colorbox" href="http://zenhabits.net/markety/">Confidence in Your Business</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#15">15</a></sup>,” Leo Babauta<br /> Remember that your visitors, readers or listeners are people. They are not to be manipulated.</li> <li>“<a class="colorbox" href="http://unbounce.com/conversion-rate-optimization/544-conversion-rate-optimization-tips/">741 Conversion Rate Optimization Tips (and Counting)</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#16">16</a></sup>,” Oli Gardner, Unbounce<br /> If you’re ever not sure what to test next, check here.</li> <li>“<a class="colorbox" href="http://groovehq.com/blog/long-form-landing-page">How We Grew Conversions 100% by Rethinking Our Design Strategy</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#17">17</a></sup>,” Alex Turnbull, Groove<br /> Groove doubled the conversion rate for its home page by focusing on a simple design and using feedback from real customers.</li> <li>“<a class="colorbox" href="http://www.copyblogger.com/landing-page-10-commandments/">The 10 Commandments of Landing Pages That Work</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#18">18</a></sup>,” Steven Lowe Copyblogger<br /> Print these out and stick them on your office wall. Remember them before every new A/B test.</li> <li>“<a class="colorbox" href="https://www.uie.com/articles/three_hund_million_button/">The $300 Million Button</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#19">19</a></sup>,” Jared M. Spool, User Interface Engineering<br /> See how Amazon increased revenue by $300,000,000 by allowing people to check out as guests.</li> <li>“<a class="colorbox" href="http://www.conversion-rate-experts.com/crazy-egg-case-study/">Does Optimization Ever End? How We Grew Crazy Egg’s Conversion Rate by 363%</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#20">20</a></sup>,” Conversion Rate Experts<br /> Does optimization ever end? Crazy Egg and Conversion Rate Experts don’t think so.</li> <li>“<a class="colorbox" href="http://www.theguardian.com/technology/2014/feb/05/why-google-engineers-designers">Google Has 200 Million Reasons to Put Engineers Over Designers</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#21">21</a></sup>,” Alex Hern, The Guardian<br /> Google got flack from designers for testing <a class="colorbox" href="http://www.zeldman.com/2009/03/20/41-shades-of-blue/">41 shades of blue links</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#22">22</a></sup> years ago, but the results speak for themselves. If your team ever disagrees about a design choice, an A/B test could help you decide. But it’s possible to become too data-focused.</li> <li>“<a class="colorbox" href="http://nerds.airbnb.com/experiments-at-airbnb/">Experiments at Airbnb</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#23">23</a></sup>,” Jan Overgoor, Airbnb<br /> An in-depth look at Airbnb’s custom A/B testing tools, including how the company test its own system and a few A/B testing errors it has run into.</li> <li>“<a class="colorbox" href="http://kylerush.net/blog/optimization-at-the-obama-campaign-ab-testing/">Optimization at the Obama Campaign: A/B Testing</a><sup><a class="colorbox" href="http://www.smashingmagazine.com/#24">24</a></sup>,” Kyle Rush<br /> Obama’s marketing team used 500 A/B tests over 20 months to increase donation conversions by 49% and registrations by 161%.</li> </ul> <p><em>(ml, al, il)</em></p> <h4>Footnotes</h4> <ol> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-1">1 http://www.smashingmagazine.com/wp-content/uploads/2014/06/ab-illustration-opt.jpg</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-2">2 http://www.smashingmagazine.com/2010/06/24/the-ultimate-guide-to-a-b-testing/</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-3">3 http://www.evanmiller.org/ab-testing/sample-size.html</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-4">4 http://en.wikipedia.org/wiki/Statistical_significance</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-5">5 http://www.31three.com/notebook/archive/campaign_monitor_landing_pages</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-6">6 http://visualwebsiteoptimizer.com/</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-7">7 http://www.smashingmagazine.com/wp-content/uploads/2014/06/vwo-insights-opt.jpg</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-8">8 http://www.smashingmagazine.com/wp-content/uploads/2014/06/vwo-insights-opt.jpg</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-9">9 https://www.optimizely.com/</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-10">10 https://support.google.com/analytics/answer/1745147?hl=en</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-11">11 http://help.campaignmonitor.com/topic.aspx?t=139</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-12">12 https://visualwebsiteoptimizer.com/ab-testing/#section-5</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-13">13 https://visualwebsiteoptimizer.com/ab-testing/#inner-section-2</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-14">14 http://www.conversion-rate-experts.com/cro-tips/</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-15">15 http://zenhabits.net/markety/</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-16">16 http://unbounce.com/conversion-rate-optimization/544-conversion-rate-optimization-tips/</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-17">17 http://groovehq.com/blog/long-form-landing-page</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-18">18 http://www.copyblogger.com/landing-page-10-commandments/</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-19">19 https://www.uie.com/articles/three_hund_million_button/</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-20">20 http://www.conversion-rate-experts.com/crazy-egg-case-study/</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-21">21 http://www.theguardian.com/technology/2014/feb/05/why-google-engineers-designers</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-22">22 http://www.zeldman.com/2009/03/20/41-shades-of-blue/</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-23">23 http://nerds.airbnb.com/experiments-at-airbnb/</a></li> <li><a class="colorbox" href="http://www.smashingmagazine.com/#note-24">24 http://kylerush.net/blog/optimization-at-the-obama-campaign-ab-testing/</a></li> </ol> <p>The post <a class="colorbox" rel="nofollow" href="http://www.smashingmagazine.com/2014/07/11/roadmap-to-becoming-an-a-b-testing-expert/">A Roadmap To Becoming An A/B Testing Expert</a> appeared first on <a class="colorbox" rel="nofollow" href="http://www.smashingmagazine.com/">Smashing Magazine</a>.</p> <div class="fixed"></div> </div> <div class="under"> <span class="categories">Categories: </span><span><a href="http://www.webmastersgallery.com/category/uncategorized/" rel="category tag">Others</a></span> <span class="tags">Tags: </span><span></span> </div> </div> <div class="post" id="post-1958"> <h2><a class="title" href="http://www.webmastersgallery.com/2014/07/11/html5-clinic-make-your-browser-talk-via-the-speech-synthesis-api/" rel="bookmark">HTML5 Clinic: Make Your Browser Talk via The Speech Synthesis API</a></h2> <div class="info"> <span class="date">July 11th, 2014</span> <span class="author"><a href="http://www.webmastersgallery.com/author/admin/" title="Posts by admin" rel="author">admin</a></span> <span class="comments"><a href="http://www.webmastersgallery.com/2014/07/11/html5-clinic-make-your-browser-talk-via-the-speech-synthesis-api/#respond">No comments</a></span> <div class="fixed"></div> </div> <div class="content"> <div class="ftpimagefix" style="float:none"><a class="colorbox" href="http://feedproxy.google.com/~r/Noupe/~3/u8gpZ-uW7Nw/html5-clinic-make-your-browser-talk-with-the-speech-synthesis-api-83415.html"><img decoding="async" src="http://statisches.auslieferung.commindo-media-ressourcen.de/advertisement.gif" alt="" border="0"></a></div> <table width="650"> <tr> <td width="650"> <div> <br /> <a class="colorbox" href="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=target&collection=noupe-rss&position=2" target="_blank"><img decoding="async" src="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=image&collection=noupe-rss&position=2" border="0" alt=""></a> <a class="colorbox" href="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=target&collection=noupe-rss&position=3" target="_blank"><img decoding="async" src="http://auslieferung.commindo-media-ressourcen.de/random.php?mode=image&collection=noupe-rss&position=3" border="0" alt=""></a> </div> </td> </tr> </table> <p><a class="colorbox" href="http://www.noupe.com/design/html5-clinic-make-your-browser-talk-with-the-speech-synthesis-api-83415.html" title="HTML5 Clinic: Make Your Browser Talk via The Speech Synthesis API"><img decoding="async" src="http://www.noupe.com/wp-content/uploads/2014/07/speechsynthesis-w550.jpg" alt=""></a></p> <p>Navigation devices do it since forever. Now browsers are learning to do it, too. I’m talking about speech synthesis. HTML5?s new Speech Synthesis API allows your website to speak or more precise, to read out loud what is written there using a human voice. There are different voices for different languages, even several voices per language. Now all it takes is pressing a button and the browser will read your website contents to any visitor who demands it. A nice service for anyone and inevitable even for the visually impaired.</p> <div class="fixed"></div> </div> <div class="under"> <span class="categories">Categories: </span><span><a href="http://www.webmastersgallery.com/category/uncategorized/" rel="category tag">Others</a></span> <span class="tags">Tags: </span><span></span> </div> </div> <div id="pagenavi"> <span class="newer"><a href="http://www.webmastersgallery.com/2014/07/page/2/" >Newer Entries</a></span> <span class="older"><a href="http://www.webmastersgallery.com/2014/07/page/4/" >Older Entries</a></span> <div class="fixed"></div> </div> </div>   <div id="sidebar">  <div id="northsidebar" class="sidebar">  <div class="widget widget_feeds"> <div class="content"> <div id="subscribe"> <a rel="external nofollow" id="feedrss" title="Subscribe to this blog..." href="http://www.webmastersgallery.com/feed/"><abbr title="Really Simple Syndication">RSS</abbr></a> </div> <div class="fixed"></div> </div> </div>  <div id="text-389627311" class="widget widget_text"> <div class="textwidget"><a href="http://feeds2.feedburner.com/webmastersgallery" title="Subscribe to my feed" rel="alternate" type="application/rss+xml"><img src="http://www.feedburner.com/fb/images/pub/feed-icon32x32.png" alt="" style="border:0"/></a><a href="http://feeds2.feedburner.com/webmastersgallery" title="Subscribe to my feed" rel="alternate" type="application/rss+xml">Subscribe for latest Updates</a></div> </div><div id="text-389629461" class="widget widget_text"> <div class="textwidget"><form style="border:1px solid #ccc;padding:3px;text-align:center;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=webmastersgallery', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p>Enter your email address:</p><p><input type="text" style="width:140px" name="email"/></p><input type="hidden" value="webmastersgallery" name="uri"/><input type="hidden" name="loc" value="en_US"/><input type="submit" value="Subscribe" /><p>Delivered by <a href="http://feedburner.google.com" target="_blank" rel="noopener">FeedBurner</a></p></form></div> </div></div>  <div id="centersidebar">  <div id="eastsidebar" class="sidebar">  <div class="widget widget_categories"> <h3>Categories</h3> <ul> <li class="cat-item cat-item-518"><a href="http://www.webmastersgallery.com/category/affiliate-programs/">Affiliate Programs</a> </li> <li class="cat-item cat-item-147"><a href="http://www.webmastersgallery.com/category/design/">Designing</a> </li> <li class="cat-item cat-item-519"><a href="http://www.webmastersgallery.com/category/domain-names/">Domain Names</a> </li> <li class="cat-item cat-item-37"><a href="http://www.webmastersgallery.com/category/e-commerce/">E-commerce</a> </li> <li class="cat-item cat-item-509"><a href="http://www.webmastersgallery.com/category/internet-directories/">Internet Directories</a> </li> <li class="cat-item cat-item-510"><a href="http://www.webmastersgallery.com/category/message-boards/">Message Boards</a> </li> <li class="cat-item cat-item-1"><a href="http://www.webmastersgallery.com/category/uncategorized/">Others</a> </li> <li class="cat-item cat-item-506"><a href="http://www.webmastersgallery.com/category/programming/">Programming</a> </li> <li class="cat-item cat-item-511"><a href="http://www.webmastersgallery.com/category/promotion-and-marketing/">Promotion and Marketing</a> </li> <li class="cat-item cat-item-534"><a href="http://www.webmastersgallery.com/category/scripts-and-programming/">Scripts and Programming</a> </li> <li class="cat-item cat-item-513"><a href="http://www.webmastersgallery.com/category/search-engines/">Search Engines</a> </li> <li class="cat-item cat-item-135"><a href="http://www.webmastersgallery.com/category/social-media/">Social Media</a> </li> <li class="cat-item cat-item-514"><a href="http://www.webmastersgallery.com/category/softwares/">Softwares</a> </li> <li class="cat-item cat-item-515"><a href="http://www.webmastersgallery.com/category/tips-and-tutorials/">Tips and Tutorials</a> </li> <li class="cat-item cat-item-338"><a href="http://www.webmastersgallery.com/category/web-hosting/">Web Hosting</a> </li> <li class="cat-item cat-item-516"><a href="http://www.webmastersgallery.com/category/webmaster-tools/">Webmaster Tools</a> </li> <li class="cat-item cat-item-501"><a href="http://www.webmastersgallery.com/category/webmaster-resources/">Webmasters Resources</a> </li> <li class="cat-item cat-item-3"><a href="http://www.webmastersgallery.com/category/web-design/">Website Design</a> </li> </ul> </div> </div>   <div id="westsidebar" class="sidebar">  <div class="widget widget_links"> <h3>Blogroll</h3> <ul> <li><a href="http://wordpress.org/development/">Development Blog</a></li> <li><a href="http://codex.wordpress.org/">Documentation</a></li> <li><a href="http://wordpress.org/extend/plugins/">Plugins</a></li> <li><a href="http://wordpress.org/extend/ideas/">Suggest Ideas</a></li> <li><a href="http://wordpress.org/support/">Support Forum</a></li> <li><a href="http://wordpress.org/extend/themes/">Themes</a></li> <li><a href="http://planet.wordpress.org/">WordPress Planet</a></li> </ul> </div> </div>  <div class="fixed"></div> </div>  <div id="southsidebar" class="sidebar">  <div class="widget"> <h3>Archives</h3> <ul> <li><a href='http://www.webmastersgallery.com/2024/04/'>April 2024</a></li> <li><a href='http://www.webmastersgallery.com/2024/03/'>March 2024</a></li> <li><a href='http://www.webmastersgallery.com/2024/02/'>February 2024</a></li> <li><a href='http://www.webmastersgallery.com/2024/01/'>January 2024</a></li> <li><a href='http://www.webmastersgallery.com/2023/12/'>December 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/11/'>November 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/10/'>October 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/09/'>September 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/08/'>August 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/07/'>July 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/06/'>June 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/05/'>May 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/04/'>April 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/03/'>March 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/02/'>February 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/01/'>January 2023</a></li> <li><a href='http://www.webmastersgallery.com/2022/12/'>December 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/11/'>November 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/10/'>October 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/09/'>September 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/08/'>August 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/07/'>July 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/06/'>June 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/05/'>May 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/04/'>April 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/03/'>March 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/02/'>February 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/01/'>January 2022</a></li> <li><a href='http://www.webmastersgallery.com/2021/12/'>December 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/11/'>November 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/10/'>October 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/09/'>September 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/08/'>August 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/07/'>July 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/06/'>June 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/05/'>May 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/04/'>April 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/03/'>March 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/02/'>February 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/01/'>January 2021</a></li> <li><a href='http://www.webmastersgallery.com/2020/12/'>December 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/11/'>November 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/10/'>October 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/09/'>September 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/08/'>August 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/07/'>July 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/06/'>June 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/05/'>May 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/04/'>April 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/03/'>March 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/02/'>February 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/01/'>January 2020</a></li> <li><a href='http://www.webmastersgallery.com/2019/12/'>December 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/11/'>November 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/10/'>October 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/09/'>September 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/08/'>August 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/07/'>July 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/06/'>June 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/05/'>May 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/04/'>April 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/03/'>March 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/02/'>February 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/01/'>January 2019</a></li> <li><a href='http://www.webmastersgallery.com/2018/12/'>December 2018</a></li> <li><a href='http://www.webmastersgallery.com/2018/11/'>November 2018</a></li> <li><a href='http://www.webmastersgallery.com/2018/10/'>October 2018</a></li> <li><a href='http://www.webmastersgallery.com/2018/09/'>September 2018</a></li> <li><a href='http://www.webmastersgallery.com/2018/08/'>August 2018</a></li> <li><a href='http://www.webmastersgallery.com/2018/07/'>July 2018</a></li> <li><a href='http://www.webmastersgallery.com/2018/04/'>April 2018</a></li> <li><a href='http://www.webmastersgallery.com/2018/01/'>January 2018</a></li> <li><a href='http://www.webmastersgallery.com/2017/12/'>December 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/11/'>November 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/09/'>September 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/08/'>August 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/07/'>July 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/06/'>June 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/05/'>May 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/04/'>April 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/03/'>March 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/02/'>February 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/01/'>January 2017</a></li> <li><a href='http://www.webmastersgallery.com/2016/12/'>December 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/11/'>November 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/10/'>October 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/09/'>September 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/08/'>August 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/07/'>July 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/06/'>June 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/05/'>May 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/04/'>April 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/03/'>March 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/02/'>February 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/01/'>January 2016</a></li> <li><a href='http://www.webmastersgallery.com/2015/12/'>December 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/11/'>November 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/10/'>October 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/09/'>September 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/08/'>August 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/07/'>July 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/06/'>June 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/05/'>May 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/04/'>April 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/03/'>March 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/02/'>February 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/01/'>January 2015</a></li> <li><a href='http://www.webmastersgallery.com/2014/12/'>December 2014</a></li> <li><a href='http://www.webmastersgallery.com/2014/11/'>November 2014</a></li> <li><a href='http://www.webmastersgallery.com/2014/10/'>October 2014</a></li> <li><a href='http://www.webmastersgallery.com/2014/09/'>September 2014</a></li> <li><a href='http://www.webmastersgallery.com/2014/08/'>August 2014</a></li> <li><a href='http://www.webmastersgallery.com/2014/07/' aria-current="page">July 2014</a></li> <li><a href='http://www.webmastersgallery.com/2014/06/'>June 2014</a></li> <li><a href='http://www.webmastersgallery.com/2013/07/'>July 2013</a></li> <li><a href='http://www.webmastersgallery.com/2013/01/'>January 2013</a></li> <li><a href='http://www.webmastersgallery.com/2012/12/'>December 2012</a></li> <li><a href='http://www.webmastersgallery.com/2012/08/'>August 2012</a></li> <li><a href='http://www.webmastersgallery.com/2012/07/'>July 2012</a></li> <li><a href='http://www.webmastersgallery.com/2012/06/'>June 2012</a></li> <li><a href='http://www.webmastersgallery.com/2012/05/'>May 2012</a></li> <li><a href='http://www.webmastersgallery.com/2012/04/'>April 2012</a></li> <li><a href='http://www.webmastersgallery.com/2012/01/'>January 2012</a></li> <li><a href='http://www.webmastersgallery.com/2011/11/'>November 2011</a></li> <li><a href='http://www.webmastersgallery.com/2011/06/'>June 2011</a></li> <li><a href='http://www.webmastersgallery.com/2011/03/'>March 2011</a></li> <li><a href='http://www.webmastersgallery.com/2011/02/'>February 2011</a></li> <li><a href='http://www.webmastersgallery.com/2011/01/'>January 2011</a></li> <li><a href='http://www.webmastersgallery.com/2010/12/'>December 2010</a></li> <li><a href='http://www.webmastersgallery.com/2010/11/'>November 2010</a></li> <li><a href='http://www.webmastersgallery.com/2010/09/'>September 2010</a></li> <li><a href='http://www.webmastersgallery.com/2010/07/'>July 2010</a></li> <li><a href='http://www.webmastersgallery.com/2010/06/'>June 2010</a></li> <li><a href='http://www.webmastersgallery.com/2010/05/'>May 2010</a></li> <li><a href='http://www.webmastersgallery.com/2010/02/'>February 2010</a></li> <li><a href='http://www.webmastersgallery.com/2009/12/'>December 2009</a></li> <li><a href='http://www.webmastersgallery.com/2009/08/'>August 2009</a></li> <li><a href='http://www.webmastersgallery.com/2009/07/'>July 2009</a></li> <li><a href='http://www.webmastersgallery.com/2009/06/'>June 2009</a></li> <li><a href='http://www.webmastersgallery.com/2009/05/'>May 2009</a></li> <li><a href='http://www.webmastersgallery.com/2009/04/'>April 2009</a></li> <li><a href='http://www.webmastersgallery.com/2009/03/'>March 2009</a></li> </ul> </div>  <div class="widget"> <h3>Meta</h3> <ul> <li><a href="http://www.webmastersgallery.com/wp-login.php">Log in</a></li> </ul> </div> </div>  </div>  <div class="fixed"></div> </div>   <div id="footer"> <a id="gotop" href="#" onclick="MGJS.goTop();return false;">Top</a> <a id="powered" href="http://wordpress.org/">WordPress</a> <div id="copyright"> Copyright © 2009-2024 Webmasters Gallery </div> <div id="themeinfo"> Theme by <a href="http://www.neoease.com/">NeoEase</a>. Valid <a href="http://validator.w3.org/check?uri=referer">XHTML 1.1</a> and <a href="http://jigsaw.w3.org/css-validator/check/referer?profile=css3">CSS 3</a>. </div> </div>  </div>  </div>  </body> </html>