5 Tips For Successfully Launching a New Website

Idea by Sam Kim

Launching a brand new website for your business can be very exciting. However, that excitement can quickly shift to daunting if you don’t have everything in place to ensure a successful launch.

All the hard effort and work that the team has put into building this brand new stunning website could ultimately go down the drain with an unsuccessful launch. We’ll go over 5 essential tips to ensure your new website is all set up for success!

1. Create a launch checklist

 

Did you know even the highest michelin star chefs have various checklists for various departments within their kitchen?

Why?

Not only do checklists organize all the key requirements and tasks for a given project – it ensures consistency while reducing human errors – allowing us to focus on accomplishing tasks rather than organizing them.

Checklists also allow a transparent view of the launch to the whole team rather than the individual to ensure nothing can be missed.

At Anyday, we have a Pre-launch checklist and a Post-launch checklist to ensure our clients a 100% successful launch.

2. Implement Google Analytics

 

What’s the point of launching a new website if you don’t know how it’s performing? That’s where we bring Google Analytics into play. Google Analytics is a free analytics tool which you can utilize to learn more about your audience/ visitors. It tracks various actions, events and performance metrics on your website for you to start understanding what’s working best and where there could be room for improvement.

3. Test EVERYTHING

 

After you go through your launch checklist, ensure that your website is tracking data, it’s now time to ensure that your website undergoes quality assurance to ensure there are no hiccups. There’s plenty of QA / Testing tools to choose from. We at Anyday use usersnap which allows us the ability to do our internal QA along with client feedback all in one platform.

4. Setup redirects

 

Before you launch a website, there’s one crucial component that must be taken into consideration to ensure your website offers the end-user a seamless experience. A new website usually comes with improved user experience which can result in a new user flow, so we need to ensure that the new URLs follow the same structure as they were on the original website. This is crucial – so your users don’t accidentally end up within a 404 not found page.

5. Select your launch date wisely

 

I cannot stress how important it is to plan and choose the right date for launching your new website. It may seem like a great idea to launch your website on a Friday or the day before a major holiday – but that could often lead to problems and issues where the development team may not be available. 

At Anyday, we plan our launches before the start of a work day – usually earlier within the week (Monday), so we can proactively monitor and tackle any hiccups or problems that could arise during the launch process.

At Anyday, we follow a very rigorous launch process to ensure all our clients expectations are met without any oversight. If you’d like to learn more about our process and how we go about ensuring our clients websites are always launched with 100% satisfaction; with 0 hiccups, please feel free to get in touch with us!

Using Filters To Spice Up Your Front-End Game

Idea by Sam Kim

Launching a brand new website for your business can be very exciting. However, that excitement can quickly shift to daunting if you don’t have everything in place to ensure a successful launch.

All the hard effort and work that the team has put into building this brand new stunning website could ultimately go down the drain with an unsuccessful launch. We’ll go over 5 essential tips to ensure your new website is all set up for success!

In this mini-tutorial, I’m going to cover how we went about creating the banners above with various color tones from a single video file using CSS filters.

I’ve also created a little mini tool at the end that allows you to see the various CSS filters in action!

First, let’s create our video banner. As you can see from our banner, we made it fully responsive by ensuring that the middle of the video always stays centered on the screen – not stretching the video.

We can accomplish this by creating a simple video container and adding the video of our choice that’ll be used as the background.


<section class="video-hero" poster="https://any-day.com/wp-content/uploads/2021/06/home-poster.png">
  <video muted="" autoplay="" playsinline="" loop="" src="https://anyday2-17cf1.kxcdn.com/gradient2.mp4" data-src="https://anyday2-17cf1.kxcdn.com/gradient2.mp4"></video>
</section>

.video-hero {
  height: 100vh;
  width: 100%;
  overflow: hidden;
}
.video-hero video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

The above code will create the following banner.

Let’s have some fun now and see how we were able to accomplish the variations on the different pages.

