Mira Brody, Author at Speckyboy Design Magazine

Modern Favicon Development Techniques & Best Practices

Mira Brody — Mon, 06 Feb 2023 10:05:33 +0000

Since its debut in 1999 with Microsoft’s Internet Explorer, the favicon has expanded in scope thanks to its adoption by modern browsers and operating systems. Although it was initially a tiny 16×16 pixel icon appearing in a browser’s address bar, favicons now also provide high-resolution visual assets for websites pinned to a mobile device’s home screen, a Windows favorites tile, and much more.

In addition to being helpful to the user, these icons are just another level of polish designers and developers can apply to help a website stand out.

Our web design team has created an efficient toolkit to design and apply these useful icons in our client’s projects so that they appear consistently across platforms. We’d like to share with you our favicon production process, the development of our Icon Suite Photoshop template, and some of the trials and tribulations we’ve navigated so that you can create a beautiful, reliable favicon in your own web design projects.

Changes in the Favicon World

As favicons gained popularity, the number of cuts required to provide a great experience quickly grew. In order to streamline our process, we took a closer look at how modern mobile and desktop browsers and operating systems are using favicon assets.

These platforms drove our design team to reevaluate our approach, resulting in the creation of our Icon Suite. We found that all of the icons needed for a website can be created with only five cuts. (Note that the output created for iOS, Android Chrome, and Windows are doubled to ensure proper retina display).

Cuts 1 and 2: Favicon (16×16, 32×32) – This is the “classic” favicon shown in Bookmark menus and next to the current page’s address in many browsers.

Cut 3: iOS (180×180, the retina display is 96×96) – Beginning with iOS 3, Apple stopped looking for a hard-coded image filename and instead started using the largest image defined and scaling it down, which is why we’ve included the 180X180 and allow Apple devices to scale as needed. This narrows the assets needed for iOS in our Icon Suite down to a single image instead of 11.

Cut 4: Android Chrome (192×192, the retina display is 96×96) – As with Apple, Android recently began scaling the largest image down, minimizing the previous six images down to a single one.

Cut 5: Windows 8.1/10 (270×270, the retina display is 150×150) – Windows 8.1 – 10 utilize a handful of different tiles for their “metro” interface tiles, but we chose to optimize the medium square size as the highest-use scenario with acceptable performance when larger or smaller tiles were chosen.

In general, it is ideal to reduce the number of images whenever possible because some older browsers incorrectly grab all icons instead of the one most suited for the job. For a more comprehensive listing of favicon file types, take a look here.

Icon Suite Template Code

We’d like to share with you the implementation code we use. It allows each device to locate the correct favicon types needed on a given website. The following code is used in the tag to identify all the needed components:

The manifest.json file is a way to describe a web application that is used by Android Chrome. We are using the basic information (Reference site: https://developer.mozilla.org/en-US/docs/Web/Manifest):

{
"name":"JTech Communications”,
"icons": [
{
"src": "/assets/icons/android-chrome-192.png", "sizes": "192x192", "type": "image/png"
}
],
“theme_color":"#ffffff",
"display": "standalone"
}

The browserconfig.xml file is used by IE11 through Edge for the Windows 8.1/10 tiles.

Our Design and Production Process

To speed up our process, we’ve created a Photoshop template. The template utilizes smart objects to create a mock-up of the icons in the sizes we outlined above.

This way, we only have to create an icon once for each type: Favicon, Android, iOS, and Windows 8.1/10. Photoshop renders all of the various image cuts necessary for the home screen, browser window, etc.

There are a couple of things to keep in mind:

For iOS applications – because Apple rounds the corners for you, it is best to use a square image for the icon. If you want to do rounding yourself, you can use the recomposed image cut to tell Apple not to initiate rounding, but we suggest not bothering with this step.

For Windows – The Windows 10 tiles text poses a few problems. Windows icons include a medium and small tile sizes. The small tile is medium-sized halved and will not display a text title. It is important that an icon can adequately scale to the smaller tile dimension.

At first, we would offset the image to make room for the title placement but found that when the favicon was reproduced on smaller tiles without a label, it appeared misaligned. To avoid this behavior and minimize work, our current practice is to center it, so it doesn’t appear offset when there is no title and sizing it small enough, so it looks balanced with its title.

Here’s how our logo appears in a Windows tile with a title.

Windows 10 and 8/8.1 automatically assign the text color of the title based on the color of the background. To ensure the best results, we specify the background color, even if the favicon is a full-sized image with no transparency.

After modifying objects in our Photoshop template, our script outputs all of the specific cuts our developers need. I’ve provided the script below for your own use.

Download the jTech Photoshop Favicon Script

When it comes to their value, the favicon is another example of attention to detail. Not only are they a subtle way to enhance a company’s branding and improve the user experience, but they are a way to make a website visually distinct.

Although we sometimes battle browser configurations and OS upgrades, it is a small price to pay in order to perfect our customer’s projects, adding to the custom design and overall polish.

The post Modern Favicon Development Techniques & Best Practices appeared first on Speckyboy Design Magazine.

Mobile Web Design Adaptations for Better UX

Mira Brody — Sat, 10 Mar 2018 18:07:36 +0000

The number of mobile internet users has far surpassed the number of desktop users, eliminating the question of whether or not websites need to be adapted to devices of varying sizes – they have to.

You don’t get to decide which device people use to access your website. But how do you decide how each page should change at each break point? Is it acceptable to squeeze your content through a funnel and hope it comes out looking responsively optimized, or should you step back and take a more calculated approach?

Using a tool like Safari’s responsive mode or similar tools in other browsers can help you to easily switch between breakpoints to test and optimize each breakpoint appropriately. In order to help you make these decisions about your own breakpoint modifications, here are a few elements we commonly adapt in order to better fit our mobile sites.

Adapting Your Content to a Smaller Space

In general, mobile sites should have all the content and power of the desktop site, but we sometimes make the decision to hide photos or illustrations when the main content is textual, particularly in cases where the imagery’s original purpose was to provide visual balance. These are a few of the content elements we choose to alter when adapting to a smaller screen size.

In Western Society, we read top to bottom, left to right. When shrinking down the content to fit a smaller screen size, we keep this in mind, making sure to preserve the important stuff at the top, while pushing the rest down according to hierarchy.

Icon Transition Menu by Silvia Sánchez

Primary navigation, for example, is aptly named; it is a user’s primary source to navigate through your site and it would be detrimental to your conversion rate to make it hard to find. On mobile, it has become common practice to shrink the menu down into a small hamburger icon and make it collapsible, always within finger touch reach.

It is a popular technique now for mobile websites to use a menu icon that expands when needed, like on the WashingtonPost.com:

Image Source: washingtonpost.com

Other navigation aids, such as filters, while fully visible on desktop, are collapsed in mobile so that they use space only when needed.

Target, among other popular shopping sites, choose to auto-collapse their product filters on mobile, leaving extra space unless required:

Image Source: target.com

When adapting navigation, it is important to keep in mind that your fingertips are larger than a mouse pointer. When your cursor is the tip of your finger, we need larger targets to tap and can’t guide you with hover feedback, meaning forms and fields require additional design work.

The ability to fill out a form pain-free is crucial to keeping a customer engaged; if they can’t complete their purchase with ease, why would they come back? First off, there should be no need to scroll horizontally – ever. Since everything has to fit in a single, narrow list view then, buttons can be made larger and spaced further apart to accommodate touch input, and collapsing lists can make it easier to browse content that can easily be organized into categories.

Mobile Form by Ante Matijaca

In addition to navigation through a website, enlarging elements on a smaller screen can be helpful for navigating through your physical location as well.

Most of us use Apple or Google maps, so placing an interactive map somewhere on a website is a great way to easily show visitors where your storefront is located.

When we embed maps on a webpage, there are a few pitfalls encountered on a smaller device. Because these maps allow a user to zoom and pan, they can hijack a user’s ability to read through the webpage when they react to input. In some cases, the map even fills the entire screen, inhibiting their ability to scroll beyond it at all. To solve this, we disable map interactions initially, while still providing an option for the user to enable it if they so desire – the map works when you need it, but remains out of the way when it’s not.

In addition, making a map large enough to be useful can compromise the ability to view other content on the page, so we add a “full screen” button on mobile for a better user experience. By clicking it, the map will fill the screen and interact just as we expect the Maps application to.

At the click of a button, Price Rite’s map goes full screen on a phone or tablet, without the user having to exit their browser and enter a separate application:

Another execution that benefits mobile is to nix hover events and further cater to touch interaction. Hover events are helpful on desktop; they can alert the user that they have the ability to interact with whatever it is they are hovering their cursor over, such as an image, text link or button.

However, touch screens do not detect whether a finger is “hovering,” rendering hover events useless and even cumbersome. Some mobile sites will require a user to click a link twice: once to activate the hover event, and a second time to trigger the actual action. Instead of taking this route, we remove hover events from our sites while being viewed on mobile devices to make mobile navigation a more flawless experience.

On mobile, we augment or completely replace hover behaviors with an onClick state. The moment a user taps an action, immediate feedback is shown before the response has time to load – a crucial piece of feedback on occasionally dodgy mobile networks.

This lessens user confusion: did you click or not? Was the action successful? Should I keep clicking until I get a response? This pairs nicely on mobile (and desktop) with the load status indicator (LSI), which displays a small, unobtrusive animation to alert the user that a page is loading. While most desktop computers are fast enough to eliminate the need for an LSI, we find that on older, slower mobile devices, possibly struggling to keep a connection, it is a necessary indication.

These alterations can not only help to retain customer attention and their ability to navigate, but improve the overall functionality of the mobile site overall.

Animations

Although alterations to a site can do the trick under most circumstances, there are times when features on a webpage need to be abandoned all together. While crafty, delightful animations can greatly improve a desktop experience, they can be obnoxious and intrusive on a smaller device, adding frustration to a user’s impression of your brand.

Parallax and similar fancy scrolling events – make for a unique and memorable experience on a desktop with a fast network connection and high-powered processor, but introduce confusion on a phone or tablet because the screen does not move predictably when swiping as it does with a mouse.

For mobile, we make the choice to remove fancy scroll takeover events, much like Fitbit did on their product page for Charge. They disable the parallax sliding and what remains is a single mobile-friendly page with a simplified, stutter-free experience.

Not only parallax scrolling, but anything resource-intensive should be reconsidered on mobile as it can bog down mobile browsing. WWF’s Tiger Challenge site makes the choice of skipping the animated introduction when accessed from a mobile device. When it comes to finding that balance between a fun, expressive website and the experience it compromises on mobile, sometimes less is more.

Conclusion

It is clear that adapting for mobile web design is a must when it comes to developing a website and we hope this article helps you to begin to see the pattern of what goes into making each breakpoint an ideal experience for your users.

At the end of the day, responsiveness should improve an experience, not add frustration, even if it means forfeiting a fancy effect that works perfect on desktop.

The post Mobile Web Design Adaptations for Better UX appeared first on Speckyboy Design Magazine.

User Feedback in User Experience

Mira Brody — Fri, 12 Jan 2018 09:17:13 +0000

Think about that reassuring vibration that occurs after you flip your iPhone’s ringer switch to “off” – so you know the action you intended took place successfully. What about the infamous intercept voice: “If you’d like to make a call, please hang up and try again.” when you’ve left a phone line hanging or dialed an incorrect number?

The welcoming “You’ve got mail” from an AOL message. The shrill dinging when you’ve left a car door ajar. Even the cascade of digital cards filling the computer screen after you’ve won a game of Solitaire.

All of these are examples of user feedback, without which many everyday digital actions would be very confusing.

As overly-methodic as some of these may seem to us, the ability to provide constructive, relevant feedback is vital to fostering a positive user experience in website design, no matter how subtle. In any situation, the application of bad feedback, or lack of useful feedback, can escalate into unnecessary confusion.

Feedback Principles

When providing feedback to a user, it’s important to consider the context in which they’re receiving feedback. This includes the physical context – where on the screen are you giving feedback? – and the emotional context – are you providing positive or negative feedback?

Physical Context

Since we expect websites to respond to our input, it is important that this feedback is provided in a place where it’s obvious. If an item is added to a shopping cart, for instance, any relevant input (1 item added to your cart!) should be provided near the place where their action took place. Quietly updating a cart total in an entirely different part of the page is much less useful.

REI.com provides physical feedback that your “add to cart” action was successful by providing a drop down message.

Another useful application of user feedback in context is if someone made mistakes while filling out a form. Providing a clear visual label and explanation for each necessary correction is much more helpful than simply providing a list of all their errors at the top or bottom of the form.

Errors have ramifications that extend beyond the physical context, and appropriate use of emotional context is just as important to create a positive user experience and leave a lasting impression of a brand.

Emotional Context

Creating content for a website can sometimes be an emotional rollercoaster. While oftentimes we’re providing good news, in other situations we are forced to give feedback about something that didn’t go as planned.

Error states, particularly credit card declines, downtime notifications and legal policies all require some degree of empathy – you wouldn’t inform a customer that their flight was canceled with the same tone that you’d use to congratulate them on winning a sweepstake, would you?

The IMDB 404 page provides a series of movie-themed quotes that helps you understand what happened.

Feedback Implementations

Here are a few feedback implementations that our web development team find most useful to include in our projects. So useful, in fact, that each is applied to the framework on which we build our websites. They are integral not only to user experience, but also to retaining customer attention, trust in an organization’s brand, and a positive number of conversions.

The Load Status Indicator

The frustration of not seeing a reaction after clicking on something is most apparent on slower connections and addressed efficiently by designing a load status indicator (LSI) which animates while you wait, to indicate the request is in progress. Even better, an LSI can be customized for each web project.

We’ve made it a standard practice to design an LSI for each of our projects, one that is unique to the brand’s colors and overall website style. The design also encourages its use as an emotional feedback tool, a smooth animation that will induce a sense calm during the user’s moment of transition.

As with all user feedback, it is important to take some care with the application of an LSI. If a load status indicator shows up before any significant time has passed, it can be distracting or lead to an impression that things are progressing more slowly. Because of this, we only show an LSI after a few hundred milliseconds have passed.

Progress Bars

In cases when a file may take upwards of a few seconds to process, we apply progress bars. The progress bar would update as the file loads and then alert the user if there was an issue by providing an error state if the upload was, for some reason, unsuccessful.

To provide better user feedback, we progressively enhance the progress bars on our sites. For users on older browsers that can’t detect progress of your upload, we provide a striped bar (also known as a barber pole) to show that something is happening – essentially an LSI catered specifically for file uploads.

When our users are on a modern browser we provide more information such as updating the actual progress of the upload, providing thumbnails when images are being uploaded and queue additional files so that, when uploading a larger number of files, the user still sees progress, rather than spreading their available upstream bandwidth across all files. These cues increase user confidence that the task is proceeding and working as intended.

Hover Events

In the early years of the web, it was evident what a link was; that royal blue underlined text was an almost-universal visual pattern. Now that custom-styling of elements is the status quo, this visual pattern has been diluted, and hover events are a helpful feedback tool for users with a mouse.

They will alert the user that they have the ability to interact with whatever it is they are hovering their cursor over, such as an image, text link or button.

Image hover events help the user understand that they can interact with an element.

On mobile devices, however, hover states fall short. To activate the element, most of the time a user would have to tap once to trigger the hover event, then again a second time to carry out the action – a case when less feedback is more helpful.

Error Messages

It is important to provide context-appropriate error messages for user input forms with text catered to the level of sensitivity the situation warrants. These input forms include feedback about fields that were required but not filled out or information that wasn’t formatted correctly.

We offer that feedback as soon as they leave the field, so if you type an invalid email, it instantly alerts you there is an error. To further guide users, when a form is submitted we scroll users to the place on the page where the first error was encountered and, in some cases, a popup message fixed to the element at fault so users can easily find and remedy their mistakes, eliminating any unnecessary frustration.

Form Labels

In many of our forms, we provide a simple placeholder label before a user has provided information, so they are aware what that field is for.

Then, once they begin to type, we move the label to an adjacent position so that the purpose of their information is preserved in case they are filling out a longer form or are interrupted mid-task, making it easier to resume.

Conclusion

Frustration is the killer to satisfactory user interaction, and many times, so avoidable! Implementing proper feedback in your design projects can not only secure a successful conversion rate but also solidify the confidence customers feel about the company’s brand as a whole.

As designer and author Josh Clark aptly writes, “Our job is to help our users translate their intent into action.” The more we can guide users through our interfaces and provide clear feedback about their progress, the more success, and fewer frustrations, we can create.

The post User Feedback in User Experience appeared first on Speckyboy Design Magazine.

The Productivity Benefits of Scrum in Modern Web Development

Mira Brody — Mon, 01 Aug 2016 08:13:56 +0000

Before the Industrial Revolution, most goods were produced by hand by a single person. Master craftsmen labored over their work, producing a finished product they could be accountable for and proud of.

Mass-production led to the assembly line, in which each person was assigned a step, and their job was to do that step over and over again with the result of many finished products, the reason a car can be built in a single automobile factory assembly line every 20 minutes.

Although it produces a very high output, this causes a much lower sense of accomplishment for the employee – when a worker does one task over and over, they view the result as less worthy than the craftsmen who completed every step involved and thus were responsible for the entire, single object.

There is a product development framework that combines the benefits of these two work processes: a high-quality product, produced efficiently, by a team who takes accountability and pride in their work. This process is called Scrum. Our web software development team has been using Scrum for close to two years, and we’re thrilled with the results. Scrum allows us to constantly improve and communicate as a cohesive team. This has allowed us to build more advanced sites and web applications in a shorter period of time.

Scrum: the Beginnings

Scrum as we use it today began at a company called Advanced Development Methods by Ken Schwaber and Jeff Sutherland in the early 90s. Used by companies like IBM and Google, Scrum has increased total productivity by nearly 1,200 percent. Despite its technical background however, Scrum has manifested itself into a variety of workflows from journalism to education to building schools in Africa – Scrum accelerates human effort, no matter what the effort is.

Our web development team is an office of ten, so Scrum for JTech cannot be pure, which is fine because a big part of Scrum is its ability to adapt to the way your team needs it. We had to try and adapt the philosophies illustrated in Sutherland’s Book to discover for ourselves what would and wouldn’t work for us. However, when we adopted the process, it immediately felt natural. This is because Scrum’s integration of goal-setting, team accountability and celebration matches the rhythm of human instinct – our need to strive toward an obtainable goal instead of working one long monotonous assembly line.

Elements of Scrum

Sprints:
Sprints are work cycles. We work in a three week Sprint for larger website projects in parallel with one-week Sprints for smaller, ongoing work orders.

Stories:
Stories are the way projects are divvied up into small, consumable pieces. Each story is assigned to a team member and moves through a series of columns on a Scrum board: To Do, In Progress, Team Review, Owner Review and Done.

Stand Up:
Stand up is one of five meetings that drive a Sprint. This particular meeting is less than 15 minutes long, occurs at 9:00AM every morning and is a time for each team member to discuss a) what they are working on and b) what roadblocks are preventing them from moving a story across the board.

