As I said before, the paint program is still involved, but I call upon it LAST to make things like border images, gradients, backgrounds and other presentational affectations that may or may not apply to all media targets. Background images and gradients for example have no business wasting people’s ink when sent to media=“print”, so you change those all to background:none; – as a rule for print I usually just display:none menus and “read more” links, set it to black text on white background, and use just text for all the content elements…
The process is thus: First thing I ask is “what’s going to be on every page of the site?” – simple question, usually it’s the topmost heading (site logo/name under which all other headings are subsections), the main menu, and the page footer typically with a disclaimer in it. I plug these into HTML using semantic markup, typically inside a div#pageWrapper to set any widths, heights or other desired layout on. I then take a sample page – like the home page, and repeat the question; what’s going on it? First thing would be the “main content” area like news posts and intro text to tell people where the devil they are. (SO many websites fail miserably at the latter – assuming you have any clue what you’re looking at). I usually put them in that order inside div’s… like say div#subSection… and since most of the time content goes into a two or three column layout with content being the dynamic, I’ll toss in a double wrapping div#contentWrapper, div#content just because on 99% of websites that’s how they’re laid out. Heading tags as appropriate making sure I have a valid and proper heading cascade (for people who navigate via headings like the blind), toss in a few horizontal rules for CSS off users and to semantically say where sections started by major headings end.
I also rarely would ever use images larger than 256px wide or 32K pixels total as they are too large to be deployed on a website IMHO.
I also maintain on my sites a set of ‘targets’ for size of everything combined – that’s HTML+CSS+SCRIPTS+IMAGES – 70k in 16 files is the ideal, 140k in 32 files is the maximum I’ll allow on any page with the possible exception of a gallery page.
In any case, once I have nice semantic markup of the content (or a reasonable facsimile) I start making the screen layout using CSS. By making the elements be placed and sized by CSS, the content and layout can dictate what images to use dodging the bullet of ever having to worry about shoe-horning content into images they don’t fit. I set the outermost wrapper, I set the column widths, I toss in some attractive paddings and margins (usually working in multiples of 2, 4 or 8 since the math is easier AND it’s easier for the computer to work with on rendering)… set the background and foreground colors to something attractive and accessible… and poof, screen layout. Goes very quickly and it’s easy to move things around accurately – MANY times easier than dicking around with layers in photoshop. Client asks “can this text be bigger” you go “sure” change one line of CSS and the whole layout adapts. “Make this brighter” – edit one line… “space these out more” – add padding to one element target, poof they all reposition.
Only at the end do I even THINK about what I want to hang on the layout for images – sometimes I’ll screen-cap the page so I have a color and size reference – then do a paintover keeping in mind that some things need to grow in width, EVERY major content text element should be able to adjust it’s height as the maintainer adds/removes/edits content OR when the user is using large fonts/120dpi or larger settings (something around 80% of sites designed in photoshop fall flat on their face in regards to).
Used to be I used a script I call quickswitchy (which was way simpler than mcSwitchy) to swap a class based on width – I still do this feeding people without scripting a crappy little stripe. Now with media queries I’ve expanded that for phone support too.
To give you an example, this is a template for an upcoming re-launch of one of the websites I maintain… which is in a holding pattern right now waiting on the CMS it’s going to run on to be completed (right now a three man project).
Index of /cbt4Template
That was built on exactly the process I describe in about two hours. View the page with images disabled. Try it with CSS disabled and images on. Try it CSS off images off… Change the screen width and watch the entire layout shift to fit… Admittedly it loses some of the presentation IE8 and lower – but big deal, the layout is still FUNCTIONAL in those browsers. Unfortunately it DOES exceed my size target, being 190k in 24 files – but that’s still better than the current website chock full of nasty web rot, half assed coding techniques, and other vomit that I slapped together 7 or 8 years ago before I understood any of this stuff – which tops out at 160k in 64 files under normal circumstances – but I have to smack the news maintainer around with a wet trout as the news page is now an ungodly 11 megabytes and bloats the home page out to 2 megs… Time to dig out [url=http://homeelectrical.webs.com/photos/electrical-tols/hand%20reamer.jpg]this handy tool.
Sad part is that’s a step up from the DHTML nightmare that preceeded it, or worse the “slapped together in a wysiwyg” before that. It’s kinda comical that with each iteration the page looks better and gets smaller.
Admittedly said layout is not the graphical gloryland your PSD jockeys sit around wanking each-other off over – but neither are any of the major Internet successes. Facebook? E-Bay? Amazon? Google? Not exactly a graphical tour-de-force which is why your artsy-fartsy crap is rarely seen outside personal blogs, local companies who don’t realize their website is a money pit instead of revenue generator, and your art trend gallery websites like “zen garden” – which may be very attractive – and most always ultimately USELESS from an accessibility standpoint with their crappy fixed widths, crappy absurdly undersized px metric fonts, illegible grey on grey or tan on tan well below contrast minimums, serif fonts combined with the small sizes making text even MORE illegible, and most always desiged with the “designer first, who gives a rats posterior about the content.” attitude. (zen garden’s home page alone is proof enough of that)
Again, often very pretty, but ultimately useless if it interferes with reading the content, adding/removing content, or getting your content out to people…
In other words, treat text like the first class citizen of the web it is. Whoever said “a picture is worth a thousand words” lost sight of the fact that you often need one explicit word to get the job done…
Let’s say we were trapped on a beach and didn’t speak the same language. I held out a hot cup of coffee and said “tchukala” – what did I say? Drink? Hot? cup? Coffee? Here? Have some? Want some?
I know, I know… don’t gimme that smegging Star Trek crap, it’s too early in the mornin’
After all, there’s a REASON constructed speech supplemented (as heiroglyphs) then eventually replaced pictographs. Roman lettering and Arabic numerals FTW.