Using CSS filters, we can apply various changes to apply various graphical effects to an element such as blur, brightness, contrast…etc

To play around with the colors, we can apply the hue-rotate property, which basically applies a hue rotation on the specific property (our video in this example).

We gave our video the following changes: filter: hue-rotate(301deg). Let’s see how it looks!

Pretty cool eh?

We’ve created a mini tool that showcases the various CSS filter properties. Check it out!

How To Make a Cool Animated Scroll-to-Top Button

Idea by Sam Kim

Launching a brand new website for your business can be very exciting. However, that excitement can quickly shift to daunting if you don’t have everything in place to ensure a successful launch.

All the hard effort and work that the team has put into building this brand new stunning website could ultimately go down the drain with an unsuccessful launch. We’ll go over 5 essential tips to ensure your new website is all set up for success!

A scroll-to-top button is one of these many features that allow users to easily navigate through the website when they reach the bottom of the page.

Like seriously… Who wants to over exercise their index finger scrolling up and down pages? C’mon – it’s 2021!

In this post, I’ll cover how we went about creating our animated scroll-to-top button the one you see exactly here on this post.

This guide will require a bit of background knowledge in HTML, CSS and Javascript.

Let’s get started!

First, let’s create and style our scroll-to-top button.


<div id="scrollToTop"><span>Go Up</span></div>


#scrollToTop {
  position: fixed;
  bottom: 3rem;
  right: 3rem;
  box-shadow: 0 0 14px -5px rgba(0, 0, 0,0.5);
  border-radius: 100%;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

The above code will create our scroll-to-top button and position it to the bottom right corner of the screen.

Let’s now hide this button and only show it when the user starts scrolling down the page.

Let’s first hide this button by adding margin-bottom: -12rem; to hide the button. We’ll also add a transition: margin-bottom 0.2s; to ensure that the button fades in/out smoothly.

We can then use Javascript to animate the button by fading it up from the bottom of the screen when the user scrolls down the page, and when the user scrolls up the page, we’ll fade out the button back towards the bottom of the screen.


$(window).on('scroll',function() {
  if (window.scrollY > (window.outerHeight + (window.outerHeight/2))) {
    $('#scrollToTop').addClass('active')
  } else {
    $('#scrollToTop').removeClass('active')
  }
})

We will also need to create a .active css class as well.


#scrollToTop.active {
  margin-bottom: 0;
}

Let’s setup a trigger so the page animates to the top when the user clicks the button.


$('#scrollToTop').on('click',function() {
  $("html, body").animate({ scrollTop: 0 }, 500);
})

Let’s see what this looks like

Now that we’ve got our basic scroll-to-top button in place, let’s add a bit of animations to spice things up a little.

Let’s update the button so it spins while scrolling. Clockwise when scrolling down and counter-clockwise when scrolling up. Add the following snippet at the end of the “TRUE” condition within our scroll function.


setTimeout(function() {
  var theta = ($(window).scrollTop() - (window.outerHeight + (window.outerHeight/2))) / 500;
  $('#scrollToTop').css({ transform: 'rotate(' + theta + 'rad)' });
})

Your updated script should now look like this.


$(window).on('scroll',function() {
  if (window.scrollY > (window.outerHeight + (window.outerHeight/2))) {
    $('#scrollToTop').addClass('active')
    setTimeout(function() {
      var theta = ($(window).scrollTop() - (window.outerHeight + (window.outerHeight/2))) / 500;
      $('#scrollToTop').css({ transform: 'rotate(' + theta + 'rad)' });
    })
  } else {
    $('#scrollToTop').removeClass('active')
  }
})

And finally, let’s add an infinite spin when you hover over the button.

We create an animation frame called ‘rotate’ which we then use to animate the button infinitely. You can play around with the duration / rotation degree to change the speed!


#scrollToTop:hover {
  animation-name: rotate;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes rotate {
  to {transform: rotate(2520deg);}
}

Your end result should look someting like this! ??

