One last thing

This blog post marks the end of my Web Design Tools class, so I'd like to share my impressions.

Before I take a class, I always research it pretty thoroughly. I look up the syllabus if available, and if it's not, I look for a syllabus from the same instructor in a previous semester. I had a good idea of what this class would be like going into it.

Based on the class material, I knew that we'd learn things I already knew, or could easily learn through my own research, but I didn't want to take the class to learn anything. I wanted to take it to DO something.

I've read about creating websites for years. I own four domains. I've read and bookmarked instructions on creating a web store. But I've never done any of it. I wanted to take this class so that I was responsible for actually creating a website. For that, this class was incredibly effective.

I appreciate that the class is geared toward the end result, not how you get there. If you can find an easy way to accomplish your goal, go with it. I'm obsessed with efficiency (to a point that I inefficiently think too long about the most efficient way to do something!), so I really enjoy that approach. I found Wix and used it for almost everything this class required. Wix doesn't require anything but an HTML5 compatible browser. With only a browser, I was able to make a pretty good looking and entirely functional website in a minimal amount of time.

The biggest thing I learned in this class is how easy and cheap it is to create a website nowadays, even for a novice. I'd encourage any business owner to take this class, because it's a relatively small time and cost investment for knowledge and practice that can earn and save them a lot of money.

Finished....for now

Sam's website is finally "finished." I add the quotations, because a website should never be considered finished, it's always evolving. As Cheers grows and evolves, and as external forces (like technology) does the same, the site should always be updated.

But, for now, Sam's site is in a good place. As I said in one of my earlier posts, I like minimalistic design, but I'm just not good at it. I'm glad I was able to find the template I was on Wix. As one last touch that's sure to attract visitors, I added a mobile-optimized version of the site. This allows people who come upon the site on a mobile phone to view the site more easily.

Here's the full site:

And the web-optimized version:

You can see that the web-optimized version has all of the same content as the full site, but is easier to view and navigate on a phone. The menu across the bottom in the first image allows the user to call us, email us, navigate to Cheers, or go to the Facebook page in a single tap.

Sam's primary goal with this website is to retain customers and attract potential customers. We want to make it very easy for new customers to stumbleupon cheers. Anybody who finds us through a Google search will be able to call or navigate to Cheers in one tap of their phone.

CHA-CHING!

It's finally time for this website to make some money. Unfortunately, it's through selling beer mugs and t-shirts, so I won't see a dime of it.

Because this website isn't the focus of Sam's business, we're keeping our inventory simple. He's going to sell the same merchandise he does in his bar, so it's t-shirts, mugs, and an iPhone case.

We looked at several payment solutions. Because Sam has a bar to run, he doesn't want to spend all of his time managing website sales. To simplify things, we used the built-in Shopping feature of Wix.com. The Wix Shopping Cart has the #1 feature we wanted, payments through PayPal.

With PayPal, they will process all of the payments and Sam won't have to do anything on that front. He has enough financial transactions to manage every day of the week in his bar, he doesn't need to compound his troubles with online sales as well. PayPal will also assume the transactional risk and they have a huge user base with payment information on file, so that makes it more convenient for people to purchase something on the site. Users won't have to fumble around for their credit card and worry about entering it into a site they don't trust.

Using the built in Shopping Cart also ensures that the transactions are secure. I'm doing this for free, so I don't want to be Sam's security expert as well!

Here is a link to the store on our site.

(Disclosure: Wix will not activate the store to accept payments until you convert your site to an eCommerce site. I have not converted my site, so the shopping cart will not actually process payments)

Get Interactive!

I think Sam's site is coming along nicely. One of the key elements that Sam and I discussed was website interaction. A website can be beautiful, but if you don't add any interactive components, visitors will not feel a connection to the site and will be unlikely to return.

For our interactive component, we decided to add a social element. People go to a bar for two reasons. The most obvious reason is to drink alcohol, but the biggest reason is to socialize. If somebody just wants a drink, they can buy alcohol anywhere and drink at home.

To add our social element, I created a Facebook Page and Google+ Page for Cheers. I had recommended these sites to Sam in our initial discussion. We tied these two sites to a social widget from Tint that is supplied in the Wix.com App Market. 

This widget doesn't update as quickly as I'd like, but you have to pay for faster updates, and I've let you all know how cheap Sam is. The widget displays posts from Facebook and Google+, and users can click on a post to repost it to Facebook or Twitter.

I've also added links to both pages in the site footer, so they're easily accessible.

Here's a direct link to the social widget on the site.

If I build it, will they come?

