Jun 052011
 
Firefox 4.01 Acid3 Test Results

The question:  Can users be persuaded to change browsers?

Recently I asked a question on linkedin about how to encourage users to upgrade or change their browsers.  I got a lot of interesting answers and some good ideas, but nothing that put the issue to rest for me.  I’m still thinking about browser compatibility.  The issue at the heart of this whole deal is the disparaging levels of support that browser producers have for css and HTML.  I believe that the answer to the question can be found by educating the end user so they can make the best choices.

Browser compatibility problems

From a development perspective browser compatibility issues make it harder to write web applications that perform as designed because not every browser is going to function the same.  Some of them don’t recognize all of the css properties and don’t use all of the functionality of html.  This is compounded by the fact that CSS2, CSS3, and html5 are not finished works but have been adopted in part by each of the major browsers to varying extents and in different ways.  The lack of timeliness for the production of standards is a bottle neck the progress of the internet.

A browser compatibility benchmark is needed

Enter the Acid3 test by WaSP.  This tool is a great piece for end user education because it scores the browsers compatibility with web standards in an easy to understand score and offers an interactive model.  Users visiting the url where the test is located watch an animation take place on their screen while a score starting at 0 / 100 increments as the browser is tested.  Links with this graphical tool coupled with the right compelling offer could be used encourage users to seek the best possible browser or at least upgrade their current version.  Wikipedia has a great writeup on the Acid3 test if you’d like a little more information on what it does and how it works.  Testing your browser is as easy as visiting the site.  An example of the test result done on Firefox is listed below.  You may click the image to test your browser.

Firefox 4.01 Acid3 Test Results

 

Why should I bother?

The future of distributed software lies within html, css, and JavaScript.  Browsers are the containers in which these applications run and the environment in which they subsist.  By educating the end user and allowing them to make the best decision you will force browser developers to increase their adoption of existing standards and cause the W3C increase the pace at which it finalizes standards.  Over time barriers caused by browser compatibility issues will dissolve and innovation will occur at a much faster rate and improve the end users online options.  While the education of the market may seem to some to be a distraction from business goals, I believe that over time it will broaden the range and increase the depth of opportunities available via the internet.  Additionally consumers which read your educational material will appreciate the fact that you an innovator that cares about their experience and wants them to have the best.

Innovation Lives!!  Stagnation Dies!!- Joel

 

 

May 202011
 

No longer supporting IE6

Today WordPress announced that it was dropping support for Internet Explorer 6 stating in an email to users that “increasingly complex code trickery” was required to make the dashboard work with IE6.  Its a known fact among web developers that IE6 is antiquated and does not support modern web standards supported by most other browsers.  ICanUse.com which rates browser compatibility with emerging web technologies rates IE6 at an 8% implementation of proposed standards from the W3.org.  IE6 also has numerous security holes that cause it to be a liability to the user.  This browser is so bad that Microsoft is begging users to stop using it on their site http://www.theie6countdown.com.  According to the site global use of IE6 is down to 11.4% with usage in the United States at 2.4%.  While 2.4% is pretty low, you’d be surprised at the number of mission critical workstations in corporations that are locked into IE6 because of negligent system administrators.  Just a couple weeks ago I updated a mission critical workstation for a small business that was running it.  We as web developers have got to get the word out that IE6 is not safe to use.  Microsoft offers the following code to place within a site for this purpose:

<!–[if lt IE 7]> <div style=’ clear: both; height: 59px; padding:0 0 0 15px; position: relative;’> <a href=”http://windows.microsoft.com/en-US/internet-explorer/products/ie/home?ocid=ie6_countdown_bannercode”><img src=”http://www.theie6countdown.com/images/banners/warning_bar_0000_us.jpg” border=”0″ height=”42″ width=”820″ alt=”You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today.” /></a></div> <![endif]–>

Here are a few web sites and applications that are no longer supporting IE 6.

  • WordPress and WordPress.org
  • Google.com
  • YouTube.com
  • Microsoft
  • 37signals
  • Facebook

 

Do you know of any web applications that are no longer supporting IE6?  If so comment and let me know.

Joel Caton

May 102011
 

If you’ve done any web site development or if you’ve used several different browsers then I’m sure you’ve noticed that they don’t all quite work the same.  For the most part modern versions of Internet Explore, Firefox, Safari, and Chrome will usually render a page in the same manner but there are some issues with CSS.  Internet Explorer has lagged behind in implementing CSS proposed standards that other browsers have already adopted.  This can make things complicated when developing and insures that users with IE receive a sub-optimized experience. I’ve been working with CSS3 lately and I decided to do a little research about this issue.  I posted the question:

What would be the best method to encourage website users to switch browsers?

on linkedin today.  I qualified it with the following statement and question: Internet Explore does not provide the same experience to users as does Firefox, Chrome, and Safari, because its incomplete support of CSS3. Also, older versions of many browsers don’t render CSS properly. What do you think would be the best way to encourage a user (site visitor) to switch browsers in order to get the optimal site experience? So far I’ve got seven answers back from some very intelligent web developers which include the following points.

  • Excluding users from a site because of their browser choice is not a good idea because some corporate users have no choice of browser due to IT department restrictions.
  • Offering a browser upgrade for older versions that don’t support newer features is less likely to cause a user to feel like they are being forced to make a change.
  • CSS can be structured to degrade gracefully for specific browsers which do not support some of its features using a conditional style sheet.
  • Distracting an end user with messages of browser compatibility may distract them from their visit to the site.
  • If a certain browser performs best with the features of the site then state it somewhere on the site.

After reviewing all of the good advice the main point that really stood out was the point about distraction.  Most clients are focused on the performance of their site and wouldn’t welcome a distraction to their business.  It’s hard to get and maintain the attention of a prospect in today’s media saturated culture so once someone visits the a site most clients won’t want to get involved in a transaction that won’t directly impact the visitors decision to use the business. I guess I’m in a slightly different ball field then the wise contemporaries that have given this good advice.  Most people come to me to ask advice and for a solution to a problem.  I have the luxury of recommending a solution and if it involves using another browser then that’s usually no problem.  The vision I had was one in which developers could act as educators by offering options and explaining things to end users.  Now I know this would not work on every site but on some sites it simply wouldn’t matter.  We have been in a market where consensus cannot be reached on standards because of the few companies that won’t comply and seek to create a differentiated market with products that they are forcing on users that purchase their operating system.  I would like to think that the web development community could change this someday but that will take consensus among us to effect a change.  Lately we’ve seen Google require that users update their Firefox or Chrome browsers in order to be able to access their site’s services and Microsoft excludes users from using the full range of Bing webmaster tools if you don’t have Silverlight installed.  The rule of thumb seems to be the Golden Rule.  If your company has the gold and has enough market share the you can make the rules.  Herein lies the problem of standards differentiation and companies refusing to work with the W3C. I’m hoping that someday we can build consensus in the web-developer community and effect some changes. Your thoughts and comments are appreciated. Joel Caton

May 032011
 

 

Internet Explorer 9 and CSS3 Support

Recently I asked the question What do you think about Microsoft’s CSS3 support in Internet Explorer 9? Is it enough and how well does it compare it to Safari, Chrome, and Firefox? on LinkedIn because I’ve been doing a little work with CSS3 and noted a lack of support from Internet Explorer.  I got several great answers back from some really knowledgeable people all with the same consensus:  Internet Explorer does not support the standards that the W3C put forth and web developers have adopted.  In fact it seems that Internet Explorer is lagging behind the rest of the market because other major browsers such as Opera, Chrome, Firefox, and Safari do a much better job of supporting CSS3.

The Microsoft Monopoly?

I think Microsoft is counting on it’s big boy status and treating the market, its users, and the development communities like it’s got a monopoly on personal and business computing.  This business of requiring developers to craft workarounds and devise CSS hacks to get Internet Explorer to handle CSS without breaking web pages is nuts.  There are many choices for great browsers out there now, and installing and using another browser is a pretty easy thing to do.  There’s no stopping the community from pushing back on this issue and ignoring the idiosyncrasies of Internet Explorer and developing good clean html and CSS that meets the proposed standards and works in all other browsers.

The solution

The best way to win this game is not to play it any longer.  As a developer it’s too easy to post the browsers you support on your website.  Recently when using one of Google’s services I was notified that I had to upgrade my version of Firefox because they didn’t support my current version.  I upgraded and the site works fine.  If Google can ask us to do this then we can ask our users to do this as well.  Developers can change the game by informing users that their sites and web applications run best with certain browsers that are compliant and will render less desirable results with Internet Explorer.

Your thoughts?

- Joel Caton

Apr 262011
 

A quick how to: Create a glow on hover effect on your web pages.

The glow effect:

To get a glow effect you’ll need to use the text-shadow attribute of css3.  The syntax works like this: text-shadow: x-offset, y-offset, blur, color;  You can chain multiple shadows like this text-shadow: x1, y1, b1, c1, x2, y2, b2, c2, …; to create some pretty cool effects.  Just use your imagination.  I initially created my glow effect using text-shadow: 0 0 35px #fffe00; but I wasn’t pleased with the results.  After searching around I found an awesome tutorial at line25.com by Chris Spooner and used the fire shadow listed there.  Chris also has a neon text shadow that is another good candidate for a glow effect.

