A Beginner’s Guide to File Formats For Animated Web Banners

Photo by John Schnobrich on Unsplash

After starting your business, the next step for you was to advertise it and get more customers. Without wasting much time, you planned the design for each and every Google banner size. However, a moment of indecisiveness had washed over you: which file format is the best choice for animated web banners? There were several options to choose from which included MP4, AMP HTML, HTML5, and GIF. As you sat and thought about it, you felt your head about to explode. No need to fret! This guide should help you decide on a file format for your banners and after that you will be on your way to boost your ROI.

 

1. MP4

You have probably heard of an MP4 file, which is the most popular file format for video. With the combination of high quality, streaming compatibility, support from multiple platforms, and many more, there is no mystery to this popularity.  

As I said before, MP4 files can be streamed online and played on a wide range of media players, showing versatility. The low loss compression means it is a high quality file format and you can store multiple MP4 files without having to worry so much over the amount of storage. Audio and video data can be contained as well. With copyrights in play, it can be tricky when editing or updating these files.

 

2. AMP HTML

“The last part is familiar but I have no idea what the first part means!” AMP refers to Google’s open-source project that stands for “Accelerated Mobile Pages” and is a move towards mobile-friendly web pages. A web page can have elements that result in slow performance of mobile, so with AMP, these elements are taken away to make it a fast and high performing one.

Who wants a slow performing ad? Not you, at least! AMP ads have high user engagement and great user experience thanks to the high speed and high security of them. Would you believe me if I say that they are six times faster than the regular ads out there? High security of AMP ads is the result of having to be validated. When they are validated, there are low to no malware in them which then allows your company to be seen as trustworthy. Keep in mind that action URLs, looping, etc. may not work with this file format.

 

3. HTML5

Imagine making one ad banner and having to make multiple versions of it just so that it can play on various devices such as a laptop or phone. That could take a ton of time out of your life, but with HTML ads, this won’t be the case! As one of, if not the most popular online ad file format, amazing animations, effects, video, and other elements can be contained in it through CSS and Javascript.

HTML5 is supported by every browser you have ever known and every operating system you have ever seen. They can be played everywhere, do not need additional plugins, and can be easily updated. On top of its small file size, it can also be made responsive. Make sure that you make changes to the code whenever there is a change to the systems of Android, iOS, or Windows.

 

4. GIF

From cute cat moments to funny moments of TV shows, GIFs are constantly made by people all over the world. Out of all the file formats I listed here, GIFs are the easiest to create. They support 256 colors, so remember this as you use images in them. An image can contain more than 256 colors so it can turn out a little different than what you wished for. Since a GIF file is heavily animation based, it can catch the eyes of visitors, increasing CTR.

Like AMP HTML banners, they work very well on mobile devices and can be made interactive. Since GIFs are played frame by frame, the file size could get quite heavy.

 

 

https://blog.bannersnack.com/best-file-formats-for-display-ads/

https://blog.bannersnack.com/the-game-of-banner-ads/

https://searchenginewatch.com/2016/02/22/what-does-googles-accelerated-mobile-pages-amp-mean-for-marketers/

Advertisements

5 Top Performing Web Ad Sizes You Should Know

Photo by Taras Shypka on Unsplash

Web advertisements are extremely helpful in promoting your app, company, website, service, and more. There are a wide range of ad sizes you can find on the internet and use to reach out to more people! However, do they all have the same effectiveness? Nope, they are not all equal.

“But what if my design is great and has the potential to attract a lot of visitors?” Design is one thing, but ad size is another. Think about a full page ad. A full page ad may pop up once for 5 seconds on a page where you want it to appear on. After that, it disappears into the realm of other advertisements waiting to get their turn on someone’s screen. If you want it to stay on the side of a page while people are browsing through, you can choose a smaller size. With that being said, here are the 5 top performing ad sizes for Google!

google-top-5-ad-sizes-1024x1024

Photo from AgentFire

 

1. 300 x 250

The 300 x 250 web ad is also called the “medium rectangle” which is small but still able to show text and images. Since it is an embedded ad within text, people will less likely ignore your banner compared to other banners that are not embedded.

 

2. 336 x 280

If the first ad is called a “medium rectangle,” then what should 336 x 280 be called? The answer is a “large rectangle” as it is similar in dimension but larger. Wow I am so surprised! Although it may have a little less impact compared to 300 x 250, it is still used by many publishers. This is another choice you can make when choosing ads to be placed within text.

 

