Yesterday while looking at sports news I came across a picture with a caption that did not include the name of the players pictured, but did include the phrase “Dummy Text” repeated several times. This is hardly the first time I have seen dummy text end up in the final publication.

Filling in text is a fact of life for designers. Simply knowing that the text is supposed to go in a certain section is not enough. You need to be able to see the text. In many cases this also functions as a means to check your CSS.

Lorem Ipsum is a popular option, but it has its flaws. Very few websites are written in Latin and few people are fluent enough in Latin to be able to read and comprehend it. It is harder to get a good sense of the flow of the text and experience reading it if you cannot read the language it is written in.

Another option is to fill in a rough draft of the text that will appear. This has the advantage of giving you the best preview of the design. Unfortunately, you do not always have the information to do write a good rough draft and unless your rough draft is similar to the final text, the advantage is limited. Furthermore this can be a time-consuming option and if you charge by your time a client may not feel that their money will well spent by having you spend 40 minutes writing a rough draft that will be completely changed.

Some designers make up their own text, but there are also horror stories of designers and journalists who accidentally left in their text with embarrassing results. The phrase Dummy Text repeated five times may not impress a client, but it is better than a client seeing text reviewing your neighbor’s hair or suggesting exactly what you want to do with Internet Explorer 6. While you know you would always make sure all of the dummy text has been removed, it is still a good idea to use some common sense with your dummy text.

A compromise option is to use passages from public domain eBooks written in the same language as the website. Project Gutenberg and The Internet Archive have huge collections of public domain books. There are a variety of books from poetry collections to novels to scientific texts to travel diaries to children’s books. While the website you are designing may be about Stephen Hawking’s contributions to science text from a book about Albert Einstein’s contributions complete with diagrams and equations can give you a better sense of how the final text will look than Lorem Ipsum. While Ireland has changed in the past hundred years, if you are creating a website for your friend’s trip to Ireland text from a public domain book about Ireland is an easy way to get an approximation of how the final website will look.

Credit: The text from the picture above comes from Sherlock Holmes which is available from Project Gutenberg

Tumblr is a microblogging platform that is excellent for short posts. Just as television has not displaced listening to music, Tumblr does not displace the need for WordPress or other blogging platforms, but for some types of posts it is the better choice.

It is Free

While you can pay for custom themes or extras such as promoting your blog, Tumblr can be fully utilized for free.

It is Easy

For many users the biggest advantages of Tumblr is its ease-of-use. There are a wide variety of free themes most of which allow for some customization. There are also a variety of apps along with the ability to post by email or phone making it easy to update your Tumblr even when you are away from your computer. The Tumblr user interface is simple. There are seven buttons with one for each type of post. The buttons are logically labeled in non-technical language and the rules are clear. Tumblr also includes an optimized layout for viewing on a mobile device. Unlike many sites, Tumblr makes it easy to delete your blog.

There are numerous free Tumblr themes. Choosing and customizing themes is easy. The customization options for themes varies radically. If you are using a free theme it is good to check the customization options as well as the look of the theme. The Theme Customization options are listed under Appearance.

Tumblr allows a user to create multiple Tumblr blogs under the same account. Thus, you can create a blog for your photography, one for your love of reading, and one for sharing silly stories about your pet.

Just a Quick Post…

Tumblr is particularly suited for the times when Twitter is not enough, but WordPress, Moveable Type, or another full blogging platform are more than you need. Whether it is the link you wanted to share, but which you also wanted to include your thoughts beyond the Twitter character limit, the one picture or texture you wanted to post, the long quote you wanted to share, or the video you just posted on YouTube, Tumblr provides a good platform.

Tumblr also allows for pages separate from posts. Many layouts automatically include these pages in the menu. These are good for “About” pages and for providing more information about the subject of the blog.

The Social Side

