When copying text from a website to your device’s clipboard, there’s a good chance that you will get the formatted HTML when pasting it. Some apps and operating systems have a “Paste Special” feature that will strip those tags out for you to maintain the current style, but what do you do if that’s unavailable?

Same goes for converting plain text into formatted HTML. One of the closest ways we can convert plain text into HTML is writing in Markdown as an abstraction. You may have seen examples of this in many comment forms in articles just like this one. Write the comment in Markdown and it is parsed as HTML.

Even better would be no abstraction at all! You may have also seen (and used) a number of online tools that take plainly written text and convert it into formatted HTML. The UI makes the conversion and previews the formatted result in real time.

Providing a way for users to author basic web content — like comments — without knowing even the first thing about HTML, is a novel pursuit as it lowers barriers to communicating and collaborating on the web. Saying it helps “democratize” the web may be heavy-handed, but it doesn’t conflict with that vision!

We can build a tool like this ourselves. I’m all for using existing resources where possible, but I’m also for demonstrating how these things work and maybe learning something new in the process.

Defining The Scope

There are plenty of assumptions and considerations that could go into a plain-text-to-HTML converter. For example, should we assume that the first line of text entered into the tool is a title that needs corresponding

tags? Is each new line truly a paragraph, and how does linking content fit into this?

Again, the idea is that a user should be able to write without knowing Markdown or HTML syntax. This is a big constraint, and there are far too many HTML elements we might encounter, so it’s worth knowing the context in which the content is being used. For example, if this is a tool for writing blog posts, then we can limit the scope of which elements are supported based on those that are commonly used in long-form content:

,

, , and . In other words, it will be possible to include top-level headings, body text, linked text, and images. There will be no support for bulleted or ordered lists, tables, or any other elements for this particular tool.

The front-end implementation will rely on vanilla HTML, CSS, and JavaScript to establish a small form with a simple layout and functionality that converts the text to HTML. There is a server-side aspect to this if you plan on deploying it to a production environment, but our focus is purely on the front end.

Looking At Existing Solutions

There are existing ways to accomplish this. For example, some libraries offer a WYSIWYG editor. Import a library like TinyMCE with a single and you’re good to go. WYSIWYG editors are powerful and support all kinds of formatting, even applying CSS classes to content for styling.

But TinyMCE isn’t the most efficient package at about 500 KB minified. That’s not a criticism as much as an indication of how much functionality it covers. We want something more “barebones” than that for our simple purpose. Searching GitHub surfaces more possibilities. The solutions, however, seem to fall into one of two categories:

• The input accepts plain text, but the generated HTML only supports the HTML


  and

  tags.

• The input converts plain text into formatted HTML, but by ”plain text,” the tool seems to mean “Markdown” (or a variety of it) instead. The txt2html Perl module (from 1994!) would fall under this category.

Even if a perfect solution for what we want was already out there, I’d still want to pick apart the concept of converting text to HTML to understand how it works and hopefully learn something new in the process. So, let’s proceed with our own homespun solution.

Setting Up The HTML

