Home » WebDev

Category: WebDev

Using animations the wrong way

Website builders and new technology have made it super easy to add animations to your web pages. But just because you can do something doesn’t mean that you should.

When I first learned how to animate page elements, I wanted to animate everything. Make things flow, pop, fade in, fade out, create a dance on my webpage. In my mind, slick animations would make for a luxuriant experience and showcase how edgy my design is and how smart I am.

That theory quickly falls apart when you need to load a page often, and you have to wait for animations to kick in or finish, and everything seems to fly in all directions.

For movement to look good and guide the user, it needs to be choreographed, have a flow, and purpose: it needs to guide the user into experiencing your site. Otherwise, it quickly turns into jarring distractions!

There are two main uses of animation that make sense:

  • evoke a feeling or emotion
  • help increase your conversion rate that will turn visitors into customers.

The first use is very subjective, and I believe it is more art than science, and it takes study and practice to get it right. Just because you now have a video recorder on your phone does not make you a master motion picture creator. In the same way, just because you can animate things, it does not mean it’s easy to create a coherent storytelling experience. 

The second use, which is to increase conversions, I have much more experience with, and it is easier to measure and get right.

Here are the rules of animation

  1. Do not animate anything unless you know it will bring you closer to your goals.
  2. The animation must have a purpose. E.g., a blinking notification icon that needs the user’s attention; a sliding in and out navigation panel to will subtly inform the user where to go if they need to find the navigation element; a page transition animation that will hide a slow loading time keeping the user engaged with the page. 
  3. The animation must make sense. E.g., text flying in will undoubtedly grab the attention, but it is impossible to read until the animation ends.
  4. All the animations on the page must work together. They need to feel choreographed. So not only it’s more pleasing to the eye, but if done well, it shows to the user where everything is and how to navigate the site best.
  5. If your user notices the animation instead of the story you are trying to convey, you are doing it wrong.

Some good examples:

  • Apple products are great examples of animation done well. Both the website and the user interfaces on their devices. (At the moment of writing, there is no animation of the home page. As I said above, just because they can do it doesn’t mean they should do it!)
  • Displaying live data in animated charts can use good animation that makes it easier for the brain to digest what is changing. 
  • Navigation hints: new elements (like dialog boxes) slide in from the right, and when you dismiss them, they slide out to the left. New pages fade in. Notifications pop up. Using a consistent system like this allows our brains to quickly figure out what we are looking at just by how it is animated. 

Keep performance in mind.

Animation requires more resources in both bandwidth and processing power. In addition, page speed affects conversion rates. Therefore, if you choose to animate, make sure it will not affect your loading times and works fast enough on older devices.

Resources

Audit your website animations and keep only those that get you closer to your goals.

New Paradigm Tools for Online Businesses

Tools for the New Paradigm Online Presence

Tools for the New Paradigm Online Presence

A curated list by the Spiritual Software Engineer

Updated: May 2021

Analytics Tools

Goolge Analytics – free, but you pay with your data. I still use this one, just because they are really good and what they do.

Mamoto – is free but you need tech skills to install.

Scheduling Platforms

Full disclosure: I am getting out of Facebook and friends. Moving to Telegram, MeWe, and other alternatives. But if you still plan to use Facebook, read on.

I do social media once a week. My motto is to empower those who visit Inelia’s page. I rarely see anything else on social media. I have saved links to go straight to the pages I want to, so I avoid seeing what “the algorithm thinks I should see”.

For this to work and still be active throughout the week I use scheduling tools.

TweekDeck – by Twiter for Twitter

Facebook Creator Studio – by Facebook for Facebook and Instagram

YouTube uploads have a scheduling feature when posting videos

Buffer – you can use one tool to post everywhere – I have some issues with this platform

Hootsuite –  similar to Buffer above, you can post from one place to multiple platforms. Used to have a clunky interface, I have not looked at it in the past 2-3 years.

TailwindApp – I use this for Instagram. The reason I keep using them is because of their analytics capabilities, but most of all they have a feature to suggest “relevant hashtags” that I find very helpful. This is a paid service.

Newsletter Service

MailChimp – as long as you don’t talk about vaccines you’re fine. Otherwise, you will get kicked out. Make sure you export your list once a week so you don’t lose your subscribers. This is a really powerful tool, but they did not choose our paradigm.

SendInBlue – has a nice free plan that can get you started. The interface is a bit slow, but I use it for personal projects where I am not sure if I will make money.

AWeber.com – next best from AWeber. It does the job, but not as easy to integrate with a website like MailChimp is.

There are other alternatives here, but in my mind, they are for medium to large businesses, not really for startups.

Backup Services

I use my own tools here. But here are some guiding principles.

You need to backup:

  • your content – keep copies of what you write/create/record on your computer as well – not just online
  • your email subscribers – export your list once a week and keep a backup on your computer
  • your website – do a full backup 2 – 3 times per year. If you have your content backed up and your list then you can rebuild the site even if you lose it completely. For more active businesses you need to backup more often.

The location of your backup is important. If you backup your site and store the backup on the site server, that will also be lost if your site is hacked or the server crashes. Backups should not be kept next to the original data. Ideally, you store the backup data, encrypted in a cloud storage service. See next.

Cloud services for backup

Cloud services allow you to share files across devices and, important for me, allow me to work on my stuff on any computer that has an internet connection. It is like a portable “hard drive”.