I've made good progress on Sam's website, but that doesn't do any good if nobody can find the site. Time to work on SEO (search engine optimization).

This is another place where Wix made things easy. They have a SEO option that does the work for me. They register the site with Google and I just have to create my SEO title and description.

I changed the title tag to "Cheers Bar | Beer & Good Times | Frisco, TX". It's helpful to include the name, keywords, and the location.

I also updated the meta description tag to "Cheers is the perfect bar in Frisco, Texas to celebrate with friends, or make new ones over cold beer and good food". This is under 150 characters so it does not get truncated.

At the recommendation of Matt Cutts, Google Engineer, I did not add any meta keywords. Google does not scan these, so it's pointless to use this meta tag.

If you'd like to see the progress of the site, you can find it at http://je7979.wix.com/cheers.

*******Out of character disclosure*********
If this were for a real business, I would create Twitter, Google+, and Facebook accounts for the business and cross post to all three.

I may experiment with that, but it feels a little weird creating these accounts for a fake business. I'd hate for somebody to try to visit my business and realize that nothing is at that location!

Change is unavoidable

As I expected when I wrote my post a week ago, I've made some big changes to the plan. I laid out in that post how I would be using 000webhost.com to host Cheers' website. That's no longer the case. Here's why...

I'm not a graphic designer, I'll readily admit that, and I'm not good at website layout. To compensate for my shortcomings, I decided to look for a good website template. As I searched the web, I found a PERFECT template for Cheers' website. Unfortunately, the template is tied to Wix.com and can only be used on their site. I started to look around at Wix and decided that their free hosting will work for our needs.

It turns out, Wix is a great site that fits our needs. I was ready to use Kompozer to edit my site and FileZilla to upload to the FTP. Wix covers all of that. I selected a template and can do all of my editing in the browser and publish immediately.

As of now, I've made a lot of progress building Cheers' site through Wix, and they'll host it for free. I still have to fill out much of the site, but you can find it at http://je7979.wix.com/cheers.

I have my first "job"

My first blog post was about my brother, Sam, purchasing a bar and starting up an online presence. While Sam loved my idea for Facebook and Google+ pages, he's also a smart business man and doesn't want to take any half measures. Part of being a smart business man is realizing that he has a brother that he can blackmail into creating his full website for free. He's also cheap, so we'll be using a free web hosting site.

I covered the different digital presences and how they apply to Sam's bar in my first blog post. Here are the types of digital presences that we determined are good for Sam:

Brochure - Provides information about his bar.
Informational - Updates on events.
Media - Pictures and Video of what's happening at Cheers.
Data Gathering - Customers can sign up for a mailing list.
Interaction - This is on the roadmap, but we may just depend on Facebook and G+ to provide it.
eCommerce - We'd love to make money selling shirts, mugs, and shot glasses.
Promotional - Promotion is the whole purpose of this site.

I'm still a novice web developer, so I won't be getting too fancy with Sam's website. I'd like to keep it simple. I've scoped out the competition and here are a few sites (not all for bars) that I think can inspire our design. I really love "clean," minimalist design, so I wish I was better at it!

http://nakedcitybrewing.com/
http://www.nuevo-aurich.de/
http://www.giannis-steakhouse.com/
http://www.karlyngroup.com/
http://g2geogeske.com/
http://jamrestaurant.com/

After looking at these sites and assessing my skill level, simple is the way to go. I've determined nine pages that we'll start with.

Home
About - To learn the story of Sam and Cheers
Location - A map of where to find Cheers
Contact - How people can reach Cheers
Beer - A list of the beers Cheers serves
Food - The food menu
Events - Upcoming events at Cheers
Mail list - The mail list to receive updates and offers from Cheers
Store - Where customers can purchase Cheers branded merchandise

Now we just have to figure out where we want to host this site. As I wrote earlier, Sam is cheap, so free is our only option. Here are the web hosts I've looked at so far, based on the list that was provided to us in my Web Design Tools class and my own searching.

000webhost.com - This site comes recommended by commenters on my favorite blog (lifehacker.com) where the commenters are usually more helpful than most internet commenters. Their free hosting gives you 1500 MB of disk space and 100 GB data transfers per month. That looks like a good choice.

50webs.com - This is the #1 free host on the list I linked above. They're an option, but they only provide 500 MB of disk space and 5 GB of data transfers per month for free. This is way less than 000webhost.

AwardSpace.com - This is the #2 free host on the list. Their free hosting only gives you 250 MB of disk space and 5 GB of data transfers. Once again, this pales in comparison to 000webhost.com.

