A good text editor is the heart of the hand-coding toolbox. You could use notepad or whatever plain text editor is bundled with your operating system, but there’s really no reason to settle. There are plenty of free alternatives with features to make hand-coding faster and easier.

Windows – Notepad++
Hands-down the best editor for Windows. With syntax highlighting, auto tag completion, code folding, and much more, Notepad++ is a lightweight program with everything you need to code XHTML and CSS. Make sure you grab the TextFX plugin (built into newer versions) and the Explorer plugin (a nice file browser) from the plugin repository. While you’re there, check out the 60 or so other plugins available for even more flexibility and features.

Mac OS X – Textwrangler
Textwrangler is one of the best free text editors for Mac OS X. However, if you’re willing to shell out a little money, I’d recommend either TextMate ($60) or Coda ($99) for more robust features and support. They all have their pros and cons, so give each a try to see what works best for you.

Browser

If a text editor is the heart of the hand-coding toolbox, then a browser is the soul. It’s the reason developers build tableless websites. And for web design and development, there’s no better browser than Firefox. Not only does it adhere to accepted web standards, there’s a ridiculous number of add-ons available to streamline the hand-coding process. Just remember to limit the number of extensions you have enabled so the browser stays quick and stable.

Here’s a list of my favorite add-ons:

• Firebug – I couldn’t live without Firebug. You can tweak CSS properties right in the browser and see the results live, inspect XHTML elements to sort out layout problems, monitor network requests, and more. This is a must-have add-on for Firefox.

• Web Developer Extension – Another add-on with indispensable features. View the generated source code from pages with javascript, disable and enable style sheets and javascript, analyze XHTML elements, validate local and remote markup and CSS, and much more. Plus, it includes some nice features from stand-alone plugins like MeasureIt (a ruler to measure elements in the browser window) and Window Resizer (resize the browser window to test different screen resolutions).

• Live HTTP Headers – It shows the HTTP header calls made with each page load in real time, which can help you sort out issues with caching and redirects.

• Yahoo! YSlow – This is actually an extension to Firebug that works with its network monitoring features. YSlow tests the performance of your web pages and offers suggestions to tweak the underlying code and server settings. Shoot for an ‘A’ grade to push your web development skills to the next level.

• Pixel Perfect – This is also an extension to Firebug. It lets you overlay a copy of your mockup in the browser window, which can save a lot of time flipping between Photoshop and Firefox.

• GridFox – This creates a grid overlay in the browser window. Combine it with Firebug and you can nudge elements into perfect alignment.

• FireFTP – I prefer a stand-alone FTP program, but this comes in handy on occasion. It has all the features you need to upload files, including directory comparison and the ability to transfer through SFTP (extremely important for security).

I know Internet Explorer is the browser everyone loves to hate, but it is used by the majority of people outside of the tech and design communities. Plus, there’s a little-known Internet Explorer developer toolbar that mimics the functionality of the developer toolbar for Firefox. Just food for thought.

Cross-browser compatibility

A website may look great in Firefox, but that doesn’t mean the layout is ready to be released into the wild. Cross-browser compatibility testing is critical and ensures visitors have a consistent experience regardless of the browser they use.

IETester provides Windows users with easy access to Internet Explorer 6, 7, and 8 in one place. It suffers from random crashes, but that’s a small price to pay for the convenience of three browsers in one. (I’ve found that you can avoid a lot of glitches if you open an IE8 tab first.)

If you’re on a Mac, you can to try the spoon plugin, which lets you run your websites through different browsers in an online “sandbox”. There’s also the Adobe BrowserLab. It’s free now, but expect Abode to charge for it in the near future.

In addition to those tools, you can always download the full versions of other browsers. Sometimes there’s just no substitute for the real thing. I have these installed in a separate folder and check finished websites in each one before I wrap up.

• Firefox (Windows, Mac)
• Safari (Windows, Mac)
• Opera (Windows)
• Chrome (Windows)

FTP

FTP, or File Transfer Protocol, is how you upload your shiny new, hand-coded web pages to the internet. FileZilla is one of the best stand-alone FTP clients and it’s available for both Windows and Mac OS X. If you’re using Notepad++ there’s an easy way to integrate Notepad++ and FileZilla so you can edit files directly on the remote server.

Remember to always transfer files through SFTP where possible. Otherwise you send your username and password over the network in plain text.

Local server

