n77design – N77 Design | NickClaeboe.com https://www.nickclaeboe.com Atlanta Web, Graphic & Flyer Design • Design Portfolio & Rates for Nick Claeboe Custom Design Work Sat, 26 Nov 2022 21:38:47 +0000 en-US hourly 1 https://wordpress.org/?v=6.5.5 https://www.nickclaeboe.com/wp-content/uploads/2016/05/favicon-60x60.png n77design – N77 Design | NickClaeboe.com https://www.nickclaeboe.com 32 32 4 Branding Strategies Every New Small Business Owner Needs to Know https://www.nickclaeboe.com/2022/11/26/4-branding-strategies-every-new-small-business-owner-needs-to-know/ Sat, 26 Nov 2022 20:43:42 +0000 https://www.nickclaeboe.com/?p=9264

Branding strategies may vary, but their purpose remains the same no matter what the business is: to show customers why they should make certain choices. Your audience will be making the decision to purchase from you over your competitors, and they’ll be doing it in a split second, which is why your branding methods need to be carefully thought out. From your logo and mission statement to the colors you use on your website, every detail of your brand contributes to those customer choices and keeps them coming back. Building trust is the name of the game.

If you’re unsure of where to begin when it comes to design choices, take a look at the services offered at N77 Design, which include website and logo design as well as flyer and banner graphics. Here are a few things to consider where your brand is concerned:

You need to know your customer well

In order to create a marketing strategy that works, you need to know your customer inside and out, which requires quite a bit of research. Find out where your target consumer lives, works, and spends their free time. How old are they? Which social media platforms do they use? You can utilize data analytics tools to gather important information about your ideal customer, which will then inform your branding choices and allow you to create a plan for reaching your audience. Think about these details when building your brand identity:

  • Why should customers buy from you instead of your competitors?
  • How do things like color and font design influence viewers?
  • Which social media platforms offer the best shot at reaching your audience?

Engage your customers with memes and other fun content

Once you know where to reach your ideal customer, you can start forming a plan to engage them with social media content. Posting videos that showcase your products or services and sharing funny, relatable, or inspirational memes are great ways to get customers to interact with your account and remember your business. Memes are especially beneficial for small business owners because they’re easy to share, meaning you’ll get some exposure. Just make sure you keep the content relevant to your business. You can actually create your own images with an online meme maker; just choose a template and customize it with the text and image you want. Here is a meme creator app to help you get started.

Know what branding tasks to get help with

Creating a brand identity isn’t something that can be done in one day, and while you can tackle projects like building a social media presence and sharing engaging content yourself, it’s important to understand which tasks are best handled by a pro. Designing a logo and a website, for instance, might be better done by someone with experience since a lot goes into those elements of a brand. Color and font choices, accessibility, and memorable imagery are just a few details that must be considered with these projects, and a professional can handle all that and more. Take a look at the work done by the team at N77 Design to get an idea of the quality you can expect.

Deliver on your promises

Branding isn’t only about a memorable logo and great design, although those things are important aspects; it’s also about building trust with your customers and showing them what your business brings to the table. That’s why it’s so important to deliver on any promises you make, whether it’s to utilize eco-friendly methods or to make customer service a priority. If your business is based on a fast turnaround time and 2-day shipping, for instance, you’d better be able to deliver if you want to build customer loyalty.

Branding a business comes with a lot to consider, and there are many details that need to work together. Take your time building a strategy, work with professionals when possible, and utilize free tools like meme creators to bring your vision to life.

Have a question for N77 Design? Get in touch using the contact form at the bottom of the pricing page.

]]>
jQuery Migrate Plugin for WordPress https://www.nickclaeboe.com/2021/06/20/jquery-migrate-plugin-for-wordpress/ Sun, 20 Jun 2021 18:46:54 +0000 https://www.nickclaeboe.com/?p=9130

Soon after the WordPress 5.5 update, can the errors. A conflict here and there and missing functionality on more than one of my client’s templates.

After some Googling and quick research I found a few discussion referencing the jQuery Migrate Helper Plugin that’s available for download from the wordpress.org plugin downloads.

This guy, Enable jQuery Migrate Helper has saved the day for me twice now and I don’t doubt a third is on the horizon.

