Author: efront

Posted on

Google Maps – Billing account set up

Google gives each billing account a $200 credit each month and it’s unlikely that you ever will exceed that amount (see below) – however for us to proceed we require you to create a billing account and provide us access.

Please review the below potential costs before you complete setting up the account.

Costs

We recommend you refer to the live site for current pricing  https://mapsplatform.google.com/pricing/

 

General Setup Steps

We assume you have a Google Account. If you don’t have one, create it following this process.

Login to your Google account and do the following.

Step 1 – Login to your Google Cloud Console Account.

If you don’t have an account, Google will request you to create one and add your billing details.

Step 2 – Go to the Google Maps Platform > Credentials page  and select a project.

 

    • If you don’t have a project, create one.

Step 3 – Add Efront as a User to your new Google API Project

From your Google Cloud Platform dashboard, open the menu clicking the top left hamburger menu and navigate to IAM & Admin > IAM and we’ll take care of the rest.

 

 

On the top bar, click on “+ Grant Access”.It will open a side panel.

 

 

On the side panel add efrontanalytics@gmail.com  with Owner role and save.

 

Finally, click the “Save” button to send us an invitation email to join your project. This will allow us to finish setting up your API key securely.

 

Step 4 – Notify Us

Let us know that you’ve added us as an owner and we will review and confirm everything is working.

Posted on

How to compress a video for web purposes?

Why compress videos to smaller sizes?

The quick answer is speed. Having large files of any kind, not just videos, will slow down your website.  Who wants a slow website?

Video content is awesome, but using it too much can harm your site. We made your site with love and we don’t want to see it suffering.

Thats why we want to keep it healthy. If you’re going to host videos on your site, we suggest you optimise them for web first.

 

If you’re still intrigued by why you should optimise the videos, here is the long answer:

  • Faster Loading Times: Smaller file sizes mean faster loading times for web pages. When users visit a website, especially on mobile devices or with slower internet connections, they prefer content that loads quickly. Large video files can significantly slow down page loading times, leading to user frustration and potentially higher bounce rates.
  • Bandwidth Conservation: Hosting and streaming large video files can consume a significant amount of bandwidth, especially for websites with high traffic volumes. By reducing the size of video files, website owners can conserve bandwidth, potentially reducing hosting costs and ensuring smoother delivery of content to users.
  • Improved User Experience: Users appreciate a seamless browsing experience. Smaller video file sizes contribute to smoother playback, fewer buffering issues, and overall better user experience. Users are more likely to engage with content that loads quickly and plays smoothly without interruptions.
  • Compatibility: Smaller video files are more likely to be compatible with a wide range of devices and platforms. Some users may be accessing your website from devices with limited storage or older hardware that struggle to handle large video files. By optimizing video file sizes, you increase the likelihood that your content will be accessible to a broader audience.
  • Storage Efficiency: Smaller video file sizes require less storage space on servers. This is particularly beneficial for websites that host a large amount of video content. By optimizing file sizes, website owners can better manage their storage resources and accommodate more content within their hosting plans.
  • Search Engine Optimization (SEO): Page speed is a crucial factor in search engine rankings. Search engines like Google consider loading times when ranking websites in search results. By reducing the size of video files and improving page load times, you can potentially improve your website’s SEO performance and visibility.

 

In summary, smaller video file sizes contribute to faster loading times, better user experience, lower bandwidth consumption, improved compatibility, efficient storage utilization, and potentially enhanced search engine rankings. As a result, optimizing video file sizes is essential for delivering high-quality multimedia content on the web.

Video file size compression: lossless vs. lossy.

To reduce file size, you can use two types of compression — lossless and lossy. What’s the difference between the two? Lossless compression is a way to reduce file size without losing quality — this is what happens anytime you create a ZIP file. In this scenario, the original data is preserved, and nothing is thrown out. On the other hand, lossy compression shrinks the file size by throwing out extra, unnecessary data.

You’ll want to choose lossless compression if you want to preserve your video in its original quality. However, if a similar copy is “good enough,” lossy compression can make your video files even smaller, which in turn can make sharing them even more manageable.

I have paid thousands of dollars for my 4 video and I want to use it in 4k

