Choosing Website Colors

When you start to think about creating a website, most people imagine exactly how they want it to look. Many small businesses tend to choose colors that are either their favorites or derivatives from their logo color. However, many SMEs don’t understand how color combinations look together and rarely understand how their website will be attracting or discouraging potential customers.

Color Palette Types

ColorWheelComplementary

Complementary colors are opposite from one another on the the color wheel. They are high contrasting and give a vibrant look. This is used when you want something to stand out- but be careful, using them with high saturation can be jarring!

ColorWheelAnalogous

Analogous colors are next to each other on the color wheel. This color combination is peaceful and mimics nature. For best use, choose a dominate color, a support color, and an accent color.

ColorWheelTriadic

Triadic colors are evenly spaced in the color wheel with a triangle shape. They make a vibrant and harmonious look especially when a dominate color is chosen with two accent colors.

ColorWheelSplitComplementary

Split complementary colors have one dominant color and two adjacent colors. This color combination has a strong contrast but less tension than the complementary combination.

Tetradic

Tetradic colors consist of four colors with that make a rectangle or square on the color wheel. For best use, choose one dominant color and have a balance between warm and cool colors.

Now, of course some are going to feel overwhelmed will all this information (and rightfully so!). I found an awesome color palette generator, Paletton, that can chose the best colors for you! I tried it out and was extremely impressed! They even give you the RGB color code! Find your exact color code here.

paletton

 

Advertisements

How to Use WordPress Basics

Are you new to WordPress? Don’t feel bad if you’re confused by all the options! The first step is to of course, sing up for an account. Simply go to www.wordpress.com, click on the “Create a Website” button and follow the directions!

Create an About Me page

Screen Shot 2015-09-07 at 4.08.48 PM

  1. Go to wordpress.com
  2. Click on “WP Admin”, this take you to the administrator page
  3. Click on “Pages” on the left menu

This brings you to the “Pages” tab and here you can edit the page WordPress already put in for you, or create a different page. Make sure to put in your content, then press “Publish”, it will then be publish immediately.

Create a Post

Screen Shot 2015-09-07 at 4.21.50 PM

  1. Go to wordpress.com
  2. Click on “WP Admin”, this take you to the administrator page
  3. Click on “Posts” on the left menu

This brings you to the “Posts” tab and here you can create all of your blog posts! Click on the “Add New” button and then start writing! Make sure to put in your content, then press “Publish”, it will then be publish immediately.

Change your Theme

Screen Shot 2015-09-07 at 4.14.59 PM

  1. Go to wordpress.com
  2. Click on “WP Admin”, this take you to the administrator page
  3. Click on “Appearance” on the left menu

This brings you to the “Appearance” tab and here you can change or buy your WordPress theme. You can also play around with the customization features.

Connecting your social media accounts

Screen Shot 2015-09-07 at 4.30.58 PM

  1. Go to wordpress.com
  2. Click on “WP Admin”, this take you to the administrator page
  3. Click on “Settings” on the left menu
  4. Click on “Sharing” tab

This brings you to the “Sharing” tab within the “Settings” tab and here you can change or connect your social media platforms. Make sure you are signed into the accounts you want to connect and then simply press the connect button and follow the directions.

I also recommend looking at the rest of this page, especially the “Twitter username to include in tweets when people share using the Twitter button” section and add your Twitter handle. This adds your Twitter handle when anyone tweets out your blog post!

Creating a Menu

Screen Shot 2015-09-07 at 4.54.02 PM

  1. Go to wordpress.com
  2. Click on “WP Admin”, this take you to the administrator page
  3. Click on “Appearance” on the left menu
  4. Click on “Menus” tab

Under the “Pages” tab make sure to check off the “About Me” page and then click “Add to Menu”. You can then all and categories and/or URL links. Always make sure to click “Save Menu”. You should then refresh your site and you’ll see your menu!

Mobile Marketing- Don’t Get Stuck in the Past

Starting to learn mobile marketing can be daunting for some, it takes lots of background knowledge along with understanding all your options and how to best optimize your results. Mobile marketing is exactly as it sounds:

Marketing on or with a mobile device, i.e. cellphone or tablet.

For most mobile marketing techniques we need to understand the web:

“The primary design principle underlying the web’s usefulness and growth is universality.”

Tim Berners-Lee

Many people think of the “mobile web” differently than “the web“. There isn’t actually a mobile web just as much as their isn’t a laptop web, there is only one web. You can modify your marketing depending on screen size and view ports that may make the web look slightly different on a mobile device and on a laptop.

Now that we know a little bit about the web, I know that many people are still skeptics on if they should actually use mobile marketing techniques or not. Let’s go through some facts from the Pew Research Center.

9 out of 10 American adults own a cellphone

What are they doing?

It’s no secret that people seem to be addicted to their phones, some people (29% as stated above) can’t live without their phones. We know people have them and now we know what they use them for. You have to keep ahead of the game to stay relevant in any industry and mobile isn’t an exception.

Mobile Ads

Mobile ads appear in three different ways:

  1. In a mobile device with a full browser, i.e. smart phone or tablet.
  2. Mobile applications
  3. Devices that make calls, i.e. any cellphone

 

is the biggest power house that every mobile marketer needs to understand!

 

Google has three main mobile marketing advertisements that matter most to mobile marketers. (Note: They also have ads specific for app engagement and/or app downloads.)

Text Ads

These ads look like the most common ads you may be familiar with if you have done any Adwords campaign with Google before. Google automatically will include your Adword campaign in mobile searches but you do have the option to opt out of this. Some marketers opt out so they can create mobile-only ads that they have strategically created for mobile users. To make regular ads mobile friendly, use extensions offered by Google, you will not only receive a higher Ad Rank (ranking within a users search) but you will also be giving your users a better customer experience. Make sure to use the site link, call out, and location extensions to help increase click through rates and make customers happier. Be aware that mobile text ads have higher competition because there is less space to put ads on mobile devices. Using those extensions will help you beat out the competition.

Mobile Image Ads

Image ads are very similar to regular image ads you may already have with Google but you need to make sure you have opted in on the Display Network. We have two types of mobile image ads, banner ads (small strip ads) and interstitial ads (full screen ads). Size matters when choosing photos for these types of ads. To make sure you can run a mobile image ad on mobile apps, you need to have a 320 pixel by 50 pixel photo.

Banner Ad

 

Interstitial Ad

 

Banner ads are the most used mobile image ads. They are have 5 different photo sizes available (in pixels):

320 x 50, 468 x 60, 728 x 90, & 300 x 250

Interstitial ads are ads that are in full screen of the users mobile device. They tend to have higher click through rates, but they also usually have a higher Cost Per Click rate. They have three different mobile phone sizes & two different tablet sizes (in pixels):

Mobile phone: 300 x 250, 320 x 480, & 480 x 320 Tablets: 1024 x 768 & 768 x 1024

 

Call-Only Ads

These are meant to provide business phone numbers to anyone with a mobile device. This doesn’t provide web traffic but instead phone traffic. These types of ads can be more easily beneficial for businesses if they use an extension in the ad instead.


Okay, so now we understand some basic aspects of the types of ads we can create for mobile. Another very important note is that since April 21st,

Google expanded their use of mobile-friendliness as a ranking signal.

This means that when a user is conducting a Google search on a mobile device, more mobile friendly websites will be higher than other websites almost regardless of SEO. For example, if you and your competitor has similar SEO tactics and paid digital marketing campaigns, they could still be higher in the users Google search if their website is more mobile friendly.

Mobile First Approach

“Prepares you for the explosive growth and new opportunities on the mobile internet, forces you to focus, and enables you to innovate in ways you previously couldn’t.”

Luke Wroblewski

When designing your website, starting with mobile can help you exponentially. The many different mobile websites we will get through will prove this even more. The mobile first approach has three main elements to focus on:

  1. Simplify the content
  2. Prioritize they layout
  3. Optimize the user experience

When looking at a mobile website realize that your screen real-estate  is very valuable but also very limiting. By simplifying the content, you take out those unnecessary stock photos that will only take up screen space. You can’t be taking up that space unlike a desktop design so prioritizing your content and knowing what your user will want to see is very important. Take a look at your Google Analytics or any website analytics you have and see what content mobile users are looking at. Finally, we need to make sure our users have a good experience on our mobile sites or they will just click off and move on to the competition.