Remember, this plugin is a Band-Aid, quick fix, to any issues or conflicts that you may be experiencing with your JavaScript and jQuery coding. Ideally, you’ll find the actual root of the current conflict and resolve it there. Although that may be an even trickier and deep endeavor, it’s better for your site, server and visitors in the long run.

The plugin is a huge help. It gives you real-time updates on what’s going on with your pages and if they may have any issues to address.

This first example is what you may see while viewing your WordPress Dashboard.

This is the default plugin notification that guide you on what’s going on and what you may need to address.

One more feature of this plugin that’s huge for me, is the update emails.

Once a week you’ll get a hand update on what’s going on with your WordPress theme and what’s up with jQuery Migrate as seen here:

Enable jQuery Migrate Helper is a great solution to resolve some of those maddening error that seem to arise out of nowhere.

Installation
Upload to your plugins folder, usually wp-content/plugins/.
Activate the plugin on the plugin screen.
That’s it! The plugin handles the rest automatically for you.

]]>
Visual Composer Not Working, Showing Short Codes & VC PageBuilder https://www.nickclaeboe.com/2021/06/10/visual-composer-not-working-showing-short-codes-vc-pagebuilder/ Thu, 10 Jun 2021 12:19:42 +0000 https://www.nickclaeboe.com/?p=9120 It happens all the time! You find an amazing WordPress template that will be the future of your online business and once it’s LIVE and ACTIVATED, you see nothing but short codes and you cannot edit anything like you are supposed to.

Below is a screen shot of how my most recent build was rendering the page builder code. Look familiar?

I have your answer. I’ve run into this issue more than once and it’s been maddening every time until I finally found this simple fix.

This issue typically happens with various page builder plugins web designer use to expand the functionality of their WordPress template design.

In the world of constant updates and new code, plugin conflicts are a daily occurrence, this is a simple plugin conflict where your page builder plugins are missing some backward compatibility with the WP editor.

Classic Editor PluginDownload Classic Editor Here

This is a SAVIOR!

And look now! Your ability to use the template page builder is back!

I hope this helps you out as much as it did me. Again, Classic Editor Plugin saved my client’s new WordPress template and I haven’t ran into any more page builder plugin errors or conflicts.

]]>
Time to jump into buying a home, yay real estate. https://www.nickclaeboe.com/2021/03/03/time-to-jump-into-buying-a-home-yay-real-estate/ Wed, 03 Mar 2021 22:19:02 +0000 http://www.nickclaeboe.com/?p=8936

This time has finally arrived where I have decided to start looking into purchasing a home for myself. Quite a few of my close friends have already jumped head first into real estate, and even one of my buddies has a few investment rental properties.

The following is his reply to my simple question. It’s so details and give such good, real world real estate advice, I had to SHARE!

Me:

I officially have 11 months left on my apartment lease. I need to buy a house.

Start now, yes?

Friend:

Eh...  I'd say it is too early to really look at properties.

But it is the perfect time to start getting your credit score in order & saving for a down payment.

Also start considering what you want, what you need, and what neighborhoods support the lifestyle you're looking to live.

I'd say start looking for a property 2 - 3 months prior to your move out date.

And get a pre-approval letter before looking at anything.

Lets say this...  You get pre-approved for $300k.  Target a specific neighborhood, and put in an offer on what you like.

You go under contract, and you'll spend a few weeks getting shit done for due diligence.

Then you'll probably spend another few weeks with other crap trying to close.
2 - 3 months gives you enough contingency to move out without being under the gun & trying to get some month-to-month offer from your landlord.

Also...  You have runway to back out of the deal if something nasty pop's up & find something else.

20%+ down payment will help get you a better interest rate, and it will also help avoid PMI.

If the property is FHA approved, then you can get it for as little as 3.5% down.

My experience with Quicken Loans is they're easy but expensive.

Others are more work, but they're a bit hungrier for your business...and that sometimes means the capital costs less or they're a bit more open to a wider pool of potential customers.

I’d say the biggest one is do this on your timeline. If you let external factors drive your decision timeline, then you’re probably not going to get the best possible deal.

]]>
Bitnami: Start or stop services https://www.nickclaeboe.com/2021/03/03/start-or-stop-services/ Wed, 03 Mar 2021 13:29:47 +0000 http://www.nickclaeboe.com/?p=8899

Each Bitnami stack includes a control script that lets you easily stop, start and restart services. I had to save this for myself as I use these commands DAILY!

Hope this helps others as much as it does me.

Obtain the status of a service:

sudo /opt/bitnami/ctlscript.sh status

Call it without any service name arguments to start all services:

sudo /opt/bitnami/ctlscript.sh start

Or use it to restart a single service, such as Apache only, by passing the service name as argument:

sudo /opt/bitnami/ctlscript.sh restart apache

Use this script to stop all services:

sudo /opt/bitnami/ctlscript.sh stop

Restart the services by running the script without any arguments:

sudo /opt/bitnami/ctlscript.sh restart
]]>
Fun with info graphics https://www.nickclaeboe.com/2020/06/10/fun-with-info-graphics/ Wed, 10 Jun 2020 20:32:21 +0000 http://www.nickclaeboe.com/?p=8825

I’ve been a 100% ‘remote worker’ for a decade now. With nearly our entire world working from home currently, I wanted to put together my top suggestions for anyone who’s never be able to, or enjoy, working from home.

#workRemote #remoteWorker #workfromHome #coder #hacks #illustrator

]]>
Learn Flexbox CSS Layout https://www.nickclaeboe.com/2020/06/08/learn-flexbox-css-layout/ Mon, 08 Jun 2020 11:47:58 +0000 http://www.nickclaeboe.com/?p=8816 Flexbox is AMAZING! As you might imagine based on its name, it’s very flexible. In a nutshell, flexbox is a css layout framework for displaying and positioning parent elements and their children.

Flexbox can be a bit intimidating at first, but like most new things, the more you use it, the easier it gets.

The most challenging part of flexbox for me was getting the containers and flex items straight, but as soon as you do, it’s endless possibilities for your page layout and design. One of the very best resources I’ve found to reference flexbox, is css-tircks.com complete guide to Flexbox.

I’ve been using Flexbox more and more in my daily design and loving it.

Also, check out W3C Candidate Recommendation on CSS Flexible Box Layout Module Level 1

]]>
Rotate URLs with PHP Location Header Exit Code at Fifty Percent Random While Preserving URL string https://www.nickclaeboe.com/2018/06/13/rotate-urls-with-php-location-header-exit-code-at-fifty-percent-random-while-preserving-url-string/ Wed, 13 Jun 2018 11:30:17 +0000 http://www.nickclaeboe.com/?p=557

This is a great piece of code to rotate 2 separate landing page urls using PHP location headers and a 50% random string. This code also preserves the URL string so that any url string variables are sent to the rotated links of the outbound pages.

We achieve this by using a simple redirect script php header.

This snippet of code is excellent for the testing of different landing page offers with different designs and elements, so you may determine which page layout and design performs better.

First, I set up an index.php page in a directory on my site. In this case is was just a simple /r directory. So the file structure would look something like this

https://www.nickclaeboe.com/r/

and the php code would be added to the index.php file in this /r directory.

<?php
if (mt_rand(0,1) == 0) {
header("Location:https://www.nickclaeboe.com/blog/post1/?". $_SERVER['QUERY_STRING']);
exit;
} else {
header("Location:https://www.nickclaeboe.com/blog/post2/?". $_SERVER['QUERY_STRING']);
exit;
}
?>

Using this code, and with it preserving your url string, your traffic link would look something like:

https://www.nickclaeboe.com/r/?yourVariable=this

and with the script above installed on the index.php of the /r directory, the random string in the php snippet will send your traffic to each link approximately 50% of the time, evening out the traffic sent to the 2 pages you are testing. Ultimately, you will see your traffic sent to each page and those links will now look something like this:

https://www.nickclaeboe.com/blog/post1/?yourVariable=this

and

https://www.nickclaeboe.com/blog/post2/?yourVariable=this

I hope this helps you out as much as it’s helped me out.

It’s a very quick and easy way to test 2 separate landing pages with different landing page elements to test what page converts better based on your page variables.

]]>
Set Up, Configure and Install FTP on AWS EC2 Instance – Bitnami LAMP ubuntu-14-04-lts/ Apache2 – vsftpd https://www.nickclaeboe.com/2017/06/27/set-configure-install-ftp-aws-ec2-instance-bitnami-lamp-ubuntu-14-04-lts-apache2-vsftpd/ Tue, 27 Jun 2017 01:02:42 +0000 http://www.nickclaeboe.com/?p=534 Set up new user to use FTP, use $ sudo passwd only to change the password later if needed, $ sudo adduser will prompt you to create a password then.