Google Drive – It’s Google, so privacy is an issue

Dropbox – This is the one I use with a good experience so far.

OneDrive – Microsft – well, it’s Microsoft.

NextCloud – I hear good things about it, related to privacy, but I have never used it

FTP Uploaders

This is relevant mostly for WordPress. All other website builders generally feature a drag and drop upload feature.

FileZilla is your friend here. I have been using it on Windows for more than 15 years, and I see they have a Mac version as well

Hosting companies

This is relevant only if you want to have a WordPress site that you would like to host on your server. If not, skip ahead.

SiteGround (affiliate link) – this is the one I use and recommend to everyone. They are not the cheapest, but they have good support and that is a must even for someone technical like me. Also, their email function is working properly. (UPDATE in May 2021: I have had some trouble with their support lately, but their performance and speed are still the best I could find, so I am still using them.)

Stay AWAY from these guys. Despite being voted “The BEST of 2020” by CNET.com, they offer really bad service and support.

  • HostGator – used to be a big fan of them, but they lost their ways
  • BlueHost – really bad
  • GoDaddy – really bad
  • Site5 – we used to be really good, but no longer an option
  • Dreamhost – bad

All these options are very cheap, but that means they had to cut corners. You will pay more in time lost and having to hire a dev since their support is non-responsive (or incompetent).

If you want to build a business and not a hobby, do not buy a “shared hosting plan”. You will share the server with other people you have no control over and that will affect your reputation and the performance of your site. So make sure when you budget your business that you include the costs for good hosting.

Site builders

WordPress.com – you can create a website for free, but with some limitations and not able to use your own domain. See this as an example of this working:

https://laurabruno.wordpress.com/  (UPDATE May 2021: I no longer recommend WordPress for people starting out, because it is too technical, too easy to mess up, too hard to get the site to be fast)

WIX – they say you can create a free site (but I did not find the option yet). This used to be bad, but right now it looks really, really good. They have evolved! – See this example. (I think that on the free plan you need to keep the Wix brand at the top). If top performance is important for your business, then look at Squarespace instead.

SquareSpace – more professional than WIX in my estimation. I know good examples of businesses built on Squarespace. Better overall performance. Integrates with Shopify for an online store.

Kajabi – a great “all in one platform” if you’re selling your knowledge: courses, videos, tutorials. The great thing about it is you just pay them and they handle email, hosting, security, subscriptions, payments. I am a student in Kajabi powered sites and I like the experience. I have not used it myself to build a business and if I were to choose it I would inquire about the possibility to export my data and move elsewhere if I want to. In other words, I need to make sure I own the business I build and I can use the email list I build without restrictions.

Landing pages – These can be a powerful idea when you’re just starting and you need to keep an eye on your budget. Ideal for simple tests, for building an email list, for getting feedback on a service you want to launch. Instead of building a full website, instead, you have just a page that is hyper-focused on one goal. This hyper-focus is a good thing. Look for tools that offer analytics so you know how well your page is doing and that they work on mobile. Both AWeber and MailChimp allow you to build simple landing pages with their paid subscriptions. For more options look into dedicated services.

Teachable, Shopify and Etsy – if you know you are going to teach something, or sell a product. These are built to help you get your business going and take away the problems with setting up payments and configuring a store and so on. If you are really serious about starting a business these are the ones I would recommend.

A note about Etsy:
Unlike Teachable and Shopify where you can build a business, Etsy is a good place to start, but it is not enough just by itself. Mainly because on Etsy you are building their brand and not yours, and you are also in instant competition with the entire Etsy audience. That is both good (there is an audience!) and bad (as it may be hard to get known).

WordPress Themes

I think it helps to learn how to think about choosing a theme before I actually tell you which theme to choose 😁.

Since this tools set is focused on building a business, this means your theme needs to support a store, in this case: WooCommerce. It also needs to be mobile-friendly (it is called: “responsive”). It needs to play well with social media. And it needs to be fast/high performance.

Some readers will notice that I did not say it needs to be “pretty”, and that is on purpose, as we are focusing on the customers and making their experience a good one while using the website.

I almost never choose a theme based on the colors or the images or the layout with one very, very rare exception: the theme matches the criteria above and it’s a perfect fit for what I have in mind!

I much rather prefer a theme that is easy to customize than one that is “ready-made” but almost impossible to change after you install it. This is because as you grow and you get to know your audience better, you want to be able to make incremental changes to how your website looks, or even a complete redesign, without having to purchase another theme.

My Recommendation

UPDATED May 2021: Because of big performance issues with Divi I no longer recommend them. What I now use is the pro theme from GeneratePress. They are blazing fast and play nice with other performance-related plugins.

I am no longer recommending anything else. Why? Because as of May 2021, Google uses our site speed as a factor in their ranking algorithm as well as how nice the pages load and function on mobile devices. So it does not matter how pretty and well designed your site is, if it’s not fast and it’s not mobile-friendly it will not matter.

Unless you can afford to hire a good performance-oriented developer, just get GeneratePress.

WordPress plugins

