web-design-scales-1

Web Design Tips

Whether you are looking for a web designer or you intend to build a website yourself, these tips may help you end up with a professional site that you can be proud of for years to come.
Goin’ Mobile, Keep Me Movin’
We have written an article in our “Tutorials & Articles” section that describes the benefits of designing your website with mobile device users in mind. Smaller screens mean approaching your website design in a new way. You can read all about it HERE.
Too Cool For Business School
A webpage with a lot of links and graphics may look impressive, but if your visitors cannot quickly find what they are looking for, they may simply go somewhere else. In addition, multimedia, Flash and otherwise graphic heavy sites can suffer from long download times, testing your visitor’s patience. It would be hard to imagine that Craigslist or Google would be more successful with a graphic laden, uber state of the art design. In these cases, less is more, and visitors appreciate that. The product or information that you are providing is the most important asset to your website’s success (content is king!), and keep visitors coming back for more.
That Looks Fontastic!
When choosing fonts for your site, it is better to use sans-serif for general text and sarif fonts for headlines only. Sans-serif fonts are much easier to read on computer monitors. It is easy and safe to use standard font families that are preinstalled on most computers, such as Verdana, Geneva, Arial, and Helvetica, or use generic names such as cursive, fantasy, monospace, sans-serif, and serif. With a little extra effort, you can now pick from hundreds of different fonts by incorporating Google Fonts into your project.
Easy Reading Is Hard Writing
The average adult in the U.S. reads at the 8th-grade level. If your goal is to reach the largest number of viewers, your text should be tailored to meet the reading skill, interest, and patience of your expected average visitor. People tend to scan web pages, so it is important to get to the point early. Keeping your content understandable, short, and focused will please your visitors and result in lower bounce rates.
Don’t Go Changing To Try And Please Me
To project a professional image, your web page design and layout should be consistent throughout the site. Keeping headers, footers, menus, fonts, colors, and backgrounds relatively the same on each page helps your visitors easily navigate your site through instant familiarity. Since viewers don’t always first arrive on your home page, it is important to design each page as a potential landing site with a clear and easy link back to your home page.
Think Opt-In So They Don’t Opt-Out
Background music or videos that automatically start playing when a web page is loaded may not be appreciated by a large number of visitors. People surf the web from their place of work, the library, and at night when others are sleeping. In these situations, a potential visitor of your site may just hit the back button to stop the noise. If your website truly needs to have music or videos, such as a band or a tutorial site, provide a prominent link or button to turn on the sound or video.
No one goes there anymore. It’s too crowded.
Leaving plenty of white space on each web page gives your site a sense of neatness and spaciousness. Information that is packed tightly, using most of the available screen space, can make it hard for your viewers to find and concentrate on the information they are looking for. Think of the pleasant feeling you get from a room in your home that is tidy as opposed to one with clothes, boxes, papers, and dishes scattered about. Hang that jacket up and divide the content into separate pages.
search1

Replace Watermark From Google Custom Search Text Box

Here is a method to replace or remove the watermark that is within the Google Custom Search text box using CSS. The default watermark is an image file that reads “Google Custom Search”. In order to replace this, you need to create a new image with the wording of your choice. If you just want to remove the default image altogether, there is no need for a new image.
Replacing the watermark image: Copy and paste the following code into your stylesheet (.css).

Continue reading

responsive1

Responsive Design – Multi Column Layout

The following is an example of an adjustable width, 3 column / 1 row layout that will respond well to smaller screens such as smartphones and tablets. If you view this code on a smartphone (portrait orientation), it will adjust to a 1 column / 3 row layout. Add or remove columns as desired. Change the percentages of the columns to use the amount of space you need for each one, without going over 100% (including padding width).
I am leaving the css in the style tag for this example, however it is recommended that you put it in a .css file and call them with the class tag.

<div style="width:100%;">

<div style="text-align:center;"> <!-- This will center the three blocks of text/images with the width of the container. -->

<div class="multi-col" style="width:30%; min-width:250px; display:inline-block; padding:3%; text-align:left; vertical-align:top;"> <!-- text-align:left will left justify the text within this particular block. -->
Continue reading