If you plan to do more than deliver static HTML pages, you’ll need a local server. A WAMP or MAMP stack (short for Windows or Mac + Apache-MySQL-PHP) allows you to run server-side languages and even database driven packages like WordPress from your desktop. I install Apache, PHP, and MySQL from scratch on my Windows boxes, and there are plenty of online tutorials to walk you through the process. But if you’d prefer a simpler solution…

Windows – XAMPP
XAMPP will have you up and running in a few minutes with everything you could need from a local server.

Mac OS X – Built-in or MAMP
Mac OS X has a built-in Apache server and there are lots of online tutorials that explain how to access it. Or you can go with MAMP, which is a one-click solution that installs Apache, PHP, and MySQL.

Five Finger Coding

Today, IE General Manager Dean Hachamovitch posted a follow-up: HTML5, Hardware Accelerated: First IE9 Platform Preview Available for Developers. Yes, you can now download what Microsoft calls a Platform Preview to test drive Internet Explorer 9 for yourself.

There are also a number of demos to show the improved performance and standards support in IE 9. Judging by several of the demos (HTML5 T-Shirt Designer and SVG-oids are two) it looks like IE9 will finally support XHTML served with the application/xhtml+xml media type. We’ll never know, but I can’t help wondering if the number of people using “real” XHTML would have been greater if Microsoft had implemented support for that earlier.

One of the things that Microsoft claims will be improved in IE9 is type rendering, which I’m looking forward to a lot. To my (admittedly Mac OS X-conditioned) eyes the whole of Windows needs to catch up there.

As Jeffrey Zeldman puts it in IE9 preview:

Thus efforts to catch up to the typographic legibility and beauty of Mac OS X and Webkit browsers are presented, in Dean Hachamovitch’s blog post, as leading-edge innovations.

Type rendering aside, it’s promising to see more information about IE9. Let’s hope Microsoft can live up to what Dean Hachamovitch writes in today’s blog post:

We want the same markup to just work across different browsers. In IE9, we’re doing for the rest of the platform what we did for CSS 2.1 in IE8. IE8 delivered a high-quality CSS 2.1 implementation, sticking to the standard, and looking to other implementations in places where the standard is ambiguous.

I’m still amazed at how few IE8 problems related to CSS 2.1 I have run into. If IE9 can deliver that level of support for HTML5, DOM, CSS3, and SVG… yay!

Makes me wonder how long it will take for IE8 to be phased out.

IE6, IE7, IE8 and IE9 – It’s so crazy!

To create a group of options, wrap them in an optgroup element. To give the group a label, use the label attribute. Here is a simple example:

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

<label for="phones">Select a phone:</label>
<select name="phones" id="phones">
	<option value="" selected>None</option>
	<optgroup label="Apple">
		<option value="iphone">iPhone</option>
	</optgroup>
	<optgroup label="Nokia">
		<option value="n91">N91</option>
		<option value="e60">E60</option>
		<option value="6300">6300</option>
	</optgroup>
</select>

And here is how the browser you are currently using will render the above example:

Select a phone:
None

iPhone

N91 E60 6300

One caveat is that assistive technology support for the optgroup element and the label attribute is inconsistent, as noted in Creating Accessible Forms at WebAIM and the WCAG 2 technique H85: Using OPTGROUP to group OPTION elements inside a SELECT.

So I tend to stick with fixed-width layouts, a 960px web design width in particular. It reduces the effects of the visitor x-factor and it’s just about perfect for any website.

960px for the largest audience and the most flexibility
Below is a screenshot of the screen resolution statistics from W3Counter for September 2009. (Percentages were calculated from traffic to over 27,000 websites.)

The most popular screen resolution for the last several years has been 1024×768. And that’s been trailed by even larger resolutions. Granted, the numbers may change depending on the audience for a website. Sites dedicated to design, photography, or technology, for instance, will show a higher percentage of large screens. But, if you want a website to stay true to your vision for the largest number of visitors, then 1024×768 is the starting point.

From there, you have to take into account all the kooky things visitors can do with their browsers and what design options a particular size offers. This is where a 960px web design width shines.

• It leaves room for browser chrome and window resizing – The title bar, search box, scrollbars, menus, and toolbars all take up space within the 1024×768 viewing area. You also have to account for the fact that some visitors won’t have their browser windows maximized, so you may lose even more space. A 960px width allows you to pack in a lot of information and still leaves room for inconsistencies in window size.
• It’s evenly divided by 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, and more – That leads to a staggering amount of grid options. Whether you’re into complex magazine-style layouts or just want a simple two-, three-, or four-column layout, a 960px width makes it easy to create a well-proportioned design.

