Get Over Your Technophobia With These Simple Tricks

Modern blog platforms, like WordPress, make it easy for anyone to write content for a website without much knowledge of HTML or CSS. You can simply use a WYSIWYG (the Visual part to HTML/CSS code) editor. It is definitely a great way for non-technical people to write and format content. Here are a few tips that will help you stylize and format your content, so that your posts really draw attention:

Image Sizing and Positioning

It’s no secret that images are an essential part of making a post interesting and visually stimulating. Patrick Winfield wrote an extensive post about finding images online.

After finding your image, it is important to resize it to fit your post. Here is an example of a guy who has some technophobia:

Resize Images offline

When using the WYSIWYG editor, you are able to upload huge resolution images and then specify the size in the browser. However, resizing the images inside a browser is almost never a good idea, for the following reasons:

1. The browser still has to load those huge 2000px images before it resizes them. If you have 10 of those on one page, it will take a while for people to load the page (even though the images appear small.)
2. The images will not appear in the best quality. They may look distorted or pixelated depending on the browser.

Bottom line is, try to resize your images offline using a graphic program like Photoshop, or even MS Paint.

Use tools to quickly sketch the size and positioning of your image

If you need to insert an image into existing text, sometimes you don’t know where to start with the sizing. How large should your image be? Well there are ruler tools out there that help you draw inside your browser. My favorite to use is the Web Developer Add-on for Firefox. It has many useful features in addition to the ruler tool.

Once you bring up the ruler tool, you can draw a square on top of the browser where you think the image will be positioned. The tool then displays the width and the height in pixels. This shows you exactly which size your image should be. Now you can go back to your graphics program and make it that size.

This makes the process much easier. Otherwise you would need to resize an image, insert it, resize it again, refresh the page, repeat… That process gets annoying fast.

Note the image size – 186 x 165. After we insert and align the image to the left, we get something like this:

Instead of the ruler tool, you can also take a screenshot of the page, paste it into a graphics program (such as Photoshop) and try to draw on top of it to figure out the size in a similar manner.

Use Horizontal Space to separate from the text.

Most WYSIWYG editors let you add horizontal and vertical space to the image. I usually use 5px of horizontal space to the images aligned to the left, so that there is some separation between an image and text. Similarly you can type in HTML text right into an img tag of the image. For example:

<img src=”image.jpg” hspace=”5″ />

Use Vertical Space to wrap more lines of text

You can use vertical space trick if there is one line of text that doesn’t wrap anymore. It makes the text wrap around the image + the vertical space.

I usually use this to wrap one more line of text. Otherwise it may get a bit ridiculous from visual standpoint. But this example merely shows how the technique works. The aesthetic quality is up to you.

Colors

If you are using a predefined wordpress theme, the colors will most likely come with it. However, if you want to try some different ones for your text, headings or links, here are some tips.

Use Color Picker tools to get hex value.

Each color that you see on a monitor has a hex value assigned to it, which is a 6-digit number. To get that number you can use Color tools. I use ColorZilla Add-on for Firefox. You can also take a screenshot and paste it into Photoshop, then use the color picker tool there to get the hex value of the color. Let’s say our color number is 1A2D89. Once you know that number, you can use CSS to assign that color to any attribute (heading, link, etc) you want, by adding to that attribute.

color: #1A2D89;

Usually you want to stick to the colors within your theme, so you can use the color picker tool to get the color from the images within your theme and assign them to headings, links, etc.

You can also experiment with some accent colors. Best part is if you see a color you like anywhere on the web, you can grab it by using a color picker tool.

Another useful technique is to get new colors that are in the same “family.” So let’s say your theme is all blue, but you want to add a red color that’s in the same “family”. An interesting thing to experiment with is to start with the color you have, and only change the hue of the color, without changing anything else. You can do this in Photoshop.

For example, let’s start with our theme’s blue color, which is 1A2D89. I want to change it to red. What I would do is open the Color Picker in Photoshop and paste 1A2D89 in there, which brings up the blue. Then only move the Hue marker up or down to get to red. You will see that the hex number changes. My red is 891A1A. Now I can note that number and use it in my stylesheet. Here are the results:

THIS IS MY BLUE

THIS IS MY RED

Since the saturation and brightness of the color is the same, they seem to go perfectly together.

Use CSS inside a stylesheet, unless you will never need to use it again

If you are using a wordpress-based blog or a customized blog, a CSS stylesheet already exists. If you want to change colors or font sizes for your text, headings, or links, it is easier to edit that CSS stylesheet. Applying the color and size inside each post separately every time you need to make a change, will be a total waste of time.

Sometimes people with technophobia just do not want to think about dealing with CSS code. They would rather just use WYSIWYG editor’s built in color and size tools. But here are some reasons why dealing with CSS directly will actually make your life easier.

1. If you want to change a color of a heading, you just have to do it only once in a stylesheet; as opposed to do it 20 different times in your posts.