There are a few WordPress plugins that I install all the time on any new WordPress project:

  • WP Forms – for contact forms and other intake forms. (If you care about performance stay away from Contact Form 7)
  • WPS Hide Login – helps with site security by hiding the default login page
  • All In One WP Security – for securing your WordPress install against hacking. Please note that on projects where I need top performance I am no longer using this plugin.
  • Yoast SEO – the free edition – gets your website ready to be indexed by Google in a fairly easy way. When you generate money with the website it is worth geting their PRO version.
  • WP Mail SMTP – a wpforms product – I will install this if the website cannot send email. It allows you to configure in a much more flexible and advanced way how email is sent and also to do tests. (Do not use Easy STMP as it has security problems)
  • WooCommerce – if you plan to make this a business this will be the plugin to use to sell things. This is a powerful tool, but rather hard to configure, and the free version, while it works, it lacks many of the things that make an excellent store. If you lack the tech skills you will be much better off building your store on Shopify.
  • EasyDigitalDownloads – this is an alternative to WooCommerce if you are sure you will sell only digital products. Since there is no shipping required, a plugin optimized for digital delivery can do a much better job than a plugin that needs to be more general.

LIVE Streaming: Events, Webinars, Workshops

Workshop – means you need live interactions from your participants.

Webinar – means you are talking to people, but they cannot talk back, at most they ask questions via text chat

Events – You LIVE stream something that you do – like a webinar, but maybe you don’t stay in front of the computer if you’re streaming a Yoga glass (for example).

Zoom – workshops, webinars, events.

  • PRO: easy to use, most everyone knows how to use it by now, good quality for the streaming
  • CONS: you need to pay for meetings longer than one hour, and if privacy is a concern, they don’t do very well, even if they claim “end-to-end” encryption

Google Meet – workshops, webinars, events

  • PRO: easy to use, good quality, integrates seamlessly with Google Calendar, and it’s free
  • CONS: it’s Google, you need a google account with them, so you get all the related privacy issues.

Facebook Live, YouTube Live, InstaTV – webinars

  • PRO: free (just as Google is free), easy to set up, it’s “trendy”, people in your audience will get notified about you without having to do anything special
  • CONS: comments are very hard to manage, especially in a solo operation, does not look very “professional”

Team Communication

Slack – instead of communicating via email, it is more effective to use a tool like Slack. This way you can organize the communication in channels of interest, and get notified about only the important stuff, and also be able to search your older messages. You need to have been part of a team with more than 3 people to understand the power of this tool. It’s free with some limitations, after a while you can no longer search older messages unless you pay. The paid version is not cheap.

Discord – is like Slack, but it was designed for gamers. The big advantage is that it is free (last time I checked). The biggest drawbacks are the name itself and being game-oriented, which can be a put-off when you want to do “work”.

Circle.so – a new kid on the block, shows promise and it is more intuitive to use than Slack or Discord.

Telegram Groups – it’s like Whatsapp but NOT from Facebook, so for now it has better privacy. It will work for small teams and small projects, but if your team grows you will need to move to Slack or Discord.

Screen Capture

ManyCam – the paid version – is what I use to record my screen, to create “picture-in-picture” images, to color correct my image, to LIVE stream to YouTube and Facebook at the same time. This is a very powerful and versatile app and if your business requires teaching through video, or doing live casts it is worth the time and money invested in learning this tool.

There are free alternatives, but I find that a paid software not only saves you time but also makes you look more professional.

Video Editing Tools

Video Editing is a complex process, but I will focus here on cutting, trimming, adding intro and outro, and logo overlays.

DaVinci Resolve – is the tool I use most often. The free version is powerful enough for what I need it to do. The UI is pretty complex, and I suggest watching a YouTube tutorial before trying to work with it so you don’t feel lost. The good news is that once you learn the process for your workflow, it’s pretty easy and fast.

HitFilm Express – is the tool that I used before Resolve (above). It is somewhat simpler to use, but it lacks some more advanced features that I needed. This also has a complex user interface, but there are tutorials about it.

Note about video: video is a complex system to present media. It has the visual component, but also the audio track and it can have subtitles. Videos can have hundreds of formats, each with its own settings and parameters and that can be utterly confusing. If you plan to work with video it is worth the time and the money to have someone teach you a process for what you need, or else you might get lost in the hundreds of options available. Resist the urge to become a video editor, unless that is actually your business. Hire help or buy focused tools. You will make your money back.

YouTube had some video editing capabilities that most people will find good enough when they start.

Image editors for Social Media

I use Photoshop for my Social Media posts, but it’s unrealistic to expect someone to learn this tool unless they are passionate about it. Seriously, unless you’re into photography, learning Photoshop can be a massive waste of time better spent focusing on your business.

Therefore the tool I recommend now is Canva. They make it super easy to create images for social media, providing templates and the correct sizes that you should be working on. And the fact that you can collaborate on your designs is a big plus!

PRO Tip: If you like someone’s presence on Social Media reach out and ask them what tool/process they use. You will find some gems.

Free High-Quality Images

Unsplash – This is the place I use most often.

Pixabay – This is the place I go to when I can’t find what I need on Unsplash. Be careful with Pixabay, I have had complaints with images from them that were not actually free to use.

Your own photography – if you’re so inclined and have a good enough phone, your own images can go a long way, since they will be unique and feel more authentic. However, taking good pictures is a skill in itself so balance this with your need to look professional.

Once you have a business that is working and the branding becomes important, you will want to invest in paid images, since almost everyone is using Unsplash these days. Look at places like Shutterstock, Dreamstime, iStock.

Hire Help

