phoenixheart - portfolio & more » css http://www.phoenixheart.net phoenixheart - portfolio & more Wed, 25 Aug 2010 03:02:03 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 Deal with browser incompliance using jQueryhttp://www.phoenixheart.net/2009/04/deal-with-browser-incompliance-using-jquery/ http://www.phoenixheart.net/2009/04/deal-with-browser-incompliance-using-jquery/#comments Mon, 27 Apr 2009 07:34:51 +0000 phoenix.heart http://www.phoenixheart.net/?p=256 Without a doubt, being a serious web guy you want your new site to look perfect on web browsers. Yes, mission would be simple – or sound simple – if there wasn’t something called browser wars for such a long time without any glorious winner (yet). The stupid result is, we poor web designers and programmers are still hopelessly struggling to keep our sites look the same on Internet Explorer (DIE PIG, DIE!!!), Firefox, Opera, Safari, just to find out that the oh so cool banner suddenly disappears from that new boy Chrome. FYI (psst) that was when I decided to stick with web that I started to learn cursing and swearing.

I am so proud to say that I decided to stop supporting IE 6 to save myself some precious life years and keep my head from getting bald long ago. But still, those guys in Microsoft they have IE 7 and 8 to haunt us. And despite of the so-called W3C standards, each of the remaining major browsers renders the pages differently here and there – margins, paddings, form elements, and so on. To deal with them, we use “hacks”. Perhaps the most well known hack is one below, called “conditional comments”:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

<!--[if IE]>
Stuffs for Internet Explorer all versions
<![endif]-->
<!--[if IE 5]>
Stuffs for Internet Explorer 5
<![endif]-->
<!--[if IE 5.0]>
Stuffs for Internet Explorer 5.0
<![endif]-->
<!--[if IE 5.5]>
Stuffs for Internet Explorer 5.5
<![endif]-->
<!--[if IE 6]>
Stuffs for Internet Explorer 6
<![endif]-->
<!--[if IE 7]>
Stuffs for Internet Explorer 7
<![endif]-->
<!--[if IE 8]>
Stuffs for Internet Explorer 8
<![endif]-->
<!--[if gte IE 5]>
Stuffs for Internet Explorer 5 and up
<![endif]-->
<!--[if lt IE 6]>
Stuffs for Internet Explorer lower than 6
<![endif]-->
<!--[if lte IE 5.5]>
Stuffs for Internet Explorer lower or equal to 5.5
<![endif]-->
<!--[if gt IE 6]>
Stuffs for Internet Explorer greater than 6
<![endif]-->

When this technique is great, it has two limitations. First, only IE is taken into account. When most of the time dealing with IE takes the majority, there are still cases when your sites looks different on Firefox, Safari, Opera etc. Second, the HTML code looks very ugly and unprofessional – just like we are humbly telling: sorry this is beyond my control… I must use a hack here… and here… sorry again…

Then today when looking for a better solution, I stumbled upon a much better method that overcomes all of our current problems – well, sort of. The idea behind it is using jQuery to detect the browser and its version, then add the corresponding class names into the <body> tag. For instance, if the visitor uses Internet Explorer 7, then “.browserIE” and “.browserIE7″ are added. Then, in our CSS we specify the styles for this browser:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

#aPainInThe4ssElement
{
    /* generic styles for this pain */
}
 
.browserIE7 #aPainInThe4ssElement
{
    /* styles for this element on IE 7 */
}
 
.browserFirefox #aPainInThe4ssElement
{
    /* styles for this element on all Firefox browsers */
}
 
.browserSafari2 #aPainInThe4ssElement
{
    /* styles for this element on Safari 2 */
}

My hat off to Jon for this brilliant idea. Now dealing with different browsers is just a piece of cake!

Now the only thing I regret of is what took me so long to find out this solution.

]]> http://www.phoenixheart.net/2009/04/deal-with-browser-incompliance-using-jquery/feed/ 5 Make your site *look* pro with simple CSS techniqueshttp://www.phoenixheart.net/2008/10/make-your-site-look-pro-with-simple-css-techniques/ http://www.phoenixheart.net/2008/10/make-your-site-look-pro-with-simple-css-techniques/#comments Sat, 25 Oct 2008 15:11:45 +0000 phoenix.heart http://www.phoenixheart.net/?p=74 Big things are created with tiny bits, that’s what I hear them say. It can’t be more correct with web design – a small detail can change the whole site. In this article (and more to come) I will introduce some small CSS techniques that can make your site look pro – I must emphasize the word, since it’s all about visual effects. After all, it’s always the content that matters.

