Small Business Web Design Blog


How to Copy and Share Google Docs

Wednesday, July 24th, 2013

This video tutorial will walk you through how to copy and share a Google Doc spreadsheet. Please post any comments or questions below.

Copy and Share Google Doc spreadsheet

Share

How to Edit User Role – WordPress Tutorial

Wednesday, July 3rd, 2013

This is a tutorial on how to edit user roles / user permissions for a WordPress website.

Share

Using FancyBox with Drop Down / Select Fields

Tuesday, September 18th, 2012

I’m posting this because I spent countless hours trying to find a solution that would work, and this is the simplest (and only) one that I found in my research. I am convinced that there is a way built in to FancyBox to do this, but I could not figure it out, and I could not find any documentation that explained how. If you know how to make this work completely within the FancyBox framework, please post a comment.

Feel free to use this solution on any of your projects, but please leave the credits in there and provide one for me here. Thanks.

The Situation
I had a select (drop down) field on my site, and when the user selected a field, I wanted the selected field to trigger a link that would open a FancyBox pop up window that would be populated by an iframe source.

The Problem
FancyBox works only on links (a href tags) that have a specific class, and you cannot give a standard select field option an a href tag. I did try to create an unordered list and style it to look like a select field, but it didn’t work very well for me, and it wasn’t really the objective for what I was trying to do.

The Solution
In the end (after about 8 hours of searching and experimenting), I found this solution that worked like a charm. I had to tweak it a bit, of course, to make it work with FancyBox and iframes in my select field. A quick explanation before I get into the code:

1.) Create a select field with options that have the values of the URLs you want to display in the FancyBox,
2.) Rather than a submit button, create a regular a href link that is styled to look like a button,
3.) Install FancyBox on your website either with a WordPress plugin or the manual jQuery install,
4.) Add your FancyBox class or id to the a href link styled to look like a button, and
5.) Use the javascript below to change the value of the a href link when the user selects an option from the select field.

And now for the good stuff…

The FancyBox code (this is for the WordPress FancyBox plugin):


jQuery(function(){

<!-- fancy box -->
jQuery("a.myFancyBoxClass").fancybox({
'transitionIn': 'elastic',
'transitionOut': 'elastic',
'speedIn': 600,
'speedOut': 200,
'width':275,
'height':300,
'type': 'iframe'
});

})

The javascript:


<script type="text/javascript">
function update()
{
var newLink = document.myFormName.mySelectName.value;
document.getElementById("myCustomLink").href = newLink;
return;
}
</script>

The link CSS to make it look like a button:


<style type="text/css">
<!--

#myCustomLink {
background-image: url('myCustomButtonImage.jpg');
background-repeat: no-repeat;
background-color: transparent;
background-position: top left;
width: 109px;
height: 30px;
border: 0px;
cursor: pointer;
margin: 1px 0px 0px 4px;
clear: none;
text-align: center;
display: inline-block;
}
a#myCustomLink {
color: #484848;
text-transform: uppercase;
text-decoration: none;
font-size: 0.8em;
font-family: Arial, Verdana;
padding: 7px 0px 0px 0px;
}

-->
</style>

The HTML:


<form name="myFormName">
<select name="mySelectName" onchange="update();">

<option value="" selected="selected">Choose an option...</option>
<option value="http://someURL.com">Option Value 1</option>
<option value="http://someURL.com">Option Value 2</option>
<option value="http://someURL.com">Option Value 3</option>
<option value="http://someURL.com ">Option Value 4</option>
<option value="http://someURL.com">Option Value 5</option>
</select>
<a href="#" class="myFancyBoxClass" name="all" id="myCustomLink">SUBMIT</a>
</form>

Below is a working example. Make a selection from the drop down, and then click the submit button. You should see the website pop up in a FancyBox iframe.

Submit
Share

New iPhone 5 Prototype Images Released

Thursday, August 23rd, 2012
iPhone 5 Prototype - Two Nine Web Design

New iPhone 5 protoype – image used with permission from BS Media

Here’s a little Friday fun.

Images of yet another iPhone 5 prototype were released today by the Bold Solutions Media agency. While Apple has not yet confirmed whether or not they will be working with BS Media, the agency has initiated a public frenzy with the release of their images and information about the prototype design.