3. 728 x 90

The “leaderboard” is a long, narrow ad that is usually at the top of a page and the first thing that visitors see. When it is on top of all the content, it will be viewed more, but when it is somewhere else on a website, you should reconsider choosing this ad size. Other than that, it is a great choice for you to put your banner out there for many to look at.

 

4. 300 x 600

How much space does this ad take up? Let me guess, a half page! At least, that is what a 300 x 600 size banner is called. It doesn’t really take up a half page but it is a huge ad that draws a lot of attention and provides more room for messages and images. People are more likely to click on it due to the visual impact. The “half page” is a rising banner size, so if you are stuck on which type to choose, this should be the one.

 

5. 320 x 100

Have you ever come across an ad on your phone and could not read the words on it no matter what? The “large mobile banner” is a horizontal banner like the 728 x 90 one but has a larger width and a smaller length. They are easy to read off of and that gives this ad size an advantage over the “leaderboard” ad on devices like phones.

 

 

https://support.google.com/adsense/answer/6002621?hl=en

https://adespresso.com/blog/google-ads-size/

How UI and UX Are Used In Website Design

Photo by Tim Bennett on Unsplash

You may have heard your friend complain about how difficult it was to use a website or how bad and unprofessional it looked. Do the terms “UI” and “UX” sound familiar to you? Where in the world do these two terms come from? To add onto the confusion, some job listings combine them together, saying “UI/UX designer” and can lead people to thinking that they are the same thing. One is not better than the other, and both of them are extremely important to website design. I will show you the difference between each term and help you enter into the world of user interface and user experience design.

 

What is UI Design?

How does your website look and feel? Aspects like the presentation and how it is interactive are focused on in user interface design. You can think images, animations, buttons, text, sliders, transitions, and many more graphical features. Deciding on how a website or app will look to users is the primary role of a UI designer. More specifically, certain font styles, color palettes, shapes of buttons, etc. are all chosen by them. In job postings, you will find that phrases such as “graphic design,” “branding design,” and possibly “front end development” are common.

“If UI deals with graphics, where does front end development come in?” This is the part where many people get UI and UX mixed up. Front end work can help with adaptation to various screen sizes and interactivity. However, UX design does not require coding. Now let’s jump right into user experience!

 

What is UX Design?

User experience design is focused on how a user interacts and navigates through a website or app. Your website could serve multiple purposes or even just one purpose, but if visitors have a hard time finding what they need and feel confused on how to navigate your site, the UX design of your site may be the culprit. Yes, UI designers can make it look presentable and nice, but user experience can determine the difficulty of using the website. Good experience means a smooth and seamless interaction, which is the number goal for UX designers.

Some responsibilities include customer analysis, wireframing, prototyping, and focusing on user feedback. If you think the difference between UI and UX is still a bit blurry, let’s put it this way: a nice looking page but with very difficult navigation has great UI design and poor UX design. On the other hand, an awful looking page with amazing usability has poor UI design and great UX design.

 

 

https://careerfoundry.com/en/blog/ux-design/the-difference-between-ux-and-ui-design-a-laymans-guide/

https://uxplanet.org/what-is-ui-vs-ux-design-and-the-difference-d9113f6612de

5 Ultimate Steps to User Testing For Website Design

Photo by You X Ventures on Unsplash

After four long months of preparation, you have finally launched your business and an ecommerce website that you’ve worked hard on. Although your website had many visitors, the average time spent on it was less than a minute and the majority of them did not buy anything. What could this be? The issue was that you did not perform a usability test to put yourself into your customers’ shoes which lead to lower user satisfaction and decreased return on investment. It is important to look for issues early on and do what you can to improve the usability of the product, website, service, etc. Is it too late? It definitely isn’t and I will share the most crucial steps it takes to get there!

 

1. Think About Your Goals

What is the goal of the website you want to test? For example, if the objective is to convert more visitors to buyers, you could include more checkout buttons or make the checkout process simpler and easier. Then you can make a test to see if it is effective. If you don’t have a specific goal in mind like the ones I mentioned, your aim could be that a better experience navigating the app, website, etc. means more people are likely to purchase items.

 

2. Create Task Scenarios

When to comes to making a test, there are two key things to focus on: what is tested and how it’s measured. Task scenarios help form the structure of the test and answer any questions you have about the usability of your website. Remember to make the scenarios unbiased to get the best results. Some things you can test on include navigation, choice, and click tests. Open-ended questions will let you see popular areas users go to, what they struggle with, etc.

 

