One of the challenges of building content for a website is deciding how to lay out pages in a way that looks great on a desktop monitor, but also looks great on a mobile device that is as narrow as 640 pixels, or even 320 pixels.

Columns
When you are generating content for your site, you may notice an icon that appears like an arrow curved down and then upward.  That icon is your column break icon.  Using this will insert a column break marker in your content.  But how does the two-column format play out in the world of mobile?

Very simply.  Your website will display the content in a two column format in a wide device, but in a narrower device, that second column will shift downward, and will appear below the first column instead of next to it.

For this reason it's important to remember that when writing content, you should not refer to anything in the second column as being "next to" or "to the right," because depending on the device, it may not be next to the first column at all!

Also, remember that if all your images are in the second column, they are "below the fold" (not visible without scrolling) for mobile users.  For this reason, if you are using columns, you may wish to include some images in both columns.

Speaking of images...

Images
How should you set the width of an image?  When you insert an image, the media dialog will prompt you for an image size.  You should always enter a number and a unit.  What units can you use?  Well, there are a lot of them!  px, em, %, pt, and others.  The ones that will be most useful to you are px (pixels) and % (percent).

If you set the width to "100px," then the image will appear at the same width regardless of the device in which it displays.  For this reason, it's wise to never set the size to more than 300px, since your site may be viewed in a 320 pixel device, and you want to make sure you have at least a little bit of white space around the image.

Another option is to use %.  If I set the width to 40%, that means that the width of the image is 40% of the available content width.  If you are using columns, that's 40% of the column width.  If you're not using columns, that's 40% of the entire content width.

What's the advantage to using percents?  Well, suppose you had set an image width to 100px, and the site is viewed in a device that is narrow enough that your column is 120px wide.  Then you'll have 20 pixels for content to slide around the edge of the image, and it'll look quite ugly.  But if you use a percent, the image will shrink with the column, so you'll never run into that issue.

A good rule of thumb would be: if an image is small - less than 50 (maybe 100) pixels - go ahead and use a fixed size.  But if it's going to take up a big chunk of your content width, use percents instead.