2. If you want to change that color in the future, guess what? You will need to change it 20 more times… AND this time you will actually NEED to change it 20 times even if you smarten up, since now the heading is taking its color from the inline code, not from the stylesheet anymore. So not only do you have to do more work now, you will also screw yourself (or another developer) in the future.

To keep everything organized, my advice is limit using the WYSIWYG editor’s color and sizing tools. It will only insert the CSS code directly into your post, as opposed to the central stylesheet. It’s best to edit your styles in the stylesheet, and then use WYSIWYG list of Styles (which reads from centralized stylesheet) to assign those styles to headings, text and other formats you may need.

How to do it

If you run a wordpress blog, then go to Design -> Theme Editor and open the style.css file. This is the file that has all the styles for your theme. There are many styles available in there, but here are some that you would probably look to edit:

• body refers to the entire page. This is basically a default style for everything. Usually the default text color and size would be specified here.
• h1, h2, h3, h4 are headings. You can edit the size and color to each one separately.
• a is a link. The ‘a’ tag also has 4 versions (a:link, a:visited, a:hover, a:active) which corresponds to the 4 states a link can be in. Each one can be changed separately.
• p is a paragraph. This helps keep paragraphs styles universal

All the styles that have “#” or “.” in front of them were custom created and can be edited as well.

Word of advice: Before you start editing, save a copy of your original stylesheet as a backup. It is easy to make a mistake. If you do, you can reupload the backup, and your styles will go back to what they were before you started.

I would suggest that you don’t touch anything but colors and sizes, if you are not familiar with CSS. If you are interested in going more in depth, pick up a book on CSS or read some CSS tutorials on the web. There is plenty of information out there. Once you are confident you know what you’re doing with CSS, you can try to adjust other CSS properties to your liking.

Here are the lines dealing with colors, fonts, and sizes that you can edit.

color: #29303B; Feel free to edit that hex number using the techniques described in the color section

font-family: Garamond, Verdana, Arial, sans-serif; These are the fonts being used. You can use more than one font separated by commas. If a person doesn’t have the first font installed on their computer, it will go down the list until it finds the font that is installed.

font-size: 12px; This is the font size. It can be specified in pixels (14px), points (10pt) or em (1.6em). So when you edit that number you can experiment of going higher or lower and see the results until you like something.

The example code below will specify the color, font and size of the text by default:

body {
color: #29303B;
font-family: Garamond, Verdana, Arial, sans-serif;
font-size: 12px;
}

No for Crazy Fonts

Many bloggers want their site text to have a crazy font they spotted somewhere on the web. Please note, there are only a few standard fonts that are used on the web. A web page can only display that font if it is installed on your computer. If you go with a font outside that list, it is not guaranteed that everyone will have it, and some people will see your page in a different font. You can theoretically use non-standard fonts combining them with standard ones. However, if you do this, you better test all the fonts to make sure that your page looks good for each one of them.

Using Tables to position the content

This is a picture of a guy who is afraid to open a CSS stylesheet.

There are many ways to use tables to position the content. In fact, in the early days of the web, this was the most common technique used. CSS positioning has taken over, but you have to be somewhat versed in HTML/CSS to be able to apply CSS positioning techniques. If you are a non-technical blog writer and you want to have some freedom over positioning there is nothing wrong with using tables, as long as you don’t go way overboard.

One example of where a table would be useful, is if you have an image and you want to add some caption under it and then align the image and the caption with the text. This is commonly seen in web pages.

First thing you need is make sure is that your WYSIWYG editor supports tables. WordPress has a great plugin, TinyMCE, that adds more WYSIWYG features to your editor, including the ability to create/edit tables. You may also use a visual program like Dreamweaver (please don’t user Frontpage, as that is the worst program for HTML editing).

When using any WYSIWYG table editor, insert a table with 2 rows and 1 column. The top row will hold the image, and the bottom row will hold the description. The width of the table should be the width of the image. Leave the height blank, since that will expand depending on the content. You may also add 5 pixels of cellpadding to the table so that there is some spacing all around. Align the table to the left or right and hit insert.

Now you can insert the image in the top row. And type in the caption in the bottom row. This is a simple example, but you can use tables to position different things. For example if you have to display 4 pictures in a 2 by 2 setting, etc.

Do Not Paste From MS-Word

Some people like to type their content in MS Word and then copy/paste it into the WYSIWYG editor. This procedure is not recommended as it can cause some unpredictable behavior, depending on what formatting was used in Word.

Even though most WYSIWYG editors have the ‘Paste from Word’ button, that button tries to preserve some of the MS Word formatting, but it is not perfect. Some of the formatting may get messed up causing you to go and try to make adjustments. Even when there seems to be no problem, it may carry a lot of extra code that will become a problem in the future.

So do yourself a favor and write your blogs starting from the WYSIWYG editor. You will more than likely spend more time trying to re-edit it later if you decide on copy/paste from Word.

Don’t forget to subscribe to the 10e20 RSS Feed for more posts just like this!