Epic Websites | Best Web Design Maryland » Web Design Blog

HTML5 Video Scale to Fill Container with jQuery

alaska.alex — Mon, 05 Dec 2011 23:10:52 +0000

I’m working on a new large-background WordPress theme that I am going to release for free within the next two weeks. As part of the theme, I wanted to use a high-definition HTML5 video as the background of the landing page of the theme.

Here’s where I ran into trouble: browsers like to keep the aspect ratio of the video element within the tag the same, no matter what the scale of the containing box is. I didn’t want to change the aspect ratio, I just wanted the video to fill the background and crop any overlap outside of the browser window.

There are a couple libraries that one can use to solve this problem, but I couldn’t get any of them to work for me. Here’s how I did it.

Using an HTML5 Video as a Background For a Website

I found this StackOverflow post that was extremely helpful in figuring out how to scale video to the size of the screen. I had to edit his code a bit to get it to work for me.

Make sure to include jQuery in the of your document:

Here is the HTML I used to get this to work:

Your browser does not support the video tag.

Contents of script.js:

var sxsw = {

full_bleed: function(boxWidth, boxHeight, imgWidth, imgHeight) {

// Calculate new height and width…
var initW = imgWidth;
var initH = imgHeight;
var ratio = initH / initW;

imgWidth = boxWidth;
imgHeight = boxWidth * ratio;

// If the video is not the right height, then make it so…

if(imgHeight < boxHeight){
imgHeight = boxHeight;
imgWidth = imgHeight / ratio;
}

// Return new size for video
return {
width: imgWidth,
height: imgHeight
};

},

init: function() {
var browserHeight = Math.round(jQuery(window).height());
var browserWidth = Math.round(jQuery(window).width());
var videoHeight = $(‘#fullscreen_video’).height();
var videoWidth = $(‘#fullscreen_video’).width();

var new_size = sxsw.full_bleed(browserWidth, browserHeight, videoWidth, videoHeight);

$(‘#fullscreen_video’)
.width(new_size.width)
.height(new_size.height);
}

};

jQuery(document).ready(function($) {

/*
* Full bleed background
*/

sxsw.init();

$(window).resize(function() {

var browserHeight = Math.round($(window).height());
var browserWidth = Math.round($(window).width());
var videoHeight = $(‘#fullscreen_video’).height();
var videoWidth = $(‘#fullscreen_video’).width();

var new_size = sxsw.full_bleed(browserWidth, browserHeight, videoWidth, videoHeight);

$(‘#fullscreen_video’)
.width(new_size.width)
.height(new_size.height);
});
})

The calculation for the full_bleed function was not changed from Drew Baker @ StackOverflow’s original code. All credit goes to him for that solution.

The main problem I ran into using this solution was that jQuery was not reading the size of the original video correctly – it was telling me the size of the video was 150 by 300 pixels when I was sure that the video was 720p. Because it was reading the size values incorrectly, it was calculating the proportion to scale to incorrectly and letterboxing the video. Ensure that your id tag in the HTML matches up with the tag identifier in the jQuery script. Also make sure you specify the size of the video when declaring the tag in the HTML.

Here is the CSS I used to tie everything together and make the video display as a background.

#fullscreen_video
{
background: #FF0000;
position: fixed;
top: 0px;
left: 0px;
z-index: -1000;
}

This code could be easily modified to scale a video to fill a div tag or any container for that matter. You’d have to edit the jQuery so that it measures the size of the video’s container rather than the viewport of the browser. This is the code you’d need to modify:

var browserHeight = Math.round(jQuery(window).height());
var browserWidth = Math.round(jQuery(window).width());

It took me about four hours to get everything working the way I wanted it to. Hopefully this guide will help to expedite this process for some.

Don’t hesitate to Contact Me if you have any questions about how I got this to work or suggestions on how to improve this code.

ADDENDUM:

The above code can be used for scaling other elements too. If you want to have a dynamic large image background that scales to fit the screen -well- the code above can be reworked to make any tag work. I changed my code so that it would fill everything of the “fill” class. You can email me if you’re interested in the code.

Five Simple, Useful HTML Tags

alaska.alex — Wed, 30 Nov 2011 20:53:17 +0000

Most people don’t need to know how an HTML document is formatted or structured. They don’t need to know what goes in the and what goes in the tags. If you have a WordPress site and work with the HTML of pages at all (if you click on the HTML tab on the visual editor), these tags will likely be all you need to know.

Five Useful HTML Tags

Minor note: This is a really simplified guide that does not account for differences between different types and standards of HTML. I’m delivering the most typical and relevant usage of the tags – which is the XHTML version.

– The Paragraph Tag

The simplest and most common of the HTML tags. This tag describes a paragraph of text within a section of content on a web page. This very text here is wrapped in a

tag!

To use a

tag, simply wrap whatever text you want to make into a new paragraph like so:

This is an example of how to use the paragraph tag.

The text will show up like this:

This is an example of how to use the paragraph tag.

It’s just normal text content! Each use of the

tag creates a new line, a break between paragraphs.

Author’s note on line breaks: You may have also seen the
tag used to break text between lines.
is also a valid HTML tag, but it tends to be used incorrectly.
is great when you want to separate specific lines of text – if you’re writing poetry, and you need to add a new line in the middle of the sentence.

is used when you want to start a new paragraph of text. The two tags have similar effects, but are usually styled and formatted differently with CSS. Generally it is best to use the correct tag for the correct situation.

If you switch to the HTML editor on a WordPress page or post you might not see the

tags wrapping each paragraph of text – they are generated later by WP.

– The Hyperlink Tag

is used to specify a section of text that will be displayed as a hyperlink in a browser window.

To create a hyperlink, wrap a section of text in tags. You will also need to specify the destination of the hyperlink using the href parameter.

This will turn into a hyperlink.

Here’s what that tag will look like in your browser:

This will turn into a hyperlink.

Cool, right?

– The Image Tag

The tag is used to insert an image into the page.

Usage:

Here’s what that will look like:

Your image will have to already be on the internet. If you upload your image to a photo service, then use the URL to the image, you can use that URL as the src parameter.

If you’re clever, you can combine the tag with the tag to make a clickable image. Try this:

– The Heading Tag

I consider heading tags to be one of the more important tags. There are six heading tags, ranging from

to

, in descending order of size.

Header tags are super important to organize content on a web page. Also, header tags are one major thing search engines look for for determining relevancy of a particular web page in search engine results. They’re really important!

To make some text a heading, surround it with the appropriate header tag.

This is an H1 tag.

Here’s what that will look like:

This is an H1 tag.

Different levels of header appearance is controlled by the CSS stylesheet of the website. For our site, specific headers are used for special types of text content. I’ll run through the different headers used on this site – but remember – it will look different on every website!

This is an h1 tag.

This is an h2 tag.

This is an h3 tag.

This is an h4 tag.

This is an h5 tag.

This is an h6 tag.

As you can see, each tag is different from the last! Some of them aren’t used on Epic Websites, though. I don’t ever use h6 tags, but that’s just my personal preference.

– The Strong Tag. (read: Bold Tag)

The strong tag bolds text contained within a tag pair.

Usage:

This text will be bold.

This text will be bold.

Simple enough, yeah? Another one to play with is , for italicized.

Interested in learning more about HTML?

w3schools.com has an excellent tutorial on how to use HTML, and is a great resource for learning more about web design.

Review : WordPress SEO by Yoast Plugin

alaska.alex — Tue, 29 Nov 2011 16:51:32 +0000

I started using the Yoast WordPress SEO plugin a few months ago when I saw a link to the Yoast website advertised in my new WordPress installation. I’d used other WP plugins for SEO previously, most notably the All-In-One SEO plugin for WordPress; but I’m always trying the latest and greatest that the WordPress community has to offer.

So, I installed the Yoast WordPress SEO plugin. It took some cleverness to migrate my existing SEO information on the website into the new plugin – I had to use a third-party plugin called SEO Data Transporter to migrate the data – but I eventually got it all sorted out.

Once I had the plugin installed, however, I found it extremely easy to use, both for initial configuration and for doing SEO steps on each page or post.

Many of the fields in the extensive configuration options have descriptions for what they do and how best to set them to boost search engine rankings. I’ve found that for most sites, I don’t even need to touch these options – the initial configuration of the plugin is satisfactory.

In the configuration menu, most of the SEO options have helpful descriptions.

One comment I would have to improve the plugin is to set up some sort of graphic wizard. I can imagine that non-WordPress or non-technically savvy people might want to update how their page titles appear in the settings. Perhaps a little more information on the “Titles” page would go a long way.

The best feature of the plugin is certainly the extensive page- and post- SEO editing ability. Beneath each page and post, Yoast lets you set the title, description, and keywords that the search engine should link to the site for. It shows you a preview of what the site’s listing will look like in a major search engine that updates as you type.

SEO Plugin by Yoast allows you to micromanage exactly how your content appears to search engines.

WordPress SEO is really an all-in-one package. It does everything I need for SEO on my WordPress websites. I couldn’t be happier with the plugin, and deploy it on all of my clients’ sites.

WordPress SEO by Yoast provides everything I need as a developer to effectively manage Search Engine Optimization on my clients’ websites.

Authoring Content with WordPress: Pages and Posts

alaska.alex — Mon, 28 Nov 2011 18:24:12 +0000

WordPress is one of the definitive blog authoring tools for publishing content online. I use WordPress on all of my clients’ websites, and I always give them a demonstration of how to author their content as part of their web development package. Education is essential to my work: a working website is great, a website that the client knows how to update and make changes to is infinitely more valuable.

Part one of my WordPress demonstration is a run-down of how to create content with WordPress. Here goes.

How to Author Content with WordPress

There are two main types of content within the WordPress system: Pages and Posts.

Pages

Pages are for static content that doesn’t change. It’s like your landing page, or your “About Us” page. It’s information about your company and your website that you want every user to have access to. For the majority of the websites I create, most of the website’s content is Pages.

To create a new page on your WordPress site, go to your WordPress website and append “wp-admin” (without the quotes) to the URL of your website in the address bar to get to the login panel for WordPress.

Append wp-admin to the URL of your WordPress website to get to the Dashboard.

After logging in to WordPress, click on “Pages” on the navigation bar to the left of the site.

Click Pages on the left side to get to the Page editing screen.

To create a new page on your WordPress site, you want to click “Add New” under “Pages” on the left side of the bar. You will be brought to the WordPress content editor screen, where you can specify the title and content for the page.

This is an example of the page editing screen on WordPress.

The page editor in WordPress works much like a standard document file editor. Each of the tools at the top provides a different function. We’ll cover what each of them does in a second.

The most basic type of content editing you can do is just to type into the box to make changes to the text, and then click the big blue button that says “Update” or “Publish” on the right side of the browser window.

Press update to save and publish changes to WordPress Page content.

Posts

Posts are used in WordPress for creating all sorts of dynamic content. Most often, they are used as individual blog entries; but sometimes they are used for other purposes as well. For instance, in this site, on Epic Websites’ “Our Work” portfolio page, each individual case study is a Post. What you are reading right now is a Post as well. Posts are always used to create dynamic content that changes and grows with the website.

Creating a Post works much like creating a Page. While logged in to your WordPress backend, click the “Post” category link on the left-hand side navigation bar of WordPress. From there, you can create, edit, and manage all the Posts you’ve created so far, in much the same manner as editing Pages like before.

Click the "Posts" button on the left hand navigation menu to create and edit posts in WordPress.

Basic Text Formatting using WordPress

Text on WordPress pages is formatted by using the toolbox located on top of the content editing window in WordPress. It should look something like this:

This is an example of a WordPress content editing toolbox that you can use to format text and content.

Some of the items on this toolbox should be pretty recognizable if you use a text editor normally. From right to left, the icons are Bold, Italic, strikethrough, bulleted list, numbered list, block quote, align left, align center, align right, hyperlink, delete hyperlink, insert more tag, toggle spellchecker, toggle fullscreen mode, and toggle Kitchen Sink.

Of these options, three of them are less than obvious.

Block Quote

Block Quote Button

The Block Quote button allows users to create block quotes to highlight testimonials, snippets of quote from other people, or specific portions of text.

This is an example of a block quote. Text is usually indented and italicized. Sometimes it is supported with a graphic quote symbol indicating that it is a quote. Block Quotes are great for testimonials, snippets of reviews, et cetera.

When you are in Block Quote mode, the text on the content editor will indent. In order to get back to regular text editing mode, press Enter or Return to make a new line, and then toggle the Block Quote button again.

Insert or Remove Hyperlink

Hyperlink Buttons

The Hyperlink buttons are certainly important tools for content authors. They allow you to link to other content on your site and other websites. WordPress makes that really easy.

By default, the hyperlink buttons are greyed out, which can be a little confusing. There’s a trick to creating hyperlinks in WordPress content.

First, type some text that you want to turn into a link:

turn-me-into-a-link

Then, select that text:

Select the text you want to make into a hyperlink.

Then, with the text selected, click the Hyperlink button.

The active Hyperlink button.

This will bring you to the “Insert/Edit Link” page.

Insert/Edit Link page.

This page is mostly self-explanatory. If you’re linking to content on your website, select a page or post from the list at the bottom. If you’re linking to an external website, type in the URL of the website and an explanatory “Title”. The title is used to describe the site you’re linking to when the user hovers over the link.

Generally, if you’re linking to external content, you want to click the “Open link in new window or tab” button. This ensures that you don’t lose visitors who want to see content you’ve linked to but can’t find their way back to your site.

If you’re linking to internal content, however, this behavior would quickly become annoying. It’s best in that circumstance to leave the box unchecked.

Click “Add Link” to turn the text that you selected previously into a link. The text should show up blue in your editor and as a link in your published content.

Insert More Tag

Insert More Tag Button

This button controls where content for a WordPress excerpt cuts off. Let me explain.

Sometimes, when posts are listed in a blog, the author doesn’t want to put all the content of the post in the list. For example, on my Blog page, I have a text excerpt from each post next to the title. I do this so that visitors to the website can figure out what each post is about without having to scroll through the entire content of the post to get to the next heading. They can read the excerpt, find out if they’re interested in reading the rest of the post, then click the link or scroll past it to the next post.

In WordPress, excerpts are limited to a set number of words. I can’t remember the exact number off the top of my head, but I think it’s around 100 words. WordPress will just find the first 100 words in your post and put them in the excerpt.

If you want just the first paragraph of content to be the excerpt of your post, you can put a “More Tag” in your post. This tells WordPress to cut off the excerpt at that point and tell the reader to click to read more.

This is a nice way of making your excerpts break off naturally, so they don’t cut off in the middle of a sentence, or other such unwanted behavior.

I don’t really use More tags, but for the perfectionist, they’re great.

There are other ways – with certain themes – of micromanaging exactly what your post excerpt/post description says. I’ll explain them in a future post.

The Kitchen Sink

The Kitchen Sink Button

The “Kitchen Sink” button is simple. Toggle it to reveal more icons for advanced text editing and formatting. I’ll explain what these additional buttons do in another post, but click around and play with the different buttons. You’ll quickly figure out that there are many ways of editing text content with WordPress.

Uploading Images, Sound, Video, and attachments.

WordPress is simply not limited to text content. I’ve given you the basics of authoring text content. Next post will show you how to upload images and other embeddable media to your WordPress website.

Review : Unbridled CSS Magic With Skybound Stylizer

alaska.alex — Tue, 15 Nov 2011 08:23:57 +0000

One day I was stumbling through the internet with my favorite little piece of browser software called StumbleUpon when I came across a little piece of CSS-editing software called Stylizer. They made a pretty serious claim on their website.

Stylizer:

A massively productive
visual CSS editor for serious
and aspiring CSS designers.

I watched the video on the website. A browser window shows the rendered HTML of any website on the left, with the various CSS stylesheets’ rules and identifiers aligned vertically in a collapsible list on the right. That seems convenient.

The video went on to show how editing the CSS dynamically and in real-time changed the rendered HTML on the right. Tags for size and position worked by the user clicking and dragging a button to move the image around on the screen on the left. A feature called Bullseye allows the user to select and inspect any HTML element in the browser window, and automatically filter the CSS to the tags which directly modify its behavior.

The software looked very cool.

Nevertheless, I was initially hesitant about trying Stylizer: I really prefer to use free tools, especially open-source tools. I don’t like having to pay for software when there is a free equivalent that is just as good. I won’t. It’s not logical.

But I had never seen a CSS tool similar to Stylizer. Editors that I had used before like Dreamweaver certainly lacked the robustness and productive focus that Stylizer had apparently created. They had a free 14-day trial, so I downloaded the application, which was only available at the time for Windows. Luckily, that’s my operating system of choice.

I fell in love with Stylizer the first time I used it.

The control was intuitive and just as robust as the website described. It is so convenient to be able to edit CSS and see the results instantly in your browser window. The design of the application is very intelligent and well-thought out. Stylizer successfully avoids the trap of endless cascading menus and popup dialog boxes found in Adobe and Microsoft web development products: 99% of the interaction with the application happens in the one window, split between browser and editor.

Stylizer's interface is divided between browser and CSS tags for ease of use

I cannot stress Stylizer’s ease-of-use enough. It has easily doubled my productivity when working with CSS. It is so easy to create, edit, modify, and remove tags. Using the Bullseye feature, it is also very easy to detect and rectify visual glitches and bugs. If your DIV tag is floating weirdly or your text content is cut off, you can press spacebar, click the culprit element in the browser menu, and then see a filtered list of every linked CSS tag that could be causing the issue.

Selecting an element with Stylizer's Bullseye

The Bullseye feature brings up a breadcrumb at the bottom of the screen that shows the element you currently have selected and each nesting container of that element. This way, you can see the organization of your HTML tags graphically so you can better organize your CSS to match. I don’t know of any other application with such a robust system for doing this type of selection and editing.

Another great feature of Stylizer is that it allows you to test and edit CSS dynamically in 9 different browsers – including Chrome, multiple versions of Firefox and IE 6 thru 9.

My only complaint with Stylizer is that occasionally the menu screen used for configuring how to save style sheets to an FTP file server will cause the application to hang and eventually crash. This only happens very rarely, less than 10% of the time. The nice thing is that this only has to be set up once for each website: Stylizer will remember for any given website where you should save or upload the edited CSS files once you configure it for the first time. Once the server is set up initially, the application will only rarely have saving problems.

The other issue that I have with Stylizer is the somewhat restrictive license. The license key is bound to two computers’ hardware – a laptop and a desktop – and must be verified against the Skybound server in order for the application to activate. However, I understand the piracy concerns that have befallen the software industry and that as a small company, Skybound has to take whatever measures necessary to avoid software piracy.

All this should not detract from the point I’m trying to make.

Stylizer is unbridled CSS magic.

Aside from the minor stability issues with saving, and my minor concerns about license restrictiveness, Stylizer is an excellent app and a godsend for anyone who uses CSS. There are literally too many reasons to list why Stylizer is an excellent app. I recommend that if you use CSS, you go download it and try it out today. It was the best $99 I ever had one of my colleagues spend on me.

I definitely give the CSS editing software Stylizer my full endorsement and recommendation. Learn more about Stylizer…

3 Things I Do Immediately After Installing WordPress

alaska.alex — Tue, 15 Nov 2011 05:38:12 +0000

To supplant my earlier post How to Make a Personal Website Without Writing Code, I’ve decided to assemble a list of the things I do immediately following a successful WordPress installation. Every prolific web designer has a pattern when creating a new website, steps that he follows in order to expedite his workflow. This is my unofficial checklist:

Clean Up Default Options

WP’s default options on install mostly make sense, but there are a few steps I take on a fresh WordPress install.

Clean pages and posts.

WordPress comes with default pages and posts to show off the different types of content a site administrator can create with the system. The first thing I do is delete the example posts; just as routine housekeeping.

Create pages and posts that I’m sure will be on the site.

Usually I’ll brainstorm with the client beforehand to come up with the number and name of pages that they will want on the site. Generally this is pretty straightforward. Here’s a list of a typical sitemap that I might create:

Home/Landing Page

About Our Company

Services

Service Category A

Service Category B

Service Category C

Testimonials

Contact

I generally just create blank pages or pages with dummy content on them. The traditional dummy content is a classical Latin text called Lorem Ipsum, which has a long history in use with printers and later, graphic designers.

Set Permalinks to %POSTNAME%.

Setting Permalinks to %postname% in WordPress Settings

Permalinks are what determines how a current page or post appears in the address bar of your browser. For instance, this page appears as http://www.epicwebsites.com/5-things-i-do-immediately-after-installing-wordpress. The permalink for this page is the name of the post. On other websites, it might appear as the index number of the page, which is almost arbitrary. /?p=15 is a lot less pretty than the actual title of the post. Setting the permalink to the name of the post also helps search engines find your content, because it helps match words to what a user is looking for. It’s not a win-all though: good content is the only key to success in search engine results.
To set Permalinks to %POSTNAME%, under “Settings” click “Permalinks”. In the text box on that page type %POSTNAME%, then click “Save”. Easy as pie.

Good content is the only key to success in search engine results.

WordPress Plugins

There are hundreds (thousands?) of useful WordPress Plugins – small pieces of software – designed to extend what WordPress can do. The plugin system is really what makes WordPress such a powerful and useful platform. There are countless blog articles discussing the relative merits of different plugins from different authors – I won’t discuss all that in this post. Here’s a baseline list of what I consider the essentials and how to install them.

Spam-fighting plugin – Akismet

Prevent spam with Akismet WordPress plugin.

One of the problems with having a WordPress site is that if you have a comments system, you are GOING to get spammed. It doesn’t matter if you only get ten real visitors a month. You’ll check your email and six of the comments people have left on your blog every week won’t make sense – it’s because they’re automatically generated by a spam bot. Fortunately, you can use Akismet to fight spam. It’s already installed by default in WordPress, you just have to activate it and register on the site. Don’t worry – it’s free if your site is a personal site. Just sign up your website as a “Personal Blog” and say that you don’t want to contribute any money. Here are the steps to activate Akismet:

Go to “Plugins”

Click “Activate” next to “Akismet”.

At the top of the screen, a yellow box will appear telling you that Akismet is almost ready. Click “enter your API key”.

In the green-yellow box asking you to “Please enter your Akismet key.”, click the link to the right: “Get your key.”

Follow the instructions on the Akismet website.

Enter your key in the textbox on the Akismet plugin configuration page.

Contact form plugin – Contact Form 7

You know those fancy forms on those other websites that let you send the author an email through a form right on the website? You, too, can have one easily with WordPress. Install Contact Form 7 for easy graphic and simple HTML contact forms that you can build and customize yourself. When a visitor to the site fills out the form, WordPress will send you an email with the content of the message on the user’s behalf – without exposing your email address to spammers.

Lightbox 3

When you attach an image to a WordPress page or post, by default WordPress turns the attached image to a link to the full version of that image. It’s convenient, but not exactly pretty. Lightbox 3 opens the image by darkening the rest of the page and overlaying the image on top of the screen. It’s gorgeous and works beautifully. You have to configure the settings to make it open images in LightBox by default – but it’s lovely once you’ve got it all figured out.

Analytics

Google Analytics is a service for webmasters to track how many people are visiting their site and from where. If you have a google account, you can set up an Analytics account for free on the Google Analytics Website.

There are a lot of visitor-counting and -tracking services out there, but I’ve found that Google Analytics is really excellent and robust for a free service. The application statistically analyzes where visitors are coming from (both from which search engines and from where in the world), where they go on your website, and on what pages they lose interest and navigate away from your site. It is incredibly useful to show how effective your website – and specific content on your website – is on the web. It helps you profile and measure your audience and determine whether you’re reaching your goals.

Google Analytics service shows you where in the world your web traffic is coming from.

There’s a plugin that makes Google Analytics installation on WordPress super easy. Called Google Analytics for WordPress, the plugin allows you to install and configure Google Analytics service – provided you have an account – easily on WP. It also adds tracking information next to each page and post so you can track your content’s effectiveness without leaving the WordPress Dashboard.

These are just some really basic WP configuration options, to showcase some features for users to play around with. Sometimes, depending on what I’m doing, the process is much different. I hope that some of this information is helpful to you as you discover WordPress!

How to Make a Personal Website Without Writing Code

alaska.alex — Sat, 05 Nov 2011 00:23:03 +0000

“My friend is an [artist/rockstar/tortoise collector/model] and needs a website. They don’t have any money, so they asked me for help putting one together, but I don’t know where to start!”

As a web designer, I get asked to help people put together personal websites all the time. Most of the time, they aren’t looking for professionally-designed websites, they just want something they can post updates to without learning HTML. If you have 30 minutes and $50, you can get yourself a decent-looking website with relatively little hassle.

A good place to start is by following the steps outlined in the following video by Hank Green. This is basically the way I start creating every website. WordPress installation takes me about four minutes, for you it might take ten.

A clearer outline (and source) on the steps in this video: http://fourminutesite.com

That’s a lot of information delivered very quickly. Here’s my step-by-step guide. I use different websites and hosting company to save money.

Find a domain name.
BustAName.com is an okay place to check names, my personal favorite is called Domai.nr, it suggests lots of alternate names and provides a list of availability for all of them, really fast. A full green box next to the name means it’s available.

Purchase hosting.
Hank suggests that you use anhosting, I don’t have personal experience with them, but the absolute cheapest best hosting you can get is from a company called WebHostingPad, and they offer basically the exact same package as anhosting for twenty four dollars less a year. Word of warning: Don’t use GoDaddy hosting. It’s overly expensive and hard to use.

Wait until the domain name is configured.
There really isn’t much you can do here, it usually takes between 1 and 72 hours to set up a new domain name.

Install WordPress.
Exactly as in the video. Check your email to find the login info, log into the cPanel (located at http://www.[yourdomain].com/cpanel), scroll down and click on “Softaculous”, click on “WordPress”, then click “Install”. Remember: you want to make sure the “In Directory” field is blank! Most hosts provide a very similar process for installing WordPress.

Check out WordPress!
The final screen of the installation screen will provide you with two links. The first will take you to your website. The second, the http://[yourdomain]/wp-admin link, will take you to the administrator panel for WordPress. Remember the /wp-admin url! That’s how you’ll always get to the administrator panel for WordPress.

Install a new theme.
It is now really super easy to install a new theme for WordPress. After logging in to the admin panel at http://[yourdomain]/wp-admin, on the right side click on “Appearance” and then “Themes”. At the tabs at the top, click on “Install”. You can then search for themes to install, or click “Featured” to see the current favorites. When you find one you like, you can click the blue “Install” link next to the theme.

Here's an example of a WordPress "Install Theme" page

Author some content.
Posts are what you’re going to want to create if you’re writing a blog. Pages are what you want to write for static information, like an “About” page, or a “Contact Us” page. There are already some examples installed by default that you can play with.

Explore WordPress.
WordPress is meant to be extensible and modular; which means that there is no definitive guide to how to use it. Different themes and plugins and configurations have different options hidden in different sub-menus. Just click around and explore and figure out what everything does.

A word of warning, however: some think or expect that creating a website is something that can happen overnight. Websites take time and effort and dedication from the author to create quality content. As we say in the web industry, “Content Is King!” I promise you the success of your amateur website will depend almost entirely upon the quality of your content.

How Can I Get More Visitors To My Website?

alaska.alex — Wed, 20 Apr 2011 17:47:42 +0000

Good question. A website is only as good as the attention and potential customers that it gets your company. Even an informational website is only as useful as it is visible.

Fortunately, we’re experts at increasing visitation to your website.

As I mentioned before in my post Does Your Small Business Need A Website?, the first thing people do when looking for more information about your business, products, or services is use a search engine. Therefore, having good search-engine visibility is essential.

You might assume that websites that rank highest in search engines are those with vast advertising budgets, but that isn’t necessarily true.

Skilled web developers know that the best way to increase attention to your business isn’t necessarily through advertising and, more importantly, doesn’t cost gobs of money.

There are simple organizational tricks we use when organizing content that ensure that relevant content on your website is more likely to be featured in results of search engines like Google, Yahoo, or Bing.

The idea is to give hints to the search engine that a page on your site is the most likely to provide an answer to a given search engine query. We understand how the search engines work, so we know how to convince them that your site should be the one that they recommend.

The process I’m describing is called SEO (Search Engine Optimization), and it’s an important step we go through when we put your site online.

How does this help you? Well, we can reduce this concept to a simple equation:

Your Website + Optimization = Higher Visibility = More Customers = More Money In Your Pocket

Does Your Small Business Need a Website?

alaska.alex — Wed, 13 Apr 2011 05:53:17 +0000

Short answer: Definitely.

Long answer: Yes, absolutely.

If you’re a small business, a website is an indispensable asset to establishing your branding and your digital image. Even if you’re not planning on selling online, or entering the social networking scene, a website provides your business with the legitimacy that comes from having an established brand. If nothing else, your business’ website will say to the internet generation, “Yes! We’re exist! This is who we are! Give us a call!”

A common motif among the rising market of new consumers: When we’re curious about a product or service, what’s the first thing we do? We Google for more information. We have learned that the best way to be informed about anything is online. You need to make sure that it’s your information that we’re finding.

The search engine has radically altered how we find information.

Being connected is more than just having a website, though. Businesses are evaluated by customers not solely on credentials alone but also by appearance and exposure. I spend a lot of time thinking about how each client’s site should look, how it’ll sell their services effectively to potential customers.

I can tell you from personal experience in everyday life that the comparative quality of a business’ website usually determines whether I will choose their services over a competitor’s. I will – nine times out of ten – select the business that looks like they’ve spent time and thought on their company’s image. An easy-to-use, beautiful website says to the client, “We’re established. We know what we’re doing. We’re good at what we do.”

Why WordPress?

alaska.alex — Tue, 12 Apr 2011 18:57:04 +0000

Web developers and computer people in general talk a whole lot of jargon that makes very little sense to the layperson. Most of my clients don’t speak geek and don’t have time to learn. They just want a website that looks good and does what it’s supposed to. Fortunately for you, that’s my area of expertise.

One term that I do like to familiarize my clients with is WordPress. WordPress is free web software that allows a person to create a beautiful website or blog. I use the technology on nearly every new site I create for a client.

Originally, WordPress was intended to be used as a blogging tool, like Google’s blogspot.com. It’s evolved naturally through community contribution into a more fully fledged web Content Management System. For both client and developer, WordPress is a godsend. WordPress provides the client with the ability to easily make changes to content once the site has been posted. It’s a clean, organized, yet highly extensible system.

What does this mean for you? Well, it means that long after I finish your site, you’ll be able to go in yourself and make changes to text, post images, and post content updates.

In the past, every change to a website meant lots of work with File Transfer Protocols and HTML and other non-user-friendly technologies. Usually it means hiring and paying a developer premium rates to make simple changes to text.

With WordPress, you don’t need to know HTML to make changes to your content. Posting to your website becomes as easy as posting to a blog, or formatting an email.

You’re not paying me to make simple changes to your content. Using WordPress allows me to focus on what I do best: handling the technical and design aspects of your website. I handle domain registration, hosting, installing WordPress, configuring WordPress, designing a theme, working with PHP, JavaScript, CSS, creating page structure, installing plugins, organizing content, making sure it looks right for every type of computer, administration, and technical support.

People ask me why everybody in the freelance web development world is so crazy about WordPress. My best answer is that in my opinion, no other Content Management System is quite as elegant, extendable, and easy to use as WordPress is.