One of the challenges of having a blog is getting people to visit it. Tumblr makes it easy to “Like” a post or reblog a post. Following a blog only requires clicking the Follow button. The posts will then appear in a feed. As with Twitter, there is a search function to find posts and others who have similar interests. You can promote your blog for free by being recommended or you can pay to have your blog featured in the Directory.

The Customizations for the social side of Tumblr can be found under “Community” and “Advanced”. Tumblr has good integration with Twitter. Your Tweets can be imported into Tulmblr and you can have send your Tumblr posts to Twitter. Tumblr also has Facebook integration. Tumblr includes several additional options for promoting your Tumblr blog and RSS customization options.

Tumblr allows for group blogging with multiple Tumblr users able to submit posts which can them be approved or denied.

Can I have some privacy, please?

Tumblr is primarily intended for public posts and your primarily blog is public. However, you can create a password protected blog using the same account.

Category Options and Rules

All categories include options for tags, publication date in case you do not want to publish immediately or wish to initially publish privately for editing purposes, the option for a custom URL, and a box to check if you wish to allow Photo replies.

A Text post is similar in format to a blog post with an optional title and the content of the post. A photo post gives you the ability to upload a photo and include an optional caption. A quote post has separate boxes for the quote and the source, thus, easily allowing quotes to be formatted differently than regular text. A link post can include just the URL or also include a title and caption. A chat post works similar to a quote post in that it allows a chat to be formatted differently than a regular text post. The audio post is similar to the photo post with the option to upload an audio file or use an externally hosted audio file and an optional description. Audio files have extra rules and only allow MP3s, one audio post per day, and have a limit of 10 MB. Video posts can be embedded from external sources (ie YouTube) in which case you simply paste the Embed tag. There is also room for an optional caption. Alternately, you can upload five minutes worth of video a day with each file being less than 100 MB.

Advanced Use

While Tumblr is excellent for those with limited or no design and programming knowledge, it also has enough options for those who are more comfortable with design.

Tumblr blogs can easily be embedded in your blog simply by copying and pasting the available code. This allows for additional control over the layout. It also allows you to keep a blog on Tumblr for the social networking and other advantages while easily having it integrate into your website. Tumblr offers additional API information.

Helpful Links

• Tumblr Help
• Creating a Custom HTML Theme
• API
• Themes
• Content Policy
• Privacy Policy

My Tumblr Blog Knot of Light is focused mobile device resources particularly app reviews and iPhone wallpapers.

• Level: Beginner
• Goal: To improve a poorly lit photograph by using it as a base for a painting design.
• Translatable: Yes
• Steps: 6

The preview above shows a small portion of the picture in order to show the details. Click on the preview to view the whole picture.

The Original Photograph

The original picture has poor lighting and is not particularly clear. However, despite its flaws it can be manipulated with Photoshop to look like a flower painting.

Step 1

Go to Layer -> Adjustment Layer -> Levels and adjust the levels by moving the slider so that it goes to the point of the edge of the curve. This will improve the lighting and contrast.

Step 2

This picture needs additional help due to the poor lighting so we will also be adding a curves layer. Go to Layer -> Adjustment Layer -> Curves. When you are done click ok.

Step 3

Goal: Get rid of the noise in the picture.

There are a number of methods for solving this problem. You can use the median filter that comes with Photoshop (Filter -> Noise -> Median), but that does not allow for much customization. You can use the Neat Image Reduce Noise plugin, but the free version can only be used for smaller pictures. For this image I used Medhi’s Noise Shampoo plugin. (Available from Medhi’s Plugins). Use the settings Clean 10.5 and check Enhanced.

Step 4

The noise shampoo gets rid of the noise, but it also makes the image less clear so this step helps remove the fuzziness before adding the paint effects.

Duplicated the layer and sharpened it (Filter -> Sharpen -> Sharpen). Duplicating the image is optional, but I like to make changes on a different layer as it makes it possible to later adjust the opacity.

Step 5