$ sudo adduser username
$ sudo passwd username

Use the command below to ensure your Ubuntu server and all apps/modules are up to date.

$ sudo apt-get dist-upgrade

If VSFTPD is already installed, use snippet below to remove it and purge the previous config files.

$ sudo apt-get remove --purge vsftpd

Install VSFTPD with snippet below.

$ sudo apt-get install vsftpd

Use snippet below to edit the vsftpd.conf file.

$ sudo nano /etc/vsftpd.conf

While editing the vsftpd.conf file, uncomment the directives below to make vsftpd ‘work’

local_enable=YES
write_enable=YES
chroot_local_user=YES

Add the following directive at the end of your vsftpd.conf file:

allow_writeable_chroot=YES

Once you’re finished editing your vsftpd.conf file, be sure to restart vsftpd with the following command:

$ sudo service vsftpd restart

Use the snippet below to change your access to ‘superuser’ so that you may ‘jail’ the ftp user to a certain directory.

$ sudo su

Use this snippet to tell vsftpd what directory you want to ‘jail’ the ftp user to.

$ usermod --home /opt/bitnami/apps/yourappname/htdocs/ username

Also, be sure to set up an inbound rule in your AWS EC2 instance to all ftp traffic.

TCP/IP Protocol Custom Range 20-21 0:0:0:0:/0

]]>
Simple Javascript Form Validation https://www.nickclaeboe.com/2017/06/11/simple-javascript-form-validation/ Sun, 11 Jun 2017 14:58:19 +0000 http://www.nickclaeboe.com/?p=519

When it comes to contact forms, validating the information submitted by your visitors is key.

With proper form validation, we can help cut down fraudulent submissions and keep you relatively free from spam submissions as well. Below, I’ve gathered one of the simplest methods for validating your contact forms to keep your collected data valid and useful.

I’ve used javascript to validate my webform. You may copy and paste the code below to your site or application, but be sure to update the dependent code to match your web site.

One thing to remember is to invoke the javascript validation of your form with the ‘onSubmit’ tag.

I’ve Included 3 snippets of code to get your web form functioning and validating properly.  Although, the form is validated with javascript, I’ve used PHP to process the mailing function, so that your form sends on submit.

Part 1: The Contact Web Form

The form I’ve provided here is a very simple 4 field form to collect data for you web site or application. Here we’re gathering the basic information we need to gather from a visitor to contact them further regarding their inquiry. Here, we’re collecting Name, Email, Phone Number and their message or question.

<form class="form-container" name="myForm" method="post" onsubmit="return validateForm()" action="sendmail.php">
<div class="frm-element-lg fl">
<input type="text" name="name" id="name" class="icon-1" placeholder="Name*"></div>
<div class="frm-element-lg fl">
<input type="text" name="email" id="email" class="icon-3" placeholder="Email*"></div>
<div class="frm-element-lg fl">
<input type="text" name="phone" id="phone" class="icon-4" placeholder="Phone*" oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '$1');"></div>
<div class="frm-element-lg fl">
<input type="text" name="message" id="message" class="icon-5" placeholder="Message*"></div>
<div style="clear:both;"></div>
<input type="submit" value="Submit" class="submit-btn">
</form>

Part 2: The Form Validation

As stated above, we’re using javascript to validate our form submissions. Here, we set a javascript alert box to pop up on submission if a user has submitted incomplete form fields and we have set our email input field to confirm that the visitor is submitting a correctly formatted email address as well.

There are also 3rd party services you may integrate into your validation to confirm that the email provided is, in fact, a ‘real’ email as well, but that’s getting ahead of ourselves regarding our simple validation here.

<script type="text/javascript">
function validateForm() {
var x = document.forms["myForm"]["name"].value;
if (x == "") {
alert("Name must be filled out");
return false;
}
var x = document.forms["myForm"]["email"].value;
if (x == "") {
alert("Email Address must be filled out");
return false;
}
var x = document.forms["myForm"]["email"].value;
var atpos = x.indexOf("@");
var dotpos = x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length) {
alert("Not a valid e-mail address");
return false;
}
var x = document.forms["myForm"]["phone"].value;
if (x == "") {
alert("Phone number must be filled out");
return false;
}
var x = document.forms["myForm"]["message"].value;
if (x == "") {
alert("Message must be filled out");
return false;
}
}
</script>