What about 800×600 screen resolutions?
Some businesses and government agencies have been slow to upgrade from small displays and ancient browsers. If you’re sure the majority of your audience will sit in front of screens with an 800×600 resolution, then it’s a design limitation you have to live with.

If, however, you just want to accommodate every last visitor (I know the feeling), there’s a workaround. Create your design with a width of 960px, then position the navigation on the right side of the layout. Even though visitors with small screens will see a horizontal scrollbar, the full width of the content area should be visible on every page without scrolling. It’s a compromise, but that’s why I said a 960px width is just about perfect.

As web designers, we don’t have the luxury of creating a pixel-perfect layout for every visitor. But a 960px web design width can go a long way toward putting control over finished sites back in our hands.

Five Finger Coding

border-image:
border-top-image
border-right-image
border-bottom-image
border-left-image

border-corner-image:
border-top-left-image
border-top-right-image
border-bottom-left-image
border-bottom-right-image

border-image currently does not work in Opera and IE.

Let’s start. I use this image for borders:

The syntax to use it is:

1
2
3
4
5
6

-o-border-image: url('border.gif') 27 round round;
-icab-border-image: url('border.gif') 27 round round;
-khtml-border-image: url('border.gif') 27 round round;
-moz-border-image: url('border.gif') 27 round round;
-webkit-border-image: url('border.gif') 27 round round;
border-image: url('border.gif') 27 round round;

Which results in:

Lorem ipsum dolor sit amet.

Or:

1
2
3
4
5
6

-o-border-image: url('border.gif') 27 stretch stretch;
-icab-border-image: url('border.gif') 27 stretch stretch;
-khtml-border-image: url('border.gif') 27 stretch stretch;
-moz-border-image: url('border.gif') 27 stretch stretch;
-webkit-border-image: url('border.gif') 27 stretch stretch;
border-image: url('border.gif') 27 stretch stretch;

Which then results in:

Lorem ipsum dolor sit amet.

For those of you not so lucky as to be able to see this, here are screenshots of the two examples.

The First Example:

The Second Example:

Also use:
-moz-border-image – for Firefox
-o-border-image – Opera
-khtml-border-image – KDE
-webkit-border-image – Safari
-icab-border-image – iCab

Read an original specification here

CSS3 info

Opera Software’s newest browser, Opera 10 with Turbo, was downloaded 10 million times during the first week of release. With record download rates, Opera 10 is already in use by millions of users around the world.

New to the Opera 10 browser is the concept of turbo browsing under circumstances of low bandwidth. Low bandwidth is a universal factor in multiple browsing situations, for example, on a train, in a hotel or in areas with limited connectivity. With the launch of Opera 10 with Turbo, Opera has pointedly addressed the needs of Web users when browsing on slow or congested networks.

• Exclusive Opera Turbo compression boosts slow connection speeds
• Innovative visual tabs displays Web sites in thumbnails
• Intuitive, sleek design
• Easy-to-personalize Speed Dial visual bookmarks
• Everything built-in, no need for extensions
• It’s free!

To rescue the web designers from this aching job of testing browser compatibility in different browsers there are few websites which offer this service. On these websites you can check the compatibility of your website in all desired browsers. You can find these websites below:

Browsershots	Browsershots
Spoon	CrossBrowserTesting
NetRenderer	Litmus
BrowserCam

Private Browsing
Sometimes it’s nice to go undercover. When this feature is enabled, you won’t leave a single browsing fingerprint behind for others to discover. You can slip in and out of private browsing mode quickly, so it’s easy to return to what you were doing before as if nothing ever happened (you can also browse privately all the time).

Forget This Site
Having second thoughts about having visited a certain Web site? With this feature, you can remove every trace of that site from your browser—no questions asked!

Super Speed
Fasten your seatbelt: Firefox 3.5 includes the TraceMonkey JavaScript engine, which gives the browser dramatically better performance than ever before. Firefox has always been fast, but this is the fastest Firefox ever (more than twice as fast as Firefox 3, and ten times as fast as Firefox 2), meaning Web applications like email, photo sites, online word processors and more will feel snappier and more responsive.