You did it! Your very own animated scroll-to-top button. We created a very simple user friendly scroll-to-top button to allow users to scroll to the top of the page with very simple animations. Make sure you subscribe to our newsletter for tips and tricks that we personally use on our projects!

How Game Development and Web Development Are More Similar Than We Thought

Idea by Farzad Afshari

Prior to the conception of HTML5 and emerging technologies, web and game development required a separate set of skills. If you had compared resumes between a game developer and web developer, you would have found very little in common outside of transferable skills.

Fast forward to today, it is now difficult to identify differences between them. Take a step back and look at the full picture, you will start to notice that these two seemingly different areas of expertise are more alike than you thought.

At first glance they may still seem different, but thanks to the evolution of web technologies, the line that once separated the two is blurred. Today, I will be diving into the similarities of these two seemingly different areas of expertise. But before we begin, let’s quickly review the fundamental things to look out for as a game developer.

Fundamentals of a Game Developer

 

Identifying the Actors and Objects

 

For the web developers out there, seeing “Actor” probably spawns the visual of Brat Pitt or Johnny Depp in your mind. Wrong kind of Actor! In the context of game development, an Actor is simply anything that represents a single person or “entity” in the game. The terms Actor, Entity, and Object all go hand-in-hand with similar meanings. Anything that needs to be described in the world with information to store can be classified as an Actor or Object. Do you want to store information about a soldier describing their equipment? They should be an Actor. What about an unopened treasure chest? That’s also an Actor. After all, the contents of a chest needs to be described somewhere. Actors can be self-dependent an information relevant to them.

Establishing the Environment

 

This means to describe the environment in which the actors live in. It’s the setting, the container in which these pieces of a puzzle fit in. This is commonly referred to some developers as “scenes”. These environments often manage the Actors, storing information about the game that would otherwise not be stored within a visual Actor. Think of the environment as a stage for the Actors. If the Actors were chess pieces, the environment would be the chess board.

Defining the Rules

 

Much like the real world, games have rules that need to be followed. These are constraints put in place by game developers so that the user experience is controlled and created as intended by the designers. Rule definition can vary from physics to something more explicit like imposing restrictions on what a user is allowed to do.

Drawing the Comparison

 

Now you’re probably wondering, how does this relate at all the web development? Thanks to evolution of web development and new tools and frameworks, the two types of development are strikingly similar. One could even call them long lost siblings finally reunited by the power of modern web technologies!

Component Based Development

 

With the emergence of frameworks such as React, web developers have become accustomed to the idea of thinking with components. Components have a striking similarity with actors and objects in game development. They both achieve the exact same purpose in that they represent an entity. The only thing that is different between the two is the context in which they are used.

A component, much like an actor, stores information about it. So if you’re a game developer turning web developer, all you would need to do is apply the same concept. Identify the components of a website the same way you identify the Objects in a game. If something can be described, it can be an object.

This was much harder to think about prior to modern web technology since JavaScript was not mature enough to support the idea of thinking with objects. Ever since ES6 became an industry standard, the gap has been closed between the two. Not only does it make it possible to think the same way as a game developer, it unintentionally became the standard way of thinking.

Site Architecture and Frameworks

 

The architecture of a website is similar to that of a game developer creating the world the actors live in. If you translated actors in game development to components in web development, where would they live? The answer to that is simply within the structure of the site itself. In game development, these are called scenes. However, in web development, they are simply templates. These templates load components and the components have access to the information relevant to them.

Again, similar with the actor comparison, scenes and templates share the same purpose under their own contexts. With how much modern web development has evolved, the visual aspect of web applications evolved with it. Websites have become more interactive and it’s not too difficult to see how some of these components can be viewed as if they are living within a gaming environment.

User Experience

 