Part 3: The Send Function

I’ve included the send function, as well, below. Here we use PHP to ‘send’ the email once the form is filled out by your site visitor and they click submit. You may take the code below and create a ‘sendmail.php’ file that is included in the form code above as the form action.

Be sure that all of your variables and form input name match correctly so that your send function operate correctly.

<?php $email_to = "your@email.com";
$name = $_POST["name"];
$email_from = $_POST["email"];
$message = $_POST["message"];
$phone = $_POST["phone"];

$email_subject = "Feedback from website"; $headers = "From: " . $email_from . "\n";
$headers .= "Reply-To: " . $email_from . "\n"; $message = "Name: ". $name . "\r\nEmail: " . $email_from . "\r\nMessage: " . $message . "\r\nPhone: " . $phone;
ini_set("sendmail_from", $email_from);
$sent = mail($email_to, $email_subject, $message, $headers, "-f" .$email_from);
if ($sent) { header("Location: http://yoursite.com/thankyou.php"); }
else { echo "There has been an error sending your comments. Please try later."; }
?>

There’s several ways available to validate and send your web forms. The method above, I’ve found, is the lightest and simplest way to achieve web form validation. I hope this helps and enjoy.

]]>
Accelerate Your Web Site Using Free Page Speed Test Tools https://www.nickclaeboe.com/2017/05/28/accelerate-web-site-using-free-pagespeed-test-tools/ Sun, 28 May 2017 14:34:25 +0000 http://www.nickclaeboe.com/?p=499

Your website’s page speed is of the utmost importance.

If your site doesn’t load fast enough, your potential customers and conversions are at risk. With our instant gratification culture of today, any page on your web site that takes more that 2 seconds to load fully will be abandoned immediately.

There can be a myriad of reasons that your site doesn’t load quickly. From not optimizing your images before uploading them, to improper server settings, your page load time can slow to a crawl. But, you’re in luck.

Below is a short list of my favorite resources for testing and addressing site page speed.

Free PageSpeed Test Tools:

GTMetrix.com

Pingdom.com

WebPageTest.org

Google Page Speed

Each of the page speed testing sites above will give you vital information on speeding up your website for optimal results. I use each of the urls above just a bit differently. GTMetrix is my favorite of the four. On your results page, they give you a breakdown of what’s causing your issues and give you guided hints on how to address and correct your page’s speed issues.

One of the biggest, and most common, page speed issues is Leverage Browser Caching (generally means that you can specify how long web browsers should keep images, CSS and JS stored locally).

Here is how to address Leverage Browser Caching on your site.  Add the following code to your .htaccess or httpd.conf file, dependent on your server type:

## EXPIRES CACHING ##
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"
## EXPIRES CACHING ##

Setting your leverage browser caching is one of several ways to improve your site’s page speed. A fast website will undoubtedly improve your visitor’s overall experience and catch those potential sales or conversions.

47% of consumers expect a web page to load in 2 seconds or less. (1)

PageSpeed Solution for WordPress Installations

I’ve also found this little gem for your WordPress blog or site. Speed Booster Pack WordPress Plugin address many, if not all, of your page speed issues for your WordPress installation.

Download the plugin for your WordPress site here.

Test, test, test and test some more to get your money making website to reach its fullest potential and as fast as possible. A slow site will kill your conversions and lose you potential sales and leads. Take the time to address every issue you possibly can related to page speed and show your website and visitors some love.

]]>
Using the pen tool in Photoshop for cutouts – v2 – Video Tutorial https://www.nickclaeboe.com/2017/04/01/using-pen-tool-photoshop-cutouts-v2-video-tutorial/ Sat, 01 Apr 2017 10:14:58 +0000 http://www.nickclaeboe.com/?p=487

In a previous article, I posted on the benefits of using the pen tool in Photoshop to create quality cutouts of people or object on a complex background.

With there being many different ways in Photoshop to achieve this effect, I personally have found that using the pen tool is the best tool to use in this situation. You can refer to that blog post here.

Expanding on that post, here, I’ve created a video tutorial on using Photoshop’s pen tool for making precise, quality cutouts of shape and images on various backgrounds.

Although, you may have your own preferred method for making cutouts in Photoshop, this method I have found to be the best at creating high quality cutouts for use on other projects or design.

Thank you and I hope this tutorial video on Photoshop’s pen tool is helpful and informative.

]]>