Web Design Blog

Our jobs are extraordinarily multidisciplinary – we work at a place where interactive media, technology, graphic design, writing, smart business, and social psychology meet and fuse to create a beautiful product. Come read about the latest, all right here.

 

We Make Epic Websites

Posted by on 10:42 pm in Web Design Blog | 1 comment

Hey guys! Thanks for reading my blog. I’ve just started a Facebook page and I’m trying to build a little Epic Websites community – clients, readers, colleagues, friends. It would mean a lot to me if you would like my page! Just click “Like” on the box below to get linked in to my page! Thanks!

 

HTML5 Video Scale to Fill Container with jQuery

Posted by on 6:10 pm in Web Design Blog | 10 comments

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 <video> 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 (http://stackoverflow NULL.com/questions/4380105/html5-video-scale-modes) 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 <head> of your document:

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js”></script>

 

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

        <video width=”1280″ height=”720″ autoplay loop id=”fullscreen_video”>
<source src=”wp-content/themes/StekPortfolio/sample_media/wildlife.mp4″ type=”video/mp4″ />
<source src=”wp-content/themes/StekPortfolio/sample_media/wildlife.ogg” type=”video/ogg” />
Your browser does not support the video tag. <!– Author’s note: this should be replaced with an image, or use the css background tag to fill the background if the browser doesn’t support HTML5 <video>–>
</video>

<script src=”wp-content/themes/StekPortfolio/script.js”></script>

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 <video> 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 (http://www NULL.epicwebsites NULL.com/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

Posted by on 3:53 pm in Web Design Blog | 1 comment

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 <head> and what goes in the <body> 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.

<p> – 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 <p> tag!

To use a <p> tag, simply wrap whatever text you want to make into a new paragraph like so:

<p>This is an example of how to use the paragraph tag.</p>

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 <p> tag creates a new line, a break between paragraphs.

Author’s note on line breaks: You may have also seen the <br /> tag used to break text between lines. <br /> is also a valid HTML tag, but it tends to be used incorrectly. <br /> 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. <p> 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 <p> tags wrapping each paragraph of text – they are generated later by WP.

<a> – The Hyperlink Tag

<a> 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 <a></a> tags. You will also need to specify the destination of the hyperlink using the href parameter.

<a href=”http://www.epicwebsites.com”>This will turn into a hyperlink.</a>

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

This will turn into a hyperlink. (http://www NULL.epicwebsites NULL.com)

Cool, right?

<img> – The Image Tag

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

Usage:

<img src=”logo.png” />

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 <img> tag with the <a> tag to make a clickable image. Try this:

<a href=”http://www.epicwebsites.com”><img  src=”logo.png” /></a>

<h1> – The Heading Tag

I consider heading tags to be one of the more important tags. There are six heading tags, ranging from <h1> to <h6>, 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.

<h1>This is an H1 tag.</h1>

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.

<strong> – The Strong Tag. (read: Bold Tag)

The strong tag bolds text contained within a <strong> </strong> tag pair.

Usage:

<strong>This text will be bold.</strong>

This text will be bold.

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

 

Interested in learning more about HTML?

w3schools.com (http://www NULL.w3schools NULL.com/html/) 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

Posted by on 11:51 am in Web Design Blog | 0 comments

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.

WordPress Seo by Yoast Plugin (http://www NULL.epicwebsites NULL.com/wp-content/uploads/2011/11/WordPress-seo-by-yoast NULL.jpg)

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 descriptions. (http://www NULL.epicwebsites NULL.com/wp-content/uploads/2011/11/wordpress-seo-by-yoast-most-options-have-descriptions NULL.png)

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. (http://www NULL.epicwebsites NULL.com/wp-content/uploads/2011/11/WordPress-seo-allows-you-to-change-name-and-description-easily NULL.png)

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

Posted by on 1:24 pm in Web Design Blog | 0 comments

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.

(more…)

Review : Unbridled CSS Magic With Skybound Stylizer

Posted by on 3:23 am in Web Design Blog | 0 comments

One day I was stumbling through the internet with my favorite little piece of browser software called StumbleUpon (http://www NULL.stumbleupon NULL.com/) when I came across a little piece of CSS-editing software called Stylizer. They made a pretty serious claim on their website.

Stylizer: (http://www NULL.skybound NULL.ca/)

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 Visual CSS Editor Interface (http://www NULL.epicwebsites NULL.com/wp-content/uploads/2011/11/stylizer-interface NULL.png)

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 (http://www NULL.epicwebsites NULL.com/wp-content/uploads/2011/11/selecting-with-bullseye NULL.png)

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… (http://www NULL.skybound NULL.ca/)

3 Things I Do Immediately After Installing WordPress

Posted by on 12:38 am in Web Design Blog | 1 comment

To supplant my earlier post How to Make a Personal Website Without Writing Code (http://www NULL.epicwebsites NULL.com/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:

  1. Home/Landing Page
  2. About Our Company
  3. Services
    1. Service Category A
    2. Service Category B
    3. Service Category C
  4. Testimonials
  5. 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 (http://www NULL.lipsum NULL.com/), which has a long history in use with printers and later, graphic designers.

Set Permalinks to %POSTNAME%.

Setting Permalinks to %postname% in WordPress Settings (http://www NULL.epicwebsites NULL.com/wp-content/uploads/2011/11/permalinkpostname NULL.png)

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

Akismet Logo WordPress Plugin (http://www NULL.epicwebsites NULL.com/wp-content/uploads/2011/11/akismet-logo NULL.png)

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:

  1. Go to “Plugins”
  2. Click “Activate” next to “Akismet”.
  3. At the top of the screen, a yellow box will appear telling you that Akismet is almost ready. Click “enter your API key”.
  4. In the green-yellow box asking you to “Please enter your Akismet key.”, click the link to the right: “Get your key.”
  5. Follow the instructions on the Akismet website.
  6. 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 (http://www NULL.google NULL.com/analytics/).

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 (http://www NULL.epicwebsites NULL.com/wp-content/uploads/2011/11/analytics_map NULL.png)

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 Can I Get More Visitors To My Website?

Posted by on 5:47 pm in Web Design Blog | 0 comments

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? (http://www NULL.epicwebsites NULL.com/?p=151), 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?

Posted by on 5:53 am in Web Design Blog | 0 comments

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.

"Google" Business Card (http://www NULL.epicwebsites NULL.com/)

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?

Posted by on 6:57 pm in Web Design Blog | 0 comments

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 (http://wordpress NULL.org/). 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.

WordPress, the king of the CMS' (http://wordpress NULL.org/)

Originally, WordPress was intended to be used as  a blogging tool, like Google’s blogspot.com (http://blogspot NULL.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.