Mobile Sites

Now that we know mobile sites are important, we have to go through your different options of making your site mobile-friendly.

Fluid Layouts

Layouts that scale based on the size of the view port

Take a look at the GIF above from FROONT, we see one mobile site with relative units and one with static units. The option with relative units changes based on percentages. This allows your website to keep the design you worked so hard on within all platforms. This is a great starting point for any website starting to go mobile because you know your website won’t look strange or have divisions of the site in spots you didn’t intend them to be. The problem is the user experience for fluid websites, the user is now looking at the very small website and will have to zoom in and out the find the information they are looking for.

Adaptive Layouts

To design for controlled adaptation

When creating an active design, you are quite literally designing a website for each device and concept. You will most commonly have a desktop design, a tablet design, and a mobile phone design as the photo above shows from left to right of the Boston Globe. You need to understand your user when creating adaptive designs and understand what information they are looking for while on your site when using those specific devices. As you look at your analytics, find the correlations between mobile user bounce rates on certain pages and mobile user time spent on other content.

Responsive Design

Flexible and universal for optimal customer experience

All responsive designs are adaptive but not all adaptive designs are responsive. Take a look at the GIF by FROONT above, the adaptive design is designed for specific concepts. That means the adaptive design needs to be in specific view port ranges for the website have an optimal user experience. The Responsive design however is the able to be in any view size and work as you have always wanted it to. Now how does that work? Take a look below:

 

Breakpoints are very important to responsive designs. This is showing us that we can chose what divisions of our website will go if the screen port gets smaller. This is however more advanced work and takes much more time to complete. Good thing that developers have tried to make our lives much easier with a few tools:

Bootstrap and jQuery Mobile

An open source, free framework to more easily build responsive websites

These programs help developers design responsive websites much easier. These are free frameworks that anyone can access the CSS and Java files to integrate into their websites.

Bootstrap, owned by Twitter is the most widely used source today. jQuery Mobile has more smartphone-friendly features like the swipe actions. So why do people use Bootstrap more? One important reason is that if jQuery is not integrated into your website properly, your website will run much slower than before. I suggest talking with your developer and find out what sources they are more familiar with.


Now, we have gone through a lot of mobile marketing already but we aren’t finished yet! So take a second before we go into mobile apps and social media marketing.

Mobile Applications

We know that 64% of the American adult population owns a smartphone. Where there are smartphones, there are apps! We will start to understand how to choose if creating an app is best for your business goals and what is the most important information to have once you decided to create one!

Choosing to Develop an App

 A mobile application is a software application that works on a specific mobile device’s operating system and is downloaded to the device to perform a specific set of functions.

Dave Klein

When I’m asked what are the most important aspect to consider when choosing to develop an app or only have a mobile site I lean towards:

  • Reach
  • Experience
  • Cost
  • Maintenance

Below, I have created an easy chart to explain each point’s existence through mobile websites and mobile apps:

 

Basically, you need to understand exactly what you want your app to do and figure if creating an app would be more beneficial to you and your customers than just a mobile site.

Creating a Mobile App

If you have chosen to make a mobile app, you now have many more choices ahead of you! The first would be to decide how you’re going to create an app. The three main ways you can get an app developed are to:

  1. Hire a developer
  2. Learn to Code
  3. Use an App Creator

Hiring a developer can be expensive but it is the more secure way to get what you want from your app. If you chose to hire a developer make sure to ask about all your options and that you understand their pricing structure. You could learn to code yourself. This is a very timely objective depending on your current coding knowledge and spare time. This can also be extremely beneficial since you can create exactly what you want and for the price of your time. Be aware that courses aren’t always cheap but you can learn a lot online! The last option is to use an app creator tool. These are typically the cheapest and easiest way to get an app developed. You do usually have to understand you can’t do everything you want with these but it’s a great starting point.

Make sure to have a clear concept of your app before going ahead!

Map out exactly how you want your app to work along with how you want it to look. This will make sure there is no confusion between any developers you may hire and if you learn to code you can understand exactly if you’ll be able to create this app effectively.


 Now, you know what goes into app development and you can start to understand if developing an app is best for your business. We are going into the last section of our mobile marketing info session, social media!