Fiverr – many vendors, you need to shop around to find someone who is a good fit. A lot of them are really bad. My own experience with Fiverr is: don’t go for the cheapest option, and be ready to hire 2-3 people for the same job, and chose the one that is the best.

UpWork – unlike Fiverr where you search for a vendor, on UpWork you post a job and allow vendors to find and bid for your project. Because the payment method was blocked in Romania I could not use them, but from other sources, I hear the quality of work is better than Fiverr.

99Designs  – this is targeted specifically towards design: be it logos, websites, or brochures.

Hire a consultant for a strategy session. It is worth spending an hour with someone competent to draw a map for you to follow. You will save both time and money.

Image Resizer

Using images that are way too big for your website can slow down the loading time, especially on mobile. While performance optimization is a long and complex discussion, you can get to some low-hanging fruit, by properly resizing your images.

The tool I suggest is here is “Image Resizer” because it’s super easy and a 1, 2, 3 step process. I don’t personally use this tool very often because I have similar options in Photoshop, but the advantage of this tool is that is available everywhere and it works and you don’t need to learn anything.

OptIn Popups

I don’t like OptIn popups but the data suggest that they work in getting people to subscribe to your newsletter.

The providers I have used are:

Mailmunch – they have a free plan (branded), and they integrate easily with WordPress. I just noticed that in their paid plans you have landing pages and email marketing. That could save you some money when you first start testing things online.

OptInMonster – they don’t have a free plan, but they come highly recommended as a mature product. Unless there is a clear indication that this is a better fit for you than MailMunch, I would not use this one.

Podcasting Platforms

There is some tech required to record and edit the audio file for your podcast and that is not what I am addressing here.

I am talking here about the place that will store your audio files, and podcast information and will allow you to link it to podcast syndication platforms like iTunes or Google Podcasts.

Transistor.fm – is the tool that I recommend. It is not free, but it’s well worth the money. I have tried to “do my own thing” and host the podcast files myself, but it takes so much time to do it right, that it’s best to pay someone to do it for you in a professional way.

Payment Processors

PayPal – everyone knows about PayPal. Some customers don’t trust PayPal and in the past, there were issues with accessing your funds. To be fair I’ve seen no problems in the past 2 years with access to funds.

Stripe – is the main PayPal competitor and worth checking out. As far as I know, they allow for a smoother and more customized checkout experience which will influence your cart abandonment rates.

SquareUp – I have not used this one but it comes highly recommended.

Things to keep in mind:

  • Is this tool available in your country?
  • How do they help you with your tax documents?
  • How fast can you access your money?
  • How do they process refunds (is there a fee)?
  • Do they have an easy checkout experience?
  • Do they accept credit cards?

Let me know if you have questions about any of these or you’d like more specific details.

Don’t build a website. Build a sales funnel!

This title caught my eye on the web. I have been thinking about it ever since.

It is a brilliant title because it immediately shifts your thinking about what you are building and for whom. 

When you are setting out to build a website before you answer the tough questions of what’s it for and who’s it for, you will be staring at a blank canvas, not knowing where to start, what should be at the bottom, and what are the items that you should have in the navigation. 

But if instead, you focus on building a sales funnel, everything suddenly snaps into focus. 

Sales funnels have a particular purpose: to convert an interested visitor into a customer. 

They accomplish this by guiding your visitor through a journey, from being interested, to being inspired, then making a purchase, and being a happy customer. 

And this journey could happen on your site, via email, or social media. 

Simply by reading the three paragraphs above, you have a much better idea of what your initial page should have on it: for sure, you need a way to capture that customer’s email so they can get on the journey. And you may not even need to have a top-navigation on that page! 

What if you build your website in a very purposeful way, where each page and each component of a page needs to have a business reason for being there? Would you do away will all the fluff? Will you focus on what your audience needs instead of what everyone else is doing?

If money were not an issue

What would you do if you had an unlimited budget?

Answering this question is a very useful exercise to see what you could get for your online presence if you had an unlimited budget.

To make it easier to digest, I will divide this exploration into a couple of categories.

 

Performance

Load balancers – for high traffic websites – make sure your customers don’t have to wait around for your pages to load.

Performance Optimization – when you need to shave off every millisecond – load speed affects conversions, making sense to have software that is as fast as possible. Performance optimization is very broad and includes items like code optimization, caching, content delivery networks, and load balancers.

Accelerated Mobile Pages – important if you care about SEO and traffic that Google sends your way. They provide a significant speed improvement, and with fast loading times, conversions also increase. This optimization works best for publishers and less for eCommerce sites.

 

Marketing and User Experience (UX)

Sales Funnels – use automatic email series to keep the conversation going with your prospects. And with conditional logic, you can tailor this conversation for each individual, so they don’t have to read through the material that is not relevant to them.

Chatbot and chat agent – leverage the power of AI to answer common questions for your visitors and customers. This bot, however, will not replace good support staff that can connect with the person on the other line. But it will offload some of the frequent questions.

Affiliate Program – selling is the most challenging process in a company, but it’s the only one that generates revenue. An affiliate program is a straightforward way to recruit a sales force that will work for you.

Correct Metadata – use the correct Metadata for your pages, making it easier to share content around social media and various content aggregators. Your content will not be noticed when placed next to someone doing a fantastic job with their meta tags if you ignore this.