DreamHost.com - If I were going with a paid option, I would likely choose DreamHost. They were selected as the best web host by the readers of Lifehacker. Unfortunately, Sam is cheap, so they are out of the equation.

I'm going to read up in my Web Design Tools class to see what my classmates prefer, but I believe my choice will be 000webhost.com. It offers the most bang for Sam's buck (ha ha) and comes recommended by actual users. Of course, this is a very nimble project that we're working on, so if this web host rubs me the wrong way I can always jump to another!

Switching to easy mode

An important part of my Web Design Tools course is not just to learn about creating a digital presence, but learning to do it the easy way. This week, we switch to easy mode.

Without a doubt, the best way to design a web page exactly like you want is to code it in a text editor. This gives you ultimate control over your end result and the possibilities are only limited by the web technologies you're willing to learn.

But sometimes you just want to create something simple in a graphical user interface. That's where WYSIWYG web editors become useful. WYSIWYG stands for "what you see is what you get." You use a GUI to design your website instead of a text editor. The source code of your website may turn out a little sloppy, but it's easier to see your changes as you make them. 

For the purposes of my Web Design Tools assignment, I tried out three different WYSIWYG editors. Here are my thoughts on each. (I should note that the leader in this category is Adobe Dreamweaver. Unfortunately, Dreamweaver is very expensive. For the purposes of this class, we're sticking to free options.)

BlueGriffon

After selecting my three candidates, I was sure that this would be the winner. It was the selection for best free web editor of 2012 by PC Mag. It was the last one I found, but it has been updated recently and includes support for HTML5. 

I installed BlueGriffon and liked the interface. I walked through Professor X's brief recommendation by adding a "Hello world!", centering it and resizing it. All looks good so far. Then I inserted an image. I chose an image from my camera, a massive 4752x3168 pixel photo. Obviously, this huge image extended way off the screen. I tried to resize it so that it would fit. And I tried again. I couldn't figure out how to change the image properties of the image! The only I found to resize the image (other than manually changing it in the HTML code, which defeats the purpose of a WYSIWYG) is to drag the corner in using the mouse. But this picture is so big that I have to do this several times to get it to a manageable size. This oversight immediately disqualified BlueGriffon for me.

SeaMonkey

The next editor I decided to try was #1 on the about.com list of Free WYSIWYG Web Editors for Windows that Professor X linked us to. Let me start with the good: SeaMonkey passed the image resizing test. When you select to insert or edit an image, there is a tab that allows you to change the image dimensions. This is so much easier than the drag-to-resize option in BlueGriffon.

I didn't go much further than that in SeaMonkey. The first thing that became obvious is that this is not just an HTML editor. This is bundled as a total web solution. When you open SeaMonkey, it is a web browser similar to Firefox (it's build on Mozilla's open-source technology). It took me about a minute to figure out how to create a web page. In the bottom-left bar, there are icons for Browser, Mail & Newsgroups, Composer, Address Book, and IRC Chat. The only thing that I need from this software is the composer, so the bundled approach immediately turned me off.

KompoZer

This editor comes highly recommended. It's recommended by Professor X as part of this assignment, but it was also recommended as the top Dreamweaver replacement by one of my favorite sites, Lifehacker.com. Before I saw BlueGriffon, KompoZer was my likely pick. After testing out BlueGriffon and SeaMonkey, KompoZer will be my choice.

KompoZer immediately passed my image resizing test. It has the same exact image insert/edit tabbed menu as SeaMonkey. Unlike SeaMonkey, KompoZer is just a web editor, which is all I need.

Unfortunately, KompoZer hasn't been updated since 2010, so it's likely behind several other options when it comes to features. Since Professor X recommended it, I'm sure it will do everything I need it to for the purpose of my assignments.

Learning HTML

Here's a post where I think I can offer some resources to my fellow classmates.

Assignment 3 in Web Design Tools didn't take me very long to complete. I feel pretty comfortable with HTML, because I learned it this summer. I don't consider myself proficient by any means, but I have a solid understanding and can work my way through HTML and CSS with a little bit of reference material.

Here are my suggestions for anybody that wants to learn HTML (and I think everybody should):

Notepad++
There are several notepad applications that are better than what comes with your OS. For Windows, I really like Notepad++. The best thing about it is that if you open an HTML document (right click the .html and select "Edit in Notepad++") it maintains the HTML structure and colors your tags to make everything easier to read.

Codecademy
This is an awesome place to learn HTML and CSS (and other languages!). This is where i learned HTML and CSS this summer, and have learned a little JavaScript. Everything is broken down into easy lessons with immediate feedback. They've made it feel like a game so that you stay interested in what you're doing. I think it took me a week or so to complete the HTML and CSS tracks. I highly recommend people do this.

W3Schools
This is a great reference for HTML and CSS. Anytime I forget something and need a refresher, I go to w3schools. The site also has several tutorials, but I like Codecademy more for learning and w3schools for reference.

W3C Markup Validator
I love this validator. It will validate your HTML and tell you if it's broken or if it doesn't adhere to standards. The link above leads you to the Direct Input Validator, so you just paste your code into the box and hit the "Check" button. This can help you catch mistakes in your code.

These are my top tools and resources. I hope that someone out there finds them useful!

I've gotta stop working for free

My title is only a joke, of course. I enjoy helping my friends and family to strengthen their digital presence. It also gives me a chance to practice what I'm learning in Professor X's class.

My newest side-venture is helping my buddy's brother to promote his new arcade. Kevin owns a retro arcade and he wants to get younger people to come check it out. Unlike Sam, Kevin doesn't have much time to manage his website, so he needs to keep it simple.

We decided on an approach similar to the one Sam took, except Kevin will only be using a Google+ business page. We decided on Google+ over Facebook for a few reasons. One of the big reasons is to integrate the business with Google Maps and Search results. If anybody searches on their computer or smartphone for a video arcade in Dallas, Kevin's Google+ business page will show in the results.

Google+ is also heavily integrated into Android smartphones and it's popular among young nerds (Kevin's key demographic!).

