Pros and cons of making a website “the easy way”

» Pros and cons of making a website “the easy way”

August 21st, 2008 | Filed in: Articles, Web Design |

In this day and age it’s possible to make a website relatively easy and if you know Photoshop it’s definitely super easy. There are many programs such as Sitegrinder 2 and even Dreamweaver that helps you with this process and that could be all good, at least it seems all good. There is usually just one big flaw, the code is no good.

This is really the most major fault when either exporting slices out of Photoshop or using a software like Sitegrinder. They base the design mostly upon images to do this and that which really isn’t that good. Sure, you’ll get a website that looks fine and probably works okay but the loading time will be slow, perhaps even on faster connections.

Let’s take two examples right away. First, say that I have made a site that’s heavy on graphics to make it look the way I want. There are loads of text with effects and many stylish graphics. If you output that source file through an automated process, it’ll render the images either as you choose or as it sees them. By rendering I’m talking about exporting parts of the Photoshop file into a new image. This is bad for several reasons. You’ll end up with way more images than you need that needs to load every time, which causes your site to appear slow.

Let’s take the second example which illustrates another part; the code. Here we have made a site in Photoshop that isn’t as graphically heavy. It’s just got a few graphics in the header but otherwise it’s mostly made out of colours. If you slice this or use a specialized program it will probably only make sure to export the real image as an image and the rest as colours (but most of the time you need to make sure that’s happening). The problem here is the code that’s being outputted (and this is a problem in the previous example as well). It isn’t any good. Usually it’s getting a lot of unneeded code elements added and it usually designs the sites using fixed positioning. This will result in a larger CSS file and a messier one and in the end a little slower loading times.

So what do I suggest? Well, it’s kinda simple! If you are keen on making your own website, by all means do the design in Photoshop but don’t export any HTML from it. Learn a bit about code. CSS isn’t really that tricky. You just have to go in to do it. You’ll end up with a faster site, better control to update your site, new knowledge and a better site as well perhaps on mobile devices and in cross-browser stability.
But now you say ”I don’t have time to learn code!”. I hear you. I have another suggestion. You can either hire a designer (there are plently of designers that don’t charge thousands of dollars for a high-quality website) or just simple sign up with a service that offers templates etc . OR you can design your own site and hire somebody to code it. All of those possibilities will make your site better in the end for everyone!

Tags: Code, Photoshop News, Web Design |

Print Post

Please leave a comment or make a trackback from your own site.

Comments so far »

Chris Perkins said,

Wrote on August 21, 2008 @ 4:24 pm

Actually, SiteGrinder is a very good optimizer. Did you explore it?

In your second example, you have rectangles of solid color that you say would be needlessly output as graphics. That might be what you would do if slicing, but if these color rectangles are individual layers, SiteGrinder will output them as HTML/CSS only, no graphic at all.

If you have a graphic that repeats on a page, or across pages, SiteGrinder can detect this and output it only once, no needless duplicates. If you have overlapping non-interactive graphic layers that are repeating across pages, SiteGrinder will automatically merge them together for you and output just one graphic for all of them

Similarly, SiteGrinder finds CSS entries that repeat and/or share a majority of content, and groups them together. It also groups your CSS into a common.css file for those entries that are shared across pages, and individual CSS for the CSS that is unique to any page.

And, for any Photoshop text layer, you can choose to have it output as styled HTML text (no graphic) or as a graphic. It even warns the user if it detects a page will have no real HTML text on it when converted.

SiteGrinder supports background colors for the page and/or browser window area (no graphic needed for those). And the Pro edition supports repeating tiles, so it can exploit Photoshop’s Pattern Overlay layer FX and output a very small graphic sliver and set the repeat value on that graphic for you. It has a few different tile options and users use them to fill the browser with gradients, make infinite headers, put drop shadows on the page, etc. What is nice about SiteGrinder’s tile ability, as opposed to setting something like this up by hand, is that SiteGrinder will include it any compositing that needs to happen, so your other layers will be correctly composited to the tile (if they have any drop shadows, anti-aliasing, etc.)

SiteGrinder isn’t a good tool for all sites, but if a Photoshop design is the starting place, it’s probably the best option. SiteGrinder doesn’t create code that is as good as an expert web developer, but it does produce validating XHTML and if used properly it’ll do B or B+ level work. Much better than you probably think.

But on the optimization front, the subject you broached, SiteGrinder, when used properly, does a fantastic job. Given the same constraints of taking some graphic-intense Photoshop created design to the web, SiteGrinder will produce a smaller download than a human can 99% of the time. Optimization is the type of thing that computers are really good at - you don’t want to compete with them on that field.

And, SiteGrinder is fast. If you have a Photoshop design and don’t want to waste your time doing the monkey work of re-producing it by hand in DreamWeaver, use SiteGrinder. If you are worried about the resulting code and want that A level work, do what many people do: save time by using SiteGrinder and then modify the code downstream.

I’m one of the SiteGrinder programmers. We didn’t write it because we thought the world needed another slicing tool. We wrote it because we were getting handed Photoshop files as source designs all the time, and there was no good alternative. Either do the monkey work by hand, or use a slicing tool that produced terrible brittle 1997 era HTML. We wanted something that did it better. Something that would optimize correctly, produce standards compliant markup, supported text, and, most of all, produced usable output while saving time.

Chris Perkins
Media Lab, Inc.
http://www.medialab.com

Erik Bernskiold said,

Wrote on August 21, 2008 @ 4:34 pm

Chris, perhaps I should admit attacking SiteGrinder a little too “personal”. I tried it briefly a while ago and I don’t know whether any updates has been made. I will go ahead and post a continuation of this topic as my intentions were never to really attack site grinder itself (thus I’ve now changed the image of the post as well). The rant is mainly focused on the “get a quick website” way with everyone ignoring the need for content compability. Perhaps I should go ahead and review SiteGrinder by itself, I’ve always thought it as better than Photoshop yet still not good. Possible things are that it has improved.

Chris Perkins said,

Wrote on August 21, 2008 @ 5:12 pm

Thanks for being open to feedback. You should definitely check out SiteGrinder more. While no miraculous panacea, we’ve worked hard to make it as “best practice” as we can, not an easy task given that its starting point is a Photoshop file. The SiteGrinder hints a serious web developer needs to keep at the ready are -text, -tile, -grow, and maybe -xmedia. Be sure to check them out next time you try it.

I’m a big advocate of standards and correct semantic markup, and poorly executed markup drives me crazy(*). Though, I’m not without sin myself.

Oh well, onward and hopefully upward.

Chris

(*)My personal peeve is (nearly daily) seeing some supposed expert advising people to set an empty alt attribute ( to get their code to validate, rather than realizing that if there isn’t an obvious alt interpretation for an image it has no business being in the HTML as a semantically significant element at all. It should be a with a background-image CSS attribute set.