Conversion tracking – if you do not set up goals and do not track how well they are doing, you will have no way of knowing what works. Every new decision will be a “wild guess” instead of an informed one. You can set up tracking using tools like Google Analytics, Facebook pixel, and in-house software.

Email Deliverability – you can be the best copywriter in the world. It will not help you if your users never get your email. Choose a good delivery service and configure things like DKIM and SPF correctly.

Advanced SEO – most modern publishing tools have built-in SEO helpers, but in some cases, more advanced tactics are needed to get that ranking you are looking for.

A/B Testing – it is best to make a decision based on your audience’s real data when possible. A/B testing helps you fine-tune your design and messaging for better conversions.

The user journey – how do people use your product or service? What can you improve that experience? The user journey experience can help you fine-tune the user experience, increasing both conversions and customer satisfaction.

 

Branding and Design

Intuitive Search – for content-heavy websites, like community forums, course libraries, and educational websites, a powerful search engine makes the difference between high engagement or content lost in inaccessible parts of your site. Most public websites rely on Google search to solve this issue for them, but what do you do if your content is private, behind a paywall? The tool to use here is Elastic Search.

Accessibility – make sure that people with disabilities can use your services. It’s not only a legal requirement in some countries, but it is also the right thing to do.

Companion App for iOS and Android – a companion app, if done right, can unlock new ways to interact with your customers and add value to them. Sometimes this is just a mobile site packed as an app. Still, a better experience is to take advantage of the many sensors on portable devices and create a unique and valuable experience.

Streamlined Checkout – don’t ask for a ton of information if all you need is an email address to deliver the digital products. There will be plenty of opportunities to collect other details later on. A streamlined checkout experience can significantly reduce the shopping cart abandonment rate.

Mobile Optimization – this term is a bit of a misnomer since you should think “mobile-first” and optimize for desktop later. But I am adding this here just in case it is not clear to you that more than half of traffic comes from mobile. Also, mobile does not mean only “small screens.” It means access to a camera, sensors, and information that you can use to create an experience that would not be possible on a desktop.

Style Guides – use style guides to ensure your look stays consistent across channels in interactions with your customers.

 

Insurance (backup and testing)

Testing – tests provide no direct benefit to either your customers or you, the website owner. Because of that, they are easily overlooked or done wrong. A broken or buggy process can cost you a fortune in lost revenue. Do your tests, and do them right. Follow this advice, and you don’t have to hope it will work; you know it will work.

  • Automated end-to-end tests – Don’t wait for a visitor to take the time to report a problem. Instead, have automated scripts that test the business-critical processes daily and immediately notify you when something breaks.
  • Stress tests – The fact that your home page feels snappy when you are the only one using it does not mean much. How will your infrastructure handle a spike in traffic? Especially in situations where you know a marketing promo will hit? Do you have auto-scale enabled? How far up should you scale? Stress tests can surface problems that only show up in high traffic situations, and they will also give you numbers you can work with when choosing the server specifications. High traffic can potentially mean lots of conversions. But it can also mean zero conversions if your server keeps crashing. That’s both revenue lost and marketing money wasted on a campaign that went nowhere.
  • Penetration tests – A good-looking snappy page is not necessarily secure. A security audit and penetration tests allow you to discover security holes and fix them before a bad actor abuses them.

GDPR compliance – obey the law. It’s cheaper than paying fines. And with a clear design, it does not have to look bad.

Resilient Design – with progressive enhancements – this is a way to future proof your web application by assuming that new technologies will emerge, so you plan to support those while not abandoning your old customer base.

Automated Backups – are the best insurance policy against data loss and security vulnerabilities. They need to be automated, so you don’t forget. And you need to test them to make sure they work.

 

Integration and Automation

Data import, export, and migration – having this in place helps you avoid lock-ins with a particular technology and provider. And it also opens up many integration possibilities with third-party tools. Being flexible makes you resilient.

Interoperability – how well do you play with others? Publishing clear and useful APIs can help increase the adoption of your service. It also increases the chance of your services being integrated and creating value in a way that you cannot foresee right now. Add artificial intelligence to the mix, and it can get exciting.

Automated email processing – for things like creating a support ticket for each email sent to a support address. Or use it for triggering processes in automated processes or for publishing content from your phone.

Support Ticket System – responding to support via email and not using a system is comfortable and easy but will hurt you in the long run. It will be impossible to track what was said to whom, and issues will fall through the cracks. Also, customers expect a premium brand to have a professional support system.

Single Sign-On – is a way to allow your users to log in once and then get access to all the relevant applications. When a visitor can signup with Google or Facebook, it reduces the friction of taking action, and it offloads the concern of storing a password to the identity provider. But be careful though, make sure your users can still log in even if they lose access to their email and that you own your audience, not the identity provider.

Administrative Dashboards – are dedicated applications or pages that will give you an overview of how your website performs. How are your metrics doing, and what are the outstanding issues.

RSS Feed – a free way to make your content discoverable and accessible for anyone interested. I believe this is an undervalued and underused feature. It allows your readers to stay in direct touch with you, and you don’t have to pay for a newsletter service or boost your posts. RSS is the readers’ equivalent for podcasts (and they use, in fact, the same technology).

Web Push – the ability to send web notifications to your users, even if they have closed your website. It is still new, and it still has impressive conversion rates. (At the moment, it only works on desktop browsers and Android). Don’t be spammy, though, as the users can block them with a click, and getting unblocked is not very easy.