Photograph-like images

Here is what’s *very* often used to make a photo look like a – erm – photo:

And here is the DEAD SIMPLE style applied:

1
2
3
4
5
6

.entry-extended img.shot
{
    background: #fff;
    padding: 6px;
    border: 1px solid #ccc;
}

As you can see, we simply use a white background color, increase the padding value, and add a thin solid border. Change the style a bit to get what you want. Something like:

1
2
3
4
5
6

.entry-extended img.shot
{
    background: #000; /* A black background */
    padding: 12px 12px 24px 24px /* To make the bottom "border" stand out*/
    border: 1px solid #ccc;
}

will produce this:

There are definitely rooms to improve for this effect (like a drop shadow), but to me it’s enough most of the time.

Stylish horizontal rules

Yes, everyone know about the <hr /> tag and what it’s used for. Here is a horizontal rule at its natural form:

Nothing but a thin gray/black line across your screen. Isn’t it ugly? Now consider this horizontal rule being used at my Thica.net:

Much cooler eh? Here is what helped:

1
2
3
4
5
6
7
8
9
10
11

div.hr
{
    background: url(images/bb_hr.jpg) no-repeat center;
    height: 40px;
    margin: 10px;
}
 
div.hr hr
{
     display: none;
}

We wrapped the horizontal rule inside a div, hide it away, and style the div with a good-looking background image.

So why must we use a <hr /> tag here when it’s not displayed? Isn’t it redundant? Doesn’t a simple line-like image bring an exact result? The answer is: using <hr /> however is the correct way to divide a page’s content. And that’s where SEO come into play.

Drop caps aka. Initials

A drop cap is the first character in a (printed) paragraph that’s often way bigger and different from the remains. For example, the first letter B of this post is a drop cap. To create such an effect, the CSS I’m using is:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

.drop-cap
{
    padding: 3px 5px 1px 5px;
    display: block;
    margin-right: 6px;
    margin-top: 5px;
    float: left;
    color: #fff;
    background: #737b7f;
    border: 1px solid #393b36;
    font-size: 80px;
    line-height: 60px;
    font-family: times;
}

Add this class into any <span> element will make it a drop cap, and your page look like a magazine. For example, this

1
2
3
4
5
6

<p><span class="drop-cap">L</span>orem ipsum dolor sit amet, consectetuer adipiscing elit.
Nullam tincidunt. Vivamus blandit. Suspendisse potenti. Nullam vulputate,
enim sed mattis aliquet, tortor augue pretium tortor, id porta massa urna
id ante. Praesent urna magna, posuere a, facilisis egestas, lobortis a,
nibh. Phasellus nec neque. Maecenas tincidunt, dui ut vehicula vehicula,
nisi mauris hendrerit ligula, id facilisis magna elit sed erat.</p>

will display:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam tincidunt. Vivamus blandit. Suspendisse potenti. Nullam vulputate, enim sed mattis aliquet, tortor augue pretium tortor, id porta massa urna id ante. Praesent urna magna, posuere a, facilisis egestas, lobortis a, nibh. Phasellus nec neque. Maecenas tincidunt, dui ut vehicula vehicula, nisi mauris hendrerit ligula, id facilisis magna elit sed erat.

P.S: There is a pseudo class called “first-letter”, but as far as I know it’s still buggy on both Firefox and IE, so no bother.

Rollover effects

As mentioned in one of my recent post, we can always replace the oh-so-popular javascript rollover effect with a pure CSS solution.

The idea is, instead of attaching onmouseover and onmouseout events into the anchor elements, we use a “double” background image and some lines of CSS to do the trick. Here they are:

1
2
3
4
5
6
7
8
9
10

a {
    background: url(images/rss.gif) no-repeat;
    display: block; /* so that it can have a fixed width and height */
    width: 65px;
    height: 65px;
}
 
a:hover {
    background-position: 0px -65px; /* half the height of the background image */
}

There, we have 2 states in one image: the top for “normal”, the bottom for “hovered”, each is 65px in height. When the mouse is over the link, the “hover” pseudo class will be activated, which simply brings the background image 65px to the top. This results in the “hovered” part being shown (and the “normal” becomes hidden), which creates a cool rollover effect. You can see the demo RSS link right on this page – and be sure to subscribe ;) .

