Archive for the ‘CSS’ category

5 Tips to Make Sure Your Website Looks Credible

November 12th, 2013

Have you ever clicked on a website, felt that warning alarm go off in your gut, and quickly navigated away hoping that you haven’t contracted a computer virus? We’re with you. The last thing you want is for your own website to set off warning bells for potential visitors. Keep your visitors from running the other way by improving the user experience and layout of your site.

5_tips_to_make_your_website_looks_credible_2

Keep it Simple

Maybe you just started with a couple cool images on your site to make it more interesting. But now, you’ve got banner ads, pictures, text, and links fighting for space. Take a look at your web pages and decide whether you need to de-clutter. Should you remove some images? Do you need to realign your items? Aim to keep your layout clean and simple, and never underestimate the power of white space.

Make It Speedy

Most of us have more similarities to that girl screaming “I want it NOW!” at the chocolate factory than we’d care to admit. You and your visitors probably wouldn’t wait too long for lavish graphics and widgets to appear five pixels at a time. There are a few ways to improve your site speed, such as optimizing your website by compressing large files, and using efficient CSS coding. We’ve written a few articles on how to improve site speed, and you can check them out here.

We love Google Page Speed as well: it will evaluate your site performance and give you some tips on how to improve its speed.

Make Sure Information is Up-To-Date

If your website is for a company or business, make sure your operating hours are accurately listed. Also remember holidays hours and exceptions. Most importantly, if you’re offering limited-time only promos or holding an event, be sure to take down the information when the event has passed. You always want to give off the impression that you have a great team working to keep your content accurate, current, and trustworthy.

Pay Attention to Your Stats

In particular, look at your top entry and exit pages. These can be vital clues on whether your site is grabbing attention and enticing visitors to stick around. You can use Google Analytics to analyze your website statistics. For our cPanel server clients, there is a built-in analytics tool to make this step even simpler.

Make Your Logo Your Beacon

This might seem like a little thing, but a logo that links back to your home page can boost the credibility and user experience of your site immensely. It is now the professional standard to have a clickable logo, ready to teleport visitors home.

These are five simple tips to improve the credibility of your website! Just keeping the user experience in mind can prevent you from scaring off visitors with a poorly thought-out site. Overall, you want your website to be as professional, user-friendly, and trustworthy as can be.

2011 Design Trends for Small Businesses

November 24th, 2010

It is very often difficult for small businesses to keep up with the latest design trends because of the cost involved with redesign and the ever-changing interests of their customers (ie. the increasing popularity of mobile devices). But there are a few web design trends from 2010 and leading into 2011 that small business website owners could consider.

1. Keep Flash to a minimal

More and more website designers and developers are staying away from Flash-only solutions for video, animation and navigation. The primary reason – Flash is not accessible on most mobile devices. As a customer, there is nothing worse than visiting a website from a mobile phone only to find that I am unable to access contact information or list of products/services because the content was built in Flash. If you must use Flash, use it sparingly and provide a non-Flash version of the content for your mobile users.

2. Rich Typography

Typography is an important component of any web design and in the past year, thanks to services like Fonts.com Web Fonts, Google Web Fonts and TypeKit, you can use web fonts on your website with very little effort free or very nominal costs.

3. Mobile-Optimized Websites

Is your website small-screen friendly? Having a mobile optimized website means not only will your website load faster over cellular data connections, but that the content is formatted to be viewed on smaller screens. If your potential customers read your website on mobile devices, you want to be sure that your site is displayed correctly for them.

4. HTML5 and CSS3

HTML5 is the most recent revision of the programming code used to build websites. CSS3 is the most recent version for stylesheets. These new versions allow coding to replace Flash, custom graphics and other third-party plugins.

5. Magazine Layouts

Old fashioned column layouts are being replaced with magazine layouts. This also includes web pages with easy navigation, interesting articles, large images, and lots of sub-headlines. You will also see less text on web pages and more succinct messages. You want to give your message in just a few clear words. If you are using WordPress, you will find many magazine-style themes available for download. For ideas: 20 of the Best Free Magazine WordPress Themes

6. Social Media Icons

Social media icons, ie. Twitter, Facebook and Digg, will continue in popularity – the social media landscape is still growing rapidly. To see the various icon sets available: 33 Beautiful Social Media Icon Sets for Designers and Bloggers

7. Lighter Colors

For most businesses, white, beige, tan and grey will be the dominant colors. Text will be dark grey on a white background and accent colors will be brought in through the use of large and vibrant images or graphics.

More Great Looking Fonts for your Website

September 14th, 2010

In an earlier post we’ve looked at how you can add fancy fonts to your website using Google Fonts API. to your website. Now, let’s look at another font provider, Fonts.com.

Like Google Fonts API, Fonts.com Web Fonts, officially launched on September 14, 2010, lets you add fancy fonts to your website in just a few easy steps:

    • Choose fonts
    • Set selectors and assign fonts
    • Save and publish

Fonts.com Web Fonts will then provide you with all the necessary codes that you’ll need to post to your website files.

Things we like about the Fonts.com Web Fonts:

1. It offers more than 7,000 fonts. Even on the free plan, you get more than 2,000 fonts. Check out their font library

2. It supports more than 40 languages, including Arabic, Chinese, Japanese and Korean. Check out the list of supported languages

3. It is supported on all major browsers, including Internet Explorer, FireFox, Safari, Chrome and Opera. It also works on the iPad, iPhone and iPod touch devices.

