Best Practices for Speeding Up Your Web Site

The Exceptional Performance team has identified a number of best practices for making web pages fast. The list includes 34 best practices divided into 7 categories.


CSS and Browser Compatibility Chart

We have a lot of browsers poping up every year. Not to mention the versions they come in. At times it can prove difficult to check if the website you have designed would look good in all browser. Browser compatibility has always been a web designers nightmare. Taking into account of this, i thought it would be useful to have a look at the various selectors and declarations used in the CSS 2.1 and CSS 3.

I would suggest you stick to CSS 2.1 as of now and use the advanced selectors judiciously based on your client browsers.


***Unfortunately this WordPress-hosted

***Unfortunately this WordPress-hosted blog does not allow deletion of the “Jump to Comments


Avoid Outline for textboxes on focus in Safari

Safari has its own amazing styles with it. Most of them are pretty cool and makes the browser stand out. But some of them can affect the screen structure. One of them would be the blue outline that textboxes have on focus.

The solution to this is a simple css fix.

input:focus{

outline : none

}

Voila! This would solve the blue outlining on focus issue of Safari.


Avoid Resizing of textarea in Safari

Safari has its own amazing styles with it. Most of them are pretty cool and makes the browser stand out. But some of them can affect the screen structure. One of them would be the resizing of the multiline textboxes or textarea in Safari. But the solution is quite simple css fix.

In the css for textarea, add the following section:

textarea{

resize : none;

}

Voila! This would solve the resizing issue of Safari.


CSS fixes based on Browser versions

IE Specific CSS loading:

There can be scenarios wherein you might want to load IE version specific CSS. Say an IE6.css file for IE 6 and below, IE7.css for IE 7 alone. In these scenarios, it is good to exploit the conditional comments that IE layout engine Trident look upon.

Check the code below to check out how to implement these comments:


Stylesheets for Mobile Browsers (agh!)

I sat down this morning and asked myself what my blog post would be about. Since I’m coming off of a marathon CSS coding session last night, that leapt to the front of my mind.
You see, last night, I set out to redo the design for my website (www.ryanhoover.net – new design’s not up yet as of 01.30.2010). I took the easy route and started out with a CSS template off a creative commons-licensed site. I know, I know. Real designers don’t use templates – but who said I was a “real” designer. Anyway, that started out all well and good. I was able to migrate my site’s content and general philosophy to the new design pretty easily.


Saltwater - Design

After our seminar on Friday, and handing in my project, we’ve all been asked to design a second web design for the same retail establishment. This is to make sure we are not just going with our first idea and pushes us to think of more design styles and options.

In trying to design a second version of the Saltwater site, I’ve tried to think ‘outside the box.’ Last night at 03.33am it happen. The image below is just a very quick mock-up of what I want to try and acheive with this new design.

I was looking for inspiration on the web -


Internet Explorer Bugs

Internet explorer is considered as the most widely used browser over the internet. However, this buddy comes up with some weird bugs in every version of it. I will be giving you a high level view of the bugs that IE has got. To get the indepth view of these bugs, i would recommend you to go through the following site.

http://www.positioniseverything.net/explorer.html

Bugs:


Bye-bye IE6?

Anyone involved in web design will have probably, at some point, spent a good half-an-hour, banging


Including a css style from a plugin on wordpress

there are many ways to do it, but I will show just two of them.

The first way is doing the following:

Using the wp_print_styles tag:

add_action('wp_print_styles', 'add_my_stylesheet');
function add_my_stylesheet() {
$myStyleUrl = WP_PLUGIN_URL . '/myPlugin/';
$myStyleFile = WP_PLUGIN_DIR . 'style.css';
if ( file_exists($myStyleFile) ) {
wp_register_style('myStyleSheets', $myStyleUrl);
wp_enqueue_style( 'myStyleSheets');
}
}

The second way is printing it on the header file.


How to style type for beautiful headlines in topics and articles

Typechart,  lets you preview a popular fonts used for headlines and style them correctly with l


Silverlight 3: HTML dropdown menus fall behind Silverlight

If when you hover over the dropdown menus in your website and find that they are disappearing behind your Silverlight media elements in the page making it impossible to click on the hidden menu items, there is a simple solution. You need to activate the ‘windowless’ mode for all Silverlight media elements which are within reach of your dropdowns.

To do this just add the following parameter to your object markup for the Silverlight element.

Your object markup should now look something like this:


Trial & Error

Just when I thought I was done with my blog design….BAM! Wrenches, axes, and hammers get thrown my way. Let me explain…

A few days ago I realized (through a very reliable source in the WordPress.com forums) that it’s kinda important for your blog title to appear in your header/banner. Apparently for searchability and browser indexing purposes. Waaaaay over my head. Being that I have learned quite a bit in the trusty WordPress forums,  I trusted my source. One problem. My blog title didn’t work with my header. Meaning, I couldn’t center it. I couldn’t left-align it. I was stuck. Nothing looked good. Here’s where I had to start changing things…


Grow old along

Grow old along with me; the best is yet to be.