Now what I’m really convinced about this method is, since we have only one image, the effect is seamless – no need to wait for any “hover” image to be downloaded. And it’s Javascript-free, means I can rest assure about the user’s browser configuration.

Enhanced “visited” links

By default, a visited link will have a color of #551a8b (like in Google Search results for an example), with may look too simple or ugly. With CSS, you can decorate those links to be more impressive and stand out from normal ones, which is very good for user experience. In this example, we will mark the links with a “checked” icon on the right.

1
2
3
4
5
6

a:visited
{
    padding-right: 16px; /* Make some room for the icon */
    background: url(images/bgr_visited.gif) center right no-repeat; /* Tweak the positions */
    /* other cool styles here */
}

You can tweak the position until get satisfied with the result.

Here is the visited link that I’ve come up with. Much better right?

And more awaiting…

These are just the most frequently used (by me) CSS techniques. More to come in the new features, when more complex tips and tricks will come into play.

]]> http://www.phoenixheart.net/2008/10/make-your-site-look-pro-with-simple-css-techniques/feed/ 6 Bad practices (and how to avoid them) in web developmenthttp://www.phoenixheart.net/2008/10/bad-practices-and-how-to-avoid-them-in-web-development/ http://www.phoenixheart.net/2008/10/bad-practices-and-how-to-avoid-them-in-web-development/#comments Thu, 23 Oct 2008 07:40:15 +0000 phoenix.heart http://www.phoenixheart.net/?p=47 (Yet another post taken from the ruins of Tekaboo)

Whether you are a web designer or a server side guy, there are certain times when you must get your hands dirty with HTML codes. Since HTML is rich, and even getting richer with the coming HTML 5, many HTML coders tend to do it improperly to achieve what could have done differently (and better). This results in many bad habits that should be avoided.

Table designing

tabletrtd.inter.net

No, tables just won’t die (soon), and I’m not insisting them to. They will live happily so long as this internet still has some tabular data to display, or until W3C decides to replace “table” by “chair” which obviously sounds cooler for developers to write.However, for those who are still using tables to align the paragraphs, links, images, and other HTML objects out there, please dust away the cells and begin playing around with CSS design. There are some very good reasons why:

  • Codes with table design are almost totally unreadable compared to CSS design
  • Tables increase your page’s file size significantly in most cases
  • Table design means more work for the browser, especially when you have nested tables (as most of table designers do)
  • Finally, regardless of all those conservative heads out there, with all of its advantages, CSS design is the future of the web. Take a look around, now every design job posted on every freelance site includes this line: MUST BE IN CSS AND NOT TABLES, sometimes with 3 or more exclamation marks (!) following.

So, don’t be easy to yourself. In your next project, begin CSS. Don’t let tables’ “ease of use” prevent you from following the standard. Anyway, who told you that designing using CSS was that difficult to learn?

Relying on Javascript

I bet that you’ve seen this bunch of codes more than once:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<script type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
    var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
} 
 
function MM_preloadImages() { //v3.0
    var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
} 
 
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
} 
 
function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>

Oh, you’ve not seen it ever? Well, I lost my bet… Under the name of a VERY popular HTML editor, these codes are VERY popularly used, for a VERY popular effect that you must have known (this time I bet, really!!!) – the rollover, or “image-swapping” animation. Basically, there are 2 images involved: one for “normal” state:

click_normal Bad practices (and how to avoid them) in web development

and the other for “hover” state:

click_hover Bad practices (and how to avoid them) in web development

When the mouse hovers that gray image, the orange one is shown up, which creates a “lighten up” effect and somehow tells the user: Click me, I’m sexy & ready.

So what’s wrong with this very cool method, you ask?

  • First, the code is huge. See above. And you must implement a “preloading” feature too, or it will take time for the hover-state image to be downloaded and shown up.
  • Second, this technique is totally useless if the user disables JavaScript.
  • Third, as we have 2 different images here, the number of requests to server is increased.
  • And, don’t you know that browser is painfully slow in displaying an image?

Convinced? Here is the most common solution: Instead of using two images for two different states and make them swap, the HTML experts out there are using just one background image for BOTH states and some attribute of CSS called “background-position” to create a “rollover” effect that doesn’t hurt. I won’t go into details here, since it will in no doubt lengthen this article unnecessarily, but I have a good resource for you. Using this very simple technique, all the disadvantages listed above will just vanish.