“There are some real big changes to the traditional iPhone design with this new prototype,” stated Ian P. Daly, PR Manager for BS Media. “For one thing, the user interface is exponentially larger than the traditional iPhone models, making it much easier to see and use the functionality of the phone. The digital display has been replaced with a number touchpad, as that has been a big complaint with previous iPhone models.”

Other changes that the new prototype boasts include a native, wired ear piece to allow easier and safer use when driving, a hand crank that extends battery life through human-produced AC current generation, displaying the iconic Apple logo on the phone’s face rather than it’s back, and optional double shoulder straps for the phone to be worn like a backpack or a single “sling-like” strap for the phone to be worn over one shoulder.

When asked about the apparent absence of the popular app functionality, Daly stated, “Apps are so 21st Century. This prototype is a 22nd Century phone. It’s the future of mobile devices that we, and Apple, are interested in. Apple has always been and always will be on the forefront of mobile technology development, and this is a huge leap forward for humankind.” In addition to the “simplification” of the new iPhone 5 prototype by removing the app functionality, ringtone options have been reduced to just one, a double bell sound.

Daly was quick to point out the hand crank feature introduced with this new prototype serves a double function. In addition to being able to charge the battery of the phone, the hand crank can also be used to connect directly to an Apple customer service representative. The customer service representative will be able to offer technical support with the use of the phone and will also provide the capability to connect to desired parties by voice command. “In the simplification process, we decided to get rid of the digital display in order to keep our future focus. All text messages are sent and received by voice through Apple’s live customer service reps. It’s Siri 2.0!,” raved Daly.

When questioned about his firms ability and competence to successfully design and launch the new iPhone 5 prototype, Daly defensively pointed at the images of the new prototype and exclaimed, “THIS IS BS!”

Share

Custom Facebook App – Adding A Custom Icon to Your Fan Page with Timeline

Monday, March 19th, 2012

I’ve seen a lot of people out there looking for how to add a custom icon for their custom Facebook app, one that is larger than the standard app icons and fills the entire box on their fan page timeline layout.

It’s actually much simpler than most people would think, which is probably why many people are having trouble figuring out how to do it.

First off, you will need a custom icon that is the right dimensions, or at least the right proportions. The standard size for a Facebook app custom icon is 111x74px. If you upload an image that is larger than these dimensions, it will be automatically resized.

*It’s important to note that you can only add a custom icon if you are 1.) using timeline for Facebook business page and 2.) you can only add one to a custom Facebook app that you’ve created. You cannot add your own icon to third party Facebook apps that you’ve added to your page.

Now for the goods.

  1. Go to your Facebook business page.
  2. If you’re not currently using timeline, click the “Preview” button at the top of the page to activate timeline for your business page (using preview will allow admins of the page to see what it will look like in timeline, but normal, non-admin, visitors to your business page will still the “classic” look).

    Facebook custom app icon

    Click the "Preview" button to enable timeline for your page

  3. Once timeline is activated, click the “Admin” button near the top right corner of the page. The admin panel will slide down.
Facebook custom app icon - Admin panel button

Click the "Admin Panel" button in the upper right corner of your page

  1. Click the “Manage” button. A drop down menu will appear, then click the “Edit Page” menu item. You will be taken to the standard Facebook business page admin panel.
Facebook custom app icon - edit page menu item

Click the "Manage" button and select the "Edit Page" menu item

  1. Scroll down to the “Apps” tab on the left side of the page, and click it. A list of all the apps you have installed for your business page will appear.
  2. Find the custom Facebook app that you’ve created, and click “Edit Settings”. A pop up window will open.
Facebook custom app icon - change custom tab image

Click "Change" next to "Custom Tab Image:"

  1. Click “Change” next to “Custom Tab Image:”. The standard browse for images pop up will appear.
  2. Click “Browse” to choose an image located on your computer.
  3. Navigate to the image you want to use for your Facebook custom app icon, and double click it.
  4. Close the pop up windows, then scroll to the top of the admin panel, and click the “View page” button near the top right corner of the screen.

You should see the icon you selected in the box for your custom Facebook app. If you do not see the app you set the icon for, click the arrow to the right of your apps to see if it is hidden with more apps. If you still do not see it, go back to the admin panel and make sure the app you are looking for is enabled.