Things that we didn’t quite like about the Fonts.com Web Fonts:

1. Users on the free plan must display a Fonts.com Web Fonts badge on their website. This badge is served automatically to the website, so there is no way of manipulating its display. The only way to remove it is to upgrade to a paid plan. However, Fonts.com has waived the badge requirement until Jan 1, 2011.

2. Multiple fonts cannot be assigned to a single selector. Each style can only be assigned to a unique selector.

3. Fonts.com offers two ways of displaying web fonts on your website – JavaScript and CSS. Unfortunately, the CSS file method is only available to users on the paid plan.

For more information about the Fonts.com Web Fonts, please visit their website at http://webfonts.fonts.com

Google Font API on Your Website

August 25th, 2010

Anyone who’ve designed a website would agree that one of the most frustrating aspects of designing a website is fonts – the font you choose needs to be already installed on your visitors’ computer or device, and yet the selection of the web-safe fonts is quite limited: Arial, Georgia, Verdana, etc. If you want a fancy font for your title, you’d need to convert it into an image using Photoshop or applications.

Then, in May, Google launched the Font API and Font Directory. To get an idea of what you can expect from the Google Font API, check out the Google Font Preview.

The Google Font API lets you use the web fonts that are in the Google Font Directory, currently over 25 fonts. With the Google Font API, you can now add high quality open source fonts (fonts that work all major browsers) to your website. Best of all, it’s easy to use and it’s free!

Exciting, right? Definitely!

Let’s try implementing it onto a website.

There are two steps for using Google Font API.

1. Reference the CSS stylesheet you need within your HTML file, with the tag inside the tag. This reference should be in all web pages that will use the font(s).

It’ll look like this:

<head>
<title>Home Page</title>
<link rel=”stylesheet” type=”text/css” href=”http://fonts.googleapis.com/css?family=FontName”>
</head>

Replace the “FontName” with the font you wish to use from the Google Font Directory.

If you are using WordPress, you can simply add the code to your header.php file, inside the head tags.

2. Use CSS to specify how you want to use the font. For example, you want to use the font on all h1 header tags, you would use the following CSS:

h1 {
font-family: ‘FontName’;
font-size: 18px;
}

Styles

By default, you will get the normal style of the font. If you want display another style, such as bold, you add colon (:) at the end of the font’s name followed by the style you want. If you need more than one style, simply separate them with a comma (,) like this:

<link rel=”stylesheet” type=”text/css” href=”http://fonts.googleapis.com/css?family=FontName:bold,italic>

To see the Font API in action, check out Smashing Magazine’s website. They have relaunched their site using the open source Droid font hosted by Google.

Multiple Fonts

If you want to use more than one font, you don’t need to make multiple references. Instead, add the additional fonts in the same reference, separating with a | symbol, like this:

<link rel=”stylesheet” type=”text/css” href=http://fonts.googleapis.com/css?family=FontName:bold|AnotherFontName” >

SEO Implications

Google Font Directory is more SEO-friendly because it replaces the fancy title images you have been using – not only does it load faster, the text styled is also searchable.

Another advantage of using Google Font API – the font file is served by Google, not you, guaranteeing uptime and speed. If a user has already visited another website that uses Google Font API, they might already have the font you need in their browser’s cache, further speeding up the page response time.

For more information on using the Google Font API, including the offical Get Started guide from Google, visit Google’s website.

Tweaking your WordPress Theme (Part 3)

August 23rd, 2010

In this post, we will discuss the remaining 3 tips on tweaking your WordPress theme

Changing the Sidebar

The sidebar is the narrow vertical column placed either on the right or left-hand side of on your theme, and often jam-packed with lots of information to provide navigation for the visitor. The list of navigation item often includes Categories, Pages, Archives, Search, Recent Posts and Recent Comments.

The information displayed in the sidebar is controlled by the theme’s sidebar.php file.

Take a look at the file and you might see:

<?php wp_list_pages(‘title_li=<h2>Pages</h2>’); ?>

The Categories list might look like:

<li id=”categories”><?php _e(‘Categories:’); ?>

<ul>

<?php wp_list_cats(); ?>

</ul>

</li>

You can change the sidebar by editing the sidebar.php file. Or, you can also use the widgets subpanel ( located at Appearance > Widgets) in your WordPress admin panel to add and change your sidebar (this option does not require you to know any scripting). If you have installed and activated sidebar plugins and widgets, you will find these plugins listed in the widgets subpanel.

For more information: http://codex.wordpress.org/Customizing_Your_Sidebar

For more information on the Widgets subpanel: http://codex.wordpress.org/Widgets_SubPanel

Add Contact Form

By now, we all know that adding a mailto link on a website is the easiest way to increase the amount of spam in your inbox. Instead, use a contact form. WordPress has hundreds of contact form plugins you can choose from: http://wordpress.org/extend/plugins/search.php?q=contact. Contact Form 7 (http://contactform7.com/) is the plugin that we would like to recommend to you.

All you need to do is install the plugin, activate it and design your form, then add it to your page in just a click.

Add Google Analytics Tracking Code

Everyone wants to know how many visitors come to their website. Google Analytics is the most popular tool for tracking your website traffic. Adding the Google Analytic tracking code is very easy – setup an analytics account with Google and copy and paste the provided code before the </body> tag on the footer.php file (so that the code is embeded at the bottom of all pages of your website).

For more information: http://wordpress.org/extend/plugins/google-analytics-for-wordpress/