Social Media

Social media is a very important aspect of marketing now so it is no surprise that it has a big effect on mobile marketing!

Social Media 101

User generated content (UGC) on the web 2.0

This is the mostly widely used academic definition of social media. Social media allows users from around the world create and share content on what we call the web 2.0. The web 1.0 was when you only had HTML and had to call someone to change your website. There was no user base to it, but now we can create content and post it in real time!

There are 9 different types of social media sites:

  1. Social Network
  2. Social Bookmarking
  3. Social News
  4. Social Sharing
  5. Social Events
  6. Blogs
  7. Microblogs
  8. Wikis
  9. Forums/Message Boards

We aren’t going to get into too much of these but we need to understand some of the most popular sites:

  • Facebook
  • Twitter
  • Instagram
  • Pinterest
  • LinkedIn
  • YouTube
  • Google Plus
  • SnapChat

Know the User

So we learned a little about who is on each platform but what exactly are they doing on social media? The Groundswell Tool was developed to tell us just that! They are 6 different user types:

  1. Creator
  2. Critic
  3. Collector
  4. Joiner
  5. Spectator
  6. Inactive

Creators are those who create original content i.e. blog posts. Critics are those who write reviews or comment on websites. Collectors are those who tag/bookmark webpages, think Pinterest users. Joiners are those who use social media channels. Spectators are those who view the content on social media. and Inactive ore those who are signed up but do not participate in any of the previous activities.

Above, is an example of the small business owner target market in the United States. A majority of social media users are spectators so they are reading the content put out there. 35% are also critics so you could be getting reviews for your services from this target!

You know how your target market is engaging online but what social media channel is your target market on? Take a look at these demographics of popular social media channels by Pew Research Center. Be aware that you will be reaching different targets on different platforms and to know who you are already reaching on social media use social media analytic tools like Facebook Insights, Hootsuite, Simply Measured, etc.

Mobile-Only Platforms

We are going to talk briefly about two powerhouses that are mobile device only:

Insta Facts

  • 28% of American adult smartphone owners use Instagram
  • 18% of American adult cellphone owners use Instagram
  • 53% of American adults aged 18-29 use Instagram

We know that Instagram is owned by Facebook and is continuously increasingly in popularity. They have now started to have advertisements within their feed.

6c2db876-1979-49b2-abc0-febc0038ea2apng

Now, this isn’t open for any business to market on quite yet but make sure to keep an eye out in the future!

Snap Facts

  • 12% of American adult smartphone owners use SnapChat
  • 9% of American adult cellphone owners use SnapChat
  • 26% of American adults aged 18-29 use SnapChat

SnapChat is very popular for millennials, meaning it will be very important for anyone marketing to millennials! Marketers usually are hesitant to jump into SnapChat because it’s an unknown world for many. My suggestion would be to create a story each day to upload to your story board about new products, sales, daily updates, etc. about your company. You can make SnapChat work so try out different ideas and see what works best for your audience!

IMG_1160


Are you Still Feeling Stuck?

We went through so much information and it’s completely understandable to still feel stuck and wondering what to do from here. Take the plunge and look into making your website mobile friendly and then more on from there! Here are my top 5 tips to help you through:

  1. Try out Google’s free Analytics Academy.
  2. Look into no-code programs like Weebly, AppyPie, Shoutem, Webydo.
  3. Reach out to professionals! I’m more than happy to help you out so just comment below!
  4. Reach out to local colleges, you never know what events or courses you could take!
  5. Attend webinars and marketing events.


Mobile Marketing eMaze Presentation

Mobile Marketing PDF

What to Know about CSS

Have you ever wanted to know how to understand that code you call a website? First thing first, check out our HTML tips post! The CSS code changes how your website will look, you might be interested in changing the font color, size, make it bold, italic, etc. Without knowing the HTML aspects, you might have a harder time with your CSS. Now, you won’t be able to code after reading this post but you will be able to understand more about your code and how to change basics aspects you want without contacting your web designer.

Selectors { }

When you need to change an over aspect of your blog, you need to know what selector is being used for that section. For example, if you want to change all of the paragraphs to have a specific font, you use p as the selector. The code would look a little something like this:

p {

font-family: Arial;

}