With the Google+ business page, we've already been able to create an event for Kevin's grand opening and post a video of his arcade. It's very easy for Kevin to add videos and pictures or chat with his customers on this page.

I created the initial page for Kevin and showed him how to update it. Google makes it very simple to update the page and see information like how many visitors you've had.

Feel free to check out the site here.

Already dishing out advice

So my brother, Sam, just bought a bar. Sam knows that I'm pretty savvy with computers, and that I'm taking a class on web design. He has come to me for advice on creating a digital presence.

The first thing we did was sit down and discuss what he hopes to get out of his online presence and what his options are. We had to take into consideration Sam's return on investment, as well.

To help guide Sam along, I showed him a list of online presence options from my Web Design Tools class and we discussed each.

Types of Digital Presences:

Brochure - This is just a simple web page that can help people find his bar. It would offer basic details about his bar, like how to get there and when they're open. This kind of information needs to be on Sam's site, but I think he needs more.

Informational - This site would keep people updated with frequent information, like a blog. I don't think most people want to hear what their local bar owner thinks, so this isn't much help to Sam on its own. It sure would be nice to keep people updated on ongoing events, though.

Media - This kind of site displays video, audio, or pictures. I think this could be a good complement for Sam's site, but doesn't do much for him by itself.

Data Gathering - These sites want you to sign up just so that they can learn information about you and try to sell you something, or sell your information to someone else. Sam wants people to buy his food and alcohol, so our goal is getting them into the bar. Sam has no use for a data gathering site, although collecting certain data can be very helpful. If Sam knows a customer's birthday, why not invite them to celebrate their birthday at his bar?

Interaction - This is a site that allows users to interact with each other or the site. I think we could do something with this. We want customers to feel like everybody knows their name at Sam's bar.

eCommerce - This is a website where you buy stuff. Right now Sam doesn't sell anything but alcohol. He can't sell that online.

Promotional - We're all about promoting Sam's bar, so this is a must.

After going through our options, we decided it was best for Sam to set up Business pages on Google+ and Facebook. Both of these sites are free to setup and maintain. Because Sam is family, I told him I would create both for free. He's a busy bar owner, but he's single, so he can update the sites in his free time. With their robust content management systems, even Sam can update these pages.

Using Google+ will ensure that people searching Google or Google Maps for a bar close to them will get plenty of information about Sam's bar. Facebook allows people to "like" his bar, spread the word to their friends, and interact with each other online.

Sam can post the same content on both sites, so that it doesn't matter where someone finds the bar, they'll get plenty of information!

Between these two websites, we cover all of the digital presences Sam and I discussed, except for the eCommerce, which wasn't important to Sam.

The last thing I recommended to Sam was to purchase a domain name and setup a redirect. Sam purchased www.cheers.com (wow, it wasn't taken!) and I will help him redirect it to his Facebook business site. If his web presence needs to expand in the future, he can always build a site of his own.

Overall, Sam is spending very little money on his web presence (just the cost of his domain), so his return on investment is high. Sam and I agree that this is the best approach for his bar.