Now that I’ve covered actors and scenes, let’s dive into the similarities in the user experience. As briefly noted above, the look and feel of a website in todays day and age can almost be mistaken for a game. Websites and web apps have become so interactive and in such creative ways, that they have become entertaining to use. If a website is boring and loses attention of the visitor, then the website is failing to achieve its goal of converting the user to whatever metric the web developer had intended. Similarly to game development, goal conversion happens by creating an entertaining and engaging user experience. Games have mostly achieved this through visuals and sound, and in most cases, storytelling. Websites have been more focused on information and content. However, due to the power of modern web technology, it is possible to think of creative ways to make a website entertaining; The same way that game developers do.

Conclusion

 

Game and web development go hand-in-hand more ways than originally thought. Modern web technology such as React, ES6 and many more, bridged the gap between the two. If you are a web developer looking to make something modern and engaging for your viewer, maybe take a step back and ask yourself, what would a game developer do?

Off With Their Heads! Traditional vs. Headless CMS

Idea by Sam Kim

Launching a brand new website for your business can be very exciting. However, that excitement can quickly shift to daunting if you don’t have everything in place to ensure a successful launch.

All the hard effort and work that the team has put into building this brand new stunning website could ultimately go down the drain with an unsuccessful launch. We’ll go over 5 essential tips to ensure your new website is all set up for success!

1. Create a launch checklist

 

Did you know even the highest michelin star chefs have various checklists for various departments within their kitchen?

Why?

Not only do checklists organize all the key requirements and tasks for a given project – it ensures consistency while reducing human errors – allowing us to focus on accomplishing tasks rather than organizing them.

Checklists also allow a transparent view of the launch to the whole team rather than the individual to ensure nothing can be missed.

At Anyday, we have a Pre-launch checklist and a Post-launch checklist to ensure our clients a 100% successful launch.

What is a Headless CMS?

So now that we have an understanding of a traditional CMS, we can get a basic idea that a CMS consists of 2 parts. A back end (all the assets and contents that becomes the database for your website) and a front end (the part which takes the database and renders it to the end-user).

 

A headless solution basically takes away the front-end part of the CMS; making it fully front end agnostic. This means instead of an actual website – you’re left with a raw content-only data source. 

What does this mean? 

It means that developers have the flexibility to create various channels (websites and web apps) to display all the content that is served by the headless CMS on it’s own system.

An example of a headless CMS can be Magnolia, Contentful, Contentstack, and even WordPress (utilizing WP Rest API).

 

Pros of a headless CMS

  • Rapid content delivery across various content channels (whichever the CMS endpoint API is being rendered in).
  • Complete control over how and where your content appears.
  • Flexibility for developers to use any front-end framework of choice.

 

Cons of a headless CMS

  • Not easy to preview the changes within the content channels
  • Reliant on additional technology to display the data (The head)
  • Difficult to control the look and feel of the front-end without a developer

Now that we have a good idea of a traditional vs headless CMS, let’s dive closer into how we go about determining which solution is best suitable for our clients based on their specific needs and requirements. 

 

How do we determine the best solution for our clients?

It really boils down to the type of technologies and channels the client is looking to serve their content. 

 

Do they want to have a content-based website?
Do they have an existing application or a product?
Do they have a mobile application?
Is managing content across multiple networks of applications and systems key for the content managers?
Do they have developers in-house? 

 

These are just a few of the questions we may have when considering which solution makes the best sense.

Headless CMS is a no-brainer if our client is looking to deliver content across various channels with a fully customized and flexible content-based CMS. It also allows our developers to build the front-end with technologies such as ReactJS and VueJS.

Traditional CMS if it doesn’t fit the above category and our client is looking to create a standalone website that offers a platform to serve content that’s customizable in not only copy but also looks and feel. 

However – Lately, we’ve been exploring Decoupled CMS, and I must say…in my honest opinion – I think it’ll take over both traditional and headless CMS.

But that’s for another day!

WordPress: A Modern Day Approach to Scalability

Idea by Sam Kim

Launching a brand new website for your business can be very exciting. However, that excitement can quickly shift to daunting if you don’t have everything in place to ensure a successful launch.