Duplicate the layer. Now go to Filter -> Filter Gallery -> Brush Strokes -> Crosshatch. Use the settings Stroke Length 5, Sharpness 6, and Strength 1. Adjust the settings as needed to fit your picture. In general more detailed objects will need a shorter stroke length than large and less detailed objects. When you have the settings you want click ok.

Step 6

This time duplicating the layer is required rather than optional. Go to Filter -> Filter Gallery -> Artistic -> Paint Daubs. Use the Settings Brush Size 2, Sharpness 5, and Brush Type Simple. Click ok. Go to the Layers Palette. Starting with 50% adjust the opacity as needed. If this step works for most of the picture, but makes a small area too sharp or pixelated, erase around that area.

Click on the final image to see the full-sized picture.

The CSS listed below is a slight variation of the CSS I used for the quote box in this layout. As you can see the CSS that controls even a small part of the design can become quite lengthy. When you add in the rest of the typography and structure and the CSS can look overwhelming.

p.quotebox {
color: #ffc;
font-size: 3em;
font-family: Baskerville, Garamond, Palatino, Georgia, serif;
font-weight: bold;
text-align: center;
text-shadow: 2px 2px 2px #000;
background-color: #300;
border: solid 1px #333;
-moz-box-shadow: 5px 5px 0 rgba(72, 72, 72, .5);
-webkit-box-shadow: 5px 5px 0 rgba(72, 72, 72, .5);
box-shadow: 5px 5px 0 rgba(72, 72, 72, .5);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding: 5px;
}

Break It Down

• CSS for the text color color: #ffc;
• CSS for the font-size: font-size: 3em;
• CSS for the font-family: font-family: Baskerville, Garamond, Palatino, Georgia, serif;
• CSS for the font-weight: font-weight: bold;
• CSS for aligning text: text-align: center;
• CSS for the text-shadow: text-shadow: 2px 2px 2px #000;
• CSS for the background color for the paragraph: background-color: #300;
• CSS for the border around the paragraph: border: solid 1px #333;
• CSS for the text shadow: text-shadow: 2px 2px 2px #000;
• CSS for the shadow around the paragraph box:
  -moz-box-shadow: 5px 5px 0 rgba(72, 72, 72, .5);
-webkit-box-shadow: 5px 5px 0 rgba(72, 72, 72, .5);
box-shadow: 5px 5px 0 rgba(72, 72, 72, .5);
• CSS for making rounded edges around the paragraph box
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
• Code for the padding between the text and the edge of the box padding: 5px

Only Use the CCS You Really Need

Taking Out the CSS3

If you need to design a site that looks the same in all browsers you need to take out the CSS3 which is not yet universally supported most notably by Internet Explorer. Below is the CSS without the CSS3. While CSS3 has some wonderful uses the fact it exists does not mean one always needs to use it. Look at your design and decide whether it really does need a drop shadow for the box, a shadow for the text, and rounded corners. Having made quote boxes before in some case the CSS3 helps. In other cases a drop shadow can easily be eliminated without sacrificing clarity and for some designs sharper edges look better than round ones.

p.quotebox {
color: #ffc;
font-size: 3em;
font-family: Baskerville, Garamond, Palatino, Georgia, serif;
font-weight: bold;
text-align: center;
background-color: #300;
border: solid 1px #333;
padding: 5px;
}

Reevaluate the Necessities

• Does the font need to be bold or is the font you are using thick enough that you can remove font-weight: bold
• Should the text be aligned to the center? Sometimes in narrow columns left aligned text is better and, thus, you can leave out text-align: center.
• If all you want is a drop quote you do not need background-color: #300; or border: solid 1px #333;
• For the box shadow in the original code, rgba was used in order to adjust opacity. If you prefer hex and are not adjusting opacity then use hex.

In Conclusion: Other Methods to Handle CSS

Often the best design or the best design for an element is complicated and takes a substantial amount of CSS to accomplish. There are a lot of websites and it pays (often literally) to stand out. However, especially when you are starting out vast amounts of CSS can be intimidating. Comments in the CSS file help and the more experience you have the more you can easily find the specific CSS you needed. Clearly laid out CSS also helps. However, even with these additional tricks for both the design itself and your own sanity in dealing with the CSS it is a good idea to break down the CSS you have and only use what you actually need.