Roles:
Everyone on a Scrum team is a team member, except the Scrum Master, who runs the Scrum board, drives meetings and ensures the Sprints are completed on time, and the Product Owner. The Product Owner is the person that created the project and in the best position to understand what the client wants; everything must be approved by them before it is considered Done.

Backlog Meeting:
The Sprint Backlog meeting is used to prioritize all stories and prepare them for the upcoming Sprint.

Planning Meeting:
The Sprint Planning meeting involves the entire team – we choose which stories to take on during the three and one-week Sprints and to who to assign them, and vote on how long they may take. Voting is based on a Fibonacci sequence, with the numbers representing a relative gauge of work involved.

Review:
Sprint Review is a time to review all of the work we’ve accomplished within the recently completed Sprint. Clients are invited to participate in this review as we demo the new website or web app, walking them through all of its features.

Retrospective:
The Retrospective is when the team sits down and discusses what went right, what could have gone better and what goals can be set for the next Sprint.

Scrum at a Development Firm

Since we provide so many different services, Scrum has played a huge role in unifying the departments into one cohesive team. It has sped up our process, allowing us to take on more work, resolve project obstacles and to complete web development projects faster. Although we produce more, our projects are ever increasingly more refined. So, here are the ways in which we’ve taken the elements of Scrum that were designed for Silicon Valley-sized corporations and applied them to our business in Downtown Bozeman, Montana.