Using 4K videos online can often be considered pointless for several reasons:

  • Bandwidth Consumption: 4K videos have significantly larger file sizes compared to lower resolutions like 1080p or 720p. Streaming 4K videos requires a considerable amount of bandwidth, which can be impractical for many users, especially those with slower internet connections or limited data plans. This can lead to longer buffering times, playback interruptions, and a poor user experience.
  • Device Compatibility: Many devices, especially older or budget-friendly ones, may not support 4K resolution playback. This includes smartphones, tablets, laptops, and even some desktop computers. For users accessing content on such devices, serving 4K videos is unnecessary since they cannot fully appreciate the higher resolution anyway. It also increases the likelihood of compatibility issues and playback errors.
  • Storage and Hosting Costs: Hosting and serving 4K videos require more storage space and bandwidth, leading to higher hosting costs for website owners. Storing large 4K video files can quickly eat up server resources, especially for websites with extensive video libraries. This can become financially unsustainable, particularly for smaller businesses or independent content creators.
  • Diminished Visual Impact: The difference in visual quality between 4K and lower resolutions may not be significant, especially on smaller screens or when viewed from a typical viewing distance. While 4K resolution offers sharper details and enhanced clarity, the improvement may not be noticeable enough to justify the increased file size and bandwidth requirements, particularly for casual viewers.
  • Limited Audience Benefit: Only users with high-resolution displays and fast internet connections can fully appreciate the benefits of 4K video. For the majority of users, particularly those accessing content on mobile devices or older computers, the difference between 4K and lower resolutions may be negligible. Serving 4K videos to such users provides little to no added value.
  • Production Costs: Creating and editing 4K videos often requires specialized equipment, software, and expertise, which can significantly increase production costs for content creators. This investment may not be justified if the majority of the audience cannot fully utilize or appreciate the higher resolution.

In summary, while 4K videos offer superior visual quality, their practicality for online usage is limited due to factors such as bandwidth consumption, device compatibility, storage costs, diminished visual impact for many viewers, and higher production expenses. For most online content, using lower resolutions like 1080p or 720p is more practical and efficient, providing a balance between visual quality and accessibility.

Posted on

[ Google Cloud ] Add, remove, or update a payment method

If the Google Maps on your website stops working is likely that your payment method has expired.

Fortunately, this is an easy fix! Follow the guide below and solve the issue in minutes.

We assume you have a Google Account. If you don’t have one, create it following this process.

Login to your Google account and do the following:

Manage Payment Method:

Step 1 – Go to your Google Cloud Dashboard  Payment methods.

Step 2 – Add, Edit or remove payment methods.

 

Add Payment Method:

Step 1 – Click on the ” + Add payment method ” box.

Step 2 – Add the Credit / Debit card details.

Step 3 – Save.

 

Edit Payment Method:

Step 1 – On the Primary or Backup Payment Method, click on the “Edit “.

Step 2 – Update the Credit / Debit card details.

Step 3 – Save.

 

 

Remove Payment Method:

Step 1 – On the Primary or Backup Payment Method, click on “Remove “.

Step 2 – If you don’t have a Backup Payment method, it will prompt a popup requesting a new Payment method. Add the new Credit Card details.

 

Step 3 – click “Save and Remove”.

 

For more information, please visit the official Documentation.

Posted on

Reclaiming Analytics

Reclaiming Google Analytics

We can look to re-claim analytics using google’s support tool:

https://support.google.com/analytics/gethelp

Please let them know a little bit about the situation, that you no longer have access to the account that owns the google analytics property on your website

Please include:

  • Your website URL
  • The analytics account number – UA-XXXXXX
  • Internally lost login to the account and wish to regain
  • Which account you’d like to re-gain access under (gmail or g-suite email only).
Posted on

Optimising Videos

Optimising the videos you upload

Download and install Handbrake

https://handbrake.fr

Use this application to optimise your videos. It has some useful included presets as well as offering you control over the level of optimisation to allow you to juggle the pros & cons of quality vs file size.

Sizes

The length of your video is a good indicator for your file size you should be aiming for.

  • For videos around 30 seconds aim for 3-6mb.
  • For videos around 1 minute aim for 6-10mb

For anything over 1 minute use the above as a guide, however to improve page load and the ability for the content to stream to the user consider only uploading small videos that are well optimised or, using a third party service like Vimeo & Youtube instead as they are more capable of streaming longer content.  A change to Vimeo or Youtube may come with other restrictions and additional costs so best to chat with us first if you fee like this is necessary.

A series of settings will help reduce the size your videos. You’ll need to edit a few settings, let it encode, and then check the result. Each setting you turn on could reduce the quality of the video, keep that in mind.

Start with a preset

To start with we recommend loading the video and applying the ‘Gmail Large 3 Minutes preset 720p30’

Make sure ‘Web Optimised’ is clicked

Click ‘Add to Queue’ and then ‘Start’

If the result is under or around the sizes outlined above, then no need to do anything more.

If it’s still not small enough or if the quality isn’t crisp enough

If the video quality or file size is not what you are after then we can look at the following.

  • Go to the Video tab and adjust the Constant Quality range slider- increasing this will make the file larger and better quality, decreasing will reduce file size and possibly the quality. Increase or decrease by a few steps at a time and test. The range should sit between 18-28.
  • Alternatively you can enable ‘Average Bitrate’ and adjust this value and test

Remove Audio

If your video is a background video only you should remove the audio track. Click on the Audio tab an on each sound channel change the dropdown to ‘None’

Posted on

Optimising Images

Optimising your images when updating / adding content