Fire: text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e;

Neon: text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;

Applying the glow effect to the mouse over hover event.

We will define a color scheme for our links and place the text-shadow in the a:hover attribute.  Simply add the following lines to your css file or inline style statements. You can modify them for your particular color scheme.

a {
color: #05fff3;
}

a:link {
color: #00a8fd;
}

a:active {
color: #ff8c00;
}

a:visited {
color: #00baa7;
}

a:hover {
color:#fffe00;
text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e;
}

Browser Compatibility:

Current versions of Firefox, Opera, and Google Chrome will have no issues rendering these but if you’re using Internet Explorer you’re going to be out of luck.  Microsoft likes to use their own non W3C compliant version of CSS3 and it doesn’t accept the text-shadow attribute which has now been out for over 10 years.

Further reading:

The w3c tip sheet

A good guide to using text-shadow

There you have it.  No images were involved making of this effect.

Apr 262011
 

A summary of how to use css3 to create rounded corners.

Creating rounded corners is easy achieved using the border-radius attribute. Versions of Firefox older than 3.5 don’t support this so you’ll need to use the Mozilla implementation for it. The chart below gives the necessary attributes.

Attribute W3C Specification Mozilla Implementation*
Shorthand Method border-radius -moz-border-radius
Top Left border-top-left-radius -moz-border-radius-topleft
Top Right border-top-right-radius -moz-border-radius-topright
Bottom Right border-bottom-right-radius -moz-border-radius-bottomright
Bottom Left border-bottom-left-radius -moz-border-radius-bottomleft

*For Firefox compatibility.

The Long method:  Specify each attribute individually.

Each attribute can take up to two values an x-horizontal value and a y-vertical value.  Values can be pixels, em – text size, or percentages.  If one value is given then it is assumed for x and y.  If two values are given with values greater than zero then a curve is rendered.

Example:

{
height: 100px;
width:420px;
-moz-border-radius-bottomleft: 20px;
border-bottom-left-radius: 20px;
-moz-border-radius-bottomright: 20px;
border-bottom-right-radius: 20px;
-moz-border-radius-topleft: 20px;
border-top-left-radius: 20px;
-moz-border-radius-topright: 20px;
border-top-right-radius: 20px;

}

The shorthand method: specify each attribute for each corner on one line.

Use the following method: border-radius: X1 X2 X3 X4 / Y1 Y2 Y3 Y4;

Corner designations are as follows:

  1. Top Left
  2. Top Right
  3. Bottom Right
  4. Bottom Left

If Y4 (bottom left) is not given then the Y2 (top right) value is used and if Y3 (bottom right) is not given then Y1 (top left) value is used. If only one value is supplied it is used to set the curve for all four corners equally.

Example:

{
height: 65px;
width:160px;
-moz-border-radius: 20px 10px / 10px 20px;
border-radius: 20px 10px / 10px 20px;
}

We can also set the X and Y values for each corner by setting the border-radius to one value such as: border-radius: 25px;  This assumes the x and y value for each corner is the same and will create an element with the same curve on all corners.

Browser Compatibility:

The following browsers are compatible with these methods.

  • Opera 10.5+
  • Safari 5+
  • Chrome 5+
  • Internet Explorer 9+

It would probably be a good idea to push everyone to upgrade their browser.  I hate to think of all the mangling of beautiful css that Microsoft Windows users are going through with their old crappy versions of Internet Explorer (aka Internet Destroyer).

 

Mar 072011
 

Google Chrome != Additional Options?!!



Paypal payment buttons may not work with Google Chrome

I found this issue and solution while creating an instructional video for brickbybrick.us. It’s a pretty easy issue to correct.

To correct this issue change the following lines in the html created by the paypal button generator.

Change:

<form target=”paypal” action=”https://www.paypal.com/cgi-bin/webscr” method=”post”>

or

<form target=”paypal” action=”http://www.paypal.com/cgi-bin/webscr” method=”post”>

To

<form target=”_parent” action=”https://www.paypal.com/cgi-bin/webscr” method=”post”>

The key issues here were the target=”paypal” and action=”https”. It seems the button generator didn’t include those two aspects when I created them, so when going through an order on the site, the users name, address, and item ordered were not getting posted by chrome. I found a this post with the solution and I’ve tested it with chrome, firefox, and opera it works well.

Hope this helps.

Comments are appreciated.

- Joel


Have a question? Need some advice? Get a free hour of consultation!!     Read More »