Easy Organization
Get your sites in order. Simply arrange the order of your tabs by dragging them in one swift move of your mouse. Or, if your browser window is getting cluttered with too many tabs, just drag a tab out of its existing spot and it will automatically open up in a new window.

Downloadable Fonts
View a wider variety of fonts on Web sites while you surf. Site designers and developers can create custom fonts that will be displayed and rendered properly even if you don’t have the font installed on your computer.

Location-Aware Browsing
Now Firefox can tell websites where you’re located so you can find info that’s more relevant and more useful (for example, getting directions or finding restaurants near you). It’s all optional – Firefox doesn’t share your location without your permission – and is done with the utmost respect for your privacy.

Open Video and Audio
Introducing the future of online media! Firefox is the first browser to support open video and audio formats, allowing practically limitless new ways for sites to display rich content. The open formats also allow modern web pages to display media without requiring a plug-in or a proprietary software download.

And many other… Read more here

For all examples I will use same Xhtml code.

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

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Example - Crazy Xhtml</title>
	<style type="text/css" media="all">@import "style.css";</style>
</head>
<body>
	<div id="wrapper">
	</div>
</body>
</html>

All changes I am doing in the style.css in #wrapper{ … }

Let’s define standard styles for wrapper block of our small website. I am adding borders and background. It helps to see website position.

1
2
3
4
5
6

#wrapper{
	width:400px;
	height:300px;
	border:1px solid #CCC;
	background:#E9E9E9;
}

Center Middle Align (Center Horizontal)

Use next #wrapper styles:

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

#wrapper{
	width:400px;
	height:300px;
	border:1px solid #CCC;
	background:#E9E9E9;
 
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -200px;
	margin-top: -150px;
}

So, in my example width=400px, so for margin-left I calculated value as this 400/2=200. The same do for margin-top – 300/2=150.

You can download example here

Center Bottom Align

Use next #wrapper styles:

1
2
3
4
5
6
7
8
9
10
11

#wrapper{
	width:400px;
	height:300px;
	border:1px solid #CCC;
	background:#E9E9E9;
 
	position:absolute;
	bottom:0;
	left:50%;
	margin-left:-200px;
}

The main idea is same, but I am using bottom=0 to move #wrapper block to the bottom of the browser.

You can download example here

Center Top Align

Use next #wrapper styles:

1
2
3
4
5
6
7
8

#wrapper{
	width:400px;
	height:300px;
	border:1px solid #CCC;
	background:#E9E9E9;
 
	margin:0 auto;
}

If you want, you can add top margin for #wrapper. For example, I add 20px:

1
2
3
4
5
6
7
8

#wrapper{
	width:400px;
	height:300px;
	border:1px solid #CCC;
	background:#E9E9E9;
 
	margin:20px auto 0 auto;
}

You can download example here

Left Middle Align

Use next #wrapper styles:

1
2
3
4
5
6
7
8
9
10

#wrapper{
	width:400px;
	height:300px;
	border:1px solid #CCC;
	background:#E9E9E9;
 
	position:absolute;
	top:50%;
	margin-top:-150px;
}

The main thing is to correct calculate of margin-top.

You can download example here

Right Middle Align

1
2
3
4
5
6
7
8
9
10
11

#wrapper{
	width:400px;
	height:300px;
	border:1px solid #CCC;
	background:#E9E9E9;
 
	position:absolute;
	top:50%;
	margin-top:-150px;
	right:0;
}

The code the same as above, but I add right:0 to move #wrapper to right part of browser.

You can download example here

In Conclusion, I think you can create code for Right-Top, Right-Bottom, Left-Top and Left-Bottom easily using my code above.

Thanks for the reading.

This is a simple example of Creating Cross Browser Compatible CSS Text Shadows. We will not use Images, only clear CSS code which work for all browsers.

Let’s create xhtml code:

1
2
3
4

<p>
   <span class="shadow">Cross Browser Compatible CSS Text Shadows</span>
   <span class="text">Cross Browser Compatible CSS Text Shadows</span>
</p>

I do not know if it is good for SEO, but for this method you need to duplicate content where you want add shadows. I think it is good for SEO, because you will not do shadows for ALL content of your website.

Next step: add this CSS code:

1
2
3
4
5
6
7
8
9
10

.text{
	position:relative;
	z-index:10;
}
.shadow{
	color: #cccccc;
	position:absolute;
	z-index:5;
	margin:2px 0 0 2px;
}

I think this is a very simple way to use shadows.

You can download an example here.