In the meantime, poke around and explore our past work. We’re still the same people, on the same Internet, even in the same time zone (Eastern, if you’re wondering), and we’re dedicated to providing high-quality design and web sites for our clients (especially clients who want penguins on their websites (or clients who are penguins)).

Update 10/26/2011: We’re learning some new and exciting website skills so the site is taking a little longer than originally expected. Right now we hope to launch the new site by the end of November. -Stephanie

Writing Posts

If you have a blog section, you will write a lot of posts. You might also write posts if you have very specific content that changes regularly (Ex: real estate listings, announcements, events, etc.). Even if you mostly do page editing, this section can be helpful to learn about the actual content creation.

Create a Post

1. To create a new post click on Posts and then Add New. Sometimes you might have multiple types of posts with other names (Ex: Events, Announcements, Listings, Services, etc.). If this is the case, just click on the relevant heading, and then on Add New.

Set Up the Post

1. Give your post a title.

2. Before writing your content, make sure the Visual tab is selected. Unless you know HTML, you will be very confused if it is set the HTML tab.

Styling the Post

Many times, when writing content, you will want to change the styling of the text. It’s fairly easy and straightforward but I will describe every icon below.

Bold & Italic: Just like when using a word processor, Bold makes your text bold and Italic makes your text italic.

Strikethrough: If you want to strike-out your text, use this option. Strike this out, please.

Blockquote: When you’re quoting someone, if you want the styling to be special (instead of just in “quotation marks”) use this option. Depending on your website styling, it may look fancy, in a different color, etc. Or it might just be indented.

WordPress is web software you can use to create a beautiful website or blog. We like to say that WordPress is both free and priceless at the same time. — WordPress.org

Align Left, Center, & Right: These options may or may not work, depending on your website’s styling settings.

Insert Link & Unlink: When referring to external sources, it is often good to provide links to those sources. Use the Insert Link (unbroken chain) button to create those links. Highlight the text you want to link and then click on the Insert Link icon.