Hopefully, this is useful for those searching for this info. Please post any comments (gushing gratitude 😉 or questions in the comments to this post.

Share

How to Set Up a Twitter Account – Walkthrough

Wednesday, November 30th, 2011

I’m going to assume that you know what tweets are, what following someone means (no, it’s not like stalking), what Twitter is, and that you know whether or not you should be using it and for what reason. I know what can happen when you assume, but for time and web space I’m going to do it anyway.

This is a super basic “How To” guide, if you want to get more in depth, check out How to REALLY Set Up a Twitter Account (this is coming soon, but will be linked once it’s in existence).

Follow these steps in order:
1. Open your favorite web browser.
2. Type the following URL into the address bar https://twitter.com/signup.
3. In the “Full Name” field, enter your full name.
4. In the “Email” field, enter the email address you want to have associated with your Twitter account. This is the address that Twitter will send important messages (like password resets) and updates (new people who are following you on Twitter and alerts when other Twitter users send you a direct message), so choose wisely.

Twitter sign up password error - TwoNineWebDesign.com

Twitter sign up password error.

5. In the “Password” field, enter the password that you would like to use to access your Twitter account. *Make sure you keep a record of this somewhere, especially if you’re not using Twitter regularly. Twitter requires that your password be at least 6 characters. It will let you know if you choose a password that doesn’t meet the requirements. It will also show you a green bar that will give you an idea of how strong (not likely to be figured out by hackers) your password is. You can increase password strength by using a mix of capital letters, numbers, and special characters (-, _, =, +, etc).
6. In the “Username” field, enter the username that you would like to be associated with your account. This is the name that other Twitter users will see when they look at your profile or at your tweets. There is a 15 character limit for usernames, so you will have to choose one that fits in the box. Twitter will check the availability of the username you choose and give you an error message if someone else has already registered that username.
7. Click the “Create my account” button at the bottom of the screen.
8. You may or may not be asked to fill in a captcha field to make sure you are a real person.

Twitter sign up email connect - TwoNineWebDesign.com

Twitter sign up email connect. You can skip this step.

9. Then, navigate through Twitter’s setup. 1.) explaining what a tweet is, 2.) choosing at least 5 people to follow (don’t worry too much, you can always unfollow them later), 3.) adding at least 5 favorites (which are really just choosing 5 more accounts to follow), and then 4.) a request to access your email account to connect with people in your address book (you can choose “skip this step at the bottom of the sidebar on the right).
10. Twitter will send you an email to confirm your email address (which you must do before you will be allowed to use all of Twitter’s features), so check your email, and click the confirmation link. Clicking the link should take you right back into your new Twitter account with a drop down message that lets you know your account has been confirmed.
11. Start tweeting.

That’s all there is to it. Post any questions/issues as comments, and I’ll be happy to help out as much as I can.

Happy tweeting.

Share

How To Set Up a Website

Thursday, August 25th, 2011

In order to have a website that is viewable on the internet, you must have at least three things. These are: 1.) a domain name, 2.) web hosting, and 3.) website files.

Domain Name

The domain name is the URL, or website address. The domain name of the website you are currently viewing is TwoNineWebDesign.com. In order to claim ownership of a domain name, you must pay a domain name registrar to register the domain name for you. GoDaddy is probably the most commonly known domain name registrar. A registrar will most likely require you to set up an account. Domain name registration is NOT free, but the fees that registrars charge vary. Currently, domain name registration fees range anywhere from $14.95 to $29.99. These fees are recurring and are paid annually. Many registrars offer multi-year domain name registration, so that you do not have to pay each year. Most registrars are very good about notifying you when your domain name registration is about to expire and reminding you to renew; however, if you fail to renew your registration, it will expire, and someone else will be able to buy your domain name.

Web Hosting Provider

A web host is the server where you store the files that tell a web browser how to display your website. Most companies that offer domain name registration also offer web hosting. Some of the basic things that most web hosting providers offer are email accounts, mySQL databases, space on a server, and bandwidth. You should choose a web hosting provider that offers sufficient server space and bandwidth as well as a sufficient number of mySQL databases and email accounts to meet the needs of your website. Web hosting service is usually quoted at a monthly rate, but providers will usually ask you to pay for the entire time period (6 months, 12 months, etc.) up front. Currently, web hosting fees range anywhere from $3.95 per month to $14.95 per month. Many web hosting providers will offer discounts for longer periods of time (i.e., $9.99 per month for 12 months or $7.99 per month for 24 months). It’s a good idea to discuss which web hosting provider you should use with your web designer as many web designers prefer using web hosting providers that they are familiar with.

