You have a magic lamp in your hands, you rub it, and a genie emanates from the spout.

You to the Genie: I’m an experienced Photoshop user… my wish is that I should be able to program a web page in XHTML and CSS without being adept in these languages and without outsourcing the task. Can you deliver, Genie?

Genie to You: Your wish is granted, oh Mighty User!

***

What the Genie was talking about is SiteGrinder,  a plugin for Photoshop that creates valid XHTML code and CSS code from a web page you design in Photoshop. Here’s an overview of the program:

Firstly, using Photoshop alone to create a web page will be as tedious as walking 200 kilometers without food, water or shoes. It involves slicing the image, exporting it to HTML and creating the other pages using an alternate web authoring program.

Added to that, if you need to change the design of the page later, it will be as tedious as catching a fish, throwing it back into the water and trying to catch it again. You would also need expertise in HTML and CSS to work with the fish. But what if you don’t know HTML or CSS?? Are you doomed to a fishless existence?

Absolutely not! With SiteGrinder, you don’t need to be a PhD in HTML and CSS, you don’t have to slice your images up and you don’t need to create code for rollovers or popups. You merely have to perform a few simple steps in Photoshop to make your page SiteGrinder-ready.

To prepare a Photoshop web page for SiteGrinder, all you have to do is assign an independent layer to each element in the document. You should append a suffix (a “hint”) preceded by a hyphen to the layer name to describe the nature of the element to SiteGrinder.

For example, if a text layer in Photoshop contains the text “About Us”, and the name of the layer is ‘About Us - button’, SiteGrinder will understand that the text ‘About Us’ is a button link and convert it to XHTML accordingly.

In this way, you can create all the pages of your web site in Photoshop, and transform them into an integrated XHTML and CSS web site with a single click. Is that a miracle or what?

SiteGrinder comes with abundant help files including detailed video tutorials. Everything is explained, especially the 35 hints (which comprise a feature unique to SiteGrinder and not commonly known).

CONCLUSION:

I have exercised the basic commands of SiteGrinder (hence my terming of this article an “overview”) and have not found any drawbacks so far. I am convinced beyond a doubt that this tool will definitely save a web developer an incredible amount of time.

It’s certainly worth giving SiteGrinder a try — explore the capabilities yourself: in all probability you’ll be delighted!

You can download a trial version from their site here. (not an affiliate link).

You can download a trial version of Photoshop here (not an affiliate link).

Good luck with SiteGrinder, and come back with comments on your experience!

Technorati Tags: photoshop, css, xhtml, web+design

Many of the web designers amongst us would also love to know what the HTML code under the page is like, so we have stripped it naked, looked at it and had some private thoughts about it… we share them with you below.

It is our hope that you will spend a moment or two to express any significant thoughts you have on the article with a comment. Where beneficial to visitors, we will respond to comments.

Before we get down and dirty, we must tell you that we have analyzed the Google Groups page earlier in our parent site, so we already have a fledgling idea about Google’s page code appearance. With that background, our tour of the source code of Gmail’s index page now begins.

We start off with the styles. In contrast to the Google Groups’ style sheet, the main Gmail style sheet is well organized with no clumsy patches of commented-out code. It is embedded instead of external, which is alright considering the fact that the rest of the web site is in JavaScript. It does not contain styles for any of the HTML tags, and lists only class styles with their properties.These styles do not appear to be in any particular order.

Comment: It would be preferable for the styles to be in order of appearance or alphabetical order.

The page uses a simple table-based design and the code is neatly formatted. At one point where a table is closed and another opened, it is pleasant to see a comment explaining why this was done (the reason pertained to a peculiarity of Internet Explorer).

But alas, there is a bit of clumsy CSS in the middle of the HTML code. We note with suspicion two style sheets placed in the section with nothing in between.

Comment: Placing a style sheet in the body section is not customary and perhaps even weird. That said, there is no reason to have the two contiguous style sheets. All this has the smell of patchwork repair.

We are surprised that Google, with its mountain of cash and army of programmers, has not taken the trouble to make its behind-the-scenes workings neat. This is not the case with other large Internet companies like Yahoo, whose code is better by a degree of magnitude. (Check back after a few days for our analysis of a certain Yahoo page.)

Surprise Bonus: An Analysis of the Displayed Page

The Layout:

The displayed page is very good from the usability angle.

It is not ‘busy’, meaning that there is no clutter and no multitude of links to confuse and consternate the visitor (for instance, there are only six links above the fold).

There is an invitation to try the Gmail mobile phone interface: it contains a list of benefits and a call to action, which is good, except that the order of these two features is flawed.

Comment: We think the benefits should have come before the call to action and not after!

The page has been optimized for 1024 pixels width, which conforms to the latest design recommendations.

The Page’s SEO:

The page has a humongous 26,500 backlinks (according to Yahoo Site Explorer), many from government sites like the New York Public Library and authority sites like Wikipedia.com.

There are links to a Privacy page and a ‘Terms of Use’ page.

The page contains many excellent secondary keywords such as ‘account’, ‘attachment’,’ pdf’, ‘photos’, ‘megabytes’ and ’storage’.

Comment: For the above reasons, the page is nicely SEOed.

This concludes our analysis of the www.gmail.com page. It is important that you you add your opinions on this analysis through our comment form; we look forward to receiving and responding to them.