Best Web Buzz

Highlighting different types of link

Some of you might already know this technique but for people still learning CSS this might help you.

A link from your website to an external page can be highlighted without using a class or an id for each anchor.

To identify if your link an external link using [href^="http:"]
#container p a[href^="http:"] {
  background: url(images/externalLink.gif) no-repeat right top;
  padding-right: 10px;
}

#container p a[href^="http://www.bestwebbuzz.com"], a[href^="http:// bestwebbuzz.com"]  {
  background-image: none;
  padding-right: 0;
}

<div id=”container”>
<p><a href=”http://www.google.com/”>This is an external link</a></p>

this is how it would look like

External Link Screen Shot

Links mixed with internal and external links
<p>And here is a reasonably long line of text containing  an <a href=”http://www. bestwebbuzz.com/index.php”>absolute internal link</a>, some text, an <a href=”http://www.yahoo.com/”>an external link</a>, some more text, a <a href=”css-button.htm”>relative internal link</a> and then some more text.</p>
</div>

this is how it would look like

mixed with internal and external links

 

You can even do it with this links

mailto:

aim:

<p>Contact me by <a href=”mailto:info@andybudd.com”>email</a><br />
Send me an <a href=”aim:goim?screenname=andybudd”>instant message</a> using AIM/iChat.</p>

This is how it would look like

highlighting im and email links

Unfortunately this does work on IE6 but work on modern browsers.

You can download source here external_link

 

This post will be continueed on the next post so watch out for that.

Reasons not to include ul, ol, li on your CSS reset.

Based on Eric Meyer’s CSS reset on meyerweb.com he included ol, ul, li which was a great help on front-end developers.

Now when you are coding for a CMS (content manangement system) site you don’t want your clients to back to you and ask you why your ul bullets are not showing and your ol is not showing numbers on display. Remember not all clients have the ability to insert inline CSS styling to make bullets and numberings show up each time they will publish a new page.

So I keep my list elements as it is regardless of each various browsers output difference.

I reset margin and padding on the section where styling is not dynamic for end users like comment post, navigations, categories and etc. To keep the design crossbrowser compatible.

I suggest you should understand and study the style first before doing copy and paste.

This just my own approach on list elements, maybe I miss something so feel free to comment on this one.

Graphic file formats and its behavior (JPEG,JPG/GIF/PNG),

Following are the most commonly used graphics file formats for putting graphics on the World Wide Web and how each differs from the others. This would be very helpful for starters on web designing having questions on there mind on what graphic file format they will use. Continue reading »

Why stick to Web Standards?

Certain web developers and web designers have a resistance towards using web standards. Common arguments are It’s too difficult, It works anyway and The tools I use create invalid code.

It’s easy to react emotionally and build up a resistance towards learning something new and abandoning techniques you know and feel comfortable with. However, if you look at the situation logically you will see that there are many benefits to learning and using web standards. A few examples:

• Simpler development and maintenance: Using more semantic and structured HTML makes it easier and quicker to understand code created by somebody else.
• Compatibility with future web browsers: When you use defined standards and valid code you future-proof your documents by reducing the risk of future web browsers not being able to understand the code you have used.
• Faster download and rendering of web pages: Less HTML results in smaller file sizes and quicker downloads. Modern web browsers render pages faster when they are in their standards mode than when they are in their backwards compatible mode.
• Better accessibility: Semantic HTML, where structure is separated from presentation, makes it easier for screen readers and alternative browsing devices to interpret the content.
• Better search engine rankings: The separation of content and presentation makes the content represent a larger part of the total file size. Combined with semantic markup this will improve search engine rankings.
• Simpler adaptation: A semantically marked up document can be easily adapted to print and alternative browsing devices, like handheld computers and cellular phones, just by linking to a different CSS file. You can also make site-wide changes to presentation by editing a single file.

Web standards can save time and money for website creators, and provide a better experience to the website’s visitors. Besides, web standards is the future. If you’re not using web standards already, now is the time to start, or you will risk being left behind.

My web design tools
Adobe Photoshop
I use Adobe Photoshop to create my unique web site template. Some of my co-worker uses Adobe Fireworks. Adobe Fireworks is also a great tool, but I still prefer Photoshop. It is what I am used to.

Adobe Photopshop View

Adobe Dreamweaver
I use Adobe Dreamweaver to help convert or integrate my PSD designs to HTML. Dreamweaver is doing a great job on code hinting and code coloring. A lot of people suggest a lot of authoring tools but Dreamweaver still make my work easy, or I am too lazy learning other web authoring tools.

Nattyware’s Pixie
I use Pixie to get the color hex value of an image. I know you can use I drop tool on Photoshop but this speeds things for me, grabbing colors on my screen. All you to do is press CTRL + ALT + C to get the hex value of a color on screen. You can download it on http://www.nattyware.com/pixie.html for free.

Continue reading »