All the hard effort and work that the team has put into building this brand new stunning website could ultimately go down the drain with an unsuccessful launch. We’ll go over 5 essential tips to ensure your new website is all set up for success!

Idea by Sam Kim

So often clients reach out to us because they are tied at the hip with whoever built their website originally because it was developed using confusing code. What’s worse is that some agencies/freelancers do this on purpose so that any changes a company may want done in the backend, there’s only one person who knows how to do it and that person gets paid to do it.

Here I’m not going to be discussing scalability in terms of hosting / servers, database management, or our WordPress architecture (that’s for another day). But more-so, I want to dive into the details regarding the tools and processes we utilize for building effective and scalable WordPress sites for our clients, so that at the end of the day (and engagement) they have the freedom to manage their site and content in whatever way they see best fit.

 

Why Custom Code vs Page Builders and Templates?

One of the biggest misconceptions of WordPress is that all WordPress sites are built with templates and themes that require no development.

To a certain degree, I wouldn’t entirely disagree… Yes, we have a lot of clients that have come to us with websites that were using templates and page builders. But they came to us specifically because  they were looking for a rebuild due to the fact that their website was moving far too slowly or had become entirely non-responsive.

But no, in short, WordPress websites nowadays can be built similarly to how a web application is built using very similar methodologies and technologies. For instance, we see a lot of freelancers and teams utilizing multi-purpose themes with built-in page builders such as Divi Themes and Elementor.

In this example, the size of a site built on DIVI is typically around 25-30 MB. This results in an average load time of around 12-14 seconds.

I don’t know about you, but thanks to Youtube and Candy Crush my attention span lasts about 2-3 seconds, not 14. When we think about scalability, this is already a non-starter.

And this is when custom development using start themes or boilerplates come into play. At Anyday, we utilize Sage to start off most of our WordPress projects.

Idea by Sam Kim

Why Sage?

Having been around the block a handful of times, we’ve used dozens of starter templates. But nothing comes close to Sage in relation to performance and efficiency.

Sage utilizes Laravel’s Blade templating engine which allows developers to not only prototype much faster, but write much cleaner code. And in our world Clean Code is God.

Sage is also based on HTML5 boilerplate, a very user-friendly starter template that’s gained recent popularity due to its ability to prototype quick and robust websites with cross-browser compatibility. Sage offers this along with various technologies that allows us to easily integrate it into our development environment including:

  • Sass
  • NPM
  • Bootstrap
  • Composer
  • Yarn / Gulp
  • ESLint

This provides us developers all the freedom and the tools to craft a website that’s not only beautiful and custom, but super fast.

If this fact alone doesn’t convince you of how robust WordPress can be when leveraged properly, I’m not sure what will.

Sage provides a great starting point to ensure a scalable foundation by offering an incredibly organized theme structure. This theme structure allows us to easily organize our Gutenberg blocks with our ACF configuration to build “components” which we can then utilize to construct our website.

Idea by Sam Kim

Thinking of Gutenberg Blocks as Components

We call our Gutenberg blocks, “components” because we’re essentially configuring all of our necessary ACF fields within the blocks; allowing us to reuse these components within the WordPress page editor.

As developers, we’re essentially building a library of these components to allow for a seamless experience for content managers to easily add, modify and remove these components within the page editor to modify any pages on the website.

 

What does this all mean?

This means that by understanding the necessary Components, content managers can easily create, delete or modify any pages on the website without having to touch a single line of code.

What this means for the bigger picture is that once we’re done building a WordPress site, the client is free.

Agencies often code with obscure language with the intent of creating a maze that only they can solve. This shackles the client to the developer or agency, financially, and in a sense of scalability, which goes against our ethos entirely.

In terms of scalability, with our WordPress builds, clients will be able to easily train or hire staff to manage the content in the backend, which ultimately is the goal for 90% of our engagements. Of course we’re always around for an extended partnership, but it’s a partnership we want based on choice, not on requirement.