We’ll start with the HTML structure for the input and output. For the input element, we’re probably best off using a </code>. For the output element and related styling, choices abound. The following is merely one example with some very basic CSS to place the input <code><textarea></code> on the left and an output <code></p> <div></code> on the right:</p> <p>See the Pen <a target="_blank" href="https://codepen.io/smashingmag/pen/OJGoNOX" rel="noopener">Base Form Styles [forked]</a> by <a target="_blank" href="https://codepen.io/geoffgraham" rel="noopener">Geoff Graham</a>.</p> <p>You can further develop the CSS, but that isn’t the focus of this article. There is no question that the design can be prettier than what I am providing here!</p> <p>Capture The Plain Text Input</p> <p>We’ll set an <code>onkeyup</code> event handler on the <code><textarea></code> to call a JavaScript function called <code>convert()</code> that does what it says: convert the plain text into HTML. The conversion function should accept one parameter, a string, for the user’s plain text input entered into the <code><textarea></code> element:</p> <pre><code><textarea onkeyup='convert(this.value);'></textarea></code></pre> <p><code>onkeyup</code> is a better choice than <code>onkeydown</code> in this case, as <code>onkeyup</code> will call the conversion function <em>after</em> the user completes each keystroke, as opposed to <em>before</em> it happens. This way, the output, which is refreshed with each keystroke, always includes the latest typed character. If the conversion is triggered with an <code>onkeydown</code> handler, the output will exclude the most recent character the user typed. This can be frustrating when, for example, the user has finished typing a sentence but cannot yet see the final punctuation mark, say a period (<code>.</code>), in the output until typing another character first. This creates the impression of a typo, glitch, or lag when there is none.</p> <p>In JavaScript, the <code>convert()</code> function has the following responsibilities:</p> <ol> <li>Encode the input in HTML.</li> <li>Process the input line-by-line and wrap each individual line in either a <code><br /> <h1></code> or <code></p> <p></code> HTML tag, whichever is most appropriate.</li> <li>Process the output of the transformations as a single string, wrap URLs in HTML <code><a></code> tags, and replace image file names with <code><img></code> elements.</li> </ol> <p>And from there, we display the output. We can create separate functions for each responsibility. Let’s name them accordingly:</p> <ol> <li><code>html_encode()</code></li> <li><code>convert_text_to_HTML()</code></li> <li><code>convert_images_and_links_to_HTML()</code></li> </ol> <p>Each function accepts one parameter, a string, and returns a string.</p> <p>Encoding The Input Into HTML</p> <p>Use the <code>html_encode()</code> function to HTML encode/sanitize the input. HTML encoding refers to the process of escaping or replacing certain characters in a string input to prevent users from inserting their own HTML into the output. At a minimum, we should replace the following characters:</p> <ul> <li> <code><</code> with <code><</code> </li> <li> <code>></code> with <code>></code> </li> <li> <code>&</code> with <code>&</code> </li> <li> <code>'</code> with <code>'</code> </li> <li> <code>"</code> with <code>"</code> </li> </ul> <p>JavaScript does not provide a built-in way to HTML encode input as other languages do. For example, PHP has <a target="_blank" href="https://www.php.net/manual/en/function.htmlspecialchars" rel="noopener"><code>htmlspecialchars()</code></a>, <a target="_blank" href="https://www.php.net/manual/en/function.htmlentities" rel="noopener"><code>htmlentities()</code></a>, and <a target="_blank" href="https://www.php.net/manual/en/function.strip-tags" rel="noopener"><code>strip_tags()</code></a> functions. That said, it is relatively easy to write our own function that does this, which is what we’ll use the <code>html_encode()</code> function for that we defined earlier:</p> <pre><code>function html_encode(input) { const textArea = document.createElement("textarea"); textArea.innerText = input; return textArea.innerHTML.split("<br>").join("n"); } </code></pre> <p>HTML encoding of the input is a critical security consideration. It prevents unwanted scripts or other HTML manipulations from getting injected into our work. Granted, front-end input sanitization and validation are both merely deterrents because bad actors can bypass them. But we may as well make them work a little harder.</p> <p>As long as we are on the topic of securing our work, make sure to HTML-encode the input on the back end, where the user cannot interfere. At the same time, take care not to encode the input more than once. Encoding text that is already HTML-encoded will break the output functionality. The best approach for back-end storage is for the front end to pass the raw, unencoded input to the back end, then ask the back-end to HTML-encode the input before inserting it into a database.</p> <p>That said, this only accounts for sanitizing and storing the input on the back end. We still have to display the encoded HTML output on the front end. There are at least two approaches to consider:</p> <ol> <li> <strong>Convert the input to HTML after HTML-encoding it and before it is inserted into a database.</strong><br />This is efficient, as the input only needs to be converted once. However, this is also an inflexible approach, as updating the HTML becomes difficult if the output requirements happen to change in the future. </li> <li> <strong>Store only the HTML-encoded input text in the database and dynamically convert it to HTML before displaying the output for each content request.</strong><br />This is less efficient, as the conversion will occur on each request. However, it is also more flexible since it’s possible to update how the input text is converted to HTML if requirements change.</li> </ol> <p>Applying Semantic HTML Tags</p> <p>Let’s use the <code>convert_text_to_HTML()</code> function we defined earlier to wrap each line in their respective HTML tags, which are going to be either <code></p> <h1></code> or <code></p> <p></code>. To determine which tag to use, we will <code>split</code> the text input on the newline character (<code>n</code>) so that the text is processed as an array of lines rather than a single string, allowing us to evaluate them individually.</p> <div> <pre><code>function convert_text_to_HTML(txt) { // Output variable let out = ''; // Split text at the newline character into an array const txt_array = txt.split("n"); // Get the number of lines in the array const txt_array_length = txt_array.length; // Variable to keep track of the (non-blank) line number let non_blank_line_count = 0; for (let i = 0; i < txt_array_length; i++) { // Get the current line const line = txt_array[i]; // Continue if a line contains no text characters if (line === ''){ continue; } non_blank_line_count++; // If a line is the first line that contains text if (non_blank_line_count === 1){ // ...wrap the line of text in a Heading 1 tag out += <code>&lt;h1&gt;${line}&lt;/h1&gt;</code>; // ...otherwise, wrap the line of text in a Paragraph tag. } else { out += <code>&lt;p&gt;${line}&lt;/p&gt;</code>; } } return out; } </code></pre> </div> <p>In short, this little snippet loops through the array of split text lines and ignores lines that do <em>not</em> contain any text characters. From there, we can evaluate whether a line is the first one in the series. If it is, we slap a <code></p> <h1></code> tag on it; otherwise, we mark it up in a <code></p> <p></code> tag.</p> <p>This logic could be used to account for other types of elements that you may want to include in the output. For example, perhaps the second line is assumed to be a byline that names the author and links up to an archive of all author posts.</p> <p>Tagging URLs And Images With Regular Expressions</p> <p>Next, we’re going to create our <code>convert_images_and_links_to_HTML()</code> function to encode URLs and images as HTML elements. It’s a good chunk of code, so I’ll drop it in and we’ll immediately start picking it apart together to explain how it all works.</p> <div> <pre><code> function convert_images_and_links_to_HTML(string){ let urls_unique = []; let images_unique = []; const urls = string.match(/https*://[^s<),]+[^s<),.]/gmi) ?? []; const imgs = string.match(/[^"'>s]+.(jpg|jpeg|gif|png|webp)/gmi) ?? []; const urls_length = urls.length; const images_length = imgs.length; for (let i = 0; i < urls_length; i++){ const url = urls[i]; if (!urls_unique.includes(url)){ urls_unique.push(url); } } for (let i = 0; i < images_length; i++){ const img = imgs[i]; if (!images_unique.includes(img)){ images_unique.push(img); } } const urls_unique_length = urls_unique.length; const images_unique_length = images_unique.length; for (let i = 0; i < urls_unique_length; i++){ const url = urls_unique[i]; if (images_unique_length === 0 || !images_unique.includes(url)){ const a_tag = <code>&lt;a href="${url}" target="_blank"&gt;${url}&lt;/a&gt;</code>; string = string.replace(url, a_tag); } } for (let i = 0; i < images_unique_length; i++){ const img = images_unique[i]; const img_tag = <code>&lt;img src="${img}" alt=""&gt;</code>; const img_link = <code>&lt;a href="${img}"&gt;${img_tag}&lt;/a&gt;</code>; string = string.replace(img, img_link); } return string; } </code></pre> </div> <p>Unlike the <code>convert_text_to_HTML()</code> function, here we use regular expressions to identify the terms that need to be wrapped and/or replaced with <code><a></code> or <code><img></code> tags. We do this for a couple of reasons:</p> <ol> <li>The previous <code>convert_text_to_HTML()</code> function handles text that would be transformed to the HTML block-level elements <code><br /> <h1></code> and <code></p> <p></code>, and, if you want, other block-level elements such as <code></p> <address></code>. Block-level elements in the HTML output correspond to discrete lines of text in the input, which you can think of as paragraphs, the text entered between presses of the Enter key. </li> <li>On the other hand, URLs in the text input are often included in the middle of a sentence rather than on a separate line. Images that occur in the input text are often included on a separate line, but not always. While you could identify text that represents URLs and images by processing the input line-by-line — or even word-by-word, if necessary — it is easier to use regular expressions and process the entire input as a single string rather than by individual lines.</li> </ol> <p>Regular expressions, though they are powerful and the appropriate tool to use for this job, <a target="_blank" href="https://blog.bitsrc.io/threats-of-using-regular-expressions-in-javascript-28ddccf5224c" rel="noopener">come with a performance cost</a>, which is another reason to use each expression only once for the entire text input.</p> <p><strong>Remember</strong>: <em>All the JavaScript in this example runs each time the user types a character, so it is important to keep things as lightweight and efficient as possible.</em></p> <p>I also want to make a note about the variable names in our <code>convert_images_and_links_to_HTML()</code> function. <code>images</code> (plural), <code>image</code> (singular), and <code>link</code> are reserved words in JavaScript. Consequently, <code>imgs</code>, <code>img</code>, and <code>a_tag</code> were used for naming. Interestingly, these specific reserved words are not listed on the <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#reserved_words" rel="noopener">relevant MDN page</a>, but they are on <a target="_blank" href="https://www.w3schools.com/js/js_reserved.asp" rel="noopener">W3Schools</a>.</p> <p>We’re using the <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/match" rel="noopener"><code>String.prototype.match()</code></a> function for each of the two regular expressions, then storing the results for each call in an array. From there, we use the <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing" rel="noopener">nullish coalescing operator</a> (<code>??</code>) on each call so that, if no matches are found, the result will be an empty array. If we do not do this and no matches are found, the result of each <code>match()</code> call will be <code>null</code> and will cause problems downstream.</p> <div> <pre><code>const urls = string.match(/https*://[^s<),]+[^s<),.]/gmi) ?? []; const imgs = string.match(/[^"'>s]+.(jpg|jpeg|gif|png|webp)/gmi) ?? []; </code></pre> </div> <p>Next up, we filter the arrays of results so that <strong>each array contains only unique results</strong>. This is a critical step. If we don’t filter out duplicate results and the input text contains multiple instances of the same URL or image file name, then we break the HTML tags in the output. JavaScript does not provide a simple, built-in method to get unique items in an array that’s akin to the PHP <a target="_blank" href="https://www.php.net/manual/en/function.array-unique" rel="noopener"><code>array_unique()</code></a> function.</p> <p>The code snippet works around this limitation using an admittedly ugly but straightforward procedural approach. The same problem is solved using a more functional approach if you prefer. There are many articles on the web describing <a target="_blank" href="https://www.geeksforgeeks.org/how-to-get-all-unique-values-remove-duplicates-in-a-javascript-array/" rel="noopener">various ways to filter a JavaScript array</a> in order to <a target="_blank" href="https://chrisengelsma.medium.com/filtering-an-array-to-get-only-unique-values-in-javascript-and-typescript-3342e47b9448" rel="noopener">keep only the unique items</a>.</p> <p>We’re also checking if the URL is matched as an image before replacing a URL with an appropriate <code><a></code> tag and performing the replacement only if the URL doesn’t match an image. We may be able to avoid having to perform this check by using a more intricate regular expression. The example code deliberately uses regular expressions that are perhaps less precise but hopefully easier to understand in an effort to keep things as simple as possible.</p> <p>And, finally, we’re replacing image file names in the input text with <code><img></code> tags that have the <code>src</code> attribute set to the image file name. For example, <code>my_image.png</code> in the input is transformed into <code><img src='my_image.png'></code> in the output. We wrap each <code><img></code> tag with an <code><a></code> tag that links to the image file and opens it in a new tab when clicked.</p> <p>There are a couple of benefits to this approach:</p> <ul> <li>In a real-world scenario, you will likely use a CSS rule to constrain the size of the rendered image. By making the images clickable, you provide users with a convenient <strong>way to view the full-size image</strong>.</li> <li>If the image is not a local file but is instead a URL to an image from a third party, this is a <strong>way to implicitly provide attribution</strong>. Ideally, you should not rely solely on this method but, instead, provide explicit attribution underneath the image in a <code><figcaption></code>, <code><cite></code>, or similar element. But if, for whatever reason, you are unable to provide explicit attribution, you are at least providing a link to the image source.</li> </ul> <p>It may go without saying, but <a target="_blank" href="https://www.pixsy.com/image-protection/hotlinking" rel="noopener">“hotlinking”</a> images is something to avoid. Use only locally hosted images wherever possible, and provide attribution if you do not hold the copyright for them.</p> <p>Before we move on to displaying the converted output, let’s talk a bit about accessibility, specifically the image <code>alt</code> attribute. The example code I provided does add an <code>alt</code> attribute in the conversion but does not populate it with a value, as there is no easy way to automatically calculate what that value should be. An empty <code>alt</code> attribute can be acceptable if the image is considered “decorative,” i.e., purely supplementary to the surrounding text. But one may argue that <a target="_blank" href="https://www.smashingmagazine.com/2021/06/img-alt-attribute-alternate-description-decorative/" rel="noopener">there is no such thing as a purely decorative image</a>.</p> <p>That said, I consider this to be a limitation of what we’re building.</p> <p>Displaying the Output HTML</p> <p>We’re at the point where we can finally work on displaying the HTML-encoded output! We’ve already handled all the work of converting the text, so all we really need to do now is call it:</p> <div> <pre><code>function convert(input_string) { output.innerHTML = convert_images_and_links_to_HTML(convert_text_to_HTML(html_encode(input_string))); } </code></pre> </div> <p>If you would rather display the output string as raw HTML markup, use a <code></p> <pre></code> tag as the output element instead of a <code><div></code>:</p> <pre><code><pre id='output'></pre> </code></pre> <p>The only thing to note about this approach is that you would target the <code></p> <pre></code> element’s <code>textContent</code> instead of <code>innerHTML</code>:</p> <div> <pre><code>function convert(input_string) { output.textContent = convert_images_and_links_to_HTML(convert_text_to_HTML(html_encode(input_string))); } </code></pre> </div> <p>Conclusion</p> <p>We did it! We built one of the same sort of copy-paste tool that converts plain text on the spot. In this case, we’ve configured it so that plain text entered into a <code><textarea></code> is parsed line-by-line and encoded into HTML that we format and display inside another element.</p> <p>See the Pen <a target="_blank" href="https://codepen.io/smashingmag/pen/yLrxOzP" rel="noopener">Convert Plain Text to HTML (PoC) [forked]</a> by <a target="_blank" href="https://codepen.io/geoffgraham" rel="noopener">Geoff Graham</a>.</p> <p>We were even able to keep the solution fairly simple, i.e., vanilla HTML, CSS, and JavaScript, without reaching for a third-party library or framework. Does this simple solution do everything a ready-made tool like a framework can do? Absolutely not. But a solution as simple as this is often all you need: nothing more and nothing less.</p> <p>As far as scaling this further, the code could be modified to <code>POST</code> what’s entered into the <code></code> using a PHP script or the like. That would be a great exercise, and if you do it, please share your work with me in the comments because I’d love to check it out.</p> <h3>References</h3> <ul> <li>“<a target="_blank" href="https://www.w3docs.com/snippets/javascript/how-to-html-encode-a-string.html" rel="noopener">How to HTML-encode a String</a>” (W3Docs)</li> <li>“<a target="_blank" href="https://www.educative.io/answers/how-to-escape-unescape-html-characters-in-string-in-javascript" rel="noopener">How to escape & unescape HTML characters in string in JavaScript</a>” (Educative.io)</li> <li>“<a target="_blank" href="https://www.geeksforgeeks.org/how-to-get-all-unique-values-remove-duplicates-in-a-javascript-array/" rel="noopener">How to get all unique values (remove duplicates) in a JavaScript array?”</a>” (GeeksforGeeks)</li> <li>“<a target="_blank" href="https://chrisengelsma.medium.com/filtering-an-array-to-get-only-unique-values-in-javascript-and-typescript-3342e47b9448" rel="noopener">Getting Unique Array Values in Javascript and Typescript</a>,” Chris Engelsma</li> <li>“<a target="_blank" href="https://blog.bitsrc.io/threats-of-using-regular-expressions-in-javascript-28ddccf5224c" rel="noopener">Threats of Using Regular Expressions in JavaScript</a>,” Dulanka Karunasena</li> </ul> <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-6870272"> <h2><a class="title" href="http://www.webmastersgallery.com/2024/04/17/how-to-write-world-beating-web-content/" rel="bookmark">How to Write World-Beating Web Content</a></h2> <div class="info"> <span class="date">April 17th, 2024</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/2024/04/17/how-to-write-world-beating-web-content/#respond">No comments</a></span> <div class="fixed"></div> </div> <div class="content"> <div class="ftpimagefix" style="float:left"><a target="_blank" href="1" rel="noopener"><img decoding="async" src="https://www.webdesignerdepot.com/assets/posts/featured/web_writing.jpg"></a></div> <p>Writing for the web is different from all other formats. We typically do not read to any real depth on the web; we scan-read.</p> <div class="fixed"></div> </div> <div class="under"> <span class="categories">Categories: </span><span><a href="http://www.webmastersgallery.com/category/design/" rel="category tag">Designing</a>, <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-6863738"> <h2><a class="title" href="http://www.webmastersgallery.com/2024/04/16/a-wordpress-agency-advises-on-seo-migrations/" rel="bookmark">A WordPress Agency Advises On SEO Migrations</a></h2> <div class="info"> <span class="date">April 16th, 2024</span> <span class="author"></span> <span class="comments"><a href="http://www.webmastersgallery.com/2024/04/16/a-wordpress-agency-advises-on-seo-migrations/#respond">No comments</a></span> <div class="fixed"></div> </div> <div class="content"> <div class="ftpimagefix" style="float:left"><a target="_blank" href="0" rel="noopener"><img decoding="async" src="https://www.noupe.com/wp-content/uploads/2024/04/pexels-kindel-media-7688336-1024x768.jpg" class="attachment-large size-large wp-post-image" alt="" loading="lazy"></a></div> <div></div> <p class="opener">When you’ve invested a lot of time and resources in a new website design, the last thing you want to happen is to start optimizing the restructured site from scratch. In fact, nothing negates the enthusiasm of a new platform migration more than the danger of tanking SERPs rankings. </p> <p>Most times, site owners are reluctant to migrate their already established websites. However, in case there is no workaround solution, each step needs to be well-thought and measured.  Without proper planning and execution, the transition can lead to significant losses in organic traffic, revenue, and market share. </p> <p>SEO migrations imply serious changes and you need a really, <em>really </em>good reason to bite the bullet. It is usually inevitable if you decide to change your business name, offerings, server, CMS platform, add a mobile version, or add a security certificate.</p> <p>Common pitfalls include failing to create a migration plan, overlooking information architecture, and implementing sloppy 301 redirects. Content pruning, mobile responsiveness issues, slow page load times, and crawlability bugs are also common challenges. It’s crucial to set up analytics and tracking, prioritize XML sitemaps, and ensure that non-indexable content remains out of search engine indices. Post-migration monitoring is essential to spot and address issues promptly. By proactively addressing these risks, businesses can navigate website migrations successfully and maintain their SEO performance.</p> <p>In this article, we will discuss the implications of site migration on SEO and illuminate the strategic steps that businesses can take, under the expert counsel of the WordPress agency <a target="_blank" href="http://devrix.com/" rel="noreferrer noopener" data-wpel-link="external">DevriX</a>, to ensure a seamless transition that not only preserves but enhances their digital visibility. </p> <h2 class="wp-block-heading">Site Migrations vs. SEO Migrations</h2> <p>Just so we are clear, these terms are not the same thing although often used interchangeably.</p> <h3 class="wp-block-heading">Site Migrations</h3> <p>Different types of site migration include domain migration, where the website’s domain name changes, design migration, involving visual updates while retaining content and URLs, platform migration, moving to a different CMS or e-commerce platform, URL structure migration, altering URL organization, content migration, transferring and updating site content, and server migration, shifting to a new hosting environment for better performance or security. Each type serves specific purposes, from rebranding efforts to technical optimizations, requiring careful planning and execution to ensure a smooth transition without compromising user experience or SEO.</p> <h3 class="wp-block-heading">SEO Migrations</h3> <p>SEO migrations are a core aspect of website migration, encompassing critical adjustments to maintain or enhance search engine visibility, traffic, and rankings. This process involves meticulously managing various elements such as URL structures, redirects, content optimization, and technical configurations to ensure seamless transitions while preserving or improving SEO performance.</p> <h2 class="wp-block-heading">How Does A Site Migration Affect SEO?</h2> <p>Embarking on a site migration is akin to orchestrating a complex symphony where every note, or in this case, every aspect, must be meticulously aligned to maintain the harmony of SEO. Understanding the <a target="_blank" href="https://searchengineland.com/site-migration-seo-checklist-dont-lose-traffic-286880" data-wpel-link="external" rel="noopener">impact of SEO migrations on a site’s rankings</a> is paramount for businesses looking to evolve their online presence. </p> <h3 class="wp-block-heading">URL Changes and Link Structure</h3> <p>Changing URLs during a migration can disrupt the existing link structure. Links, both internal and external, contribute to a website’s authority. Implementing 301 redirects is crucial to seamlessly guide users and search engines from the old URLs to their new counterparts, preserving link equity.</p> <h3 class="wp-block-heading">Content Structure and Keywords</h3> <p>A shift in content structure can affect keyword relevance and page authority. Careful content mapping ensures that existing SEO value is retained and aligns with the new site architecture. This involves mapping old content to its equivalent or optimized version in the new structure and maintaining keyword relevance.</p> <h3 class="wp-block-heading">Technical Aspects and User Experience</h3> <p>Technical considerations, such as site speed, mobile responsiveness, and schema markup, play a pivotal role in SEO. A well-optimized website not only enhances user experience but also aligns with search engine algorithms. Prioritizing technical optimization ensures a smooth migration that positively impacts SEO.</p> <h3 class="wp-block-heading">Indexing Challenges</h3> <p>Mismanaged migrations can lead to indexing issues, where search engines struggle to crawl and index the new site. Proper handling of sitemaps, ensuring all relevant pages are included, and addressing potential crawl errors promptly are imperative to maintain visibility in search results.</p> <h3 class="wp-block-heading">Monitoring and Analysis</h3> <p>Post-migration, diligent monitoring is essential. Analyzing performance metrics, search engine rankings, and user behavior provides insights for ongoing optimization. Identifying anomalies and addressing them promptly safeguards the SEO health of the migrated site.</p> <h2 class="wp-block-heading">14 Steps for Successful SEO Migration</h2> <p>In case you didn’t already get the hint, site migrations are very clever traps. Navigating this intricate process demands a strategic approach and the expertise of a seasoned web developer to ensure a smooth transition. Let’s explore the essential steps for a successful SEO migration, where every move is calibrated to preserve and enhance digital visibility.</p> <h3 class="wp-block-heading">1. Thorough Site Audit</h3> <figure class="wp-block-image size-large"><img decoding="async" loading="lazy" width="486" height="1024" src="https://www.noupe.com/wp-content/uploads/2024/04/image-6-486x1024.png" alt="" class="wp-image-321421"></figure> <p>Start site migrations with a comprehensive site audit. Understand the current SEO landscape, identifying strengths, weaknesses, and areas for improvement. This audit serves as the foundation for crafting a tailored migration strategy aligned with business goals.</p> <h3 class="wp-block-heading">2. Strategic URL Mapping</h3> <p>URL changes are inherent in most migrations and require meticulous planning. Develop a strategic URL mapping plan, ensuring that redirects (especially 301 redirects) are implemented for old URLs to guide users and search engines smoothly to their new destinations. This step is critical for preserving link equity and maintaining SEO continuity.</p> <h3 class="wp-block-heading">3. Content Mapping and Optimization</h3> <p>Content is the lifeblood of SEO and is crucial for successful SEO migrations. Map existing content to the new site structure, optimizing for relevant keywords. Align meta tags, headers, and other on-page elements with SEO best practices. Ensure that the migration enhances content relevance and aligns seamlessly with the new architecture.</p> <h3 class="wp-block-heading">4. Technical Optimization</h3> <p>Address technical aspects to bolster SEO. Prioritize site speed, ensure swift loading times, and optimize for mobile responsiveness. Implement schema markup to enhance rich snippets in search results. Technical optimization contributes not only to SEO but also to overall user experience, a key factor in search engine algorithms.</p> <h3 class="wp-block-heading">5. Implement 301 Redirects</h3> <figure class="wp-block-image"><img decoding="async" src="https://www.noupe.com/a6a6f0e3-7008-4376-b09b-e214e1ed1a7b" alt=""></figure> <p>Implementing 301 (permanent) redirects is fundamental to SEO migration success. This step ensures that old URLs are seamlessly redirected to their new counterparts, preserving both user experience and link equity. It’s a critical strategy to communicate the structural changes to search engines effectively.</p> <h3 class="wp-block-heading">6. Update XML Sitemaps</h3> <p>Update and submit XML sitemaps to search engines, guiding their crawling and indexing processes. This step helps search engines understand the new site structure and ensures that all relevant pages are indexed. Regularly monitor crawl errors and address them promptly.</p> <h3 class="wp-block-heading">7. Create A Custom 404 Error Page</h3> <figure class="wp-block-image size-large"><img decoding="async" loading="lazy" width="1024" height="713" src="https://www.noupe.com/wp-content/uploads/2024/04/image-8-1024x713.png" alt="" class="wp-image-321441"></figure> <p>When carrying out an SEO migration, the emergence of broken links and error pages is inevitable often due to URL changes. As a WordPress developer, understanding the root cause of these errors and coming up with a clever error page design is crucial for seamless website functionality and good user experience. To effectively resolve this issue, consider utilizing the .htaccess file. Also, make sure you customize the design so that it helps visitors navigate to the Home page or other relevant sections of your website to locate the desired content. Look at it as a branding opportunity – it will not only suppress the turnover rate and the disappointment of an empty page, but it will also build trust in your brand as it shows “You have it under control”. </p> <h3 class="wp-block-heading">8. Crawl the Staging Site</h3> <p>It’s crucial to thoroughly crawl the staging site before launch to identify and address any potential issues such as broken links or missing metadata. Employing tools like JetOctopus or Screaming Frog is recommended for this task, especially when dealing with password-protected or no-index-tagged staging sites. It’s essential to ensure that the staging site accurately mirrors the final version of the website to prevent any unexpected challenges or discrepancies after the launch. This proactive approach helps streamline the transition process and minimize the likelihood of post-launch surprises.</p> <h3 class="wp-block-heading">9. Monitor Post-Migration Metrics</h3> <p><a target="_blank" href="https://searchengineland.com/seo-pitfalls-website-platform-migration-434215" rel="noreferrer noopener nofollow" data-wpel-link="external">Post-migration</a>, closely monitor essential metrics, including organic traffic, keyword rankings, and user engagement. Analyzing these metrics provides insights into the impact of the migration on SEO performance. Swiftly address any anomalies to maintain a healthy SEO profile.</p> <h3 class="wp-block-heading">10. Backlink Preservation</h3> <p>Identify websites linking to the old URLs and reach out to them. Request updates to ensure that backlinks redirect to the new site, preserving link authority. Backlinks are crucial for SEO, and their preservation contributes to maintaining and enhancing search engine rankings.</p> <h3 class="wp-block-heading">11. Engage with Search Console and Bing Webmaster Tools</h3> <p>Leverage tools like Google Search Console and other webmaster tools to monitor how search engines perceive the migration. Address any issues highlighted in these platforms promptly. Regular engagement with these tools provides valuable insights into ongoing SEO performance.</p> <h3 class="wp-block-heading">12. User Communication</h3> <p>Transparent communication with users is essential. Inform them of the migration through on-site announcements and social media. Managing user expectations helps mitigate any temporary disruptions and builds trust. Users who are aware of the changes are more likely to adapt positively. Also, don’t forget to update your Google My Business, Bing Places and any directory listings you have online. </p> <h3 class="wp-block-heading">13. Post-Migration SEO Analysis</h3> <p>Conduct a detailed analysis of SEO performance post-migration. Evaluate the impact on search engine rankings, organic traffic, and user engagement. Carry out SEO forecasting to identify areas for further optimization and fine-tune strategies based on the analysis.</p> <figure class="wp-block-image size-large"><img decoding="async" loading="lazy" width="1024" height="613" src="https://www.noupe.com/wp-content/uploads/2024/04/image-9-1024x613.png" alt="" class="wp-image-321451"></figure> <h3 class="wp-block-heading">14. Ongoing SEO Maintenance</h3> <p>SEO is not a one-time effort but an ongoing process. Continue to monitor and adapt SEO strategies as the digital landscape evolves. Regularly update content, address technical issues promptly, and stay informed about industry trends and algorithm changes.</p> <h2 class="wp-block-heading">Wrapping Up</h2> <p>Each step in site SEO migrations, from strategic URL mapping to ongoing SEO maintenance, shapes the success of your newly launched website. The symphony of technology and strategy ensures not only a seamless transition but also an optimized online presence. Remember, migrating a website is not an easy decision, and if you lack the expertise to DIY it, partner up with a web developer to ensure success.</p> <p><em>Featured image by <a target="_blank" href="https://www.pexels.com/photo/people-in-the-office-discussing-a-project-7688336/" rel="noreferrer noopener nofollow" class="broken_link" data-wpel-link="external">Kindel Media</a></em></p> <p>The post <a target="_blank" href="https://www.noupe.com/wordpress/a-wordpress-agency-advises-on-seo-migrations.html" data-wpel-link="internal" rel="noopener">A WordPress Agency Advises On SEO Migrations</a> appeared first on <a target="_blank" href="https://www.noupe.com/" data-wpel-link="internal" rel="noopener">noupe</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-6863739"> <h2><a class="title" href="http://www.webmastersgallery.com/2024/04/16/harnessing-the-power-of-pay-per-call-in-local-marketing-campaigns/" rel="bookmark">Harnessing the Power of Pay-Per-Call in Local Marketing Campaigns</a></h2> <div class="info"> <span class="date">April 16th, 2024</span> <span class="author"></span> <span class="comments"><a href="http://www.webmastersgallery.com/2024/04/16/harnessing-the-power-of-pay-per-call-in-local-marketing-campaigns/#respond">No comments</a></span> <div class="fixed"></div> </div> <div class="content"> <div class="ftpimagefix" style="float:left"><a target="_blank" href="0" rel="noopener"><img decoding="async" src="https://www.noupe.com/wp-content/uploads/2024/04/2149288225-1024x683.jpg" class="attachment-large size-large wp-post-image" alt="" loading="lazy"></a></div> <div></div> <p class="opener">As the number of smartphone users rises and our phones become indispensable for connecting with people and businesses, pay-per-call marketing emerges as the most pertinent and cutting-edge digital marketing model to ensure your brand presence.</p> <p>In our blog post, we’ll discuss the benefits of pay-per-call advertising and the importance of call tracking for running successful pay-per-call campaigns for local businesses.</p> <h2 class="wp-block-heading">What Is Pay-Per-Call?</h2> <p><a target="_blank" href="https://phonexa.com/blog/pay-per-call-marketing-guide/" rel="noreferrer noopener" data-wpel-link="external">Pay-per-call marketing</a> is akin to striking gold in digital marketing. Simply put, businesses only pay when the inbound calls from potential customers actively seek their services after spotting an ad or listing. This approach differs from traditional marketing channels, where businesses usually fork out much on impressions, conversions, or placements.</p> <p>Wonder how businesses track call leads? That’s when <a target="_blank" href="https://leadflowexperts.com/call-tracking-software/" rel="noreferrer noopener nofollow" data-wpel-link="external">software for call tracking</a> comes into play. Digital marketing is getting more and more challenging, so every small business and enterprise needs the right tracking and lead distribution solutions to get ahead of the competition and keep tabs on their marketing performance.</p> <p>Pay-per-call capitalizes on our plugged-in world, where practically every grown-up owns a smartphone and leans toward calling service providers when in need. In fact, 59% of people prefer reaching out via phone, and 57% of customers prefer to talk with a real person.</p> <p>Pay-per-call marketing is a surefire way to drive and convert more leads, especially in scenarios where customers crave human interaction over the phone. Take, for instance, emergencies demanding a swift contractor hire or the quest for thorough health insurance advice; in such cases, a direct phone conversation has more value than an email conversation or online form submission.</p> <p>These junctures present a golden chance for service providers to flex their customer service muscles and ace the art of converting calls into prospective customers, as these callers are already poised for action—you just need to seal the deal.</p> <h2 class="wp-block-heading">What Are The Benefits of Pay-Per-Call Marketing?</h2> <h3 class="wp-block-heading">Driving High-Quality Leads</h3> <p>In the realm of digital marketing, pay-per-call stands out due to its knack for driving top-notch leads. For example, when potential customers initiate a call to a certain business directly, it means that they have a high level of interest and engagement. Unlike in any other advertising campaign, pay-per-call leads have already shown intent by picking up the receiver, making them more inclined to convert into prospective customers. </p> <h3 class="wp-block-heading">High Conversion Rate</h3> <p>Furthermore, pay-per-call advertising boasts a superior lead conversion rate compared to other digital marketing avenues. By engaging directly with customers over the phone, businesses can address their specific needs and queries in real-time. This personal touch nurtures customer trust and credibility. In addition, it heightens the chances of conversion. Moreover, phone conversations provide businesses with a chance to pitch additional products or services and increase sales. </p> <h3 class="wp-block-heading">Targeting Local Customers Effectively</h3> <p>Another feather in the cap for pay-per-call advertising is its superiority in targeting local customers. Many businesses, particularly local service providers or brick-and-mortar shops, rely on attracting their target audience within a specific geographical area. Pay-per-call advertising helps businesses to focus on customers based on their location. Consequently, incoming calls hail from individuals who are more likely to become local “fans.” This localized approach turbocharges the efficiency of a local marketing campaign and aids businesses in increasing a robust presence in their locale. At the same time, you can convert local audiences into your customers if you <a target="_blank" href="https://viralqr.com/dynamic-qr-code-generator/" rel="noreferrer noopener nofollow" data-wpel-link="external">generate dynamic QR code</a> that includes all relevant information about your business like the phone number to distribute near your local area. This way, interested people could learn more about the business and become paying customers.</p> <h3 class="wp-block-heading">Valuable Insights in Business Performance </h3> <p>Moreover, in digital marketing, pay-per-call advertising delivers a treasure trove of valuable information and data for businesses to dissect and refine their digital marketing strategies. Thanks to call tracking and recording technology, businesses can gain deeper insights into their customers’ preferences, pain points, consumer behavior, and shopping habits. Thus, armed with this call analytics, businesses can fine-tune customer acquisition strategies, enhance customer service, and optimize overall business performance marketing. By leveraging this intel, businesses can make data-driven decisions that bring more sales opportunities (a higher return on investment rate).</p> <h2 class="wp-block-heading">Industries Benefiting from Pay-Per-Call in Local Marketing</h2> <p>Pay-per-call marketing does wonders for businesses dealing in services where a personal touch matters. It’s particularly effective for those with longer sales cycles as the advertising model provides a means to track and attribute leads, unlike other marketing channels.</p> <p>Moreover, PPCall offers a level of transparency, unlike many other marketing methods. It makes the pay-per-call model a magnet for companies seeking quality pay leads and ready to enhance their sales while delivering outstanding customer service.</p> <p>In essence, to measure whether your company can reap the rewards of pay-per-call marketing, you’ll need to crunch the numbers: analyze your average cost per job, evaluate the average cost per lead from a pay-per-call network, and realistically assess your ability to convert calls into bookings or purchases.</p> <h3 class="wp-block-heading">Some Industries Making Strides With Pay-Per-Call</h3> <ul> <li> <strong>Healthcare:</strong> dentistry, chiropractic, physical therapy, optometry, podiatry</li> <li> <strong>Home services:</strong> electricians, plumbers, HVAC, water damage restoration, mold removal, roofing, pest control, appliance repair</li> <li> <strong>Automotive:</strong> auto body shops, auto glass repair, towing services</li> <li> <strong>Legal & professional services:</strong> lawyers, accountants, credit repair, tax specialists, wealth managers</li> </ul> <h2 class="wp-block-heading">Drawbacks of Pay-Per-Call Lead Conversion</h2> <figure class="wp-block-table"> <table> <tbody> <tr> <td>Restricted audience targeting</td> <td>Pay-per-call marketing may have a narrower reach compared to online advertising since it relies on potential customers initiating phone calls.</td> </tr> <tr> <td>Call quality and scam</td> <td>Advertisers might encounter difficulties related to call quality and fraudulent calls, which could hinder the effectiveness of the campaign.</td> </tr> <tr> <td>Increased lead expenses</td> <td>Although Pay-per-call marketing can provide value, the costs of digital leads may rise in comparison to other advertising methods, especially in situations with low call volumes.</td> </tr> </tbody> </table> </figure> <h2 class="wp-block-heading">How to Utilize Pay-Per-Call Marketing in Local Campaigns</h2> <h3 class="wp-block-heading">Optimize Landing Pages</h3> <p>The initial step for businesses is to enhance their landing pages, transforming them into effective lead generators. This involves optimizing for mobile accessibility and user experience. If you utilize responsive designs tailored for seamless interaction, it will facilitate easy navigation on the brand’s landing page. In addition, it’ll provide access to essential information such as phone numbers or click-to-call options. </p> <h3 class="wp-block-heading">Implement Efficient Call Tracking</h3> <p>After a pay-per-call marketing campaign is devised and set out, it’s time to choose and employ call-tracking software. The latter captures data related to both incoming and outgoing phone calls (audio recordings, <a target="_blank" href="https://mallumusic.info/how-does-call-tracking-work/" rel="noreferrer noopener nofollow" data-wpel-link="external">call locations</a>, etc). Why is it important? Local businesses and marketers tap into call tracking to refine customer service, gain valuable business insights, and optimize various operational processes.</p> <p>Wonder how it works? Call-tracking software operates seamlessly in the cloud. When a customer makes a call routed through a VoIP service or similar cloud-based platform, it generates a log of the interaction. Then, being digital in nature, call-tracking software enables businesses to link <a target="_blank" href="https://bmmagazine.co.uk/business/how-call-tracking-and-ivr-functionality-may-be-helpful-for-your-business/" rel="noreferrer noopener nofollow" data-wpel-link="external">customer journeys to individual phone</a> numbers. It reveals their primary digital marketing channels. Thus, callers can reach companies through customizable webpage buttons, smartphones, or traditional landlines.</p> <h3 class="wp-block-heading">Other Benefits Of Call-Tracking Software </h3> <ul> <li>Increased sales and conversions</li> <li>Optimized advertising expenses </li> <li>Enhanced customer insights </li> <li>Refined customer service</li> </ul> <h2 class="wp-block-heading">Tap Into Pay-Per-Call Marketing To Drive Business Growth</h2> <p>In the end, the success of pay-per-call marketing relies on you as a business owner, the skills of your team, and the efficiency of your call center, if applicable.</p> <p>By embracing this swiftly expanding marketing tactic, you can capitalize on the opportunity for steady, enduring revenue streams. Therefore, don’t overlook this hidden gem in marketing—embrace pay-per-call and witness a surge in your return on investment.</p> <p><a target="_blank" href="https://www.freepik.com/free-photo/close-up-person-working-call-center_22896194.htm#fromView=search&page=1&position=3&uuid=aa32570c-4b7d-4c7c-b3a6-0fec61562a05" rel="noreferrer noopener nofollow" data-wpel-link="external">Featured Image by freepik</a></p> <p>The post <a target="_blank" href="https://www.noupe.com/business-online/harnessing-the-power-of-pay-per-call-in-local-marketing-campaigns.html" data-wpel-link="internal" rel="noopener">Harnessing the Power of Pay-Per-Call in Local Marketing Campaigns</a> appeared first on <a target="_blank" href="https://www.noupe.com/" data-wpel-link="internal" rel="noopener">noupe</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-6863740"> <h2><a class="title" href="http://www.webmastersgallery.com/2024/04/16/how-to-monitor-and-optimize-google-core-web-vitals/" rel="bookmark">How To Monitor And Optimize Google Core Web Vitals</a></h2> <div class="info"> <span class="date">April 16th, 2024</span> <span class="author"></span> <span class="comments"><a href="http://www.webmastersgallery.com/2024/04/16/how-to-monitor-and-optimize-google-core-web-vitals/#respond">No comments</a></span> <div class="fixed"></div> </div> <div class="content"> <div class="ftpimagefix" style="float:left"><a target="_blank" href="0" rel="noopener"><img decoding="async" src="https://files.smashing.media/articles/monitor-optimize-google-core-web-vitals/1-core-web-vitals.png"></a></div> <p>This article is a sponsored by <a target="_blank" href="https://www.debugbear.com/?utm_campaign=sm-5" rel="noopener">DebugBear</a></p> <p>Google’s <a target="_blank" href="https://web.dev/articles/vitals" rel="noopener">Core Web Vitals initiative</a> has increased the attention website owners need to pay to user experience. You can now more easily see when users have poor experiences on your website, and <a target="_blank" href="https://www.debugbear.com/docs/core-web-vitals-ranking-factor?utm_campaign=sm-5" rel="noopener">poor UX also has a bigger impact on SEO</a>.</p> <p>That means you need to test your website to identify optimizations. Beyond that, <strong>monitoring ensures that you can stay ahead of your Core Web Vitals scores</strong> for the long term.</p> <p>Let’s find out how to work with different types of Core Web Vitals data and how monitoring can help you gain a deeper insight into user experiences and help you optimize them.</p> <p>What Are Core Web Vitals?</p> <p>There are three web vitals metrics Google uses to measure different aspects of website performance:</p> <ul> <li>Largest Contentful Paint (LCP),</li> <li>Cumulative Layout Shift (CLS),</li> <li>Interaction to Next Paint (INP).</li> </ul> <h3>Largest Contentful Paint (LCP)</h3> <p>The <a target="_blank" href="https://www.debugbear.com/docs/metrics/largest-contentful-paint?utm_campaign=sm-5" rel="noopener">Largest Contentful Paint</a> metric is the closest thing to a traditional load time measurement. However, LCP doesn’t track a purely technical page load milestone like the <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event" rel="noopener">JavaScript Load Event</a>. Instead, it focuses on what the user can see by measuring <strong>how soon after opening a page, the largest content element on the page appears</strong>.</p> <p>The faster the LCP happens, the better, and Google rates a passing LCP score below 2.5 seconds.</p> <p><img decoding="async" src="https://files.smashing.media/articles/monitor-optimize-google-core-web-vitals/2-largest-contentful-paint.png"></p> <h3>Cumulative Layout Shift (CLS)</h3> <p><a target="_blank" href="https://www.debugbear.com/docs/metrics/cumulative-layout-shift?utm_campaign=sm-5" rel="noopener">Cumulative Layout Shift</a> is a bit of an odd metric, as it doesn’t measure how fast something happens. Instead, it looks at <strong>how stable the page layout is once the page starts loading</strong>. Layout shifts mean that content moves around, disorienting the user and potentially causing accidental clicks on the wrong UI element.</p> <p>The CLS score is calculated by looking at how far an element moved and how big the element is. Aim for a score below 0.1 to get a good rating from Google.</p> <p><img decoding="async" src="https://files.smashing.media/articles/monitor-optimize-google-core-web-vitals/3-cumulative-layout-shift.png"></p> <h3>Interaction to Next Paint (INP)</h3> <p>Even websites that load quickly often frustrate users when interactions with the page feel sluggish. That’s why <a target="_blank" href="https://www.debugbear.com/docs/metrics/interaction-to-next-paint?utm_campaign=sm-5" rel="noopener">Interaction to Next Paint</a> measures <strong>how long the page remains frozen after user interaction with no visual updates</strong>.</p> <p>Page interactions should feel practically instant, so Google recommends an INP score below 200 milliseconds.</p> <p><img decoding="async" src="https://files.smashing.media/articles/monitor-optimize-google-core-web-vitals/4-interaction-to-next-paint.png"></p> <p>What Are The Different Types Of Core Web Vitals Data?</p> <p>You’ll often see different page speed metrics reported by different tools and data sources, so it’s important to understand the differences. We’ve <a target="_blank" href="https://www.smashingmagazine.com/2023/10/answering-questions-interpreting-page-speed-reports/" rel="noopener">published a whole article just about that</a>, but here’s the high-level breakdown along with the pros and cons of each one:</p> <ul> <li> <strong>Synthetic Tests</strong><br />These tests are run on-demand in a controlled lab environment in a fixed location with a fixed network and device speed. They can produce very detailed reports and recommendations.</li> <li> <strong>Real User Monitoring (RUM)</strong><br />This data tells you how fast your website is for your actual visitors. That means you need to install an analytics script to collect it, and the reporting that’s available is less detailed than for lab tests.</li> <li> <strong>CrUX Data</strong><br />Google collects from Chrome users as part of the <a target="_blank" href="https://www.debugbear.com/blog/chrome-user-experience-report?utm_campaign=sm-5" rel="noopener">Chrome User Experience Report</a> (CrUX) and uses it as a ranking signal. It’s available for every website with enough traffic, but since it covers a 28-day rolling window, it takes a while for changes on your website to be reflected here. It also doesn’t include any debug data to help you optimize your metrics.</li> </ul> <p>Start By Running A One-Off Page Speed Test</p> <p>Before signing up for a monitoring service, it’s best to run a one-off lab test with a free tool like <a target="_blank" href="https://pagespeed.web.dev/" rel="noopener">Google’s PageSpeed Insights</a> or the <a target="_blank" href="https://www.debugbear.com/test/website-speed?utm_campaign=sm-5" rel="noopener">DebugBear Website Speed Test</a>. Both of these tools report with Google CrUX data that reflects whether real users are facing issues on your website.</p> <p><strong>Note</strong>: <em>The lab data you get from some Lighthouse-based tools — like PageSpeed Insights — <a target="_blank" href="https://www.debugbear.com/blog/is-pagespeed-insights-reliable?utm_campaign=sm-5" rel="noopener">can be unreliable</a>.</em></p> <p><img decoding="async" src="https://files.smashing.media/articles/monitor-optimize-google-core-web-vitals/5-one-off-page-speed-test.png"></p> <p>INP is best measured for real users, where you can see the elements that users interact with most often and where the problems lie. But a free tool like the <a target="_blank" href="https://www.debugbear.com/inp-debugger?utm_campaign=sm-5" rel="noopener">INP Debugger</a> can be a good starting point if you don’t have RUM set up yet.</p> <p>How To Monitor Core Web Vitals Continuously With Scheduled Lab-Based Testing</p> <p>Running tests continuously has a few advantages over ad-hoc tests. Most importantly, <strong>continuous testing triggers alerts whenever a new issue appears on your website</strong>, allowing you to start fixing them right away. You’ll also have <strong>access to historical data</strong>, allowing you to see exactly when a regression occurred and letting you compare test results before and after to see what changed.</p> <p>Scheduled lab tests are easy to set up using a website monitoring tool like <a target="_blank" href="https://www.debugbear.com/?utm_campaign=sm-5" rel="noopener">DebugBear</a>. Enter a list of website URLs and pick a device type, test location, and test frequency to get things running:</p> <p><img decoding="async" src="https://files.smashing.media/articles/monitor-optimize-google-core-web-vitals/6-scheduled-lab-based-testing.png"></p> <p>As this process runs, it feeds data into the detailed dashboard with historical Core Web Vitals data. You can monitor a number of pages on your website or track the speed of your competition to make sure you stay ahead.</p> <p><img decoding="async" src="https://files.smashing.media/articles/monitor-optimize-google-core-web-vitals/7-dashboard-historical-core-web-vitals-data.png"></p> <p>When regression occurs, you can dive deep into the results using DebuBears’s <a target="_blank" href="https://www.debugbear.com/docs/compare?utm_campaign=sm-5" rel="noopener">Compare mode</a>. This mode lets you see before-and-after test results side-by-side, giving you context for identifying causes. You see exactly what changed. For example, in the following case, we can see that <a target="_blank" href="https://en.wikipedia.org/wiki/HTTP_compression" rel="noopener">HTTP compression</a> stopped working for a file, leading to an increase in page weight and longer download times.</p> <p><img decoding="async" src="https://files.smashing.media/articles/monitor-optimize-google-core-web-vitals/8-debubears-compare-mode.png"></p> <p>How To Monitor Real User Core Web Vitals</p> <p>Synthetic tests are great for super-detailed reporting of your page load time. However, other aspects of user experience, like layout shifts and slow interactions, heavily depend on how real users use your website. So, it’s worth <a target="_blank" href="https://www.debugbear.com/real-user-monitoring?utm_campaign=sm-5" rel="noopener">setting up real user monitoring with a tool like DebugBear</a>.</p> <p>To monitor real user web vitals, you’ll need to install an analytics snippet that collects this data on your website. Once that’s done, you’ll be able to see data for all three Core Web Vitals metrics across your entire website.</p> <p><img decoding="async" src="https://files.smashing.media/articles/monitor-optimize-google-core-web-vitals/9-real-user-monitoring-debugbear.png"></p> <p>To optimize your scores, you can go into the dashboard for each individual metric, select a specific page you’re interested in, and then dive deeper into the data.</p> <p>For example, you can see whether a slow LCP score is caused by a slow server response, <a target="_blank" href="https://www.debugbear.com/blog/render-blocking-resources?utm_campaign=sm-5" rel="noopener">render blocking resources</a>, or by the LCP content element itself.</p> <p>You’ll also find that the LCP element varies between visitors. Lab test results are always the same, as they rely on a single fixed screen size. However, in the real world, visitors use a wide range of devices and will see different content when they open your website.</p> <p><img decoding="async" src="https://files.smashing.media/articles/monitor-optimize-google-core-web-vitals/10-dashboard-lcp-debugbear.png"></p> <p>INP is tricky to debug without real user data. Yet an analytics tool like DebugBear can tell you exactly what page elements users are interacting with most often and which of these interactions are slow to respond.</p> <p><img decoding="async" src="https://files.smashing.media/articles/monitor-optimize-google-core-web-vitals/11-inp-elements-debugbear.png"></p> <p>Thanks to the new <a target="_blank" href="https://www.debugbear.com/blog/long-animation-frames" rel="noopener">Long Animation Frames API</a>, we can also see specific scripts that contribute to slow interactions. We can then decide to optimize these scripts, remove them from the page, or run them in a way that does not block interactions for as long.</p> <p><img decoding="async" src="https://files.smashing.media/articles/monitor-optimize-google-core-web-vitals/12-inp-primary-scripts.png"></p> <p>Conclusion</p> <p>Continuously monitoring Core Web Vitals lets you see how website changes impact user experience and ensures you get alerted when something goes wrong. While it’s possible to measure Core Web Vitals using a wide range of tools, those tools are limited by the type of data they use to evaluate performance, not to mention they only provide a single snapshot of performance at a specific point in time.</p> <p>A tool like DebugBear gives you access to several different types of data that you can use to troubleshoot performance and optimize your website, complete with RUM capabilities that offer a historial record of performance for identifying issues where and when they occur. <a target="_blank" href="https://www.debugbear.com/signup?utm_campaign=sm-5" rel="noopener">Sign up for a free DebugBear trial here</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-6863741"> <h2><a class="title" href="http://www.webmastersgallery.com/2024/04/15/20-best-new-websites-april-2024/" rel="bookmark">20 Best New Websites, April 2024</a></h2> <div class="info"> <span class="date">April 15th, 2024</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/2024/04/15/20-best-new-websites-april-2024/#respond">No comments</a></span> <div class="fixed"></div> </div> <div class="content"> <div class="ftpimagefix" style="float:left"><a target="_blank" href="1" rel="noopener"><img decoding="async" src="https://www.webdesignerdepot.com/assets/posts/featured/01-kahlua.jpg"></a></div> <p>Welcome to our sites of the month for April. With some websites, the details make all the difference, while in others, it is the overall tone or aesthetic that lifts the standard. In this collection, we have instances of both.</p> <div class="fixed"></div> </div> <div class="under"> <span class="categories">Categories: </span><span><a href="http://www.webmastersgallery.com/category/design/" rel="category tag">Designing</a>, <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-6863134"> <h2><a class="title" href="http://www.webmastersgallery.com/2024/04/12/sliding-3d-image-frames-in-css/" rel="bookmark">Sliding 3D Image Frames In CSS</a></h2> <div class="info"> <span class="date">April 12th, 2024</span> <span class="author"></span> <span class="comments"><a href="http://www.webmastersgallery.com/2024/04/12/sliding-3d-image-frames-in-css/#respond">No comments</a></span> <div class="fixed"></div> </div> <div class="content"> <div class="ftpimagefix" style="float:left"><a target="_blank" href="0" rel="noopener"><img></code> tag as our markup. In this article, pick up where we left off by “revealing” the image from behind a sliding door sort of thing — like opening up a box and finding a photograph in it.</p> <p><img decoding="async" src="https://files.smashing.media/articles/sliding-3d-image-frames-css/1-border-overlay-intersect.png"></a></div> <p><a target="_blank" href="https://www.smashingmagazine.com/2023/09/revealing-images-css-mask-animations/" rel="noopener">In a previous article</a>, we played with CSS masks to create cool hover effects where the main challenge was to rely only on the <code></code> tag as our markup. In this article, pick up where we left off by “revealing” the image from behind a sliding door sort of thing — like opening up a box and finding a photograph in it.</p> <p><img decoding="async" src="https://files.smashing.media/articles/sliding-3d-image-frames-css/1-border-overlay-intersect.png"></p> <p>This is because the padding has a transition that goes from <code>s - 2*b</code> to <code>0</code>. Meanwhile, the background transitions from <code>100%</code> (equivalent to <code>--s</code>) to <code>0</code>. There’s a difference equal to <code>2*b</code>. The background covers the entire area, while the padding covers less of it. We need to account for this.</p> <p>Ideally, the padding transition would take less time to complete and have a small delay at the beginning to sync things up, but finding the correct timing won’t be an easy task. Instead, let’s increase the padding transition’s range to make it equal to the background.</p> <pre><code>img { --h: calc(var(--s) - var(--b)); padding-top: min(var(--h), var(--s) - 2*var(--b)); transition: --h 1s linear; } img:hover { --h: calc(-1 * var(--b)); } </code></pre> <p>The new variable, <code>--h</code>, transitions from <code>s - b</code> to <code>-b</code> on hover, so we have the needed range since the difference is equal to <code>--s</code>, making it equal to the <code>background</code> and <code>clip-path</code> transitions. </p> <p>The trick is the <code>min()</code> function. When <code>--h</code> transitions from <code>s - b</code> to <code>s - 2*b</code>, the padding is equal to <code>s - 2*b</code>. No padding changes during that brief transition. Then, when <code>--h</code> reaches <code>0</code> and transitions from <code>0</code> to <code>-b</code>, the padding remains equal to <code>0</code> since, by default, it cannot be a negative value. </p> <p>It would be more intuitive to use <code>clamp()</code> instead:</p> <pre><code>padding-top: clamp(0px, var(--h), var(--s) - 2*var(--b)); </code></pre> <p>That said, we don’t need to specify the lower parameter since padding cannot be negative and will, by default, be clamped to <code>0</code> if you give it a negative value.</p> <p>We are getting much closer to the final result!</p> <p><img decoding="async" src="https://files.smashing.media/articles/sliding-3d-image-frames-css/2-image-element-four-stages-3d-box.png"></p> <p>First, we increase the border’s thickness on the left and bottom sides of the image:</p> <div> <pre><code>img { --b: 10px; /* the image border */ --d: 30px; /* the depth */ border: solid #0000; border-width: var(--b) var(--b) calc(var(--b) + var(--d)) calc(var(--b) + var(--d)); } </code></pre> </div> <p>Second, we add a <code>conic-gradient()</code> on the background to create darker colors around the box:</p> <div> <pre><code>background: conic-gradient(at left var(--d) bottom var(--d), #0000 25%,#0008 0 62.5%,#0004 0) var(--c); </code></pre> </div> <p>Notice the semi-transparent black color values (e.g., <code>#0008</code> and <code>#0004</code>). The slight bit of transparency blends with the colors behind it to create the illusion of a dark variation of the main color since the gradient is placed above the background color.</p> <p>And lastly, we apply a <code>clip-path</code> to cut out the corners that establish the 3D box.</p> <div> <pre><code>clip-path: polygon(var(--d) 0, 100% 0, 100% calc(100% - var(--d)), calc(100% - var(--d)) 100%, 0 100%, 0 var(--d)); </code></pre> </div> <p>See the Pen <a target="_blank" href="https://codepen.io/smashingmag/pen/JjzRWXZ" rel="noopener">The image within a 3D box</a> by <a target="_blank" href="https://codepen.io/t_afif" rel="noopener">Temani Afif</a>.</p> <p>Now that we see and understand how the 3D effect is built let’s put back the things we removed earlier, starting with the padding:</p> <p>See the Pen <a target="_blank" href="https://codepen.io/smashingmag/pen/ExMgWXR" rel="noopener">Putting back the padding animation</a> by <a target="_blank" href="https://codepen.io/t_afif" rel="noopener">Temani Afif</a>.</p> <p>It works fine. But note how we’ve introduced the depth (<code>--d</code>) to the formula. That’s because the bottom border is no longer equal to <code>b</code> but <code>b + d</code>.</p> <div> <pre><code>--h: calc(var(--s) - var(--b) - var(--d)); padding-top: min(var(--h),var(--s) - 2*var(--b) - var(--d)); </code></pre> </div> <p>Let’s do the same thing with the linear gradient. We need to decrease its size so it covers the same area as it did before we introduced the depth so that it doesn’t overlap with the conic gradient:</p> <p>See the Pen <a target="_blank" href="https://codepen.io/smashingmag/pen/VwRKpzN" rel="noopener">Putting back the gradient animation</a> by <a target="_blank" href="https://codepen.io/t_afif" rel="noopener">Temani Afif</a>.</p> <p>We are getting closer! The last piece we need to add back in from earlier is the <code>clip-path</code> transition that is combined with the <code>box-shadow</code>. We cannot reuse the same code we used before since we changed the <code>clip-path</code> value to create the 3D box shape. But we can still transition it to get the sliding result we want.</p> <p>The idea is to have two points at the top that move up and down to reveal and hide the <code>box-shadow</code> while the other points remain fixed. Here is a small video to illustrate the movement of the points.</p> <p>See that? We have five fixed points. The two at the top move to increase the area of the polygon and reveal the box shadow.</p> <div> <pre><code>img { clip-path: polygon( var(--d) 0, /* --> var(--d) calc(-1*(var(--s) - var(--d))) */ 100% 0, /* --> 100% calc(-1*(var(--s) - var(--d))) */ /* the fixed points */ 100% calc(100% - var(--d)), /* 1 */ calc(100% - var(--d)) 100%, /* 2 */ 0 100%, /* 3 */ 0 var(--d), /* 4 */ var(--d) 0); /* 5 */ } </code></pre> </div> <p>And we’re done! We’re left with a nice 3D frame around the image element with a cover that slides up and down on hover. And we did it with zero extra markup or reaching for pseudo-elements!</p> <p>See the Pen <a target="_blank" href="https://codepen.io/smashingmag/pen/GRejXMK" rel="noopener">3D image with reveal effect</a> by <a target="_blank" href="https://codepen.io/t_afif" rel="noopener">Temani Afif</a>.</p> <p>And here is the first demo I shared at the start of this article, showing the two sliding variations.</p> <p>See the Pen <a target="_blank" href="https://codepen.io/smashingmag/pen/LYaPPPo" rel="noopener">Image gift box (hover to reveal)</a> by <a target="_blank" href="https://codepen.io/t_afif" rel="noopener">Temani Afif</a>.</p> <p>This last demo is an optimized version of what we did together. I have written most of the formulas using the variable <code>--h</code> so that I only update one value on hover. It also includes another variation. Can you reverse-engineer it and see how its code differs from the one we did together? </p> <p>One More 3D Example</p> <p>Want another fancy effect that uses 3D effects and sliding overlays? Here’s one I put together using a different 3D perspective where the overlay splits open rather than sliding from one side to the other.</p> <p>See the Pen <a target="_blank" href="https://codepen.io/smashingmag/pen/yLwBVGQ" rel="noopener">Image gift box II (hover to reveal)</a> by <a target="_blank" href="https://codepen.io/t_afif" rel="noopener">Temani Afif</a>.</p> <p>Your homework is to dissect the code. It may look complex, but if you trace the steps we completed for the original demo, I think you’ll find that it’s not a terribly different approach. The sliding effect still combines the <code>padding</code>, the <code>object-*</code> properties, and <code>clip-path</code> but with different values to produce this new effect.</p> <p>Conclusion</p> <p>I hope you enjoyed this little 3D image experiment and the fancy effect we applied to it. I know that adding an extra element (i.e., a parent <code></p> <div></code> as a wrapper) to the markup would have made the effect a lot easier to achieve, as would pseudo-elements and translations. But we are here for the challenge and learning opportunity, right?</p> <p>Limiting the HTML to only a single element allows us to push the limits of CSS to discover new techniques that can save us time and bytes, especially in those situations where you might not have direct access to modify HTML, like when you’re working in a CMS template. Don’t look at this as an over-complicated exercise. It’s an exercise that challenges us to leverage the power and flexibility of CSS.</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-6855428"> <h2><a class="title" href="http://www.webmastersgallery.com/2024/04/09/connecting-with-users-applying-principles-of-communication-to-ux-research/" rel="bookmark">Connecting With Users: Applying Principles Of Communication To UX Research</a></h2> <div class="info"> <span class="date">April 9th, 2024</span> <span class="author"></span> <span class="comments"><a href="http://www.webmastersgallery.com/2024/04/09/connecting-with-users-applying-principles-of-communication-to-ux-research/#respond">No comments</a></span> <div class="fixed"></div> </div> <div class="content"> <div class="ftpimagefix" style="float:left"><a target="_blank" href="0" rel="noopener"><img decoding="async" src="https://files.smashing.media/articles/applying-principles-communication-ux-research/transactional-model.jpg"></a></div> <p>Communication is in everything we do. We communicate with users through our research, our design, and, ultimately, the products and services we offer. UX practitioners and those working on digital product teams benefit from understanding principles of communication and their application to our craft. Treating our UX processes as a mode of communication between users and the digital environment can help unveil in-depth, actionable insights.</p> <p>In this article, I’ll focus on UX research. <strong>Communication is a core component of UX research</strong>, as it serves to bridge the gap between research insights, design strategy, and business outcomes. UX researchers, designers, and those working with UX researchers can apply key aspects of communication theory to help gather valuable insights, enhance user experiences, and create more successful products. </p> <p>Fundamentals of Communication Theory</p> <p>Communications as an academic field encompasses various models and principles that highlight the dynamics of communication between individuals and groups. Communication theory examines the transfer of information from one person or group to another. It explores how messages are transmitted, encoded, and decoded, acknowledges the potential for interference (or ‘noise’), and accounts for feedback mechanisms in enhancing the communication process.</p> <p>In this article, I will focus on the <strong>Transactional Model of Communication</strong>. There are many other models and theories in the academic literature on communication. I have included references at the end of the article for those interested in learning more. </p> <p>The Transactional Model of Communication (Figure 1) is a <strong>two-way process that emphasizes the simultaneous sending and receiving of messages and feedback</strong>. Importantly, it recognizes that communication is shaped by context and is an ongoing, evolving process. I’ll use this model and understanding when applying principles from the model to UX research. You’ll find that much of what is covered in the Transactional Model would also fall under general best practices for UX research, suggesting even if we aren’t communications experts, much of what we should be doing is supported by research in this field.</p> </p> <h3>Understanding the Transactional Model</h3> <p>Let’s take a deeper dive into the six key factors and their applications within the realm of UX research:</p> <ol> <li> <strong>Sender:</strong> In UX research, the sender is typically the researcher who conducts interviews, facilitates usability tests, or designs surveys. For example, if you’re administering a user interview, you are the sender who initiates the communication process by asking questions.</li> <li> <strong>Receiver:</strong> The receiver is the individual who decodes and interprets the messages sent by the sender. In our context, this could be the user you interview or the person taking a survey you have created. They receive and process your questions, providing responses based on their understanding and experiences.</li> <li> <strong>Message:</strong> This is the content being communicated from the sender to the receiver. In UX research, the message can take various forms, like a set of survey questions, interview prompts, or tasks in a usability test.</li> <li> <strong>Channel:</strong> This is the medium through which the communication flows. For instance, face-to-face interviews, phone interviews, email surveys administered online, and usability tests conducted via screen sharing are all different communication channels. You might use multiple channels simultaneously, for example, communicating over voice while also using a screen share to show design concepts.</li> <li> <strong>Noise:</strong> Any factor that may interfere with the communication is regarded as ‘noise.’ In UX research, this could be complex jargon that confuses respondents in a survey, technical issues during a remote usability test, or environmental distractions during an in-person interview.</li> <li> <strong>Feedback:</strong> The communication received by the receiver, who then provides an output, is called feedback. For example, the responses given by a user during an interview or the data collected from a completed survey are types of feedback or the physical reaction of a usability testing participant while completing a task.</li> </ol> <p>Applying the Transactional Model of Communication to Preparing for UX Research</p> <p>We can become complacent or feel rushed to create our research protocols. I think this is natural in the pace of many workplaces and our need to deliver results quickly. You can apply the lens of the Transactional Model of Communication to your research preparation without adding much time. Applying the Transactional Model of Communication to your preparation should:</p> <ul> <li> <strong>Improve Clarity</strong><br />The model provides a clear representation of communication, empowering the researcher to plan and conduct studies more effectively.</li> <li> <strong>Minimize misunderstanding</strong><br />By highlighting potential noise sources, user confusion or misunderstandings can be better anticipated and mitigated.</li> <li> <strong>Enhance research participant participation</strong><br />With your attentive eye on feedback, participants are likely to feel valued, thus increasing active involvement and quality of input.</li> </ul> <p>You can address the specific elements of the Transactional Model through the following steps while preparing for research:</p> <h4>Defining the Sender and Receiver</h4> <p>In UX research, the sender can often be the UX researcher conducting the study, while the receiver is usually the research participant. Understanding this dynamic can help researchers craft questions or tasks more empathetically and efficiently. You should try to collect some information on your participant in advance to prepare yourself for building a rapport.</p> <p>For example, if you are conducting contextual inquiry with the field technicians of an HVAC company, you’ll want to dress appropriately to reflect your understanding of the context in which your participants (receivers) will be conducting their work. Showing up dressed in formal attire might be off-putting and create a negative dynamic between sender and receiver.</p> <h4>Message Creation</h4> <p>The message in UX research typically is the questions asked or tasks assigned during the study. Careful consideration of tenor, terminology, and clarity can aid data accuracy and participant engagement. Whether you are interviewing or creating a survey, you need to double-check that your audience will understand your questions and provide meaningful answers. You can pilot-test your protocol or questionnaire with a few representative individuals to identify areas that might cause confusion.</p> <p>Using the HVAC example again, you might find that field technicians use certain terminology in a different way than you expect, such as asking them about what “tools” they use to complete their tasks yields you an answer that doesn’t reflect digital tools you’d find on a computer or smartphone, but physical tools like a pipe and wrench.</p> <h4>Choosing the Right Channel</h4> <p>The channel selection depends on the method of research. For instance, face-to-face methods might use physical verbal communication, while remote methods might rely on emails, video calls, or instant messaging. The choice of the medium should consider factors like tech accessibility, ease of communication, reliability, and participant familiarity with the channel. For example, you introduce an additional challenge (noise) if you ask someone who has never used an iPhone to test an app on an iPhone.</p> <h4>Minimizing Noise</h4> <p>Noise in UX research comes in many forms, from unclear questions inducing participant confusion to technical issues in remote interviews that cause interruptions. The key is to foresee potential issues and have preemptive solutions ready.</p> <h4>Facilitating Feedback</h4> <p>You should be prepared for how you might collect and act on participant feedback during the research. Encouraging regular feedback from the user during UX research ensures their understanding and that they feel heard. This could range from asking them to ‘think aloud’ as they perform tasks or encouraging them to email queries or concerns after the session. You should document any noise that might impact your findings and account for that in your analysis and reporting.</p> <h4>Track Your Alignment to the Framework</h4> <p>You can track what you do to align your processes with the Transactional Model prior to and during research using a spreadsheet. I’ll provide an example of a spreadsheet I’ve used in the later case study section of this article. You should create your spreadsheet during the process of preparing for research, as some of what you do to prepare should align with the factors of the model.</p> <p>You can use these tips for preparation regardless of the specific research method you are undertaking. Let’s now look closer at a few common methods and get specific on how you can align your actions with the Transactional Model.</p> <p><img decoding="async" src="https://files.smashing.media/articles/applying-principles-communication-ux-research/communication.jpg"></p> <p>Applying the Transactional Model to Common UX Research Methods</p> <p>UX research relies on interaction with users. We can easily incorporate aspects of the Transactional Model of Communication into our most common methods. Utilizing the Transactional Model in conducting interviews, surveys, and usability testing can help provide structure to your process and increase the quality of insights gathered.</p> <h3>Interviews</h3> <p>Interviews are a common method used in qualitative UX research. They provide the perfect method for applying principles from the Transactional Model. In line with the Transactional Model, the researcher (sender) sends questions (messages) in-person or over the phone/computer medium (channel) to the participant (receiver), who provides answers (feedback) while contending with potential distraction or misunderstanding (noise). Reflecting on communication as transactional can help remind us we need to respect the dynamic between ourselves and the person we are interviewing. <strong>Rather than approaching an interview as a unidirectional interrogation, researchers need to view it as a conversation.</strong></p> <p>Applying the Transactional Model to conducting interviews means we should account for a number of facts to allow for high-quality communication. Note how the following overlap with what we typically call best practices.</p> <h4>Asking Open-ended Questions</h4> <p>To truly harness a two-way flow of communication, open-ended questions, rather than close-ended ones, are crucial. For instance, rather than asking, <em>“Do you use our mobile application?”</em> ask, <em>“Can you describe your use of our mobile app?”.</em> This encourages the participant to share more expansive and descriptive insights, furthering the dialogue.</p> <h4>Actively Listening</h4> <p>As the success of an interview relies on the participant’s responses, active listening is a crucial skill for UX researchers. The researcher should encourage participants to express their thoughts and feelings freely. <strong>Reflective listening techniques</strong>, such as paraphrasing or summarizing what the participant has shared, can reinforce to the interviewee that their contributions are being acknowledged and valued. It also provides an opportunity to clarify potential noise or misunderstandings that may arise.</p> <h4>Being Responsive</h4> <p>Building on the simultaneous send-receive nature of the Transactional Model, researchers must remain responsive during interviews. Providing non-verbal cues (like nodding) and verbal affirmations (“I see,” “Interesting”) lets participants know their message is being received and understood, making them feel comfortable and more willing to share.</p> <h4>Minimizing Noise</h4> <p>We should always attempt to account for noise in advance, as well as during our interview sessions. Noise, in the form of misinterpretations or distractions, can disrupt effective communication. Researchers can proactively <strong>reduce noise by conducting a dry run in advance of the scheduled interviews</strong>. This helps you become more fluent at going through the interview and also helps identify areas that might need improvement or be misunderstood by participants. You also reduce noise by creating a conducive interview environment, minimizing potential distractions, and asking clarifying questions during the interview whenever necessary.</p> <p>For example, if a participant uses a term the researcher doesn’t understand, the researcher should politely ask for clarification rather than guessing its meaning and potentially misinterpreting the data. </p> <p>Additional forms of noise can include participant confusion or distraction. You should let participants know to ask if they are unclear on anything you say or do. It’s a good idea to always ask participants to put their smartphones on mute. You should only <strong>provide information critical to the process when introducing the interview</strong> or tasks. For example, you don’t need to give a full background of the history of the product you are researching if that isn’t required for the participant to complete the interview. However, you should let them know the purpose of the research, gain their consent to participate, and inform them of how long you expect the session to last.</p> <h4>Strategizing the Flow</h4> <p>Researchers should build strategic thinking into their interviews to support the Transaction Model. Starting the interview with less intrusive questions can help establish rapport and make the participant more comfortable, while more challenging or sensitive questions can be left for later when the interviewee feels more at ease.</p> <p>A well-planned interview encourages a fluid dialogue and exchange of ideas. This is another area where conducting a dry run can help to ensure high-quality research. You and your dry-run participants should recognize areas where questions aren’t flowing in the best order or don’t make sense in the context of the interview, allowing you to correct the flow in advance.</p> <p>While much of what the Transactional Model informs for interviews already aligns with common best practices, the model would suggest we need to have a deeper consideration of factors that we can sometimes give less consideration when we become overly comfortable with interviewing or are unaware of the implications of forgetting to address the factors of context considerations, power dynamics, and post-interview actions.</p> <h4>Context Considerations</h4> <p>You need to account for both the context of the participant, e.g., their background, demographic, and psychographic information, as well as the context of the interview itself. You should make subtle yet meaningful modifications depending on the channel you are conducting an interview.</p> <p>For example, you should utilize video and be aware of your facial and physical responses if you are conducting an interview using an online platform, whereas if it’s a phone interview, you will need to rely on verbal affirmations that you are listening and following along, while also being mindful not to interrupt the participant while they are speaking.</p> <h4>Power Dynamics</h4> <p>Researchers need to be aware of how your role, background, and identity might influence the power dynamics of the interview. You can attempt to address power dynamics by sharing research goals transparently and addressing any potential concerns about bias a participant shares.</p> <p>We are responsible for creating a safe and inclusive space for our interviews. You do this through the use of inclusive language, listening actively without judgment, and being flexible to accommodate different ways of knowing and expressing experiences. You should also <strong>empower participants as collaborators whenever possible</strong>. You can offer opportunities for participants to share feedback on the interview process and analysis. Doing this validates participants’ experiences and knowledge and ensures their voices are heard and valued.</p> <h4>Post-Interview Actions</h4> <p>You have a number of options for actions that can close the loop of your interviews with participants in line with the “feedback” the model suggests is a critical part of communication. Some tactics you can consider following your interview include:</p> <ul> <li> <strong>Debriefing</strong><br />Dedicate a few minutes at the end to discuss the participant’s overall experience, impressions, and suggestions for future interviews.</li> <li> <strong>Short surveys</strong><br />Send a brief survey via email or an online platform to gather feedback on the interview experience.</li> <li> <strong>Follow-up calls</strong><br />Consider follow-up calls with specific participants to delve deeper into their feedback and gain additional insight if you find that is warranted.</li> <li> <strong>Thank you emails</strong><br />Include a “feedback” section in your thank you email, encouraging participants to share their thoughts on the interview.</li> </ul> <p>You also need to do something with the feedback you receive. Researchers and product teams should make time for reflexivity and critical self-awareness.</p> <p>As practitioners in a human-focused field, we are expected to continuously examine how our assumptions and biases might influence our interviews and findings.</p> <p>We shouldn’t practice our craft in a silo. Instead, <strong>seeking feedback from colleagues and mentors to maintain ethical research practices should be a standard practice</strong> for interviews and all UX research methods.</p> <p>By considering interviews as an ongoing transaction and exchange of ideas rather than a unidirectional Q&A, UX researchers can create a more communicative and engaging environment. You can see how models of communication have informed best practices for interviews. With a better knowledge of the Transactional Model, you can go deeper and check your work against the framework of the model. </p> <h3>Surveys</h3> <p>The Transactional Model of Communication reminds us to acknowledge the feedback loop even in seemingly one-way communication methods like surveys. Instead of merely sending out questions and collecting responses, we need to provide space for respondents to voice their thoughts and opinions freely. When we make participants feel heard, engagement with our surveys should increase, dropouts should decrease, and response quality should improve.</p> <p>Like other methods, surveys involve the researcher(s) creating the instructions and questionnaire (sender), the survey, including any instructions, disclaimers, and consent forms (the message), how the survey is administered, e.g., online, in person, or pen and paper (the channel), the participant (receiver), potential misunderstandings or distractions (noise), and responses (feedback).</p> <h4>Designing the Survey</h4> <p>Understanding the Transactional Model will help researchers design more effective surveys. Researchers are encouraged to be aware of both their role as the sender and to anticipate the participant’s perspective as the receiver. Begin surveys with clear instructions, explaining why you’re conducting the survey and how long it’s estimated to take. This establishes a more communicative relationship with respondents right from the start. Test these instructions with multiple people prior to launching the survey.</p> <h4>Crafting Questions</h4> <p>The questions should be crafted to encourage feedback and not just a simple yes or no. You should consider asking scaled questions or items that have been statistically validated to measure certain attributes of users.</p> <p>For example, if you were looking deeper at a mobile banking application, rather than asking, <em>“Did you find our product easy to use?”</em> you would want to break that out into multiple aspects of the experience and ask about each with a separate question such as <em>“On a scale of 1–7, with 1 being extremely difficult and 7 being extremely easy, how would you rate your experience transferring money from one account to another?”</em>.</p> <h4>Minimizing Noise</h4> <p>Reducing ‘noise,’ or misunderstandings, is crucial for increasing the reliability of responses. Your first line of defense in reducing noise is to make sure you are sampling from the appropriate population you want to conduct the research with. You need to <strong>use a screener that will filter out non-viable participants</strong> prior to including them in the survey. You do this when you correctly identify the characteristics of the population you want to sample from and then exclude those falling outside of those parameters.</p> <p>Additionally, you should focus on prioritizing finding participants through random sampling from the population of potential participants versus using a convenience sample, as this helps to ensure you are collecting reliable data.</p> <p>When looking at the survey itself, there are a number of recommendations to reduce noise. You should ensure questions are easily understandable, avoid technical jargon, and sequence questions logically. A question bank should be reviewed and tested before being finalized for distribution.</p> <p>For example, question statements like <em>“Do you use and like this feature?”</em> can confuse respondents because they are actually two separate questions: do you use the feature, and do you like the feature? You should separate out questions like this into more than one question. </p> <p>You should use visual aids that are relevant whenever possible to enhance the clarity of the questions. For example, if you are asking questions about an application’s “Dashboard” screen, you might want to provide a screenshot of that page so survey takers have a clear understanding of what you are referencing. You should also avoid the use of jargon if you are surveying a non-technical population and explain any terminology that might be unclear to participants taking the survey.</p> <p>The Transactional Model suggests <strong>active participation in communication is necessary for effective communication</strong>. Participants can become distracted or take a survey without intending to provide thoughtful answers. You should consider adding a question somewhere in the middle of the survey to check that participants are paying attention and responding appropriately, particularly for longer surveys.</p> <p>This is often done using a simple math problem such as <em>“What is the answer to 1+1?”</em> Anyone not responding with the answer of “2” might not be adequately paying attention to the responses they are providing and you’d want to look closer at their responses, eliminating them from your analysis if deemed appropriate.</p> <h4>Encouraging Feedback</h4> <p>While descriptive feedback questions are one way of promoting dialogue, you can also include areas where respondents can express any additional thoughts or questions they have outside of the set question list. This is especially useful in online surveys, where researchers can’t immediately address participant’s questions or clarify doubts.</p> <p>You should be mindful that <strong>too many open-ended questions can cause fatigue</strong>, so you should limit the number of open-ended questions. I recommend two to three open-ended questions depending on the length of your overall survey.</p> <h4>Post-Survey Actions</h4> <p>After collecting and analyzing the data, you can send follow-up communications to the respondents. Let them know the changes made based on their feedback, thank them for their participation, or even share a summary of the survey results. This fulfills the Transactional Model’s feedback loop and communicates to the respondent that their input was received, valued, and acted upon.</p> <p>You can also meet this suggestion by providing an email address for participants to follow up if they desire more information post-survey. You are allowing them to complete the loop themselves if they desire. </p> <p>Applying the transactional model to surveys can breathe new life into the way surveys are conducted in UX research. It encourages active participation from respondents, making the process more interactive and engaging while enhancing the quality of the data collected. You can experiment with applying some or all of the steps listed above. You will likely find you are already doing much of what’s mentioned, however being explicit can allow you to make sure you are thoughtfully applying these principles from the field communication.</p> <h3>Usability Testing</h3> <p>Usability testing is another clear example of a research method highlighting components of the Transactional Model. In the context of usability testing, the Transactional Model of Communication’s application opens a pathway for a richer understanding of the user experience by positioning both the user and the researcher as sender and receiver of communication simultaneously. </p> <p>Here are some ways a researcher can use elements of the Transactional Model during usability testing:</p> <h4>Task Assignment as Message Sending</h4> <p>When a researcher assigns tasks to a user during usability testing, they act as the sender in the communication process. To ensure the user accurately receives the message, these tasks need to be clear and well-articulated. For example, a task like “Register a new account on the app” sends a clear message to the user about what they need to do.</p> <p>You don’t need to tell them how to do the task, as usually, that’s what we are trying to determine from our testing, but if you are not clear on what you want them to do, your message will not resonate in the way it is intended. This is another area where a dry run in advance of the testing is an optimal solution for making sure tasks are worded clearly. </p> <h4>Observing and Listening as Message Receiving</h4> <p>As the participant interacts with the application, concept, or design, the researcher, as the receiver, picks up on verbal and nonverbal cues. For instance, if a user is clicking around aimlessly or murmuring in confusion, the researcher can take these as feedback about certain elements of the design that are unclear or hard to use. You can also ask the user to explain why they are giving these cues you note as a way to provide them with feedback on their communication.</p> <h4>Real-time Interaction</h4> <p>The transactional nature of the model recognizes the importance of real-time interaction. For example, if during testing, the user is unsure of what a task means or how to proceed, the researcher can provide clarification without offering solutions or influencing the user’s action. This interaction follows the communication flow prescribed by the transactional model. We lose the ability to do this during unmoderated testing; however, many design elements are forms of communication that can serve to direct users or clarify the purpose of an experience (to be covered more in article two).</p> <h4>Noise</h4> <p>In usability testing, noise could mean unclear tasks, users’ preconceived notions, or even issues like slow software response. Acknowledging noise can help researchers plan and conduct tests better. Again, carrying out a pilot test can help identify any noise in the main test scenarios, allowing for necessary tweaks before actual testing. Other forms of noise can be less obvious but equally intrusive. For example, if you are conducting a test using a Macbook laptop and your participant is used to a PC, there is noise you need to account for, given their unfamiliarity with the laptop you’ve provided. </p> <p>The fidelity of the design artifact being tested might introduce another form of noise. I’ve always advocated testing at any level of fidelity, but you should note that if you are using “Lorem Ipsum” or black and white designs, this potentially adds noise.</p> <p>One of my favorite examples of this was a time when I was testing a financial services application, and the designers had put different balances on the screen; however, the total for all balances had not been added up to the correct total. Virtually every person tested noted this discrepancy, although it had nothing to do with the tasks at hand. I had to acknowledge we’d introduced noise to the testing. As at least one participant noted, they wouldn’t trust a tool that wasn’t able to total balances correctly.</p> <h4>Encouraging Feedback</h4> <p>Under the Transactional Model’s guidance, feedback isn’t just final thoughts after testing; it should be facilitated at each step of the process. Encouraging <strong>‘think aloud’ protocols</strong>, where the user verbalizes their thoughts, reactions, and feelings during testing, ensures a constant flow of useful feedback.</p> <p>You are receiving feedback throughout the process of usability testing, and the model provides guidance on how you should use that feedback to create a shared meaning with the participants. You will ultimately summarize this meaning in your report. You’ll later end up uncovering if this shared meaning was correctly interpreted when you design or redesign the product based on your findings.</p> <p><img decoding="async" src="https://files.smashing.media/articles/applying-principles-communication-ux-research/feedback.jpg"></p> <p>We’ve now covered how to apply the Transactional Model of Communication to three common UX Research methods. All research with humans involves communication. You can break down other UX methods using the Model’s factors to make sure you engage in high-quality research.</p> <p>Analyzing and Reporting UX Research Data Through the Lens of the Transactional Model</p> <p>The Transactional Model of Communication doesn’t only apply to the data collection phase (interviews, surveys, or usability testing) of UX research. Its principles can provide valuable insights during the data analysis process.</p> <p>The Transactional Model instructs us to <strong>view any communication as an interactive, multi-layered dialogue</strong> — a concept that is particularly useful when unpacking user responses. Consider the ‘message’ components: In the context of data analysis, the messages are the users’ responses. As researchers, thinking critically about how respondents may have internally processed the survey questions, interview discussion, or usability tasks can yield richer insights into user motivations.</p> <h4>Understanding Context</h4> <p>Just as the Transactional Model emphasizes the simultaneous interchange of communication, UX researchers should consider the user’s context while interpreting data. Decoding the meaning behind a user’s words or actions involves understanding their background, experiences, and the situation when they provide responses.</p> <h4>Deciphering Noise</h4> <p>In the Transactional Model, noise presents a potential barrier to effective communication. Similarly, researchers must be aware of snowballing themes or frequently highlighted issues during analysis. Noise, in this context, could involve patterns of confusion, misunderstandings, or consistently highlighted problems by users. You need to account for this, e.g., the example I provided where participants constantly referred to the incorrect math on static wireframes.</p> <h4>Considering Sender-Receiver Dynamics</h4> <p>Remember that as a UX researcher, your interpretation of user responses will be influenced by your understandings, biases, or preconceptions, just as the responses were influenced by the user’s perceptions. By acknowledging this, researchers can strive to neutralize any subjective influence and ensure the analysis remains centered on the user’s perspective. You can ask other researchers to double-check your work to attempt to account for bias.</p> <p>For example, if you come up with a clear theme that users need better guidance in the application you are testing, another researcher from outside of the project should come to a similar conclusion if they view the data; if not, you should have a conversation with them to determine what different perspectives you are each bringing to the data analysis.</p> <h4>Reporting Results</h4> <p>Understanding your audience is crucial for delivering a persuasive UX research presentation. Tailoring your communication to resonate with the specific concerns and interests of your stakeholders can significantly enhance the impact of your findings. Here are some more details:</p> <ul> <li> <strong>Identify Stakeholder Groups</strong><br />Identify the different groups of stakeholders who will be present in your audience. This could include designers, developers, product managers, and executives.</li> <li> <strong>Prioritize Information</strong><br />Prioritize the information based on what matters most to each stakeholder group. For example, designers might be more interested in usability issues, while executives may prioritize business impact.</li> <li> <strong>Adapt Communication Style</strong><br />Adjust your communication style to align with the communication preferences of each group. Provide technical details for developers and emphasize user experience benefits for executives.</li> </ul> <h4>Acknowledging Feedback</h4> <p>Respecting this Transactional Model’s feedback loop, remember to revisit user insights after implementing design changes. This ensures you stay user-focused, continuously validating or adjusting your interpretations based on users’ evolving feedback. You can do this in a number of ways. You can reconnect with users to show them updated designs and ask questions to see if the issues you attempted to resolve were resolved.</p> <p>Another way to address this without having to reconnect with the users is to create a spreadsheet or other document to track all the recommendations that were made and reconcile the changes with what is then updated in the design. You should be able to map the changes users requested to updates or additions to the product roadmap for future updates. This acknowledges that users were heard and that an attempt to address their pain points will be documented.</p> <p>Crucially, the Transactional Model teaches us that communication is rarely simple or one-dimensional. It encourages UX researchers to take a more nuanced, context-aware approach to data analysis, resulting in deeper user understanding and more accurate, user-validated results.</p> <p>By maintaining an ongoing feedback loop with users and continually refining interpretations, researchers can ensure that their work remains grounded in real user experiences and needs.</p> <p>Tracking Your Application of the Transactional Model to Your Practice</p> <p>You might find it useful to track how you align your research planning and execution to the framework of the Transactional Model. I’ve created a spreadsheet to outline key factors of the model and used this for some of my work. Demonstrated below is an example derived from a study conducted for a banking client that included interviews and usability testing. I completed this spreadsheet during the process of planning and conducting interviews. Anonymized data from our study has been furnished to show an example of how you might populate a similar spreadsheet with your information.</p> <p>You can customize the spreadsheet structure to fit your specific research topic and interview approach. By documenting your application of the transactional model, you can gain valuable insights into the dynamic nature of communication and improve your interview skills for future research.</p> <table> <thead> <tr> <th>Stage</th> <th>Columns</th> <th>Description</th> <th>Example</th> </tr> </thead> <tbody> <tr> <td>Pre-Interview Planning</td> <td>Topic/Question (Aligned with research goals)</td> <td>Identify the research question and design questions that encourage open-ended responses and co-construction of meaning.</td> <td>Testing mobile banking app’s bill payment feature. How do you set up a new payee? How would you make a payment? What are your overall impressions?</td> </tr> <tr> <td></td> <td>Participant Context</td> <td>Note relevant demographic and personal information to tailor questions and avoid biased assumptions.</td> <td>35-year-old working professional, frequent user of the online banking and mobile application but unfamiliar with using the app for bill pay.</td> </tr> <tr> <td></td> <td>Engagement Strategies</td> <td>Outline planned strategies for active listening, open-ended questions, clarification prompts, and building rapport.</td> <td>Open-ended follow-up questions (“Can you elaborate on XYZ? Or Please explain more to me what you mean by XYZ.”), active listening cues, positive reinforcement (“Thank you for sharing those details”).</td> </tr> <tr> <td></td> <td>Shared Understanding</td> <td>List potential challenges to understanding participant’s perspectives and strategies for ensuring shared meaning.</td> <td>Initially, the participant expressed some confusion about the financial jargon I used. I clarified and provided simpler [non-jargon] explanations, ensuring we were on the same page.</td> </tr> <tr> <td>During Interview</td> <td>Verbal Cues</td> <td>Track participant’s language choices, including metaphors, pauses, and emotional expressions.</td> <td>Participant used a hesitant tone when describing negative experiences with the bill payment feature. When questioned, they stated it was “likely their fault” for not understanding the flow [it isn’t their fault].</td> </tr> <tr> <td></td> <td>Nonverbal Cues</td> <td>Note participant’s nonverbal communication like body language, facial expressions, and eye contact.</td> <td>Frowning and crossed arms when discussing specific pain points.</td> </tr> <tr> <td></td> <td>Researcher Reflexivity</td> <td>Record moments where your own biases or assumptions might influence the interview and potential mitigation strategies.</td> <td>Recognized my own familiarity with the app might bias my interpretation of users’ understanding [e.g., going slower than I would have when entering information]. Asked clarifying questions to avoid imposing my assumptions.</td> </tr> <tr> <td></td> <td>Power Dynamics</td> <td>Identify instances where power differentials emerge and actions taken to address them.</td> <td>Participant expressed trust in the research but admitted feeling hesitant to criticize the app directly. I emphasized anonymity and encouraged open feedback.</td> </tr> <tr> <td></td> <td>Unplanned Questions</td> <td>List unplanned questions prompted by the participant’s responses that deepen understanding.</td> <td>What alternative [non-bank app] methods for paying bills that you use? (Prompted by participant’s frustration with app bill pay).</td> </tr> <tr> <td>Post-Interview Reflection</td> <td>Meaning Co-construction</td> <td>Analyze how both parties contributed to building shared meaning and insights.</td> <td>Through dialogue, we collaboratively identified specific design flaws in the bill payment interface and explored additional pain points and areas that worked well.</td> </tr> <tr> <td></td> <td>Openness and Flexibility</td> <td>Evaluate how well you adapted to unexpected responses and maintained an open conversation.</td> <td>Adapted questioning based on participant’s emotional cues and adjusted language to minimize technical jargon when that issue was raised.</td> </tr> <tr> <td></td> <td>Participant Feedback</td> <td>Record any feedback received from participants regarding the interview process and areas for improvement.</td> <td>Thank you for the opportunity to be in the study. I’m glad my comments might help improve the app for others. I’d be happy to participate in future studies.</td> </tr> <tr> <td></td> <td>Ethical Considerations</td> <td>Reflect on whether the interview aligned with principles of transparency, reciprocity, and acknowledging power dynamics.</td> <td>Maintained anonymity throughout the interview and ensured informed consent was obtained. Data will be stored and secured as outlined in the research protocol.</td> </tr> <tr> <td></td> <td>Key Themes/Quotes</td> <td>Use this column to identify emerging themes or save quotes you might refer to later when creating the report.</td> <td>Frustration with a confusing interface, lack of intuitive navigation, and desire for more customization options.</td> </tr> <tr> <td></td> <td>Analysis Notes</td> <td>Use as many lines as needed to add notes for consideration during analysis.</td> <td>Add notes here.</td> </tr> </tbody> </table> <p>You can use the suggested columns from this table as you see fit, adding or subtracting as needed, particularly if you use a method other than interviews. I usually add the following additional Columns for logistical purposes:</p> <ul> <li>Date of Interview,</li> <li>Participant ID,</li> <li>Interview Format (e.g., in person, remote, video, phone).</li> </ul> <p>Conclusion</p> <p>By incorporating aspects of communication theory into UX research, UX researchers and those who work with UX researchers can enhance the effectiveness of their communication strategies, gather more accurate insights, and create better user experiences. Communication theory provides a framework for understanding the dynamics of communication, and its application to UX research enables researchers to tailor their approaches to specific audiences, employ effective interviewing techniques, design surveys and questionnaires, establish seamless communication channels during usability testing, and interpret data more effectively.</p> <p>As the field of UX research continues to evolve, integrating communication theory into research practices will become increasingly essential for bridging the gap between users and design teams, ultimately leading to more successful products that resonate with target audiences.</p> <p>As a UX professional, it is important to <strong>continually explore and integrate new theories and methodologies to enhance your practice</strong>. By leveraging communication theory principles, you can better understand user needs, improve the user experience, and drive successful outcomes for digital products and services.</p> <p>Integrating communication theory into UX research is an ongoing journey of learning and implementing best practices. Embracing this approach empowers researchers to effectively communicate their findings to stakeholders and foster collaborative decision-making, ultimately driving positive user experiences and successful design outcomes.</p> <h3>References and Further Reading</h3> <ul> <li> <a target="_blank" href="https://pure.mpg.de/rest/items/item_2383164/component/file_2383163/content" rel="noopener">The Mathematical Theory of Communication</a> (PDF), Shannon, C. E., & Weaver, W.</li> <li> <a target="_blank" href="https://www.taylorfrancis.com/chapters/mono/10.4324/9781410604668-9/organizational-effectiveness-relationship-indicators-antecedents-relationships-public-relations-strategies-relationship-outcomes-john-ledingham-stephen-bruning?context=ubx&refId=833c0cba-fd07-4e3a-9455-d9f89a590b98" rel="noopener">From organizational effectiveness to relationship indicators: Antecedents of relationships, public relations strategies, and relationship outcomes</a>, Grunig, J. E., & Huang, Y. H.</li> <li>Communication and persuasion: Psychological studies of opinion change, Hovland, C. I., Janis, I. L., & Kelley, H. H. (1953). Yale University Press</li> <li>Communication research as an autonomous discipline, Chaffee, S. H. (1986). Communication Yearbook, 10, 243-274</li> <li> <a target="_blank" href="https://students.aiu.edu/submissions/profiles/resources/onlineBook/N9q9G9_interpersonal-communication.pdf" rel="noopener">Interpersonal Communication: Everyday Encounters</a> (PDF), Wood, J. (2015)</li> <li> <a target="_blank" href="https://www.researchgate.net/publication/331627746_Theories_of_Human_Communication" rel="noopener">Theories of Human Communication</a>, Littlejohn, S. W., & Foss, K. A. (2011)</li> <li> <a target="_blank" href="https://nibmehub.com/opac-service/pdf/read/McQuail's%20Mass%20communication%20theory.pdf" rel="noopener">McQuail’s Mass Communication Theory</a> (PDF), McQuail, D. (2010)</li> <li> <a target="_blank" href="https://www.amazon.com/Bridges-Not-Walls-Interpersonal-Communication/dp/0073534315" rel="noopener">Bridges Not Walls: A Book About Interpersonal Communication</a>, Stewart, J. (2012)</li> </ul> <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-6856011"> <h2><a class="title" href="http://www.webmastersgallery.com/2024/04/08/exciting-new-tools-for-designers-april-2024/" rel="bookmark">Exciting New Tools for Designers, April 2024</a></h2> <div class="info"> <span class="date">April 8th, 2024</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/2024/04/08/exciting-new-tools-for-designers-april-2024/#respond">No comments</a></span> <div class="fixed"></div> </div> <div class="content"> <div class="ftpimagefix" style="float:left"><a target="_blank" href="1" rel="noopener"><img decoding="async" src="https://www.webdesignerdepot.com/assets/posts/featured/wondercraft.jpg"></a></div> <p>Welcome to our April tools collection. There are no practical jokes here, just practical gadgets, services, and apps to make life that little bit easier and keep you working smarter.</p> <div class="fixed"></div> </div> <div class="under"> <span class="categories">Categories: </span><span><a href="http://www.webmastersgallery.com/category/design/" rel="category tag">Designing</a>, <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-6847335"> <h2><a class="title" href="http://www.webmastersgallery.com/2024/04/05/managing-user-focus-with-focus-visible/" rel="bookmark">Managing User Focus with :focus-visible</a></h2> <div class="info"> <span class="date">April 5th, 2024</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/2024/04/05/managing-user-focus-with-focus-visible/#respond">No comments</a></span> <div class="fixed"></div> </div> <div class="content"> <div class="ftpimagefix" style="float:left"><a target="_blank" href="1" rel="noopener"><img decoding="async" src="https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/04/two-blind-brothers-2.png?resize=1024%2C586&ssl=1" alt="Image of the home page from the Two Blind Brothers website." class="wp-image-377710" data-recalc-dims="1"></figure> </div> <h2 class="wp-block-heading">Demo</h2> <p>The demo below shows how <code>:focus-visible</code> works when added to your CSS. The first part of the video shows the experience when navigating through with a mouse the second shows navigating through with just my keyboard. I recorded myself as well to show that I did switch from using my mouse, to my keyboard.</p> <div class="wp-block-image"> <figure class="aligncenter size-large"><img decoding="async" loading="lazy" src="https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/04/focus-visible-heuristics.gif?resize=1024%2C576&ssl=1" alt="Video showing how the heuristics of the browser works based on input and triggering the focus visible pseudo class." class="wp-image-377716" data-recalc-dims="1"><figcaption class="wp-element-caption"><strong><em>Video showing how the heuristics of the browser works based on input and triggering the focus visible pseudo class.</em></strong></figcaption></figure> </div> <p>The browser is predicting what to do with the focus ring based on my input (keyboard/mouse), and then adding a focus ring to those elements. In this case, when I am navigating through this example with the keyboard, everything receives focus. When using the mouse, only the input gets focus and the buttons don’t. If you remove <code>:focus-visible</code>, the browser will apply the default focus ring.</p> <p>The code below is applying <code>:focus-visible</code> to the focusable elements.</p> <pre class="wp-block-csstricks-code-block language-css" data-line=""><code>:focus-visible { outline-color: black; font-size: 1.2em; font-family: serif; font-weight: bold; }</code></pre> <p>If you want to specify the <code>label</code> or the button to receive <code>:focus-visible</code> just prepend the class with <code>input</code> or <code>button</code> respectively.</p> <pre class="wp-block-csstricks-code-block language-css" data-line=""><code>button:focus-visible { outline-color: black; font-size: 1.2em; font-family: serif; font-weight: bold; } /*** OR ***/ input:focus-visible { outline-color: black; font-size: 1.2em; font-family: serif; font-weight: bold; }</code></pre> <h2 class="wp-block-heading"><strong>Support</strong></h2> <p>If the browser does not support <code>:focus-visible</code> you can have a fall back in place to handle the interaction. The code below is from the <a target="_blank" href="https://developer.mozilla.org/en-US/play" rel="noopener"></a></div> <p>This is going to be the 2nd post in a small series we are doing on form accessibility. If you missed the first post, check out <a target="_blank" href="https://css-tricks.com/accessible-forms-with-pseudo-classes/?utm_team=devrel&utm_source=twitter&utm_content=csstricks" rel="noopener">Accessible Forms with Pseudo Classes</a>. In this post we are going to look at :focus-visible and how to use it in your web sites!</p> <h2 class="wp-block-heading"><strong>Focus Touchpoint</strong></h2> <p>Before we move forward with <code><mark class="has-inline-color has-black-color">:focus-visible</mark></code>, let’s revisit how <code>:focus</code> works in your CSS. Focus is the visual indicator that an element is being interacted with via keyboard, mouse, trackpad, or assistive technology. Certain elements are naturally interactive, like links, buttons, and form elements. We want to make sure that our users know where they are and the interactions they are making.</p> <p><strong><mark class="has-inline-color has-vivid-red-color">Remember don’t do this in your CSS</mark></strong><mark class="has-inline-color has-vivid-red-color">!</mark></p> <pre class="wp-block-csstricks-code-block language-css" data-line=""><code>:focus { outline: 0; } /*** OR ***/ :focus { outline: none; }</code></pre> <p>When you remove focus, you remove it for<strong> EVERYONE! </strong>We want to make sure that we are preserving the focus.</p> <p>If for any reason you do need to remove the focus, make sure there is also fallback <code>:focus</code> styles for your users. That fallback can match your branding colors, but make sure those colors are also accessible. If marketing, design, or branding doesn’t like the default focus ring styles, then it is time to start having conversations and collaborate with them on the best way of adding it back in.</p> <h2 class="wp-block-heading"><strong>What is <code>focus-visible?</code></strong></h2> <p>The pseudo class, <code>:focus-visible</code>, is just like our default <code>:focus</code> pseudo class. It gives the user an indicator that something is being focused on the page. The way you write<code> :focus-visible</code> is cut and dry:</p> <pre class="wp-block-csstricks-code-block language-css" data-line=""><code>:focus-visible { /* ... */ }</code></pre> <p>When using <code>:focus-visible</code> with a specific element, the syntax looks something like this:</p> <pre class="wp-block-csstricks-code-block language-css" data-line=""><code>.your-element:focus-visible { /*...*/ }</code></pre> <p>The great thing about using <code>:focus-visible</code> is you can make your element stand out,<strong> bright and bold!</strong> No need to worry about it showing if the element is clicked/tapped. If you choose not to implement the class, the default will be the user agent focus ring which to some is undesirable.</p> <h2 class="wp-block-heading"><strong>Backstory of <code>focus-visible</code></strong></h2> <p>Before we had the <code>:focus-visible</code>, the user agent styling would apply <code>:focus</code> to most elements on the page; buttons, links, etc. It would apply an outline or “focus ring” to the focusable element. This was deemed to be ugly, most didn’t like the default focus ring the browser provided. As a result of the focus ring being unfavorable to look at, most authors removed it… without a fallback. Remember, when you remove <code>:focus</code>, it decreases usability and makes the experience inaccessible for keyboard users.</p> <p><a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible" rel="noopener">In the current state of the web, the browser no longer visibly indicates focus around various elements when they have focus.</a> The browser instead uses varying heuristics to determine when it would help the user, providing a focus ring in return. According to <a target="_blank" href="https://www.khanacademy.org/computing/ap-computer-science-principles/algorithms-101/solving-hard-problems/a/using-heuristics" rel="noopener">Khan Academy</a>, a heuristic is, <strong><em>“a technique that guides an algorithm to find good choices.”</em></strong></p> <p>What this means is that the browser can detect whether or not the user is interacting with the experience from a keyboard, mouse, or trackpad and based on that input type, it adds or removes the focus ring. The example in this post highlights the input interaction.</p> <p>In the early days of <code>:focus-visible</code> we were using a <a target="_blank" href="https://github.com/WICG/focus-visible" rel="noopener">polyfill</a> to handle the focus ring created by Alice Boxhall and Brian Kardell, Mozilla also came out with their own pseudo class, <code>:moz-focusring</code>, before the official specification. If you want to learn more about the early days of the focus-ring, check out <a target="_blank" href="https://youtu.be/ilj2P5-5CjI?feature=shared" rel="noopener">A11y Casts</a> with Rob Dodson.</p> <h2 class="wp-block-heading"><strong>Focus Importance</strong></h2> <p>There are plenty of reasons why focus is important in your application. For one, like I stated above, we as ambassadors of the web have to make sure we are providing the best, accessible experience we can. We don’t want any of our users guessing where they are while they are navigation through the experience.</p> <p>One example that always comes to mind is the <a target="_blank" href="https://twoblindbrothers.com/" rel="noopener">Two Blind Brothers website</a>. If you go to the website and click/tap (this works on mobile), the closed eye in the bottom left corner, you will see the eye open and a simulation begins. Both the brothers, Bradford and Bryan Manning, were diagnosed at a young age with Stargardt’s Disease. Stargardt’s disease is a form of macular degeneration of the eye. Over time both brothers will be completely blind. Visit the site and click the eye to see how they see.</p> <p>If you were in their shoes and you had to navigate through a page, you would want to make sure you knew exactly where you were throughout the whole experience. A focus ring gives you that power.</p> <div class="wp-block-image is-style-default ticss-7902f8d6"> <figure class="aligncenter size-large"></figure> </div> <h2 class="wp-block-heading">Demo</h2> <p>The demo below shows how <code>:focus-visible</code> works when added to your CSS. The first part of the video shows the experience when navigating through with a mouse the second shows navigating through with just my keyboard. I recorded myself as well to show that I did switch from using my mouse, to my keyboard.</p> <div class="wp-block-image"> <figure class="aligncenter size-large"><img decoding="async" loading="lazy" width="1024" height="576" src="https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/04/focus-visible-heuristics.gif?resize=1024%2C576&ssl=1" alt="Video showing how the heuristics of the browser works based on input and triggering the focus visible pseudo class." class="wp-image-377716" data-recalc-dims="1"><figcaption class="wp-element-caption"><strong><em>Video showing how the heuristics of the browser works based on input and triggering the focus visible pseudo class.</em></strong></figcaption></figure> </div> <p>The browser is predicting what to do with the focus ring based on my input (keyboard/mouse), and then adding a focus ring to those elements. In this case, when I am navigating through this example with the keyboard, everything receives focus. When using the mouse, only the input gets focus and the buttons don’t. If you remove <code>:focus-visible</code>, the browser will apply the default focus ring.</p> <p>The code below is applying <code>:focus-visible</code> to the focusable elements.</p> <pre class="wp-block-csstricks-code-block language-css" data-line=""><code>:focus-visible { outline-color: black; font-size: 1.2em; font-family: serif; font-weight: bold; }</code></pre> <p>If you want to specify the <code>label</code> or the button to receive <code>:focus-visible</code> just prepend the class with <code>input</code> or <code>button</code> respectively.</p> <pre class="wp-block-csstricks-code-block language-css" data-line=""><code>button:focus-visible { outline-color: black; font-size: 1.2em; font-family: serif; font-weight: bold; } /*** OR ***/ input:focus-visible { outline-color: black; font-size: 1.2em; font-family: serif; font-weight: bold; }</code></pre> <h2 class="wp-block-heading"><strong>Support</strong></h2> <p>If the browser does not support <code>:focus-visible</code> you can have a fall back in place to handle the interaction. The code below is from the <a target="_blank" href="https://developer.mozilla.org/en-US/play" rel="noopener">MDN Playground</a>. You can use the <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/@supports" rel="noopener">@supports</a> at-rule or <strong>“feature query”</strong> to check support. One thing to keep in mind, the rule should be placed at the top of the code or nested inside another group at-rule.</p> <pre class="wp-block-csstricks-code-block language-markup" data-line=""><code><button class="button with-fallback" type="button">Button with fallback</button> <button class="button without-fallback" type="button">Button without fallback</button></code></pre> <pre class="wp-block-csstricks-code-block language-css" data-line=""><code>.button { margin: 10px; border: 2px solid darkgray; border-radius: 4px; } .button:focus-visible { /* Draw the focus when :focus-visible is supported */ outline: 3px solid deepskyblue; outline-offset: 3px; } @supports not selector(:focus-visible) { .button.with-fallback:focus { /* Fallback for browsers without :focus-visible support */ outline: 3px solid deepskyblue; outline-offset: 3px; } }</code></pre> <h2 class="wp-block-heading"><strong>Further Accessibility Concerns</strong></h2> <p>Accessibility concerns to keep in mind when building out your experience:</p> <ul> <li>Make sure the colors you choose for your focus indicator, if at all, are still accessible according to the information documented in the <a target="_blank" href="https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html" rel="noopener">WCAG 2.2 Non-text Contrast (Level AA)</a> </li> <li>Cognitive overload can cause a user distress. Make sure to keep styles on varying interactive elements consistent</li> </ul> <h2 class="wp-block-heading"><strong>Browser Support</strong></h2> <div class="caniuse"> <div class="caniuse-header"> <p>This browser support data is from <a target="_blank" href="http://caniuse.com/#feat=css-focus-visible" rel="noopener">Caniuse</a>, which has more detail. A number indicates that browser supports the feature at that version and up.</p> </div> <div class="caniuse-section"> <h4>Desktop</h4> <table class="browser-support-table"> <thead> <tr> <th class="chrome"><span>Chrome</span></th> <th class="firefox"><span>Firefox</span></th> <th class="ie"><span>IE</span></th> <th class="edge"><span>Edge</span></th> <th class="safari"><span>Safari</span></th> </tr> </thead> <tbody> <tr> <td class="y yep" title="Chrome - "><span class="caniuse-agents-version version">86</span></td> <td class="y yep" title="Firefox - "><span class="caniuse-agents-version version">4*</span></td> <td class="n nope" title="IE - "><span class="caniuse-agents-version version">No</span></td> <td class="y yep" title="Edge - "><span class="caniuse-agents-version version">86</span></td> <td class="y yep" title="Safari - "><span class="caniuse-agents-version version">15.4</span></td> </tr> </tbody> </table> </div> <div class="caniuse-section"> <h4>Mobile / Tablet</h4> <table class="browser-support-table"> <thead> <tr> <th class="and_chr"><span>Android Chrome</span></th> <th class="and_ff"><span>Android Firefox</span></th> <th class="android"><span>Android</span></th> <th class="ios_saf"><span>iOS Safari</span></th> </tr> </thead> <tbody> <tr> <td class="y yep" title="Android Chrome - "><span class="caniuse-agents-version version">123</span></td> <td class="y yep" title="Android Firefox - "><span class="caniuse-agents-version version">124</span></td> <td class="y yep" title="Android - "><span class="caniuse-agents-version version">123</span></td> <td class="y yep" title="iOS Safari - "><span class="caniuse-agents-version version">15.4</span></td> </tr> </tbody> </table> </div> </div> <h2 class="wp-block-heading"><strong>Links</strong></h2> <ul> <li><a target="_blank" href="https://daverupert.com/2024/01/focus-visible-love/" rel="noopener">https://daverupert.com/2024/01/focus-visible-love/</a></li> <li><a target="_blank" href="https://css-tricks.com/almanac/selectors/f/focus-visible/" rel="noopener">https://css-tricks.com/almanac/selectors/f/focus-visible/</a></li> </ul> <hr> <p><small><a target="_blank" rel="nofollow noopener" href="https://css-tricks.com/managing-user-focus-with-focus-visible/">Managing User Focus with :focus-visible</a> originally published on <a target="_blank" rel="nofollow noopener" href="https://css-tricks.com/">CSS-Tricks</a>, which is part of the <a target="_blank" href="https://try.digitalocean.com/css-tricks/?utm_medium=rss&utm_source=css-tricks.com&utm_campaign=family_&utm_content=" rel="noopener">DigitalOcean</a> family. You should <a target="_blank" href="https://css-tricks.com/newsletters/" rel="noopener">get the newsletter</a>.</small></p> <div class="fixed"></div> </div> <div class="under"> <span class="categories">Categories: </span><span><a href="http://www.webmastersgallery.com/category/design/" rel="category tag">Designing</a>, <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/category/uncategorized/0/page/48/" >Newer Entries</a></span> <span class="older"><a href="http://www.webmastersgallery.com/category/uncategorized/0/page/50/" >Older Entries</a></span> <div class="fixed"></div> </div> </div> <!-- main END --> <!-- sidebar START --> <div id="sidebar"> <!-- sidebar north START --> <div id="northsidebar" class="sidebar"> <!-- feeds --> <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> <!-- showcase --> <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> <!-- sidebar north END --> <div id="centersidebar"> <!-- sidebar east START --> <div id="eastsidebar" class="sidebar"> <!-- categories --> <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> <!-- sidebar east END --> <!-- sidebar west START --> <div id="westsidebar" class="sidebar"> <!-- blogroll --> <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> <!-- sidebar west END --> <div class="fixed"></div> </div> <!-- sidebar south START --> <div id="southsidebar" class="sidebar"> <!-- archives --> <div class="widget"> <h3>Archives</h3> <ul> <li><a href='http://www.webmastersgallery.com/2025/02/'>February 2025</a></li> <li><a href='http://www.webmastersgallery.com/2025/01/'>January 2025</a></li> <li><a href='http://www.webmastersgallery.com/2024/12/'>December 2024</a></li> <li><a href='http://www.webmastersgallery.com/2024/11/'>November 2024</a></li> <li><a href='http://www.webmastersgallery.com/2024/10/'>October 2024</a></li> <li><a href='http://www.webmastersgallery.com/2024/09/'>September 2024</a></li> <li><a href='http://www.webmastersgallery.com/2024/08/'>August 2024</a></li> <li><a href='http://www.webmastersgallery.com/2024/07/'>July 2024</a></li> <li><a href='http://www.webmastersgallery.com/2024/06/'>June 2024</a></li> <li><a href='http://www.webmastersgallery.com/2024/05/'>May 2024</a></li> <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/'>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> <!-- meta --> <div class="widget"> <h3>Meta</h3> <ul> <li><a href="http://www.webmastersgallery.com/wp-login.php">Log in</a></li> </ul> </div> </div> <!-- sidebar south END --> </div> <!-- sidebar END --> <div class="fixed"></div> </div> <!-- content END --> <!-- footer START --> <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-2025 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> <!-- footer END --> </div> <!-- container END --> </div> <!-- wrap END --> </body> </html>