Why are you designing this website? What is the ‘topic’ of your website?

Your subsequent decisions from the design, to your hosting plan, to whether to include a blog will be determined by your website topic. You can adjust the focus as your site and traffic grow, but it is important to have a general idea of the content.

Combining a personal and business website or a personal and portfolio website means that the material on the personal part of your website can damage the professional impression you give on the business and portfolio parts of the website. While adding a personal touch to your website can give your website an extra boost and encourage repeat readers, truly personal sites should be kept separate.

Who is your ‘target audience’?

A clean professional layout often benefits a business site, but can backfire if the site is intended to have a more personal audience. A person looking for Photoshop brushes, advise about getting a cranky two-year old to take a nap, or researching a cancer support group is less likely to be impressed by a design that gives the commercial focused impression. Looking like you are trying to sell something can damage your reputation as a reliable source of impartial information. The same principle applies to political or social issue sites where appearing to being beholden to a political party or candidate may affect your credibility.

How ‘word focused’ do you want your website to be? How easy do you want to make it to translate your website? Do you want your website to be readable by those who are fluent in the language in which you post or by those who have a more limited vocabulary? A website that is dedicated to your academic papers should have a professional and academic tone. Conversely, if your website consists of Photoshop resources you will expand your potential audience by making it accessible to people regardless of language.

How much are you willing to spend to create the website?

Many programs used in web design (Adobe Photoshop, Dreamweaver, etc) are expensive. Consider not only the actual design, but the design elements (a Twitter icon, etc). Creating the design elements yourself gives you the most flexibility and uniqueness, but the cost of the software can quickly become prohibitive for all, but serious designers. Hosting costs also vary. In most cases you can start with a cheaper hosting plan and then upgrade as your traffic expands. If your website is composed of only a blog or pictures there are free alternatives to a fully hosted site, but if you want a full website you will have to pay for hosting as the standard free hosting options are inferior.

How do you want your website to be organized?

It is highly recommended that you create a general organizational structure before you start designing. Viewers get frustrated quickly if they can’t find the material they want. Especially if you are new to web design get input from others about your organizational structure. Does putting pictures of your dog in the same section as information about old fashioned ice-cream make sense to others or just to you?

A Sitemap is an excellent back-up option as it means anyone who does not understand your organizational structure- and no matter how well you design or how much feedback you get there is someone in the world who will not understand it- can skim through the sections and find the material they want. A search option is also crucial for many websites, but do not rely on it as an excuse for poor design and navigation.

Back in the old days of the Internet you had numerous options for free webhosting with only a small number of sites needing their own domain and paid hosting. Today most of the free hosting options, including the once popular Geocities, are no longer available or are so full of ads that they are useless.

Hosting Pictures

If you are only putting pictures online and you are not a photographer or artist it is often best go simply use a photo hosting service rather than create your own website. Flickr is the best known photo hosting solution. Google’s Picasa also has its supporters. If you do not expect a huge amount of traffic Photobucket is a good option. DeviantArt is a social networking site that can be used to showcase your photography as art. Companies such as Shutterfly, Snapfish, and Winkflash are focused more on prints and photo gifts, but also can be used as galleries.

If you only need to post a few pictures ImageShack is an option which does not require an account, but some people have reported problems with images from ImageShack loading. Please be sure to check the Terms of Service and privacy settings available. If you do not want a future employer or anyone surfing the web to be able to potentially see the picture take advantage of the security setting and use password protection.

Hosting a Blog or Journal

Both WordPress.com and Blogger.com provide free and easy to use options for bloggers. Customization choices are more limited, but there are still nice available designs. For a more personal interactive style journal service there is Livejournal.

Hosting Videos