Productivity:
Our Scrum software, called Jira, documents and helps keep a high level of productivity among a team. The Scrum board keeps track of all Stories, to whom they’re assigned, helps us compare one sprint to another, and even maps our progress visually. It makes it easy to see how well we’re doing at the moment and over time.

Team Accountability:
Because we have so many departments under one roof – design, development, marketing and copywriting – the Stand Up meeting is a time for cross-departmental communication. No one is working in a metaphorical (or literal) cubicle because although stories are assigned to a single member, we are all equally responsible for completing all stories, ensuring team-wide inclusion. Because of this, designers are involved with marketing plans, developers read copy and writers give feedback on art, creating a holistically-managed assembly line.

Accomplishment:
Team members need to see their efforts reflected in the objects they’ve created. Much as a chef would anticipate a restaurant review or a painter would relish their own art show, we as a team enjoy showing the website we’ve built to the client for the first time, and discussing its intricacies, which is why Sprint Reviews and Retrospectives are so effective.

Unlike the assembly line worker who feels no personal connection to the car they’ve produced since their only job was to affix the bumper, in Scrum, even if the homepage of a site was assigned to a single team member, we’ve all worked on it collectively.

Conclusion

Scrum allows us to produce high-quality work, faster. It encourages cohesiveness among our various departments and makes it easier for us to identify issues, fostering continuous improvement that sustains and drives our process. Most notably though, it allows us to design advanced websites for our customers built for excellent performance of which we can be proud.

In short, whether you’re building schools in a third world country, teaching a classroom full of elementary students, or building websites, Scrum is highly effective because it matches many of the instincts that drive human nature; as Sutherland put it in his book, “Happiness is not complacent. It is a process, not a result.”

You may also like to learn about Agile Development.

The post The Productivity Benefits of Scrum in Modern Web Development appeared first on Speckyboy Design Magazine.

Adapting Mobile Web Usability for Ad Content Blockers

Mira Brody — Sun, 20 Sep 2015 08:18:07 +0000

Advertisements can be a critical source of revenue for content publishers, but increasingly ads are being shown in obnoxious and intrusive ways. And as many users are learning, their privacy may be encroached upon with every load of a web page through ad networks, tracking and retargeting.

Much of this comes from advertisers’ insatiable desire to know everything about you, but tracking includes website analytics programs that work via JavaScript, like Google Analytics and potentially more nefarious tracking by governments or individuals.

As more and more of us have become uncomfortable with undisclosed tracking and frustrated by invasive ad campaigns consuming our screen, we turn to content blockers to take back control of our computers and our user experience.

The ability to track users is built using a variety of methods, including cookies, local storage, JavaScript, canvas fingerprinting and more. Since a great deal of modern tracking and obnoxious advertising behavior comes through JavaScript, several developers run JavaScript blockers that have curated and automatically updated list of scripts that it blocks.

An advertising-centric content blocker, AdBlock, has paved the way for content control and the newest iOS and Mac OS updates are promising new, higher performance ways users can block certain content and therefore control the intrusive tracking.

Recognizing these trends, online business owners and web developers need to eliminate design and functionality failures that occur for site visitors who are using content blockers. An issue arises from the clash of these interests: what do you do when the core functionalities of your site rely heavily on scripts that are being blocked?

Regain Your Mobile Real Estate

The increase in mobile browsing has led to viewing space and page load speeds becoming a very intrusive problem that content blocking can help solve. Currently, when you load a page onto the browser of your mobile device, most of the real estate, bandwidth and loading time is consumed by advertisements and other graphics that do nothing to improve your user experience.

Because mobile advertising is less profitable per-ad than traditional desktop computer advertising, it has grown ever-more intrusive in publisher’s desperate efforts to preserve advertising revenue.

In their next software update, Apple is releasing new content blocking tools available for iOS9 and OS X El Capitan. These various content blockers will allow similar abilities to how AdBlock operates on your desktop browser but with increased performance and can be set to block banner ads, sponsored content, social advertising and managed placement ads.

The near future of mobile web design has a clear focus on creating sites that load faster and contain more useful content — with these blockers, phone owners are being given the tools to banish content that interrupts or intrudes into their experience, incentivizing web designers and administrators to provide a mobile browsing experience that is respectful of their visitors.

Fewer advertisements will not only result in happier customers, but longer battery life for devices, less data waste for those on a limited plan and a heightened sense of security.

Crystal, a content blocker currently in beta on iOS, has already demonstrated page loads 3.5 times faster and the use of 53% less bandwidth, a matter of seconds that can be responsible for retaining a large number of paying customers. Many of these blockers will allow more granular settings, relinquishing power back to the user.

JavaScript is the Backbone of Function

JavaScript is a programming language that runs on your local browser and is the backbone of functionality on most modern websites.

Due to its extensive capabilities, it is not reasonable in today’s era to expect a website to fully function without JavaScript enabled on your browser — which poses a problem since a majority of these forthcoming content blockers may hinder some JavaScript to avoid being tracked by data-gathering tools such as Analytics.

Google Analytics is a popular website that helps website owners track user actions. Its array of useful tools include the ability to track where users come from and how long they stay on a page.

In order to utilize these benefits for free, you, as a Google Analytics user, have agreed to inject a block of JavaScript code into your site. When visitors arrive and begin browsing your site, JavaScript sends tracking information about that visitor’s browsing to Google’s servers.

Other popular tracking software heavily used by publishers include Parsely, Chartbeat, Intercom, and Optimizely.

It is no wonder tracking is so ubiquitous: insights into the behavior of consumers allow for better-targeted advertisements, UX data and better web designs as businesses analyze how visitors are using their site and implement improvements accordingly.

Despite some efforts by the more ethical tracking companies like Google to keep individual information anonymous while providing statistics in aggregate, your visits are still being recorded and can be attributed to you and thus many of us have become uncomfortable with undisclosed tracking; in most cases there’s no opportunity for disclosure or negotiation before the tracking occurs, leaving users powerless to protect themselves.

Gaining control over browsing privacy and to stop tracking activity is yet another powerful role of content blockers. AdBlocker is up to 50-60 million users worldwide, proving the user’s desire to protect themselves not only from a terrible browsing experience, but for control over their data as well.

After Apple releases their content blocker options this fall and they gain momentum, web developers, publishers and site owners are going to be faced with a very serious problem: that blockers may cause certain aspects of their site to break, leaving their visitors without the user experience you hoped they would have, or worse, unable to successfully use the site at all.

Adapting Development

No matter the reason your visitors are choosing to utilize a content blocker, it’s important to make sure that your site still works properly for these users. While publishers may need to find new ways to monetize their website content, web developers, must modify their sites so that they will work properly for users with content blockers.

Our developers at JTech first noticed this issue on our own landing pages when one of our staff was browsing with a content blocker enabled. Although the landing page would load properly, the primary navigation at the top of the page was non-functional; when you tried to navigate beyond the landing page and onto the main site, the content blockers prevented our call to Google Analytics and therefore the action could not be completed.

We fixed the issue by implementing a redirect for all actions taking longer than 300 milliseconds to complete, ensuring you are properly directed to where you wish to go with or without waiting for the callback from Google Analytics.

With this addition, our landing page is fully functional with content blockers enabled. On a site we built for Shipton’s Big R, a full-service ranch supply store in Montana, we’ve implemented many of the same redirect functionalities.

We do not rely on third-party JavaScript code for essential functionality of the sites we build, so we are unlikely to be affected by blockers who selectively block advertising or data collection tools.

If you do have a content blocker in place, you may often come across sites that lose their primary functions. Kraft Maid’s photo gallery, for example, is unable to load, leaving the shopper powerless to browse their products.

Google itself requires unblocked JavaScript to log into your Analytics account — the login button is loaded through JavaScript after it tracks you.

As you can see, if you don’t add code to work around these blockers, visitors may quickly become frustrated and leave, valuing their privacy and their trust in their operating content blocker over the experience you wish to provide them.

You can expect more and more blocking as awareness increases and user tools improve — now is the time to make changes that will accommodate the needs of your visitors.

Kraft Maid’s photo gallery is unable to load, leaving shoppers powerless to browse products.

Conclusion

A browsing experience unhindered by cluttered advertisements, slow loading times and extensive bandwidth usages is a reality close on the horizon to the growing number of mobile users.

With the addition of content blocking extensions on mobile devices, many will choose the ability to improve their limited viewing screen and control over their personal data collection — even if it means experiencing a slightly degraded website.

For website owners and developers however, this means adapting their marketing tools and programming abilities to the ever-changing world of the web.

As content blockers rise in popularity — including use by many of my own team members — we will continue to build sites that degrade gracefully and maintain as much functionality as possible for those users who choose to implement content blockers for the sake of their privacy or any other reason.

When JavaScript is used to enhance the usability and aesthetics rather than for something that might cause harm to the visitor’s experience, it decreases the likelihood that irate users will respond with a content block, reinforcing the need for developers to constantly maintain a fully-functioning site and keep user experience a foremost concern.

The post Adapting Mobile Web Usability for Ad Content Blockers appeared first on Speckyboy Design Magazine.