All images should be optimised before they are uploaded to your CMS or used in your EDMs. This is the easiest thing you can do to reduce the page load of your website or EDM. When you optimise an image you should ensure it’s the correct format, the correct size, and that unnecessary data has been stripped out of the image.

Please read through the below to discuss the best approaches.

 

Formats

Your file format makes a big difference to the overall file size and speed of your website.

This type of image should be saved as JPEG. C/o https://thrivethemes.com/jpeg-vs-png/

A graphic like this should be saved as PNG. C/o https://thrivethemes.com/jpeg-vs-png/

Formats for photos (JPEG/JPG)

Photos should be saved as JPGs as that will compress photographic detail better and result in a smaller file size.

https://www.techsmith.com/blog/jpg-vs-png/
C/o https://www.techsmith.com/blog/jpg-vs-png/

Formats for logos / icons (PNG)

Logos and icons will compress better as a PNG.

 

Images Sizes & Dimensions

As a rule of thumb, it would be great to aim for full width / header / hero images having a file size of <450kb.  Smaller tile / inset images being < 200kb (72dpi)

Image max width should be less than 2000px in most instances where a full width image is used, smaller dimensions should be uploaded

 

Optimising Images before uploading

We recommend using an application such as https://imageoptim.com (MAC only). For Windows similar apps such as Pingo (https://css-ig.net/pingo) or ImageOptim online can be used (https://imageoptim.com/online)

  • They won’t reduce the quality. However, they strip out all of the metadata in the file that won’t be needed to simply display the image online. Sometimes this can save 70% of the file size with no quality change.
  • You can enable the applications to also reduce the quality of the image which can result in smaller file sizes with little to no visual change. Generally, a setting of 80% original quality is recommended.
  • Highly recommend running absolutely any image you add to the site / send out in an EDM through this.
  • If using ImageOptim application it’s quick – you can batch optimise images.
Posted on

Adding Efront to Google Tag Manager (GTM)

1. Please sign in here https://marketingplatform.google.com/about/tag-manager/ (click sign in to Tag Manager)

2. Once logged in find the website / account and click the cog top right corner

3. Select ‘user management’ in left column

4. Select + in top right hand corner, select add users

5. Enter the email address efrontanalytics@gmail.com and  set us to be an administrator, and under container settings click “set all” this will bring up a new pop out.

7. In slide out, please click “publish” this will select all boxes. Select ‘Done’

8. Click ‘invite’ top right to complete.

Posted on

Adding Efront to Google Analytics

1. To do so, head to https://analytics.google.com/analytics/web/#/ and login.

2. Once logged in select the account, make sure the right website is written/selected at the top of the page.

3. Click on the cog on the bottom left hand side

4.  Select “Account user Management” in the first column

5. Click the + in the top right corner,  select “add users”

6. Enter the email address efrontanalytics@gmail.com, check the notify new users by checkbox option, and allow us to edit, collaborate, read & analyse * manage users (check all boxes) and hit “add” top right corner.

Posted on

Supplying Artwork to Efront

For design hints download our building the web guide.
For hints about building EDMs download our EDM design cheatsheet.

Getting your designs right is as important to us as it is to you. Below are a few handy hints for supplying artwork to Efront.

Our preference for artwork formats are:

Please check with us if you are supplying artwork in a different format.

Artwork Specs

  • 72 DPI/PPI
  • RGB
  • Layered (not flattened)
  • Different artboards / files per page
  • Units / Guides to be in pixels 
(not mm, cm, points or picas)
  • Please package your artwork so it includes all fonts, links and any resources we might need to open it on our end to avoid any delays.

Artwork layout

Design files for us are not the same as your presentation documents to your client. We can not work with files which have presentation bleeds / margins, laptops / phones / monitors layered over the top.

Artwork should not be broken up into separate screens, 
 it should represent an entire long scrolling page.

We require exported JPEGs/PNGs of your design which we will use for proofing on screen. 
These should be exported at 72dpi RGB.

JPEG / PNG Proofs

This is a good opportunity for you to test your font sizes and the overall design. If you drag and drop these files into 
a Safari browser and click it once it’s in there it will show you the image at the size we will build it.

If something doesn’t look right, you can then update your artwork. Similarly, you can test your mobile artwork by emailing it to yourself and opening it on your phone.

Functionality

Supply a PDF which has additional comments/markup that explains the functionality of your design elements.

Be sure to be specific, clear and include a link to any reference if you think it will help. If you are designing a news / blog section provide a stylesheet for common content found inside a post.

Required Style Elements

  • H1, H2, H3, H4, H5, H6
  • Blockquote
  • Image with caption
  • Embedded video
  • A table
  • A link
  • Unordered list (optional)
  • Ordered list (optional)

We will match the artwork as close as we can. It’s important 
to note that when coding fixed width / fixed height artwork 
into a responsive design, some elements may not be exactly 
as designed at all browser sizes.

For more handy hints, download our building the web guide.
For hints about building EDMs download our EDM design cheatsheet.