This code will change all of the text within paragraph tags to have the arial font. Be careful when you want to change only one aspect of your website because if you use a broad selector like p, you will change every p tag in your website. I suggest going into your code and looking at the area you want to change. If your code has an id, then it would only change the content where the id has been established. An id selector would look something like this:

#idname {

font-family:Arial;

}

In this code, I chose the idname id and changed everything within that id to have arial font. There are many other ways to select areas of the HTML code but this should help you for now.

Properties:Values;

Now that you’ve found the correct selector, you need to change the correct property. The property could be the font family, font size, color, border, etc. Now there are many more properties than I will explain here but we’ll go over some I think are most important for everyone to know!

font-family:Arial;

font-color:blue;

font-size:5px;

font-weight:bold;

So, I have changed my font family to Arial, my font color to blue, my font size to 5 pixels, and the font weight to be bold. You need to be aware that now everyone will have the same fonts as you, choosing a common font like Arial can almost guarantee your users will see the same font as you. You can also place more fonts after the first and the computer will go through the fonts until the user has one you asked for. 

The font color can be changed to any color you want. To get a specific color, you should go use a color selector to find that perfect color. If you use a specific color, make sure that you have # before the number. When changing the for size, there are many ways to go about this but for you I suggest using pixels. I changed my font to 5 pixels but you could change it to be 12.5 pixels, or any size you want. I then changed the font weight to be bolded, you can also change this to be italic if you need.

Don’t forget to put ; after each value!

Here is the code the www.example.com

CSS

Easy HTML Tips

It amazes me how marketing programs don’t require students to take at least one website design course that focus on HTML, CSS, and Javascript. I don’t think that everyone should be able to build expansive web designs, however, understanding the basics of how websites are built can help marketers exponentially. Large corporations have a tech team to fix any website issues, but small businesses usually outsource their website to professionals. Each time anything needs to be changes they have to connect with the company they outsourced to. After a little bit of learning, I hope you can go into the backside of your website and change different aspects of your website when needed!

One great site that I love to use to help other learn some basic coding is Codecademy! They even have a great HTML and CSS course to help you learn how it works for FREE! The other great aspect is the HTML glossary! Let’s go through some basic aspects to help you understand what they mean and how you can adjust them.

<head>Head</head>

So what is the head? This is a tag that holds important codes that the web users can’t see but are very important to someone coding the website. This holds links to scripts and stylesheets that make your website look nice and interactive. If you look into the <title></title> tags you will see the content that is written on the top of the browser, i.e. Concord, NH Restaurant. So go ahead and change that if you need. For the purpose of basic HTML, move onto the <body>.

<body>Body</body>

Within the body tags you have all the content of your website and that you might want to change.

<h1>Header<h1>

An <h1> tag is a header tag. There are <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. The lower the number the bigger the font size. Usually you have one <h1> tag on each page and a few <h2> and <h3> tags. Once you get lower than <h3> the text is usually the same size as regular text in the paragraph tags.

<p>Paragraph</p>

A <p> tag is a paragraph tag. This is the most common tag you will see and you can do a lot within these tags! If you want to bold something surround the word or statement in <strong>bold</strong> tags. If you want to emphasize something use <em>italic</em> tags. Another tag you can use are the strikeout tags <strike>strikeout</strike>.

Another great point to touch on, if you want to have content on different lines you can’t just do a space within the <p> tags. You can do this in two ways, first you can create two different <p> tags.

<p>My first line is here.</p>

<p>My second line is underneath it!</p>

You can also use the break tag <br />. This would be used within content of the <p> tags.

<p>This is on the top <br /> and this is below it!</p>

<a href=”Hyperlinks”>

So how can  you link to another website? You use an <a></a> tag with an href (Hyperlink Reference). So you first need that hyperlink, let’s use mine. If I want to link some content in my webpage to my blog page I would do it this way:

<a href=”blog.localed.co”>Check out my blog!</a>

This is www.example.com, the code used to build this site is below and I have pointed out where each of the HTML codes explained above!Screen Shot 2015-02-08 at 2.27.50 PMHTMLBasic

Now, you have gone through a lot in this short blog post! Keep in mind there is much more to HTML than what is in this post! Check out our CSS post!