3. Pick Test Volunteers

Now that we have our test, who will be our volunteers? It is important to recruit volunteers who match your target audience or user persona. Your family, friends, coworkers, friend of a friend, cousin’s friend’s brother, aunt’s husband’s best friend’s wife, etc. are potential participants. Ideally, you should have 3-5 people who do not know and have not seen your website. Do you know anyone with user interaction expertise? They can be a part of the test and provide a lot of insight for your product.

 

4. Make a Script and Record

Prepare what to say to your participants beforehand to keep everything neutral. You may tell them that they can speak freely and criticize the product as much as they can, project their voice loudly, and let them know that you will be recording their voice. Don’t forget to ask them the same questions that you had regarding to usability.

 

5. Document and Analyze Results

Recordings of what test participants said are not the only things you should analyze. Navigation flow data, click data, time data, and more are also vital to capture how efficient and user friendly your website is. Tools like heatmaps are also very helpful to analyze user behavior.

 

 

https://uxplanet.org/how-to-conduct-a-usability-test-in-six-steps-from-start-to-finish-4082e8d57858

https://uxaudit.io/blog/7-steps-of-an-effective-user-testing-process/

https://signalinc.com/user-testing-5-steps/

4 Steps to Page Size Optimization For Your Website

Photo by Pankaj Patel on Unsplash

Just before going to work, you decided to quickly browse the Internet and look for a gift to buy your coworker before her birthday next week. You clicked on a link to a website with the most perfect pair of heels you have ever seen. However, the website, which was on page 35, took up a lot of time to load. You then shoved your phone back in your bag in frustration and drove to work. What was the problem here? Say hello to page optimization! When web pages are optimized, the website will rank higher (up and away from page 35) and decrease the time it takes to load. Let’s take a look at these steps for a better user experience.

 

1. Test Website Speed

How do you know what to fix if you do not know the speed of your website? Ah, a website speed test. With a test like KeyCDN, you can analyze the loading time from several locations. You will be able to check the status and content size of each URL. If you want an another site to test on, go to WebPageTest. From there, you can add a URL, choose a location, and select a browser.

 

2. Optimize Images

Did you know that more than half of the weight of a web page is due to images? In order to make sure that the file sizes are smaller, you can optimize an image. The contents will be compressed with the it looking the same as before, so you won’t have to worry about unwanted changes. It is possible to reduce page size by 300 MB by using this method. There are many image compressors out there whether it is a JPEG or PNG.

 

3. Code Minification

Whoa, we are getting more technical here! This involves HTML, CSS, and JavaScript. You can make changes that have an effect on loading time while keeping the functionality. Minification involves removing characters that are unnecessary from code. Some of the characters you may remove include: comments, new line characters, block delimiters, and white space characters. The downside to cramming code together is that it will become unorganized and difficult to read. On the other hand, I’m sure that you would want the file size reduced to about half by minification.

 

4. Browser Caching

What is a browser cache? A browser cache is a temporary location in your device used to store files of a website that a browser has downloaded from. Some files that are downloaded can be images, HTML files, CSS style sheets, etc. When you go to a web page, the server does a lot of calculations to load it, but if it remembers the result, the web page will load faster. The HTML file can be stored in RAM and be readily sent to the browser. That is the magic of caching!

 

 

https://www.keycdn.com/blog/website-performance-optimization

https://designmodo.com/website-performance-load-time/

 

How to Distinguish a Good Landing Page From a Bad One

Photo by Ben Kolde on Unsplash

Imagine coming home from work and being excited to download this amazing app that your coworkers mentioned during break. After a hundred years of searching, you finally found the app. However, there was something preventing you from downloading it: the messy landing page with confusing text that served to advertise the app. How would a landing page for an amazing app leave such a huge impression on you and possibly change your mind? A great design serves as a powerful way to market a product to consumers around the world, and this situation is no different. With this in mind, let’s get into some good landing pages and some bad ones.

 

Great Landing Page Design

When it comes to great designs, there would be a nice contrast of colors, simple look, easy navigation, and more. With these three examples, you will see how these factors come together and convert well.

 

1. Moz (Simplicity)

moz-landing-page

The main takeaway from this landing page is the simplicity of the design. Since it is minimalistic, call to action features like the “Try It Now!” button stand out along with the contrast between yellow and purple. Visitors won’t be distracted by too much text or images on the page, and the simple layout is easy on the eyes.

 

