Pixelhaven Web Design | A Cincinnati Web Design Company » Quick Fixes http://www.pixelhavenllc.com Passionate about creating attractive, simple and structurally clean web sites Mon, 23 Jan 2012 22:35:58 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Quick Tip: Using Conditional Comments And CSS http://www.pixelhavenllc.com/quick-tip-using-conditional-comments-and-css http://www.pixelhavenllc.com/quick-tip-using-conditional-comments-and-css#comments Thu, 17 Jul 2008 11:00:41 +0000 Josh Harbaugh http://www.pixelhavenllc.com/?p=37

Continue reading →

]]> I often find myself trying to get Internet Explorer’s various versions to behave correctly in my websites. Unfortunately, Internet Explorer isn’t the sort of browser you can just ignore and hope those users upgrade to something more standards complaint, like Firefox or Opera. So, what’s the easiest way to make sure users on Internet Explorer see your site as intended?

I’ve found that using conditional comments with separate style sheets works the best for me. Sure, it’s a rough-and-tumble solution to be sure, but it works when I’m in a crunch and I need to get a project done. And really, it’s not that bad of a method to use which, I imagine, is one of the reasons for the version targeting in the upcoming Internet Explorer releases.

How do you use conditional comments with separate style sheets?

Well, I’ll show you. Let’s say you’ve noticed some display issues with a new CSS-based design in Internet Explorer. No surprise there, right? You isolated the problem and created a hack to get it working in IE, but you’d rather not clutter up your default style sheet with all this mucked-up styling, so you create a separate style sheet to house these changes. An added benefit of this method is that you can overwrite default style sheets with these new styles to make Internet Explorer behave. Here’s how.

Setup your style sheet link as normal.

<html>
   <head>
   <title>Wicked awesome page title</title>
   <link rel="stylesheet" href="/stylesheets/default.css" type="text/css" />
   </head>
   <body>
      <p>Some information ...</p>
   </body>
</html>

Then, add the conditional comment for Internet Explorer 6.0

<html>
   <head>
   <title>Wicked awesome page title</title>
   <link rel="stylesheet" href="/stylesheets/default.css" type="text/css" />
   <!--[if IE 6]>
   <link rel="stylesheet" href="/stylesheets/ie6.css" type="text/css" />
   <![endif]-->
   </head>
   <body>
      <p>Some information ...</p>
   </body>
</html>

And presto! You’ve got a style sheet that will only get used in Internet Explorer 6.0. What about all the other versions? The 7th version of Internet Explorer helped to improve the browsers understanding of CSS and web standards, so some of the same old issues with Internet Explorer don’t really come up. What if you wanted to load a style sheet that worked for all versions lower than 7?

For that you’d do something like this:

<html>
   <head>
   <title>Wicked awesome page title</title>
   <link rel="stylesheet" href="/stylesheets/default.css" type="text/css" />
   <!--[if lt IE 7]>
   <link rel="stylesheet" href="/stylesheets/ie6.css" type="text/css" />
   <![endif]-->
   </head>
   <body>
      <p>Some information ...</p>
   </body>
</html>

The ‘lt’ just means “less than”, and will target any versions less than 7, and load up the style sheet accordingly. Additional syntax are: ‘gt’ for “greater than” and ‘gte’ / ‘lte’ for “greater / less than or equal to”. This trick can apply to anything you want to show in Internet Explorer but not other browsers, such as, messages explaining to users that they are using a version of Internet Explorer that may not be suited well for the website they are currently viewing and may notice some display issues.

I’d use the conditional comment sparingly, but if you’re in a deadline situation and don’t have time to find a legitimate CSS fix for the problem, I’m all for using this trick to get the job done.

By the way, you can also use this technique to hide/show content from a particular Internet Explorer version. Perhaps a “You are currently using Internet Explorer 6. Though not necessary to use this website, if you’d like to upgrade your browser we’d be able to enhance your experience while you’re here.” message for IE6 users?

UPDATE: As a side note, if you use conditional comments in your markup it will still validate. Conditional comments are actually valid markup, so don’t worry if you like to make sure all your code validates.

]]> http://www.pixelhavenllc.com/quick-tip-using-conditional-comments-and-css/feed 1 Quick fixes to improve your website’s effectiveness http://www.pixelhavenllc.com/quick-fixes-to-improve-your-websites-effectiveness http://www.pixelhavenllc.com/quick-fixes-to-improve-your-websites-effectiveness#comments Sun, 18 May 2008 19:11:50 +0000 Josh Harbaugh http://www.pixelhavenllc.com/dev/?p=21