If you need somewhere to post your new video there is the ever popular YouTube. Even if you post your video elsewhere if you are looking for publicity it is often good to also post it on YouTube. Some people have moved on from YouTube to Vimeo, MetaCafe, Daily Motion, and Pandora TV. Flickr, Photobucket, MySpace, Facebook, and ImageShack also provide video hosting.

Things to Look for If You Choose a Shared Webhost

Although the options listed above are sufficient for many people’s needs sometimes you want a fully hosted website. Shared Hosts (Dreamhost, etc) do have Terms of Service. You have a lot of freedom about what you can post on your website, but there are still a few limits. Many shared hosting services ban or limit sexually explicit material, material about cracking software, etc.

• How long has the hosting company been around? If the company goes out of
  business you may lose your website without any warning (as has happened
  to many people I know).
• What is the host company’s reputation? Do they actually
  provide everything they claim? How often do websites go “down” [are temporarily unavailable]?
• If you are more experienced at designing websites what features do they support? Sometimes user-friendly means “impossible to do more than basic customization” or “you can’t do what you need to do because we are protecting you from making a mistake”.
• How much bandwidth do they offer? How much disk storage? What
  happens if you go over your amount? Can you increase your bandwidth and
  storage and how much does it cost to do so?
• How many email accounts come with the account?
• What sort of technical support is available? How competent, professional, and polite are their support people? How much does it
  cost? Does it include third-party software? (ie What if you are using a
  script that wasn’t provided by your webhost?)
• How often do they back-up your website or do you have to do
  the back-ups? Even if they offer back-ups you should keep a copy on
  your computer and other storage media (CD or DVD, flashdrive, etc).
• Do you have access to log files that include information such
  as the number of hits to your website, what websites link to your
  website, etc?
• Can you register your website (in other words register your
  URL such as http://www.mywebsite.com) with the hosting company? Does it
  allow you to use a privacy function.

If you see a stock photography site you like then bookmark it

Do not depend on yourself to remember it a month or a week or three hours later. Even if the photographs on the site are not relevant to your current project, if the photographs look good bookmark the site for possible use in your future projects. Take advantage of sites such as del.icio.us to organize your bookmarks. Backing up your bookmarks is also a good idea.

Check the terms on the site

Stock photography sites vary wildly in their terms of use. This is especially true for sites that offer free stock photography. Some sites have strict or downright strange terms. If you do not want to abide by the terms do not use the photographs. Chances are you can find a comparable photograph on another site.

Photo Credit: From A Digital Dreamer Free Royalty Free Stock Photographs

Organize the photographs you download

Some sites such as Stockvault include their name in the file name, but many do not. Do not trust yourself to remember which site you downloaded a specific photograph. Use folders or add information to the file name itself. If you are downloading stock photographs for both commercial and non-commercial purposes make note of which photographs are not licensed for commercial use.

Familiarize yourself with the basics of copyright

Copyright law is complicated. Do not rely on the owners of stock photography sites to ensure you are legally using photographs. Getting the advise of a lawyer with a knowledge of copyright issues can also be important. In some places there are differences in copyright laws depending on the use of the photograph. In some places those working on a design for an school or other educational organization are subject to slightly different laws. Adult sites or sites of a controversial nature sometimes have to contend with additional laws.

The content of the photograph itself can be copyrighted

The fact that the photographer has released the photograph for specific uses does not mean that all of these uses are necessarily legal. If the photograph contains a recognizable person, and the standards for recognizable are broad, you may still need a model release particularly for commercial or controversial designs. Logos, certain architecture, and copyrighted artwork are problematic even if the photographer claims no personal rights or acknowledgment.

Consider taking your own pictures

In many cases using stock photography is the only reasonable option. Other times if you have good equipment and talent it is quicker and easier to take your own picture than to spend the time looking through stock photography sites.

Search during your downtime

While some stock photography is heavily dependent on a specific project there are some generic types of photographs that it is good to have at your disposal. Consider finding and downloading these photographs during a quieter time so you have one less thing to worry about when you are under a tight deadline.