Scheduled tasks – send daily reports, check website integrity, run maintenance tasks. Anything that you find yourself regularly doing should be programmed in as a scheduled task, especially backups. You can use cron jobs or an automation platform like Zapier for these.

Automatic content distribution – you don’t have to share your content on all the social media accounts manually. You can, and you should use tools that do this automatically.

 

Security

Security Audit – a security audit can help uncover problems that can only be discovered by looking at your code and software, and hardware architecture. This audit becomes crucial if you deal with very sensitive data, and a breach would cost you more than having regular security audits and penetration testing.

Although important, nobody likes tests!

I should not have to write this, but testing your web application is very important, especially if you care about your brand being perceived as premium. 

And by testing, I don’t mean “does my homepage load fine?”. I mean the comprehensive end-to-end testing and stress tests to ensure your app still works when that marketing campaign hits. 

Even though good tests are essential in the quality assurance process, I have seen websites and applications that do not fail gracefully, with a friendly error message that explains what happened and offers a way to move forward.

Many software workflows attempt to convince the developer to test first or make sure their code is testable, but most developers do not use them. 

I thought about it, and I believe I found the reasons. 

Nobody likes tests because:

  1.  they are boring to write
  2.  it is not easy to write code that is testable – you need a specific mindset
  3.  they offer zero visual feedback to the paying customer – so in that sense, it is invisible thankless work
  4.  they need to be maintained along with the code base that does something 

Tests are a tough sell to both developers and their clients. Most often than not, we proceed with the attitude: “we will fix it when someone complains!”

On this blog, I care a lot about value. And from that perspective, I will say this: no client will ever come to you and say, “I need a website that will require about 20,000 tests for a code coverage of 90%”. Tests have zero value to them. Instead, they need a solution to a real problem, like: 

  • They need to build a premium brand. 
  • They want to sleep well at night, having confidence that the vast majority of the app functionality works and will continue to work even under stress. 
  • They need actionable data to help them decide where to move next with their web application: what is the bottleneck in performance? What is hurting conversions? 

These are all items the client cares about, and a possible solution is to write tests. But what you are selling is peace of mind, not code coverage. 

And yes, in some cases, especially for MVPs, tests are not essential for the bottom line, and so even if you know they are important in the QA process, that may come later once the product proved to be a hit. 

As a developer, I would get into the practice of doing tests and writing testable code. It is an excellent skill to have when things change faster and faster, and interoperability creates more complex systems. 

And as a client, I would put some monetary value on my peace of mind and knowing the app won’t break and see what solutions I can buy for that budget. 

 

Spiritual Software Engineer

Improve your website performance by separating concerns

The problem

I have a slow WordPress site that will resist all optimization attempts.

What is the most common advice you get for speeding up a WordPress site? 

  • remove unused plugins
  • update all the software
  • use the latest version of PHP 7
  • install a caching plugin

This list is all good advice and things to reach for first, but what do you do when your WordPress install still takes 13 seconds to load a page, even after all the optimization is done?

In my case, the problem was that the website was trying to do too many things. And the optimizations above did not help much. 

Here is what I mean:

  • the website had multi-language support
  • contact forms done with Contact Form 7
  • subscribe popups using NinjaPopus
  • animated sliders on the homepage
  • hundreds of blog posts
  • a WooCommerce store 

Because of how WordPress works, all items were loaded, regardless of the page you were looking at. The multi-language setup was not working well with the caching system. And I could not uninstall any of the plugins because all of them were needed somewhere. WordPress does not do selective plugin loading.

It drove me crazy that I would need to wait 13 seconds to open up a blog post that would request hundreds of resources (CSS and JS) that it did not need. It was a page with one image and some text but a truckload of “invisible add-ons.” This page should load in milliseconds!

Some have suggested writing yet another plugin to remove the unnecessary scripts from the pages that don’t use them. I understand how that would improve the loading time, but on principle, I don’t want to have code that adds stuff, so then I can immediately remove it a few microseconds later. That’s just bad practice. 

I came up with the solution to split the site into two: one for the simple blog and one for the store. I also dropped multi-language support. 

The Pros

  1. The blog is made up of static pages – so you can deploy very effective and aggressive caching.
  2. I could also split the plugins – there was no need for the blog to load all the WooCommerce code.
  3. The store site could focus better on selling and keeping the buying experience smooth. 
  4. The improvement in performance was dramatic, as I could now optimize each part independently, without conflicts
  5. A bonus side effect is that I can now work on the blog and not worry that the store will be affected and vice-versa.

The Cons

  1. There are now two websites to maintain and think about.
  2. They need to look the same in design, so they feel part of a whole.
  3. The search function is now limited – it either returns post or products – depending on where you are using it.
  4. Tracking the user activity is more complicated.
  5. Adding multi-language support means adding a new site for each language – which does not make business sense right now.

There is an obvious trade-off here. There are more pieces to take care of, but you get to optimize each one individually and fine-tune them for their specific purpose. 

In Conclusion 

If the common performance tunning is not doing much for you, maybe the structure you have is too complex, and your website would benefit from being spit up into smaller but more effective pieces. Of course, this effort only makes sense if having fast loading pages is essential to your business. 

How to bring Life to a Large Content Library on Consciousness and Metaphysics

I am studying various membership offerings on websites related to consciousness, metaphysics, and related topics. 