With all this blahblah, however, I’m not stressing on a rollover effect alone. What I’m trying to tell is that sometimes you just don’t have to Javascript at all. We know that not everything can be done in CSS instead of Javascript, as JS has undeniable pros. But keep in mind that pros come with cons, and whenever you can, avoid it.

Overusing images

Too many images!!!

I know, “A picture speaks a thousand words” as they say. What a pity that doesn’t apply in web designing – if the term “picture” implies an “text displayed as image”. Following the innovation of Web 2.0 where only content matters, images are being reduced from websites, and yes they have good reasons to do so:

  • Images weigh. A small image can easily weigh ~10KB, that is (how coincident) ~1000 words. If you have a busy site, that image can easily cost you gigabytes of bandwidth each month. It’s money. So how to save some of that bandwidth/money? Use some meaningful texts instead. How about replacing that fancy button with the “Click me” text now?
  • Those are fat, slow. Images are not an exception. A site loaded with images will load v……e….r…….y s…..l….o……..w…….l…..y. And researches have shown that 4 seconds is the maximum loading time a web surfer accepts (some say that it’s 8 sec anyway). Then, if your page takes more than ten seconds to load, unless it has some real pictures about aliens on Mars, users will leave. So, following Mc Donald’s rule: if you want your visitors to stay, don’t make them wait.
  • Images are very bad in term of accessibility. Web visitors with limited seeing ability tend to use the built-in “Text Size” tool available in almost all browsers to increase or decrease the size of text, thus can have a better reading experience. With images, they simply can’t. Very bad, I must repeat.
  • Pages with images all over the place suck in printing. When the acceptable print resolution is 300dpi, normal web image resolution is only 72 dpi or so. This results in a terrible print quality.

With all these proofs (and maybe more that I’ve not come up with), along with the fact that 90% of images on your page are totally replaceable by plain text, let there be text!

Everything is <p>

More than often I encounter websites in which every text content is contained in <p>…</p> tag pairs, where the titles and headers <p>’s are formatted to be bold, with bigger size, underlines etc. to differentiate from other normal <p> elements.

Header and paragraph

It is a misuse of <p>.

<p> is intended to display paragraph content, while heading tags like <h1>, <h2>, <h3> etc. are for heading and title texts. Though you can always use CSS to make a specified <p> to stand out of the crowd to be an article title, and it seems to make no difference or problem in displaying or accessibility or readability or whatsoever, it’s perfectly wrong. According to Wikipedia, <h> tags have something to do with “the document’s structure and organization” and “some programs use them to generate outlines and tables of contents”. So, to human eyes, your page may look like a document, but with cyber programs, it may not. Talking about SEO this misuse will likely result in a low rank in Google.

So here’s the final line: let <p> be <p>. There’s no special <p> in this web development world, please.

“Look what I can do” style

(I must admit, this is the bad habit I’m trying to give up too). Please wait while I'm fading in

Thanks to the open source wave in web development, now creating cool user experiences is easier than ever. Back in the old days, a drop-down menu was a breathtaking effect, and you attracted user attention by making the text blink. Now, it’s a massive number of killing javascript stuffs out there: slide up down right left, fading in and out, shaking, scaling, folding, bouncing, exploding, fish eye, light box, drag and drop… each with one or two lines of code. And you don’t have to care about cross browser compatibility, as they (jQuery, mootools, script.aculo.us, Dojo) have done that already for you. Web developers, we’re at your service!

Ok, wait…

Since effects are all cool, you may want to show them off. “Look this, and this, and this, hey, impressed?” that’s how your website is saying. But (I hate this word, but I have to use it yet again), beware, those fancy stuffs may be something that make your site not accessible. Like, a user may have to click on a link and wait for the invisible div to slowly fade in just to read its content. Isn’t it something tiring? Why must the content be one click (and five seconds) away from him? Why wasn’t it there from the beginning?

Unless you have a very good reason to, don’t ever hide your content from the users. Sure, fading divs are candies for the eyes, but a rushing user’s eyes don’t need any candy. By the way may I ask who’s not rushing today?

What else?

Actually I had something more in mind before starting this articles, such as “Click me” linking, frame structure, Ajax overuse etc., during writing I got a feeling that those are too much into details, so I decided to omit them. Maybe I will put them back into the table (not that table) in the near future.

]]> http://www.phoenixheart.net/2008/10/bad-practices-and-how-to-avoid-them-in-web-development/feed/ 0