Enter the address you’re linking to into the Link URL field (Ex: http://wordpress.org) and click the Insert button. (You can also copy and paste the address from another window.) If you need to remove a link, highlight the link and then click the Unlink icon.

Insert More: If you have a blog with a main page, you may decided that some posts/articles are too long. In that case, you can write in introduction and then use the Insert More icon to create a page break. Only the content above the “More” line will show on the main page. A “Read More” link will appear and people can click on that link to read the rest of the article.

Toggle Spellchecker: Use this icon to turn spellchecker on and off.

Toggle Fullscreen mode: If you are writing a long post, it may be easier if you have a larger typing area. Click this icon to expand your writing window to the entire browser screen. You will have to click it again to leave fullscreen mode and save or publish the draft.

Kitchen Sink: If you can’t see the second row of icons, click this button.

Style: There are other ways to style your text besides using Bold and Italic. Most of the time, this drop-down menu will say Paragraph. This is the default setting when writing text. The most common reason for using the Style drop-down is when you are creating a section header. When creating a section header do not use the Bold option. Instead, choose a Heading from the drop-down list. Most page and article titles are either Heading 1 or Heading 2. So when creating sections in your post, the main sections should use Heading 3 while subheadings should be Heading 4, 5 and 6. Note that your website styling may not be specified for Heading 5 and Heading 6.

Underline: Like Bold and Italic, underline works the same as in a word processor. Try to avoid using this, though, as your readers may confuse it with a link.

Align Full: Also know as justified. Like Align left, center and right, this option may or may not work, depending on your website’s styling settings.

Select Text Color: Every once in a while you might want your text to be a different color. For instance, you might want to write, “DO NOT TRY THIS AT HOME!” It will stand out much better if you can make it red, or some other bright color.

Paste as Plain Text & Paste From Word: It’s very possible you will want to copy and paste some text from another location. It is important that you do not paste the text directly into the WordPress window. There could be hidden coding that you can’t see that will cause some very strange problems with the post styling. Most of the time you will want to use the Paste as Plain Text option.

Copy the text from the original location. In the WordPress window, place your cursor where you want the text to be placed. Click on the Paste as Plain Text icon. In the pop-up window, press CTRL+V to paste the text into the pop-up window. Click the Insert button to place the text.

If the original text is in a Microsoft Word document and you want to keep the original formatting, use the Paste From Word option.

Insert / Edit Embedded Media: This button is used to place videos. Unless you have been given special instructions for placing video, it probably won’t work properly.

Insert Custom Character: Sometimes you may want to add a character or symbol that is not on your keyboard. Place your cursor where the custom character should be and click the Custom Character icon. Find the character in the pop-up window that you want to place in your post and click on it. The character will appear in your post.

Here are some of the characters placed into the post: ¿ © ® ½ ¢ ♥ € Ω ↑ æ ñ

Undo & Redo: Undo something you didn’t mean to do. And Redo something you accidentally undid.

Help: This icon will provide you with very minimal help.

Adding Images

You may also want to insert media into your post. The most common option is inserting images. Although there are also icons for inserting Video and Audio, those options may only work if your website is specifically set up for them.

1. First prepare an image for placement. Here is a good explanation on creating images. To insert an image, click on the Add an Image icon.

Click the Select Files button and navigate on your computer to the image you want to upload.

If you choose, you can rename your file. This is name people will see when their mouse hovers over the image. If the image name is not straight-forward, give it descriptive Alternate Text. This way, if the image does not load, or you have a blind visitor (yes they do exist) those visitors will at least know what you’re expecting them to see. Do not put in a caption or a description unless you have been instructed to. The Link URL is where a visitor goes if they click on the image. By default, this links directly to the image location. You can remove the URL entirely, or you can give it a different URL. For instance, you might have a picture of a pumpkin and link the image to the Wikipedia page about pumpkins.

Choose the alignment of your image and your image size. Sometimes this might be restricted by your website styling. Finally, click Insert into Post to paste the image directly into your post; or click Save all changes if you’re not quite ready to place it.

2. If you click Save all changes, you will be moved to the Gallery tab.

The Gallery shows all the files that have been uploaded in association with your post. You can change the details of the image, insert it into the post, or delete it by clicking on the Show link to get the same options on the upload section. If you make changes but are not ready to insert an image yet, click the Save all changes button.

The Gallery Settings section is for when you want to place lots of images in a group. It will create a group of thumbnail images that can be clicked on to see larger versions. If you want to order the images by Menu order, you can rearrange the order of the images by clicking and dragging each image row to the desired position. Once the Gallery Settings are determined, click Insert gallery to place the gallery in your post.

3. Sometimes, you might want to show an image from another location on the internet without saving it and uploading it to your website. To do that, click on the Add an Image icon and choose the From URL tab in the window.

To obtain the image URL, right-click on the original image and choose “Copy Shortcut” (IE), “Copy Image Location” (Firefox), “Copy Link Address” (Chrome), or “Copy Link” (Safari). Paste the URL/Link into the Image URL field. Give your image a title and alternate text and set other options. You might want your image to come from one location but your image to link to another location. Paste the destination URL into the Link Image To field. Finally, click the Insert into Post button.

4. Sometimes you might want to make some changes to an image after it has been placed into a post. First you must click on the image you want to make changes to.

You will see a box around the image and two icons in the upper-left-hand corner. You can resize the image directly in the post by clicking on any of the 8 points (each corner & middle of each side) and dragging. Click on the “No” icon to delete the image. Click on the photo icon to edit the image. A pop-up window will appear where you can make some basic changes to the image. Then click the Update button.

Adding Documents/Files

Sometimes you may also want to attach a document (Ex: PDF, MS Word, MS Excel, etc.)

Click on the Add Media icon

Click the Select Files button and navigate on your computer to the file you want to upload.

In the Title field, enter the text for your link (Ex: Sample PDF) and click the Insert into Post button. Your file will be attached to the post in the form of a link: Sample PDF

Categories

When writing posts, it is helpful for both you and your readers if you categorize. In your Categories window is a list of all your categories. Check the box next to any applicable category. If you want to add a new category, click the + Add New category link and create one. Try to keep your categories to ten or less. Tags (see below) can be used for additional description.

Tags

Categories place your posts into general idea sections. Tags give specific descriptions for more refined searching. Make use of the auto-fill feature so that you don’t end up with three different spellings of the same tag (Ex: Mushroom, mushroom, mushrooms). You can delete a tag by clicking on the little grey Χ to the left of the tag.

Publishing

To publish a post, follow the same instructions as for publishing a page.

Go to Part I: Adding Users | Go to Part II: Adding Pages

Adding Pages

For whatever reason, sometimes you need to create a new page for your website. Sometimes it’s permanently, sometimes only temporarily.

1. To create a new page click on Pages and then Add New.

2. Give your page a Title. Depending on the design of your website, the page title may or may not appear on the published page.

3. Write the content for your page. See Part III: Writing Posts for more details.

4. Links to all pages will appear in the navigation bar. Use the “Page Attributes” window to set the navigation properties. Your website will have top-level links (ex: Home, About, Contact Us). It may also have sublinks (Ex: About->What we do, About->Who we are). If yours is a top-level link, leave Parent set to “(no parent)”. If your page is a sublink, click on the Parent drop-down and choose which main link it will appear under (Ex: for Who we are, choose About).

5. You will also need to set the link order. The Order number under “Page Attributes” determines the position of the link. Every page has a number assigned to it. By default, the assigned number is zero. Zero makes a link first. As the number gets higher, the link gets lower (Ex: Home=0=first, About=3=second, Contact Us=7=last). Say you want to create a temporary conference page that comes after About, but before Contact Us. If About has an Order number of 3 and Contact us has an order number of 7, Conference can have an order number of 4, 5, or 6 to go in between.

6. There are several options in the “Publishing” window.

7. When working on a page that you’re not ready to publish yet, click the Save Draft button.

8. If you want to see what the page will look like, but you’re not ready to publish it yet, click the Preview button. This will open a new window and show you what the final page will look like.

9. Status: Draft vs. Pending Review — If you click Edit next to Status you will see a drop-down menu with the options of Draft or Pending Review. Typically, you’ll just leave the status as draft (the default). You would probably only change the status to Pending Review if someone else is supposed to review the page before it is published. Users with the role of “Contributor” cannot publish posts, so they set the post status to Pending Review to let an editor know it’s ready to publish.

10. Visibility — By default, the visibility is Public. This is what you will usually want to use. However, if you click Edit, you have the option to set it as Password Protected or Private. With Password Protected, you set the password and then you will have to share the password with anyone you want to have access to that page. You probably won’t use this option very often. Private is useful if you have a members only section. Logged in members can see private pages, but not the general public.

11. Publish immediately is the default publishing setting. With this setting, if you hit the Publish button your page will be seen immediately. Lets go back to that conference page, though. You might not want anyone to have access to that page for another two weeks. You can click Edit and then change the publishing date to two weeks in the future. Then, when you click the Publish button will automatically publish on the date you set, but not a minute earlier.

12. You can click on the Pages link to see a list of all your pages, their authors, etc.

13. If you want to remove a page from the public view, just set it as a draft again.

Go to Part I: Adding Users | Go to Part III: Writing Posts

Adding Users

Sometimes you might want other people to help update your website or write blog posts. You can give them user accounts with various levels of restrictions.

1. Click on the Users link at left and then click on Add New.

2. Enter a  Username for the new user (ex: jdoe for Jane Doe). If you wish, you can enter in their name and a website associated with them. You must also enter an E-mail address and a Password for the new user. When creating a password, it’s best to make a basic, simple password and instruct your user to change their password at the first possible chance.

3. The Role option for your user determines the capabilities that user has on your site. You can read more detailed role descriptions in the WordPress documentation. When you want someone to help keep the website updated, Editor is probably your best choice. If you have a member only section, you can set members as subscribers and then they can read private content but cannot make any changes.

4. Click the Add User button to finalize the creation of your new user.

5. You can click on the Users link to see a list of all your users, their roles, etc.

Go to Part II: Adding Pages | Go to Part III: Writing Posts

1. We don’t just claim to use modern web standards, we actual do; including all the industry buzzwords like Ajax, HTML5, CSS3, etc.
2. We ensure that all visitors will have a pleasing experience, no matter what computer or browser they’re using (even outdated ones).
3. We build on top of well-supported open source software like Drupal and WordPress. This mean that your website will be secure, up to date, and easy to maintain. (It also means that you can find someone else who knows how to take care of your site, in the unlikely event you choose to stop working with us or one of Donny’s deer puts us in the hospital.)

Know someone  that wants a website that’s built as well inside as it is outside. Send them our way.

Reprinted with permission under the CC-BY-NC license from http://xkcd.com/773/

Your front page should focus on what’s most important to your site’s visitors, not what’s important to you. Get rid of the splash page of friendly, smiling stock photos. Get rid of the paragraphs of “About” text that no one will read past the first sentence (yes, your story is compelling; you can tell it to your customer in person after you’ve delivered a quality product/service).

Give your website a purpose. Give customers a reason to visit it, and help them find it immediately when they arrive.

We are now excited to announce the launch of http://www.TheWorkingRealtor.com/. Our goal for the website was to make it both easy to find listings, and to learn more about the area.

After a while, as leadership changed, it became more difficult to keep the website updated. It was no longer meeting the needs of The Mercy House and no longer reflected the overall mood of the community. It was time for an update.

When speaking with the pastor about what he wanted there were two main ideas. It needed to be easier to use and update than the current website; and it should have, “Lots of large background images.” The former problem was easy; we rebuilt the site using the up-and-coming WordPress CMS. The latter desire (large background images) was more difficult. When using large background images a designer runs up against a couple different problems. The first is size, if an image is too large it slows down the loading of a website and annoys the visitors. The second problem is that of window resizing. If your image is a fixed size and a visitor opens his browser window to a larger size what does he see? Does he see the image repeat itself? Does he get a stark line where the picture ends?

How do I make it look like a gigantic image while keeping the file-size reasonably small? This is why I love being a designer. It was a tricky problem but as seen below, I finally came up with a solution. The background image is technically the size of an average browser window, however about three-fifths of the image is actually just white. Lots of white reduces the size of the image significantly. It also solves the window-resizing problem. Since the right and bottom edges are solid white all we need is white for an extended background.

This is a welcome change. Providing support for a decade old web browser is severely limiting what we can do on the web and driving up development costs unnecessarily. Hopefully this move by a major player such as Google will goad enough people to upgrade that we can finally leave IE6 behind us.

In the meantime, if you haven’t upgraded you browser recently, perhaps it’s time you do so now. You can upgrade Internet Explorer to version 8, or try another browser, such as Firefox or Chrome.