What I have seen so far is what I call the “data dump!”

After you purchase your membership, you are presented with an overwhelming list of items you can study. Sometimes they are organized in various categories. Other times, they are not. 

This kind of library poses a few problems:

1. It just feels overwhelming. Where do you start? What should you look at next?

2. When the library is full of audio and video material, it is not searchable. And I don’t want to look at a two-hour video to realize that it was not the information I wanted. 

3. If this library is behind a paid membership, there is little incentive for users to keep their membership. The exception here is when new content is added, so the member hand around for that. But it still leaves a ton of old content dead in the water. 

We Can Do Better

I have some ideas on tackling these issues, but I confess I have not seen them implemented yet. 

1. Where do you start? 

The library should have a roadmap, with a clear START HERE sign. Everyone new will appreciate this: one button, instead of hundreds of items to choose from. Of course, this works if each item has a “Go here next” button. You are creating a pathway through your library, guiding your reader. 

To take this to the next level, the new members can take a quick quiz at the “START HERE” landmark, based on which they will get a different pathway that will better suit their interest. I think this makes the library much more valuable. 

A notable mention here is the content drip approach. I am not a big fan of this because I like to move at my own speed and jump around if I want to. That being said, even content-drip is better than no deliver strategy.

2. Making the video and audio search-able. 

Each video and audio should have a description with time indexes describing what is going on: topics addressed, questions answered, resources, etc. If you did not do this for each video or audio as you have created it, you are faced with a considerable task 5 years later. 

Soon, artificial intelligence will come to the rescue, but until then, you could hire someone, or more than one, to go through the videos and create these indexes for you. You can find people willing to help on Fiverr, but be ready to spend some money. For a paid membership, you should be able to recoup the expense quickly, and it will significantly increase the library’s value!

3. Reviving old content

A spiritual library never gets truly old. Usually, the information is timeless, and it can help new and old members alike. But new members are not likely to dig around in the past five years, especially when new content is being added each month or each week. 

A pathway through the library will help. Making the content searchable will also expose some gems. But you can take this much further with automatic semi-random content delivery. 

Here is what I mean: 

Each week send an automated email to your membership suggesting one of the library items and the notes associated with it and invite the members to study it. If you have to pick this by hand, it may be too much work; therefore, you should select one semi-randomly. Semi-randomly means that you will use a quiz or use historical data to determine your members’ interests. And you randomly choose items that they did not see yet but might be interested to see. 

Such a message will be highly relevant. Of course, it requires some creative technical solutions to segment your audience based on interests. Either your newsletter provider can do that, or a piece of code on your software could handle this. 

Imagine how much more valuable the old content suddenly becomes and how much better you serve your audience! 

4. And a bonus: create a community around the library.

It’s much more engaging to comment on something and have a discussion around an item with your peers. You can ask questions if you need more clarity, or you can be generous and help others understand or point them in the right direction. 

A community will take care of this. A basic comment feature under each library item is ok, but a forum is much better as it allows your members to create new topics that maybe you did not think of.

Can you think of more?

If you have other ideas on making a spiritual library more “alive”, I am very interested to know. Reach out!

Still not using Log Files in your app?

Have you ever had to contact support for a web app or a plugin to fix a problem, and the first thing they ask is for full access to your web server so they can “debug” the issue? 

This request frustrates me to no end. 

It is unprofessional, and it is lazy. 

The reason support asks for this is so they can run tests and inspect the results on your LIVE server. If that makes you nervous, it should! How can you know that they will not accidentally mess with your customers’ data? Not to mention all the privacy issues that crop up as soon as you hand your keys to a third party with no control. 

A proper way to deal with providing support for your app or your plugin is to add logs—a log file journals the activity and the data passing through your code. Inspecting a good log file will almost always let you know what the problem is and where the problem is. When a customer calls you for support, you only need to ask for the log files, not the keys to the server. 

In my experience, a good log file creates a breadcrumb trail that documents the data flow and the branching decisions in your code. Ideally, inspecting the log file alongside your code allows you to precisely follow along and determine what was wrong, without even having to run any code. 

A common mistake is to be unnecessarily verbose while at the same time not documenting the branching decisions. Silently discarded errors and exceptions are the usual pitfalls, and close second are if/else branches where only one of them leaves in a mark in the log. 

Security and Privacy

Now that you understand why log files are a must, especially in a client-server situation (like all the web applications), you need to be careful not to store sensitive data into the log file. Don’t store passwords or credit card numbers, and unless absolutely necessary, do not store emails. 

If sensitive data is required for you to be able to rebuild the data flow, make that available under a specific “log level” that is only activated on request. And in some cases, the entire log system can be activated only when trying to debug a problem. With this approach, however, you lose historical data that you need to fix the problem.

Always provide a way for an admin to flush the logs. 

Rolling Over

I am an overly enthusiastic user of log files. Simply because they work, and they speed up the process of solving problems. But there is a mistake that I kept doing for far too long. That mistake was no automatic rolling of the log files. What that meant is that the logs grew and grew until they would eat up all the allocated disk space. 

Oopsy! 

When using log files, decide when a log entry is too old and have an automated mechanism to remove those logs. Rolling the log files once a month (log1, log2, log3, etc.) and removing the very old files is a useful approach. 

If you don’t currently use log files, what is your strategy to support and debug your application while it is running on the customer’s LIVE server? I hope you will not say: “get root access and hack away until I find the bug” 🙂