Website Files

Website files are the files, located on the web server, that actually tell the web browser what your website should look like, including colors, column width and height, where logos appear, etc. Creation of these files is what most people think of when they think of what a web designer does. Website files vary in type and can include anything from html, css, php, asp, javascript, sql, and more. For the purpose of this article, I won’t get into the differences between these file types. You do a quick search on your favorite search engine to learn more. Basically, when you surf the web and look at a web page, you are looking at a website file that is being rendered by your web browser (Internet Explorer, Firefox, Chrome, Safari, etc.). You can create website files yourself or hire someone to create them for you. The quality of your website (look and feel of the site) will depend on the knowledge and experience of the person creating the website files. An easy way for someone with little or no experience or knowledge to create website files is to use a content management system (CMS). However, if you want a truly unique and customized look and feel to your website, you will most likely need to find a web designer to create custom website files for you.

Words of Warning

Some small business owners who are not too technically savvy will ask their web designer to take care of all the “website stuff”, including the domain registration and web hosting. A trustworthy web designer will walk you through the process of registering the domain names and setting up the hosting account in YOUR name. A shady web designer will “take care” of it for you by registering the domain name and setting up the hosting account in THEIR name.

DO NOT let your web designer register the domain name or set up the hosting account in anyone’s name but yours. The domain name and the hosting is YOUR property, and YOU should have full control over it and access to it. If you bought a vehicle for your business, you would never consider putting the name of the salesperson who sold it to you on the title. You would be sure to put your name on it because it is your property. The same goes for domain name registration and hosting accounts.

As a small business owner, you may be very trusting and know a “great” person who is a web designer that would never do you wrong. Whether or not you are right about her/his character, you should still have everything in your name. This is because if the domain name registration and hosting account are in the name of your web designer and something happens to her/him (like death), you will have no way of proving that they actually belong to you, and you will have to start from scratch with a new domain name and hosting account.

Save yourself the hassle, and do it properly from the start.

Share

What Is a CMS?

Monday, August 15th, 2011
Content Management Systems (CMS) - WordPress, Drupal, Joomla

Image from One Story Every Day

CMS (content management systems) use a WYSIWYG (What You See Is What You Get) system to create content for web pages. WYSIWYGs operate much like common word processing programs like Microsoft Word. They usually have text editors that include buttons to format the text and images you input with bold, italics, underline, right, left, and center justification, and much more. There are numerous CMS, but some of the most common ones are WordPress, Joomla, and Drupal. The common CMS are free to download and use, and there are many free templates available that will give you some options on the look and feel of your website. If you want a website that is unique and does not look like anyone else’s, you will need to design your own theme or hire someone to do it for you. For more info on CMS, go to Wikipedia.

Share

Does My Business Need a Website?

Wednesday, February 2nd, 2011

The short answer is yes, but in the words of the Merovingian, it’s not the answer that we search for rather the why. So the real question is why does your business need a website?

In the United States, only 54% of small businesses have a website1. In the United States in 2008, electronic commerce accounted for $3.7 trillion with business to consumer transactions accounting for $288 billion2. Since only half of small businesses in the U.S. have websites, there is still a huge online market share to be had.

Some readers may be thinking, “That’s all well and good if my business was focused on selling a product, but my business is about providing a service that requires face-to-face interaction with the customer.” Well, in the United States, there are nearly 240 million internet users, who account for just over 77% of the population in the U.S.3. Your website is your digital storefront. If you don’t sell products on your website, you can still provide valuable information to customers and potential customers, like your location, operating hours, testimonials, and background information about your company. You can also use your website to automate some functions of your business, like collecting preliminary information and contact information from customers and potential customers. The two largest advantages digital storefronts have over brick and mortar storefronts are that they are open 24 hours a day and that they provide convenient access for your customers and potential customers.

For some more information on why your small business should have a website, check out this article.

1Why Your Small Business Needs a Website in 2010.
2U.S. Census Bureau 2008 E-Commerce Multi-Sector E-Stats Report
3United States of America: Internet Usage and Broadband Usage Report

Share