2. MasterClass (Use of Media)

masterclass-landing-page

Using a nice image of a person creates a personal connection and can increase trust. By showing a well-known person with a good reputation, MasterClass will have more credibility to its name and attract more people to screenwriting lessons. In this case, the “image” is also a video which further convinces visitors to take the class and is included seamlessly with the rest of the page.

 

3. Bigscoots (Responsive)

bigscoot

Not only does a landing page have to look organized on a computer, but it also should look put together on other screen sizes such as a tablet or phone. Nowadays, more and people more are using phones to make purchases and download applications. It is important to make sure that the landing page leaves a great impression on these visitors or else it can increase the chance of losing potential customers.

 

Bad Landing Page Design

Have you ever visited a website from an ad only to be introduced to something irrelevant? You may have felt like clicking the “x” on the top right and moving on. The landing page should not confuse the audience and steer away from the original call to action. Bad contrast, pixelated images, long text, etc. are also the keys to a horrible design.

 

1. Chase (Too Many Offers)

chase

As you can see here, their landing page initially focused on helping the customer find a credit card that they need. Yet, many other actions are just below “Find the right credit card” such as “Checking Accounts” and “Car Buying & Loans” which can confuse people. On top of that, they reduce the effect of having a call to action button.

 

2. Money4yourMotors (No Simplicity)

money4motors

Crazy, right? This landing page has no specific color theme, and the layout is very disorganized. There is a lack of visual simplicity, so anyone who visits their website will be confused on what to do and feel that the company is not trustworthy.

 

3. SAP (Spam and Complexity)

page

When you look at the very top of the page, it does not look so bad. It has a nice picture of people that sparks a personal connection, and the headlines look good. On the other hand, there are no call to action buttons, and just below the picture, there are several links that can overwhelm visitors. They look out of place and sketchy, leaving the impression that the company is not so professional.

 

 

https://www.toptal.com/designers/landing-page-designers/effective-landing-page-design

https://landerapp.com/blog/6-examples-of-awesome-and-awful-landing-pages/

https://www.crazyegg.com/blog/30-landing-page-examples-to-steal-from/

https://www.autogrow.co/examples-of-horrible-landing-pages/

https://instapage.com/blog/landing-page-examples

What You Didn’t Know About Bootstrap CSS

Photo by Christopher Gower on Unsplash

One time in 2019, you have finally decided to work as a web developer after spending a lot of sleepless nights coding the hours away. However, there was one problem that you couldn’t find a solution to: finding a framework that you could use. This is where Bootstrap comes in and helps developers or aspiring developers like you.

On their official website, it says that with Bootstrap, you can “build responsive, mobile-first projects on the web with the world’s most popular front-end component library.” Why is it so popular? Well, if you want to focus a lot on web design, Bootstrap can help you spend more time to design rather than code a large amount of CSS.

 

Responsive Design

A framework like Bootstrap can save you the hassle of coding grids from scratch along with other parts that can made from scratch. With that out of the way, what else can Bootstrap handle? Think about the times when a website you visited on your phone looked messy and had such small text that you had to zoom in to see them. Yet, on a laptop or a computer, it seemed fine! Frameworks play a huge role in how a website can adapt to different screen sizes with responsive design.

When a website adapts to another screen, the images can be resized as well (also known as responsive images). You can add an .img-responsive class and then leave it up to Bootstrap CSS to do the rest. Are you worried about your table element? A .table-responsive class will do the trick!

 

Customizability

After I have said many great things about Bootstrap, there shouldn’t be any cons, right? A disadvantage that it has involves their heavy file size. The file size of Bootstrap CSS is 119 KB which means your website could be slowed down some more.

“Is there any way I can solve this? What can I do?” Thankfully, you can customize your download by choosing which features you want to include and keep any unwanted functions out. On their website, go to their customize and download page and when you scroll down, there will be a checklist of all the items. Simply unchecking items will save you from large file sizes and save your visitors from a long loading time.

 

Explanations

Are you stuck on how to implement a code? Under “Components” on the left, Bootstrap has many code explanations there to help you. It is no wonder why this framework is so popular among not only professionals but beginners as well. Some of the features with explanations include dropdowns, list groups, forms, button groups, and more. You can also copy and paste a code from their website and change it up however you like.

 

 

https://www.taniarascia.com/what-is-bootstrap-and-how-do-i-use-it/

https://careerfoundry.com/en/blog/web-development/what-is-bootstrap-a-beginners-guide/