Resilient Web Design

The things that stood the test of time had a solid clear foundation than we could later build or improve upon. They strived to make the least amount of assumptions. This approach allowed for future ideas that no one would be able to predict, to still connect with the solid base. 

Resilient Web Design strives to provide just that: a set of guiding principles to create web designs that will still work even if we don’t know how the screen of the future will look like. 

We used to have small desktop screens, then bigger ones, and now huge ones. Then all of a sudden, in came the mobile devices, then tablet devices. 

We are clueless

You have to embrace the idea that you have no clue what kind of screen size will be used to consume your content. 

And this is what Resilient Web Design is all about. 

You no longer design for a specific target screen size and “(kind of) fix it” for the rest. 

Your first media query is no media query. Your HTML content is responsive by default, with no need for CSS. This responsiveness has always been there, but the power of this feature is only now becoming evident. 

We have been designing the web “backward” making arbitrary assumptions about the browser’s viewport size. This way of design is the bias we have been dragging around from the design on paper, and it is so ingrained that we don’t see it. The new reality is that you can no longer know ahead of time the width and the height of the canvas used to present your content. 

That can be scary, but also freeing. And as a creative, it is a problem that can be solved by design and that, I imagine, should excite you!

For a long time, I thought that because browsers are so forgiving with the HTML and CSS syntax, they encouraged poor code and allowed both developers and designs not to use standards. I wanted the browser to cry foul and reject any page that errors in the code. This behavior would force the creators of that page to fix it! And “get it right!” 

I see now that browsers being so forgiving allowed for massive innovation and flexibility. By being lax with errors, old browsers would not choke on new features being added later on in the future. This approach has allowed the web to grow as innovative and fast as we see today. And perhaps we should adopt a similar mindset in all the systems we design. Like Poste’s Law:

“Be conservative in what you send; be liberal in what you accept.”

Converting your content into a web app, which requires Javascript, may also not be a good idea, as it departs from the lax treatment of errors. If your Jave Script code does not load or execute for any of the many reasons, your users will look at a blank page. 

The solution that Resilient Web Design proposed to this is “Progressive enhancement.”

With this concept you provide a minimum viable experience, that you will build upon (enhance) using feature detection (NOT browser detection) and the lax way that browsers treat new code, to improve the experience that the end-user is having. 

Using feature detection means that your design will NOT look the same for everyone. I cringe and this thought, but relinquishing control enables everyone to consume the content, and enables some to take advantage of brand new browsers and features. It is a win-win situation. You don’t design for IE6 only because some of your userbases may still be using. Yet, at the same time, you don’t ignore that audience by assuming that everyone is running the latest version of your favorite browser. 

“If a website looks the same on a ten‐year old browser as it does in the newest devices, then it probably isn’t taking advantage of the great flexibility that the web offers.” (Resilient Web Design)

If this way of thinking inspires you, then you should read: Resilient Web Design and deeply ponder how you can implement the principles in that book into your systems. If you already used this in your design, I’d love to see it applied. Please post a link in the comments.

Automated “downtime” alerts

Do you know that frustrating moment when you realize that your website has been offline for three days? Or that your shopping cart stopped working last week? 

That moment is also valuable because you now know that something is broken, so now you can fix it. But at the same time, you wish you learned of this faster!

On a community website, this may not be an issue, as your users will let you know when the site is broken, but that is not the case for a blog, or an online store, or a landing page that is collecting leads. 

You could set a daily reminder to check things are OK, but that will chip away at your precious time, and it quickly becomes boring, so you will begin to forget to do it or begin to think that you don’t have to monitor the website anymore. 

I am all about automation, so let’s automate this! 

Google Analytics

The easiest way that is also free is to use Custom Alerts from Google Analytics. The logic is simple. You have an expected value of daily traffic (based on historical data), so you create a custom alert to let you know if it drops below that. Of course, you need to have Google Analytics installed on your pages for this to work. 

Pingdom

Another way is to use a tool like Pingdom. I have used them for a long time in the past. They no longer have a free tier, but the value you get from the service I think is well worth the $10/month they ask for it. I like Pingdom because they provide more than just “your web site is down” notifications. They provide performance analytics too, which, as we know, is a factor in how your website ranks in Google searches. 

But the real power of Pingdom is transaction monitoring. Transaction monitoring helps you know if a process is working, not just a page: a process like the signup form, or progressing through making a purchase. These are incredibly difficult things to set up tests by yourself, and you get that for $10/mo.

In House Tools

You can also write mini scripts that load your webpages and inspect the results for clues to determine if the page functions as you intend to. Since I am a software developer, that is what I use today for most of my projects. 

The downside is that you have to write these scripts, test them, and maintain them. Depending on your team composition, that may cost you more than using something like Pingdom. 

The upside is that since it is your code, you can do all sorts of interesting things with it, not just email notifications. You can use that to trigger different processes and even attempt an “auto-fix” by restarting relevant processes or clearing out the caches. 

A more powerful subset of this is writing automated tests for your web apps using a tool like “TestCafe” to simulate a user interacting with your web application going through a purchase or signup process. 

You can create custom monitoring and analytics tools to aggregate data from multiple signal sources that can provide insights not readily available in Google Analytics. For example, you can monitor how a campaign is affecting not only your website but also social media engagement across all the networks you care to track.