Continue reading →

]]> A website should always be in a state of improvement and trying to enhance the users’ experience while browsing. The more engaged your readers and customers are, the more likely they are to come back in the future.

I’ve outlined a few Quick Fixes, separating them into the most important categories, that you can implement on your website to help improve it over time.

Copyrighting

Tell readers why they should perform a task
Sometimes people really need to be told “why” they should do something. It’s no always enough to say “Click here”, when “For a chance to win, click here” would do the trick.

Make your most popular pages easier to scan
Break up all those large blocks of text into smaller more manageable pieces. The easier it is to read the more likely your readers are to actually read it.

Make headlines meaningful
Take a page from the newspaper industry’s book – make your headlines engaging and get visitors interested in the topics to be discussed.

Give your visitors a “call to action”
This goes along with telling your visitors why they should perform a task, but it’s always a good idea to start that message with a strong call to action.

Usability

Add an “about” page
Bring a personal touch to your website with a page that describes who you are, what you do, and why they should trust you as a business.

Have a text-based sitemap
This goes along with search engine optimization, but it’s a good idea to include some sort of page with a visual “map” of all the links, categories and sub-categories of your website for easy navigation.

Create specific landing pages
If you’re trying to sell a product or service, make sure you’ve got landing pages with a purpose backing up your campaign.

Add more internal links
Including some internal links into the most highly visited pages will often increase traffic to those pages and keep them at the top.

SEO (Search Engine Optimization)

Implement 301s to consolidate page rank
If you’ve got both a non-”www” and a “www” domain make sure you’ve got redirects setup to direct one to the other and consolidate those URLs. Search engines like that. In fact, Google has a feature that can do this for you if you’ve verified your site with them.

Add a dynamic meta description
Though becoming less important for SEO with some of the search engine “big boys” it’s still often a good idea to give any pages a dynamic description meta tag to do along with the respective content on that page. Typically keep it under 130 characters as this is usually all the search engines use when displaying the description in their search results.

Update your content as often as possible
On the internet content is sweet grapes devoured by the king, and keeping that king happy should be one of your first priorities. The more frequently you are to update the content on your pages the better chance you have to keep at the top of the organic search results for your top keywords as they see your content as being more relevant to their users.

Get rid of those frames
In an age of accessibility and web standards using frames on a website shows the age of that website. Search engines have a hard time crawling the content within frames because of the nature in using this technique. Try to update those frame-based designs with something using HTML/CSS.

Fix broken links
Make sure you don’t have any broken links on your pages as this will often adversely affect your page ranking in search engines.

Accessibility

Offer an alternative to Javascript
Remember, not everyone has javascript turned on in their browsers. Make sure you’ve got an alternative for those that have it disabled or are using screen readers to browse your content.

Provide alternate text for images
This goes along with SEO best practices as well, but make sure all your images have some sort of descriptive text to explain what the image is about as this will allow readers using screen readers to get the full experience. Search engines can also use these for organic searches for keywords.

Design

Place important information “above the fold”
An old term from the newspaper industry, “above the fold” refers to keeping the most important information on the top portion of the paper (the side you see when you pick up that paper at the newstand. Same practice and results. Different application.

Keep it simple
Try keeping your message to a minimum. Users do not like being bombarded with information the minute they venture to your site. Give them a little bit at a time to keep them interested and keep them digging deeper into your website.

Shrink up page filesize
Keeping your pages under 50kb in size is a good practice as this will ensure that your viewers get the optimal performance out of their experience while browsing.

Validate design in alternative browsers
Make sure your layouts stay consistant in different browsers. Not every user is going to be looking at the site with the same type of browser and you wouldn’t want to miss out on a potential sale because the buttons and text looked out of sync with the design and therefore “less professional” to the customer.

Convert PDF files to HTML
Get that text out of those PDF files and into a format that promotes smoother flow and readability.

Conclusion

There you have it. A list of a some of the small improvements you can make over time to your website to increase it’s effectiveness. For more information about any of these tips do not hesitate to send me an email.

]]> http://www.pixelhavenllc.com/quick-fixes-to-improve-your-websites-effectiveness/feed 7