If you put a link on cats.html that links to /dogs.html (an “absolute” path), it’s going to 404 — there is no dogs.html at the base/root level of this site! The / at the beginning of the path means “start at the very bottom level and go up from there” (with public/ being the very bottom level).
That link on cats.html would need to be written as either ./dogs.html (start one directory back and work up) or /animals/dogs.html (explicitly state which directory to start at).
Absolute URLs get longer, naturally, the more complex the directory structure.
With a structure like this, for dogs.html to link to cats.html, it would have to be either…
<!-- Notice the TWO dots, meaning back up another folder level -->
<a href="../c/cats.html">cats</a>
<!-- Or absolute -->
<a href="/animals/pets/c/cats.html">cats</a>
It’s worth noting in this scenario that if animals/ was renamed animal/, then the relative link would still work, but the absolute link would not. That can be a downside to using absolute links. When you’re that specific, making a change to the path will impact your links.
We’ve only looked at HTML linking to HTML, but this idea is universal to the web (and computers, basically). For example, in a CSS file, you might have:
body {
/* Back up one level from /images and follow this path */
background-image: url(./images/pattern.png);
}
…then that becomes wrong because your CSS file is now nested in another directory and is referencing paths from a deeper level. You’d need to back up another folder level again with two dots, like ../images/pattern.png.
One URL format isn’t better than another — it just depends on what you think is more useful and intuitive at the time.
For me, I think about what is the least likely thing to change. For something like an image asset, I find it very unlikely that I’ll ever move it, so linking to it with an absolute URL path (e.g. /images/pattern.png) seems the safest. But for linking documents together that all happen to be in the same directory, it seems safer to link them relatively.
This team management tool is exceptionally suitable for any industry sector and by any sized team. monday.com will perfectly serve a team of two or a team of hundreds spread around the globe, and it can manage multiple projects at once.
monday.com promotes effortless collaboration and transparency, it’s “cheetah fast,” it displays status in as many as 20 different colors, and its status board can be customized to fit your needs and your workflow.
It serves as an excellent alternative to having to force fit your work to meet the demands of your project management tools or systems.
Productivity is in our DNA at JotForm. Our own product is a widely-used productivity tool for organizations to simplify their data collection and save time by reducing back-and-forth emails. I personally use JotForm for fielding case study requests, partnership inquiries, to survey colleagues internally as well as users, and to collect job applications.
So we’ve developed an eye for other helpful productivity tools to help us manage our workflow. And luckily, there are some terrific resources out there to boost your team’s productivity and focus that we use all the time.
Amazing Tools We Use To Be More Productive
Here are just a few of the favorites of the JotForm Marketing team.
Zapier
Zapier has come to the rescue many times for Team JotForm. It’s a service that connects the internet’s most popular business apps, including JotForm. It’s effectively a way to automate the process of sending JotForm form submission data to over 1,000 other services, like your email marketing software, CRM, task management tools, calendar, and a lot more.
JotForm produces monthly webinars, and why we love Zapier is because it spares us from having to copy and paste the information we receive and enter it into an attendee list.
We create a webinar registration form using JotForm, then use Zapier to integrate with GoToWebinar so that attendee information is neatly saved in their system.
Calendly
I hate the hiring process. Not the part where we actually bring on new team members–I love that aspect–but the process of scheduling interviews is torture to me. I’m talking about the endless emails, the calls, the schedule changes, the no-shows, the rejections. It’s a huge time-suck, and it takes a very different headspace to do than my regular job responsibilities.
So I’m a fan of any tool that makes the nitty gritty of hiring easier. For me that’s Calendly.
Calendly is an app that syncs with your calendar and lets whomever you’re inviting to a meeting to select the time that works best for them based on your availability.
Instead of sending a million back-and-forth emails to job candidates to see what times work for them, I send them all the same Calendly link and let them fill my calendar up themselves.
Buffer
To really do social media right, you have to be strategic.
At JotForm, we share a lot of content, whether it’s tips and advice from our own blog or Medium channels, or outside publications that talk about JotForm. It’s not uncommon for us to have more than a dozen original pieces to share, which makes it important for us to schedule our posts ahead of time.
Using Buffer, we can spend an hour scheduling multiple posts to go out at later dates instead of having to remind ourselves to constantly log back into our JotForm social accounts and create a new post.
It’s also great because once posts are scheduled in the Buffer queue, it’s easy for team members to login and review social posts before they go live.
Asana
Our whole company uses Asana for different reasons. I personally love them because I can sit down with everyone on my team and schedule, assign, label, and describe new projects in a calendar view. For anyone who works better when their projects are laid out a little more visually, this is perfect.
And when you complete a project that’s on your Asana calendar, it puts a bright green check mark next to it–so satisfying!
You also get email notifications as deadlines approach, which we’ve found super handy as well.
Slack
The JotForm team is globally dispersed, with our main offices in San Francisco and Turkey. We also have a network of remote employees in nearly every time zone on Earth. Email is still our primary mode of communication, but sometimes you need to ping someone immediately or send a quick link–and that’s where Slack is so helpful.
Slack enables me to have back-and-forth conversations with developers, designers, and supporters a lot faster than I could using email, thus saving me valuable time.
Trello
When we’ve had major product announcements that require assigning projects to multiple people on the team, Trello has been an enormous help.
For instance, before JotForm announced JotForm Cards this past February, we needed a way to coordinate our advertising, PR, blog content, social media posts, design requests, launch event details, product video, marketing emails, collateral and swag, partnerships, and influencer outreach. Yikes.
But Trello gave us a way to centralize all of our projects. Tasks are added as cards that you can assign to members of your team, label accordingly, and indicate completion status along a kanban board. And what’s even better is that Trello has zero learning curve.
Sortd
If left to my own devices, my email inbox is cluttered, embarrassing, and even counterproductive. Sortd has helped with all of that.
It’s sort of like Trello in that it offers a digital kanban board for your tasks, only it’s all in your inbox. Now when I arrive to work in the morning, I sort through all of my emails to see if anyone has asked me to complete a task, then I simply mark the request in the “to-do” column in Sortd. When I start working on the task I move the card over to “in progress” and when it’s finished I slide it over to “completed.”
Most of what’s asked of me still comes via email, so it’s been incredibly helpful for me to manage my important projects.
Do you use any of the productivity tools listed above? Does JotForm boost your productivity? Let us know in the comments!
The market is overcrowded with web tools and services, today it’s easy to launch your own product and everybody is playing the game. It’s good to have competition but some of these solutions are far from being excellent in terms of functionality, safety, and support, but the pricing is the same as premium solutions, so it’s hard to judge which to use. Testing them all, and picking the best takes time and money.
That’s why we’ve handpicked a collection of excellent web tools and services from different fields: logo and website builders, analytics and feedback, landing page creators, and much more. Check these 30 tools and services that will boost productivity.
1. Tailor Social – The Smarter Social Media Management Tool
Tailor Social, gives you the tools to take your social media to the next level. The social media management platform offers several features designed to find and create high-quality content that’s tailored for your audience and automate your content schedule. Perhaps the most impressive aspect of the social media tool is that it lets you be creative and hone your efforts to produce content that connects with readers.
Once you link your social media accounts to Tailor Social, it will populate your posting calendar with a mix of content found online that is relevant for your company’s market, as well as posts that you can create using the company’s straightforward design tools. You can choose between producing a standard social post, a Twitter or Facebook cover, and even a useful Facebook ad format that makes cross-posting easy.
More importantly, you can modify the text, style, and background of every post to generate something fun and unique that is always on message. These posts can then be easily fitted into your scheduled and automated for posting at the right time. Thanks to in-depth analytics tools, you can see just how effective your strategy is and constantly optimize it for even better results.
You can choose between managing 2 accounts with the $10 a month Basic plan, 7 accounts with the Professional plan at $15 a month, or up to 30 with the Corporate account for $50 a month.
2. Hotjar – See How Your Visitors are Really Using Your Site
With more than 210,000 companies using this solution, Hotjar is a new and easy way to truly understand your web and mobile site visitors. It is a perfect fit for any kind of company, from startups to Fortune 500. Understand what users want, care about and do on your site by visually representing their clicks, taps and scrolling behavior – which are the strongest indicators of visitor motivation and desire.
With the Recordings feature, you will see what your users see – Eliminate guesswork with Recordings of real visitor behavior on your site. By seeing your visitor’s clicks, taps and mouse movements you can identify usability issues on the fly and the issues they encounter.
Where are your visitors dropping off? Find the biggest opportunities for improvement and testing by identifying on which page and at which step most visitors are leaving your site.
The pricing is flexible meaning that there is a free forever plan for personal use 2,000 page views per day, a 29 euro plan per month for low traffic sites & early stage Startups, but also dedicated price for all kind of businesses and agencies.
Start with the free version.
3. Landingi – A Powerful Landing Page Builder
Landingi is a great landing page builder that can be used by anyone, you don’t need to have any coding skills or special knowledge. There are over 4,000 companies using it with great success, including the huge corporations PayPal and SonyMusic.
?You will find a powerful drag and drop builder, over 200 excellent templates, 5,000 free images to pick from and 800 Google Fonts. You want to have a YouTube or Video background, is possible with Landingi.
Landingi landing pages look great on any device and can be integrated with MailChimp, HubSpot, SalesForce and many others.
?Start the 14-day free trial, you don’t need a credit card and registration takes less than 1 minute.
4. Orion – 6014 Free SVG Vector Icons
Orion Icon Library is a great place where designers and developers can find gorgeous icons that are a perfect fit for any project. You get access for free to 6,014 custom crafted vector icons with a powerful and advanced Web App that you can use to modify and download icons in SVG or PNG format, find and save icons in different collections, change icon colors and much more.??They also have a fall deal with an exclusive 68% discount for the forever Pro version:? https://orioniconlibrary.com/falldeal
5. WP Page Builder
WP Page Builder is a feature-rich drag and drop WordPress page builder plugin to create websites easily. Whether you’re an experienced developer or just a beginner, you can build stunning websites independently with this tool. Create beautiful web pages effortlessly using the intuitive live page composer without coding in minutes. No design experience needed.
6. Format – Free Website Template Using Bootstrap For Portfolio
Format is a creative, clean and modern, free website template that you can use for your next portfolio project. If you need a template as a designer, freelancer, agency, web studio, Format is perfect for you! It features pop up video, smooth overlay for portfolio, and animation upon scrolling. Check it now! Download and Share!
7. AppBeat Monitoring
AppBeat is an excellent and complete uptime, service health, and performance monitoring solution. The highly available monitoring system periodically checks your online services and sends you an immediate notification when a problem is detected. Catch issues before they become incidents!
8. BrowseEmAll
BrowseEmAll is a powerful cross-browser testing solution which is packed with useful features. There is the manual browser testing which enables your developers and testers to locate and fix browser specific problems right on their machine and the automated browser testing where you start the test automation with the Record & Play technology or run your existing test suite using the configuration less Selenium integration.
9. MultiBrowser
MultiBrowser is a responsive, mobile and automated cross-browser testing solution that works great and can be easily used by anybody, without having any special experience or special knowledge. This solution is using real browsers where the testing is real, forget emulators, shimmied user agents and VMs.
Start a free trial and see it working.
10. Codester
Codester is a huge marketplace where designers and developers can buy and sell premium PHP scripts, app templates, themes, plugins, website templates and much more. There are thousands of premium products to choose from, browse the website and pick what you need.
11. Visme
Visme is more than just another content creation tool – it’s a first of its kind, “no tech or design skills required” solution that lets you effortlessly build everything from Infographics to eBooks and more. It’s a graph maker, a visual communication tool and a powerful design application all rolled into one — finally, everything you need to strike a chord with your audience is here.
12. 48HoursLogo
With 48HoursLogo, anyone can have a great and affordable design very fast. A professional logo design starts at $128 and you will have multiple designers competing for your logo and dozens of logo concepts.
13. Designhooks
Designhooks is one of the best free resources websites for web designers and developers where they can easily find hand-picked products made by amazing designers around the world. There are PSD Mockups, Sketches, HTML templates, WordPress templates and much more.
14. MailMunch
With MailMunch everybody can quickly create beautiful landing pages to capture leads. Grow your email list by sharing the page on social networks and ad campaigns. It is the fastest growing lead capture and email marketing platform which will help you convert visitors into subscribers and customers with a zero-code form building.
Using the powerful MailMunch, anyone can create a professional squeeze page, a landing page created with the main purpose of converting visitors into email subscribers. If you want to build your email list, you need to be using squeeze pages as they are the most effective way to do so.
Build your lead magnet.
15. Userfeel.com
Userfeel is the usability testing tool that gives you videos of real users speaking their thoughts as they use your website or app. Userfeel.com is Designed and developed by Usability Researchers for Usability Researchers but also for newcomers to UX Research and anyone who wants to optimize his website or app.
16. Unlayer – Email Editor
Unlayer is the perfect email editor and page builder for SaaS and CRMs. It seamlessly embeds in your web applications and lets your customers create beautiful mobile-ready emails or landing pages right from your app. Unlayer has combined many pre-designed tools which your users will be using to create awesome content from inside your application. HTML code produced by Unlayer editor has been tested on tools like Litmus, and Email on Acid. Your content will look great on all devices, and all clients.
17. PingPong
With PingPong you can conduct effortless user research, remotely. With the instant panel, there are tens of thousands of testers recruited from all over the world. Most of them are working professionals. 76% of them are 5 rated after their first interview. Smart-screening: our algorithms automatically select the most appropriate testers for you. Custom screeners: add filters to your research criteria to ensure you’re speaking to the right people.
18. Racks
Racks is an impressive and curiosity sparking free software company website template. The web design of the page skin is clean, contemporary and high performing. Moreover, Racks follows all the latest tech and web regulations to make sure your final internet space stays intact regardless of the device and browsing platform they use. In other words, whether it is iOS or Android, as well as Safari, Chrome or Firefox, Racks guarantees an always smooth and stable experience.
19. Controlio
Monitor employees PC activity from anywhere with Controlio, it is perfect for any kind of company, from small businesses to large corporations. It is packed with great features. You can have real-time surveillance, continuous screen recording and much more. Track active and idle time per app and website and get rid of bottlenecks in your workflow
Start a free 7-day trial.
20. Brizy
Brizy is the most user-friendly Page Builder in town! No designer or developer skills required because the only tools you’ll need to master are click and drag. Forging a gorgeous website takes less than 1 hour and the result will be impressive. Try it.
21. MeridianThemes
MeridanThemes has lots of gorgeous and professionally made WordPress themes. You will find fully responsive, SEO friendly and fast themes that look great for any kind of projects. Browse their portfolio and pick what you need.
22. FreelanceLogoDesign
In 60 minutes or less, Freelance Logo Design will help you have 3 logo professional designers compete and send you 6 custom logos for you to choose from. The results are excellent and the solution is budget-friendly. Start the contest from $19.
23. actiTIME
actiTIME is a powerful time tracking and scope management system to spark your business with intelligent data. Track time, monitor project progress, analyze team performance. Get valuable insights on any aspect of your business. Try all features of actiTIME Online timesheet for free.
24. MediaLoot
At MediaLoot, designers and developers will find thousands of fonts, icons, graphics, templates, interfaces, and more. Sign up for an account and start downloading free & premium design resources in minutes. Whatever graphics you’re looking for: premium themes or free designs, Medialoot has you covered.
25. Logoshi – Logo Maker
Logoshi is one of our favorite ways to create a professional logo. Logoshi’s simple logo maker spawns sizzling logos in seconds. Pricing starts at only $5. Get the right logo files for social media, websites, business cards, invoices, t-shirts, and signs. Boost your brand with a logo from Logoshi.
26. Pixpa
With Pixpa, everybody can create a gorgeous and fully functional online portfolio website with integrated e-commerce, client galleries, and blogging tools. Pixpa’s easy drag-and-drop website builder lets you build your professional website in minutes without any coding knowledge.
Try free for 15 days. No risk, and No credit card required.
27. WordPress SEO Plugin – Rank Math
RankMath is the best All in One WordPress Solution for all your SEO needs. Rank Math gives you a competitive edge with its powerful and easy-to-use features. Whether you are a novice or an SEO veteran, Rank Math can take your SEO game to the next level. It practically configures itself. Rank Math features a step-by-step installation and configuration wizard that sets up SEO for WordPress perfectly. Upon installation, Rank Math verifies your site’s settings and recommends the ideal settings for best performance. The step-by-step wizard then sets up your site’s SEO, social profiles, webmaster profiles and other SEO settings.
28. Goodie
Goodie is a different web development solution on the market. Get your website designed and coded by professionals from only $999. It is a great fit for small and local businesses, designers looking to have a reliable web development partner, simple WordPress websites and more.
Get in touch with Goodie and discuss your new project.
29. Inspectlet
Record and playback everything visitors do on your site with session recording, visualize mouse movements with eye-tracking heatmaps. Test different versions of your site designs with A/B Testing. Inspectlet is a whole suite of powerful user experience analytics tools that helps you understand what visitors are doing on your site.
30. Freelance Invoice
100,000 freelancers get paid faster with Bonsai invoicing. This solution is packed with lots powerful features and useful functionalities, making it very flexible and easy to use. Create and fully customize invoices in seconds or generate them automatically from any proposal, contract or time sheet.
[– This is a sponsored post on behalf of Mekanism –]
Here on Webdesignledger, we like to show our readers the best content we have to offer. Often times, showcasing the best is as simple as writing about what we like, and today is no exception. In this week’s installment of Font of the Week, we’re going to be taking a look at a brilliant font with a very interesting name.
About Milkstore
Tobias Saul, the creator of Milkstore, wanted this font to have a genuine feel. Taking inspiration from the old logos that were hand painted on brick buildings years ago, Tobias created the font you see above. The idea was to have a handcrafted and authentic design, and Tobias hit that nail right on the head.
Milkstore would be absolutely perfect for logos, packaging design, or titles. Anytime you want a welcoming, authentic look, Milkstore is the font for you.
What’s in the package?
As with most font packages, you get quite a few goodies. For starters, the package contains 18 editable logo templates for Adobe Illustrator (CS & CC) and more than 30 hand drawn icons. In addition, you’ll also get 12 textured backgrounds. You get all that plus these fonts:
Milkstore 01 (OTF, TTF) Including special and alternate swashes
Milkstore 02 (OTF, TTF) Uppercase
Milkstore 03 (OTF, TTF) Uppercase
Milkstore 04 (OTF, TTF) Uppercase
Milkstore 05 (OTF, TTF) Uppercase
If you want to check it out, follow the link here.
More work from Tobias
Tobias Saul is has an incredibly creative mind when it comes to fonts. Each and every image on his page feels like the intro to a classic movie or the cover to a good book. His style definitely comes off as vintage, which is a unique and refreshing look. Here are some other examples of his work:
If you like what you see, go check them out!
A font can either make or break a project. It’s the face of your product, business, or webpage, so you should take the time to find the perfect fit. If you like to stay up to date with trending fonts, and other design related stories, be sure to follow Webdesignledger!
It began, as many things do, with a silly conversation. In this case, I was talking with our Front End Technology Competency Director (aka “boss man”) Mundi Morgado.
It went something like this…
Mundi Morgado I want you to build a visual screen reader.
Nathan Smith Who what now?
Mundi Morgado I want a CSS library that allows you to see the structure of a document. It shouldn’t use class so that you’re forced to focus on semantics. Also, make it theme-able.
Nathan Smith Sure, let me see what I can come up with.
Fast-forward a week, and we’ve got what we are now calling:
Trashy.css: The throwaway CSS library with no class
Why throwaway? Well, it’s not really meant to be a fully fledged, production-ready style framework. Rather, it’s like training wheels for document semantics, with some bumper lanes (think: bowling) to keep you on the right track.
It’s part of our ongoing effort at TandemSeven to promote code literacy throughout our organization. As more of our UX designers are beginning to share responsibility for the accessibility and semantics of a project, it makes sense that we would build in such a way that allows UX and development to be more collaborative.
There are four main aspects to Trashy.
Trashy: “Basic”
First is the base trashy.css file, which applies a passably basic look and feel to the majority of common HTML elements. Check out this example of a basic page.
Trashy: “Boxes”
Second, there is trashy.boxes.css. This visually distinguishes otherwise invisible semantic elements, such as: header, main, nav, etc. That way, one can see where those elements are (or aren’t) as a page is being authored. Here’s a page with semantic boxes outlined.
Trashy: “Theme”
Thirdly, theming is possible via trashy.theme.css. This is mostly just an example — inspired by PaperCSS) — of how to make UI look “hand drawn,” to prevent observers from being too fixated on the look and feel, rather than the semantics of a document. Here’s the example theme in action.
Trashy: “Debug”
Lastly, there is a trashy.debug.css file that highlights and calls out invalid and/or problematic markup. Here’s a gnarly example of “everything” going wrong on a single HTML page. This was inspired by a11y.css, though it diverges in what is considered noteworthy.
For instance, we call out “div-itis” when multiple div:only-child have been nested within one another. We’re also opinionated about type="checkbox" being contained inside of a . This is for maximum click-ability within an otherwise dead whitespace gap, between a checkbox (or radio) and its textual label.
Any or all of these CSS files can be applied individually or in conjunction with one another. There is also a bookmarklet (labeled “GET TRASHY!”) on the Trashy home page you can use to get results for any webpage.
The bookmarklet will remotely pull in:
sanitize.css
trashy.css
trashy.boxes.css
trashy.debug.css
Our “reset” – Sanitize.css
A quick word on Santitize.css: It was created by my coworker Jonathan Neal (author of Normalize.css), as a way to have a semi-opinionated CSS “reset.” Meaning, it puts in a lot of defaults that we find ourselves writing as developers anyway, so it makes for a good starting point.
Technically speaking
Okay, so now that we’ve covered the “why,” let’s dig into the “how.”
Basically, it all revolves around using (abusing?) the ::before and ::after pseudo elements. For instance, to show the name of a block level tag, we’re using this CSS.
Semantic tags (using ::before)
Here is an abbreviated version of the trashy.boxes.css file, for succinctness. It causes the
tag to have a dashed border, and to have its tag named displayed the top left corner.
Likewise, here’s a snippet of code from the trashy.debug.css file that drives the markup warning messages. This particular example causes tags to be displayed, which may be further optimized or need the developer’s attention: inline JavaScript and/or external src without async.
In the case of inline JS, we set the font-size and line-height to 0 because we’re making the element visible. We yank the text off the page via text-indent: -99999px just to make sure it doesn’t show up. We wouldn’t want that random JS code displayed alongside legit page content.
(Please don’t ever do this for “real” content. It’s just a hack, mkay?)
To get our error message to show up though, we have to set the font-size and line-height back to non-zero values, and remove our text-indent. Then, with a bit more absolute positioning, we ensure the message is visible. This lets us see, amidst the rest of the page content, whereabouts to check (via DOM inspector) for the insertion point.
Note: Some scripts do need to be loaded synchronously. You wouldn’t want your “app” code to load before your “framework” code. Heck, some inline JS is probably fine too, especially if you’re doing some super speed optimization for the critical rendering path. These warnings are “dumb” in the sense that they match only via CSS selectors. Take ‘em with a grain of salt, your mileage may vary, etc.
JS bookmarklet
The aforementioned JS bookmarklet finds all and tags in the page, and causes them to be ineffective. This allows us to add in our own CSS to take over, so that the only styles applied are those provided directly via Trashy.
The magic is accomplished by setting rel="stylesheet" to rel="". If an external stylesheet is not identified as such, even if it’s cached, the browser will not apply its styles to the page. Similarly, we destroy the contents of any inline tags by setting the innerHTML to an empty string.
This leaves us with the tags themselves still intact, because we still want to validate that no or tags are present within .
We also check that there aren’t too many tags being used in the . We allow for one, since it could be used for the critical rendering path. If there’s a build process to generate a page with consolidated inline styles, then it’s likely they’re being emitted through a single tag.
<a href="javascript:(
function (d) {
var f = Array.prototype.forEach;
var linkTags = d.querySelectorAll('[rel='stylesheet']');
var styleTags = d.querySelectorAll('style');
f.call(linkTags, function (x) {
x.rel = '';
});
f.call(styleTags, function (x) {
x.innerHTML = '';
});
var newLink = d.createElement('link');
newLink.rel = 'stylesheet';
newLink.href =
'https://t7.github.io/trashy.css/css/bookmarklet.css';
d.head.appendChild(newLink);
}
)(document);">
GET TRASHY!
</a>
That pretty much covers it. It’s a simple drop-in to help you visualize your document semantics and debug possibly problematic markup.
I have also found it to be super fun to use. A quick click of the bookmarklet on any given site usually yields lots of things that could be improved upon.
For instance, here’s what CNN’s site looks like with Trashy applied…
P.S. Call security!
If you try this with Twitter’s site, you might wonder why it doesn’t work. We were initially perplexed by this, too. It has to do with the site’s Content Security Policy (CSP). This can be used to disallow CSS and/or JavaScript from being loaded externally, and can whitelist safe domains.
This can be set either at the server level, or by a tag in the .
In the case of Twitter, it’s emitted from the server. Even if it were in the HTML, destroying it has no effect on the actual browser behavior. It’s locked in.
Okay, so…
Can’t you insert your own security meta tag and override it?
You’d think so. But, thankfully, no. Once a CSP been accepted by the browser for that page, it cannot be overridden. That’s probably a good thing, even though it ruins our fun.
I suppose that’d be like wishing for more wishes. It’s against the genie rules!
Earlier this year, a man drove his car into a lake after following directions from a smartphone app that helps drivers navigate by issuing turn-by-turn directions. Unfortunately, the app’s programming did not include instructions to avoid roads that turn into boat launches.
From the perspective of the app, it did exactly what it was programmed to do, i.e. to find the most optimal route from point A to point B given the information made available to it. From the perspective of the man, it failed him by not taking the real world into account.
The same principle applies for accessibility testing.
Designing For Accessibility And Inclusion
The more inclusive you are to the needs of your users, the more accessible your design is. Let’s take a closer look at the different lenses of accessibility through which you can refine your designs. Read article ?
Automated Accessibility Testing
I am going to assume that you’re reading this article because you’re interested in learning how to test your websites and web apps to ensure they’re accessible. If you want to learn more about why accessibility is necessary, the topic has been covered extensively elsewhere.
Automated accessibility testing is a process where you use a series of scripts to test for the presence, or lack of certain conditions in code. These conditions are dictated by the Web Content Accessibility Guidelines (WCAG), a standard by the W3C that outlines how to make digital experiences accessible.
For example, an automated accessibility test might check to see if the tabindex attribute is present and if its value is greater than0. The pseudocode would be something like:
Failures can then be collected and used to generate reports that disclose the number, and severity of accessibility issues. Certain automated accessibility products can also integrate as a Continuous Integration or Continuous Deployment (CI/CD) tool, presenting just-in-time warnings to developers when they attempt to add code to a central repository.
These automated programs are incredible resources. Modern websites and web apps are complicated things that involve hundreds of states, thousands of lines of code, and complicated multi-screen interactions. It’d be absurd to expect a human (or a team of humans) to mind all the code controlling every possible permutation of the site, to say nothing of things like regressions, software rot, and A/B tests.
Automation really shines here. It can repeatedly and tirelessly pour over these details with perfect memory, at a rate far faster than any human is capable of.
However…
Automated accessibility tests aren’t a turnkey solution, nor are they a silver bullet. There are some limitations to keep in mind when using them.
Thinking To Think Of Things
One of both the best and worst aspects of the web is that there are many different ways to implement a solution to a problem. While this flexibility has kept the web robust and adaptable and ensured it outlived other competing technologies, it also means that you’ll sometimes see code that is, um, creatively implemented.
The test suite is only as good as what its author thought to check for. A naïve developer might only write tests for the happy path, where everyone writes semantic HTML, fault-tolerant JavaScript, and well-scoped CSS. However, this is the real world. We need to acknowledge that things like tight deadlines, unfamiliarity with the programming language, atypical user input, and sketchy 3rd party scripts exist.
For example, the automated accessibility testing site Tenon.io wisely includes a rule that checks to see if a form element has both a label element and an aria-label associated with it, and if the text strings for both declarations differ. If they do, it will flag it as an issue, as the visible label may be different than what someone would hear if they were navigating using a screen reader.
If you’re not using a testing service that includes this rule, it won’t be reported. The code will still “pass”, but it’s passing by omission, not because it’s actually accessible.
State
Some automated accessibility tests cannot parse the various states of interactive content. Critical parts of the user interface are effectively invisible to automation unless the test is run when the content is in an active, selected, or disabled state.
By interactive content, I mean things that the user has yet to take action on, or aren’t present when the page loads. Unopened modals, collapsed accordions, hidden tab content and carousel slides are all examples.
It takes sophisticated software to automatically test the various states of every component within a single screen, let alone across an entire web app or website. While it is possible to augment testing software with automated accessibility checks, it is very resource-intensive, usually requiring a dedicated team of engineers to set up and maintain.
Just having the presence of ARIA does not guarantee that it will automatically make something accessible. Unfortunately, and in spite of its first rule of use, ARIA is commonly misunderstood, and consequently abused. A lot of off-the-shelf code has this problem, perpetuating the issue.
For example, certain ARIA attributes and values can only be applied to certain elements. If incorrectly applied, assistive technology will ignore or misreport the declaration. Certain roles, known as Abstract Roles, only exist to set up the overall taxonomy and should never be placed in markup.
<button role="command">Save</button>
<!-- Never do this -->
To further complicate the issue, support for ARIA is varied across browsers. While an attribute may be used appropriately, the browser may not communicate the declared role, property, or state to assistive technology.
There is also the scenario where ARIA can be applied to an element and be valid from a technical standpoint, yet be unusable from an assistive technology perspective. For example:
<h1 aria-hidden=“true”>
Tired of unevenly cooked asparagus? Try this tip from the world's oldest cookbook.
</h1>
Headings — especially first-level headings — are vital in communicating the purpose of a page. If a person is using assistive technology to navigate, the aria-hidden declaration applied to the h1 element will make it difficult for them to quickly determine the page’s purpose. It will force them to navigate around the rest of the page to gain context, an annoying and labor-intensive process.
Some automated accessibility tests may scan the code and not report an error since the syntax itself is valid. The automation has no way of knowing the greater context of the declaration’s use.
This isn’t to say you should completely avoid using ARIA! When authored with care and deliberation, ARIA can fix the gaps in accessibility that sometimes plague complicated interactions; it provides some much-needed context to the people who rely on assistive technology.
Much-Needed Context
As the soggy car demonstrates, computers are awful at understanding the overall situation of the outside world. It’s up to us humans to be the ultimate arbiters in determining if what the computer spits out is useful or not.
Debunking
Before we discuss how to provide appropriate context, there are a few common misunderstandings about accessibility work that need to be addressed:
Second, accessibility is more than just screen readers. The rules outlined in the Web Content Accessibility Guidelines ensure that the largest number of people can read and operate technology, regardless of ability or circumstance.
For example, the rule that stipulates a website or web app needs to be able to work regardless of device orientation benefits everyone. Some people may need to mount their device in a fixed location in a specific orientation, such as in landscape mode on the arm of a wheelchair. Others might want to lie in bed and watch a movie, or better investigate a product photo (pinch and pull zooming will also be helpful to have here).
Third, disabilities can be conditional and can be brought about by your environment. It can be a short-term thing, like rain on your glasses, sleep deprivation, or an allergies-induced migraine. It can also be longer-term, such as a debilitating illness, broken limb, or a depressive episode. Multiple, compounding conditions can (and do) affect individuals.
That all being said, many accessibility fixes that help screen readers work properly also benefit other assistive technologies.
Get Your Feet Wet
Knowing where to begin can be overwhelming. Consider Michiel Bijl‘s great advice:
“Before you release a website, tab through it. If you cannot see where you are on the page after each tab; you’re not finished yet. #a11y
Tab through a few of the main user flows on your website or web app to determine if all interactive components’ focus states are visually apparent, and if they can be activated via keyboard input. If there’s something you can click or tap on that isn’t getting highlighted when receiving keyboard focus, take note of it. Also pay attention to the order interactive components are highlighted when focused — it should match the reading order of the site.
If you need a baseline to compare your testing to, Dave Rupert has an excellent project called A11Y Nutrition Cards, which outlines expected behavior for common interactive components. In addition, Scott O’Hara maintains a project called a11y Styled Form Controls. This project provides examples of components such as switches, checkboxes, and radio buttons that have well-tested and documented support for assistive technology. A clever reader might use one of these resources to help them try out the other!
With that out of the way, I’m going to share a fourth myth with you: not every assistive technology user is a power user. Like with any other piece of software, there’s a learning curve involved.
In her post about Aaptiv’s redesign, Lisa Zhu discovers that their initial accessibility fix wasn’t intuitive. While their first implementation was “technically” correct, it didn’t line up with how people who rely on VoiceOver actually use their devices. A second solution simplified the interaction to better align with their expectations.
Don’t assume that just because something hypothetically functions that it’s actually usable. Trust your gut: if it feels especially awkward, cumbersome, or tedious to operate for you, chances are it’ll be for others.
Dive Right In
While not every accessibility issue is a screen reader issue, you should still get in the habit of testing your site with one. Not an emulator, simulator, or some other proxy solution.
If you find yourself struggling to operate a complicated interactive component using basic screen reader commands, it’s probably a sign that the component needs to be simplified. Chances are that the simplification will help non-assistive technology users as well. Good design benefits everyone!
The same goes for navigation. If it’s difficult to move around the website or web app, it’s probably a sign that you need to update your heading structure and landmark roles. Both of these features are used by assistive technology to quickly and efficiently navigate.
Both of these are sidebars, but only one of them is semantically described as such. A computer doesn’t know what a sidebar is, so it’s up to you to tell it.
Another good thing to review is the text content used to describe your links. Hopping from link to link is another common assistive technology navigation technique; some screen readers can even generate a list of all link content on the page:
“Think before you link! Your “helpful” click here links look like this to a screen reader user. ALT = JAWS links list”
When navigating using an ordered list devoid of the surrounding non-link content, avoiding ambiguous terms like “click here” or “more info” can go a long way to ensuring a person can understand the overall meaning of the page. As a bonus, it’ll help alleviate cognitive concerns for everyone, as you are more accurately explaining what a user should expect after activating a link.
How To Test
Each screen reader has a different approach to how it announces content. This is intentional. It’s a balancing act between the product’s features, the operating system it is installed on, the form factor it is available in, and the types of input it can receive.
The Browser Wars taught us the folly of developing for only one browser. Similarly, we should not cater to a single screen reader. It is important to note that many people rely exclusively on a specific screen reader and browser combination — by circumstance, preference, or necessity’making this all the more important. However, there is a caveat: each screen reader works better when used with a specific browser, typically the one that allows it access to the greatest amount of accessibility API information.
All of these screen readers can be used for free, provided you have the hardware. You can also virtualize that hardware, either for free or on the cheap.
Automate
Automated accessibility tests should be your first line of defense. They will help you catch a great deal of nitpicky, easily-preventable errors before they get committed. Repeated errors may also signal problems in template logic, where one upstream tweak can fix multiple pages. Identifying and resolving these issues allows you to spend your valuable manual testing time much more wisely.
It may also be helpful to log accessibility issues in a place where people can collaborate, such as Google Sheets. Quantifying the frequency and severity of errors can lead to good things like updated documentation, opportunities for lunch and learn education, and other healthy changes to organizational workflow.
The two most popular screen readers on Windows are JAWS and NVDA.
JAWS
JAWS (Job Access With Speech) is the most popular and feature-rich screen reader on the market. It works best with Firefox and Chrome, with concessions for supporting Internet Explorer. Although it is pay software, it can be operated in full in demo mode for 40 minutes at a time (this should be more than sufficient to perform basic testing).
Windows comes bundled with a built-in screen reader called Narrator. It works well with Edge, but has difficulty interfacing with other browsers.
Apple
macOS
VoiceOver is a powerful screen reader that comes bundled with macOS. Use it in conjunction with Safari, first making sure that full keyboard access is enabled.
iOS
VoiceOver is also included in iOS, and is the most popular mobile screen reader. Much like its desktop counterpart, it works best with Safari. An interesting note here is that according to the 2017 WebAIM screen reader survey, a not-insignificant amount of respondents augment their phone with external hardware keyboards.
Android
Google recently folded TalkBack, their mobile screen reader, into a larger collection of accessibility services called the Android Accessibility Suite. It works best with Mobile Chrome. While many Android apps are notoriously inaccessible, it is still worth testing on this platform. Android’s growing presence in emerging markets, as well as increasing internet use amongst elderly and lower-income demographics, should give pause for consideration.
If you do not require the use of assistive technology on a frequent basis then you do not fully understand how the people who do interact with the web.
Much like traditional user testing, being too close to the thing you created may cloud your judgment. Empathy exercises are a good way to become aware of the problem space, but you should not use yourself as a litmus test for whether the entire experience is truly accessible. You are not the expert.
If your product serves a huge population of users, if its core base of users trends towards having a higher probability of disability conditions (specialized product, elderly populations, foreign language speakers, etc.), and/or if it is required to be compliant by law, I would strongly encourage allocating a portion of your budget for testing by people with disabilities.
“At what point does your organisation stop supporting a browser in terms of % usage? 18% of the global pop. have an #Accessibility requirement, 2% people have a colour vision deficient. But you consider 2% IE usage support more important? Support everyone be inclusive.”
This isn’t to say you should completely delegate the responsibility to these testers. Much as how automated accessibility testing can detect smaller issues to remove, a first round of basic manual testing helps professional testers focus their efforts on the complicated interactions you need an expert’s opinion on. In addition to optimizing the value of their time, it helps to get you more comfortable triaging. It is also a professional courtesy, plain and simple.
There are a few companies that perform manual testing by people with disabilities:
We also need to acknowledge the other large barrier to accessible sites that can’t be automated away: poor user experience.
User experience can make or break a product. Your code can compile perfectly, your time to first paint can be lightning quick, and your Webpack setup can be beyond reproach. All this is irrelevant if the end result is unusable. User experience encompasses all users, including those who navigate with the aid of assistive technology.
If a person cannot operate your website or web app, they’ll abandon it and not think twice. If they are forced to use your site to get a service unavailable by other means, there’s a growing precedent for taking legal action (and rightly so).
As a discipline, user experience can be roughly divided into two parts: how something looks and how it behaves They’re intrinsically interlinked concepts — work on either may affect both. While accessible design is a topic unto itself, there are some big-picture things we can keep in mind when approaching accessible user experiences from a testing perspective:
How It Looks
The WCAG does a great job covering a lot of the basics of good design. Color contrast, font size, user-facing state: a lot of these things can be targeted by automation. What you should pay attention to is all the atomic, difficult to quantify bits that compound to create your designs. Things like the words you choose, the fonts you use to display them, the spacing between things, affordances for interaction, the way you handle your breakpoints, etc.
“A good font should tell you: the difference between m and rn the difference between I and l the difference between O and 0.”
It’s one of those “an ounce of prevention is worth a pound of cure” situations. Smart, accessible defaults can save countless time and money down the line. Lean and mean startups all the way up to multinational conglomerates value efficient use of resources, and this is one of those places where you can really capitalize on that. Put your basic design patterns — say collected in something like a mood board or living style guide — in front of people early and often to see if your designed intent is clear.
How It Behaves
An enticing color palette and collection of thoughtfully-curated stock photography only go so far. Eventually, you’re going to have to synthesize all your design decisions to create something that addresses a need.
Behavior can be as small as a microinteraction, or as large as finding a product and purchasing it. What’s important here is to make sure that all the barriers to a person trying to accomplish the task at hand are removed.
If you’re using personas, don’t create a separate persona for a user with a disability. Instead, blend accessibility considerations into your existing ones. As a persona is an abstracted representation of the types of users you want to cater to, you want to make sure the kinds of conditions they may be experiencing are included. Disability conditions aren’t limited to just physical impairments, either. Things like a metered data plan, non-native language, or anxiety are all worth integrating.
“When looking at your site’s analytics, remember that if you don’t see many users on lower end phones or from more remote areas, it’s not because they aren’t a target for your product or service. It is because your mobile experience sucks. As a developer, it’s your job to fix it.”
User testing, ideally simulating conditions as close to what a person would be doing in the real world (including their individual device preferences and presence of assistive technology), is also key. Verifying that people are actually able to make the logical leaps necessary to operate your interface addresses a lot of cognitive concerns, a difficult-to-quantify yet vital thing to accommodate.
We Shape Our Tools, Our Tools Shape Us
Our tool use corresponds to the kind of work we do: Carpenters drive nails with hammers, chefs cook using skillets, surgeons cut with scalpels. It’s a self-reinforcing phenomenon, and it tends to lead to over-categorization.
Sometimes this over-categorization gets in the way of us remembering to consider the real world. A surgeon might have a carpentry hobby; a chef might be a retired veterinarian. It’s important to understand that accessibility is everyone’s responsibility, and there are many paths to making our websites and web apps the best they can be for everyone. To paraphrase Mikey Ilagan, accessibility is a holistic practice, essential to some but useful to all.
Used with discretion, ARIA is a very good tool to have at our disposal. We shouldn’t shy away from using it, provided we understand the how and why behind why they work.
The same goes for automated accessibility tests, as well as GPS apps. They’re great tools to have, just get to know the terrain a little bit first.
?If WordPress is the world’s favorite blogging platform, then WooCommerce is surely the most popular e-commerce solution available. WooCommerce is currently leading the WordPress e-commerce market and in popularity exceeds its nearest rivals—Shopify and Magento—roughly 4 times over.
In this post we’ll learn how to capture and recover abandoned shopping carts in WooCommerce and how to create a successful abandoned cart recovery email. But before we dive in, let’s quickly look at what cart abandonment is, and how we can reduce it in the first instance.
What is Shopping Cart Abandonment?
Shopping cart abandonment is an e-commerce term that is used to define the action when a visitor adds items to their shopping cart and then decides to leave the website without completing a purchase—they literally abandon their cart.
Unfortunately for shop owners, this is very common. It can’t be fully eliminated because there always will be those who take pleasure in window shopping. However, there are a few things that can be done to reduce abandonment:
Improve your business model by eliminating hidden charges at the end of your checkout process, and offer free shipping;
Remove unnecessary input fields and checkout steps—the longer the process, the greater the chances become that the customer will get distracted;
Do not force your visitors to register in order to buy, offer an option to create an account after the payment is complete instead;
Make your visitors feel safe when trusting you with their personal data, especially credit card details.
Capturing & Recovering Abandoned Shopping Carts
Although WooCommerce is a terrific e-commerce platform, it does not come with an integrated solution for capturing abandoned carts. Luckily, one of the best things about WordPress and WooCommerce is that there are plenty of free plugins just waiting to be picked up by us.
Capturing Abandoned Carts
To recover lost sales, we must first capture the abandoned carts:
Download and install a plugin such as the Save Abandoned Carts plugin from the WordPress repository. (I like this one because it requires no additional configuration, and even saves the checkout form fields if the page is accidentally refreshed.)
Activate the plugin.
You’re done.
That really is all there is to it, and from now on all your abandoned carts will be available in the dashboard under WooCommerce > Checkout Field Capture.
Now that we’ve captured our abandoned carts, how do we attempt to recover them?
Recovering Abandoned Carts
To recover an abandoned cart, we need to reach out to users and encourage them to return and complete the checkout process. The best channel to use is the one that is proven to be most effective: email.
There are several pros of using email to recover abandoned carts:
Lower costs—email is one of the cheapest ways to send a message;
Automation—email can be automated, and you can send personalized emails with little effort;
Design—email can be designed to convey emotions, and encourage sales;
Tracking—you can monitor and measure the success of your communications and tweak them to be more effective.
It’s worth remembering that there are also a couple of downsides:
Less persuasive—studies have shown that people over-estimate the effectiveness of email;
Spam—spam is a problem in email, and it’s easy for you message to be missed.
Writing Successful Abandoned Cart Recovery Emails
According to a study by Radicati, there are roughly 125 billion business emails sent and received each day. That is an enormous amount of information trying to influence us in different ways. What this means is that if we want to communicate successfully, we need to stand out; here are 7 tips to help you do just that:
1. First Impressions
We want our emails to be delivered and opened, this the the most essential aspect of our abandoned cart recovery workflow.
In many cases the subject and sender name are the only things visible to the recipient. A study by CMB shows that 64% of all users base their decision to open an email on the sender’s name, and 47% on the subject line.
A separate study by “Retention Science” found that 6–10 word long subject lines generate the highest email open rates. This is because short subjects are too brief to convey a message and long subjects get truncated.
Here are four real, excellent abandoned cart email subject lines that I’ve received:
“Hello, is it me you’re looking for?” (Lush Life)
“Complete Your Purchase” (Magic Madhouse)
“We’re holding this for you…” (Rip Curl)
“We saved your cart!” (Chewy.com)
Make your name and subject line clear. Stick to 6–10 words for the subject line.
Never use a “noreply@” email address for abandoned cart recovery; customers may have an issue that they need to talk to someone about in order to complete their purchase.
2. Timing
Timing is an essential element in your cart recovery process. Fortunately there are studies that have established the best time to send our cart recovery emails.
Send your email within an hour of the customer abandoning the cart, it is the most successful time for several reasons:
The email arrives before the customer has forgotten about the cart;
The customer hasn’t changed their “buying” mood;
The email arrives before the customer decides to purchase elsewhere.
3. Frequency & Content
We now know we need to send the first cart abandoned email within an hour, but did you know that if you send additional email reminders you greatly improve your chances of success? According to MailChimp you can earn 75% more revenue from abandoned carts by following up with a series of emails.
Here’s how to compose a series of emails:
Email 1—Sent within 1 hour. Be brief and informative. Showcase the product, and offer the customer a way of getting in touch if they had an issue with the site, the payment process, etc.
Email 2—Sent within 24 hours. Contain a product reminder. Include some related products in case the customer simply changed their mind, you might sell them a similar product instead.
Email 3—Sent within a few days. Try playing the urgency card by saying that the cart is about to expire. You might offer a discount for the user to complete the cart, but try to leave this several days or you risk making the product look over-priced.
You need to monitor your results and tailor this process for your business, because each industry is unique.
4. Stand Out
Be different. Experiment with copy and content. This can be hard for companies that are very strict about controlling their identity, but if you can do this, then please do. Don’t be like everyone else—exceptional advertisers capture attention. Dollar Shave Club do a great job here—they not only have clever copy but are also capitalizing on the emoji trend.
If possible, use animated Gif in your email. Since messaging and social media applications have integrated these animated images, their popularity has skyrocketed. Your abandoned cart recovery email with an animated Gif will definitely solicit attention.
(Note that not all email browsers support the animated Gif format, so the message must make sense without it.)
5. Personalization
If your abandoned cart recovery emails are automated—as they almost certainly will be—you are a little limited on the extent of tags that you can use, but you can still tailor the conversation using the recipient’s name; it helps to demonstrate that your message isn’t spam, and draws attention.
A study by “Retention Science” shows that the use of recipient’s first name in the subject line increases the open rate by almost 3%.
However, I must underline the importance of testing this one. As pointed out by MailChimp, you may see totally different results depending on a variety of factors.
6. Clear Copy & CTA
If you are sending out a message with an obvious goal, don’t try to hide it. Instead, highlight it, here are three simple rules to do just that:
Make sure you get to the point as early as possible and include your hook at the beginning;
Avoid sounding like a robot just sent out your email—use simple language, add some emojis to your message (that will brighten up the day );
I know this one is old, but people still do tend to underestimate the importance of Calls to Action. We must guide the user’s eye towards the button using good contrasts, font sizes and colors.
Bonus tip: If your email is longer, don’t be afraid to include multiple Call to Action buttons along the path. This will increase your chances of success.
7. Evaluate & Improve
I come from a digital agency background and know how quickly new projects arrive and are then passed by new ones. Rarely do we stop to assess and analyze the results to become better with our next projects.
This is a disaster since by doing so we are not evolving and improving, thus potentially spending more money in the future by repeating the same mistakes.
We have many different digital solutions to run tests, from A/B testing to real-life user tests. And I promise that this will not only be a very exciting and interesting process, but also will improve your sales results, and lower your expenses.
Wrapping Up
?Cart abandonment is an issue that can never be fully eliminated, but with a little effort you can transfer, at least a portion of your abandoned carts into orders.
rated after their first interview. Smart-screening: our algorithms automatically select the most appropriate testers for you. Custom screeners: add filters to your